/* ==========================================================================
   HOME — page styles
   Twelve bands, alternating black and white. Each is a spread from a journal.
   ========================================================================== */

/* --------------------------------------------------------------------------
   01 · HERO
   -------------------------------------------------------------------------- */

.hero { min-height: 100svh; display: flex; align-items: stretch; }

.hero__inner {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: var(--gap);
  align-items: end;
  width: 100%;
  padding-top: calc(var(--nav-h) + clamp(40px, 8vh, 110px));
  padding-bottom: clamp(56px, 9vh, 120px);
}

.hero__type { grid-column: 1 / span 8; }

/* the eyebrow is one line or it is not an eyebrow */
.hero__eyebrow { margin-bottom: clamp(26px, 4vh, 44px); }

.hero__headline { margin: 0; max-width: min(11ch, 100%); }

.hero__foot {
  display: grid;
  gap: clamp(26px, 3vw, 44px);
  margin-top: clamp(36px, 5vh, 64px);
  max-width: min(46ch, 100%);
}

.hero__ctas { display: flex; flex-wrap: wrap; gap: 14px; }

.hero__plate {
  grid-column: 9 / span 4;
  align-self: stretch;
  min-height: clamp(300px, 46vh, 620px);
}

/* a single hairline that travels — no arrow */
.hero__cue {
  position: absolute;
  left: var(--gutter);
  bottom: 0;
  width: 1px;
  height: 76px;
  overflow: hidden;
}
.hero__cue span {
  display: block;
  width: 1px; height: 100%;
  background: var(--rule-strong);
  animation: cue 3s var(--ease) infinite;
}
@keyframes cue {
  0%   { transform: translateY(-100%); }
  100% { transform: translateY(100%); }
}
@media (prefers-reduced-motion: reduce) { .hero__cue span { animation: none; } }

@media (max-width: 960px) {
  .hero__inner { align-items: start; }
  .hero__type  { grid-column: 1 / -1; }
  .hero__plate { grid-column: 1 / -1; min-height: 54vh; margin-top: clamp(40px, 8vw, 72px); }
  .hero__cue { display: none; }
}


/* --------------------------------------------------------------------------
   02 · WHO WE ARE
   -------------------------------------------------------------------------- */

.who__meta { border-top: 1px solid var(--rule); padding-top: 18px; }
.who__meta .index { margin-bottom: 8px; }

.who__statement { margin-bottom: clamp(44px, 5vw, 80px); }
.who__body { row-gap: 34px; }
.who__body .link { margin-top: 26px; }

.who__plate { margin-top: clamp(60px, 8vw, 130px); }


/* --------------------------------------------------------------------------
   03 · MATERIAL UNIVERSE — horizontal
   -------------------------------------------------------------------------- */

.universe { padding-block: 0; }

.universe__pin {
  min-height: 100svh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: clamp(34px, 5vh, 70px);
  padding-block: clamp(80px, 10vh, 140px);
}

.universe__head { display: flex; flex-direction: column; gap: 18px; }
.universe__title { max-width: min(16ch, 100%); }

.universe__viewport { overflow: hidden; }

.universe__track {
  display: flex;
  align-items: stretch;
  gap: clamp(40px, 6vw, 120px);
  padding-inline: var(--gutter);
  width: max-content;
  will-change: transform;
}

.chapter {
  flex: 0 0 auto;
  width: clamp(300px, 38vw, 560px);
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  gap: clamp(20px, 2.4vw, 40px);
}

.chapter .object { aspect-ratio: 5 / 4; }

.chapter__text { display: flex; flex-direction: column; gap: 12px; }
.chapter__word { font-size: clamp(28px, 3vw, 48px); }
.chapter__text p { max-width: min(32ch, 100%); }

.universe__rail { position: relative; height: 1px; background: var(--rule); }
.universe__rail span {
  position: absolute; inset: 0;
  background: var(--ink);
  transform: scaleX(0);
  transform-origin: left center;
}

@media (max-width: 860px) {
  .universe__pin { min-height: 0; display: block; padding-block: var(--sp-band); }
  .universe__viewport { overflow: visible; margin-top: 48px; }
  .universe__track {
    width: auto;
    flex-direction: column;
    padding-inline: 0;
    gap: 72px;
    transform: none !important;
  }
  .chapter { width: 100%; }
  .universe__rail { display: none; }
}


/* --------------------------------------------------------------------------
   04 · FEATURED COLLECTIONS
   -------------------------------------------------------------------------- */

.collections { padding-bottom: var(--sp-band); }

.collections__head { align-items: end; row-gap: 24px; }
.collections__head .index { margin-bottom: 8px; }

.collection { padding-block: clamp(56px, 8vw, 130px); border-top: 1px solid var(--rule); }
.collection:first-of-type { border-top: 0; }

.collection__row { align-items: center; row-gap: 36px; }

.collection__text h3 { margin-bottom: 14px; }

.collection__tag {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(19px, 1.5vw, 25px);
  letter-spacing: -0.02em;
  line-height: 1.25;
  margin-bottom: 20px;
  max-width: none;
}

.collection__text .link { margin-top: 24px; }

@media (max-width: 720px) {
  .collection--flip .collection__figure { order: -1; }
}


/* --------------------------------------------------------------------------
   05 · CRAFTSMANSHIP
   -------------------------------------------------------------------------- */

.craft { padding-block: 0; }

.craft__pin {
  position: relative;
  min-height: 100svh;
  display: flex;
  align-items: center;
  overflow: hidden;
}

.craft__plate { position: absolute; inset: 0; }
.craft__tint  { position: absolute; inset: 0; background: rgba(10, 10, 10, 0.62); }

.craft__inner { position: relative; z-index: 2; padding-block: var(--sp-block); }
.craft__inner .index { margin-bottom: 8px; }

.craft__headline { max-width: min(15ch, 100%); margin: 22px 0 clamp(30px, 4vw, 54px); }
.craft__body { max-width: min(54ch, 100%); }

.craft__pull { padding-block: clamp(90px, 12vw, 190px); }
.craft__pullline { margin-inline: auto; }


/* --------------------------------------------------------------------------
   06 · FOR DESIGNERS
   -------------------------------------------------------------------------- */

.designers { padding-block: 0; }

.designers__pin {
  min-height: 100svh;
  display: flex;
  align-items: center;
  padding-block: var(--sp-block);
}

.designers__grid { width: 100%; align-items: center; row-gap: 48px; }

.designers__aside .index { margin-bottom: 8px; }
.designers__title { margin: 20px 0 clamp(28px, 4vw, 46px); }

.designers__rail {
  position: relative;
  width: 100%; max-width: 220px; height: 1px;
  background: var(--rule);
  margin-bottom: clamp(28px, 4vw, 46px);
}
.designers__rail span {
  position: absolute; inset: 0;
  background: var(--accent);
  transform: scaleX(0);
  transform-origin: left center;
}

.designers__ctas { display: flex; flex-wrap: wrap; gap: 12px; }

.steps { display: grid; list-style: none; margin: 0; padding: 0; }

.step {
  grid-area: 1 / 1;
  opacity: 0;
  transform: translateY(18px);
  pointer-events: none;
}
.step.is-active { opacity: 1; transform: none; pointer-events: auto; }

.step h3 { margin: 14px 0 18px; font-size: clamp(30px, 3.4vw, 54px); }
.step p { font-size: clamp(17px, 1.2vw, 20px); max-width: min(42ch, 100%); }

@media (max-width: 860px) {
  .designers__pin { min-height: 0; padding-block: var(--sp-band); }
  .designers__rail { display: none; }
  .steps { display: block; }
  .step {
    opacity: 1; transform: none; pointer-events: auto;
    padding-block: 38px;
    border-top: 1px solid var(--rule);
  }
  .step:first-child { border-top: 0; padding-top: 0; }
}


/* --------------------------------------------------------------------------
   07 · SERVICES — an index, not cards
   -------------------------------------------------------------------------- */

.services__head { align-items: end; row-gap: 24px; margin-bottom: clamp(48px, 6vw, 90px); }
.services__head .index { margin-bottom: 8px; }

.services__list { border-top: 1px solid var(--rule); }

.srow {
  display: grid;
  grid-template-columns: 60px minmax(180px, 2fr) minmax(180px, 2fr) minmax(0, 3fr) auto;
  align-items: baseline;
  gap: clamp(16px, 2vw, 40px);
  padding-block: clamp(26px, 3vw, 46px);
  border-bottom: 1px solid var(--rule);
  transition: opacity var(--t) var(--ease);
}

.srow__name {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(24px, 2.4vw, 40px);
  letter-spacing: -0.025em;
  line-height: 1.1;
}

.srow__tag {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: clamp(16px, 1.2vw, 20px);
  letter-spacing: -0.015em;
  color: var(--dim);
}

.srow__line { font-size: var(--fs-small); }

.srow__go {
  font-family: var(--font-body);
  font-size: var(--fs-label);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: var(--accent);
  opacity: 0;
  transform: translateX(-8px);
  transition: opacity var(--t) var(--ease), transform var(--t) var(--ease);
}

@media (hover: hover) {
  .services__list:hover .srow { opacity: 0.4; }
  .services__list .srow:hover { opacity: 1; }
  .srow:hover .srow__go { opacity: 1; transform: none; }
  .srow:hover .srow__name { color: var(--ink); }
}

@media (max-width: 1100px) {
  .srow { grid-template-columns: 46px 1fr; row-gap: 10px; }
  .srow__tag, .srow__line { grid-column: 2; }
  .srow__go { display: none; }
}


/* --------------------------------------------------------------------------
   08 · PROJECTS
   -------------------------------------------------------------------------- */

.projects__head { align-items: end; row-gap: 24px; margin-bottom: clamp(48px, 6vw, 90px); }
.projects__head .index { margin-bottom: 8px; }

.projects figcaption {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 6px 16px;
  padding-top: 16px;
}

.projects__mono { margin: 0 0 clamp(56px, 8vw, 120px); }

.projects__note {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: clamp(16px, 1.2vw, 20px);
  letter-spacing: -0.015em;
  color: var(--dim);
}

.projects__pair { row-gap: 48px; margin-bottom: clamp(56px, 8vw, 120px); }
.projects__offset { margin-top: clamp(40px, 8vw, 120px); }

.projects__list { border-top: 1px solid var(--rule); }
.projects__list li {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 6px 20px;
  padding-block: clamp(18px, 2vw, 30px);
  border-bottom: 1px solid var(--rule);
}


/* --------------------------------------------------------------------------
   09 · WHY — numbered index
   -------------------------------------------------------------------------- */

.why__head { align-items: end; row-gap: 24px; margin-bottom: clamp(48px, 6vw, 90px); }
.why__head .index { margin-bottom: 8px; }

.why__list {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1px;
  background: var(--rule);
  border-block: 1px solid var(--rule);
}

.wrow {
  background: var(--bg);
  padding: clamp(30px, 3vw, 54px) clamp(22px, 2.4vw, 44px);
}
.wrow h3 { margin: 18px 0 14px; font-size: clamp(20px, 1.7vw, 27px); }
.wrow p { font-size: var(--fs-small); }

@media (max-width: 960px) { .why__list { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 620px) { .why__list { grid-template-columns: 1fr; } }


/* --------------------------------------------------------------------------
   10 · SUSTAINABILITY
   -------------------------------------------------------------------------- */

.sustain__grid { row-gap: 40px; }
.sustain__grid .index { margin-bottom: 8px; }
.sustain__headline { max-width: min(14ch, 100%); margin-bottom: clamp(40px, 5vw, 70px); }
.sustain__body { row-gap: 34px; }


/* --------------------------------------------------------------------------
   11 · JOURNAL
   -------------------------------------------------------------------------- */

.journal__head { align-items: end; row-gap: 24px; margin-bottom: clamp(48px, 6vw, 90px); }
.journal__head .index { margin-bottom: 8px; }
.journal__cats { margin-top: 24px; }

.journal__grid { row-gap: 56px; }

.jentry .plate { margin-bottom: 26px; }
.jentry .journal__cat { color: var(--accent); margin-bottom: 12px; }
.jentry h3 { margin-bottom: 12px; font-size: clamp(21px, 1.7vw, 28px); }
.jentry p { font-size: var(--fs-small); }

.journal__all { margin-top: clamp(48px, 6vw, 80px); }


/* --------------------------------------------------------------------------
   12 · FINAL CTA
   -------------------------------------------------------------------------- */

.final { min-height: 92svh; display: flex; align-items: center; }

.final__inner {
  text-align: center;
  padding-block: var(--sp-band);
}

.final__headline { max-width: min(15ch, 100%); margin-inline: auto; }

.final__support { margin: clamp(34px, 4vw, 56px) auto 0; }

.final__ctas {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  justify-content: center;
  margin-top: clamp(34px, 4vw, 56px);
}


/* ==========================================================================
   PERSONALITY — THE FRONT DOOR
   The home page introduces sections with the most air of any page: the
   index and label held far left, the statement set large and well right.
   ========================================================================== */

[data-page="home"] .sec-head {
  align-items: end;
  margin-bottom: clamp(64px, 9vw, 150px);
}
[data-page="home"] .sec-head > .col-3 { grid-column: span 3; }
[data-page="home"] .sec-head > .col-8 { grid-column: 5 / span 8; }
[data-page="home"] .sec-head h2 {
  font-size: clamp(31px, 4.2vw, 66px);
  letter-spacing: -0.035em;
  max-width: min(15ch, 100%);
}

/* objects on this page are made of its own material */
.object { --object-field: url("../assets/fields/strata.svg"); }


/* ==========================================================================
   THE COLLECTIONS, IN REAL MATERIAL
   Each collection previously showed an abstract SVG field with a caption
   describing a photograph that did not exist — the single biggest reason the
   home page read as generated rather than photographed. Every one of these
   products has real material in the tree, so the real face is used. The frames
   are deliberately different shapes: a veneer leaf is not a board, and a teak
   plank is not a laminate swatch.
   ========================================================================== */

.matfig {
  margin: 0;
  position: relative;
}
.matfig img {
  display: block;
  width: 100%;
  height: clamp(260px, 34vw, 460px);
  object-fit: cover;
  object-position: 50% 50%;
  background: var(--plate);
}
/* a tall sheet keeps its portrait character; a board keeps its length */
.matfig--tall img  { height: clamp(340px, 44vw, 620px); object-position: 50% 42%; }
.matfig--wide img  { height: clamp(220px, 28vw, 380px); }
.matfig figcaption { margin-top: 14px; opacity: 0.66; }

@media (hover: hover) {
  .matfig img { transition: transform 640ms var(--ease); will-change: transform; }
  .collection:hover .matfig img { transform: scale(1.03); }
}

@media (max-width: 860px) {
  .matfig img       { height: clamp(200px, 52vw, 300px); }
  .matfig--tall img { height: clamp(260px, 68vw, 380px); }
  .matfig--wide img { height: clamp(180px, 44vw, 260px); }
}

@media (prefers-reduced-motion: reduce) {
  .collection:hover .matfig img { transform: none; }
}

/* the five chapters carry material, not a description of material */
.chapfig { margin: 0; overflow: hidden; }
.chapfig img {
  display: block; width: 100%;
  height: clamp(220px, 30vw, 400px);
  object-fit: cover; object-position: 50% 50%;
  background: var(--plate);
}
.chapfig--wide img { height: clamp(200px, 26vw, 340px); }

/* the philosophy plate is a real macro, held behind the type */
.craft__plate img {
  display: block; width: 100%; height: 100%;
  object-fit: cover; object-position: 50% 50%;
}
@media (max-width: 860px) {
  .chapfig img, .chapfig--wide img { height: clamp(170px, 44vw, 250px); }
}

/* the hero and house plates now hold real material rather than a caption */
.hero__plate img,
.who__plate img {
  display: block; width: 100%; height: 100%;
  object-fit: cover; object-position: 50% 50%;
}

/* Responsibility closes the Reasons band rather than occupying one of its own */
.why__close {
  margin-top: clamp(48px, 7vh, 96px);
  padding-top: clamp(30px, 4vh, 52px);
  border-top: 1px solid var(--rule);
}
.why__close p { font-size: var(--fs-small); }
@media (max-width: 860px) {
  .why__close .col-5, .why__close .col-3 { grid-column: 1 / -1; }
  .why__close .stack { margin-top: 14px; }
  .why__close .col-3.start-10 { margin-top: 18px; }
}

/* the material names itself on the image, so a short window never shows a
   row of anonymous textures */
.chapfig { position: relative; }
.chapfig__name {
  position: absolute;
  left: 14px; bottom: 12px;
  font-family: var(--font-body);
  font-weight: 700;
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: #fff;
  text-shadow: 0 1px 10px rgba(0,0,0,0.85), 0 0 2px rgba(0,0,0,0.7);
  pointer-events: none;
}
@media (max-width: 860px) {
  .chapfig__name { left: 10px; bottom: 9px; font-size: 10px; letter-spacing: 0.14em; }
}

/* The name sat at the foot of the image, which on a short window is exactly
   where the fold falls — so the material was still anonymous. It rides at the
   top now, visible the moment the image is, and the figures are shorter so a
   whole chapter fits a laptop viewport. */
.chapfig__name {
  top: 12px;
  bottom: auto;
  background: rgba(10, 10, 10, 0.55);
  padding: 5px 9px;
  border-radius: 1px;
  backdrop-filter: none;
}
.chapfig img      { height: clamp(190px, 22vw, 300px); }
.chapfig--wide img { height: clamp(170px, 19vw, 260px); }

@media (max-width: 860px) {
  .chapfig__name { top: 9px; }
  .chapfig img, .chapfig--wide img { height: clamp(150px, 38vw, 220px); }
}

/* the name sits under the material, not over it — the images are short enough
   now that a caption below stays in view, and the texture is left unobscured */
.chapfig__name {
  position: static;
  display: block;
  margin-top: 12px;
  background: none;
  padding: 0;
  color: var(--ink);
  text-shadow: none;
  opacity: 0.78;
}
@media (max-width: 860px) { .chapfig__name { margin-top: 9px; } }

/* the chapter's own label carries the name; it sits directly under the image
   now that the figures are short enough to keep it in view */
.chapter__text .index { margin-top: 2px; }

/* the section title sits on one row, so the material below it is in view with
   it rather than pushed under the fold by a two-line heading */
.universe__title { max-width: min(30ch, 100%); text-wrap: balance; }
.universe__head  { gap: 12px; }
.universe { padding-block: clamp(48px, 6vw, 96px); }

/* section heads generally give back some of their room to the content */
.sec-head { margin-bottom: clamp(28px, 3.4vw, 52px); }


/* ==========================================================================
   THE FIVE WAYS — short windows
   The figure height answered only to viewport WIDTH, so on a 590px-tall
   window the pinned block stood 780px and the chapter's name sat 157px below
   the fold: the material scrolled past, but never the word for it. Height now
   answers to viewport height as well, and the pin's own padding and gaps
   tighten, so the index and the name arrive with the picture. Wide, tall
   screens are untouched.
   ========================================================================== */

@media (min-width: 861px) and (max-height: 780px) {
  .universe__pin {
    padding-block: clamp(30px, 4vh, 70px);
    gap: clamp(18px, 2.6vh, 34px);
  }
  .chapfig img,
  .chapfig--wide img { height: clamp(150px, min(22vw, 30svh), 300px); }
}


/* ==========================================================================
   COLLECTIONS — the flipped rows
   The flipped rows pin the figure to column 7 explicitly, but their text
   carried no start, so grid auto-placement pushed it into the NEXT ROW: the
   picture stood alone with an empty column beside it and the words arrived
   only after you had scrolled past it. Measured at 1351x590 the text sat
   664px below the figure on Veneers and 448px on BTC Heritage and Hybrid OSB,
   against 106-146px on the correctly-placed rows.

   Start only — never the `grid-column` shorthand, which would set the END
   edge too and destroy the .col-N span, exactly as base.css warns.
   ========================================================================== */

/* Column alone is not enough: sparse auto-placement will not backtrack past
   the figure, so the text needs an explicit ROW too. Scoped above 720px,
   because below that the grid stacks full-width and `order: -1` must stay in
   charge of putting the picture first. */
@media (min-width: 721px) {
  .collection--flip .collection__text {
    grid-column-start: 1;
    grid-row-start: 1;
  }
}


/* ==========================================================================
   COLLECTIONS — the Hybrid frame
   core-revealed.webp is a portrait photograph of the routed sample taken on a
   desk. In a wide crop object-fit:cover is width-driven, so the whole frame
   width showed - including ~180px of desk on the left and ~133px on the right.
   Measured in the source, the board itself spans x 180-1220 of 1353. The
   image is widened and the frame clips to it, so only the board is seen.
   The photograph is untouched: this is framing, not retouching.
   ========================================================================== */

.matfig { overflow: hidden; }          /* also keeps the hover zoom inside its frame */

.matfig--inset img {
  /* the global img reset caps width at 100%, which silently defeated the crop */
  max-width: none;
  width: 136%;
  margin-left: -18%;
}