/* ============================================================
   LAZE — Lounge Chair 001
   1. Tokens   2. Base   3. System (index, rules, type)
   4. Sections   5. Motion   6. Mobile
   Sizes are taken from the Figma frame (1440 wide) and scaled
   with vw so the composition keeps its proportions.
   ============================================================ */

/* ---------- 1. Tokens ---------- */
:root {
  --milk:       #E8E1D7;   /* page background (business card) */
  --milk-2:     #EEEAE5;   /* idea section, matches the photo */
  --milk-3:     #EBE7E1;   /* color section, matches the photo */
  --milk-text:  #F1ECE4;   /* text on red */
  --ink:        #1D1D1B;
  --ink-soft:   #6F6860;
  --red:        #B21917;   /* brand red */
  --sky:        #BDC8D3;   /* contact section (Figma) */
  --hair:       rgba(29, 29, 27, .22);
  --hair-light: rgba(241, 236, 228, .35);

  --sans: "Geist", "Helvetica Neue", Arial, sans-serif;
  --mono: "Geist Mono", ui-monospace, Menlo, monospace;

  --m: clamp(20px, 2.78vw, 48px);            /* outer margin: 40px at 1440 */
  --display: clamp(52px, 7.64vw, 150px);     /* 110px at 1440 */
  --ease: cubic-bezier(.16, 1, .3, 1);

  color-scheme: light;
}

/* ---------- 2. Base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { background: var(--milk); scroll-behavior: smooth; }
body {
  margin: 0;
  background: var(--milk);
  color: var(--ink);
  font-family: var(--sans);
  font-size: 16px;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
img { display: block; max-width: 100%; }
p, h1, h2, dl, dd, ul { margin: 0; padding: 0; }
a { color: inherit; text-decoration: none; }
.wrap { padding-inline: var(--m); }

/* ---------- 3. System ---------- */
.mono {
  font-family: var(--mono);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: .14em;
  text-transform: uppercase;
  line-height: 1.3;
}
.red { color: var(--red); }

/* Section index: 01 ——— NAME */
.index { display: flex; align-items: center; gap: 12px; padding-bottom: 12px; }
.index__line { display: block; width: 32px; height: 1px; background: var(--red); }
.index--light { color: var(--milk-text); }
.index--light .index__line { background: var(--milk-text); }

/* Hairlines */
.rule { display: block; height: 1px; background: var(--hair); transform-origin: left center; }
.rule--light { background: var(--hair-light); }
.rule-pair { position: relative; }
.tick {
  position: absolute; left: 0; top: 0;
  width: min(186px, 30%); height: 1px;
  background: var(--red);
  transform-origin: left center;
}

/* Type */
.display {
  font-weight: 500;
  font-size: var(--display);
  line-height: .97;
  letter-spacing: -.04em;
  text-transform: uppercase;
  margin: 0;
}
.display .line { display: block; white-space: nowrap; } /* each line of a headline stays on one line */
.display--light { color: var(--milk-text); }
.display--white { color: #fff; }
.br-m { display: none; }   /* line breaks used only on phones */
.body  { font-size: clamp(15px, 1.18vw, 18px); line-height: 1.45; }
.small { font-size: 14px; line-height: 1.5; opacity: .82; }
.body--soft  { color: var(--ink-soft); }
.body--light { color: var(--milk-text); }
.big { font-size: clamp(22px, 2.36vw, 40px); letter-spacing: -.02em; line-height: 1.2; }

/* Text block rhythm (same in every section) */
.block { display: flex; flex-direction: column; align-items: stretch; }
.block > .display { margin-top: 40px; }
.block > .rule-pair { margin-top: 36px; }
.block > .rule-pair + .body { margin-top: 22px; }
.block > .body + .body { margin-top: 16px; }

/* Links: hairline draws in on hover */
.link { position: relative; }
.link::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: -3px; height: 1px;
  background: var(--red);
  transform: scaleX(0); transform-origin: right;
  transition: transform .6s var(--ease);
}
.link:hover::after, .link:focus-visible::after { transform: scaleX(1); transform-origin: left; }
.link--red { color: var(--red); }
a:focus-visible { outline: 1px solid var(--red); outline-offset: 4px; }

/* ---------- 4. Sections ---------- */

/* 01 · Hero */
.hero { position: relative; height: 100vh; height: 100svh; min-height: 560px; overflow: clip; background: #EDE8E0; }
.hero__img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 35% 50%; }   /* keeps the chair clear of the headline column */
.topbar {
  position: relative; z-index: 2;
  display: flex; justify-content: space-between; align-items: center;
  padding: 0 var(--m);
  height: 96px;              /* logo is vertically centred: equal space above it and above the hairline */
}
.logo svg { display: block; height: 40px; width: auto; }
.hero__rule { position: absolute; top: 96px; left: var(--m); right: var(--m); background: rgba(29,29,27,.16); z-index: 2; }
.hero__text { position: absolute; left: 0; top: 96px; bottom: 0; width: calc(43vw + var(--m)); z-index: 2;
  display: flex; flex-direction: column; justify-content: flex-end;
  padding-bottom: clamp(40px, calc(13vh - 20px), 140px); }  /* sits in the lower part, with air below */
.hero .explore { margin-top: 36px; align-self: flex-start; }
.hero .block > .body { margin-top: 22px; }
/* Hero headline scales with the screen HEIGHT as well as the width, so on short
   laptop screens (13") the text block never climbs into the logo bar.
   ~370px = top bar + index row + description + link + spacing around the headline. */
.hero .display { font-size: clamp(40px, min(6.18vw, (100svh - 370px) / 3.9), 130px); }  /* 6.18vw: "BRIGHT COLOR." fits the 43vw column */
.hero .block > .display { margin-top: min(40px, 4svh); }
.hero .block > .rule-pair { margin-top: min(36px, 3.6svh); }
.hero .explore { margin-top: min(36px, 3.6svh); }

/* 02 · Material */
.material {
  position: relative;
  min-height: max(520px, 38.9vw);
  background: #7a1412 url("assets/texture-3.jpg") center / cover no-repeat;
  display: flex;
}
.material::before { content: ""; position: absolute; inset: 0; background: rgba(31, 5, 5, .14); }
.material__inner { position: relative; flex: 1; display: flex; flex-direction: column; padding-block: 40px 44px; }
.material__bottom {
  margin-top: auto;
  display: grid;
  grid-template-columns: minmax(0, 1fr) min(400px, 27.8vw);
  column-gap: var(--m);
  align-items: end;
  padding-top: 80px;
}
.material .display { font-size: clamp(46px, 6.67vw, 130px); }
.material__col { display: flex; flex-direction: column; gap: 22px; padding-bottom: 6px; }

/* 03 · Idea */
.idea { position: relative; height: max(600px, 52.8vw); background: #EBE6E2; overflow: clip; }   /* matches the photo's backdrop */
.idea__pic { display: contents; }
.idea__img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 0% 50%; }
.idea__col { position: absolute; left: 56.9vw; width: 40.3vw; bottom: clamp(88px, calc(22vw - 200px), 400px); }   /* grows faster than the section: stays near the bottom on laptops, lifts on large screens */
.idea .display { font-size: clamp(50px, 7.36vw, 144px); }

/* 02 · Inspiration — full-bleed photo, text on the plain wall to the right */
.inspo { position: relative; height: max(560px, 45.3vw); background: #E5DBCD; overflow: clip; }   /* 45.3vw = photo ratio, so nothing is cropped */
.inspo__img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 25% 50%; }
.inspo__col { position: absolute; left: 56.9vw; width: 40.3vw; top: clamp(40px, 3.9vw, 110px); }  /* text sits on the plain wall, clear of the rug */
.inspo .display { font-size: clamp(40px, 5.4vw, 110px); margin-top: 32px; }   /* "LOS ANGELES." = 6.42em in Geist, well inside the 40.3vw column */
.inspo .rule-pair { margin-top: 28px; }
.inspo .body { max-width: 30em; }

/* 04 · Color */
.color { background: var(--milk-3); padding-top: 96px; overflow: clip; }
.color__head { display: grid; grid-template-columns: minmax(0,1fr) min(400px, 27.8vw); column-gap: var(--m); align-items: end; margin-top: 40px; }
.color__aside { padding-bottom: 14px; }
.color__lineup { position: relative; height: 40.3vw; margin-top: 4px; overflow: clip;
  -webkit-mask-image: linear-gradient(transparent 0, #000 20%, #000 82%, transparent 100%);
          mask-image: linear-gradient(transparent 0, #000 20%, #000 82%, transparent 100%); }
.color__lineup img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 52%; }
.swatches-wrap { position: relative; height: 88px; margin-top: -88px; z-index: 1; }
.swatches__rule { position: absolute; top: 0; left: var(--m); right: var(--m); }
.swatches { list-style: none; }
.swatches li { position: absolute; top: 0; left: var(--x); transform: translateX(-50%); display: flex; flex-direction: column; align-items: center; }
.swatch__img { display: none; }
.tick-up { position: absolute; top: -8px; left: 50%; width: 1px; height: 9px; background: rgba(29,29,27,.5); }
.swatches .mono { margin-top: 16px; color: rgba(29,29,27,.75); white-space: nowrap; }
.swatches .is-current .tick-up { background: var(--red); }
.swatches .is-current .mono { color: var(--red); }

/* 05 · Soft / Hard */
.soft { display: grid; grid-template-columns: 1fr 1fr; height: max(560px, 50vw); background: var(--milk); }  /* right half = square photo */
.soft__col { display: flex; align-items: flex-end; padding: 0 var(--m) 88px; }
.soft__col .block { width: 100%; max-width: 44.4vw; }
.soft .display { font-size: clamp(44px, 6.39vw, 124px); }
.soft__media { position: relative; overflow: clip; }
.soft__media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }

/* Image · Take it easy */
.easy { position: relative; aspect-ratio: 1440 / 804; overflow: clip; background: #c4513f; }
.easy__img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.easy__text { position: absolute; left: 0; top: 50%; transform: translateY(-50%); display: grid; gap: 20px; }

/* 06 · Contact */
.contact { background: var(--sky); padding: 96px 0 0; min-height: 100vh; min-height: 100svh; display: flex; flex-direction: column; }
.contact > .wrap { flex: 1; display: flex; flex-direction: column; }
.contact .big { color: var(--ink); }
.display--xl { font-size: clamp(64px, 11.8vw, 230px); line-height: .95; margin: 36px 0 0 -.04em; }  /* deliberately ~35% larger than the other headlines */
.contact .display + .body { margin-top: 28px; }
.contact__rule { margin-top: auto; }
.contact__intro { max-width: 47em; text-wrap: pretty; }  /* wide enough for each sentence to sit on one line (desktop) */
.contact .contact__intro--gap { margin-top: 1.45em; }  /* one empty line before the last sentence */
.contact .display + .body { margin-bottom: 0; }
.contact .contact__intro--last { margin-bottom: clamp(64px, 9.7vw, 150px); }
.contacts { display: grid; grid-template-columns: 36.1vw 30.6vw 1fr; padding: 24px 0 clamp(56px, 7vw, 110px); }
.contacts dt { margin-bottom: 10px; }
.footer { display: grid; grid-template-columns: 36.1vw 30.6vw 1fr; align-items: center; padding: 24px 0 32px; }
.footer .logo { justify-self: end; }
.logo--s svg { height: 34px; }

/* ---------- 5. Motion ----------
   Scroll: elements with [data-reveal] rise 48px and fade in, driven by
   the scroll position (native CSS scroll-driven animations).
   Hairlines draw from the left. Red ticks follow slightly later.
   Browsers without support get a one-shot version via main.js (.io).
   Hero: [data-load] plays once on page load.                     */
@keyframes rise  { from { opacity: 0; transform: translate3d(0, var(--rise, 40px), 0); } }
@keyframes draw  { from { transform: scaleX(0); } }
@keyframes calm  { from { transform: scale(1.08); } }

/* Hero load */
[data-load] { animation: rise 1.5s var(--ease) both; animation-delay: var(--d, 0s); }
.display [data-load], .display[data-load] { --rise: 56px; }
.rule[data-load] { animation-name: draw; animation-duration: 1.6s; }
.rule-pair[data-load] { animation: none; }
.rule-pair[data-load] .rule { animation: draw 1.6s var(--ease) both; animation-delay: var(--d, 0s); }
.rule-pair[data-load] .tick { animation: draw 1.6s var(--ease) both; animation-delay: calc(var(--d, 0s) + .25s); }
.hero__img { animation: calm 2.6s var(--ease) both; }

@supports (animation-timeline: view()) {
  [data-reveal] {
    animation: rise linear both;
    animation-timeline: view();
    animation-range: entry 5% cover 38%;
  }
  .display .line[data-reveal] { --rise: 56px; }
  /* staggered lines: each next line finishes a little later */
  .display .line[data-reveal]:nth-child(2) { animation-range: entry 12% cover 44%; }
  .display .line[data-reveal]:nth-child(3) { animation-range: entry 18% cover 48%; }
  .display .line[data-reveal]:nth-child(4) { animation-range: entry 24% cover 52%; }

  .rule[data-reveal] { animation-name: draw; animation-range: entry 0% cover 35%; }

  .rule-pair[data-reveal] { animation: none; view-timeline: --pair block; }
  .rule-pair[data-reveal] .rule { animation: draw linear both; animation-timeline: --pair; animation-range: entry 0% cover 35%; }
  .rule-pair[data-reveal] .tick { animation: draw linear both; animation-timeline: --pair; animation-range: entry 20% cover 50%; }

  /* Contact sits at the very end of the page: it can never scroll up to mid-screen,
     so its animations finish as soon as each element has fully entered the viewport. */
  .contact [data-reveal],
  .contact .display .line[data-reveal]:nth-child(n),
  .contact .rule[data-reveal] { animation-range: entry 0% entry 100%; }

  [data-reveal-img] { view-timeline: --img block; }
  [data-reveal-img] img { animation: calm linear both; animation-timeline: --img; animation-range: entry 0% cover 60%; }
}

/* Fallback (class set by main.js when scroll-driven animations are missing) */
.io [data-reveal] { opacity: 0; transform: translate3d(0, var(--rise, 40px), 0); transition: opacity 1.1s var(--ease), transform 1.3s var(--ease); transition-delay: var(--d, 0s); }
.io .display .line[data-reveal] { --rise: 56px; }
.io .rule[data-reveal] { opacity: 1; transform: scaleX(0); }
.io .rule-pair[data-reveal] { opacity: 1; transform: none; }
.io .rule-pair[data-reveal] .rule, .io .rule-pair[data-reveal] .tick { transform: scaleX(0); transition: transform 1.4s var(--ease); }
.io .rule-pair[data-reveal] .tick { transition-delay: .25s; }
.io [data-reveal].in { opacity: 1; transform: none; }
.io .rule-pair.in .rule, .io .rule-pair.in .tick { transform: none; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation: none !important; transition: none !important; }
  .io [data-reveal], .io .rule-pair .rule, .io .rule-pair .tick { opacity: 1 !important; transform: none !important; }
}

/* ---------- 6. Mobile (≤ 760px) — follows the Figma mobile frame ---------- */
@media (max-width: 760px) {
  :root { --text-field: 500px; }   /* height of the text area under the photos in 02, 04 and 06 */
  :root { --display: clamp(40px, 13.3vw, 64px); }
  .logo svg { height: 30px; }

  /* Hero: image on top, text below */
  .hero { height: auto; min-height: 0; display: flex; flex-direction: column; background: #EEE9E2; }
  .topbar { order: 1; height: 62px; padding: 18px 20px 14px; }
  .hero__rule { top: 62px; }
  .hero__img { order: 2; position: static; height: auto; aspect-ratio: 390 / 430; object-position: 77% 50%; }
  .hero__text { order: 3; position: static; width: auto; padding: 40px 20px 48px; display: block; }
  .block > .display { margin-top: 24px; }
  .block > .rule-pair { margin-top: 24px; }
  .block > .rule-pair + .body { margin-top: 16px; }
  .hero .explore { margin-top: 24px; }
  .hero .display { font-size: clamp(34px, 12.6vw, 60px); }  /* "BRIGHT COLOR." fits a 390px phone */
  .index { padding-bottom: 10px; }

  /* Material */
  .material { min-height: 0; }
  .material__inner { padding-block: 28px 48px; }
  .material__bottom { grid-template-columns: 1fr; row-gap: 28px; padding-top: 120px; }
  .material .display { font-size: clamp(40px, 12.3vw, 60px); }

  .br-m { display: inline; }

  /* Construction: same pattern as Inspiration. A dedicated taller crop (idea-m.jpg,
     backdrop extended upward) keeps all five panels whole while the photo runs to the
     top edge; the index row sits on it, then a quiet field for the text. */
  .idea { height: auto; display: grid; grid-template-columns: 100%; grid-template-rows: auto auto auto auto auto auto 1fr; background: var(--milk);
    min-height: calc(100vw * 982 / 800 + var(--text-field)); }
  .idea__col, .idea .block { display: contents; }
  .idea__img { grid-area: 1 / 1; position: static; width: 100%; height: auto; aspect-ratio: 800 / 982; object-fit: cover; }
  .idea .index { grid-area: 1 / 1; align-self: start; margin: 28px 20px 0; position: relative; z-index: 1; }
  .idea .block > .rule { grid-area: 1 / 1; align-self: start; margin: 60px 20px 0; position: relative; z-index: 1; }
  .idea .display { grid-row: 2; margin: 80px 20px 0; font-size: var(--display); }
  .idea .rule-pair { grid-row: 3; margin: 32px 20px 0; }
  .idea .body { grid-row: 4; margin: 20px 20px 0; }
  .idea .body + .body { grid-row: 5; margin: 12px 20px 0; }
  .idea .body + .body + .body { grid-row: 6; }

  /* Inspiration: photo runs to the top edge, the index row sits on the photo,
     then a generous quiet field for the text. One-column grid: the index, its rule
     and the photo share row 1, so the label is laid over the image. */
  .inspo { height: auto; display: grid; grid-template-columns: 100%; grid-template-rows: auto auto auto auto 1fr; background: var(--milk);
    min-height: calc(100vw * 470 / 390 + var(--text-field)); }   /* photo + a text field as tall as Cushions */
  .inspo__col, .inspo .block { display: contents; }
  .inspo__img { grid-area: 1 / 1; position: static; width: 100%; height: auto; aspect-ratio: 390 / 470; object-fit: cover; object-position: 23% 50%; }
  .inspo .index { grid-area: 1 / 1; align-self: start; margin: 28px 20px 0; position: relative; z-index: 1; }
  .inspo .block > .rule { grid-area: 1 / 1; align-self: start; margin: 60px 20px 0; position: relative; z-index: 1; }
  .inspo .display { grid-row: 2; margin: 80px 20px 0; font-size: var(--display); }
  .inspo .rule-pair { grid-row: 3; margin: 32px 20px 0; }
  .inspo .body { grid-row: 4; margin: 20px 20px 0; }

  /* Color: lineup becomes a 2×2 grid of crops */
  .color { padding-top: 40px; background: #EEEBE7; }
  .color__head { grid-template-columns: 1fr; row-gap: 20px; margin-top: 24px; }
  .color__head .display { font-size: clamp(34px, 10.8vw, 52px); }  /* "DIFFERENT MOOD." must fit one line */
  .color__aside { padding: 0; }
  .color__lineup, .swatches__rule { display: none; }
  .swatches-wrap { height: auto; margin: 32px 0 0; padding: 0 20px 56px; }
  .swatches { display: grid; grid-template-columns: 1fr 1fr; gap: 28px 10px; }
  .swatches li { position: static; transform: none; }
  .swatch__img { display: block; width: 100%; aspect-ratio: 170 / 210; margin-bottom: 22px;
    background: var(--sw) 50% 55% / cover no-repeat; }   /* one chair per cell, cut from the lineup photo with the neighbours removed */
  .tick-up { position: static; align-self: stretch; width: auto; height: 9px; margin-top: -8px;
    border-bottom: 1px solid var(--hair);
    background: linear-gradient(rgba(29,29,27,.5), rgba(29,29,27,.5)) center / 1px 100% no-repeat; }
  .swatches .is-current .tick-up { background: linear-gradient(var(--red), var(--red)) center / 1px 100% no-repeat; }
  .swatches .mono { margin-top: 14px; font-size: 10px; }

  /* Soft / Hard */
  .soft { grid-template-columns: 1fr; height: auto; }
  .soft__media { order: -1; aspect-ratio: 390 / 440; }
  .soft__col { align-items: flex-start; min-height: var(--text-field); padding: 88px 20px 96px; }   /* text fields of 02, 04, 06 share one height */
  .soft__col .block { max-width: none; }
  .soft .display { font-size: clamp(36px, 11.8vw, 56px); }

  /* Take it easy: light text at the bottom of the photo (Figma mobile frame) */
  .easy { aspect-ratio: 390 / 460; }
  .easy__img { object-position: 83% 50%; }
  .easy__text { top: auto; bottom: 6px; transform: none; gap: 2px; }   /* sits low: "STAND OUT." lands on the chair seat */
  .easy .display { font-size: clamp(32px, 10.3vw, 48px); color: var(--milk-text); }
  .easy .body { color: var(--ink); font-size: 14px; }  /* small line in dark: reads on the light floor */

  /* Contact */
  .contact { padding-top: 48px; min-height: 0; }
  .contact .contact__intro--last { margin-bottom: 0; }
  .display--xl { font-size: clamp(52px, 16.5vw, 84px); margin: 28px 0 0; }  /* "LET'S TALK" still fits a 390px phone */
  .contact__rule { margin-top: 40px; }
  .contacts { grid-template-columns: 1fr; padding: 0; }
  .contacts > div { padding: 14px 0 22px; border-bottom: 1px solid var(--hair); }
  .contacts dt { margin-bottom: 8px; font-size: 10px; }
  .big { font-size: 24px; }
  .footer { grid-template-columns: 1fr auto; row-gap: 6px; padding: 20px 0 28px; }
  .footer .logo { grid-row: 1 / span 2; grid-column: 2; }
  .footer .mono { font-size: 10px; }
  .logo--s svg { height: 30px; }
}