@font-face{font-family:'Fraunces';src:url(/fonts/Fraunces-Soft-var.woff2) format('woff2');font-weight:400 700;font-display:swap;unicode-range:U+0020-007E,U+00A0-00FF,U+0131,U+0152-0153,U+02C6,U+02DA,U+02DC,U+2013-2014,U+2018-201A,U+201C-201E,U+2022,U+2026,U+2032-2033,U+2039-203A,U+2122}
@font-face{font-family:'Fraunces';src:url(/fonts/Fraunces-Soft-Italic-520.woff2) format('woff2');font-weight:400 600;font-style:italic;font-display:swap;unicode-range:U+0020-007E,U+2013-2014,U+2018-201D,U+2026}
@font-face{font-family:'Fraunces AbleTap';src:url(/fonts/Fraunces-Sharp-600-abletap.woff2) format('woff2');font-weight:600;font-display:swap}
@font-face{font-family:'Fraunces AbleTap';src:url(/fonts/Fraunces-Sharp-600i-abletap.woff2) format('woff2');font-weight:600;font-style:italic;font-display:swap}
@font-face{font-family:'Atkinson Hyperlegible';src:url(/fonts/AtkinsonHyperlegible-Regular.woff2) format('woff2');font-weight:400;font-display:swap}
@font-face{font-family:'Atkinson Hyperlegible';src:url(/fonts/AtkinsonHyperlegible-Bold.woff2) format('woff2');font-weight:700;font-display:swap}
@font-face{font-family:'Atkinson Hyperlegible';src:url(/fonts/AtkinsonHyperlegible-Italic.woff2) format('woff2');font-weight:400;font-style:italic;font-display:swap}
*,*::before,*::after{box-sizing:border-box}
*{margin:0;padding:0}
html{scroll-padding-top:84px;background:var(--c-bg-deep);color-scheme:dark;-webkit-text-size-adjust:100%}
body{background:var(--c-bg);color:var(--c-text);font:400 var(--t-body)/1.6 var(--f-body);-webkit-font-smoothing:antialiased}
img,svg,canvas{display:block;max-width:100%}
a{color:var(--c-link);text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:3px}
a:hover{color:var(--c-link-hover)}
:focus-visible{outline:2px solid var(--c-focus);outline-offset:2px}
main:focus{outline:none}
.skip{position:absolute;left:12px;top:-80px;z-index:100;background:var(--c-teal);color:var(--c-text-on-accent);padding:12px 18px;border-radius:var(--r-sm);font-weight:700;text-decoration:none}
.skip:focus{top:12px}
.wrap{max-width:var(--w-max);margin:0 auto;padding:0 var(--gutter)}
.vh{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
h1,h2,h3{font-family:var(--f-display);color:var(--c-text);font-optical-sizing:auto;text-wrap:balance}
/* chill's Fraunces voice: SOFT 100 (baked into the file), opsz 144, wght 500, italic for emphasis */
.hero h1,.h2,.story blockquote,.vlist h3,.email,.doc-hero h1,.nf h1{font-variation-settings:'opsz' 144}
em.ital{font-style:italic;font-weight:520;color:var(--c-teal)}
.kicker{font:700 var(--t-kicker)/1.4 var(--f-body);color:var(--c-teal);letter-spacing:.01em;margin-bottom:14px}
.hero .kicker,.story .kicker,.work .head .kicker,.values .kicker,.contact .intro p.kicker{font:700 var(--t-kicker)/1.4 var(--f-body);color:var(--c-teal);letter-spacing:.01em;margin:0 0 14px}
.h2{font-size:var(--t-h2);font-weight:500;line-height:1.05;letter-spacing:-.015em}
.h3{font-size:var(--t-h3);font-weight:600;line-height:1.15}

/* nav */
.nav{position:sticky;top:0;z-index:50;background:var(--c-bg-deep);border-bottom:1px solid var(--c-border)}
.nav .wrap{display:flex;align-items:center;justify-content:space-between;height:68px;gap:20px}
.brand{display:inline-flex;align-items:center;gap:10px;min-height:44px;color:var(--c-text);text-decoration:none;font:600 1.375rem/1 var(--f-display);letter-spacing:-.01em}
.brand:hover{color:var(--c-text)}
.brand svg{width:34px;height:auto}
.brand b{color:var(--c-teal);font-weight:600}
.navlinks{display:flex;gap:2px;list-style:none}
.navlinks a,.navcta{display:inline-flex;align-items:center;min-height:44px;padding:0 14px;border-radius:var(--r-sm);color:var(--c-text-muted);text-decoration:none;font-size:var(--t-small)}
.navlinks a:hover{color:var(--c-text);background:var(--c-surface)}
.navlinks a[aria-current]{color:var(--c-text);text-decoration:underline;text-decoration-color:var(--c-teal);text-underline-offset:6px}
.navcta{color:var(--c-teal);font-weight:700;gap:.3em}
.navcta:hover{color:var(--c-teal-hover)}
.menu{display:none}
@media(max-width:860px){
  .navlinks,.navcta{display:none}
  .menu{display:block;position:relative}
  .menu summary{list-style:none;cursor:pointer;min-height:44px;min-width:64px;display:flex;align-items:center;justify-content:center;padding:0 16px;border:1px solid var(--c-border-strong);border-radius:var(--r-sm);font-weight:700;font-size:var(--t-small)}
  .menu summary::-webkit-details-marker{display:none}
  .menu ul{position:absolute;right:0;top:54px;width:min(80vw,300px);list-style:none;background:var(--c-surface);border:1px solid var(--c-border-strong);border-radius:var(--r-md);padding:8px}
  .menu a{display:flex;align-items:center;min-height:48px;padding:0 14px;color:var(--c-text);text-decoration:none;border-radius:var(--r-sm)}
  .menu a:hover{background:var(--c-surface-2)}
  .menu a:focus-visible{outline-offset:-2px}
}

/* buttons: one primary per view; secondary actions are text links */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;min-height:52px;padding:0 26px;border-radius:999px;font:700 1.0625rem/1 var(--f-body);text-decoration:none;cursor:pointer;border:0;background:var(--c-teal);color:var(--c-text-on-accent)}
.btn:hover{background:var(--c-teal-hover);color:var(--c-text-on-accent)}
.tlink{display:inline-flex;align-items:center;gap:8px;min-height:44px;font-weight:700;color:var(--c-teal);text-decoration:underline;text-underline-offset:5px;text-decoration-thickness:1px}
.arr{display:inline-block;flex:none;width:.9em;height:.9em;transition:transform var(--d-fast) var(--ease-out)}
.arr.in{vertical-align:-.08em;margin:0 .2em}
@media(hover:hover){ .btn:hover .arr,.tlink:hover .arr{transform:translateX(3px)} }

/* hero */
.hero{position:relative;min-height:calc(100svh - 68px);display:flex;align-items:center;background:radial-gradient(900px 640px at 74% 52%,var(--c-glow-teal),transparent 70%),radial-gradient(420px 300px at 70% 30%,var(--c-glow-gold),transparent 70%),var(--c-bg-deep);overflow:visible;z-index:2}
/* .sig-slot = the mark's box for every layout branch; the canvas fits the letter into it, the still SVG lives in it */
.sig-slot{position:absolute;z-index:0;pointer-events:none;aspect-ratio:860/960;height:min(74%,42vw);right:5vw;top:50%;transform:translateY(-50%)}
.hero canvas#sig,.hero canvas#sig-ov{position:absolute;left:0;top:0;width:100%;pointer-events:none;z-index:0}
.sig-still{position:absolute;pointer-events:none;z-index:0}
#sig-still-foam{inset:0}
#sig-still-foam svg{width:100%;height:100%;overflow:visible;max-width:none}
#sig-still-ripple{position:absolute;inset:0;overflow:hidden}
#sig-still-ripple svg{width:100%;height:100%}
.js-sig .sig-still{display:none}
.hero .wrap{position:relative;z-index:1;width:100%;padding-top:48px;padding-bottom:64px}
.hero-copy{max-width:600px}
.hero h1{font-size:var(--t-display);font-weight:500;line-height:1.0;letter-spacing:-.02em;margin:0 0 24px}
.hero h1 .ln{display:block}
.hero .hl{color:var(--c-teal)}
.lede{font-size:var(--t-lede);line-height:1.55;color:var(--c-text-muted);max-width:33em}
@media(min-width:1024px) and (max-width:1180px){ .lede{max-width:min(33em,48vw)} .sig-slot{right:3vw} }
.hero-cta{display:flex;flex-wrap:wrap;align-items:center;gap:12px 26px;margin-top:32px}
/* phones (portrait) and tablets (portrait): the crest is a logo moment ABOVE the copy; its sea line is the horizon */
@media(max-width:759px),(max-width:1023px) and (orientation:portrait){
  .hero{align-items:flex-start;background:radial-gradient(560px 420px at 64% 14%,var(--c-glow-teal),transparent 70%),radial-gradient(280px 200px at 66% 8%,var(--c-glow-gold),transparent 70%),var(--c-bg-deep)}
  .sig-slot{top:18px;transform:none;height:min(34svh,250px);right:8vw}   /* loop 3 (critic A2): bigger phone crest */
  .hero .wrap{padding-top:calc(min(34svh,250px) + 26px);padding-bottom:48px}
  .lede{font-size:1.0625rem;line-height:1.55}
}
@media(max-width:759px) and (max-height:700px) and (orientation:portrait){   /* short phones (390x664, 375x667): keep the CTA pill inside the fold */
  .sig-slot{height:calc(min(31svh,250px) - 40px)}
  .hero .wrap{padding-top:calc(min(31svh,250px) - 40px + 20px)}
  .hero h1{margin-bottom:16px}
}
@media(min-width:760px) and (max-width:1023px) and (orientation:portrait){
  .hero{min-height:0}
  .sig-slot{height:min(30svh,320px);right:10vw}
  .hero .wrap{padding-top:calc(min(30svh,320px) + 56px);padding-bottom:72px}
  .hero-copy{max-width:640px}
}
/* landscape phones: crest on the right, sized to the hero height */
@media(max-height:500px) and (orientation:landscape) and (max-width:1023px){
  .hero{align-items:center;min-height:calc(100svh - 68px)}
  .sig-slot{height:84%;top:50%;transform:translateY(-50%);right:4vw}
  .hero .wrap{padding-top:20px;padding-bottom:24px}
  .hero-copy{max-width:56%}
  .hero h1{font-size:clamp(1.9rem,5.6vw,2.75rem);margin-bottom:12px}
  .lede{font-size:1rem}
  .hero-cta{margin-top:16px}
}

/* story band */
.story{position:relative;z-index:1;background:var(--c-band-teal);padding:var(--pad-sec) 0}
.story .wrap{position:relative;z-index:3}
.story blockquote{font:500 var(--t-story)/1.15 var(--f-display);letter-spacing:-.01em;color:var(--c-text);max-width:21em;text-wrap:pretty}
.crest-ul{position:relative;white-space:nowrap}
.crest-ul svg{position:absolute;left:-2%;width:104%;bottom:-.24em;height:.36em;overflow:visible}
.crest-ul path{fill:none;stroke:var(--c-gold);stroke-width:3;stroke-linecap:round;stroke-linejoin:round;vector-effect:non-scaling-stroke}
.studio{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:24px;margin-top:clamp(48px,6vw,72px);padding-top:clamp(32px,4vw,48px);border-top:1px solid var(--c-rule-teal)}
.studio > div:first-child{grid-column:1 / span 6}
.studio > div:nth-child(2){grid-column:7 / span 6}
.studio p{color:var(--c-text-muted);font-size:1.1875rem}
/* photo slot: hidden until Chris supplies a real photo (remove display:none and the [hidden] attribute together) */
.photo-slot{display:none}

/* work */
.sec{padding:var(--pad-sec) 0;position:relative;z-index:1}
.work{background:var(--c-bg)}
.work .head{max-width:40em;margin-bottom:clamp(32px,4vw,48px)}
.work .head p{color:var(--c-text-muted);margin-top:14px;font-size:1.1875rem}
.pcard{display:grid;grid-template-columns:minmax(0,55fr) minmax(0,45fr);min-height:520px;border-radius:var(--r-lg);overflow:hidden;margin-bottom:28px}
.pcard.flip{grid-template-columns:minmax(0,45fr) minmax(0,55fr)}
.pcard.flip .art{order:2}
.pcard.teal{background:var(--c-card-teal)}
.pcard.warm{background:var(--c-surface)}   /* loop 3 (critic A5): navy, so it doesn't stack two brown slabs with the values band */
.pcard .art{position:relative;display:flex;flex-direction:column;justify-content:center;padding:clamp(28px,4vw,56px);overflow:hidden}
.pcard .copy{display:flex;flex-direction:column;justify-content:center;padding:clamp(28px,4vw,56px);gap:14px}
/* AbleTap card only. Lavender bloom top-left and peach bloom behind the italic word; both tokens are used only here. */
.pcard .art.cream{padding:28px}
.cream-panel{position:relative;flex:1;display:flex;flex-direction:column;justify-content:flex-end;min-height:420px;border-radius:18px;padding:clamp(28px,3.4vw,48px);background:radial-gradient(380px 280px at 16% 12%,var(--c-abletap-lavender),transparent 62%),radial-gradient(360px 240px at 72% 78%,var(--c-abletap-glow),transparent 70%),var(--c-cream)}
/* loop 3 (critic A4): tagline-led, no duplicate name; AbleTap's italic-accent voice, terracotta accent (4.6:1 on cream, 3.71:1 over the glow peak) */
.cream-panel .at-tag{font:600 clamp(30px,3.4vw,46px)/1.08 'Fraunces AbleTap',var(--f-display);letter-spacing:-.015em;color:var(--c-abletap-ink);max-width:11em}
.cream-panel .at-tag em{font-style:italic;color:var(--c-abletap-accent)}
.pcard .kicker{color:var(--c-teal)}
.pcard h3{display:flex;flex-wrap:wrap;align-items:center;gap:12px;font-size:clamp(2.5rem,3.6vw,3.25rem);font-weight:500;line-height:1.02;font-variation-settings:'opsz' 144}
.pcard .tag{font-size:1.25rem;color:var(--c-text)}
.pcard .desc{color:var(--c-text-muted)}
.pcard .parent{color:var(--c-text-soft);font-size:var(--t-small)}
.pcard .acts{display:flex;flex-wrap:wrap;align-items:center;gap:12px 26px;margin-top:10px}
/* Imparted: the real Shortlist screen, cropped above its first indigo control; the phone bleeds off the card's bottom edge */
.pcard .art.bleed{justify-content:flex-start;padding:64px 56px 0}
.phone{position:relative;align-self:center;width:min(330px,82%);border-radius:42px 42px 0 0;background:var(--c-phone);padding:10px 10px 0;box-shadow:0 0 0 1px var(--c-phone-rim);margin-bottom:-1px}
.phone img{width:100%;height:auto;border-radius:33px 33px 0 0}
.art-cap{position:absolute;left:0;right:0;top:22px;color:var(--c-text-soft);font-size:.875rem;text-align:center}
.chip{display:inline-flex;align-items:center;gap:7px;font:700 .8125rem/1 var(--f-body);letter-spacing:.04em;padding:7px 11px;border-radius:999px;border:1px solid;white-space:nowrap}
.chip::before{content:"";width:7px;height:7px;border-radius:50%;background:currentColor}
.chip.beta{color:var(--c-gold);background:var(--c-chip-gold-bg);border-color:var(--c-chip-gold-border)}
.chip.live{color:var(--c-teal);background:var(--c-chip-teal-bg);border-color:var(--c-chip-teal-border)}

/* values */
.values{background:var(--c-band-warm)}
.values{position:relative;overflow:hidden}
.values::before{content:"";position:absolute;inset:0;background:radial-gradient(520px 360px at 12% 0%,var(--c-glow-warm),transparent 70%);pointer-events:none}
@media(min-width:1024px){ .values .wrap{display:grid;grid-template-columns:5fr 7fr;gap:64px;align-items:start} .values .wrap>.values-intro{position:sticky;top:120px} .vlist{margin-top:0} }
.values .wrap{position:relative}
.vlist{list-style:none;margin-top:clamp(28px,4vw,44px);max-width:46em}
.vlist li{padding:clamp(22px,3vw,32px) 0 clamp(22px,3vw,32px) 0}
.vlist li+li{background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 400 12' preserveAspectRatio='none'%3E%3Cpath d='M0 9 C80 8 150 10 230 7 C280 5 312 2 334 3 C352 4 356 9 346 10 C341 10.6 339 8 342 6.6 M346 10 C370 10 388 9 400 9' fill='none' stroke='%231C4A4E' stroke-width='1.4' vector-effect='non-scaling-stroke'/%3E%3C/svg%3E") top left/100% 12px no-repeat}
.vlist h3{font-size:clamp(1.875rem,3.2vw,2.5rem);font-weight:500;line-height:1.08;letter-spacing:-.01em}
.vlist p{color:var(--c-text-soft);margin-top:8px;font-size:1.125rem;max-width:36em}

/* contact */
.contact{background:var(--c-bg-deep);padding-bottom:clamp(72px,8vw,104px)}
.bookend{display:block;width:100%;height:56px;margin-bottom:clamp(28px,3.5vw,40px)}
.bookend path{fill:none;stroke:var(--c-teal);stroke-width:2;stroke-linecap:round;stroke-linejoin:round;vector-effect:non-scaling-stroke;opacity:.85}
.contact .intro{max-width:36em}
.contact .intro p{color:var(--c-text-muted);margin-top:14px;font-size:1.1875rem}
.email-row{display:flex;flex-wrap:wrap;align-items:flex-end;gap:12px 20px;margin-top:clamp(28px,4vw,40px)}
.email{display:inline-flex;align-items:center;min-height:56px;font:500 var(--t-email)/1.05 var(--f-display);letter-spacing:-.02em;color:var(--c-text);text-decoration:none;border-bottom:2px solid var(--c-teal);padding-bottom:4px;overflow-wrap:anywhere}
.copy-btn{display:inline-flex;align-items:center;gap:8px;min-height:44px;padding:0 18px;border-radius:999px;border:1px solid var(--c-border-strong);background:transparent;color:var(--c-text);font:700 var(--t-small)/1 var(--f-body);cursor:pointer;margin-bottom:6px}
.copy-btn:hover{border-color:var(--c-teal);color:var(--c-teal-hover)}
.copy-btn svg{width:1em;height:1em}
.email:hover{color:var(--c-teal-hover)}
.email-hint{margin-top:12px;color:var(--c-text-soft);font-size:var(--t-small)}
.contact .alt{margin-top:18px;display:flex;flex-wrap:wrap;align-items:center;gap:6px 26px;color:var(--c-text-muted)}
a[href^='tel:']{display:inline-flex;align-items:center;min-height:44px}
.contact .bookend{margin-bottom:clamp(28px,3.5vw,40px)}

/* footer */
footer{background:var(--c-bg-deep);border-top:1px solid var(--c-border);color:var(--c-text-soft);font-size:var(--t-small);padding:40px 0 48px}
footer .wrap{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:20px 24px;align-items:center}
footer .f1{grid-column:1 / span 5} footer .f2{grid-column:6 / span 3} footer .f3{grid-column:9 / span 4;justify-self:end}
footer a{color:var(--c-text-muted);display:inline-flex;align-items:center;min-height:44px}
footer a:hover{color:var(--c-text)}
footer a[aria-current]{color:var(--c-text);text-decoration-color:var(--c-teal)}
footer ul{list-style:none;display:flex;flex-wrap:wrap;gap:0 20px}
footer .brand{font-size:1.125rem}
footer .brand svg{width:26px}

/* responsive */
@media(max-width:960px){
  .studio,footer .wrap{grid-template-columns:minmax(0,1fr)}
  .studio > div:first-child,.studio > div:nth-child(2),footer .f1,footer .f2,footer .f3{grid-column:1 / -1;justify-self:start}
  .pcard,.pcard.flip{grid-template-columns:minmax(0,1fr);min-height:0}
  .pcard.flip .art{order:0}
  .pcard .art.bleed{padding:56px 28px 0}
  .cream-panel{min-height:300px}
}
@media(max-width:480px){ .phone{width:min(260px,80%)} .pcard .art.cream{padding:16px} }

/* docs */
.doc-hero{background:var(--c-bg-deep);border-bottom:1px solid var(--c-border)}
.doc-hero .wrap{padding-top:clamp(48px,6vw,80px);padding-bottom:clamp(28px,4vw,40px)}
.doc-hero h1{font-size:clamp(2.5rem,6vw,4.25rem);font-weight:500;letter-spacing:-.02em;line-height:1.02}
.doc-hero .meta{margin-top:14px;color:var(--c-text-soft);font-size:var(--t-small)}
.doc-hero .still-line{display:block;width:100%;height:40px;margin-top:28px}
.doc-hero .still-line path{fill:none;stroke:var(--c-teal);stroke-width:2;vector-effect:non-scaling-stroke;opacity:.8}
.doc-layout{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:24px;padding-top:48px;padding-bottom:96px}
.toc{grid-column:1 / span 3;position:sticky;top:96px;align-self:start}
.toc p{color:var(--c-text-soft);font-weight:700;font-size:var(--t-small);margin-bottom:8px}
.toc ol{list-style:none;border-left:1px solid var(--c-border)}
.toc a{display:flex;align-items:center;min-height:44px;padding:4px 0 4px 16px;margin-left:-1px;border-left:2px solid transparent;color:var(--c-text-muted);text-decoration:none;font-size:var(--t-small);line-height:1.3}
.toc a:hover{color:var(--c-text)}
.toc a[aria-current]{color:var(--c-text);border-left-color:var(--c-teal)}
.toc-m{display:none;margin-bottom:28px;border:1px solid var(--c-border-strong);border-radius:var(--r-md)}
.toc-m summary{cursor:pointer;min-height:48px;display:flex;align-items:center;padding:0 16px;font-weight:700}
.toc-m ol{list-style:none;padding:0 8px 8px}
.toc-m a{display:flex;align-items:center;min-height:44px;padding:0 8px;color:var(--c-text-muted);text-decoration:none}
.doc{grid-column:5 / span 7;max-width:42em}
.doc .lead{font-size:1.25rem;line-height:1.55;color:var(--c-text);margin-bottom:22px}
.doc h2{font-family:var(--f-display);font-size:1.75rem;font-weight:500;margin:52px 0 14px;scroll-margin-top:96px}
.doc p,.doc li{color:var(--c-text-muted);margin-bottom:14px}
.doc strong{color:var(--c-text)}
.doc ul{padding-left:22px;margin-bottom:16px}
.doc li::marker{color:var(--c-teal)}
.contact-card{display:flex;flex-wrap:wrap;gap:12px 24px;align-items:center;justify-content:space-between;background:var(--c-surface);border:1px solid var(--c-border);border-radius:var(--r-md);padding:20px 24px;margin:6px 0}
.contact-card .big{display:inline-flex;align-items:center;min-height:44px;font:500 1.5rem var(--f-display);color:var(--c-text);text-decoration:none}
.doc .btn{margin:6px 0 10px}
@media(max-width:960px){.toc{display:none}.toc-m{display:block}.doc{grid-column:1 / -1}.doc-layout{grid-template-columns:minmax(0,1fr)}}

/* 404 */
.nf{min-height:60svh;display:flex;align-items:center}
.nf h1{font-size:var(--t-h2);font-weight:500}
.nf p{color:var(--c-text-muted);margin:14px 0 24px}

/* reveals (only when JS is present) */
.js .reveal{opacity:0;transform:translateY(14px);transition:opacity var(--d-enter) var(--ease-out),transform var(--d-enter) var(--ease-out)}
.js .reveal.in{opacity:1;transform:none}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important;transition:none!important;scroll-behavior:auto!important}.js .reveal{opacity:1;transform:none}}

/* Windows High Contrast / forced colors */
@media(forced-colors:active){
  canvas#sig,canvas#sig-ov{display:none}
  .sig-still{display:block!important}
  .sig-still svg *{stroke:CanvasText}
  .btn{border:2px solid ButtonText;forced-color-adjust:none;background:ButtonFace;color:ButtonText}
  .pcard,.contact-card,.menu ul,.toc-m{border:1px solid CanvasText}
  .chip{border-color:CanvasText}
  .crest-ul path,.bookend path{stroke:CanvasText}
  .sig-still svg *{fill:CanvasText}
  .cream-panel{background:Canvas}
  .cream-panel *{color:CanvasText}
  :focus-visible{outline:2px solid Highlight}
}
/* print: legal/support pages */
@media print{
  html,body{background:#fff!important;color:#000!important}
  .nav,.skip,.toc,.toc-m,.still-line,footer ul,.menu{display:none!important}
  .doc-hero{background:#fff;border:0}
  .doc-hero h1,.doc h2,.doc p,.doc li,.doc strong,.doc .lead,.doc-hero .meta{color:#000!important}
  .doc{grid-column:1 / -1;max-width:none}
  .doc-layout{display:block;padding:0}
  .doc a{color:#000;text-decoration:underline}
  .doc a[href^="http"]::after,.doc a[href^="mailto"]::after{content:" (" attr(href) ")";font-size:.85em}
  .contact-card,.note{border:1px solid #000;background:#fff}
  .btn{background:#fff;color:#000;border:1px solid #000}
  footer{background:#fff;color:#000;border-top:1px solid #000}
  h2{break-after:avoid}
  .contact-card .big,.kicker,.nf,.nf *,.doc-hero .kicker{color:#000!important}
  .doc li::marker{color:#000}
  .reveal,.js .reveal{opacity:1!important;transform:none!important}
  canvas,.sig-still,.sig-slot,.bookend{display:none!important}
  .hero,.story,.values,.contact,.work{background:#fff!important}
  .hero *,.story *,.values *,.contact *,.work *{color:#000!important}
}
/* very narrow screens: the crest underline can't span a wrapped phrase, fall back to a plain gold underline */
@media(max-width:374px){ .crest-ul{white-space:normal;text-decoration:underline;text-decoration-color:var(--c-gold);text-decoration-thickness:3px;text-underline-offset:8px} .crest-ul svg{display:none} }