/* ==========================================================================
   BTC · VINTAGE TEAK — editorial heritage.
   Warmer tones, still inside the monochrome system: the same two grounds,
   tinted warm, with the timber accent allowed a little more presence.
   Centred and symmetric throughout — the deliberate opposite of Veneers.
   ========================================================================== */

/* --- The warm variant of the two grounds ---------------------------------- */

.band--warm.band--dark {
  --bg:     #0C0A08;          /* black, warmed */
  --ink:    #F4F0E9;          /* warm white — not pure, this page only */
  --dim:    #948B7E;
  --rule:   rgba(244, 240, 233, 0.16);
  --rule-strong: rgba(244, 240, 233, 0.3);
  --accent: #C0A17C;
  --plate:  #17130F;
  --shadow: rgba(0, 0, 0, 0.8);
  --label-ink: #9E968B;
}

.band--warm.band--light {
  --bg:     #EFEAE2;          /* paper, warmed */
  --ink:    #1A140E;
  --dim:    #6B6055;
  --rule:   rgba(26, 20, 14, 0.16);
  --rule-strong: rgba(26, 20, 14, 0.28);
  --accent: #6E5637;          /* deepened for contrast on warm paper */
  --plate:  #E2DACE;
  --shadow: rgba(26, 20, 14, 0.24);
  --label-ink: #5E574F;
}

/* the page carries a warm ground behind the shell too */
body.btc { background: #0C0A08; }
body.btc .footer { background: #0C0A08; }


/* --- 1 · HERO — a framed document ----------------------------------------- */

.bhero__inner {
  padding-top: calc(var(--nav-h) + clamp(50px, 9vh, 110px));
  padding-bottom: clamp(70px, 10vw, 150px);
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}

/* the fine double rule of an old certificate */
.frame {
  position: relative;
  padding: clamp(34px, 5vw, 76px) clamp(24px, 5vw, 80px);
  border: 1px solid var(--rule-strong);
  max-width: 1000px;
}
.frame::after {
  content: "";
  position: absolute;
  inset: 5px;
  border: 1px solid var(--rule);
  pointer-events: none;
}

.bhero__eyebrow { margin-bottom: clamp(22px, 3vw, 38px); }
.bhero__headline { max-width: min(13ch, 100%); margin-inline: auto; }
.bhero__sub { margin: clamp(26px, 3vw, 42px) auto 0; max-width: min(40ch, 100%); }

.bhero__plate { margin-top: clamp(50px, 7vw, 100px); width: 100%; }

.bhero__para {
  margin-top: clamp(40px, 5vw, 70px);
  max-width: min(62ch, 100%);
  font-size: var(--fs-small);
}

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


/* --- Shared centred rhythm ------------------------------------------------ */

.story2__inner, .wood__inner, .ledger__inner, .bapps__inner,
.deepens__inner, .proven__inner, .bwhy__inner {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.story2__title, .wood__title, .ledger__title, .bapps__title,
.deepens__title, .proven__title, .bwhy__title {
  margin: 14px auto clamp(44px, 6vw, 80px);
  max-width: min(18ch, 100%);
}

.story2__body, .wood__body, .deepens__body, .ledger__intro {
  max-width: min(66ch, 100%);
}
.story2__body p + p, .wood__body p + p,
.deepens__body p + p, .ledger__intro p + p { margin-top: clamp(20px, 2.4vw, 32px); }

/* a drop cap opening the story */
.dropcap::first-letter {
  float: left;
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 3.4em;
  line-height: 0.82;
  padding: 6px 14px 0 0;
  color: var(--accent);
}


/* --- 3 · THE WOOD --------------------------------------------------------- */

.wood__opening {
  margin: 0 auto clamp(40px, 5vw, 68px);
  text-align: center;
  max-width: min(24ch, 100%);
}
.wood__plate { margin-top: clamp(56px, 7vw, 110px); width: 100%; }


/* --- 4 · THE LEDGER — ruled rows, hammer stamps --------------------------- */

.book {
  width: 100%;
  margin-top: clamp(50px, 6vw, 90px);
  border-top: 1px solid var(--rule-strong);
}

.book__head,
.book__row {
  display: grid;
  grid-template-columns: 90px 1.2fr 1.2fr 1.2fr 2fr;
  gap: clamp(12px, 2vw, 34px);
  align-items: center;
  padding-block: clamp(16px, 2vw, 26px);
  border-bottom: 1px solid var(--rule);
}

.book__head { padding-block: 14px; }

.book__row {
  position: relative;
  /* each row draws in like an entry being made */
  transform-origin: left center;
}

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

.book__lot {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(18px, 1.6vw, 24px);
  letter-spacing: 0.04em;
  color: var(--ink);
}

/* the hammer stamp — slightly imperfect, slightly rotated */
.stamp {
  position: absolute;
  right: 0;
  top: 50%;
  font-family: var(--font-body);
  font-style: normal;
  font-size: 9px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.16em;
  color: var(--accent);
  border: 1px solid var(--accent);
  padding: 5px 10px;
  opacity: 0;
  transform: translateY(-50%) rotate(-3deg) scale(1.6);
  pointer-events: none;
  white-space: nowrap;
}

.ledger__micro {
  margin-top: clamp(56px, 7vw, 110px);
  max-width: min(26ch, 100%);
}

@media (max-width: 900px) {
  .book__head { display: none; }
  .book__row {
    grid-template-columns: 1fr;
    row-gap: 6px;
    padding-block: 22px;
  }
  .stamp { position: static; transform: rotate(-3deg); display: inline-block; margin-top: 10px; }
}


/* --- 5 · APPLICATIONS ----------------------------------------------------- */

.bapps__intro { margin: 0 auto clamp(44px, 6vw, 80px); max-width: min(46ch, 100%); }

.bapps__list { width: 100%; max-width: 1000px; border-top: 1px solid var(--rule); }
.bapps__list li {
  display: grid;
  grid-template-columns: minmax(200px, 4fr) minmax(0, 7fr);
  gap: clamp(14px, 2.5vw, 40px);
  align-items: baseline;
  padding-block: clamp(18px, 2.2vw, 30px);
  border-bottom: 1px solid var(--rule);
}
.bapps__list span.dim { font-size: var(--fs-small); }
.bapps__name {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(18px, 1.6vw, 25px);
  letter-spacing: -0.02em;
}

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


/* --- 7 · PROVENANCE ------------------------------------------------------- */

.proven__body { max-width: min(64ch, 100%); text-align: center; }
.proven__micro { margin-top: clamp(50px, 6vw, 90px); max-width: min(24ch, 100%); }


/* --- 8 · WHY BTC ---------------------------------------------------------- */

.bwhy__list {
  width: 100%;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  column-gap: clamp(24px, 3vw, 60px);
}
.bwhy__row { padding-block: clamp(26px, 3vw, 42px); border-top: 1px solid var(--rule); }
.bwhy__row h3 { margin-bottom: 12px; font-size: clamp(19px, 1.6vw, 26px); }
.bwhy__row p { font-size: var(--fs-small); }

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


/* --- 9 · CLOSING ---------------------------------------------------------- */

.bclose__inner {
  padding-block: var(--sp-band);
  display: flex; flex-direction: column; align-items: center; text-align: center;
}
.bclose__lines { max-width: min(24ch, 100%); }
.bclose__we { margin-top: clamp(26px, 3vw, 42px); color: var(--accent); }

.bclose__mark {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: clamp(34px, 6.4vw, 108px);
  letter-spacing: 0.02em;
  line-height: 1;
  margin: clamp(56px, 8vw, 120px) 0 20px;
  max-width: none;
}

.bclose__ctas {
  display: flex; flex-wrap: wrap; gap: 14px; justify-content: center;
  margin-top: clamp(40px, 5vw, 66px);
}

/* heritage craftsmanship — grain, and one lamplit pool */
[data-page="vintage-teak"] .plate { background-image: url("../assets/fields/grain.svg"); }
[data-page="vintage-teak"] .bhero__plate { background-image: url("../assets/fields/aperture.svg"); }


/* ==========================================================================
   THE AGEING — the page's one unforgettable moment
   A plank deepens through a century as the archive notes arrive beside it.
   ========================================================================== */

.ageing { padding-block: 0; }

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

.ageing__stage { position: absolute; inset: 0; }

.ageing__grain {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center;
}
/* young timber: open figure, pale, cool */
/* The same real plank at two ages. Fresh-sawn teak is pale, open and a
   little green; a century later it is darker, tighter and redder. One
   photograph, two states — nothing invented. */
.ageing__grain--young {
  background-image: url("../assets/vintage-teak/board.webp");
  background-size: cover;
  filter: brightness(1.34) contrast(0.82) saturate(0.52) hue-rotate(6deg);
}
/* the same grain, a century on: tighter, deeper, warmer */
.ageing__grain--old {
  background-image: url("../assets/vintage-teak/board.webp");
  background-size: cover;
  /* the grain closes up as the timber dries and darkens */
  transform: scale(1.14);
  filter: brightness(0.66) contrast(1.28) saturate(1.24) hue-rotate(-10deg);
  opacity: 0;
}

/* the umber that settles into the wood as it ages */
/* the umber that settles into the wood — kept light so the timber, not the
   overlay, is what darkens */
.ageing__tone {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(34,20,9,0.18) 0%, rgba(14,9,5,0.62) 100%);
  opacity: 0.22;
}

.ageing__inner { position: relative; z-index: 2; padding-block: var(--sp-block); }
.ageing__inner .index { margin-bottom: 14px; }
.ageing__title { max-width: min(15ch, 100%); margin-bottom: clamp(40px, 5vw, 72px); }

.notes { display: flex; flex-direction: column; gap: clamp(14px, 1.8vw, 24px); max-width: 640px; }

.note {
  display: flex;
  align-items: baseline;
  gap: 18px;
  opacity: 0;
  transform: translateY(10px);
}
.note__rule {
  flex: 0 0 auto;
  width: 0;
  height: 1px;
  background: var(--accent);
  transform-origin: left center;
}
.note__text {
  font-family: var(--font-body);
  font-size: clamp(14px, 1.1vw, 17px);
  letter-spacing: 0.02em;
  color: var(--ink);
}

@media (max-width: 860px) {
  .ageing__pin { min-height: 78svh; }
  .notes { gap: 12px; }
}

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


/* --- real timber, where it exists ------------------------------------------
   Photographed plainly and printed like an archive plate: a hairline frame,
   a caption beneath, nothing floating and nothing glossy. */

.bhero__shot, .wood__shot { margin: clamp(44px, 6vw, 84px) 0 0; }
.bhero__shot img, .wood__shot img {
  display: block;
  width: 100%;
  height: clamp(200px, 30vw, 430px);
  object-fit: cover;
  border: 1px solid var(--rule);
}
.wood__shot img { height: clamp(180px, 24vw, 340px); }
.bhero__shot figcaption, .wood__shot figcaption {
  margin-top: 14px;
  padding-top: 12px;
  border-top: 1px solid var(--rule);
}


/* ==========================================================================
   HERO — the seasoning yard
   The page used to open on a flat brown ground with a ruled box, which read
   as a twin of the Hybrid page. It now opens on the timber itself: stacked
   seasoned teak, aged rather than tinted, with the type set low in it like a
   caption on an archive plate.
   ========================================================================== */

.bhero {
  position: relative;
  min-height: 100svh;
  display: flex;
  align-items: flex-end;
  padding-block: 0;
  overflow: hidden;
}
.bhero__field { position: absolute; inset: 0; }
.bhero__timber {
  position: absolute;
  inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  object-position: center 55%;
  transform: scale(1.08);
  will-change: transform;
}
/* the warmth of an old photograph, not a colour filter over the wood */
.bhero__age {
  position: absolute; inset: 0;
  background:
    linear-gradient(to top, rgba(30,18,6,0.92) 0%, rgba(30,18,6,0.72) 30%,
                            rgba(30,18,6,0.54) 52%, rgba(30,18,6,0.44) 100%),
    radial-gradient(120% 90% at 50% 40%, rgba(0,0,0,0) 40%, rgba(20,12,4,0.52) 100%);
}

.bhero__inner {
  position: relative; z-index: 2; width: 100%;
  padding-top: calc(var(--nav-h) + clamp(60px, 12vh, 150px));
  padding-bottom: clamp(50px, 9vh, 110px);
  color: #F6ECDA;
  text-align: left;
}
.bhero__eyebrow { color: #EBD9BB; }
.bhero__headline { margin-top: clamp(18px, 2.6vw, 32px); color: #FBF3E4; max-width: min(14ch, 100%); }
.bhero__sub { margin-top: clamp(20px, 2.6vw, 34px); max-width: min(38ch, 100%); color: #E8D9C0; }
.bhero__plate {
  margin-top: clamp(30px, 5vh, 56px);
  padding-top: 16px;
  border-top: 1px solid rgba(251,243,228,0.30);
  color: #C9B392;
}

@media (max-width: 760px) {
  .bhero__headline, .bhero__sub { max-width: 100%; }
}
@media (prefers-reduced-motion: reduce) { .bhero__timber { transform: scale(1.02) !important; } }