/*
  sable-farms · sable-brand.css · the approved Sable Farms brand, layered over tokens.css + site.css
  Source: 01-SABLE-BRAND/26-0924-sable farms BRAND-APPROVED PAGES.pdf (colors sampled from the PDF, fonts as named there).
  Fonts: IM Fell Great Primer (logo + headers) · IBM Plex Sans Thai (caps + light paragraphs) · script accent =
         Monsieur La Doulaise, the closest free match to "TM Script" (swap for the licensed file or an SVG wordmark from the designer).
  Seasons: the palette is a season. [data-season] on <html> switches it. Autumn/winter leads (9/25).
  Photos: real photos carry one warm grain grade (color + grain only, nothing added or removed).
  [S151-sablesite · 2026-09-25]
*/
:root,[data-season="autumn"]{
  /* the brand's autumn/winter swatches, sampled */
  --sf-khaki:#9E9168;  --sf-brown:#62422D;  --sf-bone:#E5E1CE;
  --sf-sage:#738D85;   --sf-char:#343431;   --sf-moss:#5D5F3E;
  --sf-paper:#FFFAF0;  /* the page ground on every approved page */
  --sf-ink:#2B2622;    /* near-black, warm */
  --sf-accent:var(--sf-brown);
}
[data-season="spring"]{
  /* spring/summer swatches, ready for the turn of the season */
  --sf-khaki:#9E9167;  --sf-brown:#814E33;  --sf-bone:#E6E0CF;
  --sf-sage:#D1D2B5;   --sf-char:#3A3833;   --sf-moss:#ACAEA7;
  --sf-accent:#814E33;
}
:root{
  /* remap the shared tokens onto Sable so every existing rule follows */
  --sand:var(--sf-paper); --cream:#F6F0E2; --white:#FFFDF8;
  --forest:var(--sf-ink); --fir:var(--sf-char); --olive:var(--sf-brown); --moss:var(--sf-moss); --sage:var(--sf-sage);
  --ink:var(--sf-char); --muted:#716A5E; --bark:var(--sf-brown);
  --rule:var(--sf-char); --hairline:#E4DDCB;
  --serif:'IM Fell Great Primer',Georgia,'Times New Roman',serif;
  --sans:'IBM Plex Sans Thai','IBM Plex Sans',system-ui,-apple-system,sans-serif;
  --mono:'IBM Plex Sans Thai','IBM Plex Sans',system-ui,sans-serif;
  --script:'Monsieur La Doulaise','Snell Roundhand',cursive;
  --scrim:linear-gradient(to top,rgba(43,38,34,.72),rgba(43,38,34,.08));
}
/* IM Fell has one weight. Never fake a bold. */
body{font-synthesis:none;background:var(--sf-paper)}
::selection{background:var(--sf-khaki);color:var(--sf-paper)}
a{color:var(--sf-brown);border-bottom-color:rgba(98,66,45,.3)}
a:hover{color:var(--sf-ink);border-bottom-color:var(--sf-ink)}
strong{font-weight:500;color:var(--sf-ink)}

/* labels · IM Fell capitals, widely tracked, the way the brand pages set their section names */
.sec h2,.layer .ln-head h2{font-family:var(--serif);font-weight:400;font-size:15px;letter-spacing:.24em;color:var(--sf-ink);
  border-bottom:1px solid var(--sf-char)}
.caps{font-family:var(--sans);font-weight:500;letter-spacing:.22em;color:var(--sf-ink)}
.sec h3,.lk,.pk,.lname,.cn h3,.row .n,.pl .pn,.fig .v{font-weight:400}
.sec h3{letter-spacing:0}
.lede{font-weight:300}
.mono,.plate .cap,.strip,.toc a,.tb .k,.tb .colophon,.row .n small,.fig .k,.st,.hk,.cn-n,.cn-k,.event .when,.gate-note{
  font-family:var(--sans);font-weight:400;letter-spacing:.14em}

/* nav · the logo is IM Fell */
.nav .mark{font-family:var(--serif);font-weight:400;font-size:24px;letter-spacing:.02em}
.nav .mark small{font-family:var(--serif);font-style:italic;font-weight:400;font-size:13px;letter-spacing:.02em;text-transform:none}
.nav li a{font-weight:500;letter-spacing:.24em}

/* buttons */
.btn{background:var(--sf-char);border-color:var(--sf-char);color:var(--sf-paper);font-weight:500}
.btn:hover{background:var(--sf-brown);border-color:var(--sf-brown)}

/* photo hero · warm charcoal scrim so cream type reads on any photo */
.hero.photo{background:var(--sf-char)}
.hero.photo .art::after{background:linear-gradient(to top,rgba(43,38,34,.86) 0%,rgba(43,38,34,.5) 36%,rgba(43,38,34,.06) 72%)}
.hero.photo .art::before{background:linear-gradient(to bottom,rgba(43,38,34,.5) 0%,rgba(43,38,34,.15) 55%,rgba(43,38,34,0) 100%)}
.hero.photo h1{font-family:var(--serif);font-weight:400;color:var(--sf-paper);letter-spacing:0}
.hero.photo .eyebrow{color:#EFE6D2}
.hero .where{font-family:var(--serif);font-style:italic;font-size:clamp(20px,2.2vw,26px);color:#F3EBDA;margin-top:14px;opacity:0;transform:translateY(8px)}
.hero.photo.in .where{animation:rise .9s ease-out forwards .9s}
.no-js .hero .where{opacity:1;transform:none}
.hero.photo .line{color:#EDE5D4}

/* plates · captions that never fight the photo label */
.plate{background:var(--white);border-color:var(--hairline)}
.plate .cap{font-size:10px;letter-spacing:.12em;align-items:flex-start}
.plate .cap span:first-child{min-width:0}
.plate .cap span:last-child{flex:none}
.gallery .plate img{aspect-ratio:4/3}
@media(max-width:700px){.gallery{grid-template-columns:1fr 1fr}.gallery .plate:first-child{grid-column:1/-1}.gallery .plate:first-child img{aspect-ratio:4/3}}

/* ── the pillar dial · one pillar at a time, with its photo ───────────────── */
.pw{display:grid;grid-template-columns:minmax(260px,360px) 1fr;gap:clamp(24px,4vw,56px);align-items:center;margin-top:30px}
.pw-dial svg{width:100%;height:auto;display:block;overflow:visible}
.pw-dial .seg path{fill:var(--sf-bone);stroke:var(--sf-paper);stroke-width:3;cursor:pointer;transition:fill .35s}
.pw-dial .seg:hover path{fill:#D9D2BA}
.pw-dial .seg.on path{fill:var(--sf-accent)}
.pw-dial .seg text{pointer-events:none;text-anchor:middle;transition:fill .35s}
.pw-dial .num{font-family:var(--sans);font-size:15px;letter-spacing:.12em;fill:var(--sf-brown)}
.pw-dial .lab{font-family:var(--serif);font-size:19px;fill:var(--sf-ink)}
.pw-dial .seg.on .num,.pw-dial .seg.on .lab{fill:var(--sf-paper)}
.pw-dial .core{fill:var(--sf-paper);stroke:var(--sf-khaki);stroke-width:1}
.pw-dial .ct{font-family:var(--serif);font-size:24px;fill:var(--sf-ink);text-anchor:middle}
.pw-dial .cs{font-family:var(--sans);font-size:12px;letter-spacing:.22em;fill:var(--sf-brown);text-anchor:middle}
.pw-stage{display:grid;position:relative}
.pw-card{grid-area:1/1;display:grid;grid-template-columns:1fr;opacity:0;visibility:hidden;transition:opacity .6s ease,visibility 0s .6s}
.pw-card.on{opacity:1;visibility:visible;transition:opacity .6s ease}
.pw-card figure{position:relative;overflow:hidden;background:var(--sf-bone)}
.pw-card img{width:100%;aspect-ratio:5/4;object-fit:cover;transform:scale(1.03);transition:transform 6s ease-out}
.pw-card.on img{transform:scale(1)}
.pw-card figcaption{position:absolute;left:12px;bottom:10px;font-family:var(--sans);font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:rgba(255,250,240,.85);text-shadow:0 1px 6px rgba(0,0,0,.35)}
.pw-meta{padding:20px 0 0;display:grid;grid-template-columns:auto 1fr;gap:6px 18px;align-items:baseline}
.pw-n{font-family:var(--sans);font-size:11px;letter-spacing:.2em;color:var(--sf-brown);grid-row:1/3;padding-top:10px}
.pw-name{font-family:var(--serif);font-weight:400;font-size:clamp(28px,3.2vw,38px);line-height:1.08;color:var(--sf-ink)}
.pw-line{font-size:17px;line-height:1.55;color:var(--sf-char);max-width:44ch;margin:0}
.pw-nav{display:flex;align-items:center;gap:14px;margin-top:22px}
.pw-nav button{font-family:var(--sans);background:none;border:1px solid var(--hairline);width:42px;height:42px;cursor:pointer;color:var(--sf-ink);font-size:17px;line-height:1}
.pw-nav button:hover{border-color:var(--sf-ink)}
.pw-dots{display:flex;gap:8px}
.pw-dots i{width:22px;height:2px;background:var(--hairline);display:block;transition:background .3s}
.pw-dots i.on{background:var(--sf-brown)}
.no-js .pw-card{opacity:1;visibility:visible;grid-area:auto}
@media(max-width:820px){
  .pw{grid-template-columns:1fr;gap:18px}
  .pw-dial{max-width:230px;margin:0 auto}
  .pw-dial .lab{display:none}
  .pw-dial .num{font-size:26px;letter-spacing:.04em}
  .pw-nav{justify-content:space-between}
  .pw-card img{aspect-ratio:4/5}
  .pw-meta{grid-template-columns:1fr}.pw-n{grid-row:auto;padding:0}
}
@media(prefers-reduced-motion:reduce){.pw-card,.pw-card.on{transition:none}.pw-card img{transform:none;transition:none}}

/* facts · text values stay on one line */
.fig .v{white-space:nowrap;font-size:clamp(30px,3.8vw,42px)}

/* investor hero · readable on any photo, real padding */
.hero.plate-hero .art::after{background:linear-gradient(to top,rgba(43,38,34,.88) 0%,rgba(43,38,34,.62) 40%,rgba(43,38,34,.18) 75%,rgba(43,38,34,.05) 100%)!important}
.hero.plate-hero .text .wide{padding-left:clamp(24px,5vw,64px);padding-right:clamp(24px,5vw,64px)}
.hero.plate-hero h1{font-family:var(--serif);font-weight:400!important;max-width:18ch}
.hero.plate-hero .eyebrow{color:#EFE6D2!important;text-shadow:0 1px 8px rgba(0,0,0,.35)}
.hero.plate-hero .line{color:#EDE5D4!important;max-width:56ch}

/* footer title block */
.tb{background:var(--sf-bone);border-top-color:var(--sf-char)}
.tb .sig{font-family:var(--script);font-size:40px;color:var(--sf-brown);line-height:1;padding:26px 0 0}
/* the dial breaks out of the reading column so the photo can be large */
/* desktop: the dial sits on the text column's left edge; the photo bleeds right. Gaps are one unit (32px) everywhere. */
@media(min-width:821px){
  .col .pw{width:min(1080px,calc(100vw - 2*var(--gutter)));grid-template-columns:300px 1fr;column-gap:48px;align-items:start;padding-top:8px}
  .pw-dial{padding-top:12px}
  .pw-card img{aspect-ratio:3/2;max-height:none}
  .pw-meta{padding-top:24px;grid-template-columns:1fr auto;grid-template-areas:"n n" "name nav" "line nav";gap:6px 24px;align-items:start}
  .pw-n{grid-area:n;padding:0}
  .pw-name{grid-area:name}
  .pw-line{grid-area:line}
  .pw-meta .pw-nav{grid-area:nav;margin-top:6px}
}
.pw-nav{display:flex;align-items:center;gap:14px;margin-top:22px}
@media(max-width:820px){.pw-nav{justify-content:space-between;margin-top:18px}}

/* facts · text values stay on one line */
.fig .v{white-space:nowrap;font-size:clamp(30px,3.8vw,42px)}

/* investor hero · readable on any photo, real padding */
.hero.plate-hero .art::after{background:linear-gradient(to top,rgba(43,38,34,.88) 0%,rgba(43,38,34,.62) 40%,rgba(43,38,34,.18) 75%,rgba(43,38,34,.05) 100%)!important}
.hero.plate-hero .text .wide{padding-left:clamp(24px,5vw,64px);padding-right:clamp(24px,5vw,64px)}
.hero.plate-hero h1{font-family:var(--serif);font-weight:400!important;max-width:18ch}
.hero.plate-hero .eyebrow{color:#EFE6D2!important;text-shadow:0 1px 8px rgba(0,0,0,.35)}
.hero.plate-hero .line{color:#EDE5D4!important;max-width:56ch}

/* footer title block */
.tb{background:var(--sf-bone);border-top-color:var(--sf-char)}
.tb .sig{font-family:var(--script);font-size:40px;color:var(--sf-brown);line-height:1;padding:26px 0 0}
/* the dial breaks out of the reading column so the photo can be large */
/* desktop: the dial lines up with the text column, the photo runs wide to the right (editorial bleed) */
@media(min-width:821px){
  .pw{grid-template-columns:minmax(260px,340px) 1fr;align-items:center}
  .pw-card img{aspect-ratio:16/10;max-height:62vh}
}
@media(min-width:1100px){.col .pw{width:calc(100% + min(200px,(100vw - 760px)/2 - 32px))}}
.col .gallery{width:min(1080px,calc(100vw - 2*var(--gutter)));position:relative;left:50%;transform:translateX(-50%)}
.pw-card{align-content:start}
@media(max-width:700px){.gallery .plate:not(:first-child) .cap{flex-direction:column;gap:2px}
  .sec h2,.layer .ln-head h2{font-size:14px;letter-spacing:.18em}}

/* place photos · no frames, no captions (9/25) */
.gallery.bare{gap:14px}
.gallery.bare img{width:100%;aspect-ratio:4/5;object-fit:cover;display:block;background:var(--sf-bone)}
@media(max-width:700px){.gallery.bare{grid-template-columns:1fr 1fr}.gallery.bare img:first-child{grid-column:1/-1;aspect-ratio:4/3}}

/* ── the reel · a scroll moment: vertical scroll carries a strip of photographs sideways ── */
.reel{position:relative;margin-top:clamp(56px,9vw,104px)}
.reel-pin{overflow-x:auto;scroll-snap-type:x mandatory;-webkit-overflow-scrolling:touch;padding:8px 0 18px}
.reel-head{display:flex;align-items:center;gap:18px;padding:0 max(24px,calc((100vw - 1080px)/2)) 18px}
.reel-k{font-family:var(--serif);font-style:italic;font-size:clamp(20px,2vw,24px);color:var(--sf-ink);white-space:nowrap}
.reel-bar{flex:1;height:1px;background:var(--hairline);position:relative;max-width:420px}
.reel-bar i{position:absolute;left:0;top:0;bottom:0;width:0;background:var(--sf-brown)}
.reel-track{display:flex;gap:clamp(12px,1.6vw,22px);align-items:center;padding:0 max(24px,calc((100vw - 1080px)/2));width:max-content}
.reel-track img{height:min(58vh,580px);width:auto;flex:none;object-fit:cover;background:var(--sf-bone);scroll-snap-align:center}
@media(max-width:700px){.reel-track img{height:58vh}}
.reel-pin{scrollbar-width:none;scroll-padding-left:max(24px,calc((100vw - 1080px)/2))}
.reel-pin::-webkit-scrollbar{display:none}
.reel-track img{scroll-snap-align:start;cursor:pointer}
.reel-hint{font-family:var(--sans);font-size:10px;letter-spacing:.22em;text-transform:uppercase;color:var(--muted)}
.reel-nav{display:flex;gap:8px;margin-left:auto}
.reel-nav button{font-family:var(--sans);background:none;border:1px solid var(--hairline);width:40px;height:40px;cursor:pointer;color:var(--sf-ink);font-size:16px;line-height:1}
.reel-nav button:hover{border-color:var(--sf-ink)}
@media(hover:hover){.reel-hint{display:none}}
@media(hover:none){.reel-nav{display:none}}

/* ── the index: programs, one at a time, the whole list in view ─────────── */
.idx{display:grid;grid-template-columns:minmax(220px,300px) 1fr;column-gap:48px;align-items:start;margin-top:30px;padding-top:22px;border-top:1px solid var(--rule)}
.idx-list{list-style:none;margin:0;padding:0}
.idx-item{display:grid;grid-template-columns:34px 1fr;gap:10px;align-items:baseline;padding:12px 0;border-bottom:1px solid var(--hairline);cursor:pointer;color:var(--muted);transition:color .25s}
.idx-item:hover,.idx-item.on{color:var(--sf-ink)}
.idx-item:focus-visible{outline:2px solid var(--sf-brown);outline-offset:4px}
.idx-n{font-family:var(--sans);font-size:11px;letter-spacing:.18em;color:var(--sf-brown)}
.idx-name{font-family:var(--serif);font-size:19px;line-height:1.2}
.idx-item.on .idx-name{text-decoration:underline;text-decoration-color:var(--sf-brown);text-underline-offset:6px;text-decoration-thickness:1px}
.idx-stage{display:grid}
.idx-card{grid-area:1/1;opacity:0;visibility:hidden;transition:opacity .5s ease,visibility 0s .5s;align-content:start}
.idx-card.on{opacity:1;visibility:visible;transition:opacity .5s ease}
.idx-kind{font-family:var(--sans);font-size:11px;letter-spacing:.18em;text-transform:uppercase;color:var(--sf-brown)}
.idx-title{font-family:var(--serif);font-weight:400;font-size:clamp(28px,3.2vw,38px);line-height:1.1;color:var(--sf-ink);margin-top:10px}
.idx-line{font-size:18px;line-height:1.55;color:var(--sf-char);max-width:40ch;margin-top:12px}
.idx-count{font-family:var(--sans);font-size:11px;letter-spacing:.18em;color:var(--muted)}
.idx-count b{font-weight:500;color:var(--sf-ink)}
.no-js .idx-card{opacity:1;visibility:visible;grid-area:auto;margin-bottom:24px}
@media(max-width:820px){
  .idx{grid-template-columns:1fr;row-gap:18px}
  .idx-list{display:flex;gap:8px;overflow-x:auto;scrollbar-width:none;padding-bottom:4px;margin:0 calc(-1*var(--gutter));padding-left:var(--gutter);padding-right:var(--gutter)}
  .idx-list::-webkit-scrollbar{display:none}
  .idx-item{display:flex;gap:8px;flex:none;border:1px solid var(--hairline);border-radius:0;padding:8px 12px;align-items:center;white-space:nowrap}
  .idx-item.on{border-color:var(--sf-ink)}
  .idx-item.on .idx-name{text-decoration:none}
  .idx-name{font-size:15px}
}
@media(prefers-reduced-motion:reduce){.idx-card,.idx-card.on{transition:none}}

/* ── the request form · choices read as a clean grid, the radio sits with its text ── */
form.f input[type=radio]{width:auto;padding:0;margin:0 2px 0 0;flex:none;accent-color:var(--sf-brown)}
.lane{display:flex;gap:12px;align-items:center;padding:14px 16px;border:1px solid var(--hairline);background:var(--white);font-size:15.5px;line-height:1.35;color:var(--sf-char);transition:border-color .2s}
.lane:hover{border-color:var(--sf-khaki)}
.lane:has(input:checked){border-color:var(--sf-ink);color:var(--sf-ink)}
form.f.qualify .lanes{gap:10px;margin:8px 0 10px}
form.f input,form.f.qualify textarea{border-color:var(--hairline);background:var(--white)}
form.f input:focus,form.f.qualify textarea:focus{border-color:var(--sf-ink)}
form.f.qualify textarea{min-height:88px}
form.f.qualify button{margin-top:4px}

/* the map slot · breaks out like the gallery */
.col .map-slot{width:min(1080px,calc(100vw - 2*var(--gutter)));position:relative;left:50%;transform:translateX(-50%);margin-top:26px;min-height:120px}

/* ── the buildings · black-and-white today, the render on hover ─────────── */
.col .bld-grid{width:min(1080px,calc(100vw - 2*var(--gutter)));position:relative;left:50%;transform:translateX(-50%);display:grid;grid-template-columns:repeat(3,1fr);gap:28px 22px;margin-top:26px}
.bld{outline:none}
.bld figure{position:relative;aspect-ratio:3/2;overflow:hidden;background:var(--sf-bone);margin:0}
.bld figure img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block}
.bld .rn{opacity:0;transition:opacity .6s ease}
.bld .rn-tag{position:absolute;left:10px;bottom:8px;font-family:var(--sans);font-size:10px;letter-spacing:.16em;text-transform:uppercase;color:rgba(255,250,240,.92);text-shadow:0 1px 6px rgba(0,0,0,.45);opacity:0;transition:opacity .6s ease}
.bld.has-rn figure{cursor:pointer}
.bld.has-rn:hover .rn,.bld.has-rn:focus-visible .rn,.bld.show .rn,.bld.has-rn:hover .rn-tag,.bld.has-rn:focus-visible .rn-tag,.bld.show .rn-tag{opacity:1}
.bld.rn-only .rn{opacity:1}.bld.rn-only .rn-tag{opacity:1}
.bld:focus-visible figure{outline:2px solid var(--sf-brown);outline-offset:3px}
.bld-meta{padding-top:12px}
.bld .bn{font-family:var(--sans);font-size:11px;letter-spacing:.18em;color:var(--sf-brown)}
.bld-name{font-family:var(--serif);font-weight:400;font-size:22px;line-height:1.15;color:var(--sf-ink);margin-top:2px}
.bld-line{font-size:14.5px;line-height:1.55;color:var(--sf-char);margin-top:6px}
.bld-note{margin-top:18px}
@media(max-width:900px){.col .bld-grid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:560px){.col .bld-grid{grid-template-columns:1fr;gap:26px}}
@media(prefers-reduced-motion:reduce){.bld .rn,.bld .rn-tag{transition:none}}

/* the three lines · room around the text on every side (9/25) */
.premise{margin-top:30px}
.pm{padding:30px 30px 34px}
.pm:first-child{padding-left:0}
.pm:last-child{padding-right:0}
@media(max-width:760px){.pm{padding:24px 0}}

/* ── pillars · a composed scene: the active photo blurred behind the section, dial + arrows left, photo with its text block right ── */
section.has-bg{position:relative;overflow:hidden;padding-bottom:clamp(40px,6vw,72px)}
section.has-bg>.col{position:relative;z-index:1}
.pw-bg{position:absolute;inset:0;z-index:0;pointer-events:none}
.pw-bg img{position:absolute;inset:-8%;width:116%;height:116%;object-fit:cover;filter:blur(30px) saturate(.75);opacity:0;transition:opacity 1.4s ease}
.pw-bg img.on{opacity:.18}
.pw-bg::after{content:"";position:absolute;inset:0;background:linear-gradient(to bottom,var(--sf-paper) 0%,rgba(255,250,240,.3) 26%,rgba(255,250,240,.3) 74%,var(--sf-paper) 100%)}
.pw{position:relative}
.pw-left{display:flex;flex-direction:column;align-items:center;gap:20px}
.pw-left .pw-nav{margin:0;justify-content:center}
.pw-card figure{box-shadow:0 18px 50px -30px rgba(43,38,34,.45)}
@media(min-width:821px){
  .col .pw{grid-template-columns:300px 1fr;column-gap:56px;align-items:center;padding-top:16px}
  .pw-card img{aspect-ratio:3/2;max-height:none}
  .pw-meta{display:block;position:relative;z-index:1;width:min(80%,600px);margin:-92px 0 0 0;background:var(--sf-paper);padding:22px 30px 0 0}
  .pw-n{display:block;padding:0;margin-bottom:8px}
  .pw-name{margin-top:0}
  .pw-line{margin-top:10px}
}
@media(max-width:820px){.pw-left{display:grid;gap:12px}.pw-left .pw-nav{justify-content:space-between}.pw-meta{display:block;padding-top:16px}.pw-bg img.on{opacity:.14}}

/* ── order of action · a simple timeline ───────────────────────────────── */
.tl{list-style:none;margin:34px 0 0;padding:26px 0 0;position:relative;display:grid;grid-template-columns:repeat(3,1fr);column-gap:32px}
.tl::before{content:"";position:absolute;left:0;right:0;top:0;height:1px;background:var(--sf-char)}
.tl-step{position:relative;padding-right:8px}
.tl-dot{position:absolute;left:0;top:-32px;width:11px;height:11px;border-radius:50%;background:var(--sf-paper);border:1px solid var(--sf-ink);box-sizing:border-box}
.tl-step.s0 .tl-dot{background:var(--sf-brown);border-color:var(--sf-brown)}
.tl-step.s2 .tl-dot{border-style:dashed}
.tl-k{font-family:var(--serif);font-weight:400;font-size:26px;line-height:1.1;color:var(--sf-ink)}
.tl-l{font-size:14.5px;line-height:1.6;color:var(--sf-char);margin-top:10px}
@media(max-width:700px){
  .tl{grid-template-columns:1fr;padding:0 0 0 26px;row-gap:26px}
  .tl::before{left:5px;right:auto;top:6px;bottom:6px;width:1px;height:auto}
  .tl-dot{left:-26px;top:8px}
}

/* ── contact · one button, four quiet choices, the form waits ───────────── */
.contact-h{font-family:var(--serif);font-weight:400;font-size:clamp(28px,3.4vw,40px);line-height:1.15;color:var(--sf-ink);max-width:22ch}
.contact-row{display:flex;align-items:center;gap:30px;flex-wrap:wrap;margin-top:30px}
.contact-lanes{list-style:none;display:flex;gap:24px;flex-wrap:wrap;margin:0;padding:0}
.contact-lanes a{font-family:var(--sans);font-size:14px;letter-spacing:.02em;color:var(--muted);border:0;border-bottom:1px solid transparent;padding-bottom:2px;transition:color .2s,border-color .2s}
.contact-lanes a:hover,.contact-lanes a:focus-visible{color:var(--sf-ink);border-bottom-color:var(--sf-brown)}
.contact form.f{margin-top:32px}
form.f[hidden]{display:none}
.no-js form.f[hidden]{display:grid}
.contact.open .contact-row .btn{background:var(--sf-brown);border-color:var(--sf-brown)}

/* the old name rides beside the program name (Roger 9/25: always carry the old name) */
.bld-orig{display:block;font-family:var(--sans);font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--muted);margin-top:4px}

/* ── pillars · S153 (Roger 9/26): the mark draws in the wheel's centre; the card gets room to breathe. Photo captions were tried and vetoed 9/26 (some pillar images are renders). ── */
.pw-dial{position:relative}
.pw-mark{position:absolute;left:50%;top:50%;width:27%;aspect-ratio:1;transform:translate(-50%,-50%);display:grid;place-items:center;pointer-events:none}
.pw-mk{grid-area:1/1;display:block;width:min(100%,calc(100% * var(--ar,1)));opacity:0;transition:opacity .45s ease}
.pw-mk.on{opacity:1}
.pw-dial:not(.marks-ready) .pw-mark{display:none}
.pw-dial.marks-ready .ct,.pw-dial.marks-ready .cs{display:none}
.pw-name{text-wrap:balance}
.sec .pw-line{text-wrap:pretty}
@media(min-width:821px){
  .pw-meta{width:min(68%,480px);margin:-64px 0 0 32px;padding:22px 28px 24px;box-shadow:0 22px 44px -32px rgba(43,38,34,.4)}
  .pw-n{margin-bottom:10px}
  .pw-name{font-size:clamp(28px,2.5vw,34px);line-height:1.1}
  .sec .pw-line{margin-top:12px;font-size:16.5px;max-width:40ch}
}
@media(max-width:820px){
  .pw-meta{padding:18px 2px 0}
  .pw-name{font-size:clamp(26px,7vw,32px);line-height:1.1;margin-top:6px}
  .sec .pw-line{margin-top:10px}
}
@media(prefers-reduced-motion:reduce){.pw-mk{transition:none}}

/* ── S153 · 2026-09-27 · Roger: "a fair bit of this can go live" ─────────────
   building seals (the deck's marks) · the path as a timeline · stamps · the hand underline ·
   the moon while sending · the page loader · the map track (a short hold once the drawing is in) */
.bld-fig{position:relative}
.bld .seal{position:absolute;left:14px;bottom:-24px;width:52px;height:52px;border-radius:50%;background:var(--sf-paper);border:1.5px solid var(--sf-ink);
  display:grid;place-items:center;box-shadow:0 3px 10px rgba(43,38,34,.22);z-index:1;pointer-events:none}
.bld .seal.first{border:2.2px solid var(--sf-brown)}
.bld .seal sketch-draw{display:block;width:min(36px,calc(28px * var(--ar,1)))}
.bld .seal.num{font-family:var(--sans);font-weight:500;font-size:11px;letter-spacing:.08em;color:var(--sf-ink)}
.bld .bld-meta .bn{display:block;margin-left:78px;min-height:16px}
.bld-name{margin-top:10px}
.tl.four{grid-template-columns:repeat(4,1fr);column-gap:26px}
.tl.four .tl-step.s2 .tl-dot{border-style:solid}
.tl.four .tl-step.s3 .tl-dot{border-style:dashed}
.tl.four .tl-k{font-size:23px}
@media(max-width:900px){.tl.four{grid-template-columns:repeat(2,1fr);row-gap:30px}}
@media(max-width:700px){.tl.four{grid-template-columns:1fr}}
/* stamps: the button is a pressed block of ink with a rough edge */
.btn.stamp,.btn.stamp:hover{position:relative;background:transparent;border-color:transparent;isolation:isolate}
.btn.stamp::before{content:"";position:absolute;inset:0;background:var(--sf-char);filter:url(#rough);z-index:-1;transition:background .2s}
.btn.stamp:hover::before{background:var(--sf-brown)}
.btn.stamp.outline{color:var(--sf-ink)}
.btn.stamp.outline::before{background:transparent;border:1.6px solid var(--sf-ink)}
.btn.stamp.outline:hover{color:var(--sf-paper)}
.btn.stamp.outline:hover::before{background:var(--sf-ink)}
.contact.open .contact-row .btn.stamp{background:transparent;border-color:transparent}
.contact.open .contact-row .btn.stamp::before{background:var(--sf-brown)}
.btn.stamp.thunk{animation:thunk .42s cubic-bezier(.3,1.4,.5,1)}
@keyframes thunk{0%{transform:scale(1) rotate(0)}35%{transform:scale(.95) rotate(-.8deg)}100%{transform:scale(1) rotate(-.8deg)}}
/* the hand underline on the section links */
.toc a.u{position:relative}
.toc a.u svg{position:absolute;left:-3%;bottom:-4px;width:106%;height:8px;overflow:visible;pointer-events:none}
.toc a.u path{fill:none;stroke:var(--sf-brown);stroke-width:1.6;stroke-linecap:round;stroke-dasharray:1;stroke-dashoffset:1;opacity:0;transition:stroke-dashoffset .5s cubic-bezier(.6,.05,.3,1),opacity 0s .5s}
.toc a.u:hover path,.toc a.u:focus-visible path{stroke-dashoffset:0;opacity:1;transition:stroke-dashoffset .5s cubic-bezier(.6,.05,.3,1),opacity 0s}
.toc a.u:hover{color:var(--sf-ink)}
/* the moon, only while the form is sending */
form.f .moon{display:none;width:30px;height:30px;overflow:visible;align-self:center}
form.f.sending .moon{display:block}
form.f .moon .ring{fill:none;stroke:var(--sf-ink);stroke-width:1.4}
form.f .moon .shade{fill:var(--sf-ink);opacity:.85;animation:phase 1.6s ease-in-out infinite}
@keyframes phase{0%{transform:translateX(-24px)}50%{transform:translateX(0)}100%{transform:translateX(24px)}}
form.f.qualify .send-row{grid-column:1/-1;display:flex;gap:14px;align-items:center}
/* the map: a wide track, and on a tall enough screen a short hold once the drawing is in */
.col .sm-track{width:min(1080px,calc(100vw - 2*var(--gutter)));position:relative;left:50%;transform:translateX(-50%);margin-top:26px}
.sm-track .sm-slot{min-height:120px}
@media (min-width:900px) and (min-height:760px){
  .sm-track::after{content:"";display:block;height:20vh}
  .sm-track .sm-slot{position:sticky;top:max(16px,calc(50vh - 350px))}
}
@media(prefers-reduced-motion:reduce){form.f .moon .shade{animation:none}.btn.stamp.thunk{animation:none}}

/* ── S153 · 2026-09-28 · hover or tap: black-and-white → the render's sketch drawing itself → the render ── */
.bld-fig figure{isolation:isolate}
.bld figure .bw{z-index:0}
.bld .sk-paper{position:absolute;inset:0;background:#FBF8F1;opacity:0;transition:opacity .25s ease;pointer-events:none;z-index:1}
.bld sketch-draw.sk{position:absolute;inset:0;width:100%;opacity:0;transition:opacity .5s ease;pointer-events:none;z-index:2}
.bld figure .rn{z-index:3}
.bld .rn-tag{z-index:4}
.bld.drawing .sk-paper,.bld.drawing sketch-draw.sk{opacity:1}
.bld.show .sk-paper,.bld.show sketch-draw.sk{opacity:0}
.bld.has-sk:not(.show) .rn,.bld.has-sk:not(.show) .rn-tag{opacity:0}
.bld.has-sk.show .rn,.bld.has-sk.show .rn-tag{opacity:1}
@media(prefers-reduced-motion:reduce){.bld .sk-paper,.bld sketch-draw.sk{transition:none}}
.bld .rn-tag{left:auto;right:10px}

/* ── S153 · 2026-10-05 · a render-only card (Beacon Tower) rests as its sketch, and fades to the render on hover or tap ── */
.bld.sk-rest.sk-ready .sk-paper,.bld.sk-rest.sk-ready sketch-draw.sk{opacity:1}
.bld.sk-rest.sk-ready.rn-only .rn,.bld.sk-rest.sk-ready.rn-only .rn-tag{opacity:0}
.bld.sk-rest.sk-ready.rn-only:hover .rn,.bld.sk-rest.sk-ready.rn-only:focus-visible .rn,.bld.sk-rest.sk-ready.rn-only.show .rn,
.bld.sk-rest.sk-ready.rn-only:hover .rn-tag,.bld.sk-rest.sk-ready.rn-only:focus-visible .rn-tag,.bld.sk-rest.sk-ready.rn-only.show .rn-tag{opacity:1}