/* ==========================================================================
   1. FONTS
   ========================================================================== */
@font-face{
  font-family:'Inter';
  src:url('fonts/Inter-Regular.woff2') format('woff2');
  font-weight:400; font-style:normal; font-display:swap;
}
@font-face{
  font-family:'Inter';
  src:url('fonts/Inter-Medium.woff2') format('woff2');
  font-weight:500; font-style:normal; font-display:swap;
}
@font-face{
  font-family:'Inter';
  src:url('fonts/Inter-MediumItalic.woff2') format('woff2');
  font-weight:500; font-style:italic; font-display:swap;
}


/* ==========================================================================
   2. TOKENS
   --pad  : site-wide horizontal padding (grid outer margin)
   --gap  : gutter between grid columns — same value, so the space between
            two pictures always equals the page's side padding
   ========================================================================== */
:root{
  --pad: 40px;
  --gap: 40px;

  --header-h: 96px;
  --logo-end-w: 261px;   /* logo size once settled in the header */
  --logo-end-x: 40px;    /* aligns the logo to the grid's left edge */
  --wordmark-h: 90px;

  --ink: #000;
  --paper: #fff;
}


/* ==========================================================================
   3. BASE
   ========================================================================== */
*{ box-sizing:border-box; }

html{
  scroll-behavior:smooth;
  overflow-x:hidden;
  width:100%;
}

body{
  margin:0;
  padding-top:var(--header-h);
  width:100%;
  position:relative;
  overflow-x:hidden;
  background:var(--paper);
  color:var(--ink);
  font-family:'Inter', sans-serif;
  font-weight:400;
}

img{ display:block; max-width:100%; }

section{ position:relative; background:var(--paper); }


/* ==========================================================================
   4. LAYOUT GRID
   Desktop: 4 columns · Mobile: 1 column
   ========================================================================== */
.grid{
  position:relative;
  display:grid;
  grid-template-columns:repeat(4, 1fr);
  gap:var(--gap);
  padding-inline:var(--pad);
  align-items:start;
}

/* forces an item onto a new row, anchored to column 1 (used for stacking) */
.stack{ grid-column-start:1; }


/* ==========================================================================
   5. MEDIA — one class per frame: .ar-W-H
      W = columns wide  ·  H = the same column units, tall
      So .ar-3-3 is a square three columns across, .ar-2-2 a smaller one.
      Ratios never change between desktop and mobile — only the span does.
   ========================================================================== */
.frame{
  position:relative;
  overflow:hidden;
  grid-column-end: span var(--rw);
  aspect-ratio: var(--rw) / var(--rh);
}

/* parallax image — oversized inside the frame so it can drift on scroll */
.frame > img{
  position:absolute;
  left:0;
  top:-18%;
  width:100%;
  height:136%;
  object-fit:cover;
  will-change:transform;
}

/* --- span + ratio utilities --------------------------------------------- */
.ar-4-3{ --rw:4; --rh:3; }
.ar-4-8{ --rw:4; --rh:8; }
.ar-3-2{ --rw:3; --rh:2; }
.ar-3-3{ --rw:3; --rh:3; }
.ar-3-4{ --rw:3; --rh:4; }
.ar-2-2{ --rw:2; --rh:2; }
.ar-2-3{ --rw:2; --rh:3; }
.ar-2-4{ --rw:2; --rh:4; }


/* ==========================================================================
   6. HERO — deliberately outside the column grid.
   Uses its own .hero-media class so none of the grid/ratio rules above can
   reach it. Keeps the site padding and always runs from under the header to
   the bottom of the screen. The repeated height declarations are a fallback
   chain: the last unit the browser understands wins.
   ========================================================================== */
#hero{
  display:flex;
  padding-inline:var(--pad);
  height:calc(100vh  - var(--header-h));
  /* svh = smallest viewport height, i.e. measured as if the mobile URL bar
     is always showing. Deliberately NOT dvh: dvh tracks the bar sliding in
     and out, which resizes the hero mid-scroll and shunts the page. */
  height:calc(100svh - var(--header-h));
}

#hero .hero-media{
  flex:1;
  height:100%;
  overflow:hidden;
}

#hero .hero-media img{
  width:100%;
  height:100%;
  object-fit:cover;
}


/* ==========================================================================
   7. HEADER — fixed, transparent, sits above everything
   ========================================================================== */
#site-header{
  position:fixed;
  top:0; left:0; right:0;
  z-index:500;
  height:var(--header-h);
  min-height:60px;
  display:flex;
  align-items:center;
  justify-content:flex-end;
  padding-inline:var(--pad);
  background:transparent;
  pointer-events:none;
}

#logo{
  position:fixed;
  top:0; left:0;
  z-index:512;
  width:var(--logo-end-w);
  height:auto;
  pointer-events:auto;
  will-change:transform;
  opacity:0;
  transition:opacity .5s ease;
}
body.loaded #logo{ opacity:1; }

#wordmark{
  position:fixed;
  top:calc((var(--header-h) - var(--wordmark-h)) / 2);
  left:50%;
  transform:translateX(-50%);
  height:var(--wordmark-h);
  width:auto;
  z-index:511;
  pointer-events:auto;
}

#hamburger{
  position:relative;
  width:34px;
  height:24px;
  background:none;
  border:none;
  cursor:pointer;
  pointer-events:auto;
  opacity:0;
  transition:opacity .6s ease .45s;
}
body.loaded #hamburger{ opacity:1; }

#hamburger span{
  position:absolute;
  left:0; right:0;
  height:2px;
  background:var(--ink);
}
#hamburger span:nth-child(1){ top:0; }
#hamburger span:nth-child(2){ top:11px; }
#hamburger span:nth-child(3){ top:22px; }


/* ==========================================================================
   8. STATEMENTS — scroll-triggered line reveal
   ========================================================================== */
.statement{
  min-height:100vh;
  display:flex;
  flex-direction:column;
  justify-content:center;
  max-width:45vw;
  margin-inline:auto;
  padding-inline:var(--pad);
  text-align:center;
}

/* the line is the mask; padding/negative-margin pair keeps descenders
   (g, j, y) from being clipped without changing the visual spacing */
.statement .line{
  overflow:hidden;
  line-height:1.2;
  padding-bottom:.14em;
  margin-bottom:-.14em;
}

.statement .line span{
  display:inline-block;
  font-weight:500;
  font-size:clamp(32px, 5.5vw, 64px);
  transform:translateY(110%);
  transition:transform 1.1s cubic-bezier(.16,.84,.3,1);
}

.statement .line.italic span{ font-style:italic; }

.statement.in-view .line span{ transform:translateY(0); }

.statement .line:nth-child(1) span{ transition-delay:0s; }
.statement .line:nth-child(2) span{ transition-delay:.15s; }
.statement .line:nth-child(3) span{ transition-delay:.32s; }
.statement .line:nth-child(4) span{ transition-delay:.46s; }

#cta .line span{ font-size:clamp(16px, 4vw, 48px); }


/* ==========================================================================
   9. GALLERIES
   ========================================================================== */
.gallery{ padding-block:100px; }

#gallery3{ padding-bottom:0; }

/* Each signature carries its own placement in three custom properties, so
   tweaking one is a single-line change and nothing else is affected:
     --w  width, as a % of the gallery
     --x  horizontal centre  ·  --y  vertical centre
   Values over 100% / under 0% are intentional — signatures bleed off the
   edges exactly as they do in the design. */
.signature{
  position:absolute;
  z-index:50;
  width:var(--w);
  height:auto;
  left:var(--x);
  top:var(--y);
  transform:translate(-50%, -50%);
  opacity:0;
  pointer-events:none;
  transition:opacity .16s ease-out;
}
.signature.flash{ opacity:1; }

/* DEBUG: uncomment to pin all signatures on screen while positioning them */
/* .signature{ opacity:1 !important; outline:1px solid red; } */

/* gallery 1 */
.sig-edition  { --w:90%; --x:81%; --y:6%; }
.sig-kraljevic{ --w:78%; --x:45%; --y:81%; }

/* gallery 2 */
.sig-barrique { --w:90%; --x:42%; --y:29%; }
.sig-surlie   { --w:90%; --x:92%; --y:82%; }

/* gallery 3 */
.sig-zilavka  { --w:90%; --x:45%; --y:35%; }
.sig-blatina  { --w:75%; --x:91%; --y:73%; }


/* ==========================================================================
   10. FOOTER
   ========================================================================== */
footer{
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:34px var(--pad);
  font-size:14px;
  letter-spacing:.02em;
}
footer a{
  margin-left:26px;
  color:var(--ink);
  text-decoration:none;
  opacity:.85;
}
footer a:hover{ opacity:1; text-decoration:underline; }


/* ==========================================================================
   11. MOBILE — single column; frame ratios stay exactly as on desktop
   ========================================================================== */
@media (max-width:760px){
  :root{
    --pad: 20px;
    --gap: 20px;
    --header-h: 60px;
    --logo-end-w: 160px;
    --logo-end-x: 20px;
    --wordmark-h: 60px;
  }

  .grid{ grid-template-columns:1fr; }
  .frame{ grid-column:1 / -1; }

  #wordmark{ max-width:calc(100vw - 140px); }

  .statement{ max-width:85vw; }

  .gallery{ padding-block:64px; }

  /* signatures read larger on a narrow screen; placement stays per-signature */
  .signature{ width:calc(var(--w) * 1.5); }
}


/* ==========================================================================
   12. REDUCED MOTION
   ========================================================================== */
@media (prefers-reduced-motion: reduce){
  *{ transition-duration:.01ms !important; animation-duration:.01ms !important; }
}