/* ==========================================================================
   chrome.css: the shared header, phone menu, phone bottom bar, footer and the
   draft pop-up/sheet for every page (Release 2, 2026-10-01).
   Loads after styles.css and uses its tokens. /about/ does not load styles.css,
   so the chrome roots there carry class "ch-solo", which supplies the same
   tokens and a scoped copy of the few styles.css rules the pop-up needs.
   Breakpoints: phone <= 760px (bar + menu), inline nav >= 64em.
   ========================================================================== */
@font-face{font-family:"ChMono";src:url("/assets/fonts/ibm-plex-mono-400.woff2") format("woff2");font-weight:400;font-display:swap}
@font-face{font-family:"ChMono";src:url("/assets/fonts/ibm-plex-mono-500.woff2") format("woff2");font-weight:500;font-display:swap}

/* ==========================================================================
   .ch-solo: /about/ only (no styles.css there). Same tokens as styles.css :root,
   base resets against about-drew.css, then scoped copies of the styles.css
   rules the pop-up uses (generated from styles.css lines 50-58, 180-187,
   337-373, 446-449; keep in step if those change).
   ========================================================================== */
.ch-solo{
  --ink-000:#111111;--ink-050:#191919;--ink-100:#202020;--ink-150:#282828;--ink-200:#313131;--ink-300:#3d3d3d;--ink-400:#4f4f4f;--ink-500:#6b6b6b;
  --brand:#00e7ef;--brand-hover:#6ff3f8;--brand-dim:rgba(0,231,239,.15);--brand-glow:rgba(0,231,239,.25);--brand-teal:#0aa4ac;
  --text-1:#f2f2f2;--text-2:#a6a6a6;--text-3:#8f8f8f;
  --font:"IBM Plex Sans",Plex,system-ui,sans-serif;--disp:"Archivo","Helvetica Neue",Arial,sans-serif;--mono:"IBM Plex Mono",ChMono,ui-monospace,monospace;
  --fs-xs:.8125rem;--fs-sm:.9375rem;--fs-base:1.0625rem;--fs-md:1.1875rem;
  --r:8px;--r-lg:16px;--r-pill:999px;--shadow-lg:0 18px 50px -24px rgba(0,0,0,.6);--focus:#00e7ef;
  font-family:var(--font);font-size:1.0625rem;line-height:1.6;color:var(--text-1)
}
.ch-solo .wrap{max-width:75rem;margin:0 auto;padding:0 1.25rem;box-sizing:border-box}
@media(min-width:48em){.ch-solo .wrap{padding:0 2.5rem}}
.ch-solo a{color:var(--text-1);text-decoration:none}
.ch-solo a:hover{color:var(--brand)}
.ch-solo p{margin:0}
.ch-solo p+p{margin-top:0}
.ch-solo h2{font-family:var(--disp);margin:0;letter-spacing:-.01em;line-height:1.08;font-weight:800;text-wrap:wrap}
.ch-solo .eyebrow{display:block;margin:0;gap:normal;font-family:var(--mono);font-size:var(--fs-xs);font-weight:500;letter-spacing:.15em;text-transform:uppercase;color:var(--brand);line-height:1.6}
.ch-solo .nav__list a:hover,.ch-solo .mnav__list a:hover{color:var(--brand)}
html:has(.nav.ch-solo){scroll-padding-top:5.5rem}
html:has(.nav.ch-solo) .skip-link{z-index:70}
/* generated copies */
.ch-solo .btn{display:inline-flex;align-items:center;justify-content:center;gap:.5rem;min-height:3rem;padding:.75rem 2rem;border-radius:var(--r-pill);font-family:var(--disp);font-weight:700;font-size:var(--fs-sm);border:1px solid transparent;cursor:pointer;white-space:nowrap;transition:transform .2s,box-shadow .2s,background .2s,border-color .2s,color .2s}
.ch-solo .btn-primary{background:var(--brand);border-color:var(--brand);color:var(--ink-000)}
.ch-solo .btn-primary:hover{background:var(--brand-hover);border-color:var(--brand-hover);color:var(--ink-000);box-shadow:0 10px 30px -6px rgba(0,231,239,.28);transform:translateY(-1px)}
.ch-solo .btn-ghost{background:transparent;border-color:var(--ink-400);color:var(--text-1)}
.ch-solo .btn-ghost:hover{border-color:var(--brand);color:var(--brand);transform:translateY(-1px)}
.ch-solo .btn-lg{min-height:3.5rem;padding:.875rem 2.25rem;font-size:var(--fs-base)}
.ch-solo .btn-block{width:100%}
.ch-solo .nav .btn{min-height:2.75rem;padding:.625rem 1.5rem}
.ch-solo .form__grid{display:grid;gap:1rem;grid-template-columns:1fr}
@media(min-width:40em){.ch-solo .form__grid{grid-template-columns:1fr 1fr}}
.ch-solo .field{display:flex;flex-direction:column;gap:.375rem}
.ch-solo .field label{font-family:var(--mono);font-size:12px;letter-spacing:.08em;text-transform:uppercase;color:var(--text-2)}
.ch-solo .field input,.ch-solo .field select{height:3rem;background:var(--ink-050);border:1px solid var(--ink-300);border-radius:var(--r);color:var(--text-1);padding:0 .875rem;font-family:var(--font);font-size:1rem;width:100%}
.ch-solo .field input::placeholder{color:var(--ink-500)}
.ch-solo .field input:focus,.ch-solo .field select:focus{border-color:var(--brand);outline:none}
.ch-solo .form__fine{font-family:var(--mono);font-size:var(--fs-xs);line-height:1.6;color:var(--text-3)}
.ch-solo.clock{position:fixed;inset:0;z-index:60;display:flex;align-items:flex-end;justify-content:center;padding:0}
.ch-solo.clock[hidden]{display:none}
.ch-solo .clock__backdrop{position:absolute;inset:0;background:rgba(0,0,0,.72);backdrop-filter:blur(4px)}
.ch-solo .clock__card{position:relative;width:100%;max-width:34rem;max-height:96vh;overflow:auto;background:var(--ink-050);border:1px solid var(--brand-teal);border-bottom:0;border-radius:var(--r-lg) var(--r-lg) 0 0;box-shadow:var(--shadow-lg);animation:clockIn .35s ease-out}
@media(min-width:48em){.ch-solo.clock{align-items:center;padding:1.5rem}.ch-solo .clock__card{border-bottom:1px solid var(--brand-teal);border-radius:var(--r-lg);max-height:92vh}}
@keyframes clockIn{from{opacity:0;transform:translateY(24px)}to{opacity:1;transform:none}}
@media(prefers-reduced-motion:reduce){.ch-solo .clock__card{animation:none}}
.ch-solo .clock__x{position:absolute;top:.625rem;right:.625rem;z-index:3;width:2.5rem;height:2.5rem;border-radius:50%;border:1px solid var(--ink-400);background:rgba(17,17,17,.7);color:var(--text-1);font-size:1.5rem;line-height:1;cursor:pointer}
.ch-solo .clock__x:hover{border-color:var(--brand);color:var(--brand)}
.ch-solo .clock__video{position:relative;background:#000;border-bottom:1px solid var(--ink-300);aspect-ratio:16/9;overflow:hidden}
.ch-solo .clock__video[hidden]{display:none}
.ch-solo .clock__video video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;background:#000}
.ch-solo .clock__video video::cue{font-family:var(--font);font-size:.95rem;background:rgba(17,17,17,.75);color:#fff}
.ch-solo .clock__sound{position:absolute;left:.75rem;bottom:.75rem;z-index:2;display:inline-flex;align-items:center;gap:.5rem;min-height:2.25rem;padding:.4rem .9rem;border-radius:var(--r-pill);border:1px solid rgba(255,255,255,.35);background:rgba(17,17,17,.7);color:#fff;font-family:var(--mono);font-size:.75rem;letter-spacing:.06em;cursor:pointer}
.ch-solo .clock__sound::before{content:"";width:0;height:0;border-left:8px solid var(--brand);border-top:5px solid transparent;border-bottom:5px solid transparent}
.ch-solo .clock__sound-off{display:none}
.ch-solo .clock__video.is-sound .clock__sound-on{display:none}
.ch-solo .clock__video.is-sound .clock__sound-off{display:inline}
.ch-solo .clock__video.is-sound .clock__sound::before{border-left-color:#fff}
.ch-solo .clock__form{position:relative;padding:1.5rem;display:flex;flex-direction:column}
@media(min-width:48em){.ch-solo .clock__form{padding:2rem}}
.ch-solo .clock__step{display:flex;flex-direction:column;gap:1rem}
.ch-solo .clock__step[hidden]{display:none}
.ch-solo .clock__step h2{font-size:1.5rem;line-height:1.15}
@media(min-width:48em){.ch-solo .clock__step h2{font-size:1.75rem}}
.ch-solo .clock__lede{color:var(--text-2);font-size:.9375rem;line-height:1.55}
.ch-solo .clock__step .form__grid{gap:.75rem}
@media(min-width:40em){.ch-solo .clock__step .form__grid{grid-template-columns:1fr 1fr}.ch-solo .clock__step .field--wide{grid-column:1/-1}}
.ch-solo .clock__step textarea{background:var(--ink-050);border:1px solid var(--ink-300);border-radius:var(--r);color:var(--text-1);padding:.625rem .875rem;font-family:var(--font);font-size:1rem;width:100%;resize:vertical;min-height:3rem}
.ch-solo .clock__step textarea:focus{border-color:var(--brand);outline:none}
.ch-solo .clock__step textarea::placeholder{color:var(--ink-500)}
.ch-solo .clock__skip{background:none;border:0;color:var(--text-3);font-family:var(--mono);font-size:var(--fs-xs);cursor:pointer;text-decoration:underline;text-underline-offset:3px;padding:.25rem;align-self:center}
.ch-solo .clock__skip:hover{color:var(--text-1)}
.ch-solo .lf__error{color:#ff8a80;font-size:.9375rem;line-height:1.5;margin:0}
.ch-solo .lf__error[hidden]{display:none}
.ch-solo .lf .field.is-bad input,.ch-solo .lf .field.is-bad select,.ch-solo .lf .field.is-bad textarea{border-color:#ff8a80}
.ch-solo .lf button[disabled]{opacity:.6;cursor:wait}
@media(max-width:760px){.ch-solo .clock__card{max-height:92vh;max-height:92dvh}}
@media(max-width:760px) and (max-height:760px){.ch-solo .clock__video{aspect-ratio:auto;height:26vh}}

/* ==========================================================================
   Components (after the .ch-solo base so equal-specificity rules here win)
   ========================================================================== */
/* ---- header (desktop) -------------------------------------------------- */
.nav{position:sticky;top:0;z-index:20;background:rgba(17,17,17,.85);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);border-bottom:1px solid var(--ink-150)}
.nav>.wrap{display:flex;align-items:center;justify-content:space-between;height:4.75rem;gap:1.5rem}
.nav a{text-decoration:none}
.nav__brand{display:inline-flex;align-items:center;gap:.875rem;flex:none;color:var(--text-1);text-decoration:none}
.nav__brand:hover{color:var(--text-1)}
.nav__logo{display:block;height:32px;width:auto;max-width:none;flex:none}
.nav__name{display:block;font-family:var(--disp);font-weight:650;font-size:16px;line-height:1.05;letter-spacing:-.035em;color:var(--text-1);border-left:1px solid var(--ink-200);padding-left:.875rem;white-space:nowrap}
.nav__dot{color:var(--brand)}
.nav__list{display:none;align-items:center;gap:2rem;font-family:var(--disp);font-weight:700;font-size:var(--fs-sm)}
.nav__list a{position:relative;color:var(--text-1);padding:.5rem 0}
.nav__list a:hover{color:var(--brand)}
.nav__list a span{color:var(--brand)}
.nav__list a[aria-current="page"]::after{content:"";position:absolute;left:0;right:0;bottom:0;height:2px;background:var(--brand)}
.nav__right{display:flex;align-items:center;gap:1rem}
.nav__tel{display:inline-flex;align-items:center;justify-content:center;gap:.5rem;min-height:44px;min-width:44px;font-family:var(--mono);font-size:var(--fs-sm);color:var(--text-1);white-space:nowrap}
.nav__tel:hover{color:var(--brand)}
.nav__tel .icon{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.nav__tel span{display:none}
.nav .btn{min-height:2.75rem;padding:.625rem 1.5rem}
.nav__menu{display:inline-flex;align-items:center;gap:.625rem;min-height:44px;padding:0 1rem;border:1px solid var(--ink-400);border-radius:var(--r-pill);background:transparent;color:var(--text-1);font-family:var(--disp);font-weight:700;font-size:var(--fs-sm);cursor:pointer;-webkit-tap-highlight-color:transparent}
.nav__menu:hover,.nav__menu[aria-expanded="true"]{border-color:var(--brand);color:var(--brand)}
.nav__burger{position:relative;display:block;width:18px;height:12px}
.nav__burger::before,.nav__burger::after,.nav__burger i{content:"";position:absolute;left:0;width:18px;height:2px;border-radius:2px;background:currentColor;transition:transform .2s,opacity .2s}
.nav__burger::before{top:0}
.nav__burger i{top:5px}
.nav__burger::after{top:10px}
.nav__menu[aria-expanded="true"] .nav__burger::before{transform:translateY(5px) rotate(45deg)}
.nav__menu[aria-expanded="true"] .nav__burger i{opacity:0}
.nav__menu[aria-expanded="true"] .nav__burger::after{transform:translateY(-5px) rotate(-45deg)}
@media(min-width:72em){.nav__tel span{display:inline}}
@media(min-width:64em){.nav__list{display:flex}.nav__menu{display:none}}
.nav a:focus-visible,.nav button:focus-visible,.mbar a:focus-visible,.footer a:focus-visible,.clock button:focus-visible,.clock a:focus-visible{outline:2px solid var(--brand);outline-offset:3px}

/* ---- phone menu (opens under the header) -------------------------------- */
.mnav{position:absolute;left:0;right:0;top:100%;height:calc(100vh - 100%);height:calc(100dvh - 100%);overflow-y:auto;overscroll-behavior:contain;background:var(--ink-000);border-top:1px solid var(--ink-150);padding:1rem 1.25rem calc(1.5rem + env(safe-area-inset-bottom,0px));display:flex;flex-direction:column;gap:1.25rem}
.mnav[hidden]{display:none}
.mnav__list{display:flex;flex-direction:column}
.mnav__list a{display:flex;align-items:center;min-height:3.5rem;border-bottom:1px solid var(--ink-150);font-family:var(--disp);font-weight:800;font-size:1.5rem;letter-spacing:-.01em;color:var(--text-1)}
.mnav__list a span{color:var(--brand)}
.mnav__list a:hover,.mnav__list a[aria-current="page"]{color:var(--brand)}
.mnav__reach{display:grid;grid-template-columns:1fr auto;gap:.75rem}
.mnav .btn{white-space:normal;text-align:center}
@media(min-width:48em){.mnav{padding-left:2.5rem;padding-right:2.5rem}}
html.ch-menu-open{overflow:hidden}   /* html only: overflow on body would make it the sticky header's scroller */

/* ---- phone bottom bar ---------------------------------------------------- */
.mbar{display:none}
@media(max-width:760px){
  .nav>.wrap{height:59px;gap:.75rem}
  .nav__logo{height:28px}
  .nav__name{font-size:14px;padding-left:.75rem}
  .nav__brand{gap:.75rem}
  .nav .nav__right .nav__tel,.nav .nav__right .btn{display:none}
  .mbar{display:grid;grid-template-columns:auto auto 1fr;gap:.5rem;position:fixed;left:0;right:0;bottom:0;z-index:40;padding:.5rem .75rem calc(.5rem + env(safe-area-inset-bottom,0px));background:rgba(17,17,17,.94);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);border-top:1px solid var(--ink-150);transform:translateY(110%);visibility:hidden;transition:transform .25s ease,visibility 0s linear .25s}
  .mbar.is-on{transform:none;visibility:visible;transition:transform .25s ease,visibility 0s}
}
@media(max-width:760px) and (prefers-reduced-motion:reduce){.mbar,.mbar.is-on{transition:none}}
.mbar__btn{display:inline-flex;align-items:center;justify-content:center;gap:.375rem;min-height:3rem;padding:0 .875rem;border:1px solid var(--ink-400);border-radius:var(--r-pill);color:var(--text-1);font-family:var(--disp);font-weight:700;font-size:var(--fs-sm);text-decoration:none;white-space:nowrap}
.mbar__btn:hover{border-color:var(--brand);color:var(--brand)}
.mbar__btn .icon{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.mbar .btn{min-height:3rem;padding:.625rem 1rem}

/* ---- footer --------------------------------------------------------------- */
.footer{padding:3.5rem 0;border-top:1px solid var(--ink-150);font-family:var(--font)}
.footer>.wrap{display:flex;flex-direction:column;flex-wrap:nowrap;justify-content:flex-start;align-items:stretch;gap:2.25rem}
.footer a{color:var(--text-1);text-decoration:none}
.footer a:hover{color:var(--brand)}
.footer__brand{display:flex;flex-direction:row;flex-wrap:wrap;align-items:center;gap:1rem 2rem;max-width:none}
.footer__brand .nav__brand{flex:none}
.footer__about{display:flex;flex-direction:column;gap:.375rem}
.footer__tag{font-family:var(--mono);font-size:12px;letter-spacing:.15em;text-transform:uppercase;color:var(--brand)}
.footer__about p{margin:0;font-size:.875rem;line-height:1.6;color:var(--text-3)}
.footer__cols{display:grid;grid-template-columns:1fr 1fr;gap:2rem 2.5rem;padding-top:2.25rem;border-top:1px solid var(--ink-150);font-size:var(--fs-sm);line-height:1.6}
.footer__col{display:flex;flex-direction:column;gap:.625rem;min-width:0}
.footer__col a{display:block;overflow-wrap:anywhere}
.footer__col--reach{grid-column:1/-1}
.footer__h{font-family:var(--mono);font-size:12px;letter-spacing:.1em;text-transform:uppercase;color:var(--text-3)}
@media(min-width:40em){.footer__cols{grid-template-columns:repeat(3,minmax(0,auto));justify-content:start}.footer__col--reach{grid-column:auto}}
@media(min-width:64em){.footer__cols{display:flex;justify-content:space-between;gap:2rem}}
@media(max-width:760px){.footer{padding-bottom:calc(3.5rem + 72px + env(safe-area-inset-bottom,0px))}}   /* clear the bottom bar */

/* ---- draft pop-up / phone bottom sheet (#clock; base rules live in styles.css) */
.clock{z-index:60}
.clock__card:focus{outline:none}
.clock__step .clock__lede+.form__grid{margin-top:0}
@media(max-width:760px){
  .clock__card{max-height:92vh;max-height:92dvh;padding-bottom:env(safe-area-inset-bottom,0px)}
}
@media(max-width:760px) and (max-height:760px){
  .clock__video{aspect-ratio:auto;height:26vh}
  .clock__video video{object-position:50% 30%}
}
.ch-lock{overflow:hidden}

/* ---- standalone button for pages without styles.css (/about/ body uses it) */
.ch-btn{display:inline-flex;align-items:center;justify-content:center;gap:.5rem;min-height:3rem;padding:.75rem 2rem;border-radius:999px;font-family:"Archivo","Helvetica Neue",Arial,sans-serif;font-weight:700;font-size:.9375rem;line-height:1.3;border:1px solid transparent;cursor:pointer;white-space:nowrap;text-decoration:none;letter-spacing:normal;transition:transform .2s,box-shadow .2s,background .2s,border-color .2s,color .2s}
.ch-btn.btn-primary{background:#00e7ef;border-color:#00e7ef;color:#111111}
.ch-btn.btn-primary:hover{background:#6ff3f8;border-color:#6ff3f8;color:#111111;box-shadow:0 10px 30px -6px rgba(0,231,239,.28);transform:translateY(-1px)}
.ch-btn.btn-ghost{background:transparent;border-color:#4f4f4f;color:#f2f2f2}
.ch-btn.btn-ghost:hover{border-color:#00e7ef;color:#00e7ef;transform:translateY(-1px)}
.ch-btn.btn-ink{background:#111111;border-color:#111111;color:#f2f2f2}
.ch-btn.btn-ink:hover{background:#282828;color:#f2f2f2}
.ch-btn.btn-lg{min-height:3.5rem;padding:.875rem 2.25rem;font-size:1.0625rem}
.ch-btn:focus-visible{outline:2px solid #00e7ef;outline-offset:3px}