/* Base: reset, type styles, buttons, links, focus, form basics, utilities.
   Colors and type values come from tokens.css roles. Never use --gist-* here
   except where a role does not exist.

   The site is cream (r6, 2026-11-04). Bryce: "no black or dark greay
   backgrounds for the sight but I do lie the cream color for that". Every
   ground is cream (--color-bg) or paper (--color-surface) with a navy
   hairline; navy is the type color and fills only control-sized things;
   orange is a mark and the primary button's fill (ink label), never text.
   Light only: color-scheme light, no dark-mode query anywhere.

   Type (r8, 2026-11-04). Bryce: "yellow tail, i like Barlow, lightest".
   Every text style takes its role's tokens from tokens.css (family, size,
   weight, case, tracking, leading; the table is in
   site/qa/r8-type-cream/tokens/SYSTEM.md): Barlow Semi Condensed in capitals
   for display, h1, h2, labels, buttons and nav, Barlow for reading, h3 and
   h4, and Yellowtail for the one script accent a page may carry (.t-script).
   Capitals come only from text-transform. Nothing sets font-stretch: the
   fonts have no width axis. */

*,
*::before,
*::after { box-sizing: border-box; }

/* ---------- Wide screens: space and size overrides ----------
   tokens.css is a copy of brand/tokens.css and is never edited by hand, so the
   wide-screen space and control sizes live here. The wide-screen type scale
   (1440 to 2560) moved into tokens.css in r8, so the whole type scale lives in
   one place; its lines and the 1024 px step for the smallest labels were taken
   out of this block (label-small is 12 px everywhere under 1440 now).
   The column fills the screen up to 3840 (it stopped at 1440), with gutters of
   20 px on phones, 64 at 1440, 114 at 2560 and 153 on a 3440 ultrawide (160 at
   most). Only past 3840 (a 32:9 monitor, two screens wide) does it hold a 3840
   column in the middle. Below 1440 the space scale is unchanged; from 1440
   every space and control size keeps growing to its 2560 value and holds
   there, like the type, so a big monitor gets a bigger page instead of a small
   one in the middle. An ultrawide is no taller than a 2560 screen, so its
   extra width goes to the layout (wider grids, bigger posters), not to bigger
   headlines. */
:root {
  --space-gutter: clamp(1.25rem, 4.45vw, 10rem);
  --size-layout-max: 3840px;
}
@media (min-width: 1440px) {
  :root {
    --space-section: clamp(10rem, 6.143rem + 4.286vw, 13rem); /* 160, 208 */
    --space-block: clamp(4rem, 2.071rem + 2.143vw, 5.5rem); /* 64, 88 */
    --space-grid-gap: clamp(1.5rem, 0.536rem + 1.071vw, 2.25rem); /* 24, 36 */
    --size-header: clamp(4.5rem, 3.214rem + 1.429vw, 5.5rem); /* 72, 88 */
    --size-control: clamp(48px, 37.7px + 0.714vw, 56px); /* 48, 56 */
    --space-control-x: clamp(1.5rem, 0.857rem + 0.714vw, 2rem); /* 24, 32 */
  }
}

/* Cream site helpers (r6). The hairlines that give a cream page its
   structure: --color-line (navy 16%) between sections, --line-panel around
   paper surfaces, --line-hover on a pointed card, and --fill-hover, the
   faint navy wash on a pointed ghost button or Copy. All navy at low alpha,
   so they sit on cream and paper alike. */
:root {
  --line-panel: rgb(var(--gist-navy-rgb) / 0.18);
  --line-hover: rgb(var(--gist-navy-rgb) / 0.5);
  --fill-hover: rgb(var(--gist-navy-rgb) / 0.05);
  /* r7 rhythm: the full navy rule that opens a chapter (.sec-head in
     layout.css), 1 px, 2 px from 1440 where the type grows past it. */
  --line-rule: var(--color-text);
  --rule-width: var(--border-hairline);
  /* A chapter's space above and below (three quarters of the section space:
     54 px on phones, 120 at 1440, 156 at 2560) and from its rule to its
     statement. */
  --space-chapter: calc(var(--space-section) * 0.75);
  --space-sec-head: clamp(var(--space-5), 0.9rem + 1.6vw, var(--space-8));
}
@media (min-width: 1440px) {
  :root { --rule-width: var(--border-strong); }
}

/* Headline boxes in the web font's ch (r8 fix round 1). A ch is the width of
   the zero in whatever face draws the element, and the fallback faces' zero
   is narrower (0.436em against Barlow Semi Condensed 800's 0.514em, 0.504
   against Barlow 600's 0.568), so every box set in ch was 15 to 18% narrower
   until the fonts landed, or for good with the fonts blocked, and grew at the
   swap. These are one ch of each web font as a fixed em (measured in
   Chromium, site/qa/r8-type-cream/fix-r1/chem.json), so "24ch" of a display
   title is written calc(24 * var(--ch-display)) and is the same box in either
   face. Reading measures (--size-measure and the body boxes) stay in ch: they
   count characters, and Barlow 400's fallback zero is within 6%. Home's
   corner line is the one Barlow 400 box in --ch-text, because its width sets
   where it sits on the first screen. */
:root {
  --ch-display: 0.514em; /* Barlow Semi Condensed 800 */
  --ch-statement: 0.568em; /* Barlow 600 */
  --ch-text: 0.565em; /* Barlow 400 */
}

html {
  height: 100%;
  /* The canvas behind the page (overscroll, the rubber band, the area under
     a short view) and the browser's own controls are cream and light. */
  background: var(--color-bg);
  color-scheme: light;
  scrollbar-color: color-mix(in srgb, var(--gist-navy) 34%, var(--gist-cream)) var(--gist-cream);
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  /* A tap on a phone flashes a faint navy wash, like the ghost button's hover,
     not the browser's default grey box (r7 fix; buttons and the header logo
     have none). */
  -webkit-tap-highlight-color: rgb(var(--gist-navy-rgb) / 0.08);
  /* Page side gutter: 20px on phones, 64px at 1440, 160px at most, never
     inside the safe area. */
  --gutter-l: max(16px, var(--space-gutter), env(safe-area-inset-left, 0px));
  --gutter-r: max(16px, var(--space-gutter), env(safe-area-inset-right, 0px));
  /* Full-width bars (header, Home) use these as side padding so their edges
     meet the .wrap column on screens wider than the layout max (3840). The %
     is the element's containing block, which is the full width for both. */
  --edge-l: max(var(--gutter-l), calc((100% - var(--size-layout-max)) / 2 + var(--gutter-l)));
  --edge-r: max(var(--gutter-r), calc((100% - var(--size-layout-max)) / 2 + var(--gutter-r)));
  --header-h: var(--size-header);
  --ease-out: var(--motion-ease-out);
  --ease-expo: var(--motion-ease-out-expo);
  --hover: 240ms;
}

body {
  height: 100%;
  margin: 0;
  background: var(--color-bg);
  color: var(--color-text);
  font-family: var(--type-body-family);
  font-size: var(--type-body-size);
  line-height: var(--type-body-leading);
  font-weight: var(--type-body-weight);
  letter-spacing: var(--type-body-tracking);
  font-kerning: normal;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  overflow-x: clip;
}

img, svg, video, canvas, iframe { display: block; max-width: 100%; }
img { height: auto; }
button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; background: none; border: 0; padding: 0; }
h1, h2, h3, h4, p, ul, ol, dl, dd, figure, blockquote { margin: 0; }
ul[role="list"], ol[role="list"] { list-style: none; padding: 0; }
[hidden] { display: none !important; }

::selection { background: var(--color-selection-bg); color: var(--color-selection-text); }

/* Themed areas set their own ground, as type-and-color.md section 3 asks.
   The website sets no data-theme since r6 (light is :root); this stays so a
   stray one can't leave text on the wrong ground. */
[data-theme] { background: var(--color-bg); color: var(--color-text); }

/* ---------- Focus ---------- */
/* A 2 px ring that pulls into focus: it starts wide and clear and settles onto
   the control in 240 ms, like pulling focus on a lens. Navy everywhere: 13.44
   on cream, 14.14 on paper and 4.38 against orange, so it reads around the
   orange buttons too. --focus-offset moves it per control. */
:focus { outline: none; }
:focus-visible {
  outline: var(--border-focus-width) solid var(--color-focus);
  outline-offset: var(--focus-offset, var(--border-focus-offset));
  animation: focus-pull 240ms var(--motion-ease-out);
}
@keyframes focus-pull {
  from { outline-offset: calc(var(--focus-offset, var(--border-focus-offset)) + 7px); outline-color: transparent; }
}
[tabindex="-1"]:focus-visible { outline: none; animation: none; }

.skip-link {
  position: fixed;
  top: 12px;
  left: var(--gutter-l);
  z-index: 200;
  padding: var(--space-3) var(--space-5);
  background: var(--color-action);
  color: var(--color-on-action);
  font-family: var(--type-button-family);
  font-weight: var(--type-button-weight);
  font-size: var(--type-button-size);
  letter-spacing: var(--type-button-tracking);
  text-transform: var(--type-button-case);
  line-height: var(--type-button-leading);
  text-decoration: none;
  border-radius: var(--radius-control);
  transform: translateY(-160%);
  transition: transform var(--motion-duration-base) var(--ease-out);
}
.skip-link:focus-visible { transform: none; }

/* ---------- Type styles ----------
   One class per role in SYSTEM.md's table; each sets all six of its tokens. */
.t-display-1, .t-display-2, .t-display-3 { text-wrap: balance; }
.t-display-1 { font-family: var(--type-display-1-family); font-size: var(--type-display-1-size); font-weight: var(--type-display-1-weight); text-transform: var(--type-display-1-case); letter-spacing: var(--type-display-1-tracking); line-height: var(--type-display-1-leading); }
.t-display-2 { font-family: var(--type-display-2-family); font-size: var(--type-display-2-size); font-weight: var(--type-display-2-weight); text-transform: var(--type-display-2-case); letter-spacing: var(--type-display-2-tracking); line-height: var(--type-display-2-leading); }
.t-display-3 { font-family: var(--type-display-3-family); font-size: var(--type-display-3-size); font-weight: var(--type-display-3-weight); text-transform: var(--type-display-3-case); letter-spacing: var(--type-display-3-tracking); line-height: var(--type-display-3-leading); }
.t-h1 { font-family: var(--type-heading-1-family); font-size: var(--type-heading-1-size); font-weight: var(--type-heading-1-weight); text-transform: var(--type-heading-1-case); letter-spacing: var(--type-heading-1-tracking); line-height: var(--type-heading-1-leading); text-wrap: balance; }
.t-h2 { font-family: var(--type-heading-2-family); font-size: var(--type-heading-2-size); font-weight: var(--type-heading-2-weight); text-transform: var(--type-heading-2-case); letter-spacing: var(--type-heading-2-tracking); line-height: var(--type-heading-2-leading); text-wrap: balance; }
.t-h3 { font-family: var(--type-heading-3-family); font-size: var(--type-heading-3-size); font-weight: var(--type-heading-3-weight); text-transform: var(--type-heading-3-case); letter-spacing: var(--type-heading-3-tracking); line-height: var(--type-heading-3-leading); text-wrap: balance; }
.t-h4 { font-family: var(--type-heading-4-family); font-size: var(--type-heading-4-size); font-weight: var(--type-heading-4-weight); text-transform: var(--type-heading-4-case); letter-spacing: var(--type-heading-4-tracking); line-height: var(--type-heading-4-leading); text-wrap: balance; }
/* A long line at heading size (the AI pull quote, Work's end line, About's
   made-for line): Barlow 600 in sentence case, so it reads as a sentence and
   not a sign. Heading-2 size here; a page that sets it larger says so. */
.t-statement { font-family: var(--type-statement-family); font-size: var(--type-statement-size); font-weight: var(--type-statement-weight); text-transform: var(--type-statement-case); letter-spacing: var(--type-statement-tracking); line-height: var(--type-statement-leading); text-wrap: balance; }
.t-lead { font-family: var(--type-body-lead-family); font-size: var(--type-body-lead-size); font-weight: var(--type-body-lead-weight); text-transform: var(--type-body-lead-case); letter-spacing: var(--type-body-lead-tracking); line-height: var(--type-body-lead-leading); max-width: var(--size-measure-lead); text-wrap: pretty; }
.t-body { font-family: var(--type-body-family); font-size: var(--type-body-size); font-weight: var(--type-body-weight); text-transform: var(--type-body-case); letter-spacing: var(--type-body-tracking); line-height: var(--type-body-leading); max-width: var(--size-measure); text-wrap: pretty; }
.t-small { font-family: var(--type-body-small-family); font-size: var(--type-body-small-size); font-weight: var(--type-body-small-weight); text-transform: var(--type-body-small-case); letter-spacing: var(--type-body-small-tracking); line-height: var(--type-body-small-leading); text-wrap: pretty; }
.t-label { font-family: var(--type-label-family); font-size: var(--type-label-size); font-weight: var(--type-label-weight); text-transform: var(--type-label-case); letter-spacing: var(--type-label-tracking); line-height: var(--type-label-leading); }
.t-label-sm { font-family: var(--type-label-small-family); font-size: var(--type-label-small-size); font-weight: var(--type-label-small-weight); text-transform: var(--type-label-small-case); letter-spacing: var(--type-label-small-tracking); line-height: var(--type-label-small-leading); }
/* The script accent: Yellowtail, by the six rules in SYSTEM.md section 4.
   At most one per page, never on Home's first screen, only on a line that
   already exists (NOTES.md lists each one and its source string), never
   "Gist", five words or fewer, 32 px on phones to 72 px at 2560 (never under
   28), navy (never orange), never in capitals. It stays the element it is (an
   h3 here), so it is read once, as itself. One weight: no faked bold. */
.t-script {
  font-family: var(--type-script-family);
  font-size: max(var(--type-script-min), var(--type-script-size));
  font-weight: var(--type-script-weight);
  text-transform: var(--type-script-case);
  letter-spacing: var(--type-script-tracking);
  line-height: var(--type-script-leading);
  /* Yellowtail's t crossbar and j tail reach into its word space (0.21em),
     so "shot right" and "a job" read as one word. 0.08em more opens them
     (16 px between "shot" and "right" at 56 px, was 11.6). r8 fix round 1;
     the script role's token since r8 minors (0.08em, tokens.css). */
  word-spacing: var(--type-script-word-spacing);
  font-synthesis: none;
  color: var(--color-text);
  text-wrap: balance;
}
/* The orange block shade only at headline sizes: --type-script-size passes
   48 px (--script-shade-min) at about 1090 px wide. Solid, hard edged, at the
   logo's 45 degrees, 0.1288 of the x-height deep (tokens.css). */
@media (min-width: 1100px) { .t-script { text-shadow: var(--script-shade); } }
/* Its fallback is a different script, not a metric match, so the line holds
   hidden until Yellowtail is in: main.js adds .script-in when the face lands,
   or after 3 s whatever happens (the views that carry a script line are
   drawn by main.js, so it is always there to do it). Without scripts the
   line always shows. No CSS timer: reduced motion cuts every animation to
   1 ms, which would show the fallback script at once. */
html.js:not(.script-in) .t-script { visibility: hidden; }
/* A page opened from a link holds hidden while its fonts are on the way
   (main.js holdForFonts, 2.5 s after boot at most), so nothing is drawn in
   the fallback faces and then moved by the swap. The header shows meanwhile.
   No transition: with reduced motion every property eases over 160 ms
   (motion.css), and visibility would then stay visible for those 160 ms. */
html.js.font-hold main { visibility: hidden; transition: none !important; }
.t-muted { color: var(--color-text-muted); }
.t-accent { color: var(--color-accent-text); }
.t-num { font-variant-numeric: tabular-nums; }

/* The bar sits on the text's baseline and is lifted to the middle of the
   capitals (0.35em, Barlow Semi Condensed's caps are 0.70em), so the
   eyebrow's baseline is its words' baseline: beside a chapter numeral
   (.sec-head, aligned on baselines) the two now share one (r8; the bar's
   bottom edge stood in for it, which dropped the label about 4 px). */
.eyebrow {
  display: inline-flex;
  align-items: baseline;
  gap: 0.9em;
  font-family: var(--type-label-family);
  font-weight: var(--type-label-weight);
  font-size: var(--type-label-size);
  letter-spacing: var(--type-label-tracking);
  text-transform: var(--type-label-case);
  line-height: var(--type-label-leading);
  color: var(--color-accent-text);
}
.eyebrow::before {
  content: "";
  width: 28px;
  height: var(--border-strong);
  background: var(--color-accent);
  translate: 0 calc(-0.35em + var(--border-strong) / 2);
}

.prose > * + * { margin-top: var(--space-stack); }
.prose p { max-width: var(--size-measure); text-wrap: pretty; }
strong, b { font-weight: 600; }

/* ---------- Links ---------- */
a { color: var(--color-link); }
.link {
  color: var(--color-link);
  text-decoration: underline;
  text-decoration-color: var(--color-link-underline);
  text-decoration-thickness: var(--border-link-underline);
  text-underline-offset: var(--border-link-underline-offset);
  transition: text-decoration-color var(--hover) var(--ease-out), color var(--hover) var(--ease-out);
}
.link:hover { text-decoration-color: var(--color-text); }

/* Arrow link: caps label. On hover the underline grows from the left and
   leaves to the right, and the arrow nudges. */
.link-arrow {
  display: inline-flex;
  align-items: center;
  gap: 0.75em;
  min-height: var(--size-touch-min);
  color: var(--color-text);
  text-decoration: none;
  font-family: var(--type-label-family);
  font-weight: var(--type-label-weight);
  font-size: var(--type-label-size);
  letter-spacing: var(--type-label-tracking);
  text-transform: var(--type-label-case);
  line-height: 1.3;
}
.link-arrow span { background: linear-gradient(var(--color-accent), var(--color-accent)) 100% 100% / 0 var(--border-strong) no-repeat; padding-bottom: 3px; transition: background-size var(--hover) var(--ease-out); }
.link-arrow:hover span { background-size: 100% var(--border-strong); background-position: 0 100%; }
.link-arrow svg { flex: none; width: 16px; height: 16px; transition: transform var(--hover) var(--ease-out); }
.link-arrow:hover svg { transform: translateX(4px); }

/* ---------- Buttons ---------- */
/* Hover: a fill wipes in from the left and leaves to the right (the site's
   transition language in miniature), 280 ms. The arrow nudges.
   Primary: orange fill, ink label (5.53:1), hover the lighter orange with the
   same label (6.74:1). Secondary: navy outline and label, hover a navy fill
   with a cream label (13.44:1). Ghost: navy label, a faint navy wash. */
.btn {
  --btn-bg: transparent;
  --btn-fg: var(--color-text);
  --btn-border: transparent;
  --btn-fill: var(--fill-hover);
  position: relative;
  isolation: isolate;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.85em;
  min-height: var(--size-control);
  padding: 0 var(--space-control-x);
  border: var(--border-hairline) solid var(--btn-border);
  border-radius: var(--radius-control);
  background: var(--btn-bg);
  color: var(--btn-fg);
  font-family: var(--type-button-family);
  font-weight: var(--type-button-weight);
  font-size: var(--type-button-size);
  letter-spacing: var(--type-button-tracking);
  text-transform: var(--type-button-case);
  line-height: var(--type-button-leading);
  text-decoration: none;
  white-space: nowrap;
  transition:
    background-color var(--hover) var(--ease-out),
    border-color 280ms var(--ease-out),
    color 280ms var(--ease-out),
    transform var(--motion-duration-instant) var(--ease-out);
  -webkit-tap-highlight-color: transparent;
}
.btn::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  border-radius: inherit;
  background: var(--btn-fill);
  transform: scaleX(0);
  transform-origin: right center;
  transition: transform 280ms var(--ease-out);
}
@media (hover: hover) {
  .btn:hover { color: var(--btn-fg-hover, var(--btn-fg)); border-color: var(--btn-border-hover, var(--btn-border)); }
  .btn:hover::before { transform: scaleX(1); transform-origin: left center; }
}
@media (prefers-reduced-motion: reduce) {
  .btn::before { transform: none; opacity: 0; transition-property: opacity; }
  .btn:hover::before { opacity: 1; }
}
.btn:active { transform: translateY(1px); }
@media (max-width: 520px) {
  /* A label that wraps splits into even lines, so no word sits alone on the
     second one (the lightbox's "Get a quote for something like this" left
     "this" alone on 412 to 440 wide phones). */
  .btn { white-space: normal; text-wrap: balance; text-align: center; line-height: 1.25; padding-block: var(--space-2); max-width: 100%; }
  /* A full-width button whose label can wrap reads as a row: label left,
     arrow at the right edge, never two centered lines. */
  .btn--block { width: 100%; justify-content: space-between; text-align: left; }
}
.btn svg { width: 16px; height: 16px; flex: none; transition: transform var(--hover) var(--ease-out); }
.btn:hover svg { transform: translateX(4px); }
.btn--primary { --btn-bg: var(--color-action); --btn-fg: var(--color-on-action); --btn-border: var(--color-action); --btn-fill: var(--color-action-hover); --btn-border-hover: var(--color-action-hover); }
.btn--secondary { --btn-fg: var(--color-text); --btn-border: var(--color-text); --btn-fill: var(--color-bg-brand); --btn-fg-hover: var(--gist-cream); --btn-border-hover: var(--color-bg-brand); }
.btn--ghost { --btn-fg: var(--color-text); padding: 0 var(--space-3); }
.btn--sm { min-height: 40px; padding: 0 var(--space-4); }

/* ---------- Copy-to-clipboard email ---------- */
.email {
  display: inline-flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-2) var(--space-3);
}
.email__addr {
  font-family: var(--font-text);
  font-weight: var(--font-weight-semibold);
  user-select: all;
  -webkit-user-select: all;
  word-break: break-all;
}
.email__copy {
  display: inline-flex;
  align-items: center;
  gap: 0.5em;
  min-height: 40px;
  min-width: var(--size-touch-min);
  padding: 0 var(--space-3);
  border: var(--border-hairline) solid var(--color-line-strong);
  border-radius: var(--radius-control);
  font-family: var(--type-label-small-family);
  font-weight: var(--type-label-small-weight);
  font-size: var(--type-label-small-size);
  letter-spacing: var(--type-label-small-tracking);
  text-transform: var(--type-label-small-case);
  line-height: var(--type-label-small-leading);
  transition: border-color var(--hover) var(--ease-out), background-color var(--hover) var(--ease-out);
}
.email__copy:hover { border-color: var(--color-text); background: var(--fill-hover); }
.email__copy svg { width: 14px; height: 14px; }
/* Copied: a navy fill with a cream label (control-sized, so navy may fill it). */
.email__copy[data-state="done"] { border-color: var(--color-bg-brand); background: var(--color-bg-brand); color: var(--gist-cream); }

/* ---------- Utilities ---------- */
/* Read, never seen. Two lines more since r8 fix round 1:
   - text-transform: none, because Chrome reads text after its transform: a
     split headline's copy (shared.js splitWords) inside an uppercase title
     reached screen readers in capitals ("TELL US WHAT THE STORE NEEDS.",
     where "US" can be read as initials). The words people see stay capitals.
   - font-weight: inherit, so a hidden h1 or h2 doesn't keep the browser's
     bold: Barlow has no 700 loaded and it fetched the 600 file for Home's
     hidden "Gist Auto" alone. */
.visually-hidden {
  position: absolute !important;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
  font-weight: inherit;
  text-transform: none;
}
/* The copy that readAsWritten (shared.js) puts in a heading set in capitals
   can't be selected, so copying the heading copies it once (the split titles
   do the same in motion.css). */
[data-caps] > .visually-hidden { -webkit-user-select: none; user-select: none; }
.wrap {
  width: 100%;
  max-width: var(--size-layout-max);
  margin-inline: auto;
  padding-left: var(--gutter-l);
  padding-right: var(--gutter-r);
  /* Components lay out on the column's content width (@container col), not
     the window, so the same rules hold from a 320 px column to a 3520 px one.
     The steps used: 520, 680, 880, 900, 1150, 1500, 1700. */
  container: col / inline-size;
}

/* ---------- Touch ----------
   Anything tapped on a phone or tablet gets at least a 44 px target. */
@media (pointer: coarse), (max-width: 759px) {
  .btn--sm, .email__copy, .chip { min-height: var(--size-touch-min); }
}
.hairline { border: 0; border-top: var(--border-hairline) solid var(--color-line); margin: 0; }