/* PILLAR site stylesheet, November 6, 2026 (the structure pass).
   One stylesheet for the whole site; notes.css adds the Notes index and the post. The rules come from the
   Brand Bible (section 9), Ashley Purser's Brand Guide and her October 2026 package, and the Nov 4 design record
   (source/docs/DESIGN.md): Pine, Tangerine, Matcha, white, and black; Syne caps for headers, Inter for reading,
   the italic serif as the accent (Cormorant Garamond, the Bible's web substitute for IvyMode, by Eddie's decision
   of November 6, 2026); the typed Tangerine period after a headline; the italic continuation in Matcha on Pine
   and Pine on Matcha and white; one filled Tangerine button per page, at the close; square corners, no shadows.
   The structure (November 6, afternoon): Ashley's pages are built from ruled cells and whole fields, so the site
   is too. Rules are visible (Pine at 18% on white), every section opens on one, content sits in ruled cells
   where it is a set of equal things (the clients, the service categories, the engagement shapes, the two ways to
   reach PILLAR), and the space between sections is generous while the space inside a cell is tight. */

/* ---------- Fonts, self-hosted, loaded once per page ---------- */
@font-face{font-family:'Inter';font-style:normal;font-weight:100 900;font-display:swap;src:url(/fonts/inter-latin.woff2) format('woff2')}
@font-face{font-family:'Inter';font-style:italic;font-weight:100 900;font-display:swap;src:url(/fonts/inter-italic-latin.woff2) format('woff2')}
@font-face{font-family:'Syne';font-style:normal;font-weight:400 800;font-display:swap;src:url(/fonts/syne-latin.woff2) format('woff2')}
@font-face{font-family:'Cormorant Garamond';font-style:italic;font-weight:500;font-display:swap;src:url(/fonts/cormorant-garamond-italic-500-latin.woff2) format('woff2')}

/* ---------- Tokens ---------- */
:root{
  --pine:#384948;--tang:#FB3B00;--matcha:#C6DA95;--white:#fff;
  --ink:#384948;--ink-2:#384948;
  --hair:rgba(56,73,72,.18);--hair-m:rgba(56,73,72,.3);
  --text-on-pine:#fff;--muted-on-pine:#C6DA95;--hair-on-pine:rgba(255,255,255,.22);--hair-footer:rgba(198,218,149,.22);
  --display:'Syne',sans-serif;--body:'Inter',system-ui,sans-serif;--italic:'Cormorant Garamond',Georgia,serif;
  --size-display:clamp(1.875rem,.9rem + 4.4vw,4.625rem);
  --size-headline:clamp(2.25rem,1.4rem + 2.9vw,4rem);
  --size-2:clamp(1.5rem,1.2rem + 1.2vw,2rem);
  --size-3:clamp(1.1875rem,1.05rem + .5vw,1.375rem);
  --size-section:clamp(1.75rem,1.15rem + 2.1vw,3rem);
  --size-deck:clamp(1.375rem,1.1rem + 1.1vw,1.875rem);
  --size-statement:clamp(1.375rem,1.1rem + 1vw,1.75rem);
  --size-lead:1.125rem;
  --size-body:1.0625rem;--size-small:.96875rem;--size-caps:.75rem;
  --gutter:2rem;--max:1180px;--measure:64ch;
  /* The scale: --space-row inside a cell or list, --space-block between a heading and what it heads, --space-group
     between two groups inside a section, --space-section around a section's rule, --space-field inside a colored field. */
  --space-hero-top:clamp(2.5rem,4.5vw,4rem);--space-hero-bottom:clamp(2rem,3.5vw,3rem);
  --space-section:clamp(2.5rem,4.5vw,4rem);--space-field:clamp(3rem,5vw,4.5rem);--space-group:clamp(2rem,3.5vw,3rem);--space-block:clamp(1.25rem,2.2vw,1.75rem);--space-row:1.25rem;
  --header-h:80px;
  --ease:cubic-bezier(.2,.7,.2,1);
}
@media (max-width:640px){
  :root{--gutter:1.25rem}
}

/* ---------- Base ---------- */
html{box-sizing:border-box;-webkit-text-size-adjust:100%;scroll-padding-top:calc(var(--header-h) + 1rem)}
*,*::before,*::after{box-sizing:inherit}
body{margin:0;background:var(--white);color:var(--ink);font-family:var(--body);font-size:var(--size-body);line-height:1.65;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;overflow-wrap:break-word}
main,article,aside,figcaption,figure,footer,header,nav,section{display:block}
img,svg,video{max-width:100%;height:auto;display:block}
figure{margin:0}
p{margin:0 0 1.1em}
p:last-child{margin-bottom:0}
p,li,blockquote,figcaption,dd{text-wrap:pretty}
h1,h2,h3,h4{margin:0;font-family:var(--display);font-weight:700;line-height:1.04;letter-spacing:.01em;text-wrap:balance}
h1{font-size:var(--size-headline);text-transform:uppercase;overflow-wrap:normal;-webkit-hyphens:none;hyphens:none}
h2{font-size:var(--size-2);line-height:1.1;text-transform:uppercase}
h3{font-size:var(--size-3);font-weight:600;line-height:1.2;letter-spacing:.005em}
h4{font-size:1.0625rem;font-weight:600;line-height:1.3}
a{color:inherit;text-decoration:none}
a,button,input,select,textarea,summary{touch-action:manipulation;-webkit-tap-highlight-color:rgba(251,59,0,.18)}
b,strong{font-weight:600}
hr{border:0;border-top:1px solid var(--hair);margin:var(--space-block) 0}
button{font:inherit;color:inherit}
ul,ol{margin:0 0 1.1em;padding-left:1.2em}
dl{margin:0}
::selection{background:var(--matcha);color:var(--pine)}
:focus-visible{outline:2px solid var(--tang);outline-offset:3px}
.sr-only{position:absolute !important;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
.skip-link{position:absolute;left:-9999px;top:1rem;z-index:30;padding:.9rem 1.2rem;background:var(--white);color:var(--pine);font-family:var(--display);font-weight:700;font-size:var(--size-caps);letter-spacing:.1em;text-transform:uppercase;outline:2px solid var(--tang);outline-offset:3px}
.skip-link:focus{left:1rem}

/* ---------- Text roles ---------- */
/* The continuation: a caps line hands off to the italic in sentence case at 1em. Tangerine on white, Matcha on Pine, Pine on Matcha. */
h1 em,h2 em,.display em{font-family:var(--italic);font-style:italic;font-weight:400;text-transform:none;letter-spacing:0;font-size:1em;color:inherit}
.hero--home h1 em{font-size:1.2em;line-height:1}
.on-pine h1 em,.on-pine h2 em{color:var(--matcha)}
.on-matcha h1 em,.on-matcha h2 em{color:var(--pine)}
/* The full stop: a round Tangerine dot on the baseline after a headline, never a typed period. */
.stop{color:var(--tang)}
.stop::after{content:"."}
em+.stop,.italic+.stop,.close-line .stop{font-family:var(--italic);font-style:italic;font-weight:400;text-transform:none;letter-spacing:0}
.hero--home h1 em+.stop{font-size:1.2em;line-height:1}
.deck{font-family:var(--italic);font-style:italic;font-weight:400;font-size:var(--size-deck);line-height:1.2;letter-spacing:0;color:var(--pine);max-width:40ch;text-wrap:balance}
.statement{font-family:var(--body);font-weight:400;font-size:var(--size-statement);line-height:1.4;letter-spacing:-.005em;max-width:36ch}
.lead{font-size:var(--size-lead);line-height:1.6;max-width:60ch}
.prose{max-width:var(--measure)}
.prose p,.prose li{font-size:var(--size-body);line-height:1.65}
.prose h2{margin:var(--space-block) 0 1rem}
.prose h3{margin:2rem 0 .75rem}
.prose h2:first-child,.prose h3:first-child{margin-top:0}
.prose ul,.prose ol{padding-left:1.25em}
.prose li{margin-bottom:.45em}
.small{font-size:var(--size-small);line-height:1.6}
.muted{color:var(--ink-2)}
.nowrap{white-space:nowrap}
.italic{font-family:var(--italic);font-style:italic;font-weight:400;letter-spacing:0}
.link{text-decoration:underline;text-decoration-color:var(--tang);text-decoration-thickness:1px;text-underline-offset:3px;transition:text-decoration-thickness .15s ease}
.link:hover{text-decoration-thickness:2px}
.link--go{display:inline-block;padding:.2em 0;font-family:var(--body);font-weight:500;font-size:var(--size-body);line-height:1.4;text-decoration:underline;text-decoration-color:var(--tang);text-decoration-thickness:1px;text-underline-offset:4px;white-space:nowrap;transition:text-decoration-thickness .15s ease}
/* The arrow belongs to the index links alone (All the work, All notes, Everything PILLAR does); every other link is an underline and buttons carry their label. */
.link--index::after{content:" \2192";letter-spacing:0}
.link--go:hover{text-decoration-thickness:2px}
.prose a,.text a{text-decoration:underline;text-decoration-color:var(--tang);text-decoration-thickness:1px;text-underline-offset:3px}
.prose a:hover,.text a:hover{text-decoration-thickness:2px}
h1+.lead,h1+.deck+.lead,h2+.lead,h2+p,h2+.prose,h3+p{margin-top:1.25rem}
.deck+.lead{margin-top:1.4rem}

/* ---------- Buttons ---------- */
/* The filled Tangerine button carries black text, the one pair Ashley's table allows on Tangerine. One per page, at the close. */
.btn{display:inline-block;padding:1em 1.5em;border:1px solid var(--tang);background:var(--tang);color:#000;font-family:var(--display);font-weight:700;font-size:var(--size-caps);letter-spacing:.14em;line-height:1.1;text-transform:uppercase;text-decoration:none;cursor:pointer;-webkit-appearance:none;appearance:none;border-radius:0;transition:background-color .2s ease,color .2s ease,border-color .2s ease}
.btn:hover{background:var(--pine);border-color:var(--pine);color:var(--white)}
.btn--line{background:transparent;border-color:var(--pine);color:var(--pine)}
.btn--line:hover{background:var(--pine);border-color:var(--pine);color:var(--white)}
.btn:disabled{opacity:.55;cursor:default}
/* An action row under a lead: a line button with a short note beside it. The roles and the bench use it in the hero and again
   at the application section, so the way in is at hand before the close; the filled button stays the close's alone. */
.act{display:flex;flex-wrap:wrap;align-items:center;gap:.9rem 1.4rem;margin:1.8rem 0 0}
.act .small{margin:0;max-width:34ch}
.text .act .btn,.prose .act .btn{text-decoration:none}
.hero .act{margin-top:2rem}
.text .act{margin:1.5rem 0 1.9rem}
.on-pine .btn:hover{background:var(--white);border-color:var(--white);color:var(--pine)}
.on-pine .btn--line{border-color:var(--white);color:var(--white)}
.on-pine .btn--line:hover{background:var(--white);color:var(--pine)}

/* ---------- Layout: one 1180px column on every page, fields full bleed behind it ---------- */
.wrap{width:min(100% - 2 * var(--gutter),var(--max));margin-inline:auto}
.section{padding-block:var(--space-section)}
.section--flush-top{padding-top:0}
.section--flush-bottom{padding-bottom:0}
/* A ruled section opens with a hairline the width of the column. */
.section--ruled{padding-top:0}
/* The list, question list, definition list, or code lists that end a section hand their last rule to the ruled section that follows,
   so no two hairlines sit a gap apart. Only the last thing in the section qualifies: at the wrap, inside its last child, or one level deeper. */
.section:has(+ .section--ruled) .wrap>.index:last-child>li:last-child,
.section:has(+ .section--ruled) .wrap>.index:last-child>li:last-child>a,
.section:has(+ .section--ruled) .wrap>.qa:last-child>li:last-child,
.section:has(+ .section--ruled) .wrap>.dl:last-child>dt:last-of-type,
.section:has(+ .section--ruled) .wrap>.dl:last-child>dd:last-of-type,
.section:has(+ .section--ruled) .wrap>.codes-grid:last-child .codes>li:last-child,
.section:has(+ .section--ruled) .wrap>:last-child>.index:last-child>li:last-child,
.section:has(+ .section--ruled) .wrap>:last-child>.index:last-child>li:last-child>a,
.section:has(+ .section--ruled) .wrap>:last-child>.qa:last-child>li:last-child,
.section:has(+ .section--ruled) .wrap>:last-child>.dl:last-child>dt:last-of-type,
.section:has(+ .section--ruled) .wrap>:last-child>.dl:last-child>dd:last-of-type,
.section:has(+ .section--ruled) .wrap>:last-child>.codes-grid:last-child .codes>li:last-child,
.section:has(+ .section--ruled) .wrap>:last-child>:last-child>.index:last-child>li:last-child,
.section:has(+ .section--ruled) .wrap>:last-child>:last-child>.index:last-child>li:last-child>a,
.section:has(+ .section--ruled) .wrap>:last-child>:last-child>.qa:last-child>li:last-child,
.section:has(+ .section--ruled) .wrap>:last-child>:last-child>.dl:last-child>dt:last-of-type,
.section:has(+ .section--ruled) .wrap>:last-child>:last-child>.dl:last-child>dd:last-of-type,
.section:has(+ .section--ruled) .wrap>:last-child>:last-child>.codes-grid:last-child .codes>li:last-child{border-bottom:0}
@media (max-width:640px){.section:has(+ .section--ruled) .wrap>.codes-grid:last-child>div:not(:last-child) .codes>li:last-child,.section:has(+ .section--ruled) .wrap>:last-child>.codes-grid:last-child>div:not(:last-child) .codes>li:last-child,.section:has(+ .section--ruled) .wrap>:last-child>:last-child>.codes-grid:last-child>div:not(:last-child) .codes>li:last-child{border-bottom:1px solid var(--hair)}}
.section--ruled>.wrap{border-top:1px solid var(--hair);padding-top:var(--space-section)}
/* A ruled block (cells, or the contact doors) that ends a section is its own bottom rule, so the ruled section after it opens without one. */
.section:has(.wrap>.cells:last-child)+.section--ruled>.wrap,.section:has(.wrap>.doors:last-child)+.section--ruled>.wrap{border-top:0;padding-top:0}
/* A color field's edge is a rule already, so the ruled section after a band or the homepage hero opens without one. */
.band+.section--ruled>.wrap,.hero--home+.section--ruled>.wrap{border-top:0}
.section-h{margin-bottom:var(--space-block);font-size:var(--size-section)}
.section-h+.lead{margin:calc(-1 * var(--space-block) + .75rem) 0 var(--space-block);max-width:60ch}
.sub-h{margin:var(--space-group) 0 var(--space-block);font-size:var(--size-2);font-weight:700;line-height:1.1;letter-spacing:.01em;text-transform:uppercase}
/* Cells: a set of equal things in a ruled grid, as on Ashley's typography and color pages. The grid's background is
   the rule and the 1px gaps show it; each cell paints its field over it. The Services categories (titled paragraphs
   in two columns, Eddie, November 6, 2026) are cells. */
.cells{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:1px;background:var(--hair);border:1px solid var(--hair);list-style:none;margin:0;padding:0}
.cells>*{min-width:0;margin:0;padding:clamp(1.25rem,2.4vw,1.75rem) clamp(1.25rem,2.4vw,2rem);background:var(--white)}
.cells--3{grid-template-columns:repeat(3,minmax(0,1fr))}
.cells--4{grid-template-columns:repeat(4,minmax(0,1fr))}
.cells h3{margin:0;font-size:var(--size-3);font-weight:600;line-height:1.25;letter-spacing:.005em;text-transform:none}
.cells p{margin:.6rem 0 0;font-size:var(--size-body);line-height:1.6;max-width:46ch}
.cells p+p{margin-top:.8em}
.cells .cell-eg{font-size:var(--size-small)}
.index-row[id]{scroll-margin-top:calc(var(--header-h) + 1rem)}
.on-matcha .cells,.band--matcha .cells{background:var(--hair-m);border-color:var(--hair-m)}
.on-matcha .cells>*,.band--matcha .cells>*{background:var(--matcha)}
.on-pine .cells,.band--pine .cells{background:var(--hair-on-pine);border-color:var(--hair-on-pine)}
.on-pine .cells>*,.band--pine .cells>*{background:var(--pine)}
@media (max-width:900px){.cells--3,.cells--4{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:640px){.cells,.cells--3,.cells--4{grid-template-columns:1fr}.cells>*{padding:1.1rem 1.1rem 1.25rem}}
/* The work strip: the six clients whose stories are on the site, as one ruled row of links under the Work heading (not a roster; Eddie,
   November 6: only the names that sell PILLAR, and never a list that reads as exhaustive). Six equal cells, three on tablets, two on phones. */
.roster-strip{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:1px;margin:0 0 var(--space-group);padding:0;list-style:none;background:var(--hair);border-top:1px solid var(--hair);border-bottom:1px solid var(--hair)}
.roster-strip>li{min-width:0;margin:0;background:var(--white)}
.roster-strip a{display:flex;align-items:center;justify-content:center;min-height:3.5rem;height:100%;padding:.75rem 1rem;text-align:center;font-family:var(--display);font-weight:600;font-size:max(.75rem,var(--size-caps));letter-spacing:.14em;line-height:1.35;text-transform:uppercase;color:var(--pine);text-wrap:balance;text-decoration:underline;text-decoration-color:transparent;text-decoration-thickness:2px;text-underline-offset:.3em;transition:text-decoration-color .15s ease}
.roster-strip a:hover,.roster-strip a:focus-visible{text-decoration-color:var(--tang)}
.roster-strip a[aria-current="true"]{text-decoration-color:var(--tang)}
/* The stage under the roster (November 7, 2026): one plate with the six clients' work stacked in it, one showing at a time. The
   slides not showing start hidden so their pictures are not fetched with the page; the script unhides them once the page has
   loaded, at opacity 0, so they are ready before anyone hovers. The quote card and the portrait graphic sit whole on the Pine
   field rather than being cropped to the plate. */
.stage-plate{display:block}
.stage-slide{position:absolute;inset:0;opacity:0;transition:opacity .3s var(--ease)}
.stage-slide.is-on{opacity:1}
.stage-slide[hidden]{display:none}
.stage-slide picture{position:absolute;inset:0;display:block}
.stage-plate .stage-slide--contain img{object-fit:contain}
@media (prefers-reduced-motion:reduce){.stage-slide{transition:none}}
@media (max-width:900px){.roster-strip{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media (max-width:640px){.roster-strip{grid-template-columns:repeat(2,minmax(0,1fr))}.roster-strip a{min-height:3rem;padding:.6rem .75rem;font-size:.75rem;letter-spacing:.12em}}
.section-foot{display:flex;justify-content:flex-end;margin:var(--space-block) 0 0}
.on-pine{background:var(--pine);color:var(--text-on-pine)}
.on-pine h1,.on-pine h2,.on-pine h3,.on-pine .statement{color:var(--white)}
.on-pine .deck{color:var(--matcha)}
.on-pine .muted{color:var(--muted-on-pine)}
.on-pine .link,.on-pine .prose a,.on-pine .text a,.on-pine .link--go{color:var(--white);text-decoration-color:var(--matcha)}
.on-pine .section--ruled>.wrap,.on-pine hr{border-color:var(--hair-on-pine)}
.on-pine .stop{color:var(--tang)}
.on-matcha{background:var(--matcha);color:var(--pine)}
.on-matcha .section--ruled>.wrap,.on-matcha hr,.on-matcha .index,.on-matcha .index-row,.on-matcha .qa,.on-matcha .qa-row,.on-matcha .facts{border-color:var(--hair-m)}
.on-matcha .muted{color:var(--pine)}
.grid{display:grid;gap:var(--space-block) var(--gutter)}
.grid--2{grid-template-columns:repeat(2,minmax(0,1fr))}
.grid--3{grid-template-columns:repeat(3,minmax(0,1fr))}
.split{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:var(--space-block) clamp(2rem,5vw,5rem);align-items:start}
.split--even{grid-template-columns:repeat(2,minmax(0,1fr))}
.split--wide-left{grid-template-columns:minmax(0,7fr) minmax(0,5fr)}
.split--center{align-items:center}
.split--end{align-items:end}
.stack>*+*{margin-top:var(--space-block)}
@media (min-width:901px){
  .split>.first-wide{order:-1}
}
@media (max-width:900px){
  .grid--3{grid-template-columns:repeat(2,minmax(0,1fr))}
  .split,.split--even,.split--wide-left{grid-template-columns:1fr}
}
@media (max-width:640px){
  .grid--2,.grid--3{grid-template-columns:1fr}
}

/* ---------- Bands: at most one static colored field per page, besides the header, the close, and the footer (or the shifting fields below instead) ---------- */
.band{padding-block:var(--space-field)}
.band--matcha{background:var(--matcha);color:var(--pine)}
.band--matcha .index,.band--matcha .index-row,.band--matcha .qa,.band--matcha .qa-row,.band--matcha .facts,.band--matcha .quote-grid .quote,.band--matcha .items .item,.band--matcha .section-foot{border-color:var(--hair-m)}
.band--matcha .muted,.band--matcha .cap p,.band--matcha .quote figcaption span{color:var(--pine)}
.band--matcha h1 em,.band--matcha h2 em{color:var(--pine)}
.band--matcha .deck{color:var(--pine)}
.band--pine{background:var(--pine);color:var(--text-on-pine)}
.band--pine h1,.band--pine h2,.band--pine h3{color:var(--white)}
.band--pine h1 em,.band--pine h2 em{color:var(--matcha)}
.band--pine .muted,.band--pine .items .item p,.band--pine .index-row p{color:var(--muted-on-pine)}
.band--pine .index,.band--pine .index-row,.band--pine .items .item,.band--pine .qa,.band--pine .qa-row{border-color:var(--hair-on-pine)}
.band--pine .link,.band--pine .text a,.band--pine .items a{color:var(--white);text-decoration-color:var(--matcha)}
.band--pine .link--go{color:var(--white);text-decoration-color:var(--matcha)}
.band--pine .btn--line{border-color:var(--white);color:var(--white)}
.band--pine .btn--line:hover{background:var(--white);color:var(--pine)}
.band--pine :focus-visible{outline-color:var(--white)}
/* On Matcha the ring is Pine (6.26:1); Tangerine on Matcha is 2.42:1, under the 3:1 a focus indicator needs (November 7, 2026). */
.band--matcha :focus-visible,.close :focus-visible,.on-matcha :focus-visible{outline-color:var(--pine)}

/* Band headings run at the pitch size. */
.band--matcha h2,.band--pine h2{font-size:var(--size-section)}

/* ---------- Shifting fields (November 6, 2026): a page whose ground changes color as the reader scrolls ----------
   A section carries data-field="white", "pine", or "matcha". With script, <html> takes the field of the section a fifth of the way
   down the viewport (a fifth up from the bottom while scrolling back up), the page's ground and ink cross-fade over .8s, and the
   sections themselves are transparent. Without script each section paints its own field with a hard edge. Services runs it; a page
   uses either this or the single static band, never both. */
:root{--page-bg:var(--white);--page-ink:var(--ink);--page-hair:var(--hair);--page-em:var(--pine);--page-muted:var(--ink-2);--page-ul:var(--tang)}
html[data-field=pine],html:not(.fields) [data-field=pine]{--page-bg:var(--pine);--page-ink:var(--white);--page-hair:var(--hair-on-pine);--page-em:var(--matcha);--page-muted:var(--muted-on-pine);--page-ul:var(--matcha)}
html[data-field=matcha],html:not(.fields) [data-field=matcha]{--page-bg:var(--matcha);--page-ink:var(--pine);--page-hair:var(--hair-m);--page-em:var(--pine);--page-muted:var(--pine);--page-ul:var(--tang)}
html:not(.fields) [data-field]{background:var(--page-bg);color:var(--page-ink)}
html.fields body{background:var(--page-bg);color:var(--page-ink)}
html.fields [data-field]{background:transparent;color:inherit}
[data-field] .deck,[data-field] h1 em,[data-field] h2 em{color:var(--page-em)}
[data-field] .muted{color:var(--page-muted)}
[data-field] .section--ruled>.wrap{border-color:var(--page-hair)}
[data-field] .cells{background:var(--page-hair);border-color:var(--page-hair)}
[data-field] .cells>*{background:var(--page-bg)}
[data-field] .qa,[data-field] .qa-row{border-color:var(--page-hair)}
[data-field] .link,[data-field] .link--go,[data-field] .prose a,[data-field] .text a{color:inherit;text-decoration-color:var(--page-ul)}
html[data-field=pine] [data-field] :focus-visible{outline-color:var(--white)}
html[data-field=matcha] [data-field] :focus-visible,html:not(.fields) [data-field=matcha] :focus-visible{outline-color:var(--pine)}
.section--quotes{padding-block:var(--space-field)}
html.fields body,html.fields [data-field] .cells,html.fields [data-field] .cells>*,html.fields [data-field] .section--ruled>.wrap,html.fields [data-field] .qa,html.fields [data-field] .qa-row,html.fields [data-field] .deck,html.fields [data-field] h1 em,html.fields [data-field] h2 em,html.fields [data-field] .muted,html.fields [data-field] .link,html.fields [data-field] .link--go{transition:background-color .8s ease,color .8s ease,border-color .8s ease,text-decoration-color .8s ease}
@media (prefers-reduced-motion:reduce){html.fields body,html.fields [data-field] *{transition:none}}
/* The Differentiator band: a Pine field with the column mark large in Tangerine, cut by the band's left and bottom edges, as on the brand guide's own pages. */
.band--mark{position:relative;overflow:hidden}
.band--mark .wrap{position:relative;display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:var(--space-block) var(--gutter);align-items:start}
.band--mark .text{grid-column:2}
.band-mark{position:absolute;left:min(-4vw,-3rem);bottom:0;width:clamp(340px,38vw,560px);height:auto;color:var(--tang);pointer-events:none;transform:translateY(26%)}
.band--mark h2{max-width:24ch}
.band--mark .lead{margin-top:1.25rem;max-width:52ch}
.band--mark .lead+.lead{margin-top:.9rem}
.words{list-style:none;margin:var(--space-group) 0 0;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:0 var(--gutter)}
.words li{padding:.7rem 0;border-bottom:1px solid var(--hair-on-pine);font-family:var(--display);font-weight:700;font-size:clamp(.9375rem,.85rem + .45vw,1.125rem);letter-spacing:.06em;line-height:1.3;text-transform:uppercase;color:var(--matcha)}
@media (max-width:900px){
  .band--mark .wrap{grid-template-columns:1fr;min-height:0;padding-bottom:clamp(9rem,46vw,22rem)}
  .band--mark .text{grid-column:1}
  .band-mark{left:-16vw;width:clamp(280px,74vw,560px);transform:translateY(40%)}
}
@media (max-width:640px){.words{grid-template-columns:repeat(2,minmax(0,1fr))}}

/* ---------- Page hero ---------- */
/* Interior pages open on white: the H1 and its dot, the italic deck .9rem below, the intro 1.4rem below that. */
.hero{position:relative;padding:var(--space-hero-top) 0 var(--space-hero-bottom)}
.hero .wrap{position:relative}
.hero h1{max-width:16ch;font-size:min(var(--size-headline),calc((100vw - 2 * var(--gutter)) / 7.2))}
.hero .deck{margin-top:.9rem}
.hero .lead{margin-top:1.4rem}
.hero .links{margin-top:1.75rem}
/* The column mark stands whole behind the words on white, Matcha at 30%, never cut and never boxed. */
.hero--mark .wrap{min-height:clamp(180px,20vw,260px)}
.hero-mark{position:absolute;right:0;top:0;width:clamp(180px,20vw,260px);height:auto;color:var(--matcha);pointer-events:none}
.hero--mark .wrap>:not(.hero-mark){position:relative}
.hero--mark h1,.hero--mark .deck,.hero--mark .lead{max-width:min(60ch,calc(100% - clamp(180px,20vw,260px) - 2rem))}
.hero--mark h1{max-width:min(16ch,calc(100% - clamp(180px,20vw,260px) - 2rem))}
/* The homepage is the anthem: a Pine field continues the header, the headline runs at display scale, and the full Matcha
   column rises behind it and is cut by the field's bottom edge, the one seam in the system. */
/* The fields are the flat brand colors, so the header and the hero are one Pine and the close is one Matcha. Ashley's noise-gradient textures (assets/textures) were tried here and retired November 7, 2026: their slow color drift read as a seam against the flat header. */
.hero--home{position:relative;background:var(--pine);color:var(--white);padding:var(--space-hero-top) 0 0;overflow:hidden}
.hero--home>.wrap{position:relative;z-index:1}
.hero--home h1 em{color:var(--matcha)}
.hero--home .wrap{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:end;gap:0 .5rem;min-height:clamp(300px,34vw,460px)}
.hero--home .hero-text{align-self:end;padding-bottom:clamp(2.5rem,5vw,4rem)}
.hero--home h1{max-width:none;font-size:min(var(--size-display),calc((100vw - 2 * var(--gutter)) / 10.1));line-height:1.04;color:var(--white)}
.hero--home h1 em{white-space:nowrap}
.hero--home .hero-line{margin:1.25rem 0 0;font-family:var(--italic);font-style:italic;font-weight:400;font-size:var(--size-deck);line-height:1.25;letter-spacing:0;color:var(--matcha);max-width:44ch;text-wrap:balance}
.hero--home .hero-column{display:block;align-self:end;width:clamp(180px,20vw,280px);height:auto;color:var(--matcha);opacity:1;margin-right:0;transform:translateY(18%)}
@media (max-width:900px){
  .hero--mark .wrap{min-height:clamp(140px,28vw,220px)}
  .hero-mark{width:clamp(140px,28vw,220px)}
  .hero--mark h1,.hero--mark .deck,.hero--mark .lead{max-width:calc(100% - clamp(140px,28vw,220px) - 1.25rem)}
  .hero--mark h1{max-width:min(16ch,calc(100% - clamp(140px,28vw,220px) - 1.25rem))}
  .hero--home .wrap{grid-template-columns:1fr;min-height:0}
  .hero--home .hero-column{width:clamp(160px,34vw,260px);justify-self:end;margin:0;transform:translateY(22%)}
}
@media (max-width:640px){
  .hero-mark{display:none}
  .hero--mark .wrap{min-height:0}
  .hero--mark h1,.hero--mark .deck,.hero--mark .lead{max-width:none}
  .hero--mark h1{max-width:16ch}
  .hero--home .hero-text{padding-bottom:1rem}
  .hero--home .hero-line{margin-top:.9rem}
  .hero--home .hero-column{width:40vw;transform:translateY(26%)}
}

/* ---------- Section heads ---------- */
.section-head{display:flex;justify-content:space-between;align-items:baseline;gap:1rem 2rem;margin-bottom:var(--space-block)}
.section-head h2{margin:0;font-size:var(--size-section)}
.section-head .link--go{flex:none}
@media (max-width:640px){
  .section-head{flex-direction:column;align-items:flex-start;gap:.75rem}
}

/* ---------- Index rows: a name and what it covers, between hairlines ---------- */
.index{list-style:none;margin:0;padding:0;border-top:1px solid var(--hair)}
.index-row{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:.5rem var(--gutter);padding:var(--space-row) 0;border-bottom:1px solid var(--hair);align-items:baseline}
.index-row h2,.index-row h3{margin:0;font-size:var(--size-3);font-weight:600;line-height:1.25;letter-spacing:.005em;text-transform:none}
.index-row p{margin:0;font-size:var(--size-small);line-height:1.6;color:var(--ink-2)}
.index-row p+p{margin-top:.6rem}
a.index-row h2,a.index-row h3{text-decoration:underline;text-decoration-color:var(--hair);text-decoration-thickness:2px;text-underline-offset:.2em;transition:text-decoration-color .15s ease}
a.index-row:hover h2,a.index-row:hover h3,a.index-row:focus-visible h2,a.index-row:focus-visible h3{text-decoration-color:var(--tang)}
.index--words{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0 var(--gutter);border-top:0}
.index--words li{padding:.6rem 0;border-bottom:1px solid var(--hair);font-size:var(--size-body);line-height:1.4}
.index--one{grid-template-columns:1fr}
.index--read .index-row{align-items:start}
.index--read .index-row p{font-size:var(--size-body);line-height:1.65;color:var(--ink);max-width:60ch}
.index--live{border-top:2px solid var(--tang)}
@media (max-width:900px){
  .index-row{grid-template-columns:1fr;gap:.35rem}
}
@media (max-width:640px){
  .index--words{grid-template-columns:1fr}
}

/* ---------- Questions and answers ---------- */
.qa{list-style:none;margin:0;padding:0;border-top:1px solid var(--hair)}
.qa-row{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:.5rem var(--gutter);padding:var(--space-row) 0;border-bottom:1px solid var(--hair);align-items:start}
.qa-row h3{margin:0;font-size:var(--size-3);font-weight:600;line-height:1.25;text-transform:none}
.qa-row p{margin:0;font-size:var(--size-small);line-height:1.6}
@media (max-width:760px){
  .qa-row{grid-template-columns:1fr}
}

/* ---------- Quotes ---------- */
.quote{margin:0;padding:0}
.quote blockquote{margin:0}
.quote p{font-family:var(--italic);font-style:italic;font-weight:400;font-size:clamp(1.375rem,1.1rem + 1.1vw,2rem);line-height:1.25;letter-spacing:0;margin:0;text-wrap:pretty}
.quote figcaption{margin-top:1.25rem;font-size:.875rem;line-height:1.5}
.quote figcaption b{display:block;font-weight:600}
.quote figcaption span{display:block;font-family:var(--display);font-weight:700;font-size:var(--size-caps);letter-spacing:.16em;text-transform:uppercase;margin-top:.3rem}
.quote-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--space-block) clamp(2rem,5vw,5rem)}
.quote-grid .quote:first-child{grid-column:1 / -1}
.quote-grid .quote:first-child p{font-size:clamp(1.75rem,1.3rem + 1.8vw,3rem);line-height:1.15;max-width:19em}
.quote figcaption span{color:inherit}
@media (max-width:900px){.quote-grid{grid-template-columns:1fr}.quote-grid .quote:first-child{max-width:none}}

/* ---------- Facts and the ledger ---------- */
.facts{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:var(--space-row) var(--gutter);margin:0;padding-top:var(--space-row);border-top:1px solid var(--hair)}
.facts div{min-width:0}
.facts dd{margin:0;font-family:var(--italic);font-style:italic;font-weight:400;font-size:clamp(2.5rem,1.6rem + 3vw,4rem);line-height:1;letter-spacing:0;font-variant-numeric:tabular-nums}
.facts dt{margin:.6rem 0 0;font-size:var(--size-small);line-height:1.5}
.facts--big{grid-template-columns:repeat(5,minmax(0,1fr))}
/* The Co-Op ledger: one square per cent of a collected dollar, with its key beside it. */
.ledger{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:var(--space-block) clamp(2rem,5vw,5rem);align-items:center;margin-top:var(--space-row);padding-top:var(--space-row);border-top:1px solid var(--hair-m)}
.ledger-figure{min-width:0}
.waffle{display:block;width:100%;max-width:440px;height:auto}
.w-labor{fill:var(--pine)}
.w-over{fill:url(#co-hatch)}
.w-comm{fill:var(--tang)}
.w-tax{fill:#000}
.w-own{fill:var(--white)}
.ledger-key{margin:0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:1.25rem var(--gutter)}
.ledger-key div{min-width:0;padding-top:.9rem;border-top:1px solid var(--hair-m)}
.ledger-key dt{margin:0;display:flex;align-items:center;gap:.6rem;font-family:var(--italic);font-style:italic;font-weight:400;font-size:clamp(1.75rem,1.3rem + 1.6vw,2.5rem);line-height:1;letter-spacing:0;font-variant-numeric:tabular-nums}
.ledger-key dd{margin:.5rem 0 0;font-size:var(--size-small);line-height:1.5}
.chip{display:inline-block;width:.8em;height:.8em;flex:none}
.chip.w-labor{background:var(--pine)}
.chip.w-over{background:repeating-linear-gradient(45deg,var(--pine) 0 2px,var(--matcha) 2px 5px)}
.chip.w-comm{background:var(--tang)}
.chip.w-tax{background:#000}
.chip.w-own{background:var(--white)}
@media (max-width:900px){.ledger{grid-template-columns:1fr}.waffle{max-width:360px}}
@media (max-width:480px){.ledger-key{grid-template-columns:1fr}}
@media (max-width:900px){.facts--big{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media (max-width:560px){.facts--big{grid-template-columns:repeat(2,minmax(0,1fr))}}

/* ---------- Pictures ---------- */
.plate{display:block;position:relative;overflow:hidden;background:var(--pine)}
.plate img{width:100%;height:auto;display:block;transition:transform .8s var(--ease)}
a.plate:hover img,a.plate:focus-visible img{transform:scale(1.025)}
.plate--16x10{aspect-ratio:16 / 10}
.plate--3x2{aspect-ratio:3 / 2}
.plate--4x5{aspect-ratio:4 / 5}
.plate--16x10 img,.plate--3x2 img,.plate--4x5 img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
/* The caption under a plate: the client in the label style, the italic descriptor, the role, and the way to the story. */
.cap{display:flex;justify-content:space-between;align-items:baseline;gap:.75rem 2rem;margin-top:1rem}
.cap-text{min-width:0}
.cap h2,.cap h3{margin:0;font-size:var(--size-3);font-weight:600;line-height:1.25;letter-spacing:.005em;text-transform:none}
.cap .italic{display:block;margin-top:.2rem;font-size:1.125rem;line-height:1.3}
.cap p{margin:.35rem 0 0;font-size:var(--size-small);line-height:1.5;color:var(--ink-2)}
.cap .link--go{flex:none}
@media (max-width:640px){
  .cap{flex-direction:column;align-items:flex-start;gap:.6rem}
}

/* The portrait (November 6, 2026): the photograph itself, black and white, waist up, in a 3:4 plate on a hairline like every other cell.
   No column drawn behind the person, no cutout, no offset: those devices were made for the old site, and this one carries the mark elsewhere. */
.portrait{position:relative;margin:0;padding:0;border:1px solid var(--hair)}
.portrait img{display:block;width:100%;height:auto;aspect-ratio:3 / 4;object-fit:cover;background:var(--hair)}
.band--matcha .portrait{border-color:var(--hair-m)}
.person{margin-top:var(--space-row)}
/* The accent rule (November 6, 2026): a short Tangerine rule opens a person's name, on the homepage and the People page.
   It is the splash of color beside the names; Tangerine type on white, Pine, or Matcha is on the Brand Guide's never table (pages 11 and 12). */
.accent-rule::before,.person-name::before,.person-chapter .text h2::before{content:"";display:block;width:3rem;height:3px;background:var(--tang);margin-bottom:.9rem}
.person-chapter .text h2::before{margin-bottom:1.1rem}
.person-name{font-family:var(--display);font-weight:700;font-size:var(--size-3);line-height:1.2;letter-spacing:.005em;margin:0;text-transform:uppercase}
.person .person-role{margin-top:.35rem}
.person-role{display:block;font-family:var(--display);font-weight:600;font-size:var(--size-caps);letter-spacing:.16em;text-transform:uppercase;color:var(--ink-2);margin:.35rem 0 0}
.person p{margin:.75rem 0 0}
.links{display:flex;flex-wrap:wrap;gap:.75rem 1.75rem;margin:1.25rem 0 0}
@media (max-width:900px){
  .portrait{max-width:400px}
}

/* ---------- Work: the plates, large and still ---------- */
.work-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--space-group) var(--gutter)}
.work-grid>.work-item--wide{grid-column:1 / -1}
/* A portrait plate (the Center for Public Justice graphic is 4:5) sits beside its caption, the caption set like every other, at the top. */
.work-item--split{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:var(--space-block) var(--gutter);align-items:start}
.work-item--split .cap{margin-top:0}
.cap--beside{flex-direction:column;align-items:flex-start;gap:1rem}
@media (max-width:760px){
  .work-grid{grid-template-columns:1fr;gap:2.5rem}
  .work-item--split{grid-template-columns:1fr}
}

/* ---------- Note cards ---------- */
.note-cards{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--space-block) var(--gutter)}
.note-card{min-width:0}
.note-card .plate{margin-bottom:1rem}
.note-card time{display:block;font-family:var(--italic);font-style:italic;font-weight:400;font-size:1.0625rem;line-height:1.3;color:var(--ink-2);margin-bottom:.45rem}
.note-card h3{margin:0;font-size:var(--size-3);font-weight:600;line-height:1.25;text-transform:none}
.note-card h3 a:hover{text-decoration:underline;text-decoration-color:var(--tang);text-decoration-thickness:2px;text-underline-offset:.18em}
.note-card p{margin:.6rem 0 0;font-size:var(--size-small);line-height:1.6;color:var(--ink-2)}
@media (max-width:900px){.note-cards{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:600px){.note-cards{grid-template-columns:1fr}}

/* ---------- The close: the Closing anchor, "PILLAR. Structured to serve the work.", and the one filled button ---------- */
/* The close: the Closing anchor on a Matcha field, the column mark in Pine cut by the field's right and bottom edges, the one filled button under the line. */
.close{position:relative;overflow:hidden;background:var(--matcha);color:var(--pine);padding:var(--space-field) 0}
.close>.close-in{position:relative;z-index:1}
.close-in{position:relative;display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:var(--space-block) var(--gutter);align-items:start}
.close-anchor{margin:0;grid-column:1}
.close-mark{position:absolute;right:min(-3vw,-2rem);bottom:0;width:clamp(240px,27vw,420px);height:auto;color:var(--pine);transform:translateY(32%);pointer-events:none}
.close .muted{color:var(--pine)}
.close .link{color:var(--pine)}
.close-anchor .wordmark{display:inline-block;vertical-align:baseline;width:clamp(180px,22vw,300px);height:auto;color:var(--pine)}
.close-line{display:block;margin-top:.5rem;font-family:var(--italic);font-style:italic;font-weight:400;font-size:clamp(1.5rem,1.1rem + 1.7vw,2.25rem);line-height:1.15;letter-spacing:0;color:var(--pine);text-transform:none}
.close-ctas{grid-column:1;display:flex;flex-direction:column;align-items:flex-start;gap:1.1rem;margin-top:.75rem}
.close-ctas p{margin:0;font-size:var(--size-body)}
.close-ctas .small{font-size:var(--size-small)}
@media (max-width:900px){
  .close-in{grid-template-columns:1fr}
  .close-ctas{justify-self:start}
  .close{padding-bottom:clamp(9rem,42vw,17rem)}
  .close-mark{right:-14vw;width:clamp(220px,58vw,420px);transform:translateY(38%)}
}

/* ---------- Header ---------- */
.site-header{position:sticky;top:0;z-index:10;background:var(--pine);color:var(--matcha);transition:transform .3s var(--ease)}
.site-header.is-hidden{transform:translateY(-100%)}
.site-header.is-open{transform:none}
.site-header-bar{position:relative;z-index:1;display:flex;align-items:center;gap:1rem;width:min(100% - 2 * var(--gutter),var(--max));margin-inline:auto;height:var(--header-h)}
.site-logo{flex:0 0 auto;display:block;line-height:0;margin-right:auto}
.site-logo img{display:block;height:40px;width:auto}
.site-nav ul{display:flex;gap:clamp(1rem,2.4vw,2.25rem);list-style:none;margin:0;padding:0}
.site-nav-link{display:inline-block;padding:.6rem 0;font-family:var(--display);font-weight:600;font-size:var(--size-caps);letter-spacing:.16em;line-height:1.2;text-transform:uppercase;color:var(--matcha);text-decoration:none;transition:color .15s ease}
.site-nav-link:hover{color:var(--white)}
.site-nav-link[aria-current="page"]{color:var(--white);text-decoration:underline;text-decoration-color:var(--tang);text-decoration-thickness:2px;text-underline-offset:.55em}
.site-actions{display:flex;align-items:center;gap:.75rem;margin-left:clamp(.75rem,2.4vw,2.25rem)}
.site-social{display:inline-flex;align-items:center;justify-content:center;width:36px;height:36px;color:var(--matcha);box-shadow:inset 0 0 0 1px var(--matcha);transition:color .15s ease,box-shadow .15s ease}
.site-social:hover{color:var(--white);box-shadow:inset 0 0 0 1px var(--white)}
.site-social svg{display:block}
.site-cta{display:inline-block;margin-left:.5rem;padding:.95em 1.4em;border:2px solid var(--white);color:var(--white);font-family:var(--display);font-weight:700;font-size:var(--size-caps);letter-spacing:.14em;line-height:1.1;text-transform:uppercase;white-space:nowrap;transition:background-color .2s ease,color .2s ease}
.site-cta:hover{background:var(--white);color:var(--pine)}
.site-header a:focus-visible,.site-header button:focus-visible{outline:2px solid var(--white);outline-offset:3px}

/* The burger and the phone menu */
.site-burger{display:none;align-items:center;justify-content:center;width:44px;height:44px;margin:0 -8px 0 0;padding:0;border:0;background:none;color:var(--matcha);cursor:pointer;-webkit-appearance:none;appearance:none}
.site-burger-lines{position:relative;display:block;width:26px;height:12px}
.site-burger-lines span{position:absolute;left:0;right:0;height:2px;background:currentColor;transition:transform .25s ease,top .25s ease,background-color .25s ease}
.site-burger-lines span:first-child{top:0}
.site-burger-lines span:last-child{top:10px}
.site-burger[aria-expanded="true"] .site-burger-lines span{background:var(--white)}
.site-burger[aria-expanded="true"] .site-burger-lines span:first-child{top:5px;transform:rotate(45deg)}
.site-burger[aria-expanded="true"] .site-burger-lines span:last-child{top:5px;transform:rotate(-45deg)}
.site-burger .site-burger-close{display:none}
.site-burger[aria-expanded="true"] .site-burger-open{display:none}
.site-burger[aria-expanded="true"] .site-burger-close{display:inline}
/* The menu is the header's sibling, a panel over the whole viewport one layer under the header, so the bar with the mark and the
   close button stays on top of it. It was a child of the sticky header until November 7, 2026, when iPhones were showing the
   header a screen tall about half the time; a fixed panel inside a sticky, transformed header is one of the two things that
   could do that, so it moved out (the other, the script's height loop, is gone too). */
.site-menu{position:fixed;inset:0;z-index:9;display:flex;flex-direction:column;padding:calc(var(--header-h) + 1rem) var(--gutter) max(2rem,env(safe-area-inset-bottom));background:var(--pine);color:var(--white);overflow-y:auto;overscroll-behavior:contain;-webkit-overflow-scrolling:touch;opacity:0;transition:opacity .25s ease}
.site-menu[hidden]{display:none}
.site-menu.is-shown{opacity:1}
.site-menu-nav{flex:1 1 auto;display:flex;align-items:center}
.site-menu-nav ul{list-style:none;margin:0;padding:0}
.site-menu-link{display:block;padding:.4em 0;font-family:var(--display);font-weight:700;font-size:clamp(1.75rem,8vw,2.75rem);line-height:1;letter-spacing:.02em;text-transform:uppercase;color:var(--white);text-decoration:none}
.site-menu-link[aria-current="page"]{color:var(--matcha)}
.site-menu-social{display:flex;gap:12px;margin:0 0 1.5rem}
.site-menu-social-link{display:inline-flex;align-items:center;justify-content:center;width:44px;height:44px;color:var(--white);box-shadow:inset 0 0 0 1px var(--white)}
.site-menu-social-link svg{width:19px;height:19px}
.site-menu-cta{display:inline-block;align-self:flex-start;padding:1em 1.6em;border:2px solid var(--white);color:var(--white);font-family:var(--display);font-weight:700;font-size:.8125rem;letter-spacing:.14em;line-height:1.1;text-transform:uppercase;text-decoration:none}
body.menu-open{overflow:hidden}
/* The five links fit from 720px up once the social icons step aside; the burger takes over below that. */
@media (max-width:899px){.site-social{display:none}}
@media (max-width:719px){
  :root{--header-h:68px}
  .site-logo img{height:38px}
  .site-nav,.site-actions{display:none}
  .site-burger{display:flex}
}
@media (min-width:720px){
  .site-menu{display:none !important}
}

/* ---------- Footer, in Pine (November 6, 2026): the mark and the line beside the address written large, then three ruled cells ---------- */
.p-footer{background:var(--pine);color:var(--matcha);padding:clamp(3rem,6vw,4.5rem) 0 1.5rem}
.p-footer-in{width:min(100% - 2 * var(--gutter),var(--max));margin-inline:auto}
.p-footer-top{display:flex;justify-content:space-between;align-items:flex-end;gap:1.5rem 3rem;padding-bottom:var(--space-group)}
.p-footer .p-footer-mark{display:block;height:48px;width:auto;color:var(--matcha)}
.p-footer .p-footer-line{margin:1rem 0 0;font-family:var(--italic);font-style:italic;font-weight:400;font-size:1.25rem;line-height:1.3;letter-spacing:0;color:var(--matcha);max-width:24ch}
.p-footer .p-footer-mail{display:inline-block;max-width:100%;font-family:var(--display);font-weight:700;font-size:clamp(1.5rem,.9rem + 2.6vw,3.25rem);line-height:1.1;letter-spacing:.005em;color:var(--white);text-decoration:underline;text-decoration-color:transparent;text-decoration-thickness:2px;text-underline-offset:.16em;overflow-wrap:anywhere;transition:text-decoration-color .2s ease}
.p-footer .p-footer-mail:hover{color:var(--white);text-decoration-color:var(--matcha)}
.p-footer-cells{display:grid;grid-template-columns:minmax(0,4fr) minmax(0,4fr) minmax(0,5fr);gap:1px;background:var(--hair-on-pine);border-top:1px solid var(--hair-on-pine);border-bottom:1px solid var(--hair-on-pine)}
.p-footer-cell{min-width:0;background:var(--pine);padding:1.5rem 1.75rem 1.75rem}
.p-footer-cell:first-child{padding-left:0}
.p-footer-cell:last-child{padding-right:0}
.p-footer .p-footer-h{margin:0 0 .9rem;font-family:var(--display);font-weight:700;font-size:var(--size-caps);line-height:1.2;letter-spacing:.16em;text-transform:uppercase;color:var(--white)}
.p-footer .p-footer-list{list-style:none;margin:0;padding:0}
.p-footer .p-footer-list li{margin:0 0 .35rem;font-size:var(--size-small);line-height:1.5;color:var(--matcha)}
.p-footer .p-footer-list--map{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0 1rem}
.p-footer .p-footer-addr{margin-top:.9rem}
.p-footer .p-footer-p{margin:0;font-size:var(--size-small);line-height:1.5;color:var(--matcha);max-width:34ch}
.p-footer a{color:var(--matcha);transition:color .15s ease}
.p-footer a:hover{color:var(--white)}
.p-footer .p-footer-link{display:inline-block;padding:2px 0;font-size:var(--size-small);line-height:1.5}
.p-footer .p-footer-form{margin:0;max-width:34ch}
.p-footer .p-footer-label{display:block;margin:1.1rem 0 0;font-family:var(--display);font-weight:700;font-size:var(--size-caps);letter-spacing:.16em;text-transform:uppercase;line-height:1.4;color:var(--matcha)}
.p-footer .p-footer-input{display:block;width:100%;margin:.45rem 0 0;padding:.7rem .85rem;background:rgba(255,255,255,.08);border:0;border-bottom:1px solid var(--matcha);border-radius:0;color:var(--white);font:inherit;font-size:1rem;line-height:1.4;-webkit-appearance:none;appearance:none;transition:background-color .15s ease,border-color .15s ease}
.p-footer .p-footer-input:hover{background:rgba(255,255,255,.11)}
.p-footer .p-footer-input::placeholder{color:var(--matcha);opacity:1}
.p-footer .p-footer-input:focus{background:rgba(255,255,255,.13);border-bottom-color:var(--white);outline:none}
.p-footer .p-footer-msg{display:none;margin:.9rem 0 0;font-size:var(--size-small);line-height:1.5;color:var(--white)}
.p-footer .p-footer-msg.is-on{display:block}
.p-footer .p-footer-msg.is-err{padding-left:.75rem;border-left:3px solid var(--tang)}
.p-footer .p-footer-form.is-done .p-footer-input,.p-footer .p-footer-form.is-done .p-footer-sub,.p-footer .p-footer-form.is-done .p-footer-label{display:none}
.p-footer .p-footer-sub{display:inline-block;margin:1.1rem 0 0;padding:.95em 1.4em;background:transparent;border:2px solid var(--white);border-radius:0;color:var(--white);font-family:var(--display);font-weight:700;font-size:var(--size-caps);letter-spacing:.14em;line-height:1.1;text-transform:uppercase;cursor:pointer;-webkit-appearance:none;appearance:none;transition:background-color .2s ease,color .2s ease}
.p-footer .p-footer-sub:hover{background:var(--white);color:var(--pine)}
.p-footer .p-footer-hp{position:absolute;left:-5000px;width:1px;height:1px;overflow:hidden}
.p-footer a:focus-visible,.p-footer .p-footer-input:focus-visible,.p-footer .p-footer-sub:focus-visible{outline:2px solid var(--white);outline-offset:3px}
.p-footer-legal{display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:.75rem 2rem;padding-top:1.25rem}
.p-footer .p-footer-copy{margin:0;font-size:.8125rem;line-height:1.5;color:var(--matcha)}
.p-footer-legal-links{display:flex;flex-wrap:wrap;gap:0 1.5rem}
.p-footer .p-footer-legal-link{display:inline-block;padding:4px 0;font-size:.8125rem;line-height:1.4;color:var(--matcha)}
.p-footer .p-footer-legal-link:hover{color:var(--white)}
@media (max-width:900px){
  .p-footer-cells{grid-template-columns:1fr}
  .p-footer-cell,.p-footer-cell:first-child,.p-footer-cell:last-child{padding:1.5rem 0 1.75rem}
}
@media (max-width:720px){
  .p-footer-top{flex-direction:column;align-items:flex-start}
}
@media (max-width:640px){
  .p-footer-legal{flex-direction:column;align-items:flex-start;gap:.5rem}
  .p-footer-legal-links{display:grid;grid-template-columns:1fr 1fr;gap:0 1.5rem;width:100%}
}

/* ---------- Parts the inner pages use ---------- */
/* People: the portrait and a short list under it on one side, the person's text on the other. */
.person-chapter{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:var(--space-row) clamp(2rem,5vw,5rem);align-items:start}
.person-chapter .portrait{grid-column:1;margin:0}
.person-chapter .brings{grid-column:1;margin-top:.5rem}
.person-chapter .text{grid-column:2;grid-row:1 / span 2}
.person-chapter--flip{grid-template-columns:minmax(0,7fr) minmax(0,5fr)}
.person-chapter--flip .portrait,.person-chapter--flip .brings{grid-column:2}
.person-chapter--flip .text{grid-column:1}
.person-chapter+.person-chapter{margin-top:var(--space-section)}
.person-chapter .text h2{font-size:var(--size-headline);line-height:1.02;text-transform:uppercase}
.person-chapter .role{margin:.6rem 0 0;font-family:var(--display);font-weight:600;font-size:.75rem;letter-spacing:.18em;text-transform:uppercase;color:var(--ink-2)}
.person-chapter .role+.lead{margin-top:1.5rem}
.person-chapter .text p+p{margin-top:1.1em}
.person-chapter .links{margin-top:1.5rem}
.aside{margin-top:var(--space-row);padding-top:var(--space-row);border-top:1px solid var(--hair);font-size:var(--size-small);line-height:1.6;color:var(--ink-2);max-width:56ch}
.aside p+p{margin-top:.8em}
.aside a{color:var(--pine)}
@media (max-width:900px){
  .person-chapter,.person-chapter--flip{grid-template-columns:1fr}
  .person-chapter .portrait,.person-chapter .brings,.person-chapter .text,.person-chapter--flip .portrait,.person-chapter--flip .brings,.person-chapter--flip .text{grid-column:auto;grid-row:auto}
  .person-chapter .brings{margin-top:var(--space-row)}
}

/* The contact form (November 6, 2026): caps labels, the filled button, the message in place. The fields (November 7, 2026, Eddie on
   his phone: a bare line did not read as a place to type): a faint Pine fill with the text inside it, on the Pine hairline, square,
   a shade deeper on hover and focus, the line turning Tangerine on focus. The same box everywhere a visitor types. */
.form{margin-top:var(--space-block)}
.form-row{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:1.1rem 1.5rem}
.field{margin-top:1.1rem}
.field-label{display:block;margin-bottom:.45rem;font-family:var(--display);font-weight:700;font-size:var(--size-caps);letter-spacing:.16em;text-transform:uppercase;line-height:1.4;color:var(--pine)}
.field-input{display:block;width:100%;margin:0;padding:.7rem .85rem;background:rgba(56,73,72,.05);border:0;border-bottom:1px solid var(--pine);border-radius:0;color:var(--ink);font:inherit;font-size:var(--size-body);line-height:1.4;-webkit-appearance:none;appearance:none;transition:background-color .15s ease,border-color .15s ease}
.field-input::placeholder{color:var(--ink-2);opacity:.75}
.field-input:hover{background:rgba(56,73,72,.07)}
select.field-input{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='9'%3E%3Cpath d='M1 1l6 6 6-6' fill='none' stroke='%23384948' stroke-width='1.6'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right .85rem center;padding-right:2.4rem;cursor:pointer}
.field-area{resize:vertical;min-height:6rem}
.field-input:focus{background:rgba(56,73,72,.08);border-bottom-color:var(--tang);outline:none}
.field-input:focus-visible{outline:2px solid var(--pine);outline-offset:4px}
.form-hp{position:absolute;left:-5000px;width:1px;height:1px;overflow:hidden}
.form-act{display:flex;flex-wrap:wrap;align-items:center;gap:.75rem 1.5rem;margin:1.5rem 0 0}
.form-act .small{margin:0}
.form-msg{display:none;margin:1rem 0 0;font-size:var(--size-small);line-height:1.5;max-width:46ch}
.form-msg.is-on{display:block}
.form-msg.is-err{padding-left:.75rem;border-left:3px solid var(--tang)}
.form.is-done .form-row,.form.is-done .field,.form.is-done .form-act{display:none}
@media (max-width:640px){.form-row{grid-template-columns:1fr}}
/* The long forms (November 6, 2026): the bench application and the Co-Op referral, which took the site off monday.com's forms.
   Groups are ruled like the rest of the site, choices are plain boxes, and a block that depends on an answer hides until the answer
   is given (the script); without script every block shows, with its condition named in the label. */
.form--long{max-width:46rem}
.form-group{margin:0;padding:var(--space-group) 0 0;border:0;border-top:1px solid var(--hair);min-width:0}
.form-group+.form-group{margin-top:var(--space-group)}
.form-group-h{padding:0;font-family:var(--display);font-weight:700;font-size:var(--size-2);line-height:1.1;letter-spacing:.01em;text-transform:uppercase}
.form-group-note{margin:1rem 0 0;max-width:60ch}
.form-group .form-row,.form-group .field{margin-top:1.4rem}
.form-group .form-row{gap:1.4rem 1.5rem}
.form-group .form-row .field{margin-top:0}
.field-help{margin:.45rem 0 0;font-size:var(--size-small);line-height:1.5;color:var(--ink-2);max-width:60ch}
.field-label .opt{font-weight:500;letter-spacing:.04em;text-transform:none;color:var(--ink-2)}
.field--choices{padding:0;border:0;min-width:0}
.choices{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:.4rem 1.5rem;margin:.75rem 0 0}
.choice{display:flex;align-items:flex-start;gap:.6rem;font-size:var(--size-body);line-height:1.45;cursor:pointer}
.choice input{flex:none;width:1.25rem;height:1.25rem;margin:.15rem 0 0;font-size:1rem;accent-color:var(--pine)}
.field-file{padding:.6rem .85rem;font-size:1rem}
.field-file::file-selector-button{margin:0 .9rem 0 0;padding:.55em 1em;border:1px solid var(--pine);background:transparent;color:var(--pine);font-family:var(--display);font-weight:700;font-size:var(--size-caps);letter-spacing:.14em;text-transform:uppercase;border-radius:0;cursor:pointer}
input[type=date].field-input{min-height:2.6rem}
.form-when[hidden]{display:none}
html.js .only-nojs{display:none}
.form-done{display:none;margin-top:var(--space-block);max-width:60ch}
.form-done h2{font-size:var(--size-section)}
.form-done p+p{margin-top:1em}
.form.is-done .form-group,.form.is-done .form-hp{display:none}
.form.is-done .form-done{display:block}
@media (max-width:640px){.choices{grid-template-columns:1fr}}

/* Contact: the two doors as one ruled block. The Pine panel (a call, with the Matcha column rising in a lane at its right and cut by
   the panel's bottom edge) and the white panel (the form) share one frame and one height, as two cells of Ashley's grid. */
.doors{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);align-items:stretch}
.door{padding:clamp(1.75rem,3vw,2.5rem)}
.call-card{position:relative;background:var(--pine);color:var(--text-on-pine);padding-bottom:clamp(11rem,22vw,15rem);overflow:hidden}
.call-card h2{color:var(--white)}
.call-card .lead{color:var(--text-on-pine);margin-top:1rem;max-width:30ch}
.call-card .small{color:var(--muted-on-pine);max-width:30ch}
.call-card .door-act{margin:1.5rem 0 1rem}
/* The Matcha column rises at the panel's right and is cut by its bottom edge, under the words, never behind them. */
.call-card-lane{position:absolute;right:-6%;bottom:0;width:min(64%,320px);pointer-events:none}
.call-card-lane svg{display:block;width:100%;height:auto;color:var(--matcha);transform:translateY(30%)}
.door--form{border:1px solid var(--hair);border-left:0}
.door h2{font-size:var(--size-2)}
.door .lead{margin-top:1rem}
.door-act{margin:1.5rem 0 1rem}
.door-foot{margin:1.5rem 0 0;padding-top:1rem;border-top:1px solid var(--hair);font-size:var(--size-small);line-height:1.5}
.door-mail{font-family:var(--body);font-weight:500;font-size:clamp(1.25rem,1rem + 1vw,1.625rem);line-height:1.3;text-decoration:underline;text-decoration-color:var(--tang);text-decoration-thickness:1.5px;text-underline-offset:5px;overflow-wrap:anywhere;transition:text-decoration-thickness .15s ease}
.door-mail:hover{text-decoration-thickness:3px}
@media (max-width:900px){
  .doors{grid-template-columns:1fr}
  .door--form{border-left:1px solid var(--hair);border-top:0}
}
@media (max-width:640px){
  .door{padding:1.5rem 1.25rem 1.75rem}
  .call-card{padding-bottom:9rem}
  .call-card-lane{width:56%}
}

/* Rows with a link of their own, stacked. */
.index-row--stack{grid-template-columns:1fr;gap:.4rem}
.index-row--stack .link--go{margin-top:.5rem}

/* Items in a grid: a name and a paragraph each. */
.items{list-style:none;margin:0;padding:0}
.items .item{min-width:0}
.items.grid--3{grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--space-block) clamp(2rem,5vw,5rem)}
@media (max-width:640px){.items.grid--3{grid-template-columns:1fr}}
.items .item h3{margin:0 0 .6rem;text-transform:none}
.items .item p{margin:0;font-size:var(--size-body);line-height:1.6;max-width:48ch}

/* A close with text on the left and the way in on the right (the application pages). */
.close-in--text{align-items:start}
.close-in--text .text h2{font-size:var(--size-2)}
.close-in--text .text .lead{margin-top:1.25rem}
.close-in--text .text p+p{margin-top:1.1em}
.callout{padding-left:1.25rem;border-left:2px solid var(--tang)}

/* A contents row for a long reference page. */
.contents{display:flex;flex-wrap:wrap;gap:.75rem 1.75rem;margin-top:var(--space-block);padding-top:var(--space-row);border-top:1px solid var(--hair)}
.contents a{font-family:var(--display);font-weight:600;font-size:var(--size-caps);letter-spacing:.16em;text-transform:uppercase;padding:.25em 0}
.contents a:hover{text-decoration:underline;text-decoration-color:var(--tang);text-decoration-thickness:2px;text-underline-offset:.4em}

/* Reference sections: the heading at the side, the matter beside it. */
.split--aside{grid-template-columns:minmax(0,4fr) minmax(0,8fr);align-items:start}
.split--aside>h2{font-size:var(--size-2);overflow-wrap:normal;hyphens:none;position:sticky;top:calc(var(--header-h) + 1.5rem)}
.ref{scroll-margin-top:calc(var(--header-h) + 1rem)}
.ref .text>.lead{margin-bottom:1.25rem}
.ref .text>p+p{margin-top:1.1em}
.ref .text>.index,.ref .text>.perf,.ref .text>.dl{margin-top:var(--space-row)}
.ref .text a{text-decoration:underline;text-decoration-color:var(--tang);text-decoration-thickness:1px;text-underline-offset:3px}
.ref .text a:hover{text-decoration-thickness:2px}
.ref .text .link--go{text-decoration-thickness:1px}
.dl{display:grid;grid-template-columns:minmax(10rem,max-content) minmax(0,1fr);gap:0 var(--gutter);border-top:1px solid var(--hair)}
.dl dt,.dl dd{margin:0;padding:.75rem 0;border-bottom:1px solid var(--hair);font-size:var(--size-small);line-height:1.5}
.dl dt{color:var(--ink-2)}
.dl dd{font-weight:500}
.perf{list-style:none;margin:0;padding:0;border-top:1px solid var(--hair)}
.perf>li{padding:var(--space-row) 0;border-bottom:1px solid var(--hair)}
.perf h3{margin:0 0 .5rem;text-transform:none}
.perf p{margin:0;font-size:var(--size-small);line-height:1.6}
.perf-meta{display:grid;grid-template-columns:max-content minmax(0,1fr);gap:.35rem 1.25rem;margin:1rem 0 0;font-size:.875rem;line-height:1.5}
.perf-meta dt{color:var(--ink-2)}
.perf-meta dd{margin:0}
.codes-grid{margin-top:var(--space-row)}
.codes-grid h3{margin:0 0 .75rem}
.codes{list-style:none;margin:0;padding:0;border-top:1px solid var(--hair)}
.codes li{display:grid;grid-template-columns:5.5rem minmax(0,1fr);gap:0 1rem;padding:.55rem 0;border-bottom:1px solid var(--hair);font-size:var(--size-small);line-height:1.45}
.codes b{font-family:var(--display);font-weight:600;letter-spacing:.02em}
@media (max-width:900px){
  .split--aside{grid-template-columns:1fr}
  .split--aside>h2{position:static}
  .dl{grid-template-columns:1fr}
  .dl dt{padding-bottom:0;border-bottom:0}
  .dl dd{padding-top:.2rem}
  .perf-meta{grid-template-columns:1fr;gap:.15rem 0}
  .perf-meta dd{margin-bottom:.5rem}
}

/* Co-Op: the tier line under a tier's name. */
.tier{margin:.4rem 0 0;font-size:var(--size-small);line-height:1.5;color:var(--ink-2)}
.before{margin-top:1.25rem}
.after{margin-top:var(--space-block)}

/* Legal: four documents as prose, each with its date and a way back up. */
.doc{scroll-margin-top:calc(var(--header-h) + 1rem)}
.doc .side{position:sticky;top:calc(var(--header-h) + 1.5rem)}
.doc .side h2{margin:0;font-size:var(--size-2);overflow-wrap:normal;hyphens:none}
.doc .doc-meta{margin:.6rem 0 0}
.doc .text.prose{max-width:none}
.doc .text.prose>*{max-width:var(--measure)}
.doc .prose h3{font-size:var(--size-3);text-transform:none}
.doc .prose>h3:first-child{margin-top:0}
.doc .doc-top{margin-top:var(--space-block)}
@media (max-width:900px){.doc .side{position:static}.doc .doc-meta{margin-bottom:var(--space-row)}}

/* ---------- Preview builds: the draft and scheduled banner ---------- */
.preview-banner{margin:0;padding:.7rem var(--gutter);background:var(--tang);color:#000;font-family:var(--display);font-weight:700;font-size:var(--size-caps);letter-spacing:.1em;text-transform:uppercase;text-align:center}

/* ---------- Reduced motion ---------- */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{transition-duration:.01ms !important;transition-delay:0s !important;animation-duration:.01ms !important;scroll-behavior:auto !important}
  a.plate:hover img,a.plate:focus-visible img{transform:none}
}

/* ---------- Print ---------- */
/* Government and Legal get printed; the chrome, the close, and the forms stay on the screen. (November 7, 2026) */
@media print{
  :root{--header-h:0px}
  .skip-link,.site-header,.close,.p-footer-cells,.p-footer-mail,.p-footer-legal-links,.post-video-toggle,.post-lightbox{display:none !important}
  body{background:#fff;color:#000}
  .band--pine,.band--matcha,.p-footer{background:none;color:#000}
  .p-footer{padding:1rem 0 0;border-top:1px solid #000}
  .p-footer .p-footer-line,.p-footer-legal,.p-footer-copy{color:#000}
  .p-footer-legal{break-inside:avoid}
  .split--aside>h2,.doc .side{position:static}
  main a[href^="http"]:not(.btn)::after{content:" (" attr(href) ")";font-size:.85em;word-break:break-all}
  .section,.doc{break-inside:auto}
  h2,h3{break-after:avoid}
  figure,table,.facts{break-inside:avoid}
  .post-video-media{display:none}
}