/* szerokość scrollbara */
::-webkit-scrollbar {
  width: 8px;
}

/* tło scrollbara */
::-webkit-scrollbar-track {
  background: transparent;
}

/* suwak */
::-webkit-scrollbar-thumb {
  background: #7D8BB9;   /* ciemny bordowy */
  border-radius: 20px;
}

/* hover */
::-webkit-scrollbar-thumb:hover {
  background: #45517b;
}

:root{
  --bg0:#071427;     /* bardzo ciemny granat */
  --bg1:#061225;
  --ink:#eaf0ff;     /* jasny tekst */
  --muted: rgba(234,240,255,.68);
  --muted2: rgba(234,240,255,.50);
  --grid: rgba(234,240,255,.10);
  --grid2: rgba(234,240,255,.07);
  --serif: "Instrument Serif", serif;
  --sans: "Inter", system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  --mono: "Space Mono", ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", monospace;
}

*{ box-sizing:border-box; }
html,body{ height:100%; }
body{
  margin:0;
  color:var(--ink);
  font-family: "Space Grotesk", sans-serif;
  width:100vw;
  height:100vh;
  background: radial-gradient(1200px 600px at 25% 30%, #0b2142 0%, var(--bg0) 45%, var(--bg1) 100%);
  border-radius:14px;
  position:relative;
  overflow:hidden;
  box-shadow: 0 30px 80px rgba(0,0,0,.45);  
}

/* grid overlay */
.grid .v, .grid .h{
  position:absolute;
  background: linear-gradient(to bottom, var(--grid), var(--grid2));
}
.grid .h{
  left:0; right:0;
  top:98px;
  height:1px;
  background: var(--grid);
}
.grid .v{
  top:0; bottom:0;
  width:1px;
  background: var(--grid);
  opacity:.75;
}
.grid .v1{ left: 0; opacity:.0; } /* krawędź */
.grid .v2{ left: 22%; }
.grid .v3{ left: 57%; }
.grid .v4{ left: 79%; }

/* TOP BAR */
.top{
  height:98px;
  display:grid;
  grid-template-columns: 22% 35% 22% 0%;
  align-items:center;
  position:relative;
  z-index:2;
}

.top-left, .top-mid, .top-contact, .top-right {
  padding:0 26px;
}

.top-name {
	letter-spacing: 0.0em;
    font-size: 18px;
    font-weight: 700;
  text-transform: uppercase;
}

.smallcaps, a {
  color: rgb(234, 240, 255);
  letter-spacing: .08em;
  font-size: 12px;
  text-transform: uppercase;
  text-decoration:none;  
}
.smallcaps a:hover {
	text-decoration:underline;
}
.muted{
  letter-spacing: .06em;
  font-size: 11px;
  text-transform: uppercase;
  color: var(--muted2);
  margin-top:6px;
}

.top-email{
  display:inline-block;
  margin-top:8px;
  font-size: 11px;
  letter-spacing: .08em;
  text-decoration:none;
  color: var(--muted2);
}
.top-email:hover{ opacity:1; text-decoration:underline; }

.ig{
  font-size: 11px;
  letter-spacing:.08em;
  color: var(--ink);
  text-decoration:none;
  opacity:.9;
  white-space:nowrap;
}
.ig:hover{ opacity:1; text-decoration:underline; }

.menu{
  width:44px;
  height:44px;
  border:0;
  background: transparent;
  cursor:pointer;
  display:grid;
  place-items:center;
  opacity:.9;
}
.menu span{
  display:block;
  width:22px;
  height:2px;
  background: rgba(234,240,255,.85);
  border-radius:999px;
  margin:2px 0;
}
.menu:hover{ opacity:1; }

/* MAIN LAYOUT */
.main{
  height: calc(100vh - 98px);
  display: flex;
  position:relative;
  z-index:1;
}

/* LEFT */
.left{
  padding: 34px 26px;
  flex: 0 0 22%;
  overflow: auto;
}
.left-text-title{
  margin:0;
  font-size: 12px;
  line-height: 4;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: #7D8BB9;
  text-align: left;
}
.left-text{
  margin:0;
  font-size: clamp(9px, 1vh, 11px);
  line-height: 1.75;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: rgba(234,240,255,.78);
  text-align: left;
}

/* HERO (środek) */
.hero{
  position:relative;
  flex: 0 0 57%;
}
.photo-wrap{
  height: 100%;
  display:flex;
  align-items:flex-end;
  justify-content:right;
}
.photo{
  height: 90%;
  width: auto;
  max-width: 92%;
  object-fit: cover;
  filter: saturate(0.65) drop-shadow(0 0 30px rgba(11,33,66,1));
}

/* placeholder gdy brak obrazka */
.photo-fallback{
  height: 86%;
  width: min(520px, 92%);
  border: 1px dashed rgba(234,240,255,.28);
  border-radius: 10px;
  display:grid;
  place-items:center;
  background: rgba(255,255,255,.03);
  text-align:center;
  padding:18px;
}
.fb-title{
  font-weight:700;
  letter-spacing: .08em;
  text-transform: uppercase;
}
.fb-sub{
  margin-top:8px;
  font-size: 11px;
  letter-spacing: .06em;
  color: var(--muted2);
}

/* RIGHT */
.right{
  padding: 34px 26px;
  display:flex;
  justify-content:flex-end;
  flex: 0 0 21%;
  overflow: auto;  
}
.right-block{
  text-align:right;
  width: 100%;
}
.contact-line{
  font-size: 11px;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: rgba(234,240,255,.92);
}
.contact-line a{
  color: rgba(234,240,255,.92);
  text-decoration:none;
}
.contact-line a:hover{ text-decoration:underline; }
.contact-note{
  margin-top:10px;
  font-size: 10px;
  line-height: 1.65;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--muted2);
}
.spacer{ height: 26px; }

/* BIG TYPE */
.bigtype{
    position: absolute;
    left: 25%;
    bottom: 10%;
    pointer-events: none;
    z-index: 3;
}
.bigline{
  font-size: clamp(64px, 6vw, 118px);
  line-height: .88;
  letter-spacing: .01em;
  color: rgba(234,240,255,.95);
  text-shadow: 0 18px 40px rgba(0,0,0,.35);
}

#contactform input[type="text"], #contactform input[type="email"], #contactform textarea {
	display: block;
    border: none;
    background: rgba(255, 255, 255, 0.15);
    padding: 9px 8px;
    font-size: 11px;
    color: white;
    width: 100%;
    cursor: pointer;
}
#contactform input[type="submit"] {
    background-color: transparent;
    font-size: 11px;
    border: 0;
    margin: 20px 0px;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: rgba(234, 240, 255, .92);
    cursor: pointer;
}
#contactform input[type="submit"]:hover {
	text-decoration:underline;
}

.form-error{
  margin: 10px 0 14px;
  padding: 10px 12px;
  border: 1px solid rgba(255,80,80,.35);
  background: rgba(255,80,80,.10);
  color: rgba(255,255,255,.92);
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: .06em;
  text-transform: uppercase;
  border-radius: 10px;
}

.form-success{
  margin: 10px 0 14px;
  padding: 10px 12px;
  border: 1px solid rgba(120,255,160,.30);
  background: rgba(120,255,160,.10);
  color: rgba(255,255,255,.92);
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: .06em;
  text-transform: uppercase;
  border-radius: 10px;
}

.form-status-success {
	text-transform: uppercase;
    line-height: 4;
    letter-spacing: .04em;
    font-weight: 700;
    font-size: 12px;
    text-align: center;
    color: forestgreen;    
}
.form-status-error {
	text-transform: uppercase;
    line-height: 4;
    letter-spacing: .04em;
    font-weight: 700;
    font-size: 12px;
    text-align: center;
    color: red;
}

/* RESPONSYWNOŚĆ */
@media (max-width: 980px){

  body{
    width: 100%;
    border-radius: 0;     /* na mobile ładniej */
    box-shadow: none;
        overflow: scroll;
  }

	.top {
		display: inline-block;
	}
	 
	.main {
		height: unset;
		display: inline-block;
		grid-template-columns: 100% 30% 30% !important;
	}


  .top-name {
	  margin: 50px 0px;
      display: flex;
    gap: 10px;
    font-size: 44px;
  }

.smallcaps, .smallcaps a , .ig, .ig a , .top-email, .muted, .left-text-title, .left-text {
    font-size: 24px;
    line-height: 48px;
}

#contactform input[type="submit"], .contact-note  {
    font-size: 18px;
}

.bigtype {
	display: none;
}


.photo {
    height: 600px !important;
}

#contactform input[type="text"], #contactform input[type="email"], #contactform textarea {
	width: 55vw;
}

.right {
    position: absolute;
    bottom: 0px;
    width: 60vw !important;
}

}