/* Everett marketing site — spec 0110 § 4.2.
   The one stylesheet. Tokens copied from the design system's
   colors_and_type.css / dimension.css; the inline styles of the five .dc.html
   prototypes become the classes below, one per distinct declaration set.

   This deliberately does NOT load static/css/design.css. The marketing site
   shares no component with the app, and coupling them means a reader-CSS
   change re-renders the home page (§ 4.2).

   Zero third-party requests: the fonts are self-hosted beside this file, which
   is what lets /privacy say "we don't track you across other sites" as a fact
   about the markup rather than a promise. */

/* ---------- Fonts (self-hosted; § 4.2 item 3) ---------- */
/* Two variable files and one static italic. Google serves ONE file per family
   across every weight you ask for -- requesting 400 and 500 separately returns
   the same bytes twice -- so these declare a weight RANGE against one file.
   The italic is the static 400 (25 KB) rather than the variable italic (48 KB):
   the pages use one italic weight, so the axis would be dead payload. */
@font-face {
  font-family: "EB Garamond";
  src: url("fonts/EBGaramond.woff2") format("woff2");
  font-weight: 400 800;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "EB Garamond";
  src: url("fonts/EBGaramond-Italic.woff2") format("woff2");
  font-weight: 400;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: "Source Sans 3";
  src: url("fonts/SourceSans3.woff2") format("woff2");
  font-weight: 200 900;
  font-style: normal;
  font-display: swap;
}

/* ---------- Tokens ---------- */
:root {
  --paper: #fbfaf7;
  --paper-raised: #ffffff;
  --paper-sunken: #f4f2ed;
  --paper-edge: #ebe8e0;

  --ink: #1a1a1a;
  --ink-soft: #3d3a36;
  --ink-muted: #6b6763;
  --ink-faint: #b0adae;
  --ink-ghost: #d9d5ce;

  --highlight: #ffd200;
  --highlight-wash: rgba(255, 210, 0, 0.38);
  --highlight-faint: rgba(255, 210, 0, 0.16);

  --font-serif: "EB Garamond", "Garamond", "Georgia", ui-serif, serif;
  --font-sans: "Source Sans 3", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --font-mono: ui-monospace, "SF Mono", Menlo, monospace;

  --text-xs: 12px;
  --text-sm: 14px;
  --text-base: 16px;
  --text-md: 18px;
  --text-lg: 22px;

  --leading-tight: 1.15;
  --leading-snug: 1.35;
  --leading-normal: 1.5;
  --leading-reader: 1.6;

  --tracking-tight: -0.02em;
  --tracking-snug: -0.01em;
  --tracking-wide: 0.04em;

  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 24px;
  --space-6: 32px;
  --space-7: 48px;
  --space-8: 64px;
  --space-9: 96px;

  --radius-image: 1px;
  --radius-sm: 6px;
  --radius-md: 8px;

  --shadow-lg: 0 8px 24px rgba(26, 26, 26, 0.10), 0 2px 6px rgba(26, 26, 26, 0.04);

  --border-hairline: 1px solid var(--paper-edge);

  --measure: 1180px;
  --measure-read: 760px;
}

* { box-sizing: border-box; }

html { color-scheme: light; }

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--font-serif);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

a {
  color: var(--ink-soft);
  text-decoration-color: var(--ink-ghost);
  text-underline-offset: 3px;
}
a:hover { color: var(--ink); background: var(--highlight-faint); }

img { max-width: 100%; }

/* The highlighter wash, drawn as a hard-edged band. Rule 2's one accent used
   the way rule 2 wants it; the gradient is the mechanism, not the look
   (§ 4.3). */
.mark { background: linear-gradient(to top, var(--highlight-wash) 0 40%, transparent 40%); padding: 0 0.08em; }
.mark-hi { background: linear-gradient(to top, var(--highlight-wash) 0 46%, transparent 46%); }
.mark-flat { background: var(--highlight-wash); }

/* ---------- Ported classes (generated from the design; see § 4.2) ---------- */
.article { max-width: 760px; margin: 0 auto; padding: var(--space-9) var(--space-6) var(--space-8); }
.b { font-weight: 600; }
.band { border-top: var(--border-hairline); background: var(--paper); }
.btn { text-decoration: none; background: var(--ink); color: var(--paper-raised); padding: 9px 16px; border-radius: var(--radius-sm); font-weight: 600; }
.btn.btn-lg { text-decoration: none; font-family: var(--font-sans); font-size: var(--text-base); font-weight: 600; background: var(--ink); color: var(--paper-raised); padding: 13px 24px; border-radius: var(--radius-sm); }
.btn.btn-lg.btn--2 { text-align: center; }
.btn.btn-sm { text-decoration: none; background: var(--ink); color: var(--paper-raised); padding: 8px 14px; white-space: nowrap; border-radius: var(--radius-sm); font-weight: 600; }
.byline { display: flex; align-items: center; gap: var(--space-4); }
.code { font-family: var(--font-mono); font-size: 0.9em; }
.cols { max-width: 1180px; margin: 0 auto; padding: var(--space-8) var(--space-6) var(--space-9); display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: var(--space-7) var(--space-8); align-items: start; }
.cta-note { font-family: var(--font-sans); font-size: var(--text-xs); line-height: var(--leading-normal); color: var(--ink-muted); text-align: center; }
.cta-stack { display: flex; flex-direction: column; gap: var(--space-2); align-items: center; width: fit-content; }
.cta-stack.cta-stack--1 { margin-top: var(--space-3); }
.cta-stack.cta-stack--2 { margin-top: var(--space-6); }
.cta-stack.cta-stack--3 { margin-top: var(--space-7); }
.figure.figure--1 { margin: 0; }
.figure.figure--2 { margin: var(--space-7) 0 0; }
.flow-4 { display: flex; flex-direction: column; gap: var(--space-4); }
.flow-4.flow-4--1 { margin-top: var(--space-5); }
.flow-4.flow-4--2 { max-width: 62ch; margin-top: var(--space-6); }
.flow-5 { margin-top: var(--space-5); display: flex; flex-direction: column; gap: var(--space-5); }
.flow-7 { margin-top: var(--space-7); display: flex; flex-direction: column; gap: var(--space-7); }
.flow-7-5 { margin-top: var(--space-7); display: flex; flex-direction: column; gap: var(--space-5); }
.foot-blurb { font-family: var(--font-serif); font-size: var(--text-base); line-height: var(--leading-normal); color: var(--ink-muted); margin: var(--space-3) 0 0; max-width: 40ch; }
.foot-brand { font-family: var(--font-serif); font-size: var(--text-lg); font-weight: 500; color: var(--ink); }
.foot-col { display: flex; flex-direction: column; gap: var(--space-2); font-family: var(--font-sans); font-size: var(--text-sm); }
.foot-grid { max-width: 1180px; margin: 0 auto; padding: var(--space-8) var(--space-6); display: grid; grid-template-columns: minmax(240px, 1.4fr) repeat(auto-fit, minmax(140px, 1fr)); gap: var(--space-7); }
.foot-h { font-size: var(--text-xs); font-weight: 600; text-transform: uppercase; letter-spacing: var(--tracking-wide); color: var(--ink-faint); margin-bottom: var(--space-1); }
.foot-legal { font-family: var(--font-sans); font-size: var(--text-xs); color: var(--ink-faint); margin-top: var(--space-2); }
.foot-mail { color: var(--ink-soft); }
.foot-note { max-width: 1180px; margin: 0 auto; padding: 0 var(--space-6) var(--space-8); }
.foot-note-p { font-family: var(--font-sans); font-size: var(--text-sm); color: var(--ink-muted); margin: 0; }
.frame { max-width: 760px; background: var(--paper-sunken); border: var(--border-hairline); border-radius: var(--radius-md); padding: var(--space-3); }
.frame.frame-full { background: var(--paper-sunken); border: var(--border-hairline); border-radius: var(--radius-md); padding: var(--space-3); }
.frame-head { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); padding: var(--space-1) var(--space-2) var(--space-3); }
.frame-label { font-family: var(--font-sans); font-size: var(--text-xs); font-weight: 600; text-transform: uppercase; letter-spacing: var(--tracking-wide); color: var(--ink-faint); }
.frame-note { font-family: var(--font-sans); font-size: var(--text-xs); color: var(--ink-faint); }
.h-col { font-family: var(--font-serif); font-weight: 500; font-size: var(--text-xl); color: var(--ink-soft); margin: 0 0 var(--space-6); padding-bottom: var(--space-3); border-bottom: var(--border-hairline); }
.h1 { font-family: var(--font-serif); font-weight: 500; font-size: clamp(38px, 5.2vw, 64px); line-height: 1.08; letter-spacing: var(--tracking-tight); color: var(--ink-soft); margin: 0; max-width: 24ch; text-wrap: pretty; }
.h1-page { font-family: var(--font-serif); font-weight: 500; color: var(--ink-soft); margin: 0; }
.h1-page.h1-page--1 { font-size: clamp(34px, 4.4vw, 48px); line-height: 1.12; letter-spacing: var(--tracking-snug); }
.h1-page.h1-page--2 { font-size: clamp(34px, 4.4vw, 52px); line-height: 1.12; letter-spacing: var(--tracking-snug); text-wrap: pretty; }
.h1-page.h1-page--3 { font-size: clamp(36px, 4.6vw, 56px); line-height: 1.1; letter-spacing: var(--tracking-tight); max-width: 24ch; }
.h2 { font-family: var(--font-serif); font-weight: 500; font-size: clamp(30px, 3.4vw, 42px); line-height: var(--leading-snug); color: var(--ink-soft); margin: 0; text-wrap: pretty; }
.h2.h2--2 { max-width: 30ch; }
.h2.h2-close { font-family: var(--font-serif); font-weight: 500; font-size: clamp(34px, 4vw, 52px); line-height: var(--leading-tight); letter-spacing: var(--tracking-snug); color: var(--ink-soft); margin: 0; white-space: nowrap; }
.h2.h2-wide { font-family: var(--font-serif); font-weight: 500; line-height: var(--leading-snug); color: var(--ink-soft); }
.h2.h2-wide.h2--1 { font-size: clamp(28px, 3.2vw, 40px); margin: 0 0 var(--space-7); }
.h2.h2-wide.h2--2 { font-size: clamp(30px, 3.4vw, 42px); margin: 0; }
.h2-rule { font-family: var(--font-serif); font-weight: 500; font-size: clamp(22px, 2.4vw, 28px); line-height: var(--leading-snug); color: var(--ink-soft); margin: var(--space-8) 0 0; padding-bottom: var(--space-3); border-bottom: var(--border-hairline); }
.h3 { font-family: var(--font-serif); font-weight: 500; font-size: clamp(24px, 2.6vw, 32px); line-height: var(--leading-snug); color: var(--ink-soft); margin: var(--space-8) 0 0; }
.illus { display: block; flex: 0 0 auto; width: 280px; max-width: 100%; height: auto; margin: 0 auto; }
.lede { font-family: var(--font-serif); font-size: clamp(19px, 2vw, 24px); line-height: var(--leading-normal); color: var(--ink); margin: var(--space-6) 0 0; max-width: 60ch; text-wrap: pretty; }
.lede.lede-sm { font-family: var(--font-serif); font-size: clamp(19px, 1.8vw, 22px); line-height: var(--leading-normal); color: var(--ink); margin: 0; }
.li { font-family: var(--font-serif); font-size: var(--text-md); line-height: var(--leading-reader); color: var(--ink); }
.li-sub { line-height: var(--leading-reader); }
.list { margin: var(--space-4) 0 0; padding-left: 1.4em; display: flex; flex-direction: column; gap: var(--space-3); }
.list-num { margin: var(--space-5) 0 0; padding-left: 1.6em; display: flex; flex-direction: column; gap: var(--space-4); }
.list-sub { margin: var(--space-3) 0 0; padding-left: 1.4em; display: flex; flex-direction: column; gap: var(--space-2); }
.mark { background: linear-gradient(to top, var(--highlight-wash) 0 40%, transparent 40%); padding: 0 0.08em; }
.mark.mark-hi { background: linear-gradient(to top, var(--highlight-wash) 0 46%, transparent 46%); }
.mark-flat { background: var(--highlight-wash); }
.meta { font-family: var(--font-sans); font-size: var(--text-sm); color: var(--ink-muted); margin: var(--space-4) 0 0; }
.nav { max-width: 1180px; margin: 0 auto; padding: var(--space-4) var(--space-6); display: flex; align-items: baseline; justify-content: space-between; gap: var(--space-6); }
.nav-link { text-decoration: none; color: var(--ink-muted); }
.nav-link.is-current { text-decoration: none; color: var(--ink); }
.nav-links { display: flex; align-items: center; gap: var(--space-5); font-family: var(--font-sans); font-size: var(--text-sm); }
.p { font-family: var(--font-serif); font-size: var(--text-md); line-height: var(--leading-reader); color: var(--ink); margin: 0; }
.p.byline-p { font-family: var(--font-serif); font-size: 20px; line-height: var(--leading-reader); color: var(--ink); margin: 0; }
.p.p-base { font-family: var(--font-serif); font-size: var(--text-base); line-height: var(--leading-normal); color: var(--ink); margin: 0; }
.p.p-base.p-narrow { font-family: var(--font-serif); font-size: var(--text-base); line-height: var(--leading-normal); color: var(--ink); margin: 0; max-width: 54ch; }
.p.p-lg { font-family: var(--font-serif); font-size: var(--text-lg); line-height: var(--leading-normal); color: var(--ink); margin: 0; }
.p.p-muted { font-family: var(--font-serif); font-size: var(--text-md); line-height: var(--leading-reader); color: var(--ink-muted); margin: 0; }
.p.p-signoff { font-family: var(--font-serif); font-size: var(--text-md); line-height: var(--leading-reader); color: var(--ink); margin: var(--space-8) 0 0; padding-top: var(--space-7); border-top: var(--border-hairline); }
.p.p-t4 { font-family: var(--font-serif); font-size: var(--text-md); line-height: var(--leading-reader); color: var(--ink); margin: var(--space-4) 0 0; }
.p.p-t5 { font-family: var(--font-serif); font-size: var(--text-md); line-height: var(--leading-reader); color: var(--ink); margin: var(--space-5) 0 0; }
.p.p-t5.p-measure { font-family: var(--font-serif); font-size: var(--text-md); line-height: var(--leading-reader); color: var(--ink); margin: var(--space-5) 0 0; }
.p.p-t5.p-measure.p--1 { max-width: 60ch; }
.p.p-t5.p-measure.p--2 { max-width: 64ch; }
.p-flow { max-width: 64ch; margin-top: var(--space-5); display: flex; flex-direction: column; gap: var(--space-4); }
.page { background: var(--paper); color: var(--ink); font-family: var(--font-serif); }
.portrait { display: block; width: 56px; height: 56px; flex: none; border-radius: 50%; object-fit: cover; border: var(--border-hairline); }
.q { font-family: var(--font-sans); font-size: var(--text-base); font-weight: 600; color: var(--ink); margin: 0 0 var(--space-2); }
.qa { display: flex; flex-direction: column; gap: var(--space-6); }
.shot { display: block; width: 100%; height: auto; border: var(--border-hairline); border-radius: var(--radius-image); }
.shot.shot-raised { display: block; width: 100%; height: auto; border: var(--border-hairline); border-radius: var(--radius-image); background: var(--paper-raised); }
.sign-off { margin-top: var(--space-8); padding-top: var(--space-7); border-top: var(--border-hairline); display: flex; flex-direction: column; gap: var(--space-5); }
.site-foot { border-top: var(--border-hairline); background: var(--paper-sunken); }
.site-head { position: sticky; top: 0; z-index: 10; background: var(--paper); border-bottom: var(--border-hairline); }
.split { max-width: 1180px; margin: 0 auto; padding: var(--space-9) var(--space-6); display: flex; flex-wrap: wrap-reverse; gap: var(--space-7); align-items: flex-end; }
.split-text { flex: 1 1 420px; min-width: 0; }
.step { background: var(--paper-raised); border: var(--border-hairline); border-radius: var(--radius-md); padding: var(--space-5); }
.step-n { font-family: var(--font-sans); font-size: var(--text-xs); font-weight: 600; letter-spacing: var(--tracking-wide); color: var(--ink-faint); margin-bottom: var(--space-3); }
.steps { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: var(--space-6); }
.tool { display: flex; flex-direction: column; gap: var(--space-3); }
.tool-h { font-family: var(--font-sans); font-size: var(--text-base); font-weight: 600; color: var(--ink); margin: var(--space-2) 0 0; }
.tool-p { font-family: var(--font-sans); font-size: var(--text-sm); line-height: var(--leading-normal); color: var(--ink-muted); margin: 0; }
.tool-shot { aspect-ratio: 4 / 3; border: var(--border-hairline); border-radius: var(--radius-image); background: var(--paper-sunken); overflow: hidden; }
.tool-shot img { display: block; width: 100%; height: 100%; object-fit: cover; }
.tools { margin-top: var(--space-7); display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr)); gap: var(--space-7) var(--space-6); }
.wordmark { text-decoration: none; font-family: var(--font-serif); font-size: var(--text-lg); font-weight: 500; letter-spacing: var(--tracking-snug); color: var(--ink); }
.wrap { max-width: 1180px; margin: 0 auto; padding: var(--space-9) var(--space-6); }
.wrap.wrap-hero { background: var(--paper); max-width: 1180px; margin: 0 auto; padding: var(--space-9) var(--space-6) var(--space-8); }

/* ---------- The nav: one sticky header, two layouts ----------
   Both layouts are in the markup and CSS chooses. The header must be a direct
   child of .page: `position: sticky` sticks only within its parent, and the
   first port wrapped each layout in its own div, which made it scroll away. */
.nav.nav-narrow { display: none; max-width: none; padding: var(--space-2) var(--space-5); align-items: center; gap: var(--space-3); }
.narrow-start { display: flex; align-items: center; gap: var(--space-2); }
.narrow-end { display: flex; align-items: center; gap: var(--space-4); font-family: var(--font-sans); font-size: var(--text-sm); }
.narrow-end .nav-link { white-space: nowrap; padding: 12px 0; }
.menu-btn { display: flex; align-items: center; justify-content: center; width: 44px; height: 44px; padding: 0; border: var(--border-hairline); background: var(--paper-sunken); color: var(--ink-muted); border-radius: var(--radius-sm); cursor: pointer; }
.menu-btn:hover { background: var(--paper-edge); color: var(--ink); }
.menu-btn svg { transition: transform 120ms ease; }
.site-head:has(.sheet:popover-open) .menu-btn svg { transform: rotate(180deg); }

/* The phone menu: a bottom sheet. A native popover, not the prototype's
   script -- the browser opens it from `popovertarget`, closes it on Escape or a
   tap outside, and sets aria-expanded. Never give .sheet a `display`: the UA's
   `[popover]:not(:popover-open) { display: none }` is what keeps it shut. */
.sheet { inset: auto 0 0; width: auto; max-width: none; height: auto; margin: 0; border: 0; background: var(--paper-raised); color: var(--ink); border-radius: 16px 16px 0 0; box-shadow: var(--shadow-lg); padding: var(--space-3) var(--space-4) var(--space-6); font-family: var(--font-sans); font-size: var(--text-md); }
.sheet::backdrop { background: rgba(26, 26, 26, 0.3); }
.sheet-handle { display: block; width: 40px; height: 4px; padding: 0; border: 0; border-radius: 2px; background: var(--paper-edge); margin: 0 auto var(--space-4); cursor: pointer; }
.sheet-links { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-2); }
.sheet-link { display: flex; align-items: center; gap: var(--space-3); min-height: 48px; padding: 0 var(--space-3); border-radius: var(--radius-md); text-decoration: none; color: var(--ink); }
.sheet-link:hover, .sheet-link.is-current { color: var(--ink); background: var(--paper-sunken); }
.sheet-link.is-current::after { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--ink); }
.sheet-icon { display: flex; color: var(--ink-muted); }
.sheet-label { flex: 1; }

/* ---------- Responsive: the media query that replaces the prototype's JS ----------
   The design switches headers with a DCLogic resize listener at 720px. § 4.2
   item 4 forbids shipping that, so both variants are in the markup and CSS
   chooses -- the pattern the app's card tabs already use. */
@media (min-width: 720px) {
  .sheet { display: none; }
}
/* The design's phone nav is 12px wider than a 320px screen, which scrolls the
   whole page sideways. Tighten its gutters there only. */
@media (max-width: 359px) {
  .nav.nav-narrow { padding-left: var(--space-4); padding-right: var(--space-4); }
  .narrow-end { gap: var(--space-3); }
}
@media (max-width: 719px) {
  .nav.nav-wide { display: none; }
  .nav.nav-narrow { display: flex; }
  /* Home v2: below 720px the illustration spans the column, above the text. */
  .illus { width: 100%; }
  /* The design's measures are set in `ch`, which is wider than a phone: the
     hero's 24ch at the clamp's 38px floor is ~410px against 326px of content
     box, so "honest and original" ran off the right edge. The prototypes were
     only ever viewed wide. Cap every measure to the column at narrow widths --
     the desktop design is untouched, and the page stops scrolling sideways. */
  /* These override GENERATED rules, some of which are compound selectors like
     `.h2.h2-close` (two classes). A single-class override loses on specificity
     and fails silently -- which is exactly what happened the first time. Match
     the compound form rather than reaching for !important. */
  .h1, .h1-page, .h1-page--1, .h1-page--2, .h1-page--3,
  .h2, .h2.h2-wide, .h2.h2-close, .lede, .p-flow, .p-flow--1, .p-flow--2,
  .foot-blurb, .p.p-narrow, .p.p-base.p-narrow { max-width: 100%; }
  /* The closing heading is `white-space: nowrap` in the design, which keeps
     "Start with the last thing you read." on one line -- deliberate at desktop
     and fatal on a phone: one unbreakable 52px line is ~600px wide, so the
     DOCUMENT went wider than the viewport and every section on the page was
     clipped, not just this heading. */
  .h2.h2-close { white-space: normal; }
  /* The real cause of horizontal scroll on a phone, found by measuring rather
     than by reading: the footer's tracks are `minmax(240px, 1.4fr)` plus
     `repeat(auto-fit, minmax(140px, 1fr))`, so its MINIMUM is 380px against a
     326px content box and the whole document went to 460px. Every heading
     looked clipped, which sent me hunting for the wrong thing. One column on a
     phone. */
  .foot-grid { grid-template-columns: minmax(0, 1fr); gap: var(--space-6); }
  .steps { grid-template-columns: minmax(0, 1fr); }
  .cols { grid-template-columns: minmax(0, 1fr); }
  .wrap, .wrap-tight, .article, .cols, .split { padding-left: var(--space-5); padding-right: var(--space-5); }
  .wrap, .wrap-tight, .article, .split { padding-top: var(--space-8); padding-bottom: var(--space-8); }
}
.mark { background: linear-gradient(to top, var(--highlight-wash) 0 40%, transparent 40%); padding: 0 0.08em; }
.nav-link:hover, .foot-col a:hover, .wordmark:hover { color: var(--ink); background: var(--highlight-faint); }
.btn:hover { opacity: 0.85; color: var(--paper-raised); background: var(--ink); }
.err { max-width: 760px; margin: 0 auto; padding: var(--space-9) var(--space-6); }

/* A short page -- 404, 502 -- would otherwise leave the footer floating in the
   middle of a tall window with dead paper beneath it. Push it to the bottom by
   making the page wrapper a full-height column and letting the content band
   absorb the slack.

   Scoped to `body.short` on purpose. The five content pages are all taller
   than any viewport, so this would do nothing for them while changing `.page`
   to a flex container -- a layout change with no upside is not free.

   `100dvh` after `100vh` so mobile browsers measure the visible viewport
   rather than the one hiding behind the URL bar; the first line is the
   fallback for anything that does not know `dvh`. */
body.short .page { min-height: 100vh; min-height: 100dvh; display: flex; flex-direction: column; }
body.short .band { flex: 1 0 auto; }
body.short .site-foot { flex: none; }