/*
 * Plates. The SWD homepage from 2026-10-27 (branch swd-v3); the system is described in DESIGN.md.
 * Ordinary scroll. Each section is a plate, charcoal or cream, that rides over the one before on
 * its rounded top edge, and every plate ends on an action.
 *
 * Modes, set on <html> before first paint:
 *   .js       JavaScript runs
 *   .motion   motion allowed (no reduced motion, no Save-Data or 2G/3G): the robot clip plays
 *   .is-top / .is-pill   the header: a full bar at the top of the page, a pill once you scroll
 *   .hd-wide  desktop: the pill opened back into the full bar from its Menu button
 */

@font-face {
  font-family: 'Hubot Sans';
  src: url('/cdn/v3/fonts/hubot-sans-200_900-normal.woff2') format('woff2');
  font-weight: 200 900;
  font-stretch: 75% 125%;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Mona Sans';
  /* normal width only (weight 400 to 900): 39 KB instead of 96 KB with the width axis */
  src: url('/cdn/v3/fonts/mona-sans-400_900-normal.woff2') format('woff2');
  font-weight: 400 900;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* ------------------------------------------------------------------ tokens */
:root {
  --skin: #eeedea;
  --ink: #1e1b20;
  --muted: #5f5a62;
  --line: rgb(30 27 32 / 0.16);
  --frame: #141316;
  --frame-ink: #eeedea;
  --frame-muted: #a39da6;
  --frame-body: #bdb7c0;
  --frame-line: rgb(238 237 234 / 0.14);
  --red: #d6360c;
  --red-deep: #b92e09;
  --on-red: #fbfaf8;
  --lit: #ff7142;

  --f-display: 'Hubot Sans', 'Helvetica Neue', system-ui, sans-serif;
  --f-text: 'Mona Sans', system-ui, -apple-system, 'Segoe UI', sans-serif;

  --t-hero: clamp(2.9rem, 1.4rem + 6.4vw, 6rem);
  --t-h2: clamp(2.2rem, 1.2rem + 3.6vw, 4.5rem);
  --t-row: clamp(1.45rem, 0.95rem + 2vw, 2.6rem);
  --t-step: clamp(1.6rem, 1rem + 2.3vw, 3.1rem);
  --t-body: clamp(1.0625rem, 1rem + 0.2vw, 1.15rem);
  --t-s: 0.9375rem;
  --t-xs: 0.8125rem;

  --pad: clamp(1.25rem, 0.2rem + 6.4vw, 6rem);
  --gutter: clamp(1rem, 0.6rem + 1.6vw, 2.5rem);
  --sec: clamp(5.25rem, 2.6rem + 7vw, 9.5rem);
  --r-plate: clamp(1.5rem, 0.9rem + 2.4vw, 2.75rem);
  --hd-h: 4rem;
  --hd-top: 0.75rem;
  --pill-w: 29.5rem;

  --e-out: cubic-bezier(0.16, 1, 0.3, 1);
  --e-soft: cubic-bezier(0.215, 0.61, 0.355, 1);
}

/* each plate carries its own ink; anything inside reads these */
.plate--frame {
  --bg: var(--frame);
  --fg: var(--frame-ink);
  --fg-2: var(--frame-body);
  --fg-3: var(--frame-muted);
  --rule: var(--frame-line);
  --focus: var(--lit);
  color-scheme: dark;
  /* its sky stays inside it, under its content */
  isolation: isolate;
}
.plate--skin {
  --bg: var(--skin);
  --fg: var(--ink);
  --fg-2: var(--muted);
  --fg-3: var(--muted);
  --rule: var(--line);
  --focus: var(--red);
}

/* -------------------------------------------------------------- foundation */
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; }
html {
  -webkit-text-size-adjust: none;
  text-size-adjust: none;
  background: var(--frame);
  color: var(--frame-ink);
  scrollbar-color: #6b656e var(--ink);
  /* anchor jumps and keyboard focus land below the pill */
  scroll-padding-top: calc(var(--hd-h) + var(--hd-top) + 1.5rem);
}
@media (prefers-reduced-motion: no-preference) {
  html { scroll-behavior: smooth; }
}
html:has(.menu[open]) { overflow: hidden; }
body {
  min-height: 100dvh;
  font-family: var(--f-text);
  font-size: var(--t-body);
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  font-kerning: normal;
  overflow-x: clip;
}
img, picture, video, svg { display: block; max-width: 100%; }
img { height: auto; }
button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; }
a { color: inherit; text-decoration: none; }
h1, h2, h3 { font-weight: inherit; font-size: inherit; text-wrap: balance; }
p { text-wrap: pretty; }
ul, ol { list-style: none; padding: 0; }
address { font-style: normal; }
::selection { background: var(--ink); color: var(--skin); }
.plate--frame ::selection, .hd ::selection, .menu ::selection { background: var(--skin); color: var(--ink); }

:focus-visible { outline: 2px solid var(--focus, var(--lit)); outline-offset: 3px; }
#main:focus { outline: none; }
.skip {
  position: fixed; left: var(--pad); top: var(--hd-top); z-index: 200;
  padding: 0.8em 1.2em; border-radius: 999px; background: var(--skin); color: var(--ink); font-weight: 650;
  transform: translateY(-220%);
}
.skip:focus-visible { transform: none; }
.sr {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.ar { width: 1.1em; height: 0.55em; flex: none; fill: none; stroke: currentColor; stroke-width: 1.6; }
/* Figures in Mona Sans: Hubot's zero carries a bar and reads as a theta */
.fig { font-family: var(--f-text); font-weight: 720; letter-spacing: -0.01em; font-variant-numeric: proportional-nums; }

/* ---------------------------------------------------------------- plates */
.plate {
  position: relative;
  background: var(--bg);
  color: var(--fg);
  padding: var(--sec) var(--pad) calc(var(--sec) + var(--r-plate));
  border-radius: var(--r-plate) var(--r-plate) 0 0;
}
/* each plate rides over the one before on its rounded edge */
.plate + .plate, #main ~ .ft { margin-top: calc(var(--r-plate) * -1); }
/* With motion, a plate holds still once its bottom reaches the bottom of the screen, and the next
   one slides up over it. --stick is the screen height minus the plate's own (site.js measures it),
   so a plate taller than the screen is read to its end before it holds. */
html.motion #main > .plate { position: sticky; top: var(--stick, 0px); }

/* section heads: the heading on the left, its one line of context on the right */
.head {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  column-gap: var(--gutter);
  row-gap: 1.25rem;
  align-items: end;
  margin-bottom: clamp(2.5rem, 1.5rem + 3vw, 4.5rem);
}
.head__title {
  grid-column: 1 / span 7;
  font: 780 var(--t-h2)/0.92 var(--f-display);
  font-stretch: 106%;
  letter-spacing: -0.03em;
  text-transform: uppercase;
  margin-left: -0.04em;
}
.head__lead { grid-column: 9 / span 4; max-width: 38ch; color: var(--fg-2); }
/* stacked heads (process, contact) are single-column: their parts take no grid placement */
.proc__head > *, .talk__head > * { grid-column: auto; }
@media (max-width: 767px) {
  .head { grid-template-columns: minmax(0, 1fr); align-items: start; }
  .head__title, .head__lead { grid-column: 1 / -1; }
}
.head__lead > p + p { margin-top: 0.8em; }

/* ------------------------------------------------------------- treatments */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.75em;
  min-height: 3.25rem;
  padding: 0 1.5rem;
  border-radius: 999px;
  font: 650 var(--t-xs)/1 var(--f-text);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  white-space: nowrap;
  transition: background-color 0.25s, border-color 0.25s, color 0.25s;
}
.btn .ar { transition: translate 0.4s var(--e-out); }
.btn--red { background: var(--red); color: var(--on-red); }
.btn--line { border: 1px solid color-mix(in srgb, var(--fg) 52%, transparent); color: var(--fg); }
.btn--wide { width: 100%; }
@media (hover: hover) {
  .btn--red:hover { background: var(--red-deep); }
  .btn--line:hover { border-color: var(--fg); }
  .btn:hover .ar { translate: 4px 0; }
}
.btn:active { background-color: var(--red-deep); }
.btn--line:active { background-color: color-mix(in srgb, var(--fg) 8%, transparent); }

/* standalone text links: a quiet underline at rest, full ink and the arrow nudge on hover */
.tl {
  display: inline-flex;
  align-items: center;
  gap: 0.55em;
  font-weight: 600;
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 0.32em;
  text-decoration-color: color-mix(in srgb, currentColor 40%, transparent);
  transition: text-decoration-color 0.25s;
}
.tl__go { display: inline-flex; transition: translate 0.4s var(--e-out); }
@media (hover: hover) {
  .tl:hover { text-decoration-color: var(--red); }
  .tl:hover .tl__go { translate: 4px 0; }
}
.plate--frame .tl:hover { text-decoration-color: var(--lit); }
.ln { text-decoration: underline; text-decoration-color: transparent; text-underline-offset: 0.3em; transition: text-decoration-color 0.25s; }
.ln:hover { text-decoration-color: currentColor; }

/* the circle that ends every row: an outline at rest, filled red when its row is pointed at */
.row__go {
  display: grid;
  place-items: center;
  flex: none;
  width: 3.25rem;
  height: 3.25rem;
  border-radius: 50%;
  border: 1px solid color-mix(in srgb, var(--fg) 52%, transparent);
  color: var(--fg);
  transition: background-color 0.3s, border-color 0.3s, color 0.3s;
}
.row__go .ar { width: 1.1rem; height: 0.55rem; transition: translate 0.45s var(--e-out); }

/* ----------------------------------------------------------------- header */
.hd {
  position: fixed;
  inset: 0 0 auto;
  z-index: 50;
  padding: var(--hd-top) var(--pad) 0;
  pointer-events: none;
}
.hd__bar {
  display: flex;
  align-items: center;
  height: var(--hd-h);
  max-width: calc(100vw - var(--pad) * 2);
  margin-inline: auto;
  padding: 0 0.5rem;
  border: 1px solid transparent;
  border-radius: 999px;
  color: var(--frame-ink);
  pointer-events: auto;
  transition: max-width 0.6s var(--e-out), background-color 0.35s, border-color 0.35s, box-shadow 0.35s;
}
/* The SWD logo in its on-dark version: the crimson parts (SPIDER, the W, one square) are cream,
   since crimson measures 1.45:1 on charcoal; the red, orange and squares keep their colors. */
.hd__logo { flex: none; display: block; padding: 0.5rem 0.35rem; border-radius: 0.5rem; }
.hd__logo img { width: auto; height: 2rem; }
html.is-pill .hd__bar .hd__logo img { height: 1.7rem; }
@media (max-width: 599px) {
  .hd__logo img, html.is-pill .hd__bar .hd__logo img { height: 1.6rem; }
}
.hd__nav {
  flex: 1 1 0;
  min-width: 0;
  display: flex;
  justify-content: center;
  gap: clamp(1.25rem, 2.4vw, 2.5rem);
  overflow: hidden;
  transition: opacity 0.25s, visibility 0.25s;
}
.hd__ln, .hd__call {
  font: 600 var(--t-xs)/1 var(--f-text);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  white-space: nowrap;
  padding: 0.9rem 0;
  text-decoration: underline;
  text-decoration-color: transparent;
  text-underline-offset: 0.5em;
  text-decoration-thickness: 1px;
  transition: text-decoration-color 0.25s, opacity 0.25s;
}
.hd__ln:hover, .hd__call:hover { text-decoration-color: var(--lit); }
.hd__call { flex: none; margin: 0 1.5rem 0 1rem; letter-spacing: 0.04em; font-variant-numeric: tabular-nums; }
.hd__book { flex: none; min-height: 2.75rem; padding: 0 1.25rem; }
.hd__menu {
  flex: none;
  display: none;
  align-items: center;
  justify-content: center;
  gap: 0.7rem;
  height: 2.75rem;
  min-width: 2.75rem;
  margin-left: 0.5rem;
  padding: 0 1.1rem;
  border: 1px solid var(--frame-line);
  border-radius: 999px;
  font: 650 var(--t-xs)/1 var(--f-text);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  transition: background-color 0.25s, border-color 0.25s;
}
.hd__menu:hover { border-color: var(--frame-muted); }
.hd__burger { position: relative; display: block; width: 0.9rem; height: 0.45rem; }
.hd__burger::before, .hd__burger::after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  height: 1.5px;
  background: currentColor;
  transition: top 0.3s var(--e-out), rotate 0.3s var(--e-out);
}
.hd__burger::before { top: 0; }
.hd__burger::after { top: calc(100% - 1.5px); }
.hd__menu[aria-expanded='true'] .hd__burger::before,
.hd__menu[aria-expanded='true'] .hd__burger::after { top: calc(50% - 0.75px); }
.hd__menu[aria-expanded='true'] .hd__burger::before { rotate: 45deg; }
.hd__menu[aria-expanded='true'] .hd__burger::after { rotate: -45deg; }
html.js .hd__menu--nojs, html:not(.js) .hd__menu:not(.hd__menu--nojs) { display: none !important; }

/* Services: a dropdown of the service pages under its label. The nav clips while the bar draws
   in to the pill, so it lets the panel out only while the panel is open (site.js closes the panel
   whenever the bar changes shape). Without JavaScript it opens on hover and focus. */
.hd__svc { position: relative; display: flex; }
.hd__svc-btn { display: inline-flex; align-items: center; gap: 0.5em; cursor: pointer; }
.hd__caret { width: 0.7em; height: 0.42em; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; transition: rotate 0.35s var(--e-out); }
.hd__svc-btn[aria-expanded='true'] { text-decoration-color: var(--lit); }
.hd__svc-btn[aria-expanded='true'] .hd__caret { rotate: 180deg; }
.hd__drop {
  position: absolute;
  top: calc(100% + 0.85rem);
  left: -1.35rem;
  z-index: 2;
  display: none;
  width: 21rem;
  padding: 0.45rem;
  border: 1px solid var(--frame-line);
  border-radius: 1.25rem;
  background: var(--ink);
  box-shadow: 0 28px 56px -24px rgb(0 0 0 / 0.75);
}
/* a bridge over the gap, so the pointer can travel from the label to the panel */
.hd__drop::before { content: ''; position: absolute; inset: -0.95rem 0 auto; height: 0.95rem; }
.hd__drop a {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  column-gap: 1rem;
  padding: 0.85rem 1rem;
  border-radius: 0.8rem;
  font: 600 0.975rem/1.25 var(--f-text);
  color: var(--frame-ink);
  transition: background-color 0.2s, color 0.2s;
}
/* straight hairlines between the rows, inset to the text; they step aside for a lit row */
.hd__drop li { position: relative; }
.hd__drop li + li::before { content: ''; position: absolute; left: 1rem; right: 1rem; top: 0; height: 1px; background: var(--frame-line); pointer-events: none; transition: opacity 0.2s; }
.hd__drop li:has(a:is(:hover, :focus-visible))::before, .hd__drop li:has(a:is(:hover, :focus-visible)) + li::before { opacity: 0; }
.hd__drop a .ar { width: 1rem; height: 0.5rem; color: var(--frame-muted); transition: translate 0.4s var(--e-out), color 0.2s; }
.hd__drop a[aria-current='page'] { color: var(--lit); }
.hd__drop a:focus-visible { outline-offset: -2px; }
@media (hover: hover) {
  .hd__drop a:hover { background: rgb(238 237 234 / 0.06); }
  .hd__drop a:hover .ar { translate: 3px 0; color: var(--lit); }
}
.hd__nav.is-dropped, html:not(.js) .hd__nav { overflow: visible; }
.hd__svc.is-open .hd__drop, html:not(.js) .hd__svc:is(:hover, :focus-within) .hd__drop { display: block; }
@media (prefers-reduced-motion: no-preference) {
  .hd__drop { transition: opacity 0.2s, translate 0.3s var(--e-out), display 0.3s allow-discrete; }
  .hd__svc:not(.is-open) .hd__drop { opacity: 0; translate: 0 -6px; }
  @starting-style {
    .hd__svc.is-open .hd__drop { opacity: 0; translate: 0 -6px; }
  }
}

/* the pill: once you scroll, the bar draws in to the mark, Book and Menu */
html.is-pill .hd__bar, html.hd-wide .hd__bar {
  background: var(--ink);
  border-color: var(--frame-line);
  box-shadow: 0 12px 32px -14px rgb(0 0 0 / 0.55);
}
html.is-pill:not(.hd-wide) .hd__bar { max-width: var(--pill-w); }
html.is-pill:not(.hd-wide) .hd__nav,
html.is-pill:not(.hd-wide) .hd__call { opacity: 0; visibility: hidden; }
html.is-pill:not(.hd-wide) .hd__call { width: 0; margin: 0; overflow: hidden; }
html.is-pill .hd__free { display: none; }
html.is-pill .hd__menu { display: inline-flex; padding: 0; width: 2.75rem; }
html.is-pill .hd__menu-l { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* phones and tablets: the nav lives in the menu sheet */
@media (max-width: 1023px) {
  :root { --pill-w: 100%; }
  .hd__nav, .hd__call { display: none; }
  .hd__bar { justify-content: space-between; gap: 0.5rem; padding-left: 1rem; }
  .hd__menu { display: inline-flex; margin-left: 0; }
  html.is-top .hd__book { display: none; }
  html.is-pill:not(.hd-wide) .hd__bar { max-width: 100%; }
  .hd__book { margin-left: auto; }
}
/* phones: the pill's button reads "Book"; screen readers still hear the whole label */
@media (max-width: 599px) {
  .hd__x { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  .hd__book { padding: 0 1.1rem; }
}

/* ------------------------------------------------------------------- menu */
.menu {
  position: fixed;
  inset: 0;
  width: 100%;
  max-width: none;
  height: 100dvh;
  max-height: none;
  margin: 0;
  padding: var(--hd-top) var(--pad) calc(1rem + env(safe-area-inset-bottom));
  border: 0;
  background: var(--frame);
  color: var(--frame-ink);
  overflow-y: auto;
  overscroll-behavior: contain;
  --fg: var(--frame-ink);
  --focus: var(--lit);
}
.menu[open] { display: flex; flex-direction: column; }
.menu::backdrop { background: rgb(20 18 22 / 0.5); }
@media (prefers-reduced-motion: no-preference) {
  .menu[open] { animation: menu-in 0.45s var(--e-out); }
  @keyframes menu-in { from { opacity: 0; translate: 0 -0.75rem; } }
}
.menu__top {
  display: flex;
  justify-content: space-between;
  align-items: center;
  height: var(--hd-h);
  padding: 0 0.5rem 0 1rem;
}
.menu__close {
  display: inline-flex;
  align-items: center;
  gap: 0.65rem;
  height: 2.75rem;
  padding: 0 1.1rem;
  border: 1px solid var(--frame-line);
  border-radius: 999px;
  font: 650 var(--t-xs)/1 var(--f-text);
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
.menu__close svg { width: 0.65rem; height: 0.65rem; fill: none; stroke: currentColor; stroke-width: 1.6; }
.menu__list { margin-top: 1.25rem; border-top: 1px solid var(--frame-line); }
.menu__list > li { border-bottom: 1px solid var(--frame-line); }
.menu__list > li > a, .menu__svcs > summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: 3.9rem;
  font: 780 clamp(1.85rem, 1.3rem + 2.2vw, 2.6rem)/1 var(--f-display);
  font-stretch: 106%;
  letter-spacing: -0.025em;
  text-transform: uppercase;
}
.menu__list > li > a .ar { width: 1.2rem; height: 0.6rem; color: var(--frame-muted); }
.menu__svcs > summary { list-style: none; cursor: pointer; }
.menu__svcs > summary::-webkit-details-marker { display: none; }
.menu__svcs > summary i { position: relative; width: 1rem; height: 1rem; color: var(--frame-muted); }
.menu__svcs > summary i::before, .menu__svcs > summary i::after {
  content: '';
  position: absolute;
  inset: 50% 0 auto;
  height: 1.5px;
  margin-top: -0.75px;
  background: currentColor;
  transition: rotate 0.3s var(--e-out);
}
.menu__svcs > summary i::after { rotate: 90deg; }
.menu__svcs[open] > summary i::after { rotate: 0deg; }
.menu__svcs ul { padding: 0 0 1rem; }
.menu__svcs li a {
  display: flex;
  align-items: center;
  min-height: 2.75rem;
  font-size: 1.0625rem;
  font-weight: 550;
  color: var(--frame-body);
}
.menu__svcs li a:hover { color: var(--frame-ink); }
.menu__foot { margin-top: auto; padding-top: 2rem; display: grid; gap: 0.6rem; }
.menu__card {
  display: grid;
  gap: 0.2rem;
  width: 100%;
  padding: 0.85rem 1.15rem;
  border-radius: 1.1rem;
  background: rgb(238 237 234 / 0.06);
  text-align: left;
}
.menu__k { font: 600 var(--t-xs)/1.2 var(--f-text); letter-spacing: 0.08em; text-transform: uppercase; color: var(--frame-muted); }
.menu__v { font-size: 1.0625rem; font-weight: 600; }

/* -------------------------------------------------------------- the rail */
/* desktop: one tick per section on the left edge; the current one is a red dot */
.rail { display: none; }
@media (min-width: 1200px) {
  .rail {
    position: fixed;
    left: clamp(0.75rem, 1.5vw, 1.75rem);
    top: 50%;
    z-index: 40;
    display: flex;
    flex-direction: column;
    translate: 0 -50%;
    color: var(--frame-ink);
    transition: color 0.35s;
  }
  .rail[data-tone='skin'] { color: var(--ink); }
  .rail a { position: relative; display: block; width: 1.75rem; height: 1.75rem; }
  .rail a::before {
    content: '';
    position: absolute;
    left: 50%;
    top: 50%;
    width: 0.75rem;
    height: 1px;
    border-radius: 1px;
    background: currentColor;
    opacity: 0.55;
    translate: -50% -50%;
    transition: width 0.35s var(--e-out), height 0.35s var(--e-out), border-radius 0.35s, opacity 0.35s, background-color 0.35s;
  }
  .rail a:hover::before { opacity: 1; width: 1rem; }
  .rail a.is-on::before { width: 0.55rem; height: 0.55rem; border-radius: 50%; opacity: 1; background: var(--red); }
  .rail span {
    position: absolute;
    left: 100%;
    top: 50%;
    translate: 0.2rem -50%;
    padding: 0.35em 0.75em;
    border-radius: 999px;
    background: var(--ink);
    color: var(--skin);
    font: 600 var(--t-xs)/1 var(--f-text);
    letter-spacing: 0.06em;
    text-transform: uppercase;
    white-space: nowrap;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.2s;
  }
  .rail a:hover span, .rail a:focus-visible span { opacity: 1; }
}

/* ------------------------------------------------------------------- hero */
.hero {
  min-height: 100svh;
  display: grid;
  align-items: end;
  padding-top: calc(var(--hd-top) + var(--hd-h) + 2rem);
  padding-bottom: calc(var(--r-plate) + clamp(2.5rem, 7svh, 5rem));
  border-radius: 0;
  isolation: isolate;
  overflow: clip;
  /* a faint copper warmth where the robot stands, under the stars */
  background: radial-gradient(42% 58% at 80% 46%, rgb(255 113 66 / 0.04), transparent 72%), var(--bg);
}
/* The sky: every charcoal plate is a window onto one night sky (site.js draws it). The canvas is
   one screen tall and sticks to the top of the screen while its plate passes, so the sky stays
   put behind the page and drifts at its own depths. With reduced motion it is drawn once at the
   plate's own size and scrolls with it. */
.sky {
  position: absolute;
  inset: 0;
  z-index: -2;
  overflow: clip;
  border-radius: inherit;
  pointer-events: none;
}
.sky canvas { position: sticky; top: 0; display: block; width: 100%; height: 100vh; }
/* in the hero the sky dims under the copy, so no star sits bright behind a word */
.sky--hero {
  -webkit-mask-image: radial-gradient(52% 46% at 18% 72%, rgb(0 0 0 / 0.3), #000 100%);
  mask-image: radial-gradient(52% 46% at 18% 72%, rgb(0 0 0 / 0.3), #000 100%);
}
/* text on the sky carries a halo of its own plate color: a star never sits right against a word */
.plate--frame :is(h1, h2, h3, p, li, address) { text-shadow: 0 0 0.4em var(--bg), 0 0 0.15em var(--bg); }
@media (max-width: 767px) {
  .sky--hero {
    -webkit-mask-image: linear-gradient(to bottom, #000 30%, rgb(0 0 0 / 0.35) 55%);
    mask-image: linear-gradient(to bottom, #000 30%, rgb(0 0 0 / 0.35) 55%);
  }
}
.hero__visual {
  position: absolute;
  z-index: -1;
  top: calc(var(--hd-top) + var(--hd-h) * 0.5);
  bottom: calc(var(--r-plate) * 0.5);
  right: clamp(0rem, 6vw - 2rem, 6rem);
  aspect-ratio: 9 / 16;
}
html.js .hero__visual { cursor: pointer; }
/* the 404 page's robot is a still: nothing to press */
html.js .hero__visual--still { cursor: auto; }
.hero__robot {
  position: absolute;
  inset: 0;
  /* the clip's backdrop melts into the plate: no box edge anywhere */
  -webkit-mask-image: linear-gradient(to right, transparent, #000 22%, #000 78%, transparent), linear-gradient(to bottom, transparent, #000 8%, #000 80%, transparent);
  -webkit-mask-composite: source-in;
  mask-image: linear-gradient(to right, transparent, #000 22%, #000 78%, transparent), linear-gradient(to bottom, transparent, #000 8%, #000 80%, transparent);
  mask-composite: intersect;
}
.hero__still, .hero__clip { position: absolute; inset: 0; width: 100%; height: 100%; }
.hero__still img, .hero__clip { width: 100%; height: 100%; object-fit: cover; }
/* the open robot by default; the closed one when it has been closed up without motion */
.hero__still--shut, .hero__visual.is-shut .hero__still--open { display: none; }
.hero__visual.is-shut .hero__still--shut { display: block; }
/* the clip plays only with motion; everyone else sees the stills */
.hero__clip { display: none; }
html.motion .hero__clip { display: block; }
/* "Close it up" / "See inside": a small pill under the robot's feet */
.hero__toggle {
  position: absolute;
  left: 50%;
  bottom: 6%;
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  min-height: 2.75rem;
  padding: 0 1.1rem 0 0.9rem;
  border: 1px solid var(--frame-line);
  border-radius: 999px;
  background: rgb(30 27 32 / 0.82);
  color: var(--frame-ink);
  font: 650 var(--t-xs)/1 var(--f-text);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  white-space: nowrap;
  translate: -50% 0;
  transition: border-color 0.25s, opacity 0.3s;
}
.hero__toggle i { width: 0.5rem; height: 0.5rem; border-radius: 50%; background: var(--lit); box-shadow: 0 0 0 3px rgb(255 113 66 / 0.22); }
.hero__toggle[aria-busy='true'] { opacity: 0.6; }
@media (hover: hover) {
  .hero__visual:hover .hero__toggle, .hero__toggle:hover { border-color: var(--frame-muted); }
}
/* the copy lies over the robot's box: only its own parts take the pointer */
.hero__copy { display: flex; flex-direction: column; align-items: flex-start; pointer-events: none; }
.hero__copy > * { pointer-events: auto; }
.hero__meta {
  margin-top: 0.5rem;
  font: 600 var(--t-xs)/1.2 var(--f-text);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--frame-muted);
}
.hero__title {
  font: 800 var(--t-hero)/0.9 var(--f-display);
  font-stretch: 108%;
  letter-spacing: -0.035em;
  text-transform: uppercase;
  margin-left: -0.045em;
}
.hero__title span { display: block; }
@media (min-width: 768px) {
  .hero__title span + span { margin-left: 1.15em; }
}
.hero__sub { max-width: 40ch; margin-top: clamp(1.5rem, 3.5svh, 2.25rem); color: var(--frame-body); }
.hero__acts { display: flex; flex-wrap: wrap; gap: 0.75rem; margin-top: clamp(1.5rem, 3.5svh, 2.25rem); }
.hero__proof { margin-top: 1.25rem; font-size: var(--t-s); color: var(--frame-muted); }
.hero__proof b { color: var(--frame-ink); font-weight: 650; }
@media (max-width: 767px) {
  .hero__visual { right: -22vw; height: 74svh; bottom: auto; }
  .hero__robot { opacity: 0.4; }
  /* centred on the part of the robot still on screen, above the headline */
  .hero__toggle { left: 37%; bottom: auto; top: 17%; }
  .hero__acts { width: 100%; }
  .hero__acts .btn { flex: 1 1 100%; }
}

/* --------------------------------------------------------------- services */
.rows { border-top: 1px solid var(--rule); }
.row__link {
  display: grid;
  grid-template-columns: minmax(0, 6fr) minmax(0, 5fr) auto;
  column-gap: var(--gutter);
  align-items: center;
  padding: clamp(1.25rem, 0.8rem + 1.4vw, 2rem) 0;
  border-bottom: 1px solid var(--rule);
}
.row__link:focus-visible { outline-offset: -2px; border-radius: 0.5rem; }
.row__name {
  font: 760 var(--t-row)/0.98 var(--f-display);
  font-stretch: 106%;
  letter-spacing: -0.025em;
  text-transform: uppercase;
  transition: translate 0.5s var(--e-out);
}
.row__line { max-width: 46ch; color: var(--fg-2); }
@media (hover: hover) {
  .row__link:hover .row__name { translate: 0.4rem 0; }
  .row__link:hover .row__go, .talk__row:hover .row__go { background: var(--red); border-color: var(--red); color: var(--on-red); }
  .row__link:hover .row__go .ar, .talk__row:hover .row__go .ar { translate: 2px 0; }
}
.row__link:focus-visible .row__go, .talk__row:focus-visible .row__go { background: var(--red); border-color: var(--red); color: var(--on-red); }
@media (max-width: 899px) {
  .row__link { grid-template-columns: minmax(0, 1fr) auto; row-gap: 0.55rem; }
  .row__name { grid-column: 1; grid-row: 1; }
  .row__line { grid-column: 1; grid-row: 2; font-size: var(--t-s); }
  .row__go { grid-column: 2; grid-row: 1 / span 2; align-self: center; width: 2.75rem; height: 2.75rem; }
}

/* ---------------------------------------------------------------- process */
.proc {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  column-gap: var(--gutter);
  align-items: start;
}
.proc__head {
  grid-column: 1 / span 5;
  position: sticky;
  top: calc(var(--hd-top) + var(--hd-h) + 2.5rem);
  display: grid;
  gap: 1.5rem;
  justify-items: start;
}
.proc__head .head__title { margin-bottom: 0.25rem; }
.steps { grid-column: 7 / span 6; position: relative; }
/* the line the steps hang from, and how far down it you have read */
.steps::before, .steps::after {
  content: '';
  position: absolute;
  left: 0.3125rem;
  top: 0.9rem;
  width: 1px;
  background: var(--rule);
}
.steps::before { bottom: 0.9rem; }
.steps::after {
  height: calc((100% - 1.8rem) * var(--p, 0));
  background: var(--lit);
  transition: height 0.6s var(--e-out);
}
.step {
  position: relative;
  display: grid;
  grid-template-columns: 3rem minmax(0, 1fr);
  padding: 0 0 clamp(2.25rem, 1.5rem + 2.6vw, 4rem) 2rem;
}
.step:last-child { padding-bottom: 0; }
.step::before {
  content: '';
  position: absolute;
  z-index: 1;
  left: 0;
  top: 0.6rem;
  width: 0.625rem;
  height: 0.625rem;
  border-radius: 50%;
  border: 1px solid var(--frame-muted);
  background: var(--bg);
  transition: background-color 0.4s, border-color 0.4s;
}
.step.is-on::before, .step.is-past::before { background: var(--lit); border-color: var(--lit); }
.step__n { grid-column: 1; padding-top: 0.45rem; font: 600 var(--t-xs)/1 var(--f-text); letter-spacing: 0.06em; color: var(--fg-3); font-variant-numeric: tabular-nums; }
.step__t {
  grid-column: 2;
  font: 760 var(--t-step)/0.98 var(--f-display);
  font-stretch: 106%;
  letter-spacing: -0.025em;
  text-transform: uppercase;
  transition: color 0.4s;
}
.step__d { grid-column: 2; max-width: 44ch; margin-top: 0.75rem; color: var(--fg-2); }
/* with the script running, the step being read is in full ink and the rest step back */
html.js .steps.is-live .step:not(.is-on) .step__t { color: var(--fg-3); }
@media (max-width: 899px) {
  .proc__head { grid-column: 1 / -1; position: static; margin-bottom: 3rem; }
  .steps { grid-column: 1 / -1; }
  .step { grid-template-columns: 2.5rem minmax(0, 1fr); padding-left: 1.75rem; }
}

/* ------------------------------------------------------------------ proof */
.proof { display: grid; justify-items: center; text-align: center; }
.proof__q blockquote p {
  max-width: 28ch;
  margin-inline: auto;
  font: 560 clamp(1.55rem, 0.95rem + 2.5vw, 2.9rem)/1.2 var(--f-text);
  letter-spacing: -0.02em;
  text-wrap: balance;
}
.proof__q figcaption { margin-top: 1.75rem; font-size: var(--t-s); color: var(--fg-2); }
.proof__facts {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: 0.75rem 2rem;
  margin-top: clamp(2.5rem, 2rem + 2vw, 3.5rem);
  padding-top: 1.75rem;
  border-top: 1px solid var(--rule);
}
.proof__facts b { font-weight: 720; }
/* three more reviews under the statement, from the live widget; a swipeable row on phones */
.proof__list {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--gutter);
  width: 100%;
  margin-top: clamp(3rem, 2rem + 3vw, 4.5rem);
  text-align: left;
}
.proof__list[hidden] { display: none; }
.proof__item { display: grid; align-content: start; gap: 0.8rem; padding-top: 1.5rem; border-top: 1px solid var(--rule); }
.proof__stars { display: flex; gap: 0.15rem; color: var(--ink); }
.proof__stars svg { width: 0.95rem; height: 0.95rem; fill: currentColor; }
.proof__stars .is-off { opacity: 0.2; }
.proof__text { display: -webkit-box; -webkit-line-clamp: 6; -webkit-box-orient: vertical; overflow: hidden; }
.proof__who { font-size: var(--t-s); color: var(--fg-2); }
.proof__who b { font-weight: 650; color: var(--fg); }
.proof__read { font-size: var(--t-s); justify-self: start; }
@media (max-width: 899px) {
  .proof__list {
    grid-template-columns: none;
    grid-auto-flow: column;
    grid-auto-columns: 82%;
    overflow-x: auto;
    overscroll-behavior-x: contain;
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
  }
  .proof__list::-webkit-scrollbar { display: none; }
  .proof__item { scroll-snap-align: start; }
}

/* ------------------------------------------------------------ skeletons */
/* While the live reviews load: bars in the plate's own ink that breathe, the figures turn into
   chips of the same ink. Nothing here shows without JavaScript; the page's own content does. */
.skel { display: none; }
.is-loading .skel { display: grid; }
.is-loading [data-review-lead] { display: none; }
.is-loading [data-live='rating'], .is-loading [data-live='count'] { color: transparent; border-radius: 0.3em; }
.skel i, .is-loading [data-live='rating'], .is-loading [data-live='count'] { background-color: color-mix(in srgb, var(--fg) 9%, transparent); }
.skel i { display: block; border-radius: 0.4rem; }
@media (prefers-reduced-motion: no-preference) {
  .skel i, .is-loading [data-live='rating'], .is-loading [data-live='count'] { animation: skel 1.4s ease-in-out infinite; }
  @keyframes skel { 50% { background-color: color-mix(in srgb, var(--fg) 17%, transparent); } }
}
.proof__skel { width: min(100%, 44rem); gap: 0.85rem; justify-items: center; }
.proof__skel i { width: 100%; height: clamp(1.3rem, 0.8rem + 2vw, 2.4rem); }
.proof__skel i:nth-child(2) { width: 94%; }
.proof__skel i:nth-child(3) { width: 62%; }
.proof__skel i:nth-child(4) { width: 15rem; height: 0.95rem; margin-top: 1.1rem; }
.proof__list-skel { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--gutter); width: 100%; margin-top: clamp(3rem, 2rem + 3vw, 4.5rem); }
.proof__list-skel > div { display: grid; gap: 0.7rem; padding-top: 1.5rem; border-top: 1px solid var(--rule); }
.proof__list-skel i { height: 0.95rem; }
.proof__list-skel i:first-child { width: 5.5rem; }
.proof__list-skel i:nth-child(4) { width: 70%; }
.proof__list-skel i:last-child { width: 9rem; margin-top: 0.4rem; }
@media (max-width: 899px) {
  .proof__list-skel { grid-template-columns: 82%; overflow: hidden; }
  .proof__list-skel > div:not(:first-child) { display: none; }
}

/* ------------------------------------------------------------------- crew */
.crew__hint { font-size: var(--t-s); color: var(--fg-3); }
.crew__list { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--gutter); }
.mate__btn {
  position: relative;
  display: block;
  width: 100%;
  aspect-ratio: 1;
  overflow: clip;
  border-radius: 1.25rem;
  background: var(--ink);
}
.mate__under, .mate__half { position: absolute; inset: 0; }
.mate__under img, .mate__half img { width: 100%; height: 100%; object-fit: cover; }
/* The half of the photo over the cyborg's machine side slides off; the other half stays put, so
   the seam sits exactly on the cut. The machine side is per person (machineSide in site.json). */
.mate { --pull-a: -100%; --pull-b: 0%; }
.mate--r { --pull-a: 0%; --pull-b: 100%; }
/* half a runs 1px under half b, so the darker cyborg never shows as a hairline at rest */
.mate__half--a { clip-path: inset(0 calc(50% - 1px) 0 0); transition: translate 0.6s var(--e-soft); }
.mate__half--b { clip-path: inset(0 0 0 50%); transition: translate 0.6s var(--e-soft); }
.mate__seam {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 50%;
  width: 2px;
  translate: -50% 0;
  background: var(--lit);
  box-shadow: 0 0 14px 2px rgb(255 113 66 / 0.55);
  opacity: 0;
  transition: opacity 0.3s;
}
@media (hover: hover) {
  .mate__btn:hover .mate__half--a { translate: var(--pull-a) 0; }
  .mate__btn:hover .mate__half--b { translate: var(--pull-b) 0; }
  .mate__btn:hover .mate__seam { opacity: 1; }
}
.mate__btn[aria-pressed='true'] .mate__half--a, .mate__btn:focus-visible .mate__half--a { translate: var(--pull-a) 0; }
.mate__btn[aria-pressed='true'] .mate__half--b, .mate__btn:focus-visible .mate__half--b { translate: var(--pull-b) 0; }
.mate__btn[aria-pressed='true'] .mate__seam, .mate__btn:focus-visible .mate__seam { opacity: 1; }
.mate__btn:focus-visible { outline-offset: 4px; }
.mate__name { margin-top: 1rem; font: 720 clamp(1.1rem, 1rem + 0.5vw, 1.4rem)/1.1 var(--f-display); font-stretch: 106%; letter-spacing: -0.01em; text-transform: uppercase; }
.mate__role { margin-top: 0.35rem; font-size: var(--t-s); color: var(--fg-2); }
.crew__more { margin-top: clamp(2.5rem, 2rem + 2vw, 3.5rem); }
@media (max-width: 899px) {
  .crew__list { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: 2rem; }
}

/* ------------------------------------------------------------------ work */
/* Recent builds: each client site as a framed screenshot under a slim address bar. Hover or focus
   scrolls the frame down through the site's first three screens, slowly, the way you would read
   it; leaving it eases back to the top. Phones swipe through the cards. */
.work__grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(2.25rem, 1.5rem + 2vw, 3.25rem) var(--gutter); }
/* relative: the card's visually hidden "(opens in a new tab)" is absolutely positioned and would
   otherwise escape the phone swipe row and widen the whole page */
.work__card { position: relative; display: grid; gap: 1.1rem; }
.work__card:focus-visible { outline-offset: 6px; border-radius: 1.1rem; }
.work__frame {
  display: block;
  overflow: clip;
  border-radius: 1rem;
  background: #fff;
  box-shadow: 0 0 0 1px var(--line), 0 22px 44px -30px rgb(30 27 32 / 0.5);
  transition: translate 0.6s var(--e-out), box-shadow 0.6s var(--e-out);
}
.work__bar {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  height: 2.1rem;
  padding: 0 0.9rem;
  background: var(--ink);
  color: var(--frame-body);
  font: 500 0.75rem/1 var(--f-text);
  letter-spacing: 0.01em;
  white-space: nowrap;
  overflow: hidden;
}
.work__bar svg { flex: none; width: 0.6rem; height: 0.72rem; fill: none; stroke: currentColor; stroke-width: 1.2; }
/* the window holds its shape; the tall screenshot sits inside it, pinned, so it never sizes the box */
.work__view { position: relative; display: block; aspect-ratio: 16 / 10; overflow: clip; background: #fff; }
.work__view picture { position: absolute; inset: 0; }
.work__shot { display: block; width: 100%; height: 100%; object-fit: cover; object-position: 50% 0; }
.work__meta { display: grid; grid-template-columns: 2.25rem minmax(0, 1fr) auto; column-gap: 0.75rem; align-items: start; }
.work__n { padding-top: 0.3rem; font: 600 var(--t-xs)/1 var(--f-text); letter-spacing: 0.06em; color: var(--fg-3); font-variant-numeric: tabular-nums; }
.work__name { font: 760 clamp(1.15rem, 0.95rem + 0.7vw, 1.55rem)/1.02 var(--f-display); font-stretch: 106%; letter-spacing: -0.02em; text-transform: uppercase; }
.work__kind { display: block; margin-top: 0.4rem; font-size: var(--t-s); color: var(--fg-2); }
/* the services rows' phone layout moves .row__go; here it always keeps its own column */
.work__meta .row__go { grid-column: 3; grid-row: 1; align-self: start; width: 2.75rem; height: 2.75rem; }
.work__meta .row__go .ar { rotate: -45deg; }
.work__card:focus-visible .row__go { background: var(--red); border-color: var(--red); color: var(--on-red); }
.work__more { margin-top: clamp(2.5rem, 1.75rem + 2vw, 3.5rem); }
@media (hover: hover) {
  .work__card:hover .row__go { background: var(--red); border-color: var(--red); color: var(--on-red); }
  .work__card:hover .row__go .ar { translate: 2px -2px; }
}
@media (prefers-reduced-motion: no-preference) {
  .work__shot { transition: object-position 1.1s var(--e-out); }
  .work__card:is(:hover, :focus-visible) .work__shot { object-position: 50% 100%; transition: object-position 7s cubic-bezier(0.45, 0, 0.55, 1); }
  .work__card:is(:hover, :focus-visible) .work__frame { translate: 0 -4px; box-shadow: 0 0 0 1px var(--line), 0 30px 56px -30px rgb(30 27 32 / 0.6); }
}
@media (max-width: 1023px) {
  .work__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
/* two columns and an odd count: the last card sits centred under the others, not alone at the left */
@media (min-width: 600px) and (max-width: 1023px) {
  .work__grid > li:last-child:nth-child(odd) { grid-column: 1 / -1; justify-self: center; width: calc((100% - var(--gutter)) / 2); }
}
/* phones: a row of cards to swipe, the next one peeking in from the edge */
@media (max-width: 599px) {
  .work__grid {
    grid-template-columns: none;
    grid-auto-flow: column;
    grid-auto-columns: 82%;
    gap: 1rem;
    margin-inline: calc(var(--pad) * -1);
    padding: 0.25rem var(--pad) 0.75rem;
    overflow-x: auto;
    overscroll-behavior-x: contain;
    scroll-snap-type: x mandatory;
    scroll-padding-inline: var(--pad);
    scrollbar-width: none;
  }
  .work__grid::-webkit-scrollbar { display: none; }
  .work__grid > li { scroll-snap-align: start; }
}

/* ------------------------------------------------------------------ talk */
.talk {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  column-gap: var(--gutter);
  align-items: start;
}
.talk__head { grid-column: 1 / span 5; display: grid; gap: 1.5rem; }
.talk__head .head__lead { max-width: 34ch; }
/* a page's own closing call can be a long sentence: it steps down a size so it never stacks into
   a tower of one-word lines */
.head__title--long { font-size: clamp(1.9rem, 1.1rem + 2.6vw, 3.25rem); line-height: 0.96; }
.talk__rows { grid-column: 7 / span 6; border-top: 1px solid var(--rule); }
.talk__row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  grid-template-areas: 'k go' 'v go';
  align-items: center;
  column-gap: 1.25rem;
  width: 100%;
  padding: clamp(1.1rem, 0.8rem + 1vw, 1.6rem) 0;
  border-bottom: 1px solid var(--rule);
  text-align: left;
}
.talk__row:focus-visible { outline-offset: -2px; border-radius: 0.5rem; }
.talk__k { grid-area: k; font: 600 var(--t-xs)/1.2 var(--f-text); letter-spacing: 0.08em; text-transform: uppercase; color: var(--fg-2); }
.talk__v {
  grid-area: v;
  margin-top: 0.4rem;
  font: 640 clamp(1.35rem, 0.95rem + 1.7vw, 2.35rem)/1.15 var(--f-text);
  letter-spacing: -0.02em;
  overflow-wrap: anywhere;
}
.talk__row .row__go { grid-area: go; }
.talk__row--book .row__go { background: var(--red); border-color: var(--red); color: var(--on-red); }
@media (hover: hover) {
  .talk__row--book:hover .row__go { background: var(--red-deep); border-color: var(--red-deep); }
}
@media (max-width: 899px) {
  .talk__head, .talk__rows { grid-column: 1 / -1; }
  .talk__head { margin-bottom: 2.5rem; }
}

/* ----------------------------------------------------------------- footer */
.ft {
  padding-top: clamp(4rem, 3rem + 4vw, 6.5rem);
  padding-bottom: calc(1.25rem + env(safe-area-inset-bottom));
}
/* a quiet sign-off: the logo and one line about the studio */
.ft__brand {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 1rem 2rem;
  margin-bottom: clamp(2.5rem, 2rem + 2vw, 3.5rem);
  padding-bottom: clamp(2.5rem, 2rem + 2vw, 3.5rem);
  border-bottom: 1px solid var(--rule);
}
.ft__brand .hd__logo { margin-left: -0.35rem; }
.ft__brand .hd__logo img { height: clamp(2.2rem, 1.8rem + 1.2vw, 2.9rem); }
.ft__line { font-size: var(--t-s); color: var(--fg-2); }
.ft__map { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 2rem var(--gutter); scroll-margin-top: 6rem; }
.ft__map:focus { outline: none; }
.ft__h { margin-bottom: 1rem; font: 600 var(--t-xs)/1.2 var(--f-text); letter-spacing: 0.08em; text-transform: uppercase; color: var(--fg-3); }
.ft__col { font-size: var(--t-s); color: var(--fg-2); }
.ft__col li + li { margin-top: 0.15rem; }
.ft__col a { display: inline-block; padding-block: 0.2rem; color: var(--fg); }
.ft__col p { margin-top: 0.75rem; }
.ft__base {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 1rem;
  margin-top: clamp(2.5rem, 2rem + 2vw, 3.5rem);
  padding-top: 1rem;
  border-top: 1px solid var(--rule);
  font-size: var(--t-xs);
  color: var(--fg-3);
}
.ft__base a { display: inline-block; padding-block: 0.35rem; }
@media (max-width: 767px) {
  .ft__map { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* ------------------------------------------------------------ inner pages */
/* The hero of every inner page: the homepage's hero at a shorter height, its heading one step
   smaller, the page's live hero list (when it has one) on the right. */
.pghero {
  min-height: min(100svh, 46rem);
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  column-gap: var(--gutter);
  align-items: end;
  padding-top: calc(var(--hd-top) + var(--hd-h) + clamp(3rem, 8svh, 6rem));
  padding-bottom: calc(var(--r-plate) + clamp(3rem, 7svh, 5rem));
  border-radius: 0;
  overflow: clip;
}
.pghero__copy { grid-column: 1 / span 7; }
.pghero__title {
  /* the longest live heading word, "SpiderWebDev?", is 9.65em wide: on narrow phones the size is
     capped so it always fits the column, and a longer one breaks rather than runs off */
  font: 800 min(clamp(1.75rem, 1rem + 4.6vw, 5.25rem), calc((100vw - var(--pad) * 2) / 9.8))/0.92 var(--f-display);
  font-stretch: 108%;
  letter-spacing: -0.035em;
  text-transform: uppercase;
  margin-left: -0.04em;
  overflow-wrap: break-word;
}
/* and never wider than its column: the layout passes the width of the heading's longest word
   (--lw, in em), so a long word like CONSULTATION steps the size down instead of breaking */
.pghero__copy { container-type: inline-size; }
.pghero__title { font-size: min(clamp(1.75rem, 1rem + 4.6vw, 5.25rem), calc((100vw - var(--pad) * 2) / 9.8), calc(100cqi / var(--lw, 8))); }
.pghero__lead { max-width: 46ch; margin-top: clamp(1.25rem, 3svh, 2rem); font-size: clamp(1.0625rem, 1rem + 0.3vw, 1.25rem); color: var(--fg-2); }
.pghero__acts { display: flex; flex-wrap: wrap; gap: 0.75rem; margin-top: clamp(1.5rem, 3.5svh, 2.25rem); }
.pghero__list { grid-column: 9 / span 4; align-self: end; border-top: 1px solid var(--rule); }
.pghero__list li, .ticks li {
  position: relative;
  padding: 0.85rem 0 0.85rem 1.4rem;
  border-bottom: 1px solid var(--rule);
  font-size: var(--t-s);
  color: var(--fg-2);
}
.pghero__list li::before, .ticks li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 1.3rem;
  width: 0.45rem;
  height: 0.45rem;
  border-radius: 50%;
  background: var(--lit);
}
.plate--skin .ticks li::before { background: var(--red); }
@media (max-width: 899px) {
  .pghero__copy, .pghero__list { grid-column: 1 / -1; }
  .pghero__list { margin-top: 2.75rem; }
}
@media (max-width: 767px) {
  .pghero__acts .btn { flex: 1 1 100%; }
}

/* a plate's small heading where the live page has one over a short block */
.subhead {
  font: 760 clamp(1.3rem, 1rem + 1vw, 1.75rem)/1.05 var(--f-display);
  font-stretch: 106%;
  letter-spacing: -0.02em;
  text-transform: uppercase;
}

/* Pillars: the live page's picture on a white tile (its own white ground) and its three short
   claims as rows beside it */
.pillars { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gutter); row-gap: 2.5rem; align-items: start; }
.tile {
  grid-column: 1 / span 5;
  display: grid;
  place-items: center;
  aspect-ratio: 8 / 5;
  padding: clamp(1rem, 3vw, 2.5rem);
  border-radius: 1.25rem;
  background: #fff;
}
.tile img { width: 100%; height: 100%; object-fit: contain; }
.tile--photo { padding: 0; aspect-ratio: auto; overflow: clip; background: var(--ink); }
/* a service picture: a dark studio scene in the site's grade, with the platform's real logo on a
   small white badge in its corner (logos are never redrawn) */
.tile--scene { position: relative; padding: 0; overflow: clip; background: var(--ink); }
.tile--scene picture, .tile--scene picture img { display: block; width: 100%; height: 100%; object-fit: cover; }
.tile__logo {
  position: absolute;
  left: clamp(0.75rem, 0.5rem + 1vw, 1.25rem);
  bottom: clamp(0.75rem, 0.5rem + 1vw, 1.25rem);
  display: grid;
  place-items: center;
  padding: 0.55rem 0.85rem;
  border-radius: 0.8rem;
  background: #fff;
  box-shadow: 0 10px 28px -12px rgb(0 0 0 / 0.6);
}
.tile__logo img { width: auto; height: clamp(1.6rem, 1.1rem + 1.2vw, 2.3rem); object-fit: contain; }
.tile__logo--stack img { height: clamp(3.75rem, 2.75rem + 2.6vw, 5.5rem); }
.tile--photo img { object-fit: cover; }
.pillars__list { grid-column: 7 / span 6; border-top: 1px solid var(--rule); }
.pillar { display: grid; gap: 0.5rem; padding: 1.4rem 0; border-bottom: 1px solid var(--rule); }
.pillar p { max-width: 54ch; color: var(--fg-2); }
@media (max-width: 899px) {
  .tile, .pillars__list { grid-column: 1 / -1; }
}

/* static index rows: the services rows' type, a name and its description, nothing to press */
.rowx {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  column-gap: var(--gutter);
  padding: clamp(1.25rem, 0.8rem + 1.4vw, 2rem) 0;
  border-bottom: 1px solid var(--rule);
}
.rowx__t { font: 760 var(--t-row)/0.98 var(--f-display); font-stretch: 106%; letter-spacing: -0.025em; text-transform: uppercase; }
.rowx__d { max-width: 62ch; color: var(--fg-2); }
@media (max-width: 899px) {
  .rowx { grid-template-columns: minmax(0, 1fr); row-gap: 0.6rem; }
}

/* plans: a price, its term and what it includes, side by side under hairlines */
.price__group + .price__group { margin-top: clamp(4rem, 3rem + 4vw, 6.5rem); }
.tiers { display: grid; grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr)); gap: var(--gutter); }
.tier { display: grid; align-content: start; gap: 0.4rem; padding-top: 1.5rem; border-top: 1px solid var(--rule); }
.tier__price { font: 720 clamp(2.4rem, 1.8rem + 2vw, 3.4rem)/1 var(--f-text); letter-spacing: -0.03em; font-variant-numeric: proportional-nums; }
.tier__price small { margin-left: 0.15em; font-size: 0.42em; font-weight: 600; letter-spacing: 0; color: var(--fg-2); }
.tier__term { font: 600 var(--t-xs)/1.3 var(--f-text); letter-spacing: 0.08em; text-transform: uppercase; color: var(--fg-3); }
.tier .ticks { margin-top: 1rem; border-top: 1px solid var(--rule); }

/* the external platform link, set like the line button with an arrow up and out */
.ext .ar { rotate: -45deg; }

/* long reading on a plate */
.prose { max-width: 66ch; }
.prose p + p { margin-top: 1.1em; }
.prose p { font-size: clamp(1.0625rem, 1rem + 0.25vw, 1.2rem); line-height: 1.6; }

/* About: the story beside its picture, the three values, the team with what each does */
.story { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gutter); row-gap: 2.5rem; align-items: start; }
.story .prose { grid-column: 1 / span 7; }
.story .tile { grid-column: 9 / span 4; position: sticky; top: calc(var(--hd-top) + var(--hd-h) + 2rem); }
.values { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--gutter); }
.value { display: grid; align-content: start; gap: 0.9rem; padding-top: 1.5rem; border-top: 1px solid var(--rule); }
.value p { color: var(--fg-2); }
.value__img { margin: 0 0 0.6rem; aspect-ratio: 3 / 2; overflow: clip; border-radius: 1.25rem; background: var(--ink); }
.value__img img { display: block; width: 100%; height: 100%; object-fit: cover; }
.mate__bio { margin-top: 0.6rem; font-size: var(--t-s); color: var(--fg-2); max-width: 36ch; }
@media (max-width: 899px) {
  .story .prose, .story .tile { grid-column: 1 / -1; position: static; }
  .values { grid-template-columns: minmax(0, 1fr); }
}

/* Contact and the calendar: a live GoHighLevel form or calendar beside the ways to reach SWD */
.reach { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gutter); row-gap: 3rem; align-items: start; }
.reach__side { grid-column: 1 / span 5; display: grid; gap: 1.25rem; align-content: start; }
.reach__main { grid-column: 7 / span 6; display: grid; gap: 1.25rem; }
.reach--wide .reach__main { grid-column: 1 / span 7; grid-row: 1; }
.reach--wide .reach__side { grid-column: 9 / span 4; }
.talk__row--static { cursor: default; }
/* the contact rows sit in their own column here, not in the talk plate's grid */
.reach .talk__rows { grid-column: auto; }
/* the live widgets are white, so is their frame; GoHighLevel's script sizes the iframe to its
   content, the minimum only holds the space while it loads */
.embed { border-radius: 1.25rem; overflow: clip; background: #fff; }
.embed iframe { display: block; width: 100%; min-height: 22rem; border: 0; }
.reach--wide .embed iframe { min-height: 36rem; }
/* While a widget loads: a skeleton of what it will show (fields and a button for the form; a title,
   the event box, the month and its days for the calendar), in the plate's ink, breathing like the
   reviews' skeletons. It covers the frame until site.js sees it loaded; without JavaScript it never
   shows. */
.embed { position: relative; }
html.js .embed.is-loading { min-height: 31rem; }
html.js .reach--wide .embed.is-loading { min-height: 37rem; }
.embed__skel { display: none; }
html.js .embed.is-loading .embed__skel {
  position: absolute;
  inset: 0;
  z-index: 1;
  display: grid;
  align-content: start;
  gap: 0.6rem;
  padding: clamp(1.5rem, 1rem + 2vw, 2.5rem);
  background: #fff;
  transition: opacity 0.3s;
}
.embed__skel i { display: block; border-radius: 0.4rem; background-color: color-mix(in srgb, var(--fg) 8%, transparent); }
@media (prefers-reduced-motion: no-preference) {
  .embed__skel i { animation: skel 1.4s ease-in-out infinite; }
}
.embed__skel--form { max-width: 30rem; margin-inline: auto; }
.sk-label { width: 6rem; height: 0.7rem; margin-top: 0.5rem; }
.sk-field { height: 2.6rem; }
.sk-field--tall { height: 6rem; }
.sk-button { height: 2.75rem; margin-top: 1rem; }
.sk-title { width: 11rem; height: 1.1rem; }
.sk-box { height: 4.5rem; margin-block: 0.4rem 0.8rem; }
.sk-month { display: flex; align-items: center; justify-content: center; gap: 1.25rem; }
.sk-month .sk-label { width: 7rem; margin: 0; }
.sk-dot { width: 1.75rem; height: 1.75rem; border-radius: 50% !important; }
.sk-days { display: grid; grid-template-columns: repeat(7, 1fr); gap: 0.9rem 0.5rem; justify-items: center; margin-block: 1rem 1.25rem; }
.sk-days i { width: 2rem; height: 2rem; border-radius: 50%; }
/* Long reads (Consultations, Resources, Support): the page's headings as a numbered index in the
   hero, then numbered chapters, each heading held on the left while its text runs on the right */
.pghero__toc li { padding: 0; }
.pghero__toc li::before { content: none; }
.pghero__toc a {
  display: grid;
  grid-template-columns: 2.25rem minmax(0, 1fr);
  padding: 0.85rem 0;
  color: var(--fg);
  font-weight: 600;
  transition: color 0.25s;
}
.pghero__n, .chap__n, .qa__n { font: 600 var(--t-xs)/1.5 var(--f-text); letter-spacing: 0.06em; color: var(--fg-3); font-variant-numeric: tabular-nums; }
.pghero__toc a:focus-visible { outline-offset: 2px; border-radius: 0.4rem; }
@media (hover: hover) {
  .pghero__toc a:hover { color: var(--lit); }
}
.chap {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  column-gap: var(--gutter);
  row-gap: 1.25rem;
  padding-block: clamp(2.5rem, 1.5rem + 3vw, 4.5rem);
  border-top: 1px solid var(--rule);
}
.chap:first-child { border-top: 0; padding-top: 0; }
.chap:last-child { padding-bottom: 0; }
.chap__head { grid-column: 1 / span 4; align-self: start; position: sticky; top: calc(var(--hd-top) + var(--hd-h) + 2rem); display: grid; gap: 0.9rem; }
.chap__t { font: 760 var(--t-step)/0.98 var(--f-display); font-stretch: 106%; letter-spacing: -0.025em; text-transform: uppercase; }
.chap__body { grid-column: 6 / span 7; display: grid; gap: 1.5rem; align-content: start; }
/* long text reads in full ink on cream; on charcoal, in the softer body cream */
.plate--frame .chap__body :is(p, li) { color: var(--fg-2); }
.chap__body .tile { grid-column: auto; aspect-ratio: auto; padding: clamp(0.75rem, 2vw, 1.5rem); }
.chap__body .tile img { height: auto; }
.chap__acts { display: flex; flex-wrap: wrap; gap: 0.75rem; }
@media (max-width: 899px) {
  .chap__head, .chap__body { grid-column: 1 / -1; position: static; }
}
/* the big first lines of a long read, before its chapters */
.intro { display: grid; gap: 1.25rem; margin-bottom: clamp(3.5rem, 2.5rem + 3vw, 5.5rem); }
.intro__big { max-width: 34ch; font: 600 clamp(1.45rem, 1.1rem + 1.3vw, 2.25rem)/1.22 var(--f-text); letter-spacing: -0.015em; }
.intro p:not(.intro__big) { max-width: 62ch; color: var(--fg-2); }
/* numbered steps inside a chapter: a small ring for each, joined by a hairline */
.howto { display: grid; gap: 0; counter-reset: howto; }
.howto li { position: relative; display: grid; grid-template-columns: 2.5rem minmax(0, 1fr); padding: 0 0 1.25rem; counter-increment: howto; }
.howto li::before {
  content: counter(howto);
  display: grid;
  place-items: center;
  width: 1.75rem;
  height: 1.75rem;
  border: 1px solid var(--rule);
  border-radius: 50%;
  font: 650 var(--t-xs)/1 var(--f-text);
  color: var(--fg);
}
.howto li:not(:last-child)::after { content: ''; position: absolute; left: calc(0.875rem - 0.5px); top: 1.9rem; bottom: 0.15rem; width: 1px; background: var(--rule); }
.howto li > * { padding-top: 0.15rem; }
/* links inside running text: underlined, since they share the text's colour */
.prose a, .qa__a a, .rowx__d a {
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 0.22em;
  text-decoration-color: color-mix(in srgb, currentColor 45%, transparent);
  overflow-wrap: anywhere;
  transition: text-decoration-color 0.25s, color 0.25s;
}
@media (hover: hover) {
  .prose a:hover, .qa__a a:hover, .rowx__d a:hover { text-decoration-color: var(--red); }
  .plate--frame :is(.prose, .qa__a, .rowx__d) a:hover { text-decoration-color: var(--lit); }
}
.rowx__d p + p { margin-top: 0.9em; }

/* action rows inside a chapter (call, email, download, book): the contact rows, a size smaller */
.chap__body .talk__rows { grid-column: auto; }
.talk__row--s .talk__v { font-size: clamp(1.15rem, 0.95rem + 0.8vw, 1.6rem); line-height: 1.2; }
.rows + .chap { border-top: 0; }
/* a screenshot from the live page, shown at its own size on its white ground */
.tile--shot { place-items: center; }
.chap__body .tile--shot img { width: auto; max-width: 100%; }
/* Consultations: the live domain and hosting diagram redrawn in the site's type, the registrar
   pointing through DNS to web hosting and email hosting */
.dns { padding: clamp(1.5rem, 1rem + 2vw, 2.5rem) clamp(1rem, 0.5rem + 2vw, 2rem); border: 1px solid var(--rule); border-radius: 1.25rem; }
.dns__flow { display: grid; grid-template-columns: minmax(0, 1fr) 2.75rem minmax(0, 1fr) minmax(0, 1.35fr); align-items: center; column-gap: 0.5rem; }
.dns__node { display: grid; justify-items: center; gap: 0.6rem; text-align: center; font: 650 var(--t-s)/1.25 var(--f-text); }
.dns__node svg { box-sizing: content-box; width: 1.5rem; height: 1.5rem; padding: 0.7rem; border: 1px solid var(--rule); border-radius: 50%; fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
.dns__node--hub svg { padding: 1rem; border-color: var(--lit); background: color-mix(in srgb, var(--lit) 16%, transparent); }
.dns__arr { width: 100%; height: 0.7rem; fill: none; stroke: var(--lit); stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
.dns__ends { display: grid; gap: 1.75rem; }
.dns__end { display: grid; grid-template-columns: 2.75rem minmax(0, 1fr); align-items: center; column-gap: 0.5rem; }
.dns__end:first-child .dns__arr { rotate: -24deg; }
.dns__end:last-child .dns__arr { rotate: 24deg; }
@media (max-width: 599px) {
  .dns__flow { grid-template-columns: minmax(0, 1fr); row-gap: 0.75rem; justify-items: center; }
  .dns__flow > .dns__arr { width: 2.5rem; rotate: 90deg; }
  .dns__ends { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem; width: 100%; }
  .dns__end { grid-template-columns: minmax(0, 1fr); row-gap: 0.75rem; justify-items: center; }
  .dns__end .dns__arr { width: 2.5rem; }
  .dns__end:first-child .dns__arr { rotate: 120deg; }
  .dns__end:last-child .dns__arr { rotate: 60deg; }
}

/* FAQ: the live list, one numbered row per question that opens to its answer (native details,
   so every answer is in the page and find-in-page opens it) */
.qa { border-top: 1px solid var(--rule); }
.qa details { border-bottom: 1px solid var(--rule); }
.qa summary {
  display: grid;
  grid-template-columns: 2.75rem minmax(0, 1fr) auto;
  column-gap: clamp(0.5rem, 2vw, 1.5rem);
  align-items: center;
  padding: clamp(1.1rem, 0.85rem + 0.9vw, 1.6rem) 0;
  cursor: pointer;
  list-style: none;
}
.qa summary::-webkit-details-marker { display: none; }
.qa summary:focus-visible { outline-offset: -2px; border-radius: 0.5rem; }
.qa__q { max-width: 56ch; font: 650 clamp(1.08rem, 0.98rem + 0.45vw, 1.35rem)/1.3 var(--f-text); letter-spacing: -0.01em; transition: translate 0.5s var(--e-out); }
.qa__i {
  position: relative;
  display: grid;
  place-items: center;
  width: 2.75rem;
  height: 2.75rem;
  border: 1px solid var(--rule);
  border-radius: 50%;
  transition: background-color 0.25s, border-color 0.25s, color 0.25s, rotate 0.4s var(--e-out);
}
.qa__i::before, .qa__i::after { content: ''; position: absolute; width: 0.85rem; height: 1.5px; border-radius: 1px; background: currentColor; }
.qa__i::after { rotate: 90deg; transition: rotate 0.4s var(--e-out); }
.qa details[open] .qa__i::after { rotate: 0deg; }
.qa details[open] .qa__i { background: var(--fg); border-color: var(--fg); color: var(--bg); }
@media (hover: hover) {
  .qa summary:hover .qa__q { translate: 0.3rem 0; }
  .qa summary:hover .qa__i { background: var(--red); border-color: var(--red); color: var(--on-red); }
}
.qa summary:focus-visible .qa__i { background: var(--red); border-color: var(--red); color: var(--on-red); }
.qa__a { display: grid; gap: 0.9em; max-width: 64ch; padding: 0 0 clamp(1.5rem, 1rem + 1.2vw, 2.25rem) calc(2.75rem + clamp(0.5rem, 2vw, 1.5rem)); color: var(--fg-2); }
@media (prefers-reduced-motion: no-preference) {
  .qa { interpolate-size: allow-keywords; }
  .qa details::details-content { block-size: 0; overflow-y: clip; transition: block-size 0.45s var(--e-out), content-visibility 0.45s allow-discrete; }
  .qa details[open]::details-content { block-size: auto; }
}
@media (max-width: 767px) {
  .qa summary { grid-template-columns: minmax(0, 1fr) auto; row-gap: 0.35rem; }
  .qa__n { grid-column: 1; }
  .qa__q { grid-column: 1; grid-row: 2; }
  .qa__i { grid-column: 2; grid-row: 1 / span 2; width: 2.5rem; height: 2.5rem; }
  .qa__a { padding-left: 0; }
}

.notes { border-top: 1px solid var(--rule); }
.notes li { display: grid; gap: 0.25rem; padding: 1rem 0; border-bottom: 1px solid var(--rule); color: var(--fg-2); font-size: var(--t-s); }
.notes b { color: var(--fg); font-weight: 650; }
@media (max-width: 899px) {
  .reach__side, .reach__main, .reach--wide .reach__main, .reach--wide .reach__side { grid-column: 1 / -1; grid-row: auto; }
}

/* ------------------------------------------------------------------- blog */
/* The blog's heroes: the index and tag pages a short plate (heading and one meta line), a post a
   taller one with its long live title across ten columns and the byline closing it. */
.pghero--blog { min-height: 0; padding-bottom: calc(var(--r-plate) + clamp(2.5rem, 6svh, 4rem)); }
.pghero--blog .pghero__copy { grid-column: 1 / -1; }
.pghero--post { min-height: min(68svh, 36rem); }
.pghero--post .pghero__copy { grid-column: 1 / span 10; }
.pghero__title--post { font-size: min(clamp(1.75rem, 1.05rem + 3vw, 4rem), calc((100vw - var(--pad) * 2) / 9.8), calc(100cqi / var(--lw, 8))); line-height: 0.96; }
.pghero__meta {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem 0.6rem;
  margin-top: clamp(1.25rem, 3svh, 2rem);
  font: 600 var(--t-xs)/1.4 var(--f-text);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--fg-3);
}
/* a post's byline: every part opens with its dot, and the box reaches one dot-width left into a
   clipped strip, so the dot of whichever part starts a line is cut away and no line starts or
   ends on a dot */
.pghero__meta--by { gap: 0.35rem 0; margin-left: -1.5rem; clip-path: inset(0 0 0 1.5rem); }
.pghero__meta--by > * { position: relative; padding-left: 1.5rem; }
.pghero__meta--by > *::before { content: '·'; content: '·' / ''; position: absolute; left: 0; width: 1.5rem; text-align: center; }
@media (max-width: 899px) {
  .pghero--post .pghero__copy { grid-column: 1 / -1; }
}

/* posts as index rows: the lead image, the title with its date and byline under it, the arrow */
.posts { border-top: 1px solid var(--rule); }
.postrow {
  display: grid;
  grid-template-columns: clamp(9rem, 4rem + 12vw, 17rem) minmax(0, 1fr) auto;
  grid-template-areas: "img t go" "img m go";
  grid-template-rows: 1fr 1fr;
  column-gap: clamp(1.25rem, 0.8rem + 1.6vw, 2.75rem);
  row-gap: 0.6rem;
  align-items: center;
  padding: clamp(1.1rem, 0.85rem + 1vw, 1.75rem) 0;
  border-bottom: 1px solid var(--rule);
}
.postrow:focus-visible { outline-offset: -2px; border-radius: 0.5rem; }
.postrow__img { grid-area: img; display: block; aspect-ratio: 40 / 21; overflow: clip; border-radius: 0.9rem; background: var(--ink); }
.postrow__img picture, .postrow__img img { display: block; width: 100%; height: 100%; object-fit: cover; }
.postrow__t { grid-area: t; align-self: end; max-width: 42ch; font: 700 clamp(1.1rem, 0.95rem + 0.65vw, 1.6rem)/1.2 var(--f-text); letter-spacing: -0.015em; transition: translate 0.5s var(--e-out); }
.postrow__meta { grid-area: m; align-self: start; display: flex; flex-wrap: wrap; gap: 0.3rem 0.55rem; font: 600 var(--t-xs)/1.4 var(--f-text); letter-spacing: 0.08em; text-transform: uppercase; color: var(--fg-3); }
.postrow .row__go { grid-area: go; }
.postrow:focus-visible .row__go { background: var(--red); border-color: var(--red); color: var(--on-red); }
@media (hover: hover) {
  .postrow:hover .postrow__t { translate: 0.4rem 0; }
  .postrow:hover .row__go { background: var(--red); border-color: var(--red); color: var(--on-red); }
  .postrow:hover .row__go .ar { translate: 3px 0; }
}
@media (prefers-reduced-motion: no-preference) {
  .postrow__img img { transition: scale 0.9s var(--e-out); }
  .postrow:is(:hover, :focus-visible) .postrow__img img { scale: 1.04; }
}
/* the newest post on the blog's first page: its picture large, its title in the headings' voice */
.posts--lead > li:first-child .postrow {
  grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
  grid-template-areas: "img t" "img m" "img go";
  grid-template-rows: 1fr auto auto;
  align-items: start;
  padding-block: clamp(1.75rem, 1.25rem + 2vw, 3rem);
}
.posts--lead > li:first-child .postrow__img { border-radius: 1.25rem; }
.posts--lead > li:first-child .postrow__t { font: 780 var(--t-row)/0.98 var(--f-display); font-stretch: 106%; letter-spacing: -0.025em; text-transform: uppercase; }
.posts--lead > li:first-child .row__go { margin-top: 1.25rem; }
@media (max-width: 899px) {
  .postrow .row__go { width: 2.75rem; height: 2.75rem; }
  .posts--lead > li:first-child .postrow { grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "img img" "t t" "m go"; grid-template-rows: auto; row-gap: 0.9rem; }
  .posts--lead > li:first-child .row__go { margin-top: 0; }
}
@media (max-width: 599px) {
  .postrow { grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "img img" "t t" "m go"; grid-template-rows: auto; row-gap: 0.8rem; }
  .postrow__img { margin-bottom: 0.3rem; }
}
.postsp__note { max-width: 46ch; margin-bottom: clamp(1.75rem, 1.25rem + 1.5vw, 2.75rem); color: var(--fg-2); }
.postsp__all, .more__all { margin-top: clamp(2rem, 1.5rem + 1.5vw, 3rem); }
.pager { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 1rem 2rem; margin-top: clamp(2rem, 1.5rem + 1.5vw, 3rem); }
.pager [rel="next"] { margin-left: auto; }
@media (hover: hover) {
  .tl:hover .tl__go--back { translate: -4px 0; }
}

/* tags: small outlined pills; the page's own tag is filled */
.tags { display: flex; flex-wrap: wrap; gap: 0.5rem; }
.tags a {
  display: inline-flex;
  align-items: center;
  min-height: 2.25rem;
  padding: 0 0.95rem;
  border: 1px solid color-mix(in srgb, var(--fg) 30%, transparent);
  border-radius: 999px;
  font: 600 var(--t-xs)/1.1 var(--f-text);
  letter-spacing: 0.02em;
  color: var(--fg-2);
  transition: border-color 0.25s, color 0.25s, background-color 0.25s;
}
.tags--all a { min-height: 2.6rem; padding: 0 1.15rem; font-size: var(--t-s); }
.tags a[aria-current="page"] { background: var(--fg); border-color: var(--fg); color: var(--bg); text-shadow: none; }
@media (hover: hover) {
  .tags a:hover { border-color: var(--fg); color: var(--fg); }
}

/* The post itself on cream: its index and tags held on the left while the post runs on a 68ch
   measure; on phones and tablets they sit above it, the index folded shut. */
.post { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gutter); row-gap: 2.5rem; align-items: start; }
.post__aside {
  grid-column: 1 / span 3;
  position: sticky;
  top: calc(var(--hd-top) + var(--hd-h) + 2rem);
  display: grid;
  gap: 2.25rem;
  max-height: calc(100svh - var(--hd-top) - var(--hd-h) - 4rem);
  overflow-y: auto;
  overscroll-behavior: contain;
  scrollbar-width: thin;
  scrollbar-color: var(--line) transparent;
}
.post__body { grid-column: 5 / span 8; min-width: 0; }
.post:not(:has(.post__aside)) .post__body { grid-column: 3 / span 8; }
.post__k, .post__toc summary { font: 600 var(--t-xs)/1.3 var(--f-text); letter-spacing: 0.08em; text-transform: uppercase; color: var(--fg-3); }
.post__k { margin-bottom: 0.9rem; }
.post__toc summary { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding-bottom: 0.9rem; cursor: pointer; list-style: none; }
.post__toc summary::-webkit-details-marker { display: none; }
.post__toc summary:focus-visible { outline-offset: 4px; border-radius: 0.3rem; }
.post__toc-i { position: relative; width: 0.75rem; height: 0.75rem; }
.post__toc-i::before, .post__toc-i::after { content: ''; position: absolute; left: 0; top: calc(50% - 0.75px); width: 100%; height: 1.5px; border-radius: 1px; background: currentColor; }
.post__toc-i::after { rotate: 90deg; transition: rotate 0.35s var(--e-out); }
.post__toc[open] .post__toc-i::after { rotate: 0deg; }
.post__toc ol { border-top: 1px solid var(--rule); }
.post__toc a {
  position: relative;
  display: block;
  padding: 0.6rem 0 0.6rem 1rem;
  border-bottom: 1px solid var(--rule);
  font-size: var(--t-s);
  line-height: 1.35;
  color: var(--fg-2);
  transition: color 0.25s;
}
.post__toc a::before { content: ''; position: absolute; left: 0; top: calc(0.6rem + 0.52em); width: 0.4rem; height: 0.4rem; border-radius: 50%; background: var(--rule); transition: background-color 0.25s; }
.post__toc a[aria-current="true"] { color: var(--fg); font-weight: 650; }
.post__toc a[aria-current="true"]::before { background: var(--red); }
.post__toc a:focus-visible { outline-offset: -2px; border-radius: 0.4rem; }
@media (hover: hover) {
  .post__toc a:hover { color: var(--fg); }
}
/* on phones and tablets the folded index comes before the post and the tags after it */
@media (max-width: 1023px) {
  .post__aside { display: contents; }
  .post__toc, .post__tags, .post__body, .post:not(:has(.post__aside)) .post__body { grid-column: 1 / -1; }
  .post__body { order: 2; }
  .post__tags { order: 3; padding-top: 2rem; border-top: 1px solid var(--rule); }
  .post__toc { border-bottom: 1px solid var(--rule); }
  .post__toc summary { padding-block: 0.9rem; border-top: 1px solid var(--rule); }
  .post__toc ol { margin-bottom: 0.25rem; }
  .post__toc li:last-child a { border-bottom: 0; }
}
@media (min-width: 1024px) {
  .post__toc summary { pointer-events: none; }
  .post__toc-i { display: none; }
}

/* the post's own text: the live words in the site's type */
.post__body { max-width: 68ch; }
.post__body > * + * { margin-top: 1.15em; }
.post__body :is(p, li) { font-size: clamp(1.0625rem, 1rem + 0.25vw, 1.2rem); line-height: 1.65; }
.post__body strong { font-weight: 680; }
.post__body h2 {
  margin-top: 2.4em;
  font: 760 clamp(1.45rem, 1.05rem + 1.45vw, 2.25rem)/1.02 var(--f-display);
  font-stretch: 106%;
  letter-spacing: -0.02em;
  text-transform: uppercase;
  scroll-margin-top: calc(var(--hd-top) + var(--hd-h) + 1.5rem);
}
.post__body h3 { margin-top: 2em; font: 700 clamp(1.2rem, 1.05rem + 0.55vw, 1.5rem)/1.22 var(--f-text); letter-spacing: -0.012em; }
.post__body h4 { margin-top: 1.75em; font: 680 clamp(1.0625rem, 1rem + 0.25vw, 1.2rem)/1.3 var(--f-text); }
.post__body :is(h2, h3, h4) + * { margin-top: 0.75em; }
.post__body > .post__cover + * { margin-top: clamp(2rem, 1.5rem + 1.5vw, 3rem); }
/* long addresses in the text (yourdomain.com/rentals/...) wrap instead of widening the page */
.post__body ul, .post__body ol { display: grid; grid-template-columns: minmax(0, 1fr); gap: 0.5em; padding-left: 1.5em; }
.post__body :is(p, li) { overflow-wrap: break-word; }
.post__body ul > li { position: relative; }
.post__body ul > li::before { content: ''; position: absolute; left: -1.05em; top: 0.72em; width: 0.38em; height: 0.38em; border-radius: 50%; background: var(--fg-3); }
.post__body ol { list-style: decimal; }
.post__body ol > li::marker { font-weight: 650; color: var(--fg-3); font-variant-numeric: tabular-nums; }
.post__body li > :is(ul, ol) { margin-top: 0.5em; }
.post__body .btn { text-decoration: none; }
/* the live page's tinted boxes */
.note {
  display: grid;
  gap: 0.75em;
  padding: clamp(1.25rem, 1rem + 1vw, 2rem);
  border: 1px solid var(--rule);
  border-radius: 1.25rem;
  background: color-mix(in srgb, var(--fg) 4%, transparent);
}
.note > * { margin: 0; }
/* pictures: the lead image across the measure, the post's own pictures at a reading size */
.post__cover { overflow: clip; aspect-ratio: 40 / 21; border-radius: 1.25rem; background: var(--ink); }
.post__cover img { display: block; width: 100%; height: 100%; object-fit: cover; }
.post__fig img { width: min(100%, 34rem); border-radius: 1rem; background: color-mix(in srgb, var(--fg) 6%, transparent); }
/* tables scroll sideways inside their own frame when the screen is narrower than they are */
.post__table { overflow-x: auto; border-radius: 0.5rem; }
.post__table:focus-visible { outline-offset: 4px; }
.post__table table { width: 100%; min-width: 34rem; border-collapse: collapse; font-size: var(--t-s); line-height: 1.45; }
.post__table :is(th, td) { padding: 0.8rem 1rem 0.8rem 0; border-bottom: 1px solid var(--rule); text-align: left; vertical-align: top; }
.post__table th { font: 600 var(--t-xs)/1.35 var(--f-text); letter-spacing: 0.06em; text-transform: uppercase; color: var(--fg-2); border-bottom-color: var(--fg); }
.post__table td:first-child { font-weight: 650; }
/* on phones the table runs to the screen's edge, so the cut column reads as more to scroll */
@media (max-width: 599px) {
  .post__table { margin-inline: calc(var(--pad) * -1); padding-inline: var(--pad); border-radius: 0; }
}
.post__table :is(p, li) { font-size: inherit; line-height: inherit; }
/* works cited: smaller, the addresses free to break */
.post__body .cites { gap: 0.6em; }
.post__body .cites li { font-size: var(--t-s); line-height: 1.5; color: var(--fg-2); overflow-wrap: anywhere; }
/* a video: the YouTube player, lazy, in a 16:9 frame */
.vid { position: relative; display: block; aspect-ratio: 16 / 9; overflow: clip; border-radius: 1.25rem; background: var(--ink); }
.vid iframe { display: block; width: 100%; height: 100%; border: 0; }

/* ---------------------------------------------------------- reduced motion */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition-duration: 0.01ms !important; animation-duration: 0.01ms !important; }
}