:root{--night:#0a0e18;--panel:#121a29;--line:#1f2a3d;--snow:#e8edf5;--frost:#98a8c0;--faint:#6b7d96;--torch:#ff8c3a;--ember:#c2410c}
@media (prefers-color-scheme: light){:root{--night:#f2f5fa;--panel:#ffffff;--line:#d8e0ec;--snow:#10151f;--frost:#4a5768;--faint:#5a6678;--torch:#c2410c;--ember:#9a3412}}
@font-face{font-family:'Cormorant Garamond';font-style:normal;font-weight:600;font-display:swap;src:url('/fonts/cormorant-garamond-latin-600-normal.woff2') format('woff2')}
@font-face{font-family:'IBM Plex Sans';font-style:normal;font-weight:400;font-display:swap;src:url('/fonts/ibm-plex-sans-latin-400-normal.woff2') format('woff2')}
@font-face{font-family:'IBM Plex Sans';font-style:normal;font-weight:500;font-display:swap;src:url('/fonts/ibm-plex-sans-latin-500-normal.woff2') format('woff2')}

*{box-sizing:border-box}
:root{color-scheme:light dark}
body{margin:0;background:var(--night);color:var(--snow);
  font:400 16px/1.7 'IBM Plex Sans',-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  -webkit-font-smoothing:antialiased}

/* Cormorant has a hard floor of 24px. Below that it goes weak, so it never
   appears at body size -- headings only, and h3 is deliberately Plex. */
h1,h2{font-family:'Cormorant Garamond',Georgia,serif;font-weight:600;letter-spacing:-.01em}
h1{font-size:clamp(32px,6vw,44px);line-height:1.1;margin:22px 0 8px}
h2{font-size:26px;margin:38px 0 12px}
h3{font-size:16px;font-weight:500;margin:26px 0 8px}

p,li{color:var(--frost)}
p{margin:0 0 14px}
ol{padding-left:21px;margin:0 0 14px}
ul{list-style:none;padding-left:0;margin:0 0 14px}
li{margin-bottom:8px}
strong{color:var(--snow);font-weight:500}
address{font-style:normal;color:var(--frost)}

a{color:var(--torch);text-decoration:none;border-bottom:1px solid var(--ember)}
a:hover{border-bottom-color:var(--torch)}

/* Torch marks anything focused. Never removed without replacement. */
:focus-visible{outline:2px solid var(--torch);outline-offset:3px;border-radius:2px}

@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.001ms!important}
}

:root{--bell-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 26'%3E%3Cpath d='M10 1v3' stroke='%23000' stroke-width='1.3' fill='none' stroke-linecap='round'/%3E%3Cpath d='M10 4c-4 0-5 4-5 9l-1 5h12l-1-5c0-5-1-9-5-9z' stroke='%23000' stroke-width='1.4' fill='none' stroke-linejoin='round'/%3E%3Ccircle cx='10' cy='21' r='1.7' fill='%23000'/%3E%3C/svg%3E")}
.wrap{max-width:720px;margin:0 auto;padding:0 24px;position:relative;z-index:2}
.wrap.narrow{max-width:660px}
header{padding:56px 0 0}
.back{font-size:14px;color:var(--faint);border-bottom:0}
.back:hover{color:var(--torch)}
.meta{color:var(--faint);font-size:14px;margin:0 0 8px}

/* Bell replaces the default bullet. */
ul li{position:relative;padding-left:26px}
ul li::before{content:'';position:absolute;left:0;top:.35em;width:13px;height:16px;
  background-color:var(--faint);
  -webkit-mask:var(--bell-mask) no-repeat center/contain;
  mask:var(--bell-mask) no-repeat center/contain}

.section-label{display:flex;align-items:center;gap:9px;font-family:'IBM Plex Sans',sans-serif;
  font-size:12px;font-weight:500;text-transform:uppercase;letter-spacing:.14em;
  color:var(--faint);margin:0 0 16px}

.rule{margin:56px 0;color:var(--frost)}
.rule svg{display:block;width:100%;height:18px}

table{width:100%;border-collapse:collapse;margin:16px 0;font-size:14.5px;
  border:1px solid var(--line);border-radius:9px;overflow:hidden}
th,td{padding:10px 12px;text-align:left;border-bottom:1px solid var(--line);
  vertical-align:top;color:var(--frost)}
th{background:var(--panel);color:var(--snow);font-size:12.5px;text-transform:uppercase;letter-spacing:.05em}
tr:last-child td{border-bottom:none}

.callout{border:1px solid var(--line);border-left:3px solid var(--ember);border-radius:0;
  padding:15px 17px;margin:20px 0;background:var(--panel)}
.callout p:last-child{margin-bottom:0}
.primary{border:1px solid var(--line);border-left:3px solid var(--ember);border-radius:0;
  padding:20px 22px;margin:24px 0;background:var(--panel)}
.primary h2{margin-top:0}
/* #fff is deliberate, not a lapse. A button that is always dark-on-warm needs a
   scheme-invariant foreground and the palette has none: --snow inverts to near
   black in light mode, --panel to near black in dark. 5.18:1 on dark ember,
   7.31:1 on light. */
.btn{display:inline-block;margin-top:8px;background:var(--ember);color:#fff;border-bottom:0;
  padding:11px 20px;border-radius:6px;font-weight:500;font-size:15px}
.btn:hover{background:var(--torch);color:var(--night)}
.todo{color:var(--torch);font-weight:500}

footer{padding-top:24px;padding-bottom:60px;
  color:var(--faint);font-size:13.5px;display:flex;justify-content:space-between;gap:18px;flex-wrap:wrap}
.footer-chain{display:block;width:100%;height:14px;margin-top:56px;margin-bottom:20px;color:var(--line)}
footer nav{display:flex;gap:18px;flex-wrap:wrap}
footer a{color:var(--faint);border-bottom:0}
footer a:hover{color:var(--torch)}

.primary form{display:flex;flex-direction:column;gap:8px;margin-top:10px}
.primary form label{font-size:14px;font-weight:500;color:var(--snow)}
.primary form input[type="email"]{padding:10px 12px;border:1px solid var(--faint);
  border-radius:4px;font:inherit;max-width:340px;background:var(--night);color:var(--snow)}
.primary form button{align-self:flex-start;cursor:pointer;border:0;font:inherit;font-weight:500;font-size:15px}

@media(max-width:620px){.wrap{padding:0 18px}}
.mark{display:flex;align-items:center;gap:13px;margin-bottom:34px}
.mark span{font-family:'Cormorant Garamond',Georgia,serif;font-size:15px;font-weight:600;
  letter-spacing:.26em;text-transform:uppercase;color:var(--frost)}
.hero h1{margin:0 0 18px}
.lede{font-size:clamp(17px,2.4vw,19px);color:var(--frost);margin:0;max-width:34em}
.lede + .lede{margin-top:14px}
.work{border:1px solid var(--line);border-radius:10px;padding:22px 24px;background:var(--panel)}
.work h3{margin:0 0 7px;font-size:18px;font-weight:500}
.work .tag{display:inline-block;font-size:11.5px;letter-spacing:.06em;text-transform:uppercase;
  color:var(--torch);border:1px solid var(--line);border-radius:99px;padding:3px 10px;margin-bottom:11px}
.work p{margin:0 0 12px;font-size:15px}
.work p:last-child{margin-bottom:0}

/* Inserted by src/client/atmosphere.js. Absent entirely without JavaScript. */
.atmosphere{position:fixed;inset:0;z-index:0;pointer-events:none}
/* The flame constant, deliberately NOT var(--torch). Light-mode --torch is
   #c2410c, which composites over the light page to a grey-pink smudge; the dark
   value composites to a warm peach that reads as sun on snow in both schemes.
   The same literal appears in src/client/atmosphere.js. */
.torch{position:fixed;left:0;top:0;width:520px;height:520px;margin:-260px 0 0 -260px;
  z-index:1;pointer-events:none;will-change:transform;
  background:radial-gradient(circle closest-side,rgba(255,140,58,.16),rgba(255,140,58,.05) 45%,transparent 72%)}
/* /holiday-spirit only. Loaded on every page because the build concatenates
   one stylesheet -- keep every selector prefixed hs- so nothing leaks. */
.hs-status{display:inline-block;font-size:11.5px;letter-spacing:.06em;text-transform:uppercase;
  color:var(--torch);border:1px solid var(--line);border-radius:99px;padding:3px 10px;margin-bottom:16px}

.hs-map{border:1px solid var(--line);border-radius:10px;background:var(--panel);
  padding:18px 20px;margin:26px 0}
.hs-map-note{font-size:13.5px;color:var(--faint);margin:12px 0 0}

.hs-steps{list-style:none;padding:0;margin:0;display:grid;gap:20px;
  grid-template-columns:repeat(auto-fit,minmax(180px,1fr))}
.hs-steps li{margin:0;padding:0}
/* chrome.css hangs a bell on `ul li`. This is an ol, so the bell does not
   reach it today -- but the rule is one selector away from doing so, and both
   lists on this page are tables of content rather than prose lists. */
.hs-steps li::before{content:none}
.hs-steps h3{margin:12px 0 6px}
.hs-steps p{font-size:14.5px;margin:0}
/* Sections here are separated only by the trailing margin of whatever ends
   them, because .section-label carries no margin-top. A section ending in prose
   gets base.css's `p{margin:0 0 14px}`; one ending in a grid got nothing, and
   the next label sat flush against it. Match the paragraph rhythm rather than
   inventing a second spacing scale. */
.hs-steps{margin-bottom:14px}

/* 9:16 is the Android screenshot aspect, so a real capture drops in without
   touching markup or CSS. Until then this is a labelled frame, not a broken
   image -- the caption below carries the step either way. */
.hs-shot{aspect-ratio:9/16;max-height:260px;border:1px solid var(--line);border-radius:8px;
  background:var(--panel)}

/* Same flush problem as .hs-steps above, before "What it touches". */
.hs-holidays{list-style:none;padding:0;margin:16px 0 14px;display:grid;gap:1px;
  grid-template-columns:repeat(auto-fit,minmax(210px,1fr));background:var(--line);
  border:1px solid var(--line);border-radius:9px;overflow:hidden}
/* The padding here also has to beat chrome.css's `ul li{padding-left:26px}`,
   which reserves the bell's gutter. content:none removes the bell; without
   this the gutter it sat in would survive it. */
.hs-holidays li{margin:0;padding:11px 14px;background:var(--night);
  display:flex;justify-content:space-between;gap:12px;align-items:baseline}
.hs-holidays li::before{content:none}
.hs-holidays strong{color:var(--snow);font-weight:500;font-size:14.5px}
.hs-holidays span{color:var(--faint);font-size:12.5px}

/* The SVG scales with the viewport, so below about 560px the house targets
   drop under WCAG 2.2 SC 2.5.8's 24x24 minimum -- and the spacing exception
   does not save them, because the two rows sit ~40 user units apart. Rather
   than enlarge the rects (they would collide between rows), stop the street
   shrinking and let the map scroll. */
.hs-map{overflow-x:auto}
.hs-street{display:block;width:100%;height:auto;min-width:560px}
.hs-house path{fill:none;stroke:var(--line);stroke-width:1.4}
/* Never painted, always hit. pointer-events:all rather than a transparent
   fill because it is the property that says what this rect is for. */
.hs-hit{fill:none;pointer-events:all}
.hs-house .hs-glow{fill:none}
.hs-house.is-lit path{stroke:var(--frost)}
.hs-house.is-lit .hs-glow{fill:var(--torch)}

/* Live state. is-live means the torch mounted; is-animated means it may also
   transition -- they are separate because a reader who asked for less motion
   still gets the working map, just an instant one. */
.hs-map.is-animated .hs-house path,
.hs-map.is-animated .hs-house .hs-glow{transition:stroke .18s ease,fill .18s ease}
.hs-map.is-live .hs-house{cursor:pointer}
.hs-map.is-live .hs-house:focus-visible{outline:2px solid var(--torch);outline-offset:2px}
.hs-list{list-style:none;padding:0;margin:14px 0 0;display:flex;flex-wrap:wrap;gap:8px}
.hs-list li{margin:0;padding:4px 10px;font-size:13px;color:var(--snow);
  background:var(--panel);border:1px solid var(--line);border-radius:99px}
.hs-list li::before{content:none}

/* The lede links "we're working on it" to this section. Without a scroll margin
   the jump lands the heading flush against the top of the viewport, which reads
   as a broken page rather than an arrival. */
#holidays{scroll-margin-top:24px}