/* EichlerBurlingame.com — Boyenga Team
Direction: contour survey. A ridge tract in north-west Burlingame, a hundred
late Eichlers, and the steel prototype on the next ridge south. Grotesk display type,
elevation contours as the ground, reservoir blue as the structural colour,
Skydome amber as the key. */
:root{
--paper:#E9EAE5; /* cool bone — weathered redwood gone silver */
--paper-2:#E1E3DE;
--ink:#16191A;
--ink-soft:#4C5459;
--signal:#8C2F39; /* oxblood — the 1964 Eichler front door */
--signal-deep:#0A5468;
--amber:#46687A; /* bay steel — the water off the ridge */
--amber-soft:#E8B857;
--deep:#191C1B; /* dark section panel */
--deep-2:#070C0D;
--line:#CBCEC5;
--line-deep:#2E3432;
--wrap:1180px;
--serif:"Literata",Georgia,"Times New Roman",serif;
--sans:"Bricolage Grotesque",system-ui,-apple-system,"Segoe UI",sans-serif;
--mono:"DM Mono",ui-monospace,SFMono-Regular,Menlo,monospace;
color-scheme:light;
}
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{margin:0;background:var(--paper);color:var(--ink);
font:400 17px/1.66 var(--sans);letter-spacing:-.004em;
-webkit-font-smoothing:antialiased;overflow-x:hidden}
img{max-width:100%;height:auto;display:block}
a{color:inherit}
h1,h2,h3{margin:0;font-weight:500;letter-spacing:-.03em}
h1 em,h2 em,h3 em{font-style:normal}
p{margin:0 0 1.15em}
:focus-visible{outline:2.5px solid var(--signal);outline-offset:3px}
/* ---------- contour ground ------------------------------------------- */
.grid-bg{position:fixed;inset:0;z-index:-1;pointer-events:none;opacity:.55;
background-repeat:repeat-x;background-position:top center;background-size:1400px 520px;
background-image:url("data:image/svg+xml,");
-webkit-mask-image:linear-gradient(180deg,#000 0%,rgba(0,0,0,.5) 46%,transparent 82%);
mask-image:linear-gradient(180deg,#000 0%,rgba(0,0,0,.5) 46%,transparent 82%)}
.wrap{width:100%;max-width:var(--wrap);margin-inline:auto;padding-inline:24px}
.sec{padding-block:clamp(4rem,9vw,7.5rem)}
.sec--tight{padding-block:clamp(2.75rem,6vw,4.5rem)}
/* ---------- top bar -------------------------------------------------- */
.bar{position:sticky;top:0;z-index:50;background:rgba(239,239,236,.92);
border-top:3px solid var(--signal);backdrop-filter:blur(10px);
border-bottom:1px solid var(--line)}
.bar-in{display:flex;align-items:center;justify-content:space-between;gap:1rem;
max-width:var(--wrap);margin-inline:auto;padding:.85rem 24px}
.mark{font:600 14px/1.15 var(--sans);letter-spacing:-.01em;text-decoration:none;color:var(--ink)}
.mark b{font-weight:400;color:var(--signal)}
.bar-cta{font:500 12px/1 var(--mono);letter-spacing:.1em;text-transform:uppercase;
text-decoration:none;color:#F6F7F5;background:var(--signal);
padding:.7rem 1.05rem;border-radius:2px;white-space:nowrap;transition:background .18s}
.bar-cta:hover{background:var(--signal-deep)}
/* ---------- type ----------------------------------------------------- */
.eyebrow{font:500 11.5px/1.5 var(--mono);letter-spacing:.16em;text-transform:uppercase;
color:var(--signal);margin:0 0 1.1rem;display:flex;align-items:center;gap:.85rem}
.eyebrow::after{content:"";flex:1;height:1px;background:var(--line)}
.eyebrow--light{color:var(--amber-soft)}
.eyebrow--light::after{background:var(--line-deep)}
h1,.h1{font-family:var(--sans);font-weight:500;font-size:clamp(2.35rem,5.9vw,4.15rem);
line-height:1.02;letter-spacing:-.04em}
h2,.h2{font-family:var(--sans);font-weight:500;font-size:clamp(1.8rem,3.5vw,2.65rem);
line-height:1.1;letter-spacing:-.034em}
h3,.h3{font-family:var(--sans);font-weight:500;font-size:clamp(1.2rem,2vw,1.48rem);
line-height:1.24;letter-spacing:-.024em}
.lede{font-family:var(--serif);font-size:clamp(1.2rem,2vw,1.45rem);line-height:1.52;
color:var(--ink-soft);max-width:62ch}
.prose{max-width:68ch}
.prose p{color:var(--ink-soft)}
.prose strong{font-weight:600;color:var(--ink)}
.prose h3{margin:2.4rem 0 .85rem}
.prose h3:first-child{margin-top:0}
.prose a{color:var(--signal);text-decoration-thickness:1px;text-underline-offset:2px}
.tint{color:var(--signal)}
.tint-a{color:var(--amber)}
/* NB: class="sec tint" is used as an alternating band on 18 pages. Without this rule
.tint turned the whole band's body copy oxblood. Bands get a ground, not a colour. */
section.sec.tint{color:var(--ink);background:var(--paper-2);
border-block:1px solid var(--line)}
section.sec.tint .eyebrow{color:var(--signal)}
.small{font:400 13.5px/1.7 var(--mono);color:var(--ink-soft);max-width:74ch}
.small a{color:var(--signal)}
/* ---------- dark section panel --------------------------------------- */
.blueprint{background:var(--deep);color:#E7EAE9;position:relative;overflow:hidden}
.blueprint::before{content:"";position:absolute;inset:0;opacity:.42;pointer-events:none;
background-repeat:repeat;background-size:900px 340px;
background-image:url("data:image/svg+xml,")}
.blueprint>*{position:relative}
.blueprint h2,.blueprint h3{color:#F6F7F5}
.blueprint p{color:#AFB6B8}
.blueprint .prose a{color:var(--amber-soft)}
.bp-plate{background:var(--deep);border:1px solid #2A2F2E;border-radius:2px;
padding:clamp(1.25rem,3vw,2.25rem)}
.bp-fig{margin:0;padding-block:.25rem}
.bp-fig svg{width:100%;height:auto;display:block}
.bp-cap{font:400 12.5px/1.65 var(--mono);color:#828C90;letter-spacing:.02em;
margin-top:1.1rem;max-width:74ch}
.bp-cap a{color:var(--amber-soft)}
.bp-line{fill:none;stroke:#E7EAE9;stroke-width:2;stroke-linejoin:round;stroke-linecap:round}
.bp-med{fill:none;stroke:#8F9A9E;stroke-width:1.4;stroke-linejoin:round;stroke-linecap:round}
.bp-thin{fill:none;stroke:#6E797D;stroke-width:1;stroke-dasharray:5 4}
.bp-steel{fill:none;stroke:#7FB4CC;stroke-width:2.6;stroke-linecap:square}
.bp-fillglass{fill:rgba(231,234,233,.055);stroke:#4A5453;stroke-width:1}
.bp-fillwater{fill:rgba(110,197,220,.16)}
.bp-txt{font-family:var(--mono);font-size:12px;fill:#A8B0B3;letter-spacing:.06em}
.bp-txt--key{fill:#D8A657;font-size:13px}
.bp-txt--sm{font-size:10.5px;fill:#7E8A8E}
/* ---------- data strip ------------------------------------------------ */
.strip{display:grid;gap:1px;background:var(--line);border-block:1px solid var(--line)}
@media(min-width:640px){.strip{grid-template-columns:repeat(2,1fr)}}
@media(min-width:960px){.strip{grid-template-columns:repeat(3,1fr)}}
@media(min-width:1180px){.strip{grid-template-columns:repeat(5,1fr)}}
.strip-c{background:var(--paper);padding:1.75rem 1.5rem;border-top:3px solid transparent}
.strip-c:nth-child(odd){border-top-color:var(--signal)}
.strip-c:nth-child(even){border-top-color:var(--amber)}
.strip-n{font-family:var(--serif);font-size:clamp(2rem,3.4vw,2.7rem);line-height:1;
letter-spacing:-.03em;display:block;margin-bottom:.5rem;color:var(--ink)}
.strip-l{font:400 12.5px/1.55 var(--mono);color:var(--ink-soft);letter-spacing:.02em}
.strip-n--sm{font-size:clamp(1.5rem,2.3vw,1.95rem)}
.strip-c{min-width:0}
.strip-n{overflow-wrap:anywhere}
/* ---------- cards ----------------------------------------------------- */
.tracts{display:grid;gap:1.5rem}
@media(min-width:620px){.tracts{grid-template-columns:repeat(2,1fr)}}
@media(min-width:1080px){.tracts--4{grid-template-columns:repeat(4,1fr)}}
@media(min-width:1000px){.tracts--3{grid-template-columns:repeat(3,1fr)}}
.tract{display:flex;flex-direction:column;background:var(--paper);
border:1px solid var(--line);border-radius:3px;padding:1.6rem 1.5rem 1.5rem;
text-decoration:none;color:inherit;transition:border-color .18s,transform .18s}
.tract:hover{border-color:var(--signal);transform:translateY(-2px)}
.tract-yr{font:500 11.5px/1 var(--mono);letter-spacing:.12em;color:var(--signal);
text-transform:uppercase;margin-bottom:.9rem}
.tract h3{margin-bottom:.55rem}
.tract p{font-size:.95rem;color:var(--ink-soft);margin-bottom:1.2rem}
.tract-meta{margin-top:auto;padding-top:1rem;border-top:1px solid var(--line);
font:400 12.5px/1.55 var(--mono);color:var(--ink-soft)}
.blueprint .tract{background:rgba(255,255,255,.035);border-color:var(--line-deep);color:#E7EAE9}
.blueprint .tract:hover{border-color:var(--amber)}
.blueprint .tract p{color:#AFB6B8}
.blueprint .tract-meta{border-top-color:var(--line-deep);color:#828C90}
.blueprint .tract-yr{color:var(--amber-soft)}
/* ---------- columns / definition lists -------------------------------- */
.cols{display:grid;gap:clamp(1.75rem,4vw,3.25rem)}
@media(min-width:820px){.cols{grid-template-columns:1fr 1fr}}
.cols--wide{grid-template-columns:1fr}
@media(min-width:820px){.cols--wide{grid-template-columns:1.15fr .85fr}}
@media(min-width:820px){.cols--flip{grid-template-columns:.85fr 1.15fr}}
.deflist{margin:0;border-top:1px solid var(--line)}
.deflist div{display:grid;gap:.15rem;padding:.95rem 0;border-bottom:1px solid var(--line)}
@media(min-width:560px){.deflist div{grid-template-columns:minmax(9.5rem,31%) 1fr;gap:1.25rem;align-items:baseline}}
.deflist dt{font:500 12px/1.6 var(--mono);letter-spacing:.08em;text-transform:uppercase;
color:var(--signal)}
.deflist dd{margin:0;color:var(--ink-soft)}
.deflist dd a{color:var(--signal)}
.blueprint .deflist,.blueprint .deflist div{border-color:var(--line-deep)}
.blueprint .deflist dt{color:var(--amber-soft)}
.blueprint .deflist dd{color:#E7EAE9}
/* ---------- pull quote ------------------------------------------------ */
.pull{margin:0;padding:1.75rem 0 1.75rem 1.6rem;border-left:4px solid var(--amber)}
.pull p{font-family:var(--serif);font-size:clamp(1.28rem,2.3vw,1.66rem);line-height:1.4;
color:var(--ink);margin-bottom:.8rem}
.pull footer{font:400 12.5px/1.65 var(--mono);color:var(--ink-soft)}
.blueprint .pull p{color:#F6F7F5}
.blueprint .pull footer{color:#828C90}
/* ---------- badges ---------------------------------------------------- */
.award{display:inline-flex;align-items:baseline;gap:.65rem;padding:.6rem .95rem;
border:1px solid var(--amber);border-radius:2px;
font:500 11.5px/1.35 var(--mono);letter-spacing:.1em;text-transform:uppercase;
color:#8A5E08;background:rgba(217,151,31,.11)}
.blueprint .award{color:var(--amber-soft);background:rgba(217,151,31,.10)}
.nrhp{display:inline-flex;flex-wrap:wrap;align-items:baseline;gap:.5rem .9rem;
padding:.75rem 1.05rem;border:1px solid var(--signal);border-radius:2px;
background:rgba(14,110,134,.08);font:500 11.5px/1.4 var(--mono);letter-spacing:.09em;
text-transform:uppercase;color:var(--signal-deep)}
/* ---------- case study / key figures ---------------------------------- */
.case{display:grid;gap:1px;background:var(--line);border:1px solid var(--line)}
@media(min-width:720px){.case{grid-template-columns:repeat(3,1fr)}}
@media(min-width:720px){.case--2{grid-template-columns:repeat(2,1fr)}}
.case-c{background:var(--paper);padding:1.5rem}
.case-k{font:500 11.5px/1.5 var(--mono);letter-spacing:.1em;text-transform:uppercase;
color:var(--signal);margin-bottom:.5rem}
.case-v{font-family:var(--serif);font-size:1.55rem;line-height:1.2;letter-spacing:-.02em}
.case-n{font-size:.9rem;color:var(--ink-soft);margin-top:.4rem}
.blueprint .case{background:var(--line-deep);border-color:var(--line-deep)}
.blueprint .case-c{background:#101A1D}
.blueprint .case-k{color:var(--amber-soft)}
.blueprint .case-v{color:#F6F7F5}
.blueprint .case-n{color:#AFB6B8}
/* ---------- scope list ------------------------------------------------- */
.scope{list-style:none;margin:0;padding:0;display:grid;gap:.1rem}
@media(min-width:640px){.scope--2{grid-template-columns:1fr 1fr;gap:.1rem 2rem}}
.scope li{padding:.62rem 0 .62rem 1.5rem;border-bottom:1px solid var(--line);
position:relative;font-size:.97rem;color:var(--ink-soft)}
.scope li::before{content:"";position:absolute;left:0;top:1.12rem;width:7px;height:7px;
background:var(--signal);transform:rotate(45deg)}
.scope li b{color:var(--ink);font-weight:600}
.blueprint .scope li{border-bottom-color:var(--line-deep);color:#AFB6B8}
.blueprint .scope li::before{background:var(--amber)}
.blueprint .scope li b{color:#F6F7F5}
/* ---------- table ----------------------------------------------------- */
.tablewrap{overflow-x:auto;border:1px solid var(--line);border-radius:3px;
-webkit-overflow-scrolling:touch}
table{border-collapse:collapse;width:100%;min-width:560px;font-size:.94rem}
th,td{text-align:left;padding:.82rem 1rem;border-bottom:1px solid var(--line);
vertical-align:top}
th{font:500 11.5px/1.4 var(--mono);letter-spacing:.09em;text-transform:uppercase;
color:var(--signal);background:var(--paper-2);white-space:nowrap}
td{color:var(--ink-soft)}
td b{color:var(--ink);font-weight:600}
tbody tr:last-child td{border-bottom:0}
td.num,th.num{font-family:var(--mono);font-size:.9rem;white-space:nowrap;color:var(--ink)}
caption{caption-side:bottom;text-align:left;padding:.9rem 1rem;
font:400 12px/1.65 var(--mono);color:var(--ink-soft);background:var(--paper)}
.blueprint .tablewrap{border-color:var(--line-deep)}
.blueprint th{background:#101A1D;color:var(--amber-soft)}
.blueprint th,.blueprint td{border-bottom-color:var(--line-deep)}
.blueprint td{color:#AFB6B8}
.blueprint td.num{color:#F6F7F5}
.blueprint caption{background:var(--deep);color:#828C90}
/* ---------- faq ------------------------------------------------------- */
.faq{border-top:1px solid var(--line)}
.faq details{border-bottom:1px solid var(--line)}
.faq summary{cursor:pointer;list-style:none;padding:1.15rem 2.5rem 1.15rem 0;
position:relative;font-family:var(--sans);font-weight:500;font-size:1.1rem;
line-height:1.35;letter-spacing:-.02em}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";position:absolute;right:.35rem;top:1rem;
font:400 22px/1 var(--mono);color:var(--signal)}
.faq details[open] summary::after{content:"\2013"}
.faq .ans{padding:0 0 1.3rem;color:var(--ink-soft);max-width:70ch}
.faq .ans p:last-child{margin-bottom:0}
.faq .ans a{color:var(--signal)}
/* ---------- bracket (unconfirmed data) -------------------------------- */
/* NB: this was .tbc, which collided with the comparison-table class and was
overriding all 34 tables with mono type and a gold background. Renamed .brk. */
.brk{font-family:var(--mono);font-size:.88em;color:#8A5E08;
background:rgba(217,151,31,.15);padding:.08em .38em;border-radius:2px;white-space:nowrap}
.blueprint .brk{color:var(--amber-soft);background:rgba(217,151,31,.14)}
/* ---------- disputed-figure block ------------------------------------- */
.dispute{border:1px solid var(--line);border-left:4px solid var(--amber);border-radius:3px;
background:var(--paper-2);padding:1.4rem 1.5rem;margin:0 0 1.6rem}
.dispute p:last-child{margin-bottom:0}
.dispute .dl{font:500 11px/1.4 var(--mono);letter-spacing:.14em;text-transform:uppercase;
color:#8A5E08;margin:0 0 .7rem;display:block}
.blueprint .dispute{background:rgba(255,255,255,.04);border-color:var(--line-deep);
border-left-color:var(--amber)}
.blueprint .dispute .dl{color:var(--amber-soft)}
/* ---------- split panel (two governments) ----------------------------- */
.split{display:grid;gap:1px;background:var(--line);border:1px solid var(--line);
border-radius:3px;overflow:hidden}
@media(min-width:760px){.split{grid-template-columns:1fr 1fr}}
.split-c{background:var(--paper);padding:clamp(1.5rem,3vw,2.2rem)}
.split-c:first-child{border-top:4px solid var(--signal)}
.split-c:last-child{border-top:4px solid var(--amber)}
.split-h{font:500 11.5px/1.4 var(--mono);letter-spacing:.12em;text-transform:uppercase;
color:var(--ink-soft);margin:0 0 .6rem}
.split-c h3{margin-bottom:1rem}
.split-c ul{list-style:none;margin:0;padding:0;display:grid;gap:.6rem;
font-size:.95rem;color:var(--ink-soft)}
.split-c li{padding-left:1.2rem;position:relative}
.split-c li::before{content:"";position:absolute;left:0;top:.62rem;width:6px;height:6px;
border-radius:50%;background:var(--signal)}
.split-c:last-child li::before{background:var(--amber)}
/* ---------- timeline -------------------------------------------------- */
.tline{list-style:none;margin:0;padding:0;border-top:1px solid var(--line)}
.tline li{display:grid;gap:.3rem;padding:1.05rem 0;border-bottom:1px solid var(--line)}
@media(min-width:620px){.tline li{grid-template-columns:7.5rem 1fr;gap:1.5rem;align-items:baseline}}
.tline .yr{font:500 12.5px/1.5 var(--mono);letter-spacing:.06em;color:var(--signal);
white-space:nowrap}
.tline .ev{color:var(--ink-soft);font-size:.97rem}
.tline .ev b{color:var(--ink);font-weight:600}
.blueprint .tline,.blueprint .tline li{border-color:var(--line-deep)}
.blueprint .tline .yr{color:var(--amber-soft)}
.blueprint .tline .ev{color:#AFB6B8}
.blueprint .tline .ev b{color:#F6F7F5}
/* ---------- buttons --------------------------------------------------- */
.btn-row{display:flex;flex-wrap:wrap;gap:.7rem}
.btn{display:inline-block;font:500 12px/1 var(--mono);letter-spacing:.1em;
text-transform:uppercase;text-decoration:none;padding:1rem 1.35rem;border-radius:2px;
transition:background .18s,color .18s,border-color .18s}
.btn-fill{background:var(--signal);color:#F6F7F5;border:1px solid var(--signal)}
.btn-fill:hover{background:var(--signal-deep);border-color:var(--signal-deep)}
.btn-line{border:1px solid var(--line);color:var(--ink)}
.btn-line:hover{border-color:var(--signal);color:var(--signal)}
.btn-ghost{border:1px solid rgba(232,184,87,.55);color:var(--amber-soft)}
.btn-ghost:hover{border-color:var(--amber);background:var(--amber);color:#101416}
/* ---------- hero ------------------------------------------------------ */
.hero{padding-block:clamp(3.5rem,8vw,6.5rem) clamp(3rem,6vw,5rem)}
.hero-grid{display:grid;gap:clamp(2.25rem,5vw,4rem);align-items:start}
@media(min-width:900px){.hero-grid{grid-template-columns:1.05fr .95fr;align-items:center}}
.hero h1{margin-bottom:1.4rem}
.hero-sub{font-size:1.08rem;color:var(--ink-soft);max-width:48ch;margin-bottom:1.9rem}
.hero-full{position:relative;min-height:min(76vh,720px);display:flex;align-items:flex-end;
overflow:hidden;border-bottom:1px solid var(--line-deep);background:var(--deep-2)}
.hero-full .hero-img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
object-position:50% 56%}
.hero-art{position:absolute;right:max(1.5vw,10px);top:58%;transform:translateY(-50%);
width:min(41vw,560px);height:auto;z-index:1;opacity:.8;pointer-events:none}
@media(max-width:900px){.hero-art{opacity:.13;right:-14%;width:96vw;top:54%}}
.hero-scrim{position:absolute;inset:0;background:
linear-gradient(180deg,rgba(7,12,13,.62) 0%,rgba(7,12,13,.14) 26%,
rgba(7,12,13,.34) 52%,rgba(7,12,13,.88) 84%,rgba(7,12,13,.97) 100%),
linear-gradient(100deg,rgba(7,12,13,.82) 0%,rgba(7,12,13,.54) 38%,
rgba(7,12,13,.12) 64%,rgba(7,12,13,0) 80%)}
.hero-in{position:relative;z-index:3;width:100%;padding-block:clamp(2.75rem,7vw,5rem)}
.hero-full h1{color:#F6F7F5;max-width:19ch;margin-bottom:1.5rem}
.hero-full .eyebrow{color:var(--amber-soft)}
.hero-full .eyebrow::after{background:rgba(246,247,245,.22)}
.hero-full .hero-sub{color:#D5DADA;max-width:54ch}
.hero-full .btn-line{border-color:rgba(246,247,245,.42);color:#F6F7F5}
.hero-full .btn-line:hover{border-color:#F6F7F5;color:#F6F7F5}
.hero-credit{position:absolute;right:24px;bottom:.85rem;z-index:3;margin:0;
font:400 10px/1 var(--mono);letter-spacing:.12em;text-transform:uppercase;
color:rgba(231,234,233,.55)}
@media(max-width:640px){.hero-credit{position:static;padding:0 24px 1rem;text-align:left}
.hero-full{min-height:0}}
.hero-shot{margin:2.5rem 0 0}
.hero-shot img{width:100%;max-height:520px;object-fit:cover;border-radius:3px;
border:1px solid var(--line)}
/* ---------- band ------------------------------------------------------ */
.awardband{border-bottom:1px solid var(--line);background:var(--paper-2)}
.awardband .wrap{display:flex;flex-wrap:wrap;gap:1rem 1.6rem;align-items:center;
padding-block:1.1rem}
.awardband p{margin:0;font-size:.93rem;color:var(--ink-soft);max-width:64ch}
/* ---------- lead form ------------------------------------------------- */
.lf{margin-top:1.9rem}
.lf-hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.lf-grid{display:grid;gap:1rem}
@media(min-width:640px){.lf-grid{grid-template-columns:1fr 1fr}}
.lf-f{display:flex;flex-direction:column;gap:.4rem}
.lf-f--full{grid-column:1/-1}
.lf label{font:500 11.5px/1.4 var(--mono);letter-spacing:.09em;text-transform:uppercase;
color:var(--ink-soft)}
.lf .req{color:var(--amber)}
.lf input,.lf select,.lf textarea{font:400 16px/1.4 var(--sans);color:var(--ink);
background:var(--paper);border:1px solid var(--line);border-radius:2px;
padding:.78rem .85rem;width:100%}
.lf input:focus,.lf select:focus,.lf textarea:focus{border-color:var(--signal);outline:none;
box-shadow:0 0 0 3px rgba(14,110,134,.18)}
.lf textarea{min-height:6.5rem;resize:vertical}
.lf-err{margin:0;font:400 12.5px/1.5 var(--mono);color:#9A4A16;min-height:1px}
.lf-actions{display:flex;flex-wrap:wrap;align-items:center;gap:1rem;margin-top:1.3rem}
.lf button{font:500 12px/1 var(--mono);letter-spacing:.1em;text-transform:uppercase;
background:var(--signal);color:#F6F7F5;border:0;border-radius:2px;
padding:1.05rem 1.6rem;cursor:pointer;transition:background .18s}
.lf button:hover{background:var(--signal-deep)}
.lf button:disabled{opacity:.55;cursor:default}
.lf-status{font-size:.93rem;color:var(--ink-soft);margin:0}
.lf-status[data-state=error]{color:#9A4A16}
.blueprint .lf label{color:#AFB6B8}
.blueprint .lf input,.blueprint .lf select,.blueprint .lf textarea{
background:rgba(255,255,255,.05);border-color:var(--line-deep);color:#F6F7F5}
.blueprint .lf-status{color:#AFB6B8}
.blueprint .lf button{background:var(--amber);color:#101416}
.blueprint .lf button:hover{background:var(--amber-soft)}
/* ---------- crumbs / footer ------------------------------------------- */
.crumbs{font:400 12px/1.6 var(--mono);letter-spacing:.07em;text-transform:uppercase;
color:var(--ink-soft);padding-top:1.9rem}
.crumbs a{color:var(--signal);text-decoration:none}
.crumbs a:hover{text-decoration:underline}
.foot{background:var(--deep-2);color:#9DA5A8;padding-block:clamp(3rem,6vw,4.5rem)}
.foot h2{color:#F6F7F5;margin-bottom:1rem}
.foot a{color:#E7EAE9}
.foot-cols{display:grid;gap:2rem}
@media(min-width:760px){.foot-cols{grid-template-columns:1.4fr 1fr 1fr}}
.foot-h{font:500 11.5px/1.5 var(--mono);letter-spacing:.13em;text-transform:uppercase;
color:#63706F;margin-bottom:1rem}
.foot-links{list-style:none;margin:0;padding:0;display:grid;gap:.55rem;font-size:.93rem}
.foot-links a{text-decoration:none}
.foot-links a:hover{text-decoration:underline}
.foot-legal{margin-top:2.75rem;padding-top:1.5rem;border-top:1px solid var(--line-deep);
font:400 12.5px/1.72 var(--mono);color:#63706F}
.foot-net{margin-top:clamp(2.5rem,5vw,3.5rem);padding-top:clamp(2rem,4vw,2.75rem);
border-top:1px solid var(--line-deep)}
.foot-net-cols{display:grid;gap:1.75rem 2rem;margin-top:.25rem}
@media(min-width:620px){.foot-net-cols{grid-template-columns:1fr 1fr}}
@media(min-width:1000px){.foot-net-cols{grid-template-columns:repeat(4,1fr)}}
.foot-sub{font:500 12px/1.5 var(--mono);letter-spacing:.08em;color:#828C90;
margin-bottom:.85rem}
.foot-here{color:var(--amber-soft);font-weight:500}
.foot-links--row{grid-auto-flow:row}
@media(min-width:400px){.foot-links--row{grid-template-columns:1fr 1fr;gap:.55rem 1rem}}
/* ---------- reveal ---------------------------------------------------- */
.rv{opacity:0;transform:translateY(14px);transition:opacity .6s ease,transform .6s ease}
.rv.in{opacity:1;transform:none}
@media(prefers-reduced-motion:reduce){
.rv{opacity:1;transform:none;transition:none}
html{scroll-behavior:auto}
*{animation-duration:.01ms!important;transition-duration:.01ms!important}
}
/* ---------- scrollable figures ---------------------------------------- */
.mapscroll{overflow-x:auto;-webkit-overflow-scrolling:touch;max-width:100%}
.mapsvg{display:block}
@media(min-width:760px){.mapsvg{min-width:0!important;width:100%}}
/* ---------- photography ----------------------------------------------- */
.shot{margin:0}
h2+.shot,h2+.gal,.lede+.shot,.lede+.gal,p+.shot{margin-top:clamp(1.25rem,2.5vw,1.9rem)}
.shot img{width:100%;border-radius:3px;border:1px solid var(--line)}
.blueprint .shot img{border-color:var(--line-deep)}
.shot figcaption{font:400 12.5px/1.65 var(--mono);color:var(--ink-soft);
letter-spacing:.02em;margin-top:.8rem;max-width:64ch}
.blueprint .shot figcaption{color:#828C90}
.gal{display:grid;gap:1rem;margin:0}
@media(min-width:640px){.gal{grid-template-columns:repeat(2,1fr)}}
@media(min-width:1000px){.gal{grid-template-columns:repeat(3,1fr)}}
@media(min-width:640px){.gal--2{grid-template-columns:repeat(2,1fr)}}
@media(min-width:1000px){.gal--2{grid-template-columns:repeat(2,1fr)}}
.gal--2 img{aspect-ratio:16/10}
.gal figure{margin:0}
.gal img{width:100%;aspect-ratio:3/2;object-fit:cover;border-radius:3px;
border:1px solid var(--line)}
.gal figcaption{font:400 12px/1.6 var(--mono);color:var(--ink-soft);margin-top:.55rem}
.vlabel{display:inline-block;justify-self:start;margin-top:.5rem;
font:500 10px/1 var(--mono);letter-spacing:.11em;text-transform:uppercase;
color:#7E8A8E;border:1px solid var(--line);border-radius:2px;padding:.34rem .46rem}
.blueprint .vlabel{color:#828C90;border-color:var(--line-deep)}
.plate{margin:0 0 clamp(2.25rem,5vw,3.5rem)}
.plate img{display:block;width:100%;border-radius:3px;border:1px solid var(--line)}
.plate figcaption{margin-top:.8rem;display:grid;gap:.35rem;max-width:70ch}
.plate-n{font:500 11.5px/1 var(--mono);letter-spacing:.13em;text-transform:uppercase;
color:var(--signal)}
.plate-t{font:400 13px/1.68 var(--mono);color:var(--ink-soft)}
.plate-todo{display:flex;flex-direction:column;justify-content:center;align-items:flex-start;
aspect-ratio:3/2;border:1px dashed var(--line);border-radius:3px;padding:1.4rem 1.5rem;
background:rgba(14,110,134,.05)}
.plate-todo b{display:block;font:500 13px/1.3 var(--mono);letter-spacing:.06em;
color:var(--signal);margin-bottom:.7rem}
.plate-todo span{font:400 12.5px/1.65 var(--mono);color:var(--ink-soft);max-width:34ch}
.blueprint .plate-todo{border-color:var(--line-deep);background:rgba(217,151,31,.05)}
.blueprint .plate-todo b{color:var(--amber-soft)}
.blueprint .plate-todo span{color:#828C90}
.ph-head{margin:clamp(2.5rem,6vw,4rem) 0 clamp(1.5rem,3vw,2.25rem)}
.ph-head h2{margin-bottom:.9rem}
.ph-head p{color:var(--ink-soft);max-width:68ch}
/* ---------- source list ----------------------------------------------- */
.srcs{list-style:none;margin:0;padding:0;border-top:1px solid var(--line)}
.srcs li{padding:.9rem 0;border-bottom:1px solid var(--line);font-size:.94rem;
color:var(--ink-soft)}
.srcs li b{display:block;color:var(--ink);font-weight:600;margin-bottom:.2rem}
.srcs a{color:var(--signal);word-break:break-word}
.srcs .tag{display:inline-block;font:500 10px/1 var(--mono);letter-spacing:.11em;
text-transform:uppercase;border:1px solid var(--line);border-radius:2px;
padding:.3rem .42rem;margin-right:.5rem;color:var(--ink-soft);vertical-align:.08em}
/* ---------- narrow-viewport containment ------------------------------- */
.cols,.cols>*,.tracts,.tracts>*,.case,.case>*,.split,.split>*,.strip,.strip>*,
.hero-grid,.hero-grid>*,.foot-cols,.foot-cols>*,.foot-net-cols,.foot-net-cols>*,
.gal,.gal>*,.pgrid,.pgrid>*{min-width:0}
.tablewrap{max-width:100%}
.prose,.prose p,.prose li,.srcs li,.deflist dd,.tline .ev{overflow-wrap:break-word}
.tbc{white-space:normal}
.srcs a{overflow-wrap:anywhere}
@media(max-width:560px){
.bar-in{padding:.75rem 18px;gap:.6rem}
.mark{font-size:12.5px;line-height:1.25}
.bar-cta{font-size:10.5px;padding:.62rem .7rem;letter-spacing:.07em}
.wrap{padding-inline:18px}
.deflist div{grid-template-columns:1fr}
table{min-width:480px}
}
@media(max-width:400px){
.bar-cta{font-size:10px;padding:.58rem .62rem}
}
/* ---------- bold and emphasis inside dark panels ---------------------- */
.blueprint strong,.blueprint .prose strong,.blueprint b{color:#F6F7F5;font-weight:600}
.blueprint .prose{color:#AFB6B8}
.blueprint .prose p,.blueprint .prose li{color:#AFB6B8}
.blueprint .small{color:#828C90}
.blueprint .small a,.blueprint .prose a{color:var(--amber-soft)}
.blueprint figcaption{color:#828C90}
.blueprint .shot figcaption b,.blueprint .plate-t b{color:#F6F7F5}
.blueprint .srcs{border-top-color:var(--line-deep)}
.blueprint .srcs li{border-bottom-color:var(--line-deep);color:#AFB6B8}
.blueprint .srcs li b{color:#F6F7F5}
.blueprint .srcs a{color:var(--amber-soft)}
.blueprint .srcs .tag{color:#828C90;border-color:var(--line-deep)}
/* full-measure lead figure injected after a page hero */
.plate--wide{margin:0}
.plate--wide img{width:100%;height:auto;display:block;border-radius:2px}
.plate--wide figcaption{margin-top:.85rem}
/* ---- scanned brochure pages ------------------------------------------- */
.leaves{display:grid;grid-template-columns:repeat(auto-fit,minmax(320px,1fr));
gap:2.6rem 2.2rem}
.leaves>*{min-width:0}
.leaf{margin:0;scroll-margin-top:90px}
.leaf a{display:block;background:#fff;border:1px solid var(--line);padding:10px;
transition:border-color .18s ease, box-shadow .18s ease}
.leaf a:hover{border-color:var(--signal);box-shadow:0 2px 18px rgba(14,110,134,.14)}
.leaf img{width:100%;height:auto;display:block}
.leaf figcaption{margin-top:.9rem}
.leaf figcaption .plate-n{display:flex;align-items:baseline;gap:.6rem;margin-bottom:.45rem}
.blueprint .leaf a{background:#0A1214;border-color:var(--line-deep)}
.dlbox{margin-top:1.9rem;padding:1.35rem 1.4rem;border:1px solid var(--line);
border-left:3px solid var(--amber);background:rgba(255,255,255,.55)}
.dl-k{font-family:var(--mono,ui-monospace,monospace);font-size:.72rem;letter-spacing:.09em;
text-transform:uppercase;color:var(--signal);margin:0 0 .85rem}
.dlbox .btn{margin:0}
.leaf-dl{font-size:.68rem;letter-spacing:.06em;text-decoration:none;flex:0 0 auto;
margin-left:auto;border:1px solid var(--line);padding:.14rem .5rem;border-radius:2px;
white-space:nowrap;line-height:1.3}
.leaf-dl:hover{border-color:var(--signal);color:var(--signal)}
.blueprint .leaf-dl{border-color:var(--line-deep)}
/* ---- showcase + full-bleed photography (added) ------------------------ */
.hero-full .tint{color:var(--amber-soft)}
.hero-full .btn-fill{background:var(--amber-soft);border-color:var(--amber-soft);color:#191C1B}
.hero-full .btn-fill:hover{background:#F0C877;border-color:#F0C877;color:#191C1B}
.gal a{display:block;overflow:hidden;border-radius:3px}
.gal a img{transition:transform .5s cubic-bezier(.2,.7,.3,1)}
.gal a:hover img{transform:scale(1.035)}
.gal--4{gap:clamp(.7rem,1.4vw,1.1rem)}
@media(min-width:640px){.gal--4{grid-template-columns:repeat(2,1fr)}}
@media(min-width:1080px){.gal--4{grid-template-columns:repeat(4,1fr)}}
.gal--4 img{aspect-ratio:4/3}
.gal--tall img{aspect-ratio:4/5}
.showcase-head{display:flex;flex-wrap:wrap;align-items:baseline;
justify-content:space-between;gap:.8rem 1.6rem;margin-bottom:clamp(1.4rem,3vw,2.1rem)}
.showcase-head h2{margin:0}
.showcase-more{font:500 12px/1 var(--mono);letter-spacing:.1em;text-transform:uppercase;
color:var(--signal);white-space:nowrap}
.plate--bleed{margin:0}
.plate--bleed img{width:100%;max-height:min(70vh,640px);object-fit:cover;
border-radius:0;border:0;border-block:1px solid var(--line)}
.plate--bleed figcaption{max-width:74ch;margin:.9rem auto 0;padding-inline:clamp(18px,4vw,24px)}
/* ---- CTA band -------------------------------------------------------- */
.ctaband{border-block:1px solid var(--line-deep);background:var(--deep)}
.ctaband .wrap{padding-block:clamp(2.5rem,6vw,4rem);display:grid;
gap:clamp(1.5rem,4vw,3rem);align-items:center}
@media(min-width:900px){.ctaband .wrap{grid-template-columns:1.15fr .85fr}}
.ctaband h2{color:#F6F7F5;margin:0 0 .9rem;max-width:26ch}
.ctaband p{color:#9AA5A8;margin:0;max-width:56ch}
.ctaband .eyebrow{color:var(--amber-soft)}
.ctaband .eyebrow::after{background:rgba(246,247,245,.22)}
.ctaband .btn-line{border-color:rgba(246,247,245,.42);color:#F6F7F5}
.ctaband .btn-line:hover{border-color:#F6F7F5;color:#F6F7F5}
.ctaband .btn-fill{background:var(--amber-soft);border-color:var(--amber-soft);color:#191C1B}
.ctaband .btn-fill:hover{background:#F0C877;border-color:#F0C877}
/* ---- one-of-one marks (X-100) ---------------------------------------- */
.oneof{display:grid;gap:1px;background:var(--line);border:1px solid var(--line);
margin-top:clamp(1.5rem,3vw,2.25rem)}
@media(min-width:720px){.oneof{grid-template-columns:repeat(3,1fr)}}
.oneof-c{background:var(--paper);padding:1.6rem 1.5rem;border-top:3px solid var(--signal)}
.oneof-c:nth-child(2){border-top-color:var(--amber)}
.oneof-c:nth-child(3){border-top-color:var(--amber-soft)}
.oneof-k{font:500 11px/1.5 var(--mono);letter-spacing:.13em;text-transform:uppercase;
color:var(--signal);margin-bottom:.55rem}
.oneof-v{font-family:var(--serif);font-size:clamp(1.6rem,2.6vw,2.15rem);line-height:1.1;
letter-spacing:-.025em}
.oneof-n{font:400 12.5px/1.6 var(--mono);color:var(--ink-soft);margin-top:.5rem}