/* ==========================================================================
   S-OSB — editorial-asymmetric. A working material, presented honestly.
   Engineering precision rather than luxury furniture.
   ========================================================================== */

/* --- HERO ----------------------------------------------------------------- */






@media (max-width: 960px) {
  .shero__type,   }


/* --- WHAT IS · strand assembly -------------------------------------------- */

.whatis__head { align-items: end; row-gap: 24px; margin-bottom: clamp(50px, 7vw, 100px); }
.whatis__head .index { margin-bottom: 8px; }

.whatis__body { row-gap: 56px; align-items: center; }

/* Strands drift, orient into layers, and press into a panel */
.assembly {
  position: relative;
  width: 100%;
  aspect-ratio: 5 / 4;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 2.4%;
  padding: 12%;
}

.strand {
  display: block;
  height: 4.6%;
  width: 100%;
  background: var(--ink);
  opacity: 0.16;
  transform-origin: center;
  will-change: transform, opacity;
}
/* every third strand reads as a cross-oriented layer */
.strand:nth-child(3n) { opacity: 0.3; }

.assembly__cap { margin-top: 22px; }


/* --- SPECIFICATION -------------------------------------------------------- */

.spec__head { align-items: end; row-gap: 24px; margin-bottom: clamp(50px, 7vw, 100px); }
.spec__head .index { margin-bottom: 8px; }

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

.spec__row {
  display: grid;
  grid-template-columns: minmax(160px, 3fr) minmax(0, 7fr);
  align-items: baseline;
  gap: clamp(16px, 3vw, 48px);
  padding-block: clamp(26px, 3.4vw, 52px);
  border-bottom: 1px solid var(--rule);
}

.spec__value {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(34px, 5vw, 78px);
  letter-spacing: -0.03em;
  line-height: 1;
  font-variant-numeric: tabular-nums;
  margin: 0;
}
.spec__value em {
  font-family: var(--font-body);
  font-style: normal;
  font-weight: 400;
  font-size: clamp(13px, 1vw, 16px);
  letter-spacing: 0.04em;
  color: var(--dim);
  margin-left: 8px;
}

@media (max-width: 620px) {
  .spec__row { grid-template-columns: 1fr; row-gap: 12px; }
}


/* --- EIGHT FACTS ---------------------------------------------------------- */

.facts__head { align-items: end; row-gap: 24px; margin-bottom: clamp(50px, 7vw, 100px); }
.facts__head .index { margin-bottom: 8px; }

.facts__list {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  column-gap: clamp(40px, 7vw, 130px);
}

.fact {
  padding-block: clamp(28px, 3vw, 46px);
  border-top: 1px solid var(--rule);
}
.fact h3 { margin: 14px 0 12px; font-size: clamp(19px, 1.6vw, 25px); }
.fact p { font-size: var(--fs-small); }

@media (max-width: 760px) { .facts__list { grid-template-columns: 1fr; } }


/* --- APPLICATIONS --------------------------------------------------------- */

.apps__head { align-items: end; row-gap: 24px; margin-bottom: clamp(50px, 7vw, 100px); }
.apps__head .index { margin-bottom: 8px; }

.apps__list { border-top: 1px solid var(--rule); }
.apps__list li {
  display: grid;
  grid-template-columns: minmax(200px, 4fr) minmax(0, 8fr);
  align-items: baseline;
  gap: clamp(14px, 2.5vw, 44px);
  padding-block: clamp(20px, 2.2vw, 34px);
  border-bottom: 1px solid var(--rule);
  transition: opacity var(--t) var(--ease);
}

.apps__name {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(19px, 1.8vw, 28px);
  letter-spacing: -0.022em;
}
.apps__note { font-size: var(--fs-small); }

@media (hover: hover) {
  .apps__list:hover li { opacity: 0.42; }
  .apps__list li:hover { opacity: 1; }
}
@media (max-width: 620px) {
  .apps__list li { grid-template-columns: 1fr; row-gap: 6px; }
}


/* --- SUSTAINABILITY ------------------------------------------------------- */

.grown__grid { row-gap: 40px; }
.grown__grid .index { margin-bottom: 8px; }
.grown__title { margin-bottom: clamp(40px, 5vw, 70px); }
.grown__body { row-gap: 34px; }
.grown__micro {
  margin-top: clamp(56px, 7vw, 110px);
  padding-top: clamp(40px, 5vw, 70px);
  border-top: 1px solid var(--rule);
  max-width: min(24ch, 100%);
}


/* --- THE RATIONAL CASE ---------------------------------------------------- */

.rational__head { align-items: end; row-gap: 24px; margin-bottom: clamp(50px, 7vw, 100px); }
.rational__head .index { margin-bottom: 8px; }

.rational__list {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  column-gap: clamp(30px, 4vw, 80px);
}
.rrow { padding-block: clamp(26px, 3vw, 42px); border-top: 1px solid var(--rule); }
.rrow h3 { margin-bottom: 12px; font-size: clamp(19px, 1.6vw, 25px); }
.rrow p { font-size: var(--fs-small); }

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


/* --- CLOSE ---------------------------------------------------------------- */

.close__inner { padding-block: var(--sp-band); text-align: center; }
.close__headline { max-width: min(14ch, 100%); margin-inline: auto; }
.close__ctas {
  display: flex; flex-wrap: wrap; gap: 14px; justify-content: center;
  margin-top: clamp(34px, 4vw, 56px);
}


/* ==========================================================================
   PERSONALITY — ENGINEERING PRECISION
   Sections are introduced like entries on a specification sheet: a measured
   rule, the index in a narrow rail, the statement held to the same baseline.
   ========================================================================== */

[data-page="s-osb"] .sec-head {
  align-items: start;
  padding-top: clamp(18px, 2vw, 26px);
  border-top: 1px solid var(--rule);
  margin-bottom: clamp(50px, 6.5vw, 100px);
}
[data-page="s-osb"] .sec-head > .col-3 { grid-column: span 2; }
[data-page="s-osb"] .sec-head > .col-8 { grid-column: 3 / span 8; }
[data-page="s-osb"] .sec-head h2 {
  font-size: clamp(28px, 3.6vw, 60px);
  letter-spacing: -0.03em;
  max-width: min(20ch, 100%);
}
/* tabular figures throughout — this page is read as data */
[data-page="s-osb"] .index,
[data-page="s-osb"] .spec__value,
[data-page="s-osb"] .fact .index { font-variant-numeric: tabular-nums; }

/* the assembly is a clipped frame — strands may travel, the layout may not */
.assembly { overflow: hidden; }

@media (max-width: 720px) {
  [data-page="s-osb"] .sec-head > .col-3,
  [data-page="s-osb"] .sec-head > .col-8 { grid-column: 1 / -1; }
}

/* engineering precision — cross-sections and hard edges */
[data-page="s-osb"] .plate { background-image: url("../assets/fields/section.svg"); }
[data-page="s-osb"] 
/* objects on this page are made of its own material */
.object { --object-field: url("../assets/fields/section.svg"); }


/* ==========================================================================
   REAL PHOTOGRAPHY + BROCHURE SECTIONS
   Added when the plant brochure and its photography were supplied. Panels are
   never framed or boxed — they sit on the ground and cast their own shadow.
   ========================================================================== */

/* --- hero photograph ------------------------------------------------------ */



/* --- the faces — a numbered set, no cards --------------------------------- */

.faces__intro { max-width: min(46ch, 100%); margin-bottom: clamp(40px, 5vw, 70px); }
.faces__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  column-gap: clamp(30px, 5vw, 90px);
  border-top: 1px solid var(--rule-strong);
}
.faces__list li {
  display: flex;
  align-items: baseline;
  gap: 18px;
  padding-block: clamp(18px, 2.2vw, 30px);
  border-bottom: 1px solid var(--rule);
  font-family: var(--font-display);
  font-weight: 600;
  font-size: clamp(17px, 1.6vw, 24px);
  letter-spacing: -0.018em;
  color: var(--ink);
}
.faces__n {
  font-family: var(--font-body);
  font-weight: 700;
  font-size: 11px;
  letter-spacing: 0.14em;
  color: var(--accent);
  flex: 0 0 auto;
}
@media (max-width: 900px) { .faces__list { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px) { .faces__list { grid-template-columns: 1fr; } }


/* --- the comparison — two columns of figures, not a table ----------------- */

.against__intro { max-width: min(44ch, 100%); margin-bottom: clamp(40px, 5vw, 68px); }
.against__note { margin-top: 28px; font-size: 13px; }

.cmp { border-top: 1px solid var(--rule-strong); }
.cmp__head,
.cmp__row {
  display: grid;
  grid-template-columns: minmax(0, 6fr) minmax(0, 3fr) minmax(0, 3fr);
  gap: clamp(14px, 2.5vw, 40px);
  align-items: baseline;
}
.cmp__head { padding-block: 16px; border-bottom: 1px solid var(--rule); }
.cmp__row  { padding-block: clamp(18px, 2.2vw, 28px); border-bottom: 1px solid var(--rule); }

.cmp__k { margin: 0; font-size: var(--fs-small); color: var(--dim); }
.cmp__a,
.cmp__b {
  margin: 0;
  font-family: var(--font-display);
  font-weight: 700;
  letter-spacing: -0.022em;
  font-size: clamp(19px, 2vw, 30px);
}
.cmp__a { color: var(--accent); }
.cmp__b { color: var(--ink); opacity: 0.42; }
.cmp__a em, .cmp__b em {
  font-style: normal;
  font-family: var(--font-body);
  font-weight: 400;
  font-size: 12px;
  letter-spacing: 0;
  opacity: 0.8;
}
.cmp__vs { text-align: left; }

@media (max-width: 720px) {
  .cmp__head { display: none; }
  .cmp__row  { grid-template-columns: 1fr 1fr; row-gap: 8px; }
  .cmp__k    { grid-column: 1 / -1; }
  .cmp__b::before {
    content: "plywood ";
    font-family: var(--font-body); font-weight: 700; font-size: 10px;
    letter-spacing: 0.14em; text-transform: uppercase; opacity: 0.7;
  }
}


/* --- plantation + application photography --------------------------------- */

.grown__shot { margin: clamp(56px, 7vw, 100px) 0 0; }
.grown__shot img {
  display: block; width: 100%;
  height: clamp(220px, 32vw, 440px);
  object-fit: cover;
}
.grown__shot figcaption { margin-top: 16px; }

.apps__shots { margin-top: clamp(56px, 7vw, 100px); row-gap: 40px; align-items: start; }
.apps__shot { margin: 0; }
.apps__shot img {
  display: block; width: 100%;
  aspect-ratio: 4 / 5;
  object-fit: cover;
}
.apps__shot figcaption { margin-top: 14px; }


/* --- the plant figures ---------------------------------------------------- */

.plant__head { margin-bottom: clamp(50px, 7vw, 100px); }


/* --- the download line ---------------------------------------------------- */

.close .dl { margin: clamp(40px, 5vw, 66px) 0 clamp(10px, 2vw, 20px); }


/* --- the strand assembly, made of the real board -------------------------- */

/* The assembly is made of the board it describes: a real strand face beneath,
   with the oriented layers drawn over it as a diagram rather than a texture.
   The core layers are held darker, because the core is the layer that runs
   across — the whole point of the section. */
.assembly {
  background: var(--plate) url("../assets/s-osb/sosb-macro.webp") center / cover;
  isolation: isolate;
}
.assembly::before {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--bg);
  opacity: 0.34;
}
.strand {
  position: relative;
  background: var(--ink);
  opacity: 0.2;
  box-shadow: 0 1px 0 rgba(255,255,255,0.22), 0 -1px 0 rgba(255,255,255,0.22);
}
/* the cross-laid core */
.strand:nth-child(n+7):nth-child(-n+12) { opacity: 0.52; }

.band--light .assembly::before { opacity: 0.2; }
.band--light .strand {
  background: #14110E;
  opacity: 0.26;
  box-shadow: 0 1px 0 rgba(255,255,255,0.5), 0 -1px 0 rgba(255,255,255,0.5);
}
.band--light .strand:nth-child(n+7):nth-child(-n+12) { opacity: 0.6; }


/* ==========================================================================
   THE MAKING — the plant, on film
   Footage shot at the plant. It is pinned and driven by scroll rather than
   played, so the visitor moves through the process at their own pace. No
   controls are drawn over it; the film is not entertainment, it is evidence.
   ========================================================================== */

.making { padding-block: 0; }

.making__pin {
  min-height: 100svh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding-block: clamp(60px, 9vh, 110px);
}

.making__head { margin-bottom: clamp(26px, 3.4vw, 46px); }
.making__head .index { margin-bottom: 6px; }
.making__title { font-size: var(--fs-h2); max-width: min(12ch, 100%); margin-top: 14px; }

.making__stage {
  position: relative;
  margin: 0;
  width: 100%;
}
.making__video {
  display: block;
  width: 100%;
  height: clamp(240px, 52vh, 620px);
  object-fit: cover;
  background: var(--plate);
}
.making__cap {
  position: absolute;
  left: var(--gutter);
  bottom: 18px;
  color: #EDE8DF;
  text-shadow: 0 1px 12px rgba(0, 0, 0, 0.85);
}

.making__rail {
  margin-top: clamp(20px, 2.6vw, 34px);
  height: 1px;
  background: var(--rule);
}
.making__rail span {
  display: block;
  height: 100%;
  background: var(--accent);
  transform: scaleX(0);
  transform-origin: left center;
  will-change: transform;
}

@media (max-width: 860px) {
  .making__pin { min-height: 0; padding-block: var(--sp-band); }
  .making__video { height: clamp(200px, 42vh, 360px); }
}


/* ==========================================================================
   HERO — the strand is the viewport
   Real OSB, full bleed, in its own amber. The type is set on the board rather
   than beside it, and the published figures run along the foot like a stamp
   on the edge of a panel.
   ========================================================================== */

.shero {
  position: relative;
  min-height: 100svh;
  display: flex;
  align-items: flex-end;
  padding-block: 0;
  overflow: hidden;
}
.shero__field { position: absolute; inset: 0; }
.shero__strand {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transform: scale(1.1);
  will-change: transform;
}
/* only enough wash to carry type — the board keeps its colour */
.shero__wash {
  position: absolute; inset: 0;
  background:
    /* a shadow that falls from the left, so the type sits in it rather than
       under a flat scrim across the whole board */
    linear-gradient(100deg, rgba(28,14,2,0.94) 0%, rgba(28,14,2,0.80) 32%,
                            rgba(28,14,2,0.34) 62%, rgba(28,14,2,0.16) 100%),
    linear-gradient(to top, rgba(28,14,2,0.72) 0%, rgba(28,14,2,0.10) 46%,
                            rgba(28,14,2,0.30) 100%);
}

.shero__inner {
  position: relative;
  z-index: 2;
  width: 100%;
  padding-top: calc(var(--nav-h) + clamp(50px, 10vh, 130px));
  padding-bottom: clamp(48px, 8vh, 100px);
  color: #FBF3E8;
}
.shero__eyebrow { color: #EBD5B4; }
.shero__headline { margin-top: clamp(16px, 2.4vw, 28px); color: #FDF7EE; max-width: min(10ch, 46vw); }
.shero__sub { margin-top: clamp(18px, 2.4vw, 30px); max-width: min(28ch, 100%); color: #EBD8BE; }

.shero__facts {
  margin: clamp(28px, 4.4vh, 48px) 0 0;
  padding-top: 18px;
  border-top: 1px solid rgba(253,247,238,0.30);
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: clamp(12px, 1.6vw, 24px);
  max-width: min(62ch, 62vw);
}
.shero__facts dt { margin-bottom: 8px; color: #E3C8A3; }
.shero__facts dd {
  margin: 0;
  font-family: var(--font-display); font-weight: 600;
  font-size: clamp(14px, 1.25vw, 19px); letter-spacing: -0.015em;
  color: #FDF7EE;
}

.shero__ctas { display: flex; flex-wrap: wrap; gap: 12px; margin-top: clamp(28px, 4vh, 44px); }

@media (max-width: 700px) {
  .shero__facts { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: 20px; }
  .shero__headline, .shero__sub { max-width: 100%; }
}

@media (prefers-reduced-motion: reduce) { .shero__strand { transform: scale(1.05) !important; } }


/* --- the board, at the size it deserves ------------------------------------
   A full-bleed band of the real calibrated face between the strand diagram and
   the specification. No wash, no crop tricks: the material at its own colour,
   with a single line of type beneath it.
   ========================================================================== */

.board { padding-block: 0; }
.board__shot { margin: 0; position: relative; }
.board__shot img {
  display: block;
  width: 100%;
  height: clamp(280px, 56vh, 640px);
  object-fit: cover;
}
.board__cap {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 8px clamp(20px, 4vw, 56px);
  padding: 20px var(--gutter) clamp(30px, 5vw, 56px);
  border-top: 1px solid var(--rule);
}
.board__cap b {
  font-family: var(--font-display); font-weight: 700;
  font-size: clamp(17px, 1.7vw, 25px); letter-spacing: -0.018em;
  color: var(--ink);
}
.board__cap span { color: var(--dim); font-size: var(--fs-small); }


/* ==========================================================================
   THE STAR COOLER
   The Plant chapter counted the capacity but never showed the floor. This is
   the client's own photograph of boards fanned across the cooler straight off
   the press — the one moment where the scale of the line is legible.
   ========================================================================== */

.plant__cooler {
  margin: 0 0 clamp(38px, 6vh, 76px);
  display: grid;
  grid-template-columns: 1fr;
  gap: 16px;
}
.plant__cooler img {
  display: block;
  width: 100%;
  height: clamp(300px, 56vh, 620px);
  object-fit: cover;
  object-position: 50% 38%;
  border-radius: 2px;
}
.plant__cooler figcaption { max-width: 56ch; }

@media (max-width: 860px) {
  .plant__cooler img { height: clamp(240px, 40vh, 340px); }
}

/* the bench behaviours now close The Board rather than taking a band of their own */
.facts__bench {
  margin-top: clamp(40px, 6vh, 76px);
  padding-top: clamp(26px, 3.5vh, 44px);
  border-top: 1px solid var(--rule);
}
.facts__bench > .label { margin-bottom: clamp(18px, 2.4vh, 30px); }


/* ==========================================================================
   S-OSB HERO — the board, held to one side
   The hero was a full-bleed board behind a heavy directional wash: at 0.94
   opacity on the left the material was dimmed across most of the frame and
   read as a dark box with type on it. The board now holds the right of the
   frame at close to its own colour and bleeds off that edge, so the strand
   pattern is legible on arrival; the type sits left in its own column with
   the specification as a ruled technical block beneath it.

   Animation hooks are untouched: [data-shero-strand] still carries the
   parallax transform, .shero__inner is still the type block the scrub fades,
   and .shero__headline still receives the SplitText line masks.
   ========================================================================== */

.shero {
  min-height: min(100svh, 780px);
  align-items: center;
}

.shero__field {
  inset: 0 0 0 auto;
  width: 58%;
  /* the strand rests at scale(1.1) and the drift tween carries it to 1.16, so
     without this the board painted up to 42px past its own left edge, outside
     the wash, as a bright strip on the dark band. Measured at 1440/1366/390. */
  overflow: hidden;
}
/* the wash now only softens the inner edge — the board keeps its colour */
.shero__wash {
  background: linear-gradient(95deg,
    var(--bg) 0%,
    rgba(28,14,2,0.86) 12%,
    rgba(28,14,2,0.30) 34%,
    rgba(28,14,2,0) 58%);
}

.shero__inner {
  position: relative;
  z-index: 2;
  display: grid;
  grid-template-columns: minmax(0, 6fr) minmax(0, 6fr);
  align-content: center;
  padding-block: clamp(40px, 8svh, 96px);
  width: 100%;
}
.shero__inner > * { grid-column: 1; max-width: min(38ch, 100%); }

.shero__headline { margin-top: clamp(12px, 1.8svh, 22px); max-width: min(15ch, 100%); }
.shero__sub      { margin-top: clamp(14px, 2svh, 24px); max-width: min(34ch, 100%); }

/* the specification reads as an engineering block, not four floating cards */
.shero__facts {
  margin-top: clamp(24px, 3.4svh, 40px);
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0;
  border-top: 1px solid rgba(244,240,232,0.20);
  max-width: min(34ch, 100%);
}
.shero__facts > div {
  padding: clamp(10px, 1.5svh, 15px) 0;
  border-bottom: 1px solid rgba(244,240,232,0.13);
}
.shero__facts > div:nth-child(odd)  { padding-right: 18px; }
.shero__facts > div:nth-child(even) { padding-left: 18px; border-left: 1px solid rgba(244,240,232,0.13); }
.shero__facts dt { margin-bottom: 4px; }
.shero__facts dd { margin: 0; font-size: var(--fs-small); }

.shero__ctas { margin-top: clamp(22px, 3svh, 38px); }

/* the board names itself down its own edge */
.shero__field::after {
  content: "SMOOTH ORIENTED STRAND BOARD";
  position: absolute;
  right: clamp(12px, 1.6vw, 26px);
  top: 50%;
  transform: translateY(-50%) rotate(180deg);
  writing-mode: vertical-rl;
  font-family: var(--font-body);
  font-weight: 700; font-size: 10px; letter-spacing: 0.22em;
  color: rgba(255,248,238,0.46);
  pointer-events: none;
  z-index: 1;
}

@media (max-width: 860px) {
  .shero { min-height: 0; align-items: stretch; }
  .shero__field {
    position: relative;
    inset: auto;
    width: 100%;
    height: clamp(210px, 34svh, 320px);
  }
  .shero__wash {
    background: linear-gradient(180deg, rgba(28,14,2,0) 52%, var(--bg) 100%);
  }
  .shero__field::after { right: 10px; font-size: 9px; letter-spacing: 0.16em; }
  .shero__inner {
    grid-template-columns: 1fr;
    padding-block: clamp(22px, 3svh, 34px) clamp(34px, 5svh, 54px);
  }
  .shero__inner > * { max-width: 100%; }
  .shero__facts { max-width: 100%; }
}

/* the hero is a flex row; on mobile it must stack so the board sits above
   the type rather than beside it */
@media (max-width: 860px) {
  .shero { flex-direction: column; }
}

/* the whole hero should resolve inside a laptop viewport, and inside a phone
   screen, without the second call to action dropping under the fold */
.shero__inner { padding-block: clamp(28px, 5svh, 72px); }
.shero__headline { margin-top: clamp(10px, 1.4svh, 18px); }
.shero__sub      { margin-top: clamp(12px, 1.6svh, 20px); }
.shero__facts    { margin-top: clamp(18px, 2.6svh, 32px); }
.shero__ctas     { margin-top: clamp(18px, 2.4svh, 30px); }
.shero__facts > div { padding-block: clamp(8px, 1.2svh, 13px); }

@media (max-width: 860px) {
  .shero__field { height: clamp(230px, 30svh, 300px); }
  .shero__inner { padding-block: clamp(18px, 2.4svh, 26px) clamp(24px, 3.4svh, 38px); }
  .shero__facts { margin-top: clamp(16px, 2.2svh, 24px); }
}