/* EFG Today 039 (from 038 v2, 037 v2). Shared by every page of the site.
   :root is the live edit point and is mirrored in tokens.json. Change a token here and every
   component that reads it follows. Sector values are the G3 proposal v1, not an approved palette. */

/* ================= 1. TOKENS ================= */
:root{
  /* Core identity (from the accepted Atlas snapshot) */
  --efg:#6d754d;--efg-pale:#a9b38c;--efg-deep:#5d6847;
  --night:#171815;--night-2:#20221e;--night-3:#2b2e28;
  --bone:#f3efe6;--bone-2:#e7e1d3;--paper:#fbf9f4;--field:#fffdf8;
  --ink:#1f211d;--ink-2:#4a4b44;--ink-3:#63645a;
  --mist:#c9c5b8;--dim:#a29f94;--olive:#a9b38c;
  --rule:rgba(243,239,230,.18);--rule-strong:rgba(243,239,230,.42);
  --rule-ink:rgba(31,33,29,.16);--rule-ink-strong:#8b897e;
  --warn-on-dark:#e2c58a;--warn-on-light:#7a5a12;
  --error:#b3261e;--error-surface:#fff7f6;

  /* Focus: one ring, two colours so it holds 3:1 on night and on bone */
  --focus:#9cc2ff;--focus-on-light:#1d4fa0;--focus-ring:var(--focus);
  --focus-width:3px;--focus-offset:3px;

  /* Type families (system fonts only, no downloads) */
  --display:"Helvetica Neue",Helvetica,Arial,sans-serif;
  --serif:Georgia,"Times New Roman",serif;
  --sans:Arial,Helvetica,sans-serif;

  /* Type scale. rem based so browser text size settings and zoom scale it */
  --fs-display:clamp(2.375rem,1.15rem + 6.2vw,7.25rem);
  --fs-h1-compact:clamp(2.125rem,1.3rem + 4vw,5rem);
  --fs-h2:clamp(1.75rem,1.2rem + 2.5vw,3.5rem);
  --fs-h3:clamp(1.25rem,1.1rem + .6vw,1.625rem);
  --fs-lede:clamp(1.0625rem,1rem + .35vw,1.3125rem);
  --fs-body:1rem;--fs-small:.875rem;--fs-label:.75rem;--fs-micro:.6875rem;
  --lh-tight:.94;--lh-head:1.04;--lh-body:1.55;
  --track-display:-.05em;--track-head:-.035em;--track-label:.16em;

  /* Spacing scale */
  --sp-1:4px;--sp-2:8px;--sp-3:12px;--sp-4:16px;--sp-5:24px;--sp-6:32px;--sp-7:48px;--sp-8:64px;--sp-9:96px;
  --gutter:clamp(16px,4vw,56px);
  --band:clamp(56px,7.5vw,112px);
  --max:1360px;--measure:40ch;

  /* Shape and interaction */
  --radius:0;--rule-w:1px;--accent-bar:6px;
  --target:44px;--target-lg:52px;
  --mast-h:76px;
  /* Brand mark: faithful SVG exports in brand/. Height only; width follows the artwork (1.5616:1).
     In the masthead the mark is exactly --mast-h tall, so the olive column stands from the
     masthead's top edge to its lower line and the lettering sits on that line. */
  --brand-h:calc(var(--mast-h) - 16px);--brand-foot-h:clamp(104px,6.5vw + 48px,148px);--brand-clear:.2;
  --ease:cubic-bezier(.2,.7,.2,1);--dur-fast:.16s;--dur:.28s;--dur-slow:.6s;

  /* Sector proposal v1 (Sector Registry.json) */
  --edu:#c79a1e;--edu-text:#1f1a08;--edu-surface:#f5ecd2;
  --res:#a65a36;--res-text:#ffffff;--res-surface:#f4e1d6;
  --com:#3d6b99;--com-text:#ffffff;--com-surface:#dde7f1;
  --nr:#8d8b83;--nr-text:#1e1e1b;--nr-surface:#ebeae6;
  --accent:var(--efg);--accent-text:#fff;--accent-surface:#eef0e4;
}
[data-sector="education"]{--accent:var(--edu);--accent-text:var(--edu-text);--accent-surface:var(--edu-surface)}
[data-sector="residential"]{--accent:var(--res);--accent-text:var(--res-text);--accent-surface:var(--res-surface)}
[data-sector="commercial-retail"]{--accent:var(--com);--accent-text:var(--com-text);--accent-surface:var(--com-surface)}
[data-sector="needs-research"]{--accent:var(--nr);--accent-text:var(--nr-text);--accent-surface:var(--nr-surface)}
.light,.tint,.cell,.paper{--focus-ring:var(--focus-on-light)}

/* ================= 2. BASE ================= */
*,*::before,*::after{box-sizing:border-box}
[hidden]{display:none!important}
html{-webkit-text-size-adjust:100%;text-size-adjust:100%;scroll-padding-top:calc(var(--mast-h) + 16px)}
body{margin:0;background:var(--night);color:var(--bone);font-family:var(--sans);font-size:var(--fs-body);line-height:var(--lh-body);overflow-x:hidden}
img{display:block;max-width:100%;height:auto}
a{color:inherit;text-underline-offset:.22em;text-decoration-thickness:1px}
p{margin:0 0 1em}
ul,ol{margin:0;padding:0}
h1,h2,h3{font-family:var(--display);font-weight:700;margin:0;overflow-wrap:break-word}
h1{overflow-wrap:normal}
h1{font-size:var(--fs-display);line-height:var(--lh-tight);letter-spacing:var(--track-display)}
h2{font-size:var(--fs-h2);line-height:var(--lh-tight);letter-spacing:var(--track-head)}
h3{font-size:var(--fs-h3);line-height:var(--lh-head);letter-spacing:-.02em}
h1 em,h2 em{font-family:var(--serif);font-weight:400;font-style:italic;letter-spacing:-.03em;color:var(--accent)}
:focus-visible{outline:var(--focus-width) solid var(--focus-ring);outline-offset:var(--focus-offset)}
[tabindex="-1"]:focus{outline:none}
.vh{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap}
.wrap{max-width:var(--max);margin:0 auto;padding:0 var(--gutter)}
.skip{position:absolute;left:var(--gutter);top:-200px;z-index:100;background:var(--bone);color:var(--ink);padding:12px 16px;min-height:var(--target);font-weight:700;--focus-ring:var(--focus-on-light)}
.skip:focus{top:8px}

/* ================= 3. (removed in 043) ================= */

.no-js-note{background:var(--night-2);border-bottom:1px solid var(--rule);padding:10px var(--gutter);font-size:var(--fs-small);color:var(--mist);margin:0}
.js .no-js-note{display:none}

/* ================= 4. MASTHEAD AND NAVIGATION ================= */
/* Opaque night (037): the dark-ground mark always sits on its own ground, never on a tinted
   blend of the band scrolling beneath it. */
.masthead{position:sticky;top:0;z-index:40;background:var(--night);border-bottom:1px solid var(--rule)}
.mast{display:flex;align-items:center;gap:var(--sp-3);min-height:var(--mast-h)}
.brand{display:flex;align-self:center;align-items:center;flex:none;text-decoration:none;margin-right:var(--sp-3)}
.brand img{height:var(--brand-h);width:auto;max-width:none}
.mast .brand:focus-visible{outline-offset:3px}
.nav{margin-left:auto;order:1}
.nav ul{list-style:none;display:flex;align-items:center;gap:2px}
.nav a{display:inline-flex;align-items:center;gap:8px;min-height:var(--target);padding:8px 12px;font-size:var(--fs-small);text-decoration:none;color:var(--mist);border-bottom:2px solid transparent;transition:color var(--dur-fast)}
.nav a:hover{color:var(--bone)}
.nav a[aria-current="page"]{color:var(--bone);border-bottom-color:var(--accent)}
.nav a:not([data-sector])[aria-current="page"]{border-bottom-color:var(--bone)}
.nav .mk{width:10px;height:10px}
.nav-cta-item{display:none}
.hdr-cta{order:2;display:inline-flex;align-items:center;justify-content:center;min-height:var(--target);padding:8px 16px;background:var(--bone);color:var(--ink);font-size:var(--fs-small);font-weight:700;text-decoration:none;flex:none;white-space:nowrap}
.hdr-cta:hover{background:#fff}
.hdr-cta.cta-q{background:var(--accent);color:var(--accent-text)}
.hdr-cta.cta-q:hover{filter:brightness(1.07)}
.hdr-cta .l-short{display:none}
.cta-q{display:none}
html[data-route="education"] .cta-q{display:inline-flex}
html[data-route="education"] .cta-c,html[data-route="inquiry"] .hdr-cta{display:none}
.menu-btn{display:none;order:3;align-items:center;gap:10px;min-height:var(--target);min-width:var(--target);padding:8px 12px;background:transparent;color:var(--bone);border:1px solid var(--rule-strong);font:inherit;font-size:var(--fs-small);cursor:pointer}
.menu-ico{position:relative;width:16px;height:10px;border-top:1.5px solid currentColor;border-bottom:1.5px solid currentColor}
.menu-ico::after{content:"";position:absolute;left:0;right:0;top:50%;border-top:1.5px solid currentColor;transform:translateY(-50%)}
.menu-btn[aria-expanded="true"] .menu-ico{border-color:transparent}
.menu-btn[aria-expanded="true"] .menu-ico::after{transform:rotate(45deg)}
.menu-btn[aria-expanded="true"] .menu-ico::before{content:"";position:absolute;left:0;right:0;top:50%;border-top:1.5px solid currentColor;transform:rotate(-45deg)}

@media (max-width:1040px){
  :root{--mast-h:64px}
  .js .menu-btn{display:inline-flex}
  .js .mast > .brand{margin-right:auto}
  .js .nav{display:none;margin:0}
  .js .nav.is-open{display:block;position:absolute;left:0;right:0;top:100%;background:var(--night);border-bottom:1px solid var(--rule);box-shadow:0 30px 60px rgba(0,0,0,.45);max-height:calc(100vh - var(--mast-h));max-height:calc(100dvh - var(--mast-h));overflow:auto}
  .js .nav.is-open ul{flex-direction:column;align-items:stretch;padding:var(--sp-2) var(--gutter) var(--sp-5);max-width:var(--max);margin:0 auto}
  .js .nav.is-open a{min-height:var(--target-lg);font-family:var(--display);font-size:1.25rem;letter-spacing:-.015em;color:var(--bone);border-bottom:1px solid var(--rule);padding:12px 0}
  .js .nav.is-open a[aria-current="page"]{box-shadow:inset 3px 0 0 var(--accent);padding-left:14px}
  .js .nav.is-open a:not([data-sector])[aria-current="page"]{box-shadow:inset 3px 0 0 var(--bone)}
  .js .nav.is-open .mk{width:12px;height:12px}
  .js .nav.is-open .nav-cta-item{display:block;margin-top:var(--sp-4)}
  .js .nav.is-open a.nav-cta{display:flex;width:100%;justify-content:center;background:var(--bone);color:var(--ink);border:0;font-family:var(--sans);font-size:1rem;font-weight:700}
  html:not(.js) .mast{flex-wrap:wrap;padding-bottom:8px}
  html:not(.js) .nav{order:4;width:100%;margin:0}
  html:not(.js) .nav ul{flex-wrap:wrap}
  html:not(.js) .hdr-cta{display:none}
  html:not(.js) .nav-cta-item{display:block}
  html:not(.js) .nav a.nav-cta{background:var(--bone);color:var(--ink);font-weight:700;border:0;margin-left:4px}
}
@media (max-width:560px){
  :root{--mast-h:62px}
  .hdr-cta{padding:8px 12px}
  .hdr-cta .l-long{display:none}
  .hdr-cta .l-short{display:inline}
  .menu-txt{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
  .menu-btn{padding:8px 13px}
}
@media (max-width:340px){.hdr-cta{padding:8px 10px}.mast{gap:var(--sp-2)}.brand{margin-right:0}}
/* Landscape phones: header scrolls away instead of holding height */
@media (max-height:520px) and (orientation:landscape){
  .masthead{position:relative}
  html{scroll-padding-top:12px}
  :root{--mast-h:62px}
}

/* ================= 5. CONTROLS ================= */
.actions{display:flex;flex-wrap:wrap;gap:10px}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:12px;min-height:var(--target);padding:10px 18px;border:1px solid var(--rule-strong);border-radius:var(--radius);background:transparent;color:var(--bone);font:inherit;font-size:var(--fs-small);letter-spacing:.01em;text-decoration:none;cursor:pointer;text-align:left;transition:background-color var(--dur-fast),border-color var(--dur-fast),filter var(--dur-fast)}
.btn:hover{border-color:var(--bone);background:var(--night-3)}
.btn.primary{background:var(--bone);color:var(--ink);border-color:var(--bone);font-weight:700}
.btn.primary:hover{background:#fff}
.btn.accent{background:var(--accent);color:var(--accent-text);border-color:var(--accent);font-weight:700}
.btn.accent:hover{filter:brightness(1.07)}
.btn[disabled]{opacity:.45;cursor:not-allowed}
.btn .arrow,.textlink .arrow,.go .arrow{font-family:var(--serif);transition:transform var(--dur-fast) var(--ease)}
.btn:hover .arrow,.textlink:hover .arrow{transform:translateX(3px)}
.light .btn,.tint .btn,.cell .btn{border-color:var(--rule-ink-strong);color:var(--ink)}
.light .btn:hover,.tint .btn:hover,.cell .btn:hover{border-color:var(--ink);background:rgba(31,33,29,.05)}
.light .btn.primary,.tint .btn.primary,.cell .btn.primary{background:var(--ink);color:var(--bone);border-color:var(--ink)}
.light .btn.accent,.tint .btn.accent,.cell .btn.accent{background:var(--accent);color:var(--accent-text);border-color:var(--accent)}
@media (max-width:560px){
  .actions{flex-direction:column;align-items:stretch}
  .actions .btn{justify-content:space-between;min-height:var(--target-lg)}
}
@media (max-width:560px) and (orientation:landscape),(max-height:520px) and (orientation:landscape){
  .actions{flex-direction:row;align-items:center}
  .actions .btn{min-height:var(--target)}
}
.textlink{display:inline-flex;align-items:center;gap:8px;min-height:var(--target);color:inherit;font-size:var(--fs-small)}
.textlink.sm{font-size:var(--fs-label);letter-spacing:.04em}

/* Sector marker, label, eyebrow, tags */
.mk{display:inline-block;width:12px;height:12px;background:var(--accent);flex:none}
.mk.triangle{clip-path:polygon(50% 4%,100% 96%,0 96%)}
.mk.diamond{clip-path:polygon(50% 0,100% 50%,50% 100%,0 50%)}
.mk.square{clip-path:inset(8%)}
.mk.ring{border-radius:50%;background:transparent;box-shadow:inset 0 0 0 3px var(--accent)}
.eyebrow{display:flex;align-items:center;gap:12px;font-size:var(--fs-label);letter-spacing:.18em;text-transform:uppercase;margin:0 0 var(--sp-4)}
.eyebrow .mk{width:11px;height:11px}
/* Small text on night is lifted toward bone so every proposed accent keeps legible contrast */
.sector-label{color:var(--bone);color:color-mix(in srgb,var(--accent) 60%,var(--bone))}
.sector-label.on-image{color:var(--bone)}
.light .sector-label,.tint .sector-label{color:var(--ink)}
.label{display:inline-flex;align-items:center;gap:8px;font-size:var(--fs-micro);letter-spacing:.14em;text-transform:uppercase;margin:0;color:inherit}
.tag{display:inline-flex;align-items:center;gap:8px;font-size:var(--fs-micro);letter-spacing:.14em;text-transform:uppercase;padding:5px 9px;border:1px solid currentColor;line-height:1.25}
.tag.warn{color:var(--warn-on-dark)}
.light .tag.warn,.tint .tag.warn,.cell .tag.warn{color:var(--warn-on-light)}
.kicker{display:flex;align-items:baseline;gap:12px;font-size:var(--fs-label);letter-spacing:.18em;text-transform:uppercase;margin:0 0 var(--sp-4);color:var(--dim)}
.light .kicker,.tint .kicker,.cell .kicker{color:var(--ink-3)}
/* Numbers are small text: lifted toward bone on night, deepened toward ink on light, so each sector keeps 4.5:1 */
.kicker .num{font-family:var(--serif);letter-spacing:0;font-size:.9375rem;color:var(--bone);color:color-mix(in srgb,var(--accent) 60%,var(--bone))}
.light .kicker .num,.tint .kicker .num{color:var(--ink);color:color-mix(in srgb,var(--accent) 50%,var(--ink))}

/* Chips: sector navigation and Work filters */
.chips{display:flex;flex-wrap:wrap;gap:8px;list-style:none}
.chip{display:inline-flex;align-items:center;gap:10px;min-height:var(--target);padding:8px 16px;border:1px solid var(--rule-strong);color:var(--mist);text-decoration:none;font-size:var(--fs-small);background:transparent;transition:color var(--dur-fast),border-color var(--dur-fast),background-color var(--dur-fast)}
.chip:hover{color:var(--bone);border-color:var(--bone)}
.chip[aria-current],.chip.is-selected{background:var(--accent-surface);color:var(--ink);border-color:var(--accent);box-shadow:inset 0 -3px 0 var(--accent);font-weight:700}
.chip[data-filter="all"][aria-current]{background:var(--bone);border-color:var(--bone);box-shadow:inset 0 -3px 0 var(--efg)}
.light .chip,.tint .chip,.cell .chip{border-color:var(--rule-ink-strong);color:var(--ink)}
.light .chip:hover,.cell .chip:hover{border-color:var(--ink)}

/* ================= 6. VIEWS AND BANDS ================= */
.view{animation:viewIn var(--dur) var(--ease) both}
@keyframes viewIn{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
.js .view{display:none}
html[data-route="education"] #v-education,html[data-route="work"] #v-work,html[data-route="apartments"] #v-apartments,
html[data-route="commercial"] #v-commercial,html[data-route="galloway"] #v-galloway,html[data-route="inquiry"] #v-inquiry,
html[data-route="missing"] #v-missing,
html[data-route="park-centre"] #v-park-centre,html[data-route="altairus"] #v-altairus,html[data-route="metro-78"] #v-metro-78,
html[data-route="taza"] #v-taza,html[data-route="varsity"] #v-varsity,
html[data-route="50-street-commercial"] #v-50-street-commercial,html[data-route="currie"] #v-currie,
html[data-route="renaissance-edmonton-airport"] #v-renaissance-edmonton-airport{display:block}
html:not(.js) .view+.view{border-top:6px solid var(--efg)}
/* Route anchors: real fragment targets. Without script they sit at the top of their content, so
   every link lands. With script they have no box, so the browser's own jump does nothing and the
   router alone decides scroll and focus. */
.route-anchor{display:block;height:0;width:0;overflow:hidden}
.js .route-anchor{display:none}
html:not(.js){scroll-padding-top:0}
html:not(.js) .masthead{position:relative}
html:not(.js) #v-missing{display:none}

.band{padding:var(--band) 0;border-top:1px solid var(--rule)}
.band.flush{padding-top:0;border-top:0}
.light{background:var(--bone);color:var(--ink)}
.light .band,.band.light{border-top-color:var(--rule-ink)}
.tint{background:var(--accent-surface);color:var(--ink);border-top-color:transparent}
.lede{font-size:var(--fs-lede);line-height:1.5;max-width:var(--measure);color:var(--mist)}
.light .lede,.tint .lede{color:var(--ink-2)}
.section-head{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:var(--sp-4) clamp(28px,5vw,80px);align-items:end;margin-bottom:clamp(28px,4vw,56px)}
.section-head .kicker{grid-column:1/-1;margin:0}
.section-head h2,.section-head h1{max-width:16ch}
.section-head .lede{margin:0}
.split{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:clamp(28px,5vw,80px);align-items:start}
.split .lede{margin:var(--sp-4) 0 var(--sp-5)}
@media (max-width:900px){.section-head,.split{grid-template-columns:1fr}}

/* ================= 7. SECTOR HERO (typographic) ================= */
.s-hero{position:relative;overflow:hidden;padding:clamp(48px,8vw,128px) 0 clamp(44px,6vw,96px)}
.s-hero::before{content:"";position:absolute;left:0;top:0;bottom:0;width:var(--accent-bar);background:var(--accent)}
.hero-grid{position:relative;display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:clamp(28px,5vw,72px);align-items:end}
.hero-copy h1{margin:0 0 var(--sp-5)}
.hero-copy .lede{margin-bottom:var(--sp-6);max-width:36ch}
@media (max-width:900px){.hero-grid{grid-template-columns:1fr}}
.hero-tag{margin:0}
.hero-index ol{list-style:none;border-top:1px solid var(--rule);counter-reset:hi}
.hero-index li{counter-increment:hi;border-bottom:1px solid var(--rule)}
.hero-index a{display:grid;grid-template-columns:40px 1fr;gap:2px 12px;padding:14px 0;min-height:var(--target);text-decoration:none;color:var(--mist);font-size:var(--fs-small)}
.hero-index a::before{content:counter(hi,decimal-leading-zero);grid-row:span 2;font-family:var(--serif);color:var(--bone);color:color-mix(in srgb,var(--accent) 60%,var(--bone));font-size:.9375rem}
.hero-index b{color:var(--bone);font-family:var(--display);font-size:1.0625rem;letter-spacing:-.01em}
.hero-index a:hover b{text-decoration:underline;text-underline-offset:4px}
@media (max-width:900px){.hero-index{display:none}}


/* ================= 8. EDUCATION BLOCKS ================= */
.proof-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(16px,2.4vw,32px)}
@media (max-width:760px){.proof-grid{grid-template-columns:1fr}}
.proof{border:1px solid var(--rule-ink);background:var(--paper);display:flex;flex-direction:column}
.proof-body{padding:clamp(20px,2.4vw,32px);display:flex;flex-direction:column;gap:var(--sp-3);flex:1}
.proof h3{font-size:clamp(1.625rem,1.2rem + 1.4vw,2.5rem);letter-spacing:var(--track-head)}
/* Credit-led school proof: the name and its exact credit are the evidence, not an empty image slot */
.credit-led .proof{padding:clamp(22px,2.6vw,36px);border-top:3px solid var(--accent)}
.credit-led .proof h3{display:flex;align-items:center;gap:14px;font-size:clamp(1.875rem,1.2rem + 2vw,3rem);line-height:1;letter-spacing:-.04em}
.credit-led .proof h3 .mk{width:14px;height:14px}
/* The verified design role leads; practice and EFG role follow directly beneath at reading weight */
.role-lead{margin:var(--sp-4) 0 0;font-family:var(--display);font-size:clamp(1.125rem,1rem + .4vw,1.3125rem);font-weight:700;line-height:1.25;letter-spacing:-.01em;color:var(--ink)}
.credit-led .credit{margin-top:var(--sp-3);grid-template-columns:minmax(5.5rem,auto) 1fr;gap:8px 20px;font-size:1rem;padding-top:var(--sp-3)}
.photo-note{margin:var(--sp-5) 0 0;padding-top:var(--sp-3);border-top:1px dashed var(--rule-ink-strong);font-size:.8125rem;color:var(--ink-3)}
.credit{display:grid;grid-template-columns:auto 1fr;gap:6px 16px;margin:var(--sp-2) 0 0;font-size:var(--fs-small);border-top:1px solid var(--rule-ink);padding-top:var(--sp-3)}
/* Labels are information, so they read as words: sentence case, no tracking */
.credit dt{font-size:.8125rem;font-weight:700;color:var(--ink-3);padding-top:1px}
.credit dd{margin:0}

.qual{display:grid;grid-template-columns:minmax(0,6fr) minmax(0,5fr);gap:var(--sp-5) clamp(28px,5vw,80px);align-items:end}
.qual h2{max-width:15ch}
.qual-body .lede{margin-bottom:var(--sp-4)}
@media (max-width:900px){.qual{grid-template-columns:1fr}}
.ticks{list-style:none;margin:0 0 var(--sp-5);border-top:1px solid rgba(31,33,29,.2)}
.ticks li{position:relative;padding:10px 0 10px 26px;border-bottom:1px solid rgba(31,33,29,.2);font-size:var(--fs-small)}
.ticks li::before{content:"";position:absolute;left:2px;top:15px;width:10px;height:6px;border-left:2px solid var(--ink);border-bottom:2px solid var(--ink);transform:rotate(-45deg)}

.bring{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));list-style:none;border-top:1px solid var(--rule-ink)}
.bring li{padding:22px 22px 22px 0;border-bottom:1px solid var(--rule-ink)}
.bring li+li{padding-left:22px;border-left:1px solid var(--rule-ink)}
.bring b{display:block;font-family:var(--display);font-size:1.1875rem;letter-spacing:-.015em;margin:10px 0 6px}
.bring span:not(.mk){font-size:var(--fs-small);color:var(--ink-2)}
@media (max-width:900px){.bring{grid-template-columns:repeat(2,minmax(0,1fr))}.bring li:nth-child(3){padding-left:0;border-left:0}}
@media (max-width:560px){.bring{grid-template-columns:1fr}.bring li+li{padding-left:0;border-left:0}.bring li{padding:16px 0}}

.explore{padding:var(--sp-6) 0}
.explore-row{display:flex;flex-wrap:wrap;align-items:center;gap:var(--sp-3) var(--sp-5)}
.explore-row .kicker{margin:0}

/* Education register (037): every eligible record, grouped by kind of work */
.band.paper{background:var(--paper);color:var(--ink);border-top-color:var(--rule-ink)}
.reg{display:grid;grid-template-columns:minmax(0,4fr) minmax(0,8fr);gap:var(--sp-6) clamp(32px,5vw,80px);align-items:start}
.reg-side h2{max-width:11ch;margin-bottom:var(--sp-4)}
.reg-lede{color:var(--ink-2);max-width:42ch;margin:0 0 var(--sp-5)}
.reg-tools{display:grid;gap:var(--sp-4);margin:0}
.reg-field label{display:block;font-weight:700;font-size:.9375rem;margin-bottom:6px}
.reg-field input{width:100%;min-height:var(--target-lg);padding:12px;font:inherit;font-size:1rem;color:var(--ink);background:var(--field);border:1px solid var(--rule-ink-strong);border-radius:var(--radius);-webkit-appearance:none;appearance:none}
.reg-field input:focus{outline:var(--focus-width) solid var(--focus-on-light);outline-offset:1px;border-color:var(--ink)}
.reg-field .hint{display:block;margin-top:6px;font-size:.8125rem;color:var(--ink-3)}
.reg-origin{border:0;margin:0;padding:0;min-width:0}
.reg-origin legend{font-weight:700;font-size:.9375rem;padding:0;margin-bottom:4px}
.reg-origin label{display:flex;align-items:center;gap:10px;min-height:var(--target);font-size:.9375rem;cursor:pointer}
.reg-origin input{width:18px;height:18px;margin:0;accent-color:var(--ink);flex:none}
.reg-origin input:focus-visible{outline:var(--focus-width) solid var(--focus-on-light);outline-offset:2px}
.reg-status{display:flex;flex-wrap:wrap;align-items:center;gap:0 16px;margin:0;font-size:var(--fs-small);color:var(--ink-2);border-top:1px solid var(--rule-ink);padding-top:var(--sp-2)}
#reg-count{font-variant-numeric:tabular-nums;min-height:var(--target);display:inline-flex;align-items:center}
.reg-clear{min-height:var(--target);padding:0;border:0;background:none;font:inherit;font-weight:700;color:var(--ink);text-decoration:underline;text-underline-offset:.22em;cursor:pointer}
.reg-nojs{font-size:var(--fs-small);color:var(--ink-2);margin:0}
.js .reg-nojs{display:none}
html:not(.js) .reg-tools{display:none}
.reg-index{margin-top:var(--sp-5)}
.reg-index ul{list-style:none;border-top:1px solid var(--rule-ink)}
.reg-index a{display:flex;align-items:center;justify-content:space-between;gap:12px;min-height:var(--target);padding:6px 0;border-bottom:1px solid var(--rule-ink);text-decoration:none;font-size:var(--fs-small);color:var(--ink-2)}
.reg-index a:hover span{text-decoration:underline;text-underline-offset:4px;color:var(--ink)}
.reg-index b{font-variant-numeric:tabular-nums;color:var(--ink);font-weight:700}
.reg-atlas{margin-top:var(--sp-3);color:var(--ink)}
.reg-main{min-width:0}
.reg-empty{border:1px solid var(--rule-ink-strong);background:var(--field);padding:var(--sp-5);margin-bottom:var(--sp-6)}
.reg-empty p{max-width:56ch;color:var(--ink-2)}
.reg-empty b{color:var(--ink)}
.reg-groups{list-style:none}
.reg-group + .reg-group{margin-top:var(--sp-7)}
.reg-gh{display:flex;align-items:baseline;gap:10px;padding-bottom:10px;border-bottom:2px solid var(--ink)}
.reg-gh .mk{align-self:center}
.reg-gc{margin-left:auto;font-family:var(--sans);font-size:var(--fs-small);font-weight:400;letter-spacing:0;color:var(--ink-3);font-variant-numeric:tabular-nums}
.reg-gnote{font-size:var(--fs-small);color:var(--ink-2);max-width:62ch;margin:10px 0 2px}
/* v2: the prior-practice credit is stated once, at group level, beside the accent rule */
.reg-gnote.reg-credit{color:var(--ink);font-size:.9375rem;line-height:1.5;padding:2px 0 2px 14px;border-left:3px solid var(--accent);margin-top:14px}
.reg-rows{list-style:none}
.rec{display:grid;grid-template-columns:minmax(0,1fr) minmax(8rem,12rem) 4.5rem;grid-template-areas:"name place atlas" "kind place atlas" "role place atlas";column-gap:var(--sp-5);padding:14px 0 13px;border-bottom:1px solid var(--rule-ink)}
.rec p{margin:0}
.rec-name{grid-area:name;font-family:var(--display);font-weight:700;font-size:1.0625rem;line-height:1.3;letter-spacing:-.01em;color:var(--ink)}
.rec-work{display:contents}
.rec-place{grid-area:place;font-size:.9375rem;line-height:1.4;color:var(--ink);padding-top:2px}
.rec-kind{grid-area:kind;font-size:.9375rem;line-height:1.45;color:var(--ink-2);margin-top:2px}
.rec-role{grid-area:role;font-size:.875rem;line-height:1.45;margin-top:3px;color:var(--ink-2)}
.rec-role.prior{color:var(--ink-2)}
.rec-role.stated{color:var(--ink-2)}
.rec-atlas{grid-area:atlas;justify-self:end;align-self:start;display:inline-flex;align-items:center;min-height:var(--target);margin-top:-10px;padding:0 2px;font-size:.875rem;color:var(--ink);text-decoration:underline;text-underline-offset:.22em}
.rec-atlas:hover{text-decoration-thickness:2px}
@media (min-width:901px) and (min-height:820px){.js .reg-side{position:sticky;top:calc(var(--mast-h) + 24px)}}
@media (max-width:900px){
  .reg{grid-template-columns:1fr}
  .reg-side h2{max-width:none}
  .reg-tools{grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:var(--sp-4) var(--sp-5);align-items:start}
  .reg-status{grid-column:1/-1}
  .reg-index ul{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));column-gap:var(--sp-5)}
}
@media (max-width:640px){
  .reg{row-gap:var(--sp-5)}
  .reg-tools{grid-template-columns:1fr}
  .reg-origin{display:flex;flex-wrap:wrap;column-gap:20px}
  .reg-origin legend{flex-basis:100%}
  .reg-index ul{grid-template-columns:repeat(2,minmax(0,1fr));column-gap:var(--sp-4)}
  .rec{grid-template-columns:minmax(0,1fr) auto;grid-template-areas:"name atlas" "work work" "role role";column-gap:var(--sp-4);padding:12px 0 11px}
  .rec-work{display:flex;flex-wrap:wrap;column-gap:12px;grid-area:work;margin-top:3px}
  .rec-place,.rec-kind{grid-area:auto;padding:0;margin:0;font-size:.9375rem;line-height:1.45}
  .rec-atlas{align-self:start;margin:-10px 0 -10px}
}

/* ================= 9. WORK ================= */
.w-hero{position:relative;padding:clamp(40px,6vw,96px) 0 clamp(28px,3vw,40px)}
.w-hero h1{font-size:var(--fs-h1-compact);margin:0 0 var(--sp-4)}
.w-hero .lede{margin-bottom:var(--sp-5);max-width:48ch}
.filter-bar{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:var(--sp-3) var(--sp-5);padding-top:var(--sp-4);border-top:1px solid var(--rule)}
.filter-status{display:flex;align-items:center;gap:var(--sp-4);margin:0;font-size:var(--fs-small);color:var(--mist)}
.filter-status .reset{display:inline-flex;align-items:center;min-height:var(--target);color:var(--bone)}
html[data-work="all"] #work-reset{display:none}

.wgroup{padding:clamp(32px,4vw,56px) 0;border-top:1px solid var(--rule)}
html[data-work="education"] .wgroup:not([data-group="education"]),
html[data-work="apartments"] .wgroup:not([data-group="apartments"]),
html[data-work="commercial"] .wgroup:not([data-group="commercial"]),
html[data-work="healthcare"] .wgroup:not([data-group="healthcare"]),
html[data-work="hospitality"] .wgroup:not([data-group="hospitality"]){display:none}
.wgroup-head{display:flex;flex-wrap:wrap;align-items:baseline;justify-content:space-between;gap:var(--sp-2) var(--sp-5);margin-bottom:var(--sp-5)}
.wgroup-head h2{display:flex;flex-wrap:wrap;align-items:baseline;gap:6px 14px;font-size:clamp(1.5rem,1.2rem + 1.2vw,2.25rem);letter-spacing:-.03em;line-height:1.05}
.wgroup-head h2 .mk{width:14px;height:14px;align-self:center}
.wgroup-head .sub{font-family:var(--sans);font-weight:400;font-size:var(--fs-small);letter-spacing:.02em;color:var(--mist)}
.wgroup-foot{margin:var(--sp-3) 0 0;display:flex;flex-wrap:wrap;gap:0 var(--sp-5)}

.wlist{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(14px,1.8vw,24px);list-style:none}
.wlist-text{grid-template-columns:repeat(2,minmax(0,1fr))}
.wcard{position:relative;background:var(--night-2);border:1px solid var(--rule);display:flex;flex-direction:column;min-width:0;transition:border-color var(--dur-fast)}
.wcard.linked:hover,.wcard.linked:focus-within{border-color:var(--bone)}
.wcard .media{position:relative;aspect-ratio:16/10;overflow:hidden;background:var(--night-3)}
.wcard .media img{width:100%;height:100%;object-fit:cover;object-position:var(--crop,50% 50%);transition:transform var(--dur-slow) var(--ease),opacity .4s var(--ease)}
.wcard.linked:hover .media img{transform:scale(1.02)}
.media-cap{position:absolute;left:0;bottom:0;background:rgba(23,24,21,.82);color:var(--mist);font-size:var(--fs-micro);letter-spacing:.12em;text-transform:uppercase;padding:5px 9px}
.wbody{padding:var(--sp-4) var(--sp-5) var(--sp-4);display:flex;flex-direction:column;align-items:flex-start;gap:4px;flex:1}
.wbody h3 a{text-decoration:none}
.wbody h3 a:hover{text-decoration:underline}
.wcard.linked h3 a::after{content:"";position:absolute;inset:0}
.wbody .place,.wbody .role{margin:0;font-size:var(--fs-small);color:var(--mist)}
.wbody .role{max-width:46ch}
.wbody .state{margin:6px 0 0;font-size:var(--fs-label);letter-spacing:.06em;color:var(--dim);display:inline-flex;align-items:center;gap:8px}
.wbody .state::before{content:"";width:7px;height:7px;border:1px solid currentColor}
.wbody .go{margin-top:auto;padding-top:var(--sp-2);font-size:var(--fs-small);color:var(--bone);display:inline-flex;align-items:center;gap:8px;min-height:32px}
.wbody .textlink{margin-top:auto}
.wbody p:has(.tag){margin:6px 0 0}
/* Compact and text-only cards: a small missing-media tile beside the text */
.wcard.compact,.wcard.text-only{flex-direction:row;align-items:stretch}
.wcard.compact .wbody,.wcard.text-only .wbody{padding:var(--sp-4) var(--sp-4) var(--sp-3)}
.missing.mini{flex:none;width:clamp(64px,8vw,96px);aspect-ratio:auto;padding:0;border-bottom:0;border-right:1px solid var(--rule-ink)}
.missing.mini.dark{border-right-color:var(--rule)}
.missing.mini::before{top:10px;left:10px;width:16px;height:16px}
.missing.mini::after{bottom:10px;right:10px;width:16px;height:16px}
/* Feature card in Work: wide image beside two stacked cards */
.wgroup .wcard.feature{grid-column:span 2;grid-row:span 2}
.wgroup .wcard.feature .media{aspect-ratio:auto;flex:1;min-height:320px}
.wgroup .wcard.feature .wbody{flex:none}
.wgroup .wcard.feature .go{margin-top:var(--sp-2)}
.wgroup .wcard.feature h3{font-size:clamp(1.75rem,1.3rem + 1.4vw,2.75rem);letter-spacing:-.04em}
@media (max-width:1000px){
  .wlist{grid-template-columns:repeat(2,minmax(0,1fr))}
  .wgroup .wcard.feature{grid-row:auto}
  .wgroup .wcard.feature .media{aspect-ratio:16/9;min-height:0;flex:none}
}
@media (max-width:640px){
  .wlist,.wlist-text{grid-template-columns:1fr}
  .wgroup .wcard.feature{grid-column:auto}
  .wgroup .wcard.feature .media{aspect-ratio:4/3}
  .wcard .media{aspect-ratio:3/2}
}
.more-line{margin:var(--sp-4) 0 0}

/* Deferred images */
html:not(.js) img.defer{display:none}
img.defer:not([src]){visibility:hidden}
img.defer{opacity:0}
img.defer.is-loaded{opacity:1}

/* ================= 10. APARTMENTS OPENING ================= */
.a-hero{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,6fr);min-height:calc(100vh - var(--mast-h) - var(--target));min-height:min(calc(100svh - var(--mast-h) - var(--target)),920px);border-bottom:1px solid var(--rule)}
.a-copy{position:relative;display:flex;flex-direction:column;justify-content:center;padding:clamp(32px,5vw,72px) clamp(24px,4vw,56px) clamp(28px,4vw,56px) var(--gutter);grid-row:1;grid-column:1}
.a-copy::before{content:"";position:absolute;left:0;top:0;bottom:0;width:var(--accent-bar);background:var(--accent)}
.a-copy h1{font-size:clamp(2.375rem,1rem + 3.7vw,5rem);margin:0 0 var(--sp-5);max-width:11ch}
.a-copy .lede{margin-bottom:var(--sp-5);max-width:34ch}
.a-feature{display:grid;grid-template-columns:1fr auto;gap:2px 16px;align-items:end;margin-top:clamp(24px,4vw,48px);padding:var(--sp-4) 0 var(--sp-1);border-top:1px solid var(--rule);text-decoration:none;color:var(--bone);min-height:var(--target);max-width:460px}
.a-feature .label{grid-column:1/-1;color:var(--dim);margin-bottom:6px}
.a-feature b{font-family:var(--display);font-size:clamp(1.375rem,1.2rem + .6vw,1.75rem);letter-spacing:-.025em;line-height:1.05}
.a-feature .place{color:var(--mist);font-size:var(--fs-small);grid-column:1}
.a-feature .go{grid-column:2;grid-row:2/4;font-size:var(--fs-small);display:inline-flex;align-items:center;gap:8px;align-self:center}
.a-feature:hover b{text-decoration:underline;text-underline-offset:5px}
.a-media{position:relative;margin:0;overflow:hidden;background:var(--night-3);min-height:420px;grid-row:1;grid-column:2}
.a-media img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:var(--crop,40% 50%)}
.a-media figcaption{position:absolute;left:0;bottom:0;background:rgba(23,24,21,.84);color:var(--mist);font-size:var(--fs-micro);letter-spacing:.12em;text-transform:uppercase;padding:7px 12px}
@media (max-width:900px){
  .a-hero{grid-template-columns:1fr;min-height:0}
  .a-media{grid-column:1;grid-row:1;min-height:0;aspect-ratio:5/4;max-height:44vh;max-height:44svh;width:100%}
  .a-media img{object-position:var(--crop-m,44% 40%)}
  .a-copy{grid-row:2;padding-top:var(--sp-5)}
  .a-copy::before{top:0;bottom:auto;right:0;width:auto;height:4px}
  .a-copy h1{max-width:none}
}
@media (max-width:900px) and (orientation:landscape) and (min-width:560px){
  .a-hero{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
  .a-media{grid-column:2;max-height:none;aspect-ratio:auto;min-height:100%}
  .a-copy{grid-row:1;padding-top:var(--sp-5)}
  .a-copy::before{top:0;bottom:0;right:auto;width:var(--accent-bar);height:auto}
  .a-copy h1{font-size:clamp(2rem,6.5vh + 1rem,3rem)}
}

.steps{list-style:none;border-top:1px solid var(--rule-ink);counter-reset:st}
.steps li{counter-increment:st;display:grid;grid-template-columns:40px 1fr;gap:2px 12px;padding:16px 0;border-bottom:1px solid var(--rule-ink);font-size:var(--fs-small);color:var(--ink-2)}
.steps li::before{content:counter(st,decimal-leading-zero);grid-row:span 2;font-family:var(--serif);color:var(--ink);color:color-mix(in srgb,var(--accent) 50%,var(--ink))}
.steps b{color:var(--ink);font-family:var(--display);font-size:1.0625rem;letter-spacing:-.01em}

/* ================= 11. COMMERCIAL RECORD ================= */
.com-hero .hero-grid{align-items:end}
.record{border:1px solid var(--rule);background:var(--night-2)}
.record-head{display:flex;flex-wrap:wrap;gap:10px;justify-content:space-between;align-items:center;padding:14px 20px;border-bottom:1px solid var(--rule);min-height:var(--target-lg)}
.record-body{display:grid;grid-template-columns:minmax(0,6fr) minmax(0,5fr)}
.record-body .missing{aspect-ratio:auto;min-height:300px;border-bottom:0;border-right:1px solid var(--rule)}
.record-facts .h3x{padding:20px 20px 8px;font-size:clamp(1.625rem,1.2rem + 1.4vw,2.5rem);letter-spacing:var(--track-head);line-height:1.02}
@media (max-width:900px){.record-body{grid-template-columns:1fr}.record-body .missing{border-right:0;border-bottom:1px solid var(--rule);min-height:180px}}
.facts{margin:0;display:grid;grid-template-columns:minmax(104px,auto) 1fr}
.facts dt,.facts dd{padding:12px 20px;border-bottom:1px solid var(--rule);margin:0;font-size:var(--fs-small)}
.facts dt{font-size:.8125rem;font-weight:700;color:var(--dim);padding-top:13px}
.facts dd.held{color:var(--dim);font-style:italic;font-family:var(--serif)}
.fact-group-title{font-size:1.0625rem;letter-spacing:-.01em;margin:var(--sp-6) 0 var(--sp-2)}
.facts > :nth-last-child(-n+2){border-bottom:0}
.facts.ruled{border-top:1px solid var(--rule-ink)}
.light .facts dt,.light .facts dd,.cell .facts dt,.cell .facts dd{border-bottom-color:var(--rule-ink)}
.light .facts dt,.light .facts dd.held,.cell .facts dt,.cell .facts dd.held{color:var(--ink-3)}
@media (max-width:380px){.facts{grid-template-columns:1fr}.facts dt{padding-bottom:0;border-bottom:0}.facts dd{padding-top:4px}.facts > :nth-last-child(2){border-bottom:0}}

/* ================= 12. MISSING MEDIA ================= */
.missing{position:relative;aspect-ratio:16/9;background:repeating-linear-gradient(135deg,transparent 0 14px,rgba(31,33,29,.05) 14px 15px),var(--accent-surface);color:var(--ink);display:flex;flex-direction:column;justify-content:flex-end;gap:6px;padding:18px;border-bottom:1px solid var(--rule-ink);overflow:hidden}
.missing::before{content:"";position:absolute;top:18px;left:18px;width:28px;height:28px;border-top:2px solid var(--accent);border-left:2px solid var(--accent)}
.missing::after{content:"";position:absolute;bottom:18px;right:18px;width:28px;height:28px;border-bottom:2px solid var(--accent);border-right:2px solid var(--accent)}
.missing strong{font-family:var(--display);font-size:.9375rem;letter-spacing:-.01em}
.missing span{font-size:.8125rem;color:var(--ink-2);max-width:34ch}
.missing.dark{background:repeating-linear-gradient(135deg,transparent 0 14px,rgba(243,239,230,.05) 14px 15px),var(--night-3);color:var(--bone);border-bottom-color:var(--rule)}
.missing.dark span{color:var(--mist)}
.missing.empty{aspect-ratio:auto;min-height:150px}

/* ================= 13. PROJECT PAGE ================= */
.p-hero{position:relative;min-height:min(84vh,880px);min-height:min(84svh,880px);display:flex;align-items:flex-end;overflow:hidden;background:var(--night-3)}
.p-hero img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:var(--crop,50% 52%)}
.p-hero::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(23,24,21,.25) 0,rgba(23,24,21,0) 30%,rgba(23,24,21,.1) 50%,rgba(23,24,21,.88) 100%)}
.p-hero .wrap{position:relative;z-index:1;width:100%;padding-bottom:clamp(28px,5vw,64px)}
.p-hero h1{text-shadow:0 2px 30px rgba(0,0,0,.35)}
.p-hero .meta{display:flex;flex-wrap:wrap;gap:8px 22px;font-size:.9375rem;color:var(--bone);margin:var(--sp-3) 0 0}
.p-hero .caption{position:absolute;z-index:1;right:var(--gutter);top:16px;font-size:var(--fs-micro);letter-spacing:.12em;text-transform:uppercase;background:rgba(23,24,21,.72);padding:6px 10px;color:var(--mist)}
@media (max-width:640px){.p-hero{min-height:72vh;min-height:72svh}.p-hero img{object-position:var(--crop-m,47% 50%)}}
.crumb{display:flex;flex-wrap:wrap;gap:4px 10px;align-items:center;font-size:var(--fs-small);color:var(--mist);margin-bottom:var(--sp-2)}
.crumb a{min-height:var(--target);display:inline-flex;align-items:center;color:var(--bone)}
.rule-top{padding-top:0}
.rule-top .wrap{border-top:1px solid var(--rule-ink);padding-top:var(--band)}
.related{margin-top:var(--sp-7)}
.section-head + .related{margin-top:0}
.related ul{list-style:none;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));border-top:1px solid var(--rule-ink)}
.related a{display:flex;flex-direction:column;gap:2px;padding:14px 16px 14px 0;min-height:var(--target-lg);border-bottom:1px solid var(--rule-ink);text-decoration:none}
.related a b{font-family:var(--display);font-size:1.0625rem;letter-spacing:-.01em}
.related a span{font-size:var(--fs-label);color:var(--ink-3)}
.related a:hover b{text-decoration:underline}
@media (max-width:760px){.related ul{grid-template-columns:1fr}}

/* CTA band */
.cta{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:var(--sp-5) var(--sp-7);align-items:end}
.cta h2{max-width:16ch}
.cta .lede{margin:var(--sp-4) 0 0}
@media (max-width:760px){.cta{grid-template-columns:1fr}}

/* ================= 14. ENQUIRY ================= */
.inq{border-top:0;padding-top:clamp(28px,6vw,96px)}
.inq-grid{display:grid;grid-template-columns:minmax(0,4fr) minmax(0,7fr);gap:var(--sp-6) clamp(32px,6vw,96px);align-items:start}
.inq-intro{position:sticky;top:calc(var(--mast-h) + 24px)}
.inq-intro h1{font-size:clamp(2.125rem,1rem + 2.4vw,3.5rem);margin:0 0 var(--sp-4)}
.inq-intro .lede{max-width:32ch}
@media (max-width:900px){.inq-grid{grid-template-columns:1fr;row-gap:var(--sp-4)}.inq-intro{position:static}.inq-intro .lede{margin-bottom:0}.inq-intro .kicker{display:none}}
.proto-note{font-size:var(--fs-small);color:var(--ink-2);max-width:56ch;padding:10px 12px;border-left:3px solid var(--efg);background:rgba(109,117,77,.1);margin:0}
.form{max-width:760px}
.form-req{font-size:var(--fs-small);color:var(--ink-3);margin:0 0 var(--sp-4)}
.form-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--sp-5) var(--sp-5)}
.form-grid .full{grid-column:1/-1}
@media (max-width:640px){.form-grid{grid-template-columns:1fr}}
.field{min-width:0}
fieldset.field{border:0;margin:0 0 var(--sp-6);padding:0}
.field label,.field legend{display:block;font-weight:700;font-size:.9375rem;margin-bottom:6px;color:var(--ink)}
.field legend{font-family:var(--display);font-size:1.25rem;letter-spacing:-.015em;margin-bottom:var(--sp-3);padding:0}
.field .opt{font-weight:400;color:var(--ink-3);font-family:var(--sans);font-size:.875rem;letter-spacing:0}
.field .hint{display:block;font-size:.8125rem;color:var(--ink-3);margin:-2px 0 6px}
.field input:not([type=radio]):not([type=color]),.field select,.field textarea{width:100%;min-height:var(--target-lg);padding:12px 12px;font:inherit;font-size:1rem;color:var(--ink);background:var(--field);border:1px solid var(--rule-ink-strong);border-radius:var(--radius)}
.field input[data-for] + .hint{margin-top:6px}
.field textarea{min-height:140px;resize:vertical}
.field input:focus,.field select:focus,.field textarea:focus{outline:var(--focus-width) solid var(--focus-on-light);outline-offset:1px;border-color:var(--ink)}
.field [aria-invalid="true"]:not([type=radio]){border:2px solid var(--error);background:var(--error-surface)}
.field .err{display:none;color:var(--error);font-size:var(--fs-small);font-weight:700;margin:6px 0 0}
.field .err::before{content:"";display:inline-block;width:14px;height:14px;margin-right:8px;vertical-align:-2px;background:var(--error);clip-path:polygon(50% 0,100% 100%,0 100%)}
.field.has-error .err{display:block}
/* Choice tiles: native radios, large targets, visible selected state */
.choices{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}
.choices.row{grid-template-columns:repeat(4,minmax(0,1fr))}
@media (max-width:760px){.choices{grid-template-columns:1fr}.choices.row{grid-template-columns:repeat(2,minmax(0,1fr))}}
.choice,.field label.choice{position:relative;display:flex;margin:0;font-weight:400;font-size:1rem;align-items:flex-start;gap:10px;min-height:var(--target-lg);padding:12px 14px;border:1px solid var(--rule-ink-strong);background:var(--field);cursor:pointer;color:var(--ink);transition:border-color var(--dur-fast),box-shadow var(--dur-fast),background-color var(--dur-fast)}
.choice:hover{border-color:var(--ink)}
.choice input{flex:none;width:18px;height:18px;margin:2px 0 0;accent-color:var(--ink)}
.choice input:focus-visible{outline:var(--focus-width) solid var(--focus-on-light);outline-offset:2px}
.choice > span{display:flex;flex-wrap:wrap;align-items:center;gap:2px 8px}
.choice b{font-size:.9375rem}
.choice small{flex-basis:100%;font-size:.8125rem;color:var(--ink-3)}
.choice:has(input:checked),.choice.is-checked{border-color:var(--ink);background:var(--accent-surface);box-shadow:inset 0 0 0 1px var(--ink)}
.choice[data-sector]:has(input:checked){box-shadow:inset 0 0 0 1px var(--ink),inset 0 -3px 0 var(--accent)}
.choice-field.has-error .choice{border-color:var(--error)}
.form-actions{margin-top:var(--sp-6);padding-top:var(--sp-5);border-top:1px solid var(--rule-ink)}
.err-summary{border:2px solid var(--error);background:var(--error-surface);padding:18px 20px;margin:0 0 var(--sp-6);max-width:760px;color:var(--ink)}
.err-summary h2{font-size:1.25rem;letter-spacing:-.01em;margin:0 0 6px}
.err-summary ul{margin:0;padding-left:20px}
.err-summary a{color:var(--error);font-weight:700;display:inline-flex;align-items:center;min-height:var(--target)}
.preview{border:1px solid var(--ink);background:var(--field);max-width:760px}
.preview-head{background:var(--ink);color:var(--bone);padding:16px 20px;display:flex;flex-wrap:wrap;gap:8px 16px;align-items:center;justify-content:space-between}
.preview-head h2{font-size:1.375rem;letter-spacing:-.01em}
.preview .facts{grid-template-columns:minmax(0,13rem) minmax(0,1fr)}
.preview .facts dd{white-space:pre-wrap;overflow-wrap:break-word}
@media (max-width:560px){
  .preview .facts{grid-template-columns:1fr}
  .preview .facts dt{padding-bottom:0;border-bottom:0}
  .preview .facts dd{padding-top:4px}
  .preview .facts > :nth-last-child(2){border-bottom:0}
}
.preview-foot{padding:16px 20px 20px;border-top:1px solid var(--rule-ink);display:grid;gap:var(--sp-4)}
/* Known context: one quiet line instead of two choosers, with a clear way to change it */
.context-bar{position:relative;display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:var(--sp-3) var(--sp-4);padding:14px 16px 14px 20px;margin:0 0 var(--sp-5);background:var(--paper);border:1px solid var(--rule-ink)}
.context-bar::before{content:"";position:absolute;left:0;top:0;bottom:0;width:4px;background:var(--accent)}
.ctx-text{display:flex;flex-wrap:wrap;align-items:baseline;gap:4px 14px;margin:0;min-width:0}
.ctx-text .label{flex-basis:100%;color:var(--ink-3)}
.ctx-text b{font-family:var(--display);font-size:1.125rem;letter-spacing:-.015em}
.ctx-sector{display:inline-flex;align-items:center;gap:8px;font-size:var(--fs-small);color:var(--ink-2)}
.ctx-sector .mk{width:10px;height:10px}
.ctx-sector .mk:not(.triangle):not(.square):not(.diamond){display:none}
.btn.ctx-change{min-width:var(--target);padding:8px 16px}
@media (max-width:560px){.btn.ctx-change{min-height:var(--target)}}
.choosers:not([hidden]){animation:reveal var(--dur) var(--ease) both}
/* Optional details: one disclosure row, opened on demand */
.more{border-top:1px solid var(--rule-ink);border-bottom:1px solid var(--rule-ink)}
.more-btn{display:none;width:100%;align-items:center;gap:12px;min-height:var(--target-lg);padding:10px 0;background:none;border:0;color:var(--ink);font:inherit;font-size:.9375rem;font-weight:700;text-align:left;cursor:pointer}
.js .more-btn{display:flex}
.more-btn .opt{font-weight:400;color:var(--ink-3);font-size:.875rem}
.more-btn:hover #more-label{text-decoration:underline;text-underline-offset:4px}
.more-ico{position:relative;width:14px;height:14px;flex:none}
.more-ico::before,.more-ico::after{content:"";position:absolute;left:0;right:0;top:50%;border-top:2px solid currentColor;transform:translateY(-50%);transition:transform var(--dur-fast) var(--ease)}
.more-ico::after{transform:translateY(-50%) rotate(90deg)}
.more-btn[aria-expanded="true"] .more-ico::after{transform:translateY(-50%) rotate(0)}
.more-fields{padding:var(--sp-2) 0 var(--sp-5)}
html:not(.js) .more-fields{padding-top:var(--sp-5)}
.more-fields:not([hidden]){animation:reveal var(--dur) var(--ease) both}
@keyframes reveal{from{opacity:0;transform:translateY(-4px)}to{opacity:1;transform:none}}
.send-note{margin:var(--sp-3) 0 0;font-size:.8125rem;color:var(--ink-3);max-width:56ch}
@media (max-width:640px){.field textarea{min-height:120px}}

/* ================= 15. CAMPAIGN SAMPLE ================= */
.h1-compact{font-size:var(--fs-h1-compact)}

/* ================= 16. STATES SHEET ================= */
.sheet{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,300px),1fr));gap:var(--sp-4)}
.cell{border:1px solid var(--rule-ink);background:var(--paper);color:var(--ink);padding:18px;display:flex;flex-direction:column;align-items:flex-start;gap:var(--sp-3)}
.cell > *{max-width:100%}
.cell > .kicker{margin:0}
.cell .field,.cell .missing,.cell .facts,.cell .choices{width:100%}
.cell .choices{grid-template-columns:1fr}

/* ================= 17. FOOTER ================= */
.site-foot{border-top:1px solid var(--rule);padding:0 0 var(--sp-6);background:var(--night)}
.foot-grid{display:grid;grid-template-columns:auto 1fr;gap:var(--sp-5) var(--sp-7);align-items:start}
.brand-foot{margin:0}
.brand-foot img{height:var(--brand-foot-h)}
.foot-body{display:grid;gap:var(--sp-5);padding-top:var(--sp-6)}
.site-foot nav ul{list-style:none;display:flex;flex-wrap:wrap;gap:0 4px}
.site-foot nav a{display:inline-flex;min-height:var(--target);align-items:center;padding:0 10px;color:var(--mist);font-size:var(--fs-small)}
.site-foot nav a:hover{color:var(--bone)}
.foot-note{color:var(--dim);font-size:.8125rem;margin:0;max-width:72ch}
@media (max-width:640px){.foot-grid{grid-template-columns:1fr}.foot-body{padding-top:0}.site-foot nav a{padding:0 12px 0 0}}

/* ================= 18. SHORT LANDSCAPE ================= */
@media (max-height:520px) and (orientation:landscape){
  h1{font-size:min(var(--fs-display),13vh)}
  .s-hero{padding:var(--sp-5) 0 var(--sp-6)}
  .hero-copy h1{margin-bottom:var(--sp-3)}
  .hero-copy .lede{margin-bottom:var(--sp-4)}
  .w-hero{padding-top:var(--sp-5)}
  .w-hero h1{font-size:min(var(--fs-h1-compact),12vh)}
  .inq-intro h1,.h1-compact{font-size:min(var(--fs-h1-compact),12vh)}
  .inq{padding-top:var(--sp-5)}
  .a-media{min-height:0}
  .a-media img{object-position:40% 42%}
  .a-copy{padding-top:var(--sp-4);padding-bottom:var(--sp-4)}
  .a-copy .eyebrow{margin-bottom:var(--sp-2)}
  .a-copy h1{font-size:2rem;margin-bottom:var(--sp-3);max-width:none}
  .a-copy .lede{font-size:1rem;margin-bottom:var(--sp-4)}
  .a-feature{display:none}
  .p-hero{min-height:calc(100vh - 100px);min-height:calc(100svh - 100px)}
  .p-hero .wrap{padding-bottom:var(--sp-4)}
  .p-hero .crumb{margin-bottom:0}
  .inq-intro{position:static}
  .inq-intro h1{font-size:2rem}
  .inq-intro .kicker{display:none}
  .inq-intro .lede{font-size:1rem}
}
/* 038: intro beside the form only in a genuinely wide short landscape, such as a phone on its side, so the required
   inputs stay in the first screen. Narrow short viewports, including 400% browser zoom (about 320x295 CSS px), keep
   the stacked max-width:900px layout. */
@media (max-height:520px) and (orientation:landscape) and (min-width:700px){
  .inq-grid{grid-template-columns:minmax(0,5fr) minmax(0,7fr)}
}

/* ================= 19. PREFERENCES ================= */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none!important;transition:none!important;scroll-behavior:auto!important}
  .wcard.linked:hover .media img,.btn:hover .arrow,.textlink:hover .arrow{transform:none}
}
@media (forced-colors:active){
  .mk{forced-color-adjust:none}
  .btn,.chip,.choice,.hdr-cta{border:1px solid ButtonText}
  .chip[aria-current],.choice:has(input:checked){outline:2px solid Highlight}
}
@media print{.masthead,.menu-btn{display:none}.js .view{display:block}}

/* ================= 20. COMPARISON PAGE (internal) ================= */
.cmp-top{background:var(--night);color:var(--bone);border-bottom:1px solid var(--rule)}
.cmp-top .brand img{height:64px}
.cmp-top-row{display:flex;flex-wrap:wrap;align-items:center;gap:var(--sp-3) var(--sp-5);min-height:64px}
.cmp-flag{display:flex;flex-wrap:wrap;align-items:center;gap:6px 10px;margin:0;font-size:var(--fs-label);letter-spacing:.04em}
.cmp-flag b{font-size:var(--fs-micro);letter-spacing:var(--track-label);text-transform:uppercase}
.cmp-hero{position:relative;padding:clamp(40px,7vw,104px) 0 clamp(36px,5vw,72px)}
.cmp-hero::before{content:"";position:absolute;left:0;top:0;bottom:0;width:var(--accent-bar);background:var(--efg)}
.cmp-hero h1{font-size:var(--fs-h1-compact);margin:0 0 var(--sp-4)}
.cmp-hero h1 em{color:var(--efg-pale)}
.cmp-hero .lede{margin:0;max-width:46ch}
.cmp-cards{list-style:none;display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:clamp(14px,2vw,24px)}
.cmp-card{position:relative;display:flex;flex-direction:column;align-items:flex-start;gap:var(--sp-2);padding:var(--sp-5);background:var(--paper);border:1px solid var(--rule-ink)}
.cmp-card.is-current{border-color:var(--ink);box-shadow:inset 0 4px 0 var(--accent)}
.cmp-card h3{font-size:clamp(1.5rem,1.2rem + 1vw,2rem);letter-spacing:-.03em}
.cmp-card p{margin:0;font-size:var(--fs-small);color:var(--ink-2)}
.cmp-card .cmp-path{font-family:ui-monospace,Consolas,monospace;font-size:.8125rem;color:var(--ink-3)}
.cmp-card .btn{margin-top:auto}
.cmp-card p:last-of-type{margin-bottom:var(--sp-3)}
.cmp-note{margin:var(--sp-4) 0 0;font-size:.8125rem;color:var(--ink-3)}
.cmp-tasks{list-style:none;counter-reset:task;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:0 clamp(20px,3vw,40px);border-top:1px solid var(--rule-ink)}
.cmp-tasks li{counter-increment:task;display:flex;flex-direction:column;align-items:flex-start;gap:6px;padding:var(--sp-5) 0;border-bottom:1px solid var(--rule-ink)}
.cmp-tasks li::before{content:counter(task,decimal-leading-zero);font-family:var(--serif);font-size:.9375rem;color:var(--ink-2)}
.cmp-tasks p{margin:0;font-size:var(--fs-small)}
.cmp-tasks .cmp-expect{color:var(--ink-3);font-size:.8125rem;margin-bottom:auto}
.cmp-split{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:var(--sp-5) clamp(28px,5vw,80px);align-items:start}
.cmp-checks{list-style:none;border-top:1px solid rgba(31,33,29,.22)}
.cmp-checks li{border-bottom:1px solid rgba(31,33,29,.22)}
.cmp-checks label{display:flex;align-items:center;gap:14px;min-height:var(--target-lg);padding:8px 0;cursor:pointer;font-size:.9375rem}
.cmp-checks input{flex:none;width:20px;height:20px;margin:0;accent-color:var(--ink)}
.cmp-checks input:focus-visible{outline:var(--focus-width) solid var(--focus-on-light);outline-offset:3px}
@media (max-width:1040px){.cmp-cards{grid-template-columns:1fr 1fr}.cmp-card.is-current{order:-1}.cmp-tasks{grid-template-columns:1fr 1fr}}
@media (max-width:760px){.cmp-cards,.cmp-tasks{grid-template-columns:1fr}.cmp-card.is-current{grid-column:auto;order:-1}}
@media (max-width:900px){.cmp-split{grid-template-columns:1fr}}

/* ================= 040: project gallery (thumbnails load only when the project view is open) ================= */
.gal{list-style:none;display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:clamp(12px,1.6vw,20px)}
.gal-item{display:block;background:var(--bone-2)}
.gal-item img{width:100%;height:auto;aspect-ratio:16/9;object-fit:cover;transition:filter var(--dur-fast)}
.gal-item:hover img{filter:brightness(1.06)}
.gal-item:focus-visible{outline:var(--focus-width) solid var(--focus-on-light);outline-offset:3px}
.lightbox{width:96vw;max-width:min(1400px,96vw);max-height:94vh;padding:0;border:0;background:var(--night);color:var(--bone)}
.lightbox::backdrop{background:rgba(10,11,9,.86)}
.lb-fig{margin:0;display:flex;flex-direction:column}
.lb-img{width:100%;max-height:calc(94vh - 132px);object-fit:contain;background:#0d0e0c}
.lb-cap{padding:12px 16px 0;font-size:var(--fs-small);color:var(--mist)}
.lb-bar{display:flex;flex-wrap:wrap;align-items:center;gap:8px;padding:12px 16px 16px}
.lb-bar button{min-height:var(--target);padding:8px 16px;border:1px solid var(--rule-strong);background:transparent;color:var(--bone);font:inherit;font-size:var(--fs-small);cursor:pointer}
.lb-bar button:hover{border-color:var(--bone);background:var(--night-3)}
.lb-close{margin-left:auto}
.lb-pos{min-width:7em;text-align:center;font-size:var(--fs-small);color:var(--mist)}
@media (max-width:560px){.lightbox{width:100vw;max-width:100vw}.lb-close{margin-left:0}}
@media (prefers-reduced-motion:reduce){.gal-item img{transition:none}}
.gal-band .lede,.p-hero + .band .lede{text-wrap:pretty}

/* ================= 040 v2: Education archive school photographs (Ed's prior practice) ================= */
.school-grid{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:clamp(18px,2vw,28px);align-items:start}
.school{margin:0}
.school-lead{grid-column:span 4}
.school-mid{align-self:end}
.school-mid,.school-small,.school-text{grid-column:span 2}
.school img{width:100%;height:auto;background:var(--bone-2)}
.school figcaption,.school-text{display:flex;flex-direction:column;gap:2px;margin-top:10px;padding-top:8px;border-top:1px solid var(--ink);font-size:var(--fs-small);color:var(--ink-2)}
.school-text{margin-top:0}
.school figcaption b,.school-text b{font-family:var(--serif);font-weight:400;font-size:1.25rem;line-height:1.2;color:var(--ink)}
.school-lead figcaption b{font-size:1.75rem}
.school .cred{color:var(--ink)}
.school .snote{color:var(--ink-3)}
.school-note{margin:var(--sp-5) 0 0;max-width:70ch;font-size:var(--fs-small);color:var(--ink-2);text-wrap:pretty}
.school-grid .school-note{grid-column:span 2;align-self:end;margin:0;padding-top:8px;border-top:1px solid var(--rule,rgba(23,24,21,.2))}
.wlist.schools .media img{aspect-ratio:3/2;object-fit:cover}
.wlist.schools .state{letter-spacing:0}
@media (max-width:900px){.school-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.school-lead{grid-column:1/-1}.school-mid{align-self:start}.school-mid,.school-small,.school-text{grid-column:auto}.school-grid .school-note{grid-column:auto}}
@media (max-width:560px){.school-grid{grid-template-columns:1fr}}
.rec-name,.rec-kind,.rec-role,.rec-place,.wcard h3,.wcard .role,.wcard .place,.reg-gnote,#edu-lineage .section-head .lede{text-wrap:pretty}
.facts dd{text-wrap:balance}
/* v2: the breadcrumb sits higher without the eyebrow, so the shade starts earlier to keep it legible over light skies */
.p-hero::after{background:linear-gradient(180deg,rgba(23,24,21,.25) 0,rgba(23,24,21,0) 24%,rgba(23,24,21,.45) 48%,rgba(23,24,21,.9) 74%,rgba(23,24,21,.94) 100%)}