/* ThermoCraft site components on the v3 system (October 6, 2026). Reads tokens.css; system.css holds the
   base, type and the lab components. One serif family (Cormorant 700) at three sizes only: .display (hero),
   .h2 (one per section) and figures; everything else is the sans. Bronze marks labels, rules and focus,
   never a fill. Hidden starting states live under html.motion only. */

/* ---------- Base additions ---------- */
html { scroll-padding-top: calc(var(--header-h) + 16px); }
h1 { font: 700 var(--t-display)/var(--lh-display) var(--f-serif); letter-spacing: -.005em; }
h2 { font: 700 var(--t-h2)/var(--lh-head) var(--f-serif); letter-spacing: -.005em; }
h3, h4 { font: 600 var(--t-h3)/1.3 var(--f-sans); letter-spacing: -.005em; }
h2.h3, p.h3 { font: 600 var(--t-h3)/1.3 var(--f-sans); }

.skip { position: absolute; left: -9999px; top: 8px; z-index: 100; background: var(--c-ink); color: var(--c-bone); padding: 10px 16px; }
.skip:focus { left: 8px; }
.draft-badge { position: fixed; z-index: 45; left: var(--s-3); bottom: var(--s-3); margin: 0; padding: .55em .8em; background: rgba(10,10,10,.82); color: var(--c-on-dark); border-radius: var(--radius); font: 600 .6875rem/1 var(--f-sans); letter-spacing: .06em; pointer-events: none; }
.tnum { font-variant-numeric: tabular-nums; }
.head-sub { margin-top: var(--s-4); }
.site-footer .tagline { margin-top: var(--s-5); max-width: 12em; }
.foot-op { margin-top: var(--s-4); color: var(--c-on-dark-2); }
.site-footer .bottom .small + .small { margin-top: var(--s-1); }
.foot-brand img { width: 180px; }
.home .hero__title { max-width: 14em; }
.home .hero__lede { max-width: 42rem; }
.nw { white-space: nowrap; }

/* Buttons for page fragments still written with the old names */
.btn-primary { background: var(--c-ink); color: var(--c-bone); border-color: var(--c-ink); }
.btn-primary::before { background: var(--c-dark); }
.btn-ghost, .btn-light { background: transparent; }
.dark .btn-primary, .on-dark .btn-primary { background: var(--c-bone); color: var(--c-ink); border-color: var(--c-bone); }
.dark .btn-primary::before, .on-dark .btn-primary::before { background: #fff; }
.btn-link { display: inline-flex; align-items: center; gap: .55em; font-weight: 600; font-size: .9375rem; position: relative; padding-bottom: .25em; }
.btn-link::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 1px; background: currentColor; transform: scaleX(.35); transform-origin: 0 50%; transition: transform var(--d-base) var(--ease-swift); }
.btn-link:hover::after, .btn-link:focus-visible::after { transform: scaleX(1); }
.actions { display: flex; flex-wrap: wrap; gap: var(--s-3); margin-top: var(--s-6); }

/* ---------- Figures (the [[img]] tag) ---------- */
.fig { position: relative; }
.fig-media { position: relative; overflow: hidden; background: #2a2622; }
.fig-media .pic img { transition: transform 1.2s var(--ease-settle); }
[class*="ratio-"] .fig-media .pic { position: absolute; inset: 0; aspect-ratio: auto; }
.ratio-3x2 .fig-media { aspect-ratio: 3 / 2; }
.ratio-4x3 .fig-media { aspect-ratio: 4 / 3; }
.ratio-4x5 .fig-media { aspect-ratio: 4 / 5; }
.ratio-1x1 .fig-media { aspect-ratio: 1 / 1; }
.ratio-16x9 .fig-media { aspect-ratio: 16 / 9; }
.ratio-21x9 .fig-media { aspect-ratio: 21 / 9; }
.fig figcaption { margin-top: var(--s-3); font-size: .8125rem; line-height: 1.45; color: var(--c-grey); max-width: 60ch; }
.dark .fig figcaption { color: var(--c-on-dark-2); }
.fig-cutout .fig-media, .fig-scan .fig-media, .fig-logo .fig-media { background: transparent; }
.concept-tag { position: absolute; left: 10px; bottom: 10px; z-index: 2; background: rgba(10,10,10,.76); color: #fff; font: 600 .6875rem/1.2 var(--f-sans); letter-spacing: .14em; text-transform: uppercase; padding: 6px 9px; pointer-events: none; max-width: calc(100% - 20px); }
.fig-render .concept-tag { text-transform: none; letter-spacing: .02em; font-size: .75rem; }
a:hover .fig-media .pic img, .g-tile:hover .pic img { transform: scale(1.04); }

/* ---------- Page heads (pages without a hero photograph) ---------- */
.page-head { padding: calc(var(--header-h) + var(--s-9)) 0 var(--s-8); border-bottom: 1px solid var(--c-line); }
.page-head .display, .page-head h1 { margin-top: var(--s-4); max-width: 14em; }
.page-head .lead { margin-top: var(--s-5); max-width: 36rem; color: var(--c-grey); }
.crumbs { font-size: .8125rem; color: var(--c-grey); }
.crumbs a { transition: color var(--d-quick) var(--ease-swift); }
.crumbs a:hover { color: var(--c-ink); }
.hero .crumbs, .hero .crumbs a { color: var(--c-on-dark); opacity: .82; }
.hero--page .hero__title { max-width: 12em; }
.hero__body .crumbs { margin-bottom: var(--s-5); }

/* ---------- Home: species band, profiles, program, partners, Frake, events ---------- */
@media (min-width: 1100px) { .species--6 { grid-template-columns: repeat(6, minmax(0, 1fr)); } }
.profiles--home { margin-top: var(--s-9); }
.profile { display: block; }
.profile .pic { background-color: transparent; }
.profiles--home .profile .h3 { margin-top: var(--s-4); }
.profiles--home .profile p { margin-top: var(--s-2); }
.profile .pic--alpha { aspect-ratio: 5 / 3; display: grid; place-items: center; background: linear-gradient(180deg, #f3f1ec, #e6e3dd); }
.profile .pic--alpha img { max-height: 82%; width: auto; max-width: 88%; filter: drop-shadow(0 12px 12px rgba(40,30,20,.18)); transition: transform 1s var(--ease-settle); }
.profile:hover .pic--alpha img { transform: scale(1.05) translateY(-2%); }
.swatch .pic--alpha { aspect-ratio: 3 / 2; overflow: hidden; }
.swatch .pic--alpha img { width: 100%; height: 100%; object-fit: cover; }
.prog-grid { display: grid; gap: var(--gutter); margin-top: var(--s-8); }
@media (min-width: 800px) { .prog-grid { grid-template-columns: 1fr 1fr; } }
.prog-card { position: relative; display: flex; flex-direction: column; gap: var(--s-3); padding: var(--s-6) 0 var(--s-7); border-top: 1px solid var(--c-line); }
.prog-card::before { content: ""; position: absolute; left: 0; right: 0; top: -1px; height: 1px; background: var(--c-ink); transform: scaleX(0); transform-origin: 0 50%; transition: transform var(--d-panel) var(--ease-settle); }
.prog-card:hover::before, .prog-card:focus-visible::before { transform: scaleX(1); }
.prog-card .h3 { max-width: 22em; }
.prog-card p.muted { max-width: 30rem; }
.prog-card .link-arrow { margin-top: auto; padding-top: var(--s-4); align-self: flex-start; }
.sm-wrap { margin-top: var(--s-8); }
.sm-sec .lead { color: var(--c-on-dark-2); }
.frake-band { position: relative; min-height: clamp(520px, 86svh, 860px); display: flex; align-items: flex-end; overflow: hidden; background: var(--c-dark); color: var(--c-on-dark); isolation: isolate; }
.frake-band__media { position: absolute; inset: 0; z-index: -2; overflow: hidden; }
.frake-band__media > div { position: absolute; inset: 0; will-change: transform; }
.frake-band__media .pic { position: absolute; inset: 0; aspect-ratio: auto; }
.frake-band::after { content: ""; position: absolute; inset: 0; z-index: -1; background: var(--scrim-bottom), var(--scrim-left); }
.frake-band__body { width: 100%; padding-block: var(--section) clamp(2.5rem, 1.5rem + 4vw, 5rem); }
.frake-band .eyebrow { color: var(--c-on-dark); opacity: .82; }
.frake-band .display { margin-top: var(--s-3); }
.frake-band .lead { margin-top: var(--s-4); max-width: 30rem; }
.events-bar { border-top: 1px solid var(--c-line); border-bottom: 1px solid var(--c-line); padding-block: var(--s-6); }
.events-bar__row { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--s-4) var(--s-7); }
.events-bar p { font-variant-numeric: lining-nums; }
.events-bar .eyebrow { margin-right: var(--s-3); }
.cta .h2 { color: inherit; }
.cta.dark .cta__side p { color: var(--c-on-dark-2); }
.cta:not(.dark) .cta__side p { color: var(--c-grey); }

/* ---------- Supply diagram ---------- */
.supply-map { width: 100%; }
.sm { display: block; width: 100%; height: auto; overflow: visible; }
.sm-tall { display: none; max-width: 420px; margin: 0 auto; }
@media (max-width: 759px) { .sm-wide { display: none; } .sm-tall { display: block; } }
.sm-h { font: 600 12px var(--f-sans); letter-spacing: .16em; text-transform: uppercase; fill: var(--c-bronze); }
.sm-chip rect { fill: #151514; stroke: var(--c-line-dark); stroke-width: 1; }
.sm-n { font: 600 17px var(--f-sans); fill: var(--c-on-dark); }
.sm-c { font: 600 11px var(--f-sans); letter-spacing: .15em; text-transform: uppercase; fill: var(--c-bronze); }
.sm-s { font: 400 13px var(--f-sans); fill: var(--c-on-dark-2); }
.sm-tall .sm-n { font-size: 15px; } .sm-tall .sm-s { font-size: 12px; }
.sl { fill: none; stroke: rgba(237,235,231,.55); stroke-width: 1.6; }
.sm-ring { fill: var(--c-dark); stroke: var(--c-bone); stroke-width: 2; }
.sm-ring2 { fill: none; stroke: rgba(237,235,231,.22); stroke-width: 1; stroke-dasharray: 4 6; }
.sm-cap { font: 400 14px var(--f-sans); fill: var(--c-on-dark-2); }

/* ---------- Partners ---------- */
.prod-grid { display: grid; margin-top: var(--s-8); border-top: 1px solid var(--c-line); }
@media (min-width: 640px) { .prod-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1000px) { .prod-grid { grid-template-columns: repeat(3, 1fr); } }
.prod { display: flex; flex-direction: column; gap: var(--s-2); padding: var(--s-6) var(--s-6) var(--s-7) 0; border-bottom: 1px solid var(--c-line); scroll-margin-top: calc(var(--header-h) + 24px); }
.prod-logo { height: 88px; display: flex; align-items: center; margin-bottom: var(--s-4); }
.prod-logo img { max-height: 64px; max-width: 200px; width: auto; }
.prod-type { font: 700 2rem/1 var(--f-serif); }
.prod p:last-child { color: var(--c-grey); max-width: 24rem; }
.pt-pair { display: grid; gap: var(--s-8) var(--gutter); }
@media (min-width: 900px) { .pt-pair { grid-template-columns: 1fr 1fr; } }
.pt-mini { border-top: 1px solid var(--c-line); padding-top: var(--s-6); }
.pt-mini-logo { display: flex; align-items: center; height: 104px; background: var(--c-dark); padding: 16px 20px; margin-bottom: var(--s-6); }
.pt-mini-logo img { max-height: 72px; width: auto; }
.pt-mini-type { font: 700 2.5rem/1 var(--f-serif); color: var(--c-on-dark); }
.pt-mini .h3 { margin-top: var(--s-3); }
.pt-mini p:not(.eyebrow) { margin-top: var(--s-3); color: var(--c-grey); max-width: 34rem; }
.pt-mini .link-arrow { margin-top: var(--s-5); }

/* ---------- Partner program ---------- */
.pg-types { display: grid; gap: var(--s-8) var(--gutter); margin-top: var(--s-8); }
@media (min-width: 900px) { .pg-types { grid-template-columns: 1fr 1fr; } }
.pg-type { scroll-margin-top: calc(var(--header-h) + 24px); border-top: 1px solid var(--c-ink); padding-top: var(--s-6); }
.pg-type .h3 { margin-top: var(--s-3); font-size: clamp(1.375rem, 1.2rem + .6vw, 1.75rem); }
.pg-type .kvs { margin-top: var(--s-6); }
.pg-type .kv { grid-template-columns: 8.5rem 1fr; }
.pg-type .btn { margin-top: var(--s-6); }
.pg-ask { margin-top: var(--s-7); padding-top: var(--s-5); border-top: 1px solid var(--c-line); max-width: 40rem; color: var(--c-grey); }
.pg-ask b { color: var(--c-ink); font-weight: 600; }
.doors--3 .doors__list { }
@media (min-width: 900px) { .doors--3 .doors__list { grid-template-columns: repeat(3, 1fr); } }

/* ---------- Process page additions ---------- */
.facts--wide { margin-top: var(--s-8); }
.qc { display: grid; gap: var(--s-8) var(--gutter); align-items: start; }
@media (min-width: 900px) { .qc { grid-template-columns: 5fr 7fr; } .qc__fig { position: sticky; top: calc(var(--header-h) + var(--s-6)); } }
.qc .points { margin-top: var(--s-6); }
.qc .point p { margin: 0; color: var(--c-grey); }
.dark .points, .dark .point { border-color: var(--c-line-dark); }
.dark .spec th, .dark .spec td { border-color: var(--c-line-dark); }
.classes .spec td { white-space: nowrap; }
.classes .spec td:last-child { white-space: normal; }
@media (max-width: 699px) { .classes .spec { font-size: .875rem; } .classes .spec th, .classes .spec td { padding-right: var(--s-3); } }

/* ---------- Frake: window reveal ---------- */
.fx { position: relative; background: var(--c-dark); color: var(--c-on-dark); }
.fx-stage { position: relative; height: 100svh; min-height: 560px; max-height: 1100px; overflow: hidden; isolation: isolate; }
.fx-frame { position: absolute; inset: 0; z-index: -2; overflow: hidden; will-change: transform; }
.fx-inner { position: absolute; inset: 0; will-change: transform; }
.fx-inner .pic { position: absolute; inset: 0; aspect-ratio: auto; }
.fx-shade { position: absolute; inset: 0; z-index: -1; background: var(--scrim-bottom), var(--scrim-left); }
.fx-text { position: absolute; left: 0; right: 0; bottom: clamp(2.5rem, 1.5rem + 4vw, 5rem); }
.fx-text .eyebrow { color: var(--c-on-dark); opacity: .82; }
.fx-word { font-size: clamp(5rem, 2rem + 12vw, 13rem); line-height: .86; margin-top: var(--s-3); }
.fx-latin { margin-top: var(--s-4); font-style: italic; color: var(--c-on-dark-2); }
.fx-lede { margin-top: var(--s-3); max-width: 30rem; }
.fx-cue { position: absolute; right: var(--margin); bottom: var(--s-6); display: none; }
@media (min-width: 768px) { .fx-cue { display: inline-flex; } }
html.motion .fx-frame { transform: scale(.46); }
html.motion .fx-shade, html.motion .fx-later { opacity: 0; }
.fr-list { margin-top: var(--s-5); border-top: 1px solid var(--c-line-dark); }
.fr-list li { display: grid; grid-template-columns: 7rem 1fr; gap: var(--s-4); padding-block: var(--s-4); border-bottom: 1px solid var(--c-line-dark); }
.fr-list b { font-weight: 600; }
.fr-pitch { margin-top: var(--s-3); max-width: 34rem; font-size: 1.0625rem; }
.fr-list span { color: var(--c-on-dark-2); }
.fr-photos { display: grid; gap: var(--gutter); margin-top: var(--s-8); }
@media (min-width: 700px) { .fr-photos { grid-template-columns: repeat(3, 1fr); } .fr-photos > :nth-child(2) { margin-top: var(--s-9); } }
.fr-photos .pic { aspect-ratio: 4 / 5; }

/* ---------- Forms layout (forms.css styles the fields) ---------- */
.form-layout { display: grid; gap: var(--s-8) var(--gutter); }
@media (min-width: 960px) { .form-layout { grid-template-columns: 5fr 7fr; } }
.form-layout > div:first-child .h2, .form-layout > div:first-child h2 { margin-top: var(--s-4); }
.form-layout > div:first-child p:not(.eyebrow) { margin-top: var(--s-5); color: var(--c-grey); max-width: 30rem; }
.dark .form-layout > div:first-child p:not(.eyebrow) { color: var(--c-on-dark-2); }

/* ---------- Events ---------- */
.event-grid { display: grid; gap: var(--s-8) var(--gutter); align-items: end; }
@media (min-width: 960px) { .event-grid { grid-template-columns: 7fr 5fr; } }
.event-grid .lead { margin-top: var(--s-5); color: var(--c-grey); }
.booth-big { font: 700 var(--t-figure)/.9 var(--f-serif); font-variant-numeric: lining-nums; }
.booth-big small { display: block; font: 600 var(--t-eyebrow)/1.4 var(--f-sans); letter-spacing: var(--track-eyebrow); text-transform: uppercase; color: var(--c-bronze); margin-bottom: var(--s-3); }
.event-card .table-wrap { margin-top: var(--s-6); }
.event-note { margin-top: var(--s-4); }
.stand-grid { display: grid; gap: var(--gutter); margin-top: var(--s-8); }
@media (min-width: 900px) { .stand-grid { grid-template-columns: 1fr 1fr; } }
.stand-card { display: flex; flex-direction: column; gap: var(--s-3); padding: var(--s-7) var(--s-6); border: 1px solid var(--c-line); }
.stand-card.dark { border-color: var(--c-dark); }
.stand-card p:not(.eyebrow):not(.stand-word):not(.stand-latin) { color: var(--c-grey); max-width: 30rem; }
.stand-card.dark p:not(.eyebrow):not(.stand-word):not(.stand-latin) { color: var(--c-on-dark-2); }
.stand-card .btn-link { margin-top: auto; padding-top: var(--s-4); align-self: flex-start; }
.stand-swatches { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--s-3); margin-bottom: var(--s-4); }
.stand-swatches .pic { aspect-ratio: 2 / 3; }
.stand-word { font: 700 var(--t-h2)/1 var(--f-serif); }
.stand-latin { font-style: italic; color: var(--c-on-dark-2); margin-top: 0 !important; }

/* ---------- Species page ---------- */
.filter-bar { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-2) var(--s-6); border-bottom: 1px solid var(--c-line); margin-bottom: var(--s-7); position: relative; }
.filter-bar[hidden] { display: none; }
.filter-bar button { padding: var(--s-4) 0; font: 600 .875rem/1 var(--f-sans); color: var(--c-grey); position: relative; transition: color var(--d-quick) var(--ease-swift); }
.filter-bar button::after { content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 2px; background: var(--c-ink); transform: scaleX(0); transform-origin: 0 50%; transition: transform var(--d-base) var(--ease-glide); }
.filter-bar button:hover, .filter-bar button[aria-pressed="true"] { color: var(--c-ink); }
.filter-bar button[aria-pressed="true"]::after { transform: scaleX(1); }
.filter-count { margin-left: auto; font-size: .8125rem; color: var(--c-grey); }
.sp-grid { display: grid; gap: var(--s-8) var(--gutter); }
@media (min-width: 700px) { .sp-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1100px) { .sp-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.sp-card[hidden] { display: none; }
.sp-card { scroll-margin-top: calc(var(--header-h) + 24px); }
.sp-card .pic { aspect-ratio: 3 / 2; }
.sp-card .pic img { transition: transform 1s var(--ease-settle); }
.sp-card:hover .pic img { transform: scale(1.06); }
.sp-body { padding-top: var(--s-5); border-top: 1px solid var(--c-line); margin-top: var(--s-4); }
.sp-latin { margin-top: var(--s-1) !important; font-style: italic; color: var(--c-grey); font-size: .9375rem; }
.sp-body > p:not(.sp-latin):not(.eyebrow) { margin-top: var(--s-3); color: var(--c-grey); max-width: 30rem; }
.sp-prod { font-size: .8125rem; font-weight: 600; letter-spacing: .04em; color: var(--c-ink) !important; }
.sp-meta { margin-top: var(--s-4); font-size: .875rem; }
.sp-meta div { display: grid; grid-template-columns: 6rem 1fr; gap: var(--s-3); padding-block: var(--s-2); border-top: 1px solid var(--c-line); }
.sp-meta dt { color: var(--c-grey); }
.sp-frake .sp-body { border-top-color: var(--c-ink); }
.slab-add { display: inline-flex; align-items: center; gap: .5em; margin-top: var(--s-4); min-height: 40px; padding: .55em 1em; border: 1px solid var(--c-ink); border-radius: var(--radius); font: 600 .8125rem/1 var(--f-sans); transition: background-color var(--d-base) var(--ease-swift), color var(--d-base) var(--ease-swift); }
.slab-add:hover, .slab-add:focus-visible { background: var(--c-ink); color: var(--c-bone); }
.slab-add[aria-pressed="true"] { background: var(--c-ink); color: var(--c-bone); }
.dark .slab-add { border-color: var(--c-on-dark); }
.dark .slab-add:hover, .dark .slab-add[aria-pressed="true"] { background: var(--c-bone); color: var(--c-ink); }
.swatch-mat { display: grid; place-items: center; width: 100%; aspect-ratio: 3 / 2; border: 1px dashed var(--c-line-strong); color: var(--c-grey); font-size: .75rem; letter-spacing: .08em; text-transform: uppercase; }

/* ---------- Product pages ---------- */
.p-hero__media .pic img { transform-origin: 50% 55%; }
.dark .kv, .dark .kv:first-child { border-color: var(--c-line-dark); }
.dark .kv dt { color: var(--c-on-dark-2); }
.tbc { display: inline-block; font-size: .75rem; font-weight: 600; letter-spacing: .04em; color: var(--c-grey); border: 1px dashed var(--c-line-strong); padding: 2px 8px; border-radius: 12px; }
.placeholder { border: 1px dashed var(--c-bronze); padding: 1px 6px; border-radius: 3px; font-weight: 600; }
.p-species { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s-7) var(--gutter); margin-top: var(--s-8); }
@media (min-width: 900px) { .p-species { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.p-species .swatch__name { margin-top: var(--s-3); }
.swatch__name .swatch__nm { color: inherit; font-weight: 600; font-size: inherit; }
.swatch__nm b { display: block; font-weight: 600; }
.drawings { margin-top: var(--s-4); border-top: 1px solid var(--c-line); font-size: .9375rem; }
.drawings li { display: grid; grid-template-columns: 1.4fr .8fr; gap: 4px 16px; padding-block: var(--s-3); border-bottom: 1px solid var(--c-line); }
.drawings li .muted { grid-column: 1 / -1; font-size: .8125rem; }
.spec-grid { display: grid; gap: var(--s-7) var(--gutter); margin-top: var(--s-7); }
@media (min-width: 900px) { .spec-grid { grid-template-columns: 1fr 1fr; } }
.doc-list { border-top: 1px solid var(--c-line); }
.doc-list li { display: grid; grid-template-columns: 1fr auto auto; gap: var(--s-4); align-items: center; padding-block: var(--s-4); border-bottom: 1px solid var(--c-line); }
.doc-name { font-weight: 600; }
.doc-type { font: 600 .6875rem/1 var(--f-sans); letter-spacing: .14em; color: var(--c-bronze); }
.doc-status { font-size: .8125rem; color: var(--c-grey); }
@media (max-width: 600px) { .doc-list li { grid-template-columns: 1fr auto; } .doc-status { grid-column: 1 / -1; } }
.docs-grid { display: grid; gap: var(--s-7) var(--gutter); align-items: start; }
@media (min-width: 900px) { .docs-grid { grid-template-columns: 5fr 7fr; } }
.docs-grid > div:first-child p:not(.eyebrow) { margin-top: var(--s-5); color: var(--c-grey); max-width: 28rem; }
.others { display: grid; border-top: 1px solid var(--c-line-dark); }
.other { display: flex; justify-content: space-between; align-items: baseline; gap: var(--s-4); padding-block: var(--s-4); border-bottom: 1px solid var(--c-line-dark); }
.other span { font-weight: 600; font-size: 1.125rem; transition: transform var(--d-base) var(--ease-swift); }
.other small { color: var(--c-on-dark-2); font-size: .8125rem; }
.other:hover span { transform: translateX(4px); }
.feature-render { margin-top: 0; }
.weathering { display: grid; gap: var(--s-7) var(--gutter); align-items: center; }
@media (min-width: 900px) { .weathering { grid-template-columns: 1fr 1fr; } }
.weathering p:not(.eyebrow) { margin-top: var(--s-5); color: var(--c-grey); max-width: 30rem; }

/* Board viewer (ThermoClad) */
.viewer-block { width: 100%; }
.viewer { position: relative; background: #c8c9c9; aspect-ratio: 1 / 1; touch-action: pan-y; cursor: grab; user-select: none; -webkit-user-select: none; overflow: hidden; }
.viewer:active { cursor: grabbing; }
.viewer img { width: 100%; height: 100%; object-fit: cover; pointer-events: none; }
.viewer .concept-tag { text-transform: none; letter-spacing: .02em; font-size: .75rem; }
.viewer-hint { position: absolute; right: 10px; top: 10px; background: rgba(237,235,231,.92); color: var(--c-ink); font-size: .75rem; padding: 6px 10px; border-radius: 14px; pointer-events: none; transition: opacity var(--d-base) var(--ease-swift); }
.viewer.moved .viewer-hint { opacity: 0; }
.viewer-controls { display: flex; flex-wrap: wrap; gap: var(--s-2); margin-top: var(--s-4); align-items: center; }
.viewer-controls button { min-height: 40px; padding: .55em 1em; border: 1px solid currentColor; border-radius: var(--radius); font: 600 .8125rem/1 var(--f-sans); transition: background-color var(--d-base) var(--ease-swift), color var(--d-base) var(--ease-swift); }
.viewer-controls button[aria-pressed="true"], .viewer-controls button:hover { background: var(--c-bone); color: var(--c-ink); border-color: var(--c-bone); }
.viewer-range { flex: 1; min-width: 160px; accent-color: var(--c-bronze); }
.viewer-wrap { display: grid; gap: var(--s-8) var(--gutter); align-items: center; }
@media (min-width: 900px) { .viewer-wrap { grid-template-columns: 5fr 7fr; } }
.viewer-wrap p:not(.eyebrow) { margin-top: var(--s-5); color: var(--c-on-dark-2); max-width: 28rem; }

/* Products index */
.pfam-grid { display: grid; gap: 2px; }
@media (min-width: 800px) { .pfam-grid { grid-template-columns: 1fr 1fr; } }
.pfam { position: relative; display: flex; flex-direction: column; justify-content: flex-end; min-height: clamp(360px, 44vw, 600px); padding: clamp(1.25rem, .8rem + 1.4vw, 2.25rem); color: var(--c-on-dark); overflow: hidden; isolation: isolate; background: var(--c-dark); }
.pfam > .pic { position: absolute; inset: 0; z-index: -2; aspect-ratio: auto; }
.pfam > .pic img { transition: transform 1.2s var(--ease-settle); }
.pfam:hover > .pic img, .pfam:focus-visible > .pic img { transform: scale(1.05); }
.pfam::after { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(180deg, rgba(10,10,10,.25) 0%, rgba(10,10,10,0) 34%, rgba(10,10,10,.78) 100%); }
.pfam .eyebrow { color: var(--c-on-dark); opacity: .78; }
.pfam .panel__title { margin-top: var(--s-2); }
.pfam p:not(.eyebrow) { margin-top: var(--s-3); max-width: 30rem; color: var(--c-on-dark-2); }

/* Gallery */
.masonry { columns: 1; column-gap: var(--gutter); }
@media (min-width: 700px) { .masonry { columns: 2; } }
@media (min-width: 1020px) { .masonry { columns: 3; } }
.g-tile { break-inside: avoid; margin-bottom: var(--gutter); }
.g-tile[hidden] { display: none; }

/* About */
.link-cards { display: grid; gap: var(--s-7) var(--gutter); }
@media (min-width: 800px) { .link-cards { grid-template-columns: repeat(3, 1fr); } }
.link-card { border-top: 1px solid var(--c-line); padding-top: var(--s-5); display: flex; flex-direction: column; gap: var(--s-3); }
.link-card p:not(.eyebrow) { color: var(--c-grey); }
.link-card .link-arrow { margin-top: auto; align-self: flex-start; padding-top: var(--s-3); }

/* ---------- Customer portal ---------- */
.portal { position: relative; overflow: hidden; background: var(--c-dark); color: var(--c-on-dark); isolation: isolate; }
.portal-media { position: absolute; inset: 0; z-index: -2; }
.portal-media .pic { position: absolute; inset: 0; aspect-ratio: auto; }
.portal::before { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(90deg, rgba(10,10,10,.88) 0%, rgba(10,10,10,.6) 55%, rgba(10,10,10,.4) 100%); }
.portal-grid { display: grid; gap: var(--s-8) var(--gutter); padding-top: calc(var(--header-h) + var(--s-8)); padding-bottom: var(--s-9); align-items: center; }
@media (min-width: 960px) { .portal-grid { grid-template-columns: minmax(0, 460px) 1fr; gap: var(--s-9); } }
.portal-card { background: var(--c-bone); color: var(--c-ink); padding: clamp(1.5rem, 1rem + 2vw, 2.5rem); }
.portal-card h1 { font-size: var(--t-h2); margin-top: var(--s-4); }
.portal-card .crumbs, .portal-card .crumbs a { color: var(--c-grey); }
.portal-card .muted { margin-top: var(--s-3); }
.portal-info h2 { color: var(--c-on-dark); }
.portal-list { margin: var(--s-6) 0 var(--s-6); border-top: 1px solid var(--c-line-dark); }
.portal-list li { display: grid; gap: 4px; padding-block: var(--s-4); border-bottom: 1px solid var(--c-line-dark); }
.portal-list b { font-weight: 600; }
.portal-list span { color: var(--c-on-dark-2); }

/* ---------- Documents ---------- */
.dc-filters { display: none; border-bottom: 1px solid var(--c-line); padding: var(--s-4) 0 var(--s-3); margin-bottom: var(--s-2); }
.js .dc-filters { display: block; }
.dc-frow { display: grid; gap: var(--s-2); padding: 6px 0; }
@media (min-width: 800px) { .dc-frow { grid-template-columns: 160px minmax(0, 1fr); align-items: center; } }
.dc-flabel, .dc-h4 { font: 600 var(--t-eyebrow)/1.4 var(--f-sans); letter-spacing: var(--track-eyebrow); text-transform: uppercase; color: var(--c-bronze); }
.dc-h4 { margin-bottom: var(--s-3); }
.dc-chips { display: flex; flex-wrap: wrap; gap: var(--s-2); }
.dc-chips button { min-height: 40px; padding: .55em 1em; border: 1px solid var(--c-line-strong); border-radius: var(--radius); font: 600 .8125rem/1 var(--f-sans); transition: background-color var(--d-base) var(--ease-swift), color var(--d-base) var(--ease-swift), border-color var(--d-base) var(--ease-swift); }
.dc-chips button:hover { border-color: var(--c-ink); }
.dc-chips button[aria-pressed="true"] { background: var(--c-ink); border-color: var(--c-ink); color: var(--c-bone); }
.dc-count { margin-top: var(--s-3); font-size: .875rem; color: var(--c-grey); }
.dc-legend { max-width: 48ch; }
.dc-common { margin-top: var(--s-7); margin-bottom: var(--s-8); max-width: 60rem; }
.dc-common .kv { grid-template-columns: 9rem 1fr; }
.dc-panel { border-top: 1px solid var(--c-ink); padding: var(--s-6) 0 var(--s-8); }
.dc-panel[hidden] { display: none; }
.dc-panel-head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 6px 24px; margin-bottom: var(--s-5); }
.dc-panel-head p { color: var(--c-grey); }
.dc-panel-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--s-7); }
.dc-panel-grid > * { min-width: 0; }
@media (min-width: 1020px) { .dc-panel-grid { grid-template-columns: minmax(0, 1.55fr) minmax(0, 1fr); align-items: start; } }
.dc-sizes { min-width: 540px; }
.dc-dwg { min-width: 460px; }
.dc-sizes th:first-child, .dc-sizes td:first-child, .dc-dwg td:first-child, .dc-dwg td:nth-child(2) { white-space: nowrap; }
.dc-note { font-size: .8125rem; color: var(--c-grey); margin-top: var(--s-3); }
.dc-orient { font-size: .875rem; margin-top: var(--s-4); }
.dc-orient strong { font-weight: 600; }
.dc-panel-grid > div > .dc-h4:not(:first-child) { margin-top: var(--s-7); }
.dc-none { font-size: .9375rem; color: var(--c-grey); border-top: 1px solid var(--c-line); border-bottom: 1px solid var(--c-line); padding-block: var(--s-3); }
.dc-doc-table { min-width: 780px; }
.dc-doc-table tbody th { font: 600 .9375rem/1.4 var(--f-sans); letter-spacing: 0; text-transform: none; color: var(--c-ink); text-align: left; }
.dc-doc-table td, .dc-doc-table tbody th { vertical-align: middle; }
.dc-doc-table tr[hidden] { display: none; }
.dc-status { display: inline-block; font-size: .8125rem; font-weight: 600; line-height: 1.3; padding: 3px 10px; border-radius: 12px; white-space: nowrap; border: 1px solid var(--c-line-strong); }
.dc-avail { border-color: var(--c-ink); }
.dc-review { border-style: dashed; color: var(--c-grey); }
table.data { width: 100%; border-collapse: collapse; font-size: .9375rem; }
table.data th { font: 600 .6875rem/1.4 var(--f-sans); letter-spacing: .14em; text-transform: uppercase; text-align: left; color: var(--c-bronze); padding: var(--s-3) var(--s-4) var(--s-3) 0; border-bottom: 1px solid var(--c-line-strong); }
table.data td { padding: var(--s-4) var(--s-4) var(--s-4) 0; border-bottom: 1px solid var(--c-line); vertical-align: top; }
table.data tbody th { font: 600 .9375rem/1.4 var(--f-sans); letter-spacing: 0; text-transform: none; color: var(--c-ink); }
.dc-add { white-space: nowrap; }

/* ---------- Reduced motion and still mode ---------- */
html.still .fx-frame, html.still .fx-inner { transform: none !important; }

/* ---------- Spacing helpers and template details ---------- */
.body-gap { margin-top: var(--s-5); }
.figure-unit { font-size: .45em; }
.wipe--gap { margin-top: var(--s-7); }
.section--flush { padding-top: 0; }
.p-hero__kicker { margin-top: var(--s-7); }
.profile-none { aspect-ratio: 5 / 3; }
.profiles .profile dl { margin-top: var(--s-3); }
.p-sp .slab-add { margin-top: var(--s-3); }
.cta--top .grid { align-items: start; }
.cta__main { grid-column: 1 / -1; }
.cta__main .h2 { max-width: 13em; }
.cta__main .hero__actions { margin-top: var(--s-6); }
@media (min-width: 900px) { .cta__main { grid-column: 1 / span 7; } }
.cta--top .others { align-self: end; }
.pfam-sec { background: var(--c-dark); padding-block: 2px; }
.qc-sec { padding-top: 0; }
.statement__body > .lead + .muted { margin-top: var(--s-5); }
@media (max-width: 599px) {
  .chart__phases li { font-size: .625rem; letter-spacing: .04em; padding-right: .5em; line-height: 1.35; }
  .profiles--home { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s-6) var(--gutter); }
  .draft-badge { font-size: .5625rem; padding: .45em .6em; }
}
/* Inline links in running text keep an underline; component links carry their own. */
p a:not([class]), li > span a:not([class]), .hint a, .note a { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: .2em; transition: text-decoration-color var(--d-quick) var(--ease-swift); }
p a:not([class]):hover { text-decoration-color: var(--c-bronze); }
.stand-swatches .pic--alpha img { aspect-ratio: 2 / 3; object-fit: cover; }
.page-head + .section { padding-top: var(--s-8); }
.flush-top { padding-top: var(--s-8) !important; }
.sp-go { margin-top: var(--s-4); }
/* Process steps without the pinned stage (phones, reduced motion, before the script runs): each step carries its
   own photograph, so the stage media is not shown; on wide screens a step sets photo and text side by side. */
.process:not(.is-live) .process__media { display: none; }
@media (min-width: 900px) {
  .process:not(.is-live) .process__panel { padding-block: var(--section); }
  .process:not(.is-live) .pstep { display: grid; grid-template-columns: 7fr 5fr; column-gap: var(--s-8); align-items: center; }
  .process:not(.is-live) .pstep { grid-template-rows: 1fr auto auto auto 1fr; }
  .process:not(.is-live) .pstep > * { grid-column: 2; }
  .process:not(.is-live) .pstep > :nth-child(2) { grid-row: 2; }
  .process:not(.is-live) .pstep > :nth-child(3) { grid-row: 3; }
  .process:not(.is-live) .pstep > :nth-child(4) { grid-row: 4; }
  .process:not(.is-live) .pstep__img { grid-column: 1; grid-row: 1 / -1; margin: 0; }
  .process:not(.is-live) .process__chart { max-width: 46rem; margin-left: auto; }
}

/* ---------- Kiln slider (home; hand-off v3, October 8): full bleed like the old .material band; the copy sits in a dark
   band under the picture so the kiln door stays clear. The Ayous is the 600 px Marketplace placeholder until v3.1. ---------- */
.kiln { position: relative; background: var(--c-dark); color: var(--c-on-dark); }
.kiln__stage { position: relative; width: 100%; height: clamp(480px, 74svh, 820px); overflow: hidden; user-select: none; -webkit-user-select: none; touch-action: pan-y; background: #1a1612; --pos: 62%; }
.kiln__img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; }
.kiln__before { object-position: 50% 58%; }
.kiln__after-wrap { position: absolute; inset: 0; clip-path: inset(0 0 0 var(--pos, 62%)); }
.kiln__after { object-position: 50% 50%; }
.kiln__stage::after { content: ""; position: absolute; inset: 0; pointer-events: none; z-index: 2; background: linear-gradient(180deg, rgba(10, 10, 10, .38) 0%, rgba(10, 10, 10, 0) 20%); }
.kiln__handle { position: absolute; top: 0; bottom: 0; left: var(--pos, 62%); width: 0; z-index: 3; pointer-events: none; }
.kiln__handle::before { content: ""; position: absolute; top: 0; bottom: 0; left: -1px; width: 2px; background: var(--c-on-dark); opacity: .9; }
.kiln__knob { position: absolute; top: 46%; left: -26px; width: 52px; height: 52px; border-radius: 50%; background: var(--c-bone); box-shadow: 0 6px 24px rgba(0, 0, 0, .35); display: grid; place-items: center; }
.kiln__knob svg { width: 24px; height: 24px; }
.kiln__label { position: absolute; z-index: 3; top: clamp(16px, 3vw, 32px); padding: 8px 12px; background: rgba(10, 10, 10, .6); color: var(--c-on-dark); font: 600 var(--t-eyebrow)/1.4 var(--f-sans); letter-spacing: var(--track-eyebrow); text-transform: uppercase; border-radius: 2px; transition: opacity 240ms var(--ease-swift); max-width: 44%; }
.kiln__label--before { left: var(--margin); }
.kiln__label--after { right: var(--margin); text-align: right; }
.kiln__range { position: absolute; inset: 0; z-index: 5; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: ew-resize; -webkit-appearance: none; appearance: none; background: transparent; }
.kiln__range:focus-visible ~ .kiln__handle .kiln__knob { outline: 2px solid var(--c-bronze); outline-offset: 3px; }
.kiln__body { padding: clamp(2rem, 1.4rem + 2.4vw, 3.75rem) 0 clamp(2.25rem, 1.6rem + 2.6vw, 4rem); }
.kiln__row { display: grid; gap: 1.25rem; align-items: end; }
@media (min-width: 900px) { .kiln__row { grid-template-columns: minmax(0, 1fr) auto; gap: 3rem; } }
.kiln__body .eyebrow { color: var(--c-bronze); }
.kiln__body .h2 { margin-top: .75rem; font-size: clamp(1.9rem, 1.35rem + 1.5vw, 2.75rem); line-height: 1.12; max-width: 26em; text-wrap: pretty; }
.kiln__cap { margin: 0; font-size: .8125rem; color: var(--c-on-dark-2); max-width: 22em; }
@media (max-width: 760px) {
  .kiln__stage { height: clamp(380px, 62svh, 560px); }
  .kiln__knob { top: 50%; margin-top: -26px; }
}
@media (prefers-reduced-motion: no-preference) {
  .kiln.is-intro .kiln__after-wrap { transition: clip-path 1400ms var(--ease-glide); }
  .kiln.is-intro .kiln__handle { transition: left 1400ms var(--ease-glide); }
}

/* ---------- Doors in two groups (rework October 7) ---------- */
.doors__group + .doors__group { margin-top: var(--s-7); }
.doors__gh { margin: var(--s-8) 0 0; font: 600 var(--t-eyebrow)/1.4 var(--f-sans); letter-spacing: var(--track-eyebrow); text-transform: uppercase; color: var(--c-on-dark-2); }
.doors__group + .doors__group .doors__gh { margin-top: 0; }
.doors__gh + .doors__list { margin-top: var(--s-4); }
.doors--light .doors__gh { color: var(--c-grey); }
.door__links { display: flex; flex-wrap: wrap; gap: 0 var(--s-5); margin-top: auto; }
.door__links .link-arrow { margin-top: 0; }
@media (min-width: 900px) { .doors__list--2 { grid-template-columns: repeat(2, 1fr); } .doors__list--2 .door p { max-width: 30rem; } }

/* ---------- ThermoDesign service page (rework October 7) ---------- */
.svc-with { margin: var(--s-1) 0 var(--s-2); font: 600 var(--t-small)/1.4 var(--f-sans); color: var(--c-grey); }
.svc-small { margin-top: var(--s-5); }
.svc-small .link-arrow { color: var(--c-on-dark); }

/* ---------- Visual sections (hand-off v2, October 7): icon cards, stage strips, icon lists, supply-chain diagram.
   Icons are inline SVG from icons.py: bronze outline, stroke 1.6, never filled. ---------- */
.ic { color: var(--c-bronze); flex: none; display: block; }
.lab { font: 600 1.0625rem/1.3 var(--f-sans); margin: 0; }
.sub { font: 600 var(--t-eyebrow)/1.4 var(--f-sans); letter-spacing: var(--track-eyebrow); text-transform: uppercase; margin: 0 0 var(--s-5); color: inherit; opacity: .9; }
.sub + .stages, .sub + .ilist { margin-top: 0; }

/* Doors as icon cards in two groups: one row of six from 1180 px, group heads above their cards. */
.doorsgrid { display: grid; grid-template-columns: 4fr 2fr; column-gap: 1.25rem; margin-top: clamp(2.25rem, 1.8rem + 2vw, 3.5rem); }
.grp { font: 600 var(--t-eyebrow)/1.4 var(--f-sans); letter-spacing: var(--track-eyebrow); text-transform: uppercase; color: var(--c-on-dark-2); margin: 0 0 var(--s-4); padding-top: var(--s-4); border-top: 1px solid var(--c-bronze); }
.g1 { grid-column: 1; grid-row: 1; } .g2 { grid-column: 2; grid-row: 1; }
.doors2 { list-style: none; margin: 0; padding: 0; display: grid; gap: 1px; background: var(--c-line-dark); border: 1px solid var(--c-line-dark); align-content: stretch; }
.doors2.four { grid-column: 1; grid-row: 2; grid-template-columns: repeat(4, minmax(0, 1fr)); }
.doors2.two { grid-column: 2; grid-row: 2; grid-template-columns: repeat(2, minmax(0, 1fr)); }
.door2 { background: var(--c-dark); padding: var(--s-5) 1.25rem 1.25rem; display: flex; flex-direction: column; gap: 1.1rem; }
.door2 .ic { width: 48px; height: 48px; }
.door2__t { display: flex; flex-direction: column; gap: var(--s-2); flex: 1; }
.door2 p { margin: 0; color: var(--c-on-dark-2); font-size: .9375rem; line-height: 1.5; }
.door2 .link-arrow { margin-top: auto; align-self: flex-start; color: var(--c-on-dark); padding-top: var(--s-3); }
.door2 .link-arrow + .link-arrow { margin-top: 0; }
.doors--light .grp { color: var(--c-grey); }
.doors--light .doors2 { background: var(--c-line); border-color: var(--c-line); }
.doors--light .door2 { background: var(--c-bone); }
.doors--light .door2 p { color: var(--c-grey); }
.doors--light .door2 .link-arrow { color: var(--c-ink); }
@media (max-width: 1180px) {
  .doorsgrid { grid-template-columns: 1fr; }
  .g1, .g2, .doors2.four, .doors2.two { grid-column: 1; grid-row: auto; }
  .g1 { order: 1; } .doors2.four { order: 2; } .g2 { order: 3; margin-top: 2.25rem; } .doors2.two { order: 4; }
  .doors2.four, .doors2.two { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 620px) {
  .doors2.four, .doors2.two { grid-template-columns: 1fr; }
  .door2 { flex-direction: row; gap: var(--s-4); padding: 1.1rem var(--s-4); }
  .door2 .ic { width: 36px; height: 36px; margin-top: 2px; }
}

/* Stage strip: horizontal from 900 px, a vertical timeline below. */
.stages { list-style: none; margin: var(--s-7) 0 0; padding: 0; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: var(--s-5); position: relative; }
.stages::before { content: ""; position: absolute; left: 34px; right: calc((100% - 6rem) / 5 - 34px); top: 34px; height: 1px; background: var(--c-line); }
.dark .stages::before { background: var(--c-line-dark); }
.stage { position: relative; display: flex; flex-direction: column; gap: .55rem; }
.stage__mk { position: relative; width: 68px; height: 68px; border-radius: 50%; border: 1px solid var(--c-bronze); display: grid; place-items: center; background: var(--c-bone); }
.dark .stage__mk { background: var(--c-dark); }
.stage__n { position: absolute; top: -6px; right: -10px; font: 700 1.25rem/1 var(--f-serif); color: var(--c-ink); background: inherit; padding: 2px 3px; }
.dark .stage__n { color: var(--c-on-dark); }
.stage .lab { margin-top: var(--s-2); }
.stage p { margin: 0; font-size: .9375rem; line-height: 1.5; color: var(--c-grey); }
.dark .stage p { color: var(--c-on-dark-2); }
.stage p.with { font-size: .8125rem; font-weight: 600; color: var(--c-bronze); }
@media (max-width: 900px) {
  .stages { grid-template-columns: 1fr; gap: 0; }
  .stages::before { left: 27px; right: auto; top: 28px; bottom: 28px; width: 1px; height: auto; }
  .stage { display: grid; grid-template-columns: 56px 1fr; column-gap: var(--s-4); padding-bottom: 1.4rem; }
  .stage__mk { width: 56px; height: 56px; grid-row: span 3; }
  .stage__mk .ic { width: 30px; height: 30px; }
  .stage .lab { margin-top: .3rem; }
}

/* Partner types under the strip (home). */
.ptypes { list-style: none; margin: var(--s-7) 0 0; padding: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 1px; background: var(--c-line); border: 1px solid var(--c-line); }
.ptypes li { background: var(--c-bone); display: flex; gap: 1.1rem; padding: 1.4rem; }
.ptypes p { margin: .35rem 0 .75rem; color: var(--c-grey); font-size: .9375rem; }
@media (max-width: 760px) { .ptypes { grid-template-columns: 1fr; } }

/* Program page: partner cards and the two icon lists. */
.pcards { display: grid; grid-template-columns: 1fr 1fr; gap: 1.25rem; margin-top: var(--s-7); }
.pcard { border: 1px solid var(--c-line); padding: 1.6rem; display: flex; flex-direction: column; gap: var(--s-4); scroll-margin-top: calc(var(--header-h, 72px) + 1rem); }
.pcard dl { margin: 0; display: grid; gap: .6rem; }
.pcard dl div { display: grid; grid-template-columns: 6.5rem 1fr; gap: var(--s-3); border-top: 1px solid var(--c-line); padding-top: .6rem; }
.pcard dt { font: 600 .75rem/1.6 var(--f-sans); letter-spacing: .12em; text-transform: uppercase; color: var(--c-grey); }
.pcard dd { margin: 0; font-size: .9375rem; }
.pcard .btn { align-self: flex-start; margin-top: auto; }
.bring { display: grid; grid-template-columns: 1fr 1fr; gap: 2.5rem; }
.ilist { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--s-1); }
.ilist li { display: flex; gap: .9rem; align-items: center; padding: .65rem 0; border-top: 1px solid var(--c-line); }
.dark .ilist li { border-top-color: var(--c-line-dark); }
.ilist .ic { width: 32px; height: 32px; }
@media (max-width: 760px) { .pcards, .bring { grid-template-columns: 1fr; } .bring { gap: var(--s-6); } }

/* Specification service: the supply-chain diagram (inline SVG; a list on phones) and the specification card. */
.chain-d { margin-top: var(--s-4); }
.chain { width: 100%; height: auto; display: block; max-width: 1100px; }
.chain .nd { fill: #F6F5F2; stroke: var(--c-line); }
.chain .ndi { fill: none; stroke: var(--c-bronze); stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.chain .ln { fill: none; stroke: var(--c-bronze); stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.chain .dash { stroke-dasharray: 5 6; }
.chain .br { fill: none; stroke: var(--c-ink); stroke-width: 1; opacity: .5; }
.chain text { font-family: var(--f-sans); text-anchor: middle; fill: var(--c-ink); }
.chain .t1 { font-size: 15px; font-weight: 600; }
.chain .t2 { font-size: 13px; fill: var(--c-grey); }
.chain .tms { font-size: 9px; font-weight: 400; }
.chain .t3 { font-size: 12px; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; fill: var(--c-bronze); text-anchor: start; }
.chain .t4 { font-size: 14px; fill: var(--c-grey); }
.chain-p { display: none; }
.chain-m { list-style: none; margin: 0; padding: 0; }
.chain-m li { display: flex; gap: var(--s-4); align-items: center; padding: .85rem var(--s-4); background: #F6F5F2; border: 1px solid var(--c-line); position: relative; margin-bottom: 22px; }
.chain-m li:not(:last-child)::after { content: ""; position: absolute; left: 33px; bottom: -22px; width: 1px; height: 22px; background: var(--c-bronze); }
.chain-m li:nth-child(3) { border-style: dashed; }
.chain-m b { display: block; font-weight: 600; }
.chain-m span { color: var(--c-grey); font-size: .9375rem; }
.chain-m__team { color: var(--c-grey); font-size: .9375rem; margin: 0; }
@media (max-width: 760px) { .chain-d { display: none; } .chain-p { display: block; margin-top: var(--s-4); } }
.specline { margin-top: clamp(2.5rem, 2rem + 2vw, 4rem); padding: var(--s-5); border: 1px solid var(--c-line); background: #F6F5F2; }
.tokens { display: flex; flex-wrap: wrap; gap: var(--s-2); margin: 0 0 .9rem; }
.tokens span { font: 600 .9375rem/1 var(--f-sans); padding: .7rem .9rem; border: 1px solid var(--c-bronze); border-radius: 2px; background: var(--c-bone); }
.specline .muted { margin: 0; font-size: .9375rem; }

/* Inline action links in cards: underlined, the arrow kept on the last word so it never wraps alone (v2). */
.act { display: inline; font-weight: 600; font-size: .9375rem; line-height: 1.5; text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 5px; }
.act .arrow { display: inline-block; width: 14px; height: 14px; vertical-align: -2px; margin-left: .3rem; transition: transform var(--d-quick) var(--ease-swift); }
.act:hover .arrow, .act:focus-visible .arrow { transform: translateX(3px); }
.door2 .act { margin-top: auto; padding-top: var(--s-3); color: var(--c-on-dark); align-self: flex-start; }
.door2 .act + .act { margin-top: 0; padding-top: var(--s-2); }
.doors--light .door2 .act { color: var(--c-ink); }
.ptypes .act { color: var(--c-ink); }

/* Category titles (Ben, October 8): the family name is the large title, the category the smaller line under it. */
.panel__sub { font: 600 clamp(1rem, .92rem + .3vw, 1.1875rem)/1.3 var(--f-sans); color: var(--c-on-dark); opacity: .9; margin-top: var(--s-2); }
.pfam p.panel__sub { margin-top: var(--s-2); color: var(--c-on-dark); max-width: none; }
/* Desktop home panels: a closed panel is 18% of the row, so the one-word family name scales with the viewport and
   fits whole at every width from 900 px up ("ThermoDesign" is the widest at 5.89 em; open panels have room to spare). */
@media (min-width: 900px) {
  .panels .panel__title { font-size: min(2.75rem, calc(2.9vw - 5px)); }
  .panels .panel__sub { font-size: max(.8125rem, calc(1.1vw + 1px)); }
}
/* Family titles in bronze (Ben, October 8). Over the panel and tile photos the eyebrow bronze holds 5:1 or better on the
   scrim; on bone it falls to 2.5:1, so the products band heading on bone takes the deeper bronze. */
.panels .panel__title, .pfam .panel__title { color: var(--c-bronze); }
/* Bronze sits close to the wood in hue, so the title gets a soft dark halo and the lower scrim deepens under the label. */
.panels .panel__title, .pfam .panel__title { text-shadow: 0 1px 2px rgba(10,10,10,.55), 0 0 22px rgba(10,10,10,.6); }
.panels .panel__shade { background: linear-gradient(180deg, rgba(10,10,10,.35) 0%, rgba(10,10,10,0) 30%, rgba(10,10,10,.5) 62%, rgba(10,10,10,.86) 100%); }
.pfam::after { background: linear-gradient(180deg, rgba(10,10,10,.25) 0%, rgba(10,10,10,0) 30%, rgba(10,10,10,.5) 62%, rgba(10,10,10,.86) 100%); }
#sw-band-h { color: var(--c-bronze-deep); }

/* Frake hero (Chris Bouchard's notes, October 8): "New to ThermoCraft 2026" leads and outranks the species name. */
.fx-title { margin: 0; }
.fx-new { display: block; font-size: clamp(2.75rem, 1.2rem + 6.2vw, 7rem); line-height: .95; max-width: 11em; text-wrap: balance; }
.fx-title .fx-word { display: block; font-size: clamp(2.25rem, 1.1rem + 3.6vw, 4.75rem); line-height: 1; margin-top: var(--s-3); }
/* Frake producer block (a held release block until November 5). The name stands in for the logo until the file arrives. */
.fr-maker__mark { margin-top: var(--s-3); font: 700 clamp(1.75rem, 1.4rem + 1.2vw, 2.25rem)/1 var(--f-sans); letter-spacing: -.01em; color: var(--c-on-dark); }
.fr-maker__logo { margin-top: var(--s-3); width: clamp(150px, 12vw, 200px); }
.fr-maker__line { margin-top: var(--s-3); font-size: var(--t-lead); color: var(--c-on-dark); }

/* Fire-retardant tile on the products page: the "Treated with" mark under the line. */
.pfam__with { display: flex; align-items: center; gap: calc(140px * .155); margin-top: var(--s-4); }  /* clear space around the 140 px mark: its capital S height */
.pfam__with .eyebrow { color: var(--c-on-dark); opacity: .78; }
.pfam__logo { display: block; width: 140px; }
/* Nine nav items from October 8: keep the header button on one line and tighten the gaps on narrow desktops. */
.site-header .btn { white-space: nowrap; }
@media (min-width: 1200px) and (max-width: 1359px) { .nav-links { gap: var(--s-4); } }
/* Brand names are set as plain letters (conductor QC, October 8): Cormorant joins "Th" into a ligature, which changes
   ThermoCraft and every family name. Off everywhere, as in print. Set on every element: the font shorthand on headings
   resets both properties, so inheriting them from html is not enough. */
*, *::before, *::after { font-variant-ligatures: none !important; font-feature-settings: "liga" 0, "dlig" 0 !important; }
/* Five family panels when the fire-retardant line is released (Ben, October 8). The open panel takes 38% of the row
   (JS), each closed one 15.5%; the widest name is 6.09 em, so the title scales to fit whole from 900 px up. */
.panels { --n: 4; }
.panels:has(.panel:nth-child(5)) { --n: 5; }
@media (min-width: 900px) {
  .panels__list { grid-template-columns: repeat(var(--n), 1fr); }
  .panels.is-live .panel__label { width: calc((100vw - (var(--n) - 1) * 2px) / var(--n)); }
  .panels:has(.panel:nth-child(5)) .panel__title { font-size: min(2.75rem, calc(2.25vw - 3.5px)); }
}
/* The fifth family tile spans both columns on desktop (same tile, wider; conductor, October 8); one column on phones. */
@media (min-width: 800px) { .pfam--span { grid-column: 1 / -1; } }
/* October 9: the producer mark in the Frake producer block; the home schematic loses its big readout and says what it shows;
   the process facts row has two facts once the temperature stat left. */
.fr-maker__logo { display: block; height: 120px; width: auto; margin-top: var(--s-3); }
.chart__label { font-size: .75rem; letter-spacing: var(--track-eyebrow); text-transform: uppercase; color: var(--c-on-dark-2); margin-bottom: var(--s-3); }
@media (min-width: 700px) { .facts--two { grid-template-columns: repeat(2, 1fr); } }

/* Social links: footer (dark) and contact page (light) */
.socials { display: flex; gap: var(--s-2); margin: var(--s-4) 0 0; padding: 0; list-style: none; }
.socials a { display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; border: 1px solid currentColor; border-radius: 50%; color: inherit; opacity: .8; transition: opacity .2s, color .2s; }
.socials a:hover, .socials a:focus-visible { opacity: 1; color: var(--c-bronze); }
.site-footer .socials a { color: var(--c-on-dark); }
.contact-email + .socials { margin: var(--s-3) 0 var(--s-4); }