/* ==========================================================================
   Belinki Photography — editorial homepage
   Self-contained design system: own reset, own tokens. Does NOT touch or
   depend on site.css, so the still-live Places/Products/Portraits/Events/
   About/Connect pages (still on the old system) are unaffected while this
   is the only page using it. See madelene-site/BRIEF.md for the phase plan.
   ========================================================================== */

:root {
  --paper:    #F7F4EE;   /* warm off-white ground */
  --ink:      #16130F;   /* near-black warm charcoal, never pure #000 */
  --neutral:  #EFE8DC;   /* subtle warm neutral, used sparingly for section bands */
  --muted:    #6E6558;   /* warm grey for supporting text */
  --rule:     #DDD5C6;   /* hairlines on the warm ground */

  --font-serif: 'Fraunces', 'Iowan Old Style', 'Georgia', serif;
  --font-sans:  'Inter', 'Helvetica Neue', Arial, sans-serif;

  --wrap:   1600px;
  --gutter: 64px;
  --reveal-duration: 700ms;
}

*, *::before, *::after { box-sizing: border-box; }
html, body, div, span, h1, h2, h3, h4, p, a, img, ul, li, figure, button {
  margin: 0; padding: 0; border: 0; font: inherit; vertical-align: baseline;
}
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
  background: var(--paper);
  color: var(--ink);
  font-family: var(--font-sans);
  font-size: 16px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
img { max-width: 100%; height: auto; display: block; }
a { color: inherit; text-decoration: none; }

.wrap { width: 100%; max-width: var(--wrap); margin: 0 auto; padding: 0 var(--gutter); }
.bleed { width: 100%; }

.skip-link {
  position: absolute; left: -9999px;
  background: var(--paper); color: var(--ink);
  padding: 12px 18px; z-index: 500;
}
.skip-link:focus { left: 16px; top: 16px; }

/* --- type scale ------------------------------------------------------- */

.label {
  font-family: var(--font-sans);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 2.4px;
  text-transform: uppercase;
  color: var(--muted);
}
.headline {
  font-family: var(--font-serif);
  font-weight: 500;
  line-height: 1.05;
  letter-spacing: -0.01em;
  color: var(--ink);
}
.headline--hero  { font-size: clamp(52px, 10vw, 168px); }
.headline--xl    { font-size: clamp(40px, 6vw, 88px); }
.headline--lg    { font-size: clamp(32px, 4.2vw, 58px); }
.headline--md    { font-size: clamp(26px, 3vw, 38px); }

.eyebrow {
  font-family: var(--font-sans);
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 1.6px;
  text-transform: uppercase;
  color: var(--muted);
}
.prose-lg { font-size: clamp(18px, 2vw, 24px); line-height: 1.55; color: var(--ink); max-width: 34ch; }
.prose    { font-size: 16px; line-height: 1.75; color: var(--muted); max-width: 40ch; }

.link-arrow {
  display: inline-flex; align-items: center; gap: 8px;
  font-family: var(--font-sans);
  font-size: 13px; font-weight: 600;
  letter-spacing: 1.2px; text-transform: uppercase;
  color: var(--ink);
  padding-bottom: 4px;
  border-bottom: 1px solid var(--ink);
  transition: gap .25s ease, opacity .25s ease;
}
.link-arrow:hover { gap: 14px; }

/* --- header -------------------------------------------------------------- */

.site-header {
  position: fixed; top: 0; left: 0; right: 0;
  z-index: 300;
  padding: 26px 0;
  color: var(--paper);
  transition: padding .3s ease, background-color .3s ease, color .3s ease, box-shadow .3s ease;
}
/* Once scrolled past the hero, the header stops relying on the photograph
   behind it for contrast and becomes its own solid, legible bar — the same
   pattern as the old site, just re-tokened. Simpler and more reliable across
   the light/dark sections beneath it than a blend-mode trick. */
.site-header.is-stuck {
  padding: 16px 0;
  color: var(--ink);
  background: rgba(247,244,238,.92);
  backdrop-filter: saturate(160%) blur(10px);
  box-shadow: 0 1px 0 var(--rule);
}

.header-inner {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 24px;
}
.nav { display: flex; gap: 28px; align-items: center; }
.nav.left  { justify-content: flex-start; }
.nav.right { justify-content: flex-end; }

.nav a {
  font-family: var(--font-sans);
  font-size: 12px; font-weight: 500;
  letter-spacing: 1.4px; text-transform: uppercase;
  white-space: nowrap;
  padding-bottom: 3px;
  border-bottom: 1px solid transparent;
  transition: border-color .25s ease;
}
.nav a:hover, .nav a[aria-current="page"] {
  border-bottom-color: currentColor;
}

.logo {
  justify-self: center;
  font-family: var(--font-serif);
  font-size: 19px; font-weight: 500;
  letter-spacing: .5px;
  white-space: nowrap;
}

.nav-toggle {
  display: none;
  background: none; cursor: pointer;
  width: 40px; height: 40px;
  color: inherit;
  align-items: center; justify-content: center;
}
.nav-toggle span { display: block; position: relative; width: 20px; height: 1px; background: currentColor; }
.nav-toggle span::before, .nav-toggle span::after {
  content: ''; position: absolute; left: 0; width: 20px; height: 1px; background: currentColor;
}
.nav-toggle span::before { top: -6px; }
.nav-toggle span::after  { top: 6px; }

.mobile-menu {
  position: fixed; inset: 0; z-index: 400;
  background: var(--paper);
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 10px;
  opacity: 0; visibility: hidden;
  transition: opacity .35s ease, visibility .35s ease;
}
.mobile-menu.is-open { opacity: 1; visibility: visible; }
.mobile-menu a {
  font-family: var(--font-serif);
  font-size: 26px;
  color: var(--ink);
  padding: 10px 20px;
}
.mobile-menu .close {
  position: absolute; top: 22px; right: 22px;
  width: 44px; height: 44px;
  background: none; cursor: pointer; color: var(--ink);
  font-size: 28px;
}

/* --- reveal-on-scroll ------------------------------------------------- */

.reveal {
  opacity: 0;
  transform: translateY(28px);
  transition: opacity var(--reveal-duration) cubic-bezier(.16,.8,.3,1),
              transform var(--reveal-duration) cubic-bezier(.16,.8,.3,1);
}
.reveal.is-in { opacity: 1; transform: translateY(0); }
@media (prefers-reduced-motion: reduce) {
  .reveal { opacity: 1; transform: none; transition: none; }
}

/* --- section 01: hero ---------------------------------------------------- */

.s-hero {
  position: relative;
  height: 100svh; min-height: 560px;
  overflow: hidden;
  background: var(--ink);
}
.s-hero__img {
  position: absolute; top: -6%; left: 0; right: 0;
  width: 100%; height: 112%;
  object-fit: cover;
  object-position: 50% 50%;
  will-change: transform;
}
.s-hero::after {
  content: '';
  position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(0,0,0,.30) 0%, rgba(0,0,0,.05) 30%, rgba(0,0,0,.45) 100%);
}
.s-hero__content {
  position: absolute; left: 0; right: 0; bottom: 9%;
  z-index: 2;
  padding: 0 var(--gutter);
  color: var(--paper);
}
.s-hero__title {
  font-family: var(--font-serif);
  font-weight: 500;
  font-size: clamp(52px, 10vw, 150px);
  line-height: .96;
  letter-spacing: -.01em;
}
.s-hero__tagline {
  margin-top: 18px;
  font-family: var(--font-sans);
  font-size: 13px; font-weight: 500;
  letter-spacing: 2.4px; text-transform: uppercase;
}

/* --- section 02: intro ---------------------------------------------------- */

.s-intro {
  padding: clamp(16px, 2.2vw, 32px) 0;
  text-align: center;
}
.s-intro .prose-lg { max-width: 20ch; margin: 0 auto; }
.s-intro .headline { max-width: 18ch; margin: 0 auto; }
.s-intro__sub { margin: 10px auto 0; max-width: 46ch; color: var(--muted); font-size: 17px; }
.s-intro .link-arrow { margin-top: 14px; }
.s-intro__inner { display: flex; flex-direction: column; align-items: center; gap: 0; }

/* --- section 03: places, one huge image ----------------------------------- */

.s-places {
  position: relative;
  min-height: 78vh;
}
.s-places__img { width: 100%; height: 78vh; object-fit: cover; }
.s-places__panel {
  position: absolute; left: var(--gutter); bottom: 52px;
  z-index: 2;
  color: var(--paper);
  max-width: 420px;
}
.s-places__panel .headline { color: var(--paper); }
.s-places__panel .prose { color: rgba(247,244,238,.82); }
.s-places::after {
  content: '';
  position: absolute; inset: 0;
  background: linear-gradient(0deg, rgba(0,0,0,.55) 0%, rgba(0,0,0,0) 40%);
}
.s-places__panel .link-arrow { color: var(--paper); border-bottom-color: var(--paper); }

/* --- section 04: people, asymmetric collage -------------------------------- */

.s-collage {
  padding: clamp(64px, 7vw, 108px) 0;
}
.s-collage__head { max-width: 620px; margin-bottom: 36px; }
.s-collage__head .headline { margin-top: 8px; }
.s-collage__head .prose { margin-top: 12px; }
.s-collage__grid {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  column-gap: 16px;
  row-gap: clamp(28px, 4vw, 48px);
  align-items: start;
}
/* Two explicit rows, not auto-placement: row 1 is the two anchor images
   (chess large, couple smaller and vertically centred beside it via
   align-self); row 2 is three evenly sized, evenly spaced images, none
   overlapping. Explicit grid-row avoids the default auto-placement
   behaviour, which invents a new row track for every item whose column
   range collides with an already-placed item. */
.s-collage__a { grid-column: 1 / 8; grid-row: 1; }
.s-collage__a img { aspect-ratio: 3 / 4; object-fit: cover; width: 100%; }
.s-collage__b { grid-column: 8 / 13; grid-row: 1; align-self: center; }
.s-collage__b img { aspect-ratio: 3 / 4; object-fit: cover; width: 100%; }
.s-collage__c { grid-column: 1 / 5; grid-row: 2; }
.s-collage__d { grid-column: 5 / 9; grid-row: 2; }
.s-collage__e { grid-column: 9 / 13; grid-row: 2; }
.s-collage__c img, .s-collage__d img, .s-collage__e img {
  aspect-ratio: 4 / 5; object-fit: cover; width: 100%;
}
.s-collage .link-arrow { margin-top: 28px; display: inline-flex; }

/* --- section 05: commercial ------------------------------------------------ */

.s-commercial { padding: clamp(64px, 7vw, 108px) 0; background: var(--neutral); }
.s-commercial__head { margin-bottom: 36px; max-width: 52ch; }
.s-commercial__head .prose { margin-top: 10px; }
.s-commercial__grid {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: 18px;
}
.s-commercial__main { grid-column: 1 / 8; display: flex; flex-direction: column; gap: 18px; }
.s-commercial__main > img { aspect-ratio: 4 / 3; object-fit: cover; width: 100%; flex: none; }
/* Every box below has a hard-coded aspect-ratio, deliberately not a
   flex-grow/stretch fill. That "grow to fill the leftover space" approach
   depends on the browser's own auto-sizing of an indefinite-height flex
   item inside a grid track, which is exactly the kind of thing engines
   don't agree on — it rendered fine in this project's own test render and
   still came out wrong for Madelene. Hard-coding both columns to the same
   calculated total height (1356px at this column's own width) means nei
   ther column depends on the other to know its own size, so there is
   nothing left for a browser to get wrong. See BRIEF.md for the numbers. */
.s-commercial__accent { flex: none; aspect-ratio: 4 / 3.29; width: 100%; }
.s-commercial__accent img { width: 100%; height: 100%; object-fit: cover; }
.s-commercial__side { grid-column: 8 / 13; display: flex; flex-direction: column; gap: 18px; }
.s-commercial__side img { object-fit: cover; width: 100%; }
/* Cocktail photo the same aspect as the food-plate photo opposite it (so
   the two "top" photos match height), wine-glass slot the same height as
   the Olaplex accent opposite it (so the two "bottom" boxes match height
   and their centres line up automatically, with no fill/stretch needed
   anywhere). The wine-glass photo itself shows at its own natural,
   uncropped proportions — no object-fit: cover on this one, that was
   cutting off the edges of the photo to force it into a box shape it
   doesn't have — sized down and centred inside the slot so there's an
   even gap above and below it rather than it running flush to the edges. */
.s-commercial__side > div:first-child img { aspect-ratio: 4 / 4.24; }
.s-commercial__side > div:last-child {
  aspect-ratio: 4 / 4.65;
  display: flex;
  align-items: center;
  justify-content: center;
}
.s-commercial__side > div:last-child img {
  width: auto;
  height: 80%;
  max-width: 100%;
  object-fit: contain;
}
.s-commercial .link-arrow { margin-top: 28px; }

/* --- section 06: selected clients ------------------------------------------ */

.s-clients { padding: clamp(40px, 4.5vw, 60px) 0; text-align: center; }
.s-clients__head { margin-bottom: 28px; }
.s-clients__head .prose { margin: 8px auto 0; }
.clients-track-wrap { overflow: hidden; }
.clients-track { display: flex; align-items: center; width: max-content; gap: 56px; animation: clients-scroll 22s linear infinite; }
.clients-track img { height: 28px; width: auto; filter: grayscale(1) contrast(1.05); opacity: .62; transition: opacity .25s ease, filter .25s ease; }
.clients-track img:hover { filter: grayscale(0); opacity: 1; }
.clients-track img.logo-badge { height: 40px; }
.clients-track img.logo-fcr { height: 52px; }
@keyframes clients-scroll { from { transform: translateX(0); } to { transform: translateX(-12.5%); } }

/* --- section 07: about me / personal story ---------------------------------- */

.s-story { padding: clamp(64px, 7vw, 108px) 0; background: var(--neutral); }
.s-story__grid { display: grid; grid-template-columns: repeat(12, 1fr); gap: 40px; align-items: center; }
.s-story__img { grid-column: 1 / 5; }
.s-story__img img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; }
.s-story__text { grid-column: 6 / 13; }
.s-story__text .headline { margin-bottom: 18px; }
.s-story .link-arrow { margin-top: 26px; }

/* --- section 08: print shop teaser ------------------------------------------ */

.s-shop { padding: clamp(64px, 7vw, 108px) 0 clamp(48px, 5vw, 72px); }
.s-shop__head { margin-bottom: 40px; max-width: 46ch; }
.s-shop__head .prose { margin-top: 10px; }
.s-shop__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.s-shop__grid img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; transition: transform .6s cubic-bezier(.2,.7,.2,1); }
.s-shop__item { overflow: hidden; }
.s-shop__item:hover img { transform: scale(1.045); }
.s-shop .link-arrow { margin-top: 36px; }

/* --- section 09: final image ------------------------------------------------ */

.s-final { position: relative; height: 66vh; min-height: 420px; }
.s-final img { width: 100%; height: 100%; object-fit: cover; }
.s-final::after { content: ''; position: absolute; inset: 0; background: linear-gradient(0deg, rgba(0,0,0,.4) 0%, rgba(0,0,0,0) 35%); }
.s-final__content { position: absolute; left: 0; right: 0; bottom: 10%; text-align: center; color: var(--paper); }
.s-final__content .headline { color: var(--paper); }

/* --- footer -------------------------------------------------------------- */

.site-footer { padding: 56px 0; text-align: center; border-top: 1px solid var(--rule); }
.footer-nav { display: flex; justify-content: center; gap: 26px; flex-wrap: wrap; margin-bottom: 22px; }
.footer-nav a { font-size: 11px; font-weight: 500; letter-spacing: 1.4px; text-transform: uppercase; color: var(--muted); }
.footer-nav a:hover { color: var(--ink); }
.copyright { font-size: 12px; color: var(--muted); }

/* --- responsive ------------------------------------------------------------ */

@media (max-width: 1080px) {
  :root { --gutter: 36px; }
  .nav { gap: 18px; }
  .s-collage__grid, .s-commercial__grid, .s-people__grid, .s-story__grid { gap: 16px; }
}

@media (max-width: 900px) {
  .nav { display: none; }
  .nav-toggle { display: flex; grid-column: 2; justify-self: end; }
  .header-inner { grid-template-columns: 1fr auto; }
  .logo { grid-column: 1; justify-self: start; }

  .s-hero__content { bottom: 12%; }
  /* The desktop clamp floors at 52px, which is too wide for "PHOTOGRAPHY"
     to fit inside a narrow phone screen without running off the edge. */
  .s-hero__title { font-size: clamp(32px, 11vw, 52px); }

  /* Recompose — every asymmetric grid becomes a single deliberate column,
     not a naive stack of the desktop grid-column spans. */
  .s-collage__grid { display: flex; flex-direction: column; gap: 24px; }
  .s-collage__a, .s-collage__b, .s-collage__c, .s-collage__d, .s-collage__e { grid-column: auto; margin: 0; }
  .s-collage__b img { aspect-ratio: 4 / 3; }
  .s-collage__d { width: 55%; margin-left: auto !important; }
  .s-collage__e { width: 55%; margin-right: auto !important; }

  .s-commercial__grid { display: flex; flex-direction: column; gap: 18px; }
  .s-commercial__main, .s-commercial__side { grid-column: auto; }
  /* Desktop gives .s-commercial__accent its own hard aspect-ratio; reset it
     here so only the img's aspect-ratio (below) governs this box's shape. */
  .s-commercial__accent { width: 55%; aspect-ratio: auto; flex: none; margin-left: auto; }
  .s-commercial__accent img { aspect-ratio: 4 / 5; height: auto; }
  .s-commercial__side { flex-direction: row; }
  .s-commercial__side img { aspect-ratio: 1 / 1; }
  /* Undo the desktop-only "wine glass smaller than its slot" treatment —
     mobile wants two plain even squares side by side. */
  .s-commercial__side > div:last-child { aspect-ratio: auto; display: block; }
  .s-commercial__side > div:last-child img {
    width: 100%; height: auto; max-width: none; object-fit: cover;
  }

  .s-story__grid { display: flex; flex-direction: column; gap: 24px; }
  .s-story__img, .s-story__text { grid-column: auto; }
  .s-story__img { max-width: 320px; }

  .s-shop__grid { grid-template-columns: 1fr 1fr; }
  .s-shop__grid > :first-child { grid-column: 1 / 3; }
}

@media (max-width: 560px) {
  .s-shop__grid { grid-template-columns: 1fr; }
  .s-shop__grid > :first-child { grid-column: auto; }
}