/* Damage Control and Third Law: the public site (docs/design/website-third-law.md §8). One stylesheet, two sets of brand
   tokens: the look is NORTH's as a look, not a structure (a condensed heading face over a plain body face, light pages
   with dark bands, squared buttons, generous space), and <html data-site="repair|thirdlaw"> picks the brand's accent and
   mark. The rules that carry behaviour (the spam trap, the wizard's steps and dialog, the no-script branches, [data-off],
   the wide and narrow switches, reduced motion, the focus ring) are shared and listed in website-third-law-parity.md. */

/* ---------- tokens ---------- */
:root {
  color-scheme: light;
  /* surfaces and text, shared by both brands */
  --paper: #f6f4ef;
  --paper-light: #ffffff;
  --field: #ffffff;
  --cream: #f6f4ef;
  --ink: #1b1d22;
  --ink-soft: #5b6270;
  --line: #d9d4c9;
  --line-strong: #b9b3a6;
  --space: #0f1620;
  --space-2: #182233;
  --space-ink: #e9ecf1;
  --wood: var(--space);
  --green: #3f7d34;
  --blue: #2c5fa6;
  --focus: #1f5fbf;
  /* the brand's accent: Damage Control's red; Third Law's is brass, below */
  --accent: #b30d2a;
  --accent-ink: #9e0b24;
  --accent-tint: #f6e1e1;
  --red: var(--accent);
  --red-text: var(--accent-ink);
  --red-tint: var(--accent-tint);
  /* type: the heading face is condensed and set in capitals; the body face is plain */
  --heading: "Oswald", "Arial Narrow", "Roboto Condensed", system-ui, sans-serif;
  --marker: var(--heading);
  --hand: "Raleway", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --plain: "Raleway", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --gutter: 16px;
  --sketch-radius: 2px;
  --card-shadow: 0 1px 2px rgba(15, 22, 32, .06), 0 8px 24px rgba(15, 22, 32, .06);
}
/* Third Law's tokens (design §3, §8): brass as an accent for lines and marks, never for text. */
:root[data-site="thirdlaw"] {
  --accent: #b08d57;
  --accent-ink: #8a6b3b;
  --accent-tint: #f3ece0;
  --tl-paper: var(--paper);
  --tl-paper-2: var(--paper-light);
  --tl-ink: var(--ink);
  --tl-muted: var(--ink-soft);
  --tl-line: var(--line);
  --tl-space: var(--space);
  --tl-space-2: var(--space-2);
  --tl-space-ink: var(--space-ink);
  --tl-brass: #b08d57;
  /* Brass lightened for text over the dark hero photo (7.8:1 on its darkened bench). */
  --tl-brass-light: #d9b57c;
  --tl-brass-ink: #8a6b3b;
  --tl-focus: var(--focus);
  --tl-head: var(--heading);
  --tl-body: var(--hand);
  --tl-gutter: var(--gutter);
  --tl-measure: 62ch;
}

/* ---------- base ---------- */
*, *::before, *::after { box-sizing: border-box; }
[hidden] { display: none !important; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: 84px; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } * { transition: none !important; } }
body {
  margin: 0;
  min-height: 100vh;
  overflow-x: hidden;
  background: var(--paper);
  color: var(--ink);
  font: 17px/1.55 var(--hand);
}
img { max-width: 100%; height: auto; }
a { color: var(--ink); text-decoration-color: var(--accent); text-underline-offset: 3px; }
:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; }
p { margin: 0 0 12px; }
.skip { position: absolute; left: -9999px; top: 8px; z-index: 100; padding: 8px 14px; background: var(--paper-light); color: var(--ink); }
.skip:focus { left: 12px; }
.wrap { max-width: 1180px; margin: 0 auto; padding: 0 var(--gutter); }
.center { text-align: center; }
.caps { text-transform: uppercase; letter-spacing: .06em; font-size: 15px; line-height: 1.35; }
.fine { margin: 0; font-size: 15px; color: var(--ink-soft); }
code { font-family: Consolas, monospace; font-size: .85em; background: rgba(0, 0, 0, .06); padding: 1px 4px; }

/* ---------- top bar ---------- */
.topbar {
  position: sticky;
  top: 0;
  z-index: 50;
  padding: 0;
  background: var(--paper-light);
  border-bottom: 1px solid var(--line);
}
.topbar-inner {
  max-width: 1180px;
  margin: 0 auto;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px var(--gutter);
}
.brand { flex: none; display: block; line-height: 0; }
.brand img { height: 38px; width: auto; }
.tl-brand { line-height: 1; padding: 8px 0; font-family: var(--heading); font-weight: 500; font-size: 22px; letter-spacing: .16em; text-transform: uppercase; color: var(--ink); text-decoration: none; }
/* "by Third Law" beside the logo once the parent is live (design §5.2): small, in the heading face, set to the logo's foot. */
.brand-by { flex: none; align-self: flex-end; margin: 0 0 -3px -2px; padding: 8px 4px 6px; font: 400 12px/1 var(--heading); letter-spacing: .14em; text-transform: uppercase; color: var(--ink-soft); text-decoration: none; white-space: nowrap; }
.brand-by:hover { color: var(--accent-ink); text-decoration: underline; text-decoration-color: var(--accent); text-decoration-thickness: 2px; text-underline-offset: 4px; }
@media (max-width: 699px) {
  /* No room beside the logo on a phone: under it, while the menu keeps its place on the right. */
  .topbar-inner:has(.brand-by) { display: grid; grid-template-columns: auto 1fr; align-items: center; row-gap: 0; }
  .topbar-inner:has(.brand-by) .brand { grid-column: 1; grid-row: 1; }
  .topbar-inner:has(.brand-by) .brand-by { grid-column: 1; grid-row: 2; align-self: start; justify-self: start; margin: 0 0 -4px; padding: 4px 2px 6px; font-size: 11px; }
  .topbar-inner:has(.brand-by) .nav { grid-column: 2; grid-row: 1 / 3; }
}
.nav { margin-left: auto; display: flex; align-items: center; justify-content: flex-end; }
.nav a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: 4px 9px;
  color: var(--ink);
  font-family: var(--heading);
  font-weight: 400;
  font-size: 15px;
  text-transform: uppercase;
  text-decoration: none;
  letter-spacing: .08em;
  white-space: nowrap;
}
.nav a:hover { text-decoration: underline; text-decoration-color: var(--accent); text-decoration-thickness: 3px; text-underline-offset: 6px; }
.nav a.hot { color: var(--accent-ink); }
/* A button's text is white on its filled background whatever the site's link colour says (X1-M1). */
a.btn, .btn, a.btn:hover, .btn:hover { color: #fff; }
a.btn-ghost, .btn-ghost { color: var(--ink); }
/* Footer and legal links are tap targets (X1-L5). */
.footer-links a, .footer-legal a, .footer-line a { display: inline-block; padding: 8px 0; }
.wide-only, .nav a.wide-only, .nav a.wider-only { display: none; }
@media (min-width: 980px) {
  .wide-only { display: inline; }
  .nav a.wide-only { display: inline-flex; }
  .narrow-only { display: none; }
  .topbar-inner { padding: 12px var(--gutter); }
  .nav a { padding: 4px 12px; }
}
/* The overview, how-it-works and blog links join the top bar where they all fit beside Repair · Sell · Buy (both languages). */
@media (min-width: 1000px) { .nav a.wider-only { display: inline-flex; } }
.nav-count { margin-left: 4px; color: var(--accent-ink); font-size: 13px; }

/* ---------- panels ---------- */
/* A page section: a white card on the light page. Kept as .panel > .sheet so every page's markup stays as it is. */
.panel { margin: 24px 0; }
.sheet {
  position: relative;
  container-type: inline-size;
  padding: 28px 20px 32px;
  background: var(--paper-light);
  border: 1px solid var(--line);
  box-shadow: var(--card-shadow);
}
@media (min-width: 700px) { .sheet { padding: 44px 48px 48px; } }
.narrow { max-width: 760px; margin-left: auto; margin-right: auto; }

/* ---------- type ---------- */
.title {
  display: inline-block;
  margin: 0 0 16px;
  padding-bottom: 14px;
  font-family: var(--heading);
  font-weight: 500;
  font-size: clamp(30px, 7vw, 44px);
  line-height: 1.08;
  letter-spacing: .03em;
  text-transform: uppercase;
  background: linear-gradient(var(--accent), var(--accent)) no-repeat left bottom / 56px 3px;
}
.title { overflow-wrap: break-word; max-width: 100%; }
.title-small { font-size: 26px; padding-bottom: 10px; }
.title-row { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 4px 24px; }
.title-row .title { margin-bottom: 10px; }
.kicker { margin: 0 0 14px; padding-bottom: 6px; font-family: var(--heading); font-size: 14px; letter-spacing: .1em; text-transform: uppercase; color: var(--ink-soft); }
.form-panel .title-row { flex-wrap: nowrap; }
.title-icon { flex: none; height: 52px; width: auto; margin: 0 0 10px auto; }
@container (max-width: 530px) { .title-icon { display: none; } }
.lede { font-size: 20px; }

/* The home page's sections: every heading centred, with its kicker under it and its stamp under that (owner, 2026-10-12);
   body text stays left-aligned for reading. Each underline keeps its heading's width. */
.home .panel:not(.hero) .sheet > .title,
.home .panel:not(.hero) .title-row .title,
.home .panel:not(.hero) .sheet > .title-small,
.home .panel:not(.hero) .sheet > .stamp { display: block; width: fit-content; max-width: 100%; margin-left: auto; margin-right: auto; text-align: center; }
.home .panel:not(.hero) .sheet > .title, .home .panel:not(.hero) .title-row .title { background-position: center bottom; }
.home .panel:not(.hero) .title-row { flex-direction: column; align-items: center; gap: 0; text-align: center; }
/* Under a centred heading, a row of one or two blog cards sits centred too, not stranded on the left. */
.home .post-cards { grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 340px)); justify-content: center; }
/* A section's closing button ("Browse all 5 devices →") that has to wrap on a phone wraps evenly, arrow with the words. */
.home .center > .btn { display: inline-block; text-align: center; text-wrap: balance; line-height: 1.2; }
.underline { text-decoration: underline; text-decoration-color: var(--accent); text-decoration-thickness: 3px; text-underline-offset: 5px; }

/* A label set apart: the home page's "We fix or buy", a job's flat price, "Got it!" on the thanks page. */
.stamp {
  display: inline-block;
  margin: 8px 6px 20px;
  padding: 8px 16px;
  font-family: var(--heading);
  font-weight: 500;
  font-size: 18px;
  line-height: 1.15;
  letter-spacing: .08em;
  text-transform: uppercase;
  text-align: center;
  color: var(--ink);
  border: 2px solid var(--accent);
}
.stamp em { font-style: normal; color: var(--accent-ink); }
.stamp-big { font-size: clamp(24px, 6vw, 36px); padding: 10px 22px; }

.num {
  flex: none;
  display: inline-grid;
  place-items: center;
  width: 40px;
  height: 40px;
  background: var(--accent);
  color: #fff;
  font: 500 18px/1 var(--heading);
  border-radius: 50%;
}
.num.small { width: 26px; height: 26px; font-size: 14px; vertical-align: middle; }

/* ---------- buttons ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-height: 54px;
  padding: 12px 28px;
  border: 2px solid var(--accent);
  background: var(--accent);
  color: #fff;
  font-family: var(--heading);
  font-weight: 500;
  font-size: 17px;
  letter-spacing: .1em;
  text-transform: uppercase;
  text-decoration: none;
  cursor: pointer;
  transition: transform .1s, background-color .1s;
}
.btn:hover { background: var(--accent-ink); border-color: var(--accent-ink); }
.btn:active { transform: translateY(1px); }
.btn:focus-visible { outline: 3px solid var(--focus); outline-offset: 3px; }
.btn:disabled { background: #8a8588; border-color: #8a8588; cursor: progress; }
.btn.small { min-height: 44px; padding: 8px 18px; font-size: 14px; }
.btn-ghost {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 48px;
  padding: 8px 18px;
  border: 2px solid var(--ink);
  border-radius: 2px;
  background: transparent;
  color: var(--ink);
  font-family: var(--heading);
  font-size: 15px;
  letter-spacing: .08em;
  text-transform: uppercase;
  text-decoration: none;
  cursor: pointer;
}
.btn-ghost:hover { background: var(--ink); color: var(--paper); }
.btn-ghost.small { min-height: 42px; padding: 6px 12px; font-size: 13px; }
.link-btn {
  min-height: 44px;
  padding: 8px 4px;
  border: 0;
  background: none;
  color: var(--ink-soft);
  font: inherit;
  font-size: 16px;
  text-decoration: underline;
  text-decoration-color: var(--accent);
  cursor: pointer;
}
.link-btn.danger { color: var(--accent-ink); }
.inline { display: inline; margin: 0; }
.actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; margin-top: 22px; }

/* ---------- hero ---------- */
.hero .sheet { padding-top: 24px; }
.hero-grid {
  display: grid;
  grid-template-columns: 1fr;
  grid-template-areas: "brand" "art" "stamp";
  gap: 6px;
  align-items: center;
}
.hero-brand { grid-area: brand; }
.hero-title { margin: 0; line-height: 0; }
.hero-logo { display: block; width: min(100%, 540px); margin-left: -6px; }
.tagline { max-width: 36ch; margin: 10px 0 0; font-size: 19px; }
.hero-art { grid-area: art; text-align: center; }
.hero-art img { width: min(100%, 480px); }
.kinds { margin: 2px 0 0; font-family: var(--heading); font-size: 13px; letter-spacing: .08em; text-transform: uppercase; color: var(--ink-soft); }
.hero-stamp { grid-area: stamp; display: flex; align-items: center; justify-content: center; gap: 4px 18px; text-align: center; }
.hero-stamp { flex-wrap: wrap; }
.hero-stamp .stamp { flex: 0 1 auto; max-width: 100%; text-wrap: balance; } /* longer in Spanish: may wrap */
.hero-stamp .family { flex: 1 1 100%; margin-top: 0; }
.hero-stamp .stamp { margin: 14px 4px 12px; font-size: 20px; }
.area { margin: 0; font-size: 15px; }
.family { margin: 4px 0 0; font: 500 14px/1.1 var(--heading); letter-spacing: .1em; color: var(--accent-ink); text-transform: uppercase; }
.hero-stamp > div, .hero-stamp .area, .hero-stamp .family { text-align: center; }
.amp { font-family: inherit; font-size: 1em; font-weight: inherit; }
@media (min-width: 900px) {
  .hero-grid { grid-template-columns: 1.15fr 1fr .62fr; grid-template-areas: "brand art stamp"; gap: 22px; }
  .hero-art img { width: 100%; }
  .hero-stamp { flex-direction: column; }
  .hero-stamp .family { flex: none; margin-top: 4px; }
  .hero-stamp .stamp { white-space: normal; }
  .hero-stamp .stamp { font-size: 26px; }
}

/* ---------- services ---------- */
.services { display: grid; gap: 10px; }
@media (min-width: 860px) { .services { grid-template-columns: 1fr 1.3fr; gap: 40px; } }
.services .lede { font-weight: 300; }
.kind-icons {
  list-style: none;
  margin: 0 0 18px;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 14px 6px;
  text-align: center;
}
.kind-icons li { display: flex; flex-direction: column; align-items: center; justify-content: flex-end; gap: 6px; font-family: var(--heading); font-size: 13px; letter-spacing: .06em; line-height: 1.1; text-transform: uppercase; color: var(--ink-soft); }
.kind-icons img { height: 52px; width: auto; object-fit: contain; }
@media (min-width: 560px) { .kind-icons { grid-template-columns: repeat(6, 1fr); } .kind-icons img { height: 72px; } .kind-icons li { font-size: 14px; } }
.checks { list-style: none; margin: 0; padding: 0; columns: 2; column-gap: 18px; }
.checks li { position: relative; break-inside: avoid; padding: 3px 0 3px 30px; font-size: 16px; }
.checks li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 5px;
  width: 22px;
  height: 20px;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 22'%3E%3Cpath d='M2 12.5l6 6.5L22 2.5' fill='none' stroke='%231b1d22' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat center / contain;
}

/* ---------- how it works ---------- */
.steps { list-style: none; margin: 0; padding: 0; display: grid; gap: 14px; }
.step {
  display: grid;
  grid-template-columns: 96px minmax(0, 1fr); /* a long word (DIAGNÓSTICO) mustn't widen the card */
  gap: 0 14px;
  padding: 16px 16px 18px;
  border: 1px solid var(--line);
  border-top: 3px solid var(--accent);
  border-radius: 2px;
  background: var(--paper-light);
}
.step-top { grid-row: span 2; display: flex; flex-direction: column; align-items: center; gap: 8px; }
.step-top img { max-height: 70px; width: auto; }
.step-title {
  justify-self: start;
  margin: 0 0 8px;
  padding: 0;
  border: 0;
  font: 500 19px/1.1 var(--heading);
  letter-spacing: .06em;
  text-transform: uppercase;
  overflow-wrap: anywhere;
  hyphens: auto;
}
.step p { margin: 0; font-size: 17px; }
@media (min-width: 560px) {
  .steps { grid-template-columns: 1fr 1fr; }
  .step { grid-template-columns: 1fr; }
  .step-top { grid-row: auto; flex-direction: row; justify-content: space-between; align-items: flex-start; min-height: 92px; }
  .step-top img { max-height: 86px; }
}
@media (min-width: 1040px) { .steps { grid-template-columns: repeat(4, 1fr); } }

.good-title { margin-top: 26px; }
.good { list-style: none; margin: 0; padding: 0; display: grid; gap: 14px; }
@media (min-width: 760px) { .good { grid-template-columns: repeat(2, 1fr); gap: 18px; } }
@media (min-width: 1100px) { .good { grid-template-columns: repeat(4, 1fr); } }
.good li { padding: 14px 16px 16px; border: 1px solid var(--line); border-radius: 2px; background: var(--paper-light); }
.good h4 { margin: 0 0 6px; font: 500 17px/1.15 var(--heading); letter-spacing: .06em; color: var(--accent-ink); text-transform: uppercase; }
.good p { margin: 0; font-size: 17px; }

/* ---------- forms ---------- */
.intro { margin: 0 0 18px; }
.row2, .row3 { display: grid; gap: 0 14px; }
@container (min-width: 440px) { .row2 { grid-template-columns: 1fr 1fr; } }
@container (min-width: 600px) { .row3 { grid-template-columns: 1fr 1fr 1fr; } }
.field { min-width: 0; margin: 0 0 12px; }
fieldset.field { margin: 0 0 14px; padding: 0; border: 0; }
.field > label, .field > legend, .label-like { display: block; margin: 0 0 4px; padding: 0; font-size: 17px; }
input:not([type=checkbox]):not([type=radio]):not([type=file]), select, textarea {
  width: 100%;
  min-height: 50px;
  padding: 9px 12px;
  border: 2px solid var(--ink);
  border-radius: 2px;
  background-color: var(--field);
  
  color: var(--ink);
  font: inherit;
  font-size: 19px;
}
textarea { min-height: 88px; line-height: 1.3; resize: vertical; }
select {
  appearance: none;
  padding-right: 40px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 10'%3E%3Cpath d='M1.5 1.5l6.5 6.5 6.5-6.5' fill='none' stroke='%231d1714' stroke-width='2.4' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 13px center;
  background-size: 15px;
}
::placeholder { color: #7a6c5e; font-style: italic; opacity: 1; }
[aria-invalid=true] { border-color: var(--red) !important; background-color: #f3d8cd !important; }
.err { margin: 4px 0 0; color: var(--red-text); font-size: 17px; line-height: 1.25; }
.hint { margin: 4px 0 0; color: var(--ink-soft); font-size: 16px; line-height: 1.25; }
.consent-field { margin-top: 6px; }
.check.consent { align-items: flex-start; gap: 12px; margin: 0; font-size: 17px; line-height: 1.3; }
.check.consent input { flex: none; width: 26px; height: 26px; margin-top: 1px; }
.err:empty, .form-err:empty { display: none; }
.form-err { margin: 14px 0 0; padding: 8px 12px; border-left: 5px solid var(--red); background: rgba(255, 245, 230, .55); color: var(--red-text); font-size: 18px; }
.money { position: relative; }
.money > span { position: absolute; left: 13px; top: 50%; transform: translateY(-50%); font-size: 19px; }
.money input { padding-left: 28px !important; }
.hp { display: none; }

.device {
  position: relative;
  min-width: 0;
  margin: 6px 0 14px;
  padding: 6px 14px 14px;
  border: 2px solid var(--line-strong);
  border-radius: 2px;
  background: rgba(255, 248, 230, .18);
}
.device legend { display: flex; align-items: center; gap: 8px; padding: 0 6px; font: 20px/1 var(--marker); text-transform: uppercase; letter-spacing: .06em; }
.device legend .num { width: 34px; height: 34px; font-size: 17px; }
.device-remove { position: absolute; top: 2px; right: 8px; }

.photos { margin-top: 4px; }
.photo-buttons { display: flex; flex-wrap: wrap; gap: 10px; }
.photo-btn {
  position: relative;
  flex: 1 1 190px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-height: 58px;
  padding: 10px 14px;
  border: 2px solid var(--line-strong);
  border-radius: 6px;
  background: var(--paper-light);
  font-size: 16px;
  letter-spacing: .02em;
  text-transform: uppercase;
  cursor: pointer;
}
.photo-btn:hover { background: #f3f0e8; }
.photo-btn svg { flex: none; }
.photo-btn[data-camera] { order: -1; } /* on phones a fresh photo is the likelier pick */
.js .photo-btn input { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; cursor: pointer; }
.photo-btn:focus-within { outline: 3px solid var(--focus); outline-offset: 2px; }
.thumbs { list-style: none; margin: 10px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.thumbs:empty { display: none; }
.thumbs li { position: relative; width: 80px; height: 80px; overflow: hidden; border: 2px solid var(--ink); border-radius: 4px; background: var(--field); }
.thumbs img { display: block; width: 100%; height: 100%; object-fit: cover; }
.thumbs li.no-preview img { display: none; }
.thumbs li.no-preview::before { content: "Photo"; position: absolute; inset: 0; display: grid; place-items: center; font-size: 15px; }
.thumb-remove {
  position: absolute;
  top: 2px;
  right: 2px;
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  padding: 0 0 3px;
  border: 2px solid var(--ink);
  border-radius: 50%;
  background: var(--cream);
  color: var(--ink);
  font: 24px/1 var(--hand);
  cursor: pointer;
}
.submit-row { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 10px 18px; margin-top: 18px; text-align: center; }
.submit-row .btn { flex: 1 1 260px; max-width: 420px; }
.submit-row .fine { flex: 1 1 100%; }

/* ---------- the intake wizard (docs/design/website-intake-wizard.md §7) ----------
   One column, at most 640 px. With the script one step shows at a time (.is-wizard); without it the steps stack as one
   long form, and :has() hides the other branch's steps and the other kinds' answers. */
.request-panel .anchor { position: relative; top: -80px; display: block; height: 0; }
.request-panel .title, .request-panel > .sheet > .intro { text-align: center; }
.request-panel .title { margin-bottom: 4px; }
.wizard { max-width: 640px; margin: 0 auto; }
.wstep { min-width: 0; margin: 0 0 22px; padding: 0; border: 0; }
.wizard.is-wizard .wstep { display: none; margin: 0; }
.wizard.is-wizard .wstep.is-current { display: block; }
.wizard [data-off], html:not(.js) [data-script-only] { display: none !important; }
.wizard .step-in { animation: step-in .22s ease-out; }
@keyframes step-in { from { opacity: 0; transform: translateX(14px); } to { opacity: 1; transform: none; } }
.step-q { display: block; width: 100%; margin: 0 0 6px; padding: 0; font: 700 clamp(24px, 6vw, 30px)/1.15 var(--heading); color: var(--ink); }
.step-q:focus { outline: none; }
.kbd .step-q:focus-visible { outline: 3px solid var(--focus); outline-offset: 4px; }
.step-q .optional, .sub-q .optional { font: 400 18px var(--hand); color: var(--ink-soft); }
.step-sub, .sub-q { margin: 0 0 14px; font-size: 18px; color: var(--ink-soft); }
.sub-q { margin-top: 16px; color: var(--ink); font: 700 20px/1.2 var(--heading); }
.device-tag { color: var(--red-text); }
.wizard-progress { height: 6px; margin: 0 0 18px; border-radius: 3px; background: rgba(60, 40, 20, .14); overflow: hidden; }
.wizard-progress span { display: block; width: 0; height: 100%; background: var(--red); transition: width .25s ease-out; }
.preset-line { margin: 0 0 14px; font-size: 18px; }
.preset-line .link-btn { padding: 0 6px; }

/* the fork: two big buttons */
.fork { display: grid; gap: 14px; margin: 8px 0 6px; }
@container (min-width: 560px) { .fork { grid-template-columns: 1fr 1fr; } }
.fork-btn {
  position: relative;
  display: grid;
  justify-items: center;
  align-content: center;
  gap: 4px;
  min-height: 150px;
  padding: 16px 14px;
  border: 2px solid var(--line-strong);
  border-radius: var(--sketch-radius);
  background: var(--paper-light);
  text-align: center;
  cursor: pointer;
  transition: transform .1s, background-color .1s;
}
.fork-btn:hover { background: #f3f0e8; }
.fork-btn:active { transform: translateY(1px) scale(.99); }
.fork-btn img { height: 64px; width: auto; }
.fork-title { font: 26px/1.1 var(--marker); text-transform: uppercase; color: var(--red-text); }
.fork-line { font-size: 18px; color: var(--ink-soft); }

/* the launcher and the dialog (docs/design/website-wizard-dialog.md): with the script, the page shows the fork as two
   buttons and the wizard opens over it; early.js marks the page (wiz-early) before it paints, site.js keeps it
   (wiz-dialog) where <dialog> works, and without either the long form shows and the launcher doesn't */
.wizard-launch { display: none; }
html.wiz-early:not(.js) .wizard-launch, html.wiz-dialog .wizard-launch { display: block; } /* once site.js runs, only a working dialog shows it (DC-9) */
html.wiz-early:not(.js) form[data-wizard] { display: none; }
.wizard-launch .fork-btn { width: 100%; font: inherit; color: inherit; }
.wizard-launch .fork-btn:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; }
.wizard-launch .preset-line { text-align: center; }
/* a fixed height, so it doesn't move between steps (WD-15), sized to what the keyboard leaves (an iPad's; DC-10) and
   pinned to the visible part of the page; 100vh first for browsers without dvh */
.wizard-dialog {
  width: min(720px, calc(100% - 32px));
  height: min(calc(100vh - 32px), 860px);
  height: min(calc(var(--vvh, 100dvh) - 32px), 860px);
  inset: auto 0;
  top: var(--vvt, 0px);
  margin: max(16px, calc((var(--vvh, 100dvh) - 860px) / 2)) auto 16px;
  max-width: none;
  max-height: none;
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--ink);
  overflow: hidden;
}
.wizard-dialog[open] { display: flex; flex-direction: column; }
.wizard-dialog::backdrop { background: rgba(15, 22, 32, .72); }
.wizard-head {
  position: relative;
  flex: none;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 12px 14px 20px;
  background: var(--paper-light);
  border-bottom: 1px solid var(--line);
}
.wizard-title { flex: 1; min-width: 0; margin: 0; font: 700 20px/1.2 var(--heading); color: var(--ink); }
.wizard-close {
  flex: none;
  width: 44px;
  height: 44px;
  border: 2px solid var(--ink);
  border-radius: 50%;
  background: #f3f0e8;
  color: var(--ink);
  font: 700 26px/1 var(--heading);
  cursor: pointer;
}
.wizard-close:hover { background: #f3f0e8; }
.wizard-close:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; }
.wizard-close:disabled { opacity: .4; cursor: not-allowed; }
.wizard-head .wizard-progress { position: absolute; left: 0; right: 0; bottom: 0; height: 5px; margin: 0; border-radius: 0; }
.wizard-dialog .wizard-body { flex: 1; min-height: 0; overflow: auto; overscroll-behavior: contain; clip-path: none; padding: 22px 20px 28px; }
html:has(dialog.wizard-dialog[open]) { overscroll-behavior: none; }
/* phones, landscape ones too: the whole screen, sized to what the keyboard leaves (--vvh / --vvt from visualViewport) */
@media (max-width: 719px), (max-height: 600px) {
  .wizard-dialog { inset: auto; top: var(--vvt, 0px); left: 0; width: 100%; height: var(--vvh, 100dvh); margin: 0; }
  .wizard-head { padding: max(8px, env(safe-area-inset-top)) max(10px, env(safe-area-inset-right)) 12px max(16px, env(safe-area-inset-left)); }
  .wizard-dialog .wizard-body { padding: 18px max(16px, env(safe-area-inset-right)) max(28px, env(safe-area-inset-bottom)) max(16px, env(safe-area-inset-left)); }
}
@media (prefers-reduced-motion: no-preference) { .wizard-dialog[open] { animation: dialog-in .18s ease-out; } }
@keyframes dialog-in { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }

/* tiles: one tap each (radio) or pick-all (checkbox); the native input is visually hidden but kept for keyboards and
   screen readers, and the tile shows its state with a border, a tick and a tint, never colour alone */
.tiles { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; margin: 8px 0 4px; }
@container (min-width: 560px) { .tiles { grid-template-columns: repeat(3, minmax(0, 1fr)); } .tiles-wide { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.tile { position: relative; display: block; cursor: pointer; }
.tile input, .seg-btn input, .fork-btn input { position: absolute; opacity: 0; width: 1px; height: 1px; margin: 0; pointer-events: none; }
.tile > span {
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-height: 64px;
  height: 100%;
  padding: 10px 34px 10px 14px;
  border: 2px solid var(--line-strong);
  border-radius: 2px;
  background: var(--paper-light);
  font-size: 19px;
  line-height: 1.2;
  transition: background-color .1s;
}
.tile > span small { font-size: 16px; color: var(--ink-soft); }
.tile:hover > span { background: #f3f0e8; }
.tile input:checked + span, .seg-btn input:checked + span { border-color: var(--red); background: var(--red-tint); box-shadow: inset 0 0 0 1.5px var(--red); }
.tile input:checked + span::after {
  content: "";
  position: absolute;
  top: 50%;
  right: 12px;
  width: 9px;
  height: 16px;
  margin-top: -10px;
  border: solid var(--red-text);
  border-width: 0 3.5px 3.5px 0;
 
}
.tile input:focus-visible + span, .seg-btn input:focus-visible + span, .fork-btn:has(input:focus-visible) { outline: 3px solid var(--focus); outline-offset: 2px; }
.fork-btn:has(input:checked) { border-color: var(--red); background: var(--red-tint); }
.fork-btn:has(input:checked)::after, .seg-btn input:checked + span::before { content: "✓"; color: var(--red-text); font: 700 20px/1 var(--heading); }
.fork-btn:has(input:checked)::after { position: absolute; top: 10px; right: 14px; font-size: 26px; }
.seg-btn input:checked + span::before { margin-right: 6px; }
.free-diag { margin: 12px 0 0; padding: 8px 12px; border-left: 5px solid var(--green); background: rgba(203, 220, 174, .45); font-size: 18px; }

/* the checks: segmented answers, one question at a time with the script */
.check-q { margin: 0 0 18px; }
.check-ask { margin: 0 0 8px; font: 700 20px/1.25 var(--heading); }
.seg { display: flex; flex-wrap: wrap; gap: 8px; }
.seg-btn { position: relative; flex: 1 1 auto; cursor: pointer; }
.seg-btn > span {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 52px;
  height: 100%;
  padding: 8px 14px;
  border: 2px solid var(--line-strong);
  border-radius: 2px;
  background: var(--paper-light);
  font-size: 18px;
  line-height: 1.2;
  text-align: center;
}
.seg-btn:hover > span { background: #f3f0e8; }
/* A device not known to turn on: the grades say only how it looks, and Damaged's list is optional. */
.hint-shape, [data-in-doubt] .hint-works { display: none; }
[data-in-doubt] .hint-shape { display: revert; }
.notice-actions { display: flex; flex-wrap: wrap; gap: 8px; margin: 4px 0 8px; }
.switch-notice:focus { outline: none; }
.kbd .switch-notice:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; }
.notice-actions .btn-ghost.small { min-height: 44px; }
.switch-notice { margin: 0 0 14px; }
.switch-notice p { margin: 0 0 6px; font-size: 18px; }

/* the optional note, under its step's answers */
.wizard-note { margin-top: 14px; }

/* Back and Next: Back first in reading order; on a phone Next sits above it, full width */
.step-nav, .wizard .submit-row { display: flex; flex-wrap: wrap-reverse; align-items: center; gap: 10px 14px; margin-top: 20px; }
.step-nav .step-next, .wizard .submit-row .btn { flex: 1 1 220px; }
.step-nav .step-back, .wizard .submit-row .step-back { flex: 0 1 auto; }
@container (max-width: 459px) { .step-nav .step-back, .wizard .submit-row .step-back { flex: 1 1 100%; } }
.wizard .reassure { margin: 14px 0 0; text-align: center; }

/* the review */
.summary { margin: 6px 0 12px; border-top: 2px dashed rgba(29, 23, 20, .35); }
.sum-row { display: grid; grid-template-columns: minmax(84px, auto) 1fr auto; align-items: baseline; gap: 2px 12px; padding: 8px 0; border-bottom: 2px dashed rgba(29, 23, 20, .35); }
.sum-label { font: 700 16px/1.2 var(--heading); text-transform: uppercase; color: var(--ink-soft); }
.sum-value { min-width: 0; font-size: 19px; overflow-wrap: anywhere; white-space: pre-line; }
.sum-row .link-btn { min-height: 44px; padding: 0 4px; }
.sum-remove { padding: 2px 0 6px; border-bottom: 2px dashed rgba(29, 23, 20, .35); text-align: right; }
.add-device { margin: 0 0 14px; }
.wizard .notice { margin: 0 0 10px; font-size: 18px; }
.wizard [data-send-bare] { margin-top: 10px; }

/* without the script: the other branch and the other kinds' answers hide once picked (browsers with :has()) */
html.js .wizard [data-no-branch], html:not(.js) .wizard:has([data-kind]:checked) [data-no-branch],
html:not(.js) .wizard-device:has([name$="Checks[carrier]"][value=wifi]:checked) [data-unless-carrier~=wifi],
html:not(.js) .wizard-device:has([name$="Checks[carrier]"][value=gps]:checked) [data-unless-carrier~=gps],
html:not(.js) .wizard:not(:has([data-kind]:checked)) [data-branch],
html:not(.js) .wizard:has([data-kind][value=Repair]:checked) [data-branch=sell],
html:not(.js) .wizard:has([data-kind][value=Sell]:checked) [data-branch=repair] { display: none; }
html:not(.js) .wizard-device:has([data-type-tile][value=phone]:checked) [data-types]:not([data-types~=phone]),
html:not(.js) .wizard-device:has([data-type-tile][value=tablet]:checked) [data-types]:not([data-types~=tablet]),
html:not(.js) .wizard-device:has([data-type-tile][value=laptop]:checked) [data-types]:not([data-types~=laptop]),
html:not(.js) .wizard-device:has([data-type-tile][value=desktop]:checked) [data-types]:not([data-types~=desktop]),
html:not(.js) .wizard-device:has([data-type-tile][value=console]:checked) [data-types]:not([data-types~=console]),
html:not(.js) .wizard-device:has([data-type-tile][value=controller]:checked) [data-types]:not([data-types~=controller]),
html:not(.js) .wizard-device:has([data-type-tile][value=drone]:checked) [data-types]:not([data-types~=drone]),
html:not(.js) .wizard-device:has([data-type-tile][value=watch]:checked) [data-types]:not([data-types~=watch]),
html:not(.js) .wizard-device:has([data-type-tile][value=other]:checked) [data-types]:not([data-types~=other]) { display: none; }
html:not(.js) .wizard-device:not(:has([name$="].Condition"][value=damaged]:checked)) [data-when-damaged] { display: none; }
@media (prefers-reduced-motion: reduce) { .wizard .step-in { animation: none; } .wizard-progress span { transition: none; } }
[data-add-device] { margin-top: 2px; }

/* ---------- listings ---------- */
.cards { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; margin: 4px 0 22px; }
@media (min-width: 760px) { .cards { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 18px; } }
.card {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  padding: 10px 10px 14px;
  border: 1px solid var(--line);
  border-radius: 2px;
  background: var(--paper-light);
  box-shadow: var(--card-shadow);
  color: var(--ink);
  text-align: center;
  text-decoration: none;
  transition: transform .12s, box-shadow .12s;
}
.card:hover { translate: 0 -2px; box-shadow: 0 2px 4px rgba(15, 22, 32, .08), 0 14px 32px rgba(15, 22, 32, .1); }
.card-photo { position: relative; display: grid; place-items: center; width: 100%; aspect-ratio: 4 / 3; margin-bottom: 8px; overflow: hidden; border-radius: 2px; background: var(--paper); }
.card-photo img { width: 100%; height: 100%; object-fit: cover; }
.card-photo.sketch { background: var(--paper); }
.card-photo.sketch img { width: 70%; height: 82%; object-fit: contain; }
.card-title { font-family: var(--heading); font-weight: 500; font-size: 20px; line-height: 1.1; letter-spacing: .02em; }
.card-specs { font-size: 13px; letter-spacing: .06em; text-transform: uppercase; color: var(--ink-soft); }
.price { font: 500 24px/1.15 var(--heading); color: var(--accent-ink); }
.badge { position: absolute; top: 8px; left: 0; padding: 3px 10px; background: var(--ink); color: var(--paper); font-family: var(--heading); font-size: 12px; letter-spacing: .08em; text-transform: uppercase; }
.badge-wear { top: auto; bottom: 8px; }
.empty { margin: 8px 0 20px; font-size: 18px; }
.fine-print { margin: 0; font-size: 15px; }

.chips { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 16px; }
.chips a {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 44px;
  padding: 6px 15px;
  border: 2px solid var(--line);
  border-radius: 999px;
  background: var(--paper-light);
  color: var(--ink);
  font-size: 16px;
  text-decoration: none;
}
.chips a span { font-size: 14px; color: var(--ink-soft); }
.chips a[aria-current=page] { background: var(--ink); border-color: var(--ink); color: var(--paper); }
.chips a[aria-current=page] span { color: var(--paper); }

.crumbs { margin: 0 0 10px; font-size: 15px; }
.crumbs a { color: var(--ink-soft); }
.detail { display: grid; gap: 22px; }
@media (min-width: 860px) { .detail { grid-template-columns: 1.05fr 1fr; gap: 36px; align-items: start; } }
.gallery-main { position: relative; display: grid; place-items: center; aspect-ratio: 4 / 3; overflow: hidden; border: 1px solid var(--line); border-radius: 2px; background: var(--paper); cursor: zoom-in; }
/* Every listing photo shows cropped to the same shape, centred; the pop-up shows it whole. */
.gallery-main img { width: 100%; height: 100%; object-fit: cover; object-position: center; }
.gallery-main.sketch { background: var(--paper); }
.gallery-main.sketch img { width: 45%; height: auto; }
.gallery-more { list-style: none; margin: 10px 0 6px; padding: 0; display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; }
.gallery-more img { display: block; width: 100%; aspect-ratio: 1; object-fit: cover; border: 1px solid var(--line); border-radius: 2px; }
.gallery .fine { margin-top: 6px; }
.detail-info { container-type: inline-size; }
.detail-info .title { margin-bottom: 8px; }
.specs { margin: 0 0 4px; }
.price-big { margin: 0 0 10px; font-size: 38px; }
.notice { padding: 10px 14px; border-left: 4px solid var(--accent); background: var(--accent-tint); }
.facts { display: flex; flex-wrap: wrap; gap: 4px 26px; margin: 0 0 10px; }
.facts div { display: flex; gap: 6px; }
.facts dt { color: var(--ink-soft); }
.facts dt::after { content: ":"; }
.facts dd { margin: 0; }
.description { white-space: pre-line; }

.contact-links { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; margin: 8px 0 4px; }
.pill-fb { gap: 8px; background: #1b5fc9; border-color: #1b5fc9; }
.pill-light { background: transparent; color: var(--ink); border: 2px solid var(--ink); }

/* A reference is read out on the phone: a plain monospace (its 1s, 0s and Ds stay apart) */
.ref strong, .ticket-head .ref, .spam-head .ref { font-family: ui-monospace, "Cascadia Mono", Consolas, "SF Mono", Menlo, "Roboto Mono", monospace; font-weight: 700; }
.ref strong { font-size: 28px; line-height: 1.1; letter-spacing: .08em; color: var(--accent-ink); white-space: nowrap; }

/* ---------- footer ---------- */
/* A dark band the full width of the page; its content stays within the page's width. */
.footer {
  max-width: none;
  margin: 0;
  padding: 32px var(--gutter) calc(32px + env(safe-area-inset-bottom));
  background: var(--space);
  color: var(--space-ink);
}
.footer > * { max-width: 1180px; margin-left: auto; margin-right: auto; }
.footer-top { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 24px; }
.footer-family { margin: 4px 0 0; font: 300 15px/1.4 var(--hand); letter-spacing: .04em; color: #c7ccd6; }
/* Whose shop it is, with a link per open division (design §5.2). */
.footer-parent { margin: 10px 0 0; display: flex; flex-wrap: wrap; align-items: center; gap: 0 16px; font: 15px/1.5 var(--plain); color: #c7ccd6; }
.footer-parent a { color: var(--space-ink); display: inline-block; padding: 8px 0; }
.footer-parent span a { padding: 0; }
.footer-legal { margin: 18px auto 0; font: 14px/1.5 var(--plain); color: #c7ccd6; }
.footer-brand { color: var(--space-ink); font: 500 22px/1 var(--heading); letter-spacing: .14em; text-transform: uppercase; text-decoration: none; }
.footer-line { margin: 0; display: flex; flex-wrap: wrap; font: 15px/1.5 var(--plain); color: #c7ccd6; }
.footer-line { gap: 2px 16px; }
@media (min-width: 700px) {
  .footer-line { gap: 0; }
  .footer-line > * + *::before { content: "·"; margin: 0 8px; color: var(--accent); }
}
.footer a { color: var(--space-ink); text-decoration-color: var(--accent); }
/* Three bands, each the content column's width: the name and how to reach us; the pages, in small capitals; the legal line.
   Links are plain and underline on hover; everything in a row shares one tap-height so it sits on one baseline. */
.footer a { text-decoration: none; }
.footer a:hover, .footer a:focus-visible { text-decoration: underline; text-decoration-color: var(--accent); text-underline-offset: 4px; }
/* A link inside running text (the legal line, "the repair shop of Third Law") keeps an underline: colour alone wouldn't mark it (axe link-in-text-block). */
.footer .footer-legal a, .footer-parent span a { text-decoration: underline; text-decoration-color: rgba(233, 236, 241, .45); text-underline-offset: 3px; }
.footer-top { align-items: flex-start; padding-bottom: 14px; border-bottom: 1px solid rgba(233, 236, 241, .14); }
.footer-line { align-items: center; }
.footer-line > * { display: inline-flex; align-items: center; min-height: 40px; padding: 0; }
/* Plain spacing between the facts and the contact links: a separator dot would start a wrapped line. */
.footer-line { gap: 0 22px; }
@media (min-width: 700px) { .footer-line > * + *::before { content: none; } }
.footer .footer-links { margin: 10px auto 0; gap: 0 22px; font-family: var(--heading); font-size: 13px; letter-spacing: .08em; text-transform: uppercase; }
.footer .footer-links a { display: inline-flex; align-items: center; min-height: 44px; padding: 0; color: var(--space-ink); }
.footer .footer-legal { margin: 8px auto 0; padding-top: 14px; border-top: 1px solid rgba(233, 236, 241, .14); font-size: 14px; color: #aab1bd; }
.footer .footer-legal a { display: inline; padding: 0; color: #c7ccd6; }

/* ---------- admin ---------- */
.inbox { display: grid; gap: 16px; }
.ticket {
  scroll-margin-top: 96px;
  padding: 12px 14px 14px;
  border: 2px solid var(--line-strong);
  border-left-width: 9px;
  border-radius: 4px;
  background: var(--paper-light);
}
.ticket.kind-repair { border-left-color: var(--red); }
.ticket.kind-sell { border-left-color: var(--green); }
.ticket.kind-buy { border-left-color: var(--blue); }
.ticket:target { box-shadow: 0 0 0 4px var(--focus); }
.ticket-head { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 12px; font-size: 16px; }
.ticket-head .kind { font: 19px/1.1 var(--marker); text-transform: uppercase; }
.ticket-head .ref { letter-spacing: .05em; }
.ticket-head .when { color: var(--ink-soft); }
.ticket-head .status { margin-left: auto; padding: 0 10px; border: 2px solid var(--ink); border-radius: 999px; font-size: 14px; text-transform: uppercase; }
.ticket-head .status.unverified,
.status-new .ticket-head .status.unverified { border: 2px dashed var(--ink-soft); background: transparent; color: var(--ink-soft); }
.find-ref { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 0 0 14px; }
.find-ref label { font-size: 16px; }
.find-ref input { width: 10em !important; min-height: 44px !important; text-transform: uppercase; }
.spam-list { list-style: none; margin: 0 0 18px; padding: 0; }
.spam-row { padding: 10px 0; border-bottom: 2px dashed rgba(29, 23, 20, .3); }
.spam-row p { margin: 0 0 4px; overflow-wrap: anywhere; }
.spam-head { font-size: 18px; }
.spam-why-line { color: var(--red-text); font-size: 16px; }
.spam-said { color: var(--ink-soft); font-size: 16px; }
.spam-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 6px; }
.ticket-photos-wrap > summary { min-height: 44px; display: flex; align-items: center; cursor: pointer; font-size: 16px; }
.spam-why p { margin: 0 0 8px; }
.status-new .ticket-head .status { border-color: var(--red); background: var(--red); color: #fff; }
.who { margin: 8px 0 0; font-size: 23px; }
.reach { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 2px 0 8px; }
.contact { font-size: 20px; margin-right: 4px; }
.pill { display: inline-flex; align-items: center; min-height: 42px; padding: 4px 18px; border-radius: 999px; background: var(--ink); color: var(--cream); font-size: 17px; text-decoration: none; }
.consent-tag { font-size: 15px; padding: 2px 10px; border-radius: 999px; border: 2px solid; }
.consent-tag.yes { color: var(--green); border-color: var(--green); }
.consent-tag.no { color: var(--red-text); border-color: var(--red); }
.meet { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; margin: 0 0 8px; }
.meet .pill { min-height: 36px; padding: 2px 14px; }
.replies-block { margin-top: 12px; padding-top: 10px; border-top: 2.5px solid var(--ink); }
.replies { list-style: none; margin: 0 0 10px; padding: 0; display: grid; gap: 8px; }
.replies li { padding: 6px 10px; border-left: 4px solid var(--blue); background: var(--paper-light); }
.replies li.reply-failed { border-left-color: var(--red); }
.replies p { margin: 0; }
.replies .label { font-size: 15px; }
.reply label { display: block; font: 18px/1.2 var(--marker); text-transform: uppercase; margin-bottom: 4px; }
.reply textarea { min-height: 110px; font-size: 18px; }
.reply-actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 8px; }
.reply-actions .btn { flex: 1 1 160px; }
.ticket-device { margin-top: 8px; padding-top: 8px; border-top: 1.5px dashed rgba(29, 23, 20, .4); }
.ticket-device p, .wants { margin: 2px 0; }
.label { color: var(--ink-soft); }
.ticket-photos { list-style: none; margin: 8px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.ticket-photos a { display: block; width: 96px; height: 96px; overflow: hidden; border: 2px solid var(--ink); border-radius: 3px; }
.ticket-photos img { display: block; width: 100%; height: 100%; object-fit: cover; }
.ticket-photos .file { display: grid; place-items: center; height: 100%; color: var(--ink); font-size: 14px; text-align: center; }
.ticket-notes { margin-top: 12px; }
.ticket-notes label { display: block; font-size: 16px; color: var(--ink-soft); }
.ticket-notes textarea { min-height: 60px; font-size: 17px; }
.ticket-notes button { margin-top: 6px; }
.ticket-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 10px; }
.push-right { margin-left: auto; }
.pager { display: flex; justify-content: center; gap: 10px; margin-top: 18px; }

.admin-listings { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.admin-listings a {
  display: grid;
  grid-template-columns: 64px minmax(0, 1fr) auto;
  grid-template-areas: "thumb text price" "thumb text state";
  align-items: center;
  gap: 0 12px;
  padding: 8px 12px;
  border: 2px solid var(--ink);
  border-radius: 4px;
  background: var(--paper-light);
  color: var(--ink);
  text-decoration: none;
}
.admin-listings .thumb { grid-area: thumb; display: grid; place-items: center; width: 64px; height: 64px; overflow: hidden; border-radius: 3px; background: rgba(0, 0, 0, .05); }
.admin-listings .thumb img { width: 100%; height: 100%; object-fit: cover; }
.admin-listings .thumb.sketch img { width: 80%; height: 80%; object-fit: contain; }
.admin-listing-text { grid-area: text; display: flex; flex-direction: column; min-width: 0; }
.admin-listing-text strong { font-size: 20px; font-weight: 400; }
.admin-listing-text span { font-size: 15px; color: var(--ink-soft); }
.admin-listing-text .needs { color: var(--red-text); }
.admin-listings .price { grid-area: price; text-align: right; font-size: 22px; }
.admin-listings .state { grid-area: state; text-align: right; font-size: 14px; text-transform: uppercase; }
.admin-listings .status-sold a, .admin-listings .status-hidden a { opacity: .6; }
.radio, .check { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; margin-right: 16px; cursor: pointer; }
.radio input, .check input { width: 22px; height: 22px; accent-color: var(--red); }
.status-pick .radio { display: flex; margin: 0; }
.status-pick small { font-size: 15px; color: var(--ink-soft); }
.edit-photos { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(130px, 1fr)); gap: 12px; }
.edit-photos img { display: block; width: 100%; aspect-ratio: 1; object-fit: cover; border: 2px solid var(--ink); border-radius: 3px; }
.edit-photos label { display: flex; min-height: 38px; margin: 0; font-size: 16px; }
.danger-zone { margin-top: 26px; text-align: right; }

/* ---------- terms ---------- */
.terms-page h2 { margin: 26px 0 8px; font: 700 24px/1.15 var(--heading); text-transform: uppercase; scroll-margin-top: 90px; }
.terms-page ul { margin: 0; padding-left: 22px; }
.terms-page li { margin: 0 0 8px; }
.terms-toc { display: flex; flex-wrap: wrap; gap: 6px 16px; margin: 6px 0 4px; font-size: 17px; }
.footer-legal a { color: #e9d7b6; }
.terms-dialog { width: min(620px, calc(100% - 24px)); max-height: 88vh; padding: 0; border: 0; background: transparent; overflow: visible; }
.terms-dialog::backdrop { background: rgba(20, 10, 4, .72); }
.terms-dialog .sheet { max-height: 88vh; overflow: auto; padding: 28px 22px 22px; }
.terms-points { margin: 0 0 10px; padding: 0; list-style: none; }
.terms-points li { position: relative; margin: 0 0 9px; padding-left: 28px; font-size: 18px; line-height: 1.3; }
.terms-points li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 4px;
  width: 20px;
  height: 18px;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 22'%3E%3Cpath d='M2 12.5l6 6.5L22 2.5' fill='none' stroke='%23b30d2a' stroke-width='3.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat center / contain;
}
.dialog-actions {
  position: sticky;
  bottom: -22px;
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin: 12px 0 0;
  padding: 10px 0 14px;
  background: var(--paper-light);
  box-shadow: 0 -8px 10px -6px rgba(90, 55, 20, .35);
}
.dialog-actions .btn { flex: 1 1 160px; }

/* ---------- inbox additions ---------- */
.ticket-head .status.spam { border-color: var(--red); color: var(--red-text); }
.sent-check { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 10px; margin-top: 10px; padding: 8px 10px; border: 2px dashed var(--blue); }
.sent-check[hidden] { display: none !important; }
.sent-check p { margin: 0; flex: 1 1 100%; font-weight: 700; }
.notes-state { font-size: 15px; color: var(--ink-soft); margin-left: 6px; }
.reach a.contact { color: var(--ink); }

/* ---------- name / phone / texting / email ---------- */
.contact-grid { display: grid; gap: 0 14px; grid-template-areas: "name" "phone" "consent" "email"; }
.contact-grid > .f-name { grid-area: name; }
.contact-grid > .f-phone { grid-area: phone; }
.contact-grid > .sms-consent { grid-area: consent; margin-top: -4px; }
.contact-grid > .f-email { grid-area: email; }
@container (min-width: 440px) {
  .contact-grid { grid-template-columns: 1fr 1fr; grid-template-areas: "name phone" "email consent"; align-items: start; }
}
.sms-consent .check.consent { font-size: 16px; }

/* ---------- device photos: pop-up viewer ---------- */
.zoom-badge { position: absolute; right: 10px; bottom: 10px; display: grid; place-items: center; width: 40px; height: 40px; border-radius: 50%; background: rgba(29, 23, 20, .72); color: #fff; }
.gallery-more a { display: block; cursor: zoom-in; }
.card-photo img { object-position: center; }
html:has(dialog[open]) { overflow: hidden; }
.lightbox {
  width: 100vw;
  height: 100vh;
  height: 100dvh;
  max-width: none;
  max-height: none;
  margin: 0;
  padding: 0;
  border: 0;
  background: rgba(14, 9, 6, .96);
  color: #f3e9d4;
}
.lightbox[open] { display: flex; flex-direction: column; }
.lightbox::backdrop { background: rgba(14, 9, 6, .96); }
.lightbox-bar { display: flex; align-items: center; justify-content: space-between; padding: 8px 12px; font-size: 18px; }
.lightbox-close {
  display: grid;
  place-items: center;
  width: 48px;
  height: 48px;
  padding: 0 0 4px;
  border: 0;
  border-radius: 50%;
  background: rgba(255, 255, 255, .14);
  color: #fff;
  font: 34px/1 var(--hand);
  cursor: pointer;
}
.lightbox-stage { flex: 1; min-height: 0; display: grid; place-items: center; overflow: hidden; padding: 0 8px; }
.lightbox-stage img {
  max-width: 100%;
  max-height: calc(100dvh - 120px);
  object-fit: contain;
  cursor: zoom-in;
  user-select: none;
  -webkit-user-select: none;
}
.lightbox.zoomed .lightbox-stage { place-items: start; overflow: auto; }
.lightbox.zoomed .lightbox-stage img { max-width: none; max-height: none; margin: auto; cursor: zoom-out; }
.lightbox-nav {
  position: absolute;
  top: 50%;
  display: grid;
  place-items: center;
  width: 52px;
  height: 52px;
  padding: 0 0 6px;
  border: 0;
  border-radius: 50%;
  background: rgba(255, 255, 255, .16);
  color: #fff;
  font: 40px/1 var(--hand);
  transform: translateY(-50%);
  cursor: pointer;
}
.lightbox-prev { left: 10px; }
.lightbox-next { right: 10px; }
.lightbox.zoomed .lightbox-nav, .lightbox.zoomed .lightbox-hint { display: none; }
.lightbox-hint { margin: 6px 0 14px; text-align: center; font-size: 16px; color: #cdbb98; }

/* ---------- "Want it?": Messenger beside the form's button ---------- */
.submit-row .or { flex: 1 1 100%; margin: -6px 0; text-align: center; color: var(--ink-soft); font-size: 17px; }
.btn-fb {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  flex: 1 1 260px;
  max-width: 420px;
  min-height: 56px;
  padding: 10px 22px;
  border-radius: 999px;
  background: #1b5fc9;
  color: #fff;
  font-family: var(--marker);
  font-size: 19px;
  text-transform: uppercase;
  text-decoration: none;
}
.btn-fb:hover { background: #164fa8; }
.btn-fb:focus-visible { outline: 3px solid var(--ink); outline-offset: 2px; }
.touch-only { display: none; }
@media (pointer: coarse) { .touch-only { display: inline; } .mouse-only { display: none; } }
.ticket-photos a[data-lightbox] { cursor: zoom-in; }

/* ---------- what a device needs to be to sell it ---------- */
.sell-reqs { margin: -6px 0 18px; padding: 10px 14px 12px; border: 2px solid var(--green); border-radius: 4px; background: var(--paper-light); }
.sell-reqs.left { text-align: left; margin: 10px 0 18px; }
.sell-reqs.after-form { margin: 20px 0 0; }
.sell-reqs-title { margin: 0 0 6px; font: 400 17px/1.2 var(--marker); text-transform: uppercase; color: var(--green); }
.checks-plain { list-style: none; margin: 0; padding: 0; }
.checks-plain li { position: relative; margin: 0 0 4px; padding-left: 26px; font-size: 17px; line-height: 1.3; }
.checks-plain li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 3px;
  width: 18px;
  height: 16px;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 22'%3E%3Cpath d='M2 12.5l6 6.5L22 2.5' fill='none' stroke='%233f7d34' stroke-width='3.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat center / contain;
}

/* ---------- staff: devices for sale list, with select and delete ---------- */
.bulk-bar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px; margin: 0 0 10px; }
.bulk-bar .check { margin: 0; padding-left: 10px; }
.danger-ghost { border-color: var(--red); color: var(--red-text); }
.danger-ghost:disabled { opacity: .45; cursor: not-allowed; }
.admin-listings li { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 4px; }
.admin-listings li.selected a { border-color: var(--red); background: rgba(179, 13, 42, .07); }
.row-check { display: grid; place-items: center; width: 44px; height: 44px; cursor: pointer; }
.row-check input { width: 22px; height: 22px; accent-color: var(--red); }
.row-delete {
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  padding: 0;
  border: 2px solid transparent;
  border-radius: 50%;
  background: none;
  color: var(--red-text);
  cursor: pointer;
}
.row-delete:hover { border-color: var(--red); background: rgba(179, 13, 42, .07); }
@media (max-width: 480px) {
  .admin-listings li { gap: 0; }
  .admin-listings a { grid-template-columns: 50px minmax(0, 1fr) auto; gap: 0 8px; padding: 6px 8px; }
  .admin-listings .thumb { width: 50px; height: 50px; }
  .admin-listings .price { font-size: 19px; }
  .admin-listing-text strong { font-size: 18px; }
  .row-check { width: 34px; }
  .row-delete { width: 40px; }
}

/* ---------- the site's own "are you sure?" ---------- */
.confirm-dialog { width: min(440px, calc(100% - 32px)); }
.confirm-dialog .sheet { padding: 26px 22px 6px; }
.confirm-text { margin: 0 0 4px; font-size: 20px; line-height: 1.35; }

/* ---------- search-friendly copy ---------- */
.hero-title { line-height: 1.1; }
.hero-h1 { display: block; margin: 6px 0 0; font: 400 clamp(19px, 4.6vw, 24px)/1.15 var(--marker); color: var(--red-text); text-transform: uppercase; letter-spacing: .01em; }
.areas { margin: 14px 0 0; font-size: 16px; color: var(--ink-soft); line-height: 1.4; }
.areas strong { color: var(--ink); }
/* Common questions: the template's accordion, one bar per question (two columns left holes under the collapsed side
   whenever an answer opened). The width is capped so an answer stays a readable line; the chevron is drawn, not a glyph,
   so open and closed sit at the same height. */
.faq { display: flex; flex-direction: column; gap: 10px; max-width: 880px; margin: 0 auto; }
.faq details { border: 1px solid var(--line-strong); border-radius: var(--sketch-radius); background: var(--paper-light); }
.faq details[open] { border-color: var(--ink); }
.faq summary { display: flex; align-items: flex-start; gap: 14px; min-height: 56px; padding: 15px 18px; cursor: pointer; list-style: none; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary:hover h3 { color: var(--accent-ink); }
.faq summary::after {
  content: ""; flex: 0 0 auto; margin-left: auto; margin-top: 4px; width: 11px; height: 11px;
  border: solid var(--accent-ink); border-width: 0 2px 2px 0; transform: translateY(-2px) rotate(45deg); transition: transform .2s;
}
.faq details[open] summary::after { transform: translateY(4px) rotate(-135deg); }
.faq details[open] summary { border-bottom: 1px solid var(--line); }
.faq summary h3 { margin: 0; font: 700 19px/1.3 var(--hand); }
.faq details p { margin: 0; padding: 14px 18px 18px; font-size: 18px; line-height: 1.55; }
@media (max-width: 480px) { .faq summary { padding: 13px 14px; } .faq details p { padding: 12px 14px 16px; } }
.footer-links { display: flex; flex-wrap: wrap; gap: 4px 18px; margin: 12px 0 0; font: 15px/1.6 var(--plain); }
.footer-links a { color: var(--cream); }

/* ---------- service pages (/phone-screen-repair, ...) ---------- */
/* A job's flat price, set apart beside its facts; the console page's list of jobs, by console. */
.price-stamp { flex: none; display: inline-flex; flex-direction: column; align-items: center; margin: 4px 6px 14px; padding: 8px 20px 10px; font-size: 32px; }
/* Wider screens: the heading and its icon or price stay on one row (the heading wraps instead). */
@media (min-width: 760px) {
  .service-title-row { flex-wrap: nowrap; align-items: center; }
  .service-title-row .title { flex: 0 1 auto; min-width: 0; }
  .service-title-row .price-stamp { margin-left: auto; }
}
.price-stamp span { font: 14px/1.1 var(--hand); letter-spacing: .04em; text-transform: none; color: var(--ink-soft); }
.job-groups { display: grid; gap: 14px 28px; }
@media (min-width: 760px) { .job-groups { grid-template-columns: 1fr 1fr; } }
.job-group h3 { margin: 0 0 8px; font: 500 20px/1.15 var(--heading); letter-spacing: .04em; text-transform: uppercase; }
.job-links { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.job-links a {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  min-height: 52px;
  padding: 8px 14px;
  border: 1px solid var(--line);
  border-radius: 2px;
  background: var(--paper-light);
  color: var(--ink);
  font-size: 18px;
  text-decoration: none;
  transition: transform .12s, box-shadow .12s;
}
.job-links a:hover { transform: translateY(-2px); box-shadow: var(--card-shadow); }
.job-price { flex: none; font: 500 18px/1 var(--heading); color: var(--accent-ink); }
.crumbs span[aria-hidden] { margin: 0 4px; color: var(--ink-soft); }
.crumbs [aria-current] { color: var(--ink); }
.service-facts { margin: 14px 0 0; }
.service-list { columns: 1; }
.service-list li { text-transform: none; font-size: 17px; }
@media (min-width: 700px) { .service-list { columns: 2; } }
.service-cta { margin: 18px 0 0; }
.service-note { margin: 16px 0 0; }
.service-how { margin-top: 26px; }
.good h3 { margin: 0 0 6px; font: 500 17px/1.2 var(--heading); letter-spacing: .06em; color: var(--accent-ink); text-transform: uppercase; }
.good h3 .num { margin-right: 4px; }
.more-links { margin: 22px 0 0; }
.more-links ul { list-style: none; display: flex; flex-wrap: wrap; gap: 6px 18px; margin: 0; padding: 0; }
.more-links a { display: inline-block; padding: 6px 0; font-size: 17px; }
.checks li a { color: inherit; text-decoration-color: var(--accent); }

/* ---------- listings ---------- */
.devices-lede { margin: 0 0 16px; font-size: 18px; }
.promise { margin: 14px 0 18px; padding: 8px 12px; border: 2px solid var(--green); border-radius: 4px; font-size: 17px; background: var(--paper-light); }

/* ---------- languages ---------- */
/* The switch to the other language: a small outlined tag at the end of the nav, so it reads as "language", not a page. */
.nav a.lang-switch { margin-left: 4px; padding: 4px 2px; font-size: 14px; } /* the link keeps the 44px tap height; the pill is drawn inside */
.lang-switch .pill-tag { display: inline-flex; align-items: center; gap: 6px; padding: 1px 8px 1px 6px; border: 2px solid var(--ink);
  border-radius: 999px; background: rgba(255, 252, 240, .55); }
/* Each language wears its country's colors: Mexico for Español, the US for English (red on hover: both flags have it). */
.lang-switch[data-lang="es"] .pill-tag { border-color: #006847; }
.lang-switch[data-lang="en"] .pill-tag { border-color: #0a3161; }
.nav a.lang-switch:hover { text-decoration: none; color: var(--red-text); }
.nav a.lang-switch:hover .pill-tag { border-color: #ce1126; }
/* The little flags, drawn in CSS (flag emoji don't show on Windows). */
.flag { display: inline-block; flex: none; width: 18px; height: 12px; border-radius: 2px; vertical-align: -1px;
  box-shadow: 0 0 0 1px rgba(29, 23, 20, .4); }
.flag-mx { background: radial-gradient(circle, #8b5a2b 0 1.5px, transparent 2px),
  linear-gradient(90deg, #006847 0 33.4%, #fff 33.4% 66.6%, #ce1126 66.6%); }
.flag-us { background: linear-gradient(#0a3161, #0a3161) 0 0 / 45% 54% no-repeat,
  repeating-linear-gradient(#b22234 0 calc(100% / 7), #fff calc(100% / 7) calc(200% / 7)); } /* 7 bands: red top and bottom */
.footer-lang .flag { margin-right: 6px; }
.sr-only { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; }
/* Spanish pages on phones: "English" just under the top bar (see the media rule below). */
.lang-mini { display: none; }
/* Phones: a compact top bar, so the logo and the links fit at 360px in either language. On Spanish pages (longer words)
   the switch back to English moves to the footer; English pages keep "ES" up top, for Spanish speakers whose phone is
   set to English. */
@media (max-width: 560px) {
  .topbar-inner { padding: 6px 8px 8px; gap: 4px; }
  .brand img { height: 32px; }
  .nav a { padding: 4px; font-size: 14px; }
  .nav a.lang-switch { margin-left: 2px; padding: 4px 0; font-size: 12px; }
  .lang-switch .pill-tag { gap: 4px; padding: 1px 5px 1px 4px; }
  .lang-switch .flag { width: 15px; height: 10px; }
  html[lang^="es"] .nav a.lang-switch { display: none; }
  html[lang^="es"] .lang-mini { display: block; margin: 2px var(--gutter) -18px; text-align: right; }
  .lang-mini a { display: inline-flex; align-items: center; gap: 7px; min-height: 44px; padding: 0 6px; color: var(--cream); font-size: 15px;
    letter-spacing: .04em; text-transform: uppercase; }
}
/* The smallest phones (320px): Spanish links are longer, so the top bar tightens once more. */
@media (max-width: 340px) {
  .brand img { height: 28px; }
  .nav a { padding: 4px 2px; font-size: 13px; }
}
/* The "¿Prefieres español?" offer, above the top bar. */
.lang-bar { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 2px 14px; padding: 6px var(--gutter);
  background: var(--cream); color: var(--ink); font-size: 17px; text-align: center; }
.lang-bar p { margin: 0; }
.lang-bar a { display: inline-flex; align-items: center; gap: 6px; font-weight: 700; } /* the flag, then the underlined words */
.lang-bar .link-btn { min-height: 40px; font-size: 16px; }
/* Inbox: a request sent from the Spanish site. */
.ticket-head .lang-tag { padding: 0 8px; border: 2px solid var(--blue); border-radius: 999px; color: var(--blue); font-size: 14px; text-transform: uppercase; }

/* ---------- blog (docs/design/website-blog.md §9; the template's blog-classic and blog-post layouts, website-third-law.md §8) ---------- */
:root { --serif: "Source Serif 4", Georgia, "Times New Roman", serif; }
.tag {
  display: inline-block;
  padding: 2px 10px;
  border: 2px solid var(--accent);
  border-radius: 2px;
  color: var(--accent-ink);
  font-family: var(--heading);
  font-size: 12px;
  letter-spacing: .1em;
  line-height: 1.5;
  text-transform: uppercase;
  text-decoration: none;
  background: var(--paper-light);
}
a.tag:hover { background: var(--accent); color: #fff; }
.tag.claude { border-color: var(--blue); color: var(--blue); }

/* The title band at the top of the blog: a dark panel the page's width, the kicker over the title. */
.blog-band { margin: 24px 0; padding: 44px 24px 40px; background: var(--space); color: var(--space-ink); text-align: center; }
.blog-band .blog-kicker { margin: 0 0 10px; font-family: var(--heading); font-size: 14px; letter-spacing: .12em; text-transform: uppercase; color: #c7ccd6; }
.blog-band .blog-title { display: block; width: fit-content; max-width: 100%; margin: 0 auto; padding-bottom: 14px; color: var(--space-ink); background-position: center bottom; }
@media (min-width: 700px) { .blog-band { padding: 64px 32px 56px; } }

/* Posts beside a sidebar from 980 px; stacked below them on a phone. */
.blog-layout { display: grid; gap: 32px; margin: 0 0 32px; }
@media (min-width: 980px) { .blog-layout { grid-template-columns: minmax(0, 1fr) 300px; gap: 48px; align-items: start; } }
.blog-main { min-width: 0; }
.blog-aside { display: grid; gap: 20px; align-content: start; }
.widget { padding: 20px 22px 22px; background: var(--paper-light); border: 1px solid var(--line); border-top: 3px solid var(--accent); }
.widget-title { margin: 0 0 12px; font: 500 16px/1.2 var(--heading); letter-spacing: .1em; text-transform: uppercase; }
.widget-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; }
.widget-list a { display: flex; justify-content: space-between; gap: 12px; padding: 8px 0; border-bottom: 1px solid var(--line); color: var(--ink); text-decoration: none; }
.widget-list li:last-child a { border-bottom: 0; }
.widget-list a:hover { text-decoration: underline; text-decoration-color: var(--accent); }
.widget-list a[aria-current="page"] { font-weight: 600; }
.widget-list a span { color: var(--ink-soft); font-variant-numeric: tabular-nums; }
.widget-posts li { display: grid; gap: 2px; padding: 8px 0; border-bottom: 1px solid var(--line); }
.widget-posts li:last-child { border-bottom: 0; }
.widget-posts a { display: block; padding: 0; border: 0; font-weight: 600; line-height: 1.3; }
.widget-posts time { font-size: 13px; letter-spacing: .06em; text-transform: uppercase; color: var(--ink-soft); }
.widget-cta p { margin: 0 0 14px; }
.widget-wide-only { display: none; }
@media (min-width: 980px) { .widget-wide-only { display: block; } .blog-chips { display: none; } }

/* Cards: a photo, the meta, the title, two lines of summary. The whole card is the link; it lifts on hover and the photo zooms a touch. */
.post-cards { display: grid; gap: 18px; margin: 18px 0 22px; }
@media (min-width: 620px) { .post-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 980px) { .post-cards { gap: 22px; } .post-cards-wide { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.post-card { min-width: 0; }
.post-card-link {
  display: flex;
  flex-direction: column;
  height: 100%;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: 2px;
  background: var(--paper-light);
  box-shadow: var(--card-shadow);
  color: var(--ink);
  text-decoration: none;
  transition: transform .22s cubic-bezier(.2, .7, .3, 1), box-shadow .22s;
}
.post-card-link:hover, .post-card-link:focus-visible { transform: translateY(-3px); box-shadow: 0 2px 4px rgba(15, 22, 32, .08), 0 18px 30px -14px rgba(15, 22, 32, .35); }
.post-card-photo { aspect-ratio: 16 / 10; overflow: hidden; background: var(--space) url(/img/field.svg) center / 640px auto; border-bottom: 1px solid var(--line); }
.post-card-photo img { display: block; width: 100%; height: 100%; object-fit: cover; transition: transform .5s cubic-bezier(.2, .7, .3, 1); }
.post-card-link:hover .post-card-photo img { transform: scale(1.03); }
.post-card-text { display: flex; flex: 1; flex-direction: column; gap: 6px; padding: 14px 16px 18px; }
.post-card-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; font-family: var(--heading); font-size: 13px; color: var(--ink-soft); letter-spacing: .08em; text-transform: uppercase; }
.post-card-place::before { content: "·"; margin-right: 10px; }
.post-card-title { margin: 0; font: 500 22px/1.15 var(--heading); letter-spacing: .02em; text-transform: uppercase; text-wrap: balance; overflow-wrap: break-word; }
.post-card-summary { margin: 0; font-size: 16px; line-height: 1.4; color: var(--ink-soft); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.post-card-more { margin-top: auto; padding-top: 8px; color: var(--ink); font: 500 14px/1.1 var(--heading); letter-spacing: .1em; text-transform: uppercase; }
.post-card-more span { display: inline-block; transition: transform .2s; }
.post-card-link:hover .post-card-more span { transform: translateX(4px); }

/* The blog's list: the template's blog-classic (design website-third-law.md §8). One post under another, no box: the
   photo full width at 16:10 (its box keeps that shape at every width, so nothing can spill over the words), the date and
   the author over its bottom corner on a dark corner, then the category and place, a large title, the summary and
   "Read the post". The owner, 2026-11-10, after the side-by-side card let its photo run over the title. */
.post-list { display: grid; gap: 56px; margin: 6px 0 40px; }
.post-entry { min-width: 0; }
.post-entry-link { display: block; color: inherit; text-decoration: none; }
/* The photo, mounted (see "Photos, mounted" below): the mat lifts on hover as the tiles do; the frame inside holds the crop. */
.post-entry-photo { padding: var(--mat); background: var(--mat-color); border-top: 3px solid var(--accent); box-shadow: var(--print-shadow); transition: transform .35s cubic-bezier(.2, .7, .3, 1), box-shadow .35s ease; }
.post-entry-frame { position: relative; aspect-ratio: 16 / 10; overflow: hidden; background: var(--space) url(/img/field.svg) center / 640px auto; } /* the field drawing when an entry has no photo, as the cards (TLBC-L1) */
.post-entry-frame img { display: block; width: 100%; height: 100%; object-fit: cover; transition: transform .6s cubic-bezier(.2, .7, .3, 1); }
.post-entry-frame::after { content: ""; position: absolute; inset: 0; pointer-events: none; box-shadow: inset 0 0 0 1px rgba(15, 22, 32, .1); background: radial-gradient(ellipse 70% 60% at 100% 100%, rgba(15, 22, 32, .82), rgba(15, 22, 32, .35) 45%, transparent 75%); }
.post-entry-stamp { position: absolute; right: 22px; bottom: 18px; z-index: 1; display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 4px 16px; margin: 0; color: #fff; font: 500 14px/1.3 var(--heading); letter-spacing: .1em; text-transform: uppercase; }
.post-entry-text { display: grid; gap: 12px; padding: 24px 0 0; }
.post-entry-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 12px; margin: 0; font: 500 13px/1.2 var(--heading); letter-spacing: .08em; text-transform: uppercase; color: var(--ink-soft); }
.post-entry-title { margin: 0; font: 500 clamp(26px, 3.6vw, 38px)/1.12 var(--heading); letter-spacing: .02em; text-transform: uppercase; text-wrap: balance; overflow-wrap: break-word; color: var(--ink); }
.post-entry-summary { margin: 0; max-width: 68ch; font-size: 17px; line-height: 1.75; color: var(--ink-soft); }
.post-entry-more { font: 500 14px/1.1 var(--heading); letter-spacing: .1em; text-transform: uppercase; color: var(--ink); }
.post-entry-more span { display: inline-block; transition: transform .2s; }
.post-entry-link:hover .post-entry-photo, .post-entry-link:focus-visible .post-entry-photo { transform: translateY(-4px); box-shadow: var(--print-shadow-up); }
.post-entry-link:hover .post-entry-frame img { transform: scale(1.03); }
.post-entry-link:hover .post-entry-title, .post-entry-link:focus-visible .post-entry-title { text-decoration: underline; text-decoration-color: var(--accent); text-decoration-thickness: 2px; text-underline-offset: 6px; }
.post-entry-link:hover .post-entry-more span { transform: translateX(4px); }
@media (max-width: 619px) { .post-list { gap: 44px; } .post-entry-stamp { right: 14px; bottom: 12px; font-size: 12px; } .post-entry-text { padding-top: 18px; } }
@media (prefers-reduced-motion: reduce) { .post-entry-link:hover .post-entry-photo, .post-entry-link:hover .post-entry-frame img, .post-entry-link:hover .post-entry-more span { transform: none; } }

/* Cards fade up as they scroll into view (site.js); never hidden without the script, never with reduced motion. */
.reveal-on [data-reveal] { opacity: 0; transform: translateY(16px); transition: opacity .55s ease, transform .55s cubic-bezier(.2, .7, .3, 1); }
.reveal-on [data-reveal].revealed { opacity: 1; transform: none; }
.post-cards > :nth-child(3n+2) { transition-delay: .06s; }
.post-cards > :nth-child(3n+3) { transition-delay: .12s; }
@media (prefers-reduced-motion: reduce) {
  .reveal-on [data-reveal] { opacity: 1; transform: none; }
  .post-card-link:hover, .post-card-link:hover .post-card-photo img, .video-facade:hover img { transform: none; }
}

.blog-empty { margin: 8px 0 20px; padding: 32px 24px; text-align: center; background: var(--paper-light); border: 1px solid var(--line); }
.blog-empty .lede { max-width: 46ch; margin: 0 auto 14px; }
.blog-pager { align-items: center; flex-wrap: wrap; }
.pager-count { font-size: 16px; color: var(--ink-soft); }
.blog-foot { margin-top: 10px; }
.feed-link { margin-left: 10px; font-size: 14px; letter-spacing: .05em; color: var(--ink-soft); }
.blog-more { margin: 0 0 32px; }

/* ---------- a post ---------- */
/* The photo first, then the title and the byline, then the body in a readable serif column (the template's blog-post). */
.post { max-width: 920px; }
.post-layout .crumbs { margin-bottom: 16px; }
.post-head { max-width: 760px; margin: 4px 0 22px; }
.post-kicker { margin: 0 0 12px; }
.post-title {
  margin: 0 0 14px;
  font: 500 clamp(30px, 6vw, 48px)/1.08 var(--heading);
  letter-spacing: .02em;
  text-transform: uppercase;
  text-wrap: balance;
  overflow-wrap: break-word;
}
.post-lede { margin: 0 0 14px; max-width: 40em; font: italic 400 20px/1.45 var(--serif); color: var(--ink-soft); text-wrap: pretty; }
.byline { display: flex; flex-wrap: wrap; gap: 6px 18px; margin: 0; font-family: var(--heading); font-size: 13px; letter-spacing: .1em; text-transform: uppercase; color: var(--ink-soft); }
.byline-item { display: inline-flex; align-items: center; gap: 6px; }
.byline strong { color: var(--ink); font-weight: 400; }
.ico { flex: none; width: 16px; height: 16px; fill: none; stroke: var(--accent); stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
.post-hero { margin: 0 0 24px; }
.post-hero img, .post-figure img {
  display: block;
  width: 100%;
  border: 1px solid var(--line);
  border-radius: 2px;
  background: #fff;
}
.post-hero a, .post-figure a { display: block; cursor: zoom-in; }
.post-hero figcaption, .post-figure figcaption, .post-video figcaption {
  margin-top: 8px;
  font: italic 15px/1.4 var(--serif);
  color: var(--ink-soft);
}

/* The body: a readable serif in a column about 68 characters wide. */
.post-body { max-width: 680px; font: 400 19px/1.65 var(--serif); color: var(--ink); overflow-wrap: break-word; }
.post-body::after { content: ""; display: table; clear: both; }
.post-body > p { margin: 0 0 1.05em; text-wrap: pretty; }
.post-body h2, .post-body h3 { margin: 1.5em 0 .5em; font-family: var(--heading); font-weight: 500; letter-spacing: .03em; line-height: 1.15; text-transform: uppercase; text-wrap: balance; }
.post-body h2 { font-size: 28px; }
.post-body h3 { font-size: 22px; }
.post-body a { color: var(--accent-ink); text-decoration-thickness: 1px; }
.post-body a:hover { text-decoration-thickness: 2px; }
.post-body mark { padding: 0 .15em; background: linear-gradient(transparent 35%, rgba(245, 214, 70, .6) 35%, rgba(245, 214, 70, .6) 92%, transparent 92%); color: inherit; }
.post-body code { font-size: .82em; background: rgba(27, 29, 34, .07); border-radius: 3px; }
.post-body ul, .post-body ol { margin: 0 0 1.05em; padding-left: 1.4em; display: flow-root; }
.post-body li { margin: 0 0 .35em; padding-left: .2em; }
.post-body li::marker { color: var(--accent); }
.post-quote { display: flow-root; margin: 1.6em 0; padding: 4px 0 4px 22px; border-left: 3px solid var(--accent); }
.post-quote blockquote { margin: 0; font: italic 400 23px/1.45 var(--serif); }
.post-quote blockquote p { margin: 0; }
.post-quote figcaption { margin-top: 8px; font-family: var(--heading); font-size: 13px; letter-spacing: .1em; text-transform: uppercase; color: var(--ink-soft); }
.post-rule { width: 56px; height: 3px; margin: 2em 0; border: 0; background: var(--accent); clear: both; }
.post-figure { margin: 1.5em 0; }
.post-figure.align-center, .post-figure.align-wide { clear: both; }
/* Floats: on wider screens a left or right photo takes 45% and the words wrap around it; on phones, full width. */
@media (min-width: 700px) {
  .post-figure.align-left { float: left; width: 45%; margin: .35em 1.6em 1em 0; }
  .post-figure.align-right { float: right; width: 45%; margin: .35em 0 1em 1.6em; }
}
/* Wide: breaks out of the text column, up to the post's full width. */
@media (min-width: 900px) {
  .post-figure.align-wide { width: min(920px, 100%); max-width: 920px; }
}

/* Videos: the thumbnail with a play button; the player loads on a tap (site.js). */
.post-video { margin: 1.6em 0; clear: both; }
.video-facade, .video-frame {
  position: relative;
  display: block;
  width: 100%;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  border: 0;
  border-radius: 2px;
  background: var(--space);
  box-shadow: var(--card-shadow);
}
.video-facade img { width: 100%; height: 100%; object-fit: cover; opacity: .92; transition: opacity .25s, transform .5s cubic-bezier(.2, .7, .3, 1); }
.video-facade::after { content: ""; position: absolute; inset: 0; background: linear-gradient(to top, rgba(0, 0, 0, .7), transparent 45%); }
.video-play {
  position: absolute;
  z-index: 1;
  top: 50%;
  left: 50%;
  width: 74px;
  height: 74px;
  margin: -37px 0 0 -37px;
  border-radius: 50%;
  background: var(--accent) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M9 6.5v11l9-5.5z' fill='%23fff'/%3E%3C/svg%3E") no-repeat 56% 50% / 46%;
  box-shadow: 0 6px 18px rgba(0, 0, 0, .45);
  transition: transform .2s cubic-bezier(.2, .7, .3, 1);
}
.video-facade:hover .video-play, .video-facade:focus-visible .video-play { transform: scale(1.08); }
.video-facade:hover img { opacity: 1; transform: scale(1.02); }
.video-title { position: absolute; z-index: 1; left: 16px; right: 16px; bottom: 12px; color: #fff; font: 600 17px/1.3 var(--serif); text-align: left; text-shadow: 0 1px 3px rgba(0, 0, 0, .6); }

/* A slim bar along the top edge shows how far through the post the reader is. */
.read-progress { position: absolute; left: 0; right: 0; bottom: -1px; height: 3px; pointer-events: none; }
.read-progress span { display: block; height: 100%; background: var(--accent); transform: scaleX(0); transform-origin: 0 50%; }

.post-translation { max-width: 680px; margin: 26px 0 0; }
.post-translation a { display: inline-flex; align-items: center; gap: 8px; }
.post-cta { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px 18px; max-width: 760px; margin: 32px 0 0; padding: 18px 20px; background: var(--paper-light); border: 1px solid var(--line); border-left: 4px solid var(--accent); }
.post-cta-text { margin: 0; font-size: 18px; }
.preview-ribbon { margin: 14px 0 -8px; padding: 8px 14px; background: var(--blue); color: #fff; font-size: 16px; text-align: center; border-radius: 2px; }
.preview-ribbon a { color: #fff; }

/* ---------- staff: the blog list ---------- */
.new-post { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 10px auto; }
.nav .nav-count { margin-left: .3em; }
.admin-group { margin: 22px 0 6px; font: 700 22px/1.15 var(--heading); text-transform: uppercase; }
.admin-group .count { font-family: var(--hand); font-size: 17px; color: var(--ink-soft); }
.admin-posts { list-style: none; margin: 6px 0 0; padding: 0; display: grid; gap: 10px; }
.admin-posts a, .admin-posts li.trashed {
  display: grid;
  grid-template-columns: 64px minmax(0, 1fr) auto;
  align-items: center;
  gap: 0 12px;
  padding: 8px 12px;
  border: 2px solid var(--ink);
  border-radius: 4px;
  background: var(--paper-light);
  color: var(--ink);
  text-decoration: none;
}
.admin-posts li.trashed { grid-template-columns: minmax(0, 1fr) auto; opacity: .85; }
.admin-posts .thumb { display: block; width: 64px; height: 48px; overflow: hidden; border-radius: 3px; background: rgba(0, 0, 0, .06); }
.admin-posts .thumb img { width: 100%; height: 100%; object-fit: cover; }
.admin-post-text { display: flex; flex-direction: column; min-width: 0; }
.admin-post-text strong { font-size: 20px; font-weight: 400; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.admin-post-text span { font-size: 15px; color: var(--ink-soft); }
.admin-post-tags { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 4px; }
.admin-trash { margin-top: 24px; }
.admin-trash summary { cursor: pointer; }
@media (max-width: 560px) {
  .admin-posts a { grid-template-columns: 56px minmax(0, 1fr); }
  .admin-post-tags { grid-column: 2; justify-content: flex-start; }
}

/* ---------- staff: the editor ---------- */
.editor-sheet { padding-top: 18px; }
.editor-bar { position: sticky; top: 64px; z-index: 20; display: flex; flex-wrap: wrap; align-items: center; gap: 6px 14px; margin: 0 -8px 14px; padding: 8px; background: var(--paper-light); border-bottom: 2px solid rgba(29, 23, 20, .25); }
.editor-crumbs { margin: 0; font-size: 17px; }
.editor-state { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; margin: 0; }
.state-chip { padding: 1px 12px; border: 2px solid var(--ink); border-radius: 999px; font-size: 15px; text-transform: uppercase; letter-spacing: .04em; }
.state-chip[data-state=live] { border-color: var(--green); background: var(--green); color: #fff; }
.state-chip[data-state=scheduled] { border-color: var(--blue); color: var(--blue); }
.state-chip.claude { border-color: var(--blue); color: var(--blue); }
/* Room for its usual words ("Unsaved changes", "Saving…"), so the bar doesn't reflow as they change under a click. */
.save-state { min-width: 17ch; font-size: 15px; color: var(--ink-soft); }
.save-state[data-kind=error], .save-state[data-kind=signedout], .save-state[data-kind=offline] { color: var(--red-text); font-weight: 700; }
.editor-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-left: auto; }
.claude-note { padding: 10px 14px; border-left: 5px solid var(--blue); background: rgba(189, 208, 232, .45); font-size: 18px; }
.editor-error { padding: 8px 12px; border-left: 5px solid var(--red); background: rgba(243, 216, 205, .8); }
.editor-grid { display: grid; gap: 20px; }
/* Wide screens: the settings sit beside the post and scroll with the page (no scrollbar of their own). */
@media (min-width: 1040px) {
  .editor-grid { grid-template-columns: minmax(0, 1fr) 330px; align-items: start; }
}
.editor-main { min-width: 0; }
textarea.editor-title {
  min-height: 0;
  overflow: hidden;
  padding: 6px 4px;
  border: 0;
  border-bottom: 2px dashed rgba(29, 23, 20, .3);
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  font: 700 clamp(28px, 5vw, 44px)/1.1 var(--heading);
  text-transform: uppercase;
  resize: none;
}
textarea.editor-title:focus { outline: none; border-bottom-color: var(--red); }
.editor-body { max-width: none; min-height: 320px; margin: 14px 0 0; padding: 6px 4px 30px; }
.editor-hint { font-size: 15px; color: var(--ink-soft); }
.add-blocks { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 6px 0 4px; }
.add-blocks-label { font-size: 17px; color: var(--ink-soft); }
.add-blocks .btn-ghost.small { min-height: 44px; }
.editor-body .ce-block__content, .editor-body .ce-toolbar__content { max-width: 720px; }
.editor-body .ce-paragraph { line-height: 1.65; }
.editor-body .ce-header { font-family: var(--heading); font-weight: 700; text-transform: uppercase; }
.editor-body h2.ce-header { font-size: 28px; }
.editor-body h3.ce-header { font-size: 22px; }
.editor-body .cdx-quote__text { min-height: 60px; font-style: italic; border-left: 4px solid var(--red); padding-left: 16px; }
.editor-body .cdx-input { border-color: rgba(29, 23, 20, .3); background: rgba(255, 251, 240, .5); box-shadow: none; font-family: var(--serif); }
.editor-body .ce-block.has-error { outline: 3px solid var(--red); outline-offset: 4px; border-radius: 3px; }
.editor-side { min-width: 0; font-size: 17px; }
.editor-side .field { margin-bottom: 16px; }
.editor-side input:not([type=checkbox]):not([type=radio]):not([type=file]), .editor-side select, .editor-side textarea { min-height: 44px; font-size: 17px; }
.editor-side small { color: var(--ink-soft); }
.editor-side .count { float: right; font-size: 14px; color: var(--ink-soft); }
.suggestion { margin-top: 4px; }
.suggestion .link-btn { min-height: 32px; padding: 0 4px; font-size: 16px; }
.editor-side .hero-field { padding: 10px 12px 2px; border: 2px dashed rgba(29, 23, 20, .35); border-radius: 4px; }
.hero-field legend { padding: 0 6px; }
.hero-field label { display: block; margin: 8px 0 4px; }
.hero-pick img { display: block; width: 100%; aspect-ratio: 16 / 10; object-fit: cover; border-radius: 3px; box-shadow: 0 6px 14px -8px rgba(40, 25, 10, .6); }
.hero-buttons { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; margin: 8px 0 0; }
.file-btn { position: relative; overflow: hidden; }
.file-btn input { position: absolute; inset: 0; opacity: 0; cursor: pointer; }
.source-note, .bt-note { margin: 6px 0 0; font-size: 15px; color: var(--ink-soft); }
.bt-claude { color: var(--blue); font-weight: 700; }
.slug-row { display: flex; align-items: center; gap: 4px; }
.date-row { display: flex; align-items: center; gap: 8px; }
.date-row input { flex: 1; min-width: 0; }
.date-row .btn-ghost.small { flex: none; min-height: 44px; }
[data-date-clear] { min-height: 36px; padding: 2px 0; font-size: 16px; }
.slug-prefix { flex: none; font-size: 15px; color: var(--ink-soft); }
.editor-danger { display: flex; flex-wrap: wrap; justify-content: flex-start; gap: 6px 16px; margin-top: 10px; text-align: left; }
/* One post, two languages (website-blog-translations.md §4): the tabs, the Spanish's empty state and notes. */
/* One row always: the state is a word or two, and never wraps the tabs under a tap (code review CR2-M3). */
.lang-tabs { display: flex; flex-wrap: nowrap; gap: 4px; margin: 0 0 14px; border-bottom: 2px solid rgba(29, 23, 20, .3); }
.lang-tabs [role=tab] { min-height: 46px; margin-bottom: -2px; padding: 6px 14px; white-space: nowrap; border: 2px solid transparent; border-bottom: 0; border-radius: 6px 6px 0 0; background: transparent; color: var(--ink-soft); font: 700 19px var(--hand); cursor: pointer; }
.lang-tabs [role=tab][aria-selected=true] { border-color: rgba(29, 23, 20, .3); background: rgba(255, 251, 240, .7); color: var(--ink); }
.lang-tabs [role=tab]:focus-visible { outline: 3px solid var(--blue); outline-offset: 2px; }
.tab-state { margin-left: 6px; font-size: 15px; font-weight: 400; color: var(--ink-soft); }
.tab-state[data-state=todo] { color: var(--red-text); }
.tab-state[data-state=live] { color: var(--green); }
.tab-state[data-warn=true]::before { content: "⚠ "; color: var(--red-text); }
.es-empty { padding: 16px 18px; border: 2px dashed rgba(29, 23, 20, .35); border-radius: 5px; }
.es-empty .lede { margin-top: 0; }
.es-start { display: flex; flex-wrap: wrap; gap: 8px; margin: 12px 0; }
.es-start .btn, .es-start .btn-ghost { min-height: 44px; }
.es-join { margin: 14px 0 0; }
.es-join select { display: block; width: 100%; min-height: 44px; margin: 4px 0 8px; }
.es-note { margin: 0 0 12px; padding: 8px 12px; border-left: 5px solid var(--blue); background: rgba(189, 208, 232, .45); }
.es-note p { margin: 0 0 6px; }
.es-note.small { font-size: 15px; }
.es-todo { margin: 0 0 12px; padding: 8px 12px; border-left: 5px solid var(--red); background: rgba(243, 216, 205, .55); font-size: 17px; }
.es-todo p { margin: 0 0 4px; }
.es-todo ul { margin: 0; padding-left: 20px; }
.es-todo .link-btn { min-height: 36px; padding: 2px 0; color: var(--ink); text-align: left; font-size: 17px; }
/* "Same in Spanish": a button of its own, on its own line, never a small link beside the long one (CR2-M5). */
.es-todo .same-btn, .publish-spanish .same-btn { display: block; min-height: 44px; margin: 4px 0 8px; }
.es-kept { margin: 0 0 12px; font-size: 16px; color: var(--ink-soft); }
.es-kept p { margin: 0 0 2px; }
.es-kept ul { margin: 0; padding-left: 20px; }
.es-kept .link-btn { min-height: 36px; padding: 2px 6px; font-size: 16px; }
.moved-note { font-size: 15px; color: var(--blue); font-weight: 700; }
.moved-note .link-btn { min-height: 36px; padding: 2px 4px; font-size: 15px; }
.shared-settings { margin: 0 0 16px; }
.shared-head { margin: 4px 0 10px; font-size: 14px; text-transform: uppercase; letter-spacing: .06em; color: var(--ink-soft); }
.publish-spanish { margin: 0 0 10px; padding: 8px 12px; border-left: 5px solid var(--blue); background: rgba(189, 208, 232, .35); font-size: 17px; }
.publish-spanish p { margin: 0 0 6px; }
.publish-spanish-list { margin: 0 0 6px; padding-left: 20px; }
.publish-spanish .link-btn { min-height: 36px; padding: 2px 0; color: var(--ink); text-align: left; font-size: 17px; }
.publish-spanish .link-btn.small { font-size: 15px; color: var(--blue); text-decoration: underline; }
.admin-posts .langs { font-weight: 700; }
.editor-dialog .sheet { padding: 24px 22px 6px; }
.publish-errors { margin: 0 0 10px; padding: 8px 12px 8px 30px; border-left: 5px solid var(--red); background: rgba(243, 216, 205, .7); font-size: 17px; }
.publish-errors .publish-errors-head { margin-left: -18px; list-style: none; font-weight: 700; }
.publish-errors .link-btn { min-height: 36px; padding: 2px 0; color: var(--ink); text-align: left; font-size: 17px; }
.editor-dialog .btn:disabled { background: #9a7b80; cursor: not-allowed; }
.dialog-actions.stacked { flex-direction: column; }
.dialog-actions.stacked > * { flex: none; width: 100%; }

/* The editor's photo and video blocks. */
.bt-photo, .bt-video { margin: 10px 0; padding: 10px; border: 2px dashed rgba(29, 23, 20, .28); border-radius: 5px; font-family: var(--hand); }
.bt-photo-pick { display: flex; align-items: center; justify-content: center; min-height: 120px; border-radius: 4px; background: rgba(255, 251, 240, .45); font: 20px/1.1 var(--marker); text-transform: uppercase; color: var(--red-text); cursor: pointer; }
.bt-photo-fig { margin: 0 0 8px; }
.bt-photo-fig img { display: block; max-height: 360px; margin: 0 auto; border-radius: 3px; box-shadow: 0 6px 14px -8px rgba(40, 25, 10, .6); }
/* Left and right photos float in the editor as they do on the post (700 px and up), so the words after them wrap
   around them while writing; centered and wide ones, and videos, start below any float. */
@media (min-width: 700px) {
  .editor-body .ce-block:has(> .ce-block__content > .bt-photo[data-align=left]) { float: left; width: 45%; margin: 0 1.4em .4em 0; }
  .editor-body .ce-block:has(> .ce-block__content > .bt-photo[data-align=right]) { float: right; width: 45%; margin: 0 0 .4em 1.4em; }
  .editor-body .ce-block:has(> .ce-block__content > .bt-photo[data-align=left]) > .ce-block__content,
  .editor-body .ce-block:has(> .ce-block__content > .bt-photo[data-align=right]) > .ce-block__content { max-width: none; }
  .editor-body .ce-block:has(> .ce-block__content > .bt-photo[data-align=center]),
  .editor-body .ce-block:has(> .ce-block__content > .bt-photo[data-align=wide]),
  .editor-body .ce-block:has(> .ce-block__content > .bt-video) { clear: both; }
}
.editor-body .codex-editor__redactor::after { content: ""; display: block; clear: both; }
.bt-aligns { display: flex; flex-wrap: wrap; gap: 6px; margin: 0 0 8px; }
.bt-align { min-height: 36px; padding: 2px 12px; border: 2px solid var(--ink); border-radius: 999px; background: transparent; color: var(--ink); font: 16px var(--hand); cursor: pointer; }
.bt-align[aria-pressed=true] { background: var(--ink); color: var(--cream); }
.editor-body .bt-input { width: 100%; min-height: 40px; margin: 0 0 6px; font-size: 16px; }
.bt-video-add { display: flex; gap: 8px; }
.editor-body .bt-video-add .bt-input { margin: 0; }
.bt-video-preview { position: relative; max-width: 480px; aspect-ratio: 16 / 9; margin: 0 0 8px; overflow: hidden; border-radius: 4px; background: #1a120c; }
.bt-video-preview img { width: 100%; height: 100%; object-fit: cover; }
.bt-video-preview .video-play { width: 54px; height: 54px; margin: -27px 0 0 -27px; }
.bt-video-title { margin: 0 0 6px; font-size: 17px; }
.bt-uploaded { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; }
.editor-body .bt-uploaded .bt-date { width: auto; margin: 0; }

/* ---------- the spam check (docs/design/website-spam-check.md) ----------
   Google's floating badge is replaced by the "protected by reCAPTCHA" line above each protected form's send button. It's
   moved off the page and hidden, never display: none (reported to stop the check). */
.grecaptcha-badge { visibility: hidden !important; position: fixed !important; left: -10000px !important; bottom: 0 !important; }
.recaptcha-note { margin: 10px 0 0; text-align: center; font-size: 15px; }
.recaptcha-note a { color: var(--ink-soft); }


/* ======================================================================================================================
   Third Law's pages (docs/design/website-third-law.md §5, §8): the same look, the brand tokens above, and the pieces
   only its pages have. Brass is never text and never fills a button: buttons and numbers go ink on Third Law.
   ====================================================================================================================== */
[data-site="thirdlaw"] .btn { background: var(--ink); border-color: var(--ink); }
[data-site="thirdlaw"] .btn:hover { background: var(--space-2); border-color: var(--space-2); }
[data-site="thirdlaw"] .num { background: var(--ink); }
/* Third Law's pages are full-width sections; the repair pages keep the page's width and its cards. */
[data-site="thirdlaw"] main.wrap { max-width: none; padding: 0; }
/* Third Law's menu has three long words (longer in Spanish): on a phone it wraps under the wordmark and tightens, so
   nothing scrolls sideways at 320 px. */
[data-site="thirdlaw"] .nav { flex-wrap: wrap; justify-content: flex-end; row-gap: 0; }
@media (max-width: 480px) {
  [data-site="thirdlaw"] .tl-brand { font-size: 18px; letter-spacing: .12em; }
  [data-site="thirdlaw"] .nav a { padding: 4px 6px; font-size: 13px; letter-spacing: .05em; }
  [data-site="thirdlaw"] .nav a.lang-switch { padding: 4px 0 4px 2px; }
}
/* The wordmark is a tap target too (X1-L5); on Spanish phones the EN pill stays, there is no "English" line under the bar (X1-L1). */
[data-site="thirdlaw"] .tl-brand { display: inline-flex; align-items: center; min-height: 44px; }
[data-site="thirdlaw"] .lang-mini { display: none !important; }
/* (The pill's Third Law rule moved to the mark's block at the end: it applies at every width, TLMC-L6.) */

/* A section of a Third Law page: full width, its content held to the page's width. */
.tl-section { padding: 48px var(--gutter); }
.tl-section > .tl-inner { max-width: 1180px; margin: 0 auto; }
.tl-band { background: var(--space); color: var(--space-ink); }
.tl-band a { color: var(--space-ink); }
.tl-rule { width: 56px; height: 3px; margin: 0 auto 20px; background: var(--accent); border: 0; }

/* The front page's hero (§5.1): the name and the tagline over one still image; short on a phone so the doors show
   without scrolling. The image comes from the owner (§14); until then the band's own colour. */
.tl-hero {
  display: grid;
  place-items: center;
  text-align: center;
  min-height: min(44vh, 420px);
  padding: 40px var(--gutter);
  background: var(--space) center / cover no-repeat;
  color: var(--space-ink);
}
.tl-hero .tl-name { font-size: clamp(40px, 9vw, 84px); letter-spacing: .12em; margin: 0; }
.tl-hero .tl-tagline { margin: 10px 0 0; font-size: clamp(17px, 2.4vw, 22px); font-weight: 300; letter-spacing: .06em; text-wrap: balance; }
@media (max-width: 719px) { .tl-hero { min-height: min(36vh, 360px); } }
@media (min-width: 720px) { .tl-hero { min-height: min(60vh, 560px); } }
/* Focus rings on the dark bands are light (X1-L2). */
.tl-hero :focus-visible, .tl-band :focus-visible, .footer :focus-visible { outline-color: #9ec1ff; }

/* The three doors (§5.1): a title and a small caption each; stacked on a phone, side by side from 720 px. A lone door
   keeps one column's width (auto-fill, not auto-fit), so it isn't a page-wide banner (X1-M5). */
.tl-doors { padding-top: 0; margin-top: -28px; }
.tl-door-list { list-style: none; margin: 0 auto; padding: 0; max-width: 1180px; display: grid; gap: 16px; }
@media (min-width: 720px) { .tl-door-list { grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 24px; } }
.tl-door { display: flex; flex-direction: column; background: var(--paper-light); border-top: 3px solid var(--accent); box-shadow: var(--card-shadow); }
.tl-door-main { display: block; padding: 24px 24px 20px; text-decoration: none; color: inherit; }
.tl-door-main:hover .tl-door-title, .tl-door-main:focus-visible .tl-door-title { text-decoration: underline; text-decoration-color: var(--accent); text-decoration-thickness: 3px; text-underline-offset: 6px; }
.tl-door-title { display: block; font-family: var(--heading); font-weight: 500; font-size: 30px; letter-spacing: .05em; text-transform: uppercase; line-height: 1.1; }
.tl-door-caption { display: block; margin-top: 8px; color: var(--ink-soft); font-size: 17px; }
.tl-door-by { display: block; margin-top: 10px; font-family: var(--heading); font-size: 13px; letter-spacing: .1em; text-transform: uppercase; color: var(--ink-soft); }
.tl-door-more { display: inline-flex; align-items: center; min-height: 44px; margin: 0 24px 18px; padding: 0 0 2px; font-family: var(--heading); font-size: 15px; letter-spacing: .08em; text-transform: uppercase; text-decoration: none; border-bottom: 2px solid var(--accent); }
.tl-door-more:hover, .tl-door-more:focus-visible { border-bottom-color: var(--ink); }

/* Three lines about the shop (§5.1). */
.tl-about { text-align: center; }
.tl-about p { max-width: 62ch; margin: 0 auto 12px; font-size: 18px; }
.tl-about .tl-link { display: inline-block; margin-top: 8px; padding: 12px 22px; font-family: var(--heading); font-size: 15px; letter-spacing: .1em; text-transform: uppercase; text-decoration: none; color: var(--ink); border: 2px solid var(--ink); }
.tl-about .tl-link:hover, .tl-about .tl-link:focus-visible { background: var(--ink); color: var(--paper); }

/* A division's pages (§5.3, §5.4): a title band, then sections. */
.tl-page-head { padding-bottom: 8px; }
.tl-page-head .crumbs { margin-bottom: 18px; }
.tl-page-head .lede { max-width: 62ch; }
.tl-kinds { padding-top: 16px; }
.tl-kind-list { margin: 0; }
.tl-two { display: grid; gap: 24px 48px; }
@media (min-width: 760px) { .tl-two { grid-template-columns: 1fr 1fr; } }
.tl-list { margin: 0; padding: 0 0 0 20px; font-size: 17px; }
.tl-list li { margin: 0 0 6px; }
.tl-steps { list-style: none; margin: 0 0 32px; padding: 0; display: grid; gap: 16px; }
@media (min-width: 760px) { .tl-steps { grid-template-columns: repeat(3, 1fr); gap: 24px; } }
.tl-steps li { display: flex; gap: 14px; align-items: flex-start; padding: 18px; background: var(--paper-light); border: 1px solid var(--line); border-top: 3px solid var(--accent); }
.tl-steps strong { display: block; margin-bottom: 4px; font-family: var(--heading); font-weight: 500; font-size: 19px; letter-spacing: .04em; text-transform: uppercase; }
.tl-ask { padding: 24px; background: var(--paper-light); border: 1px solid var(--line); }
.tl-ask .contact-links { justify-content: flex-start; }
.tl-more { margin: 20px 0 0; }
.tl-empty { padding: 32px 24px; text-align: center; background: var(--paper-light); border: 1px solid var(--line); }
.tl-empty p { max-width: 52ch; margin: 0 auto 12px; }

/* A law line (§3): after the opening paragraph, as a quotation with its credit, never under the heading. */
.tl-law { margin: 28px auto; max-width: 62ch; padding: 0 0 0 20px; border-left: 3px solid var(--accent); }
.tl-law blockquote { margin: 0; font-family: var(--heading); font-weight: 400; font-size: 24px; letter-spacing: .02em; line-height: 1.25; }
.tl-law figcaption { margin-top: 8px; color: var(--ink-soft); font-size: 15px; }
/* The repair home's law sits in the hero, after the tagline (design §3), in the hero's own measure. */
.hero .tl-law { margin: 18px 0 0; max-width: 46ch; }
.hero .tl-law blockquote { font-size: 21px; }

@media (prefers-reduced-motion: no-preference) {
  .tl-door { transition: transform .18s ease, box-shadow .18s ease; }
  .tl-door:hover { translate: 0 -2px; box-shadow: 0 2px 4px rgba(15, 22, 32, .08), 0 14px 32px rgba(15, 22, 32, .1); }
}

/* ---------- staff: the AI crawler count (/admin/crawlers) and the preview button (docs/design/website-third-law.md §10, §11) ---------- */
/* On a phone the table scrolls sideways under its first column, which stays put, and the totals row comes first (X1-M7). */
.table-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; margin: 0 calc(-1 * var(--gutter)); padding: 0 var(--gutter) 8px; }
table.counts { border-collapse: separate; border-spacing: 0; min-width: 100%; font: 16px/1.3 var(--plain); }
table.counts th, table.counts td { padding: 6px 10px; text-align: left; white-space: nowrap; border-bottom: 1px solid var(--line); background: var(--paper-light); }
table.counts th[scope="col"] { font-weight: 600; }
table.counts th[scope="row"] { position: sticky; left: 0; z-index: 1; font-weight: 400; color: var(--ink-soft); box-shadow: 1px 0 0 var(--line); }
table.counts tr.total th, table.counts tr.total td { font-weight: 600; color: var(--ink); }
table.counts td { font-variant-numeric: tabular-nums; }
/* The staff menu wraps onto a second row on a phone rather than running off it (X1-H1). */
.nav[aria-label="Admin"] { flex-wrap: wrap; justify-content: flex-end; row-gap: 0; }
.nav-form { display: inline-flex; margin: 0; }
.nav .nav-btn {
  display: inline-flex; align-items: center; min-height: 44px; padding: 4px 9px; margin: 0;
  background: none; border: 0; cursor: pointer; color: var(--ink);
  font-family: var(--heading); font-size: 15px; letter-spacing: .08em; text-transform: uppercase; white-space: nowrap;
}
.nav .nav-btn:hover { text-decoration: underline; text-decoration-color: var(--accent); text-decoration-thickness: 3px; text-underline-offset: 6px; }

/* ================= The look pass of 2026-11-10: the template's feel (docs/design/website-third-law.md §8) =================
   What the template has that the first draft didn't: air between sections, one title pattern (centred, large, a hairline
   under it), dark bands with a drawing under a tint, rings of line icons, tiles that lift, cards that fade up as they
   arrive, a hero with the name set large and two buttons, and a way back to the top. Nothing here changes behaviour. */

/* Air. */
.tl-section { padding: 72px var(--gutter); }
@media (min-width: 720px) { .tl-section { padding: 96px var(--gutter); } }

/* The title pattern. */
.tl-title { display: block; margin: 0 auto 18px; padding: 0 0 22px; text-align: center; font: 500 clamp(34px, 5.2vw, 60px)/1.05 var(--heading); letter-spacing: .04em; text-transform: uppercase; text-wrap: balance; background: linear-gradient(var(--line-strong), var(--line-strong)) no-repeat center bottom / 70px 1px; }
.tl-band .tl-title { color: #fff; background-image: linear-gradient(rgba(233, 236, 241, .4), rgba(233, 236, 241, .4)); }
.tl-lede { max-width: 800px; margin: 0 auto 44px; text-align: center; font-size: 18px; line-height: 1.7; }
.tl-band .tl-lede { color: rgba(233, 236, 241, .86); }

/* A dark band with the field drawing under the brand's tint. */
.tl-field { position: relative; isolation: isolate; background-color: var(--space); color: var(--space-ink); }
.tl-field::before { content: ""; position: absolute; inset: 0; z-index: -2; background: url(/img/field.svg) center / 1400px auto repeat; opacity: .6; }
.tl-field::after { content: ""; position: absolute; inset: 0; z-index: -1; background: radial-gradient(ellipse 55% 70% at 78% 18%, color-mix(in srgb, var(--accent) 30%, transparent), transparent 70%), linear-gradient(180deg, rgba(15, 22, 32, .1), rgba(15, 22, 32, .7)); }

/* The front page's hero: the name set large, the tagline in capitals under it, two buttons, and a cue to scroll. */
.tl-hero { min-height: min(74vh, 740px); padding: 72px var(--gutter) 96px; display: grid; place-items: center; text-align: center; }
@media (max-width: 719px) { .tl-hero { min-height: 0; padding: 56px var(--gutter) 64px; } }
.tl-hero .tl-name { margin: 0; font: 500 clamp(56px, 11vw, 132px)/1 var(--heading); letter-spacing: .08em; text-transform: uppercase; color: #fff; }
.tl-hero .tl-tagline { margin: 18px 0 0; font: 300 clamp(15px, 2vw, 22px)/1.45 var(--hand); letter-spacing: .16em; text-transform: uppercase; color: rgba(233, 236, 241, .86); text-wrap: balance; }
[data-site="thirdlaw"] a.tl-btn, [data-site="thirdlaw"] .btn.tl-btn { background: var(--accent); border-color: var(--accent); color: var(--space); }
[data-site="thirdlaw"] a.tl-btn:hover, [data-site="thirdlaw"] .btn.tl-btn:hover, [data-site="thirdlaw"] a.tl-btn:focus-visible { background: #fff; border-color: #fff; color: var(--space); }
[data-site="thirdlaw"] a.tl-btn-ghost, [data-site="thirdlaw"] .btn.tl-btn-ghost { background: transparent; border-color: rgba(255, 255, 255, .72); color: #fff; }
[data-site="thirdlaw"] a.tl-btn-ghost:hover, [data-site="thirdlaw"] .btn.tl-btn-ghost:hover, [data-site="thirdlaw"] a.tl-btn-ghost:focus-visible { background: #fff; border-color: #fff; color: var(--space); }
.tl-scroll { position: absolute; left: 50%; bottom: 22px; width: 44px; height: 44px; display: grid; place-items: center; color: rgba(255, 255, 255, .72); transform: translateX(-50%); }
.tl-scroll::before { content: ""; width: 12px; height: 12px; border: solid currentColor; border-width: 0 1.5px 1.5px 0; transform: translateY(-3px) rotate(45deg); }
.tl-scroll:hover { color: #fff; }
@media (prefers-reduced-motion: no-preference) {
  .tl-scroll { animation: tl-bob 1.9s ease-in-out infinite; }
  @keyframes tl-bob { 0%, 100% { transform: translate(-50%, 0); } 50% { transform: translate(-50%, 7px); } }
}
@media (max-width: 719px) { .tl-scroll { display: none; } }

/* Tiles: a ring with a line icon, a lift on hover, the brand's line growing along the foot. */
.tl-doors { padding-top: 0; margin-top: -48px; position: relative; z-index: 1; }
.tl-door { position: relative; border-top: 0; overflow: hidden; transition: transform .25s ease, box-shadow .25s ease; }
.tl-door::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 3px; background: var(--accent); transform: scaleX(.16); transform-origin: left; transition: transform .4s cubic-bezier(.2, .7, .3, 1); }
.tl-door:hover, .tl-door:focus-within { translate: 0 -4px; box-shadow: 0 2px 4px rgba(15, 22, 32, .06), 0 20px 44px rgba(15, 22, 32, .14); }
.tl-door:hover::after, .tl-door:focus-within::after { transform: scaleX(1); }
.tl-door-main { padding: 30px 28px 24px; }
.tl-door-title { font-size: 28px; }
.tl-icon-ring { display: grid; place-items: center; width: 72px; height: 72px; margin: 0 0 18px; border: 1px solid var(--line-strong); border-radius: 50%; color: var(--ink); transition: border-color .25s, color .25s, transform .25s; }
.tl-icon-ring .tl-icon { width: 30px; height: 30px; }
.tl-door:hover .tl-icon-ring, .tl-door:focus-within .tl-icon-ring { border-color: var(--accent); color: var(--accent-ink); }
.tl-band .tl-icon-ring { border-color: rgba(233, 236, 241, .4); color: #fff; }
.tl-steps li { transition: transform .25s ease, box-shadow .25s ease; }
.tl-steps li:hover { translate: 0 -3px; box-shadow: var(--card-shadow); }

/* The welcome band: three machines, one line each. */
.tl-welcome { text-align: center; }
.tl-three { list-style: none; margin: 0 auto; padding: 0; max-width: 1180px; display: grid; gap: 36px; }
@media (min-width: 720px) { .tl-three { grid-template-columns: repeat(3, 1fr); gap: 32px; } }
.tl-three li { display: flex; flex-direction: column; align-items: center; text-align: center; }
.tl-three .tl-icon-ring { width: 92px; height: 92px; margin-bottom: 22px; }
.tl-three .tl-icon-ring .tl-icon { width: 36px; height: 36px; }
.tl-three li:hover .tl-icon-ring { border-color: var(--accent); color: var(--accent); transform: translateY(-3px); }
.tl-three h3 { margin: 0 0 8px; font: 500 20px/1.2 var(--heading); letter-spacing: .1em; text-transform: uppercase; color: #fff; }
.tl-three p { margin: 0; max-width: 32ch; color: rgba(233, 236, 241, .82); font-size: 17px; line-height: 1.6; }
.tl-welcome-more { margin: 44px 0 0; }

/* A division's page band: crumbs, the heading set large and centred, the lede, the law. */
.tl-page-head.tl-field { padding: 56px var(--gutter) 56px; text-align: center; }
@media (min-width: 720px) { .tl-page-head.tl-field { padding: 88px var(--gutter) 76px; } }
.tl-page-head .crumbs { margin: 0 0 24px; font: 400 13px/1.4 var(--heading); letter-spacing: .12em; text-transform: uppercase; color: rgba(233, 236, 241, .7); }
.tl-page-head .crumbs a, .tl-page-head .crumbs span[aria-hidden], .tl-page-head .crumbs [aria-current] { color: rgba(233, 236, 241, .7); }
.tl-page-head .crumbs [aria-current] { color: #fff; }
.tl-page-head .title { display: block; margin: 0 auto 16px; padding: 0; background: none; color: #fff; font-size: clamp(40px, 7vw, 80px); letter-spacing: .05em; text-align: center; text-wrap: balance; }
.tl-page-head .lede { margin: 0 auto; max-width: 760px; color: rgba(233, 236, 241, .88); font-size: 20px; line-height: 1.6; text-align: center; }
.tl-page-head .tl-law { margin: 40px auto 0; text-align: left; }
.tl-page-head .tl-law blockquote { color: #fff; }
.tl-page-head .tl-law figcaption { color: rgba(233, 236, 241, .72); }
.tl-kinds { padding-top: 72px; }

/* Cards arrive as they scroll into view (the observer is in site.js; reduced motion turns it off), later ones a beat later. */
.reveal-on [data-reveal][data-i="2"] { transition-delay: .1s; }
.reveal-on [data-reveal][data-i="3"] { transition-delay: .2s; }
.reveal-on [data-reveal][data-i="4"] { transition-delay: .3s; }
.reveal-on [data-reveal][data-i="5"] { transition-delay: .4s; }
.reveal-on [data-reveal][data-i="6"] { transition-delay: .5s; }

/* Back to the top, once the page has scrolled (site.js). */
.btt { position: fixed; right: 18px; bottom: 18px; z-index: 40; width: 48px; height: 48px; display: grid; place-items: center; border-radius: 6px; background: rgba(15, 22, 32, .72); color: #fff; opacity: 0; pointer-events: none; transform: translateY(8px); transition: opacity .25s, transform .25s, background .25s; }
.btt-on .btt { opacity: 1; pointer-events: auto; transform: none; }
.btt::before { content: ""; width: 11px; height: 11px; border: solid currentColor; border-width: 2px 0 0 2px; transform: translateY(3px) rotate(45deg); }
.btt:hover { background: var(--accent); }
html:not(.js) .btt { display: none; }

/* The repair home: the hero sheet sits on the field band, full width, with the two things to do under the tagline. */
.home main.wrap { max-width: none; padding: 0; }
.home .hero { margin: 0 0 24px; padding: 32px var(--gutter) 48px; }
@media (min-width: 700px) { .home .hero { padding: 56px var(--gutter) 72px; } }
.home .hero .sheet { max-width: 1180px; margin: 0 auto; color: var(--ink); }
.hero-actions { display: flex; flex-wrap: wrap; gap: 12px 14px; margin: 24px 0 0; }
.home .title { font-size: clamp(32px, 5.5vw, 56px); }

/* The owner's workshop photos (2026-11-10) behind a band: the laser at the front door, the router over Special Orders,
   the bench behind the repair home. A deeper tint than the drawing gets, so white text stays readable on any crop. */
.tl-photo::before { opacity: 1; background-position: center; background-size: cover; background-repeat: no-repeat; }
.tl-photo::after { background: radial-gradient(ellipse 55% 70% at 78% 18%, color-mix(in srgb, var(--accent) 22%, transparent), transparent 70%), linear-gradient(180deg, rgba(15, 22, 32, .58), rgba(15, 22, 32, .8)); }
.tl-photo-laser::before { background-image: url(/img/shop-laser-800.webp); }
.tl-photo-cnc::before { background-image: url(/img/shop-cnc-800.webp); }
.tl-photo-bench::before { background-image: url(/img/shop-bench-800.webp); }
.tl-photo-printer::before { background-image: url(/img/shop-printer-800.webp); }
@media (min-width: 720px) {
  .tl-photo-laser::before { background-image: url(/img/shop-laser-1600.webp); }
  .tl-photo-cnc::before { background-image: url(/img/shop-cnc-1600.webp); }
  .tl-photo-bench::before { background-image: url(/img/shop-bench-1600.webp); }
  .tl-photo-printer::before { background-image: url(/img/shop-printer-1600.webp); }
}
.home .hero.tl-photo::after { background: linear-gradient(180deg, rgba(15, 22, 32, .5), rgba(15, 22, 32, .72)); }

/* The welcome band's three machines, each with its photo; the ring sits on the photo's foot. */
.tl-three-photo { width: 100%; aspect-ratio: 16 / 9; margin: 0; overflow: hidden; border-radius: 4px; box-shadow: 0 12px 32px rgba(0, 0, 0, .35); }
.tl-three-photo img { display: block; width: 100%; height: 100%; object-fit: cover; transition: transform .7s cubic-bezier(.2, .7, .3, 1); }
.tl-three li:hover .tl-three-photo img { transform: scale(1.05); }
.tl-three .tl-icon-ring { width: 76px; height: 76px; margin: -38px 0 16px; background: var(--space); border-color: rgba(233, 236, 241, .5); position: relative; }
.tl-three .tl-icon-ring .tl-icon { width: 30px; height: 30px; }

/* The hero's motion (2026-11-10, the owner asked for more than a still): four stills crossfade, each drifting a little
   while it shows (28 s round), the text rises in on load, and on wide screens the stills scroll a touch slower than the
   page (site.js sets --tl-parallax). Under reduced motion: the first still, unmoving. No script engine, no slider. */
.tl-hero-live { overflow: hidden; } /* the stills move; the band clips them */
.tl-hero-live::before { display: none; }
.tl-slides { position: absolute; inset: 0; z-index: -2; overflow: hidden; transform: translate3d(0, var(--tl-parallax, 0px), 0); }
.tl-slide { position: absolute; inset: -4% 0; background: center / cover no-repeat; opacity: 0; }
.tl-slide-laser { background-image: url(/img/shop-laser-800.webp); opacity: 1; }
.tl-slide-printer { background-image: url(/img/shop-printer-800.webp); }
.tl-slide-cnc { background-image: url(/img/shop-cnc-800.webp); }
.tl-slide-bench { background-image: url(/img/shop-bench-800.webp); }
@media (min-width: 720px) {
  .tl-slide-laser { background-image: url(/img/shop-laser-1600.webp); }
  .tl-slide-printer { background-image: url(/img/shop-printer-1600.webp); }
  .tl-slide-cnc { background-image: url(/img/shop-cnc-1600.webp); }
  .tl-slide-bench { background-image: url(/img/shop-bench-1600.webp); }
}
@media (prefers-reduced-motion: no-preference) {
  .tl-slide { animation: tl-slide 28s ease-in-out infinite; will-change: opacity, transform; }
  .tl-slide-laser { animation: tl-drift 28s ease-in-out infinite alternate; }
  .tl-slide-printer { animation-delay: 7s; }
  .tl-slide-cnc { animation-delay: 14s; }
  .tl-slide-bench { animation-delay: 21s; }
  @keyframes tl-slide { 0% { opacity: 0; transform: scale(1); } 5% { opacity: 1; } 25% { opacity: 1; transform: scale(1.06); } 30% { opacity: 0; transform: scale(1.07); } 100% { opacity: 0; transform: scale(1.07); } }
  @keyframes tl-drift { from { transform: scale(1); } to { transform: scale(1.07); } }
  .tl-hero-text > * { animation: tl-rise .9s cubic-bezier(.2, .7, .3, 1) both; }
  .tl-hero-text .tl-tagline { animation-delay: .18s; }
  @keyframes tl-rise { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: none; } }
}
@media (min-width: 980px) { .tl-three { grid-template-columns: repeat(4, 1fr); gap: 28px; } }

/* Two tiers on the front page (the owner, 2026-11-10): Shop and Custom Request first; Custom Request scrolls to the
   machines, each a photo tile; Repairs is its own band below, Damage Control's bench beside the request button. */
@media (min-width: 720px) { .tl-tier1 { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; } }
.tl-tier1 .tl-door-main { padding: 34px 28px 26px; }
.tl-tier1 .tl-door-title { font-size: 30px; }
.tl-tier1 .tl-door-caption { font-size: 17px; }
.tl-custom { scroll-margin-top: 72px; }
.tl-machines { margin-top: 8px; }
@media (min-width: 720px) { .tl-machines { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.tl-door-photo .tl-door-main { padding: 0 28px 26px; }
.tl-door-figure { margin: 0 -28px 0; aspect-ratio: 16 / 9; overflow: hidden; }
.tl-door-figure img { display: block; width: 100%; height: 100%; object-fit: cover; transition: transform .7s cubic-bezier(.2, .7, .3, 1); }
.tl-door-photo:hover .tl-door-figure img, .tl-door-photo:focus-within .tl-door-figure img { transform: scale(1.05); }
.tl-door-photo .tl-icon-ring { position: relative; margin: -36px 0 14px; background: var(--paper-light); }
.tl-custom-more { margin: 36px auto 0; max-width: 62ch; text-align: center; font-size: 17px; color: var(--ink-soft); }
.tl-custom-more a { color: var(--ink); }
.tl-title-left { text-align: left; margin-left: 0; background-position: left bottom; }
.tl-about-link { text-align: center; padding-top: 0; }
.tl-about-link .tl-link { display: inline-block; padding: 12px 22px; font-family: var(--heading); font-size: 15px; letter-spacing: .1em; text-transform: uppercase; text-decoration: none; border: 1px solid var(--ink); color: var(--ink); }
.tl-about-link .tl-link:hover { background: var(--ink); color: var(--paper); }

/* ================= Blue accent lines (the owner, 2026-11-10) =================
   Four tries at a glowing LED taught the same lesson each time: blur reads as washed out, on white and on dark. So the
   decorative lines are crisp and blue (a cool note against the brass and the wood), nothing is blurred, and the only
   motion is a door's foot line growing along the card on hover. Brass stays on the buttons and the resting rings. */
:root { --line-accent: #2f86e6; --line-accent-dark: #6cb8ff; }

/* Doors and tiles: a short line at the foot that runs the full width on hover. The ring and the title follow. */
.tl-door { border-bottom: 0; overflow: visible; }
.tl-door::after { height: 3px; bottom: 0; background: var(--line-accent); box-shadow: none; transform: scaleX(.18); transform-origin: left; transition: transform .45s cubic-bezier(.2, .7, .3, 1); animation: none; }
.tl-door:hover::after, .tl-door:focus-within::after { transform: scaleX(1); background: var(--line-accent); box-shadow: none; }
.tl-door:hover .tl-icon-ring, .tl-door:focus-within .tl-icon-ring, .tl-three li:hover .tl-icon-ring { border-color: var(--line-accent); color: var(--line-accent); box-shadow: none; }
.tl-door-main:hover .tl-door-title, .tl-door-main:focus-visible .tl-door-title { text-decoration-color: var(--line-accent); }

/* The request link under the Repairs door: a plain rule that darkens on hover. */
.tl-door-more { position: static; border-bottom: 2px solid var(--line-accent); }
.tl-door-more::after { content: none; }
.tl-door-more:hover, .tl-door-more:focus-visible { border-bottom-color: var(--ink); color: var(--ink); }

/* Titles: a short line, blue; lighter blue on the dark bands. */
.tl-title { padding-bottom: 0; background: none; }
.tl-title::after { content: ""; display: block; width: 70px; height: 2px; margin: 22px auto 0; background: var(--line-accent); box-shadow: none; animation: none; }
.tl-title-left::after { margin-left: 0; }
.tl-band .tl-title { background-image: none; }
.tl-band .tl-title::after { background: var(--line-accent-dark); }
.tl-rule { height: 2px; background: var(--line-accent); box-shadow: none; animation: none; }
.tl-band .tl-rule { background: var(--line-accent-dark); }

/* The law's bar. */
.tl-law { position: static; border-left: 3px solid var(--line-accent); }
.tl-law::before { content: none; }
.tl-band .tl-law, .tl-page-head .tl-law { border-left-color: var(--line-accent-dark); }

/* Buttons keep their own hover; nothing halos. The seams between bands are plain again. */
[data-site="thirdlaw"] a.tl-btn:hover, [data-site="thirdlaw"] a.tl-btn:focus-visible, [data-site="thirdlaw"] a.tl-btn-ghost:hover, [data-site="thirdlaw"] a.tl-btn-ghost:focus-visible { box-shadow: none; }
.home .hero .btn:hover, .home .hero .btn-ghost:hover { box-shadow: none; }
.home .hero.tl-field { box-shadow: none; }
.tl-hero { box-shadow: none; }
.footer-top { border-bottom-color: rgba(233, 236, 241, .14); box-shadow: none; }
.tl-hero :focus-visible, .tl-band :focus-visible, .footer :focus-visible { outline-color: var(--line-accent-dark); }

/* ================= The page pass of 2026-11-10 (design §8): blocks, spacing, bands on every page ================= */
/* Third Law: every accent line is the one blue; the step cards and small titles too. */
[data-site="thirdlaw"] .title { background-image: linear-gradient(var(--line-accent), var(--line-accent)); }
[data-site="thirdlaw"] .tl-steps li { border-top-color: var(--line-accent); }
/* A card on a Third Law page: white, a blue line on top, a check list inside. */
.tl-two { gap: 24px; }
@media (min-width: 760px) { .tl-two { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 28px; } }
.tl-card { padding: 28px 28px 24px; background: var(--paper-light); border: 1px solid var(--line); border-top: 3px solid var(--line-accent); box-shadow: var(--card-shadow); }
.tl-card .title-small { margin-bottom: 14px; }
.tl-checks { list-style: none; padding: 0; }
.tl-checks li { position: relative; margin: 0 0 10px; padding-left: 30px; font-size: 17px; line-height: 1.45; }
.tl-checks li::before { content: ""; position: absolute; left: 0; top: .45em; width: 14px; height: 8px; border: solid var(--line-accent); border-width: 0 0 2px 2px; transform: rotate(-45deg); }
/* The "Ask us" band: centred, the pills light on the dark. */
.tl-ask-band { text-align: center; }
.tl-ask-band .tl-lede { margin-bottom: 28px; }
.tl-ask-band .contact-links { justify-content: center; }
.tl-band .contact-links a { background: var(--paper-light); color: var(--ink); border-color: transparent; }
.tl-band .contact-links a:hover, .tl-band .contact-links a:focus-visible { background: var(--line-accent-dark); color: var(--space); }
.tl-band-fine { margin: 20px 0 0; color: rgba(233, 236, 241, .72); }
/* Compact tiles for the other kinds of work. */
.tl-others-list { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
@media (min-width: 720px) { .tl-others-list { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 20px; } }
.tl-door-compact .tl-door-main { display: flex; flex-direction: column; align-items: center; text-align: center; padding: 24px 16px 20px; }
.tl-door-compact .tl-icon-ring { width: 56px; height: 56px; margin-bottom: 12px; }
.tl-door-compact .tl-icon-ring .tl-icon { width: 24px; height: 24px; }
.tl-door-compact .tl-door-title { font-size: 19px; letter-spacing: .06em; }
.tl-more-center { text-align: center; margin-top: 28px; }
.tl-more-center a { font-family: var(--heading); font-size: 15px; letter-spacing: .1em; text-transform: uppercase; text-decoration: none; border-bottom: 2px solid var(--line-accent); padding-bottom: 2px; color: var(--ink); }
.tl-more-center a:hover { border-bottom-color: var(--ink); }

/* Damage Control: the title band at the head of a service, job or devices page (the template's portfolio head), with
   the sheet attached under it. The breadcrumb and heading go light; the stamp and the icon take a plate. */
.page-band { margin-bottom: 0; padding: 30px 20px 26px; color: var(--space-ink); box-shadow: var(--card-shadow); }
@media (min-width: 700px) { .page-band { padding: 40px 48px 34px; } }
.page-band + .page-lead { margin-top: 0; }
.page-band + .page-lead > .sheet { border-top: 0; }
.page-band .crumbs { margin: 0 0 16px; font: 400 13px/1.4 var(--heading); letter-spacing: .1em; text-transform: uppercase; }
.page-band .crumbs a, .page-band .crumbs span[aria-hidden] { color: rgba(233, 236, 241, .72); }
.page-band .crumbs [aria-current] { color: #fff; }
.page-band .title { color: #fff; margin-bottom: 0; }
.page-band .title-row { align-items: center; }
.page-band .title-row .title { margin-bottom: 0; }
.page-band .kicker { color: rgba(233, 236, 241, .78); margin: 0 0 0 auto; text-align: right; }
.page-band .stamp { color: #fff; border-color: rgba(255, 255, 255, .85); margin: 18px 0 0; }
.page-band .stamp em { color: var(--accent-tint); }
.page-band .price-stamp { color: #fff; border-color: rgba(255, 255, 255, .85); margin: 0 0 0 auto; }
.page-band .price-stamp span { color: rgba(233, 236, 241, .8); }
.page-band .title-icon { height: 72px; width: 72px; margin: 0 0 0 auto; padding: 12px; background: var(--paper-light); border-radius: 50%; object-fit: contain; }
.page-band .service-title-row { gap: 12px 28px; }
.page-lead .lede { margin-top: 0; }
/* The service page's steps carry the home page's drawings. */
.service-steps { gap: 16px; }
@media (min-width: 700px) { .service-steps { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.service-steps li { text-align: center; padding: 20px 16px 18px; }
.service-steps .step-art { height: 72px; display: flex; align-items: flex-end; justify-content: center; margin-bottom: 12px; }
.service-steps .step-art img { max-height: 68px; width: auto; }
.service-steps h3 { justify-content: center; }
/* A band's heading has no underline at all (the rule above would otherwise paint its whole box). */
.tl-page-head .title, .page-band .title.no-line { background: none; }

/* The laser's page: two jobs across, three other kinds. */
.tl-two-up { max-width: 820px; margin-left: auto; margin-right: auto; }
@media (min-width: 720px) { .tl-two-up { grid-template-columns: repeat(2, minmax(0, 1fr)); } .tl-others-three { grid-template-columns: repeat(3, minmax(0, 1fr)); } }

/* The owner's work and bench photos (2026-11-10): behind the kind pages, the laser page and the repair title bands. */
.tl-photo-work-engraving::before { background-image: url(/img/work-engraving-800.webp); }
.tl-photo-work-cutting::before { background-image: url(/img/work-cutting-800.webp); }
.tl-photo-work-cnc::before { background-image: url(/img/work-cnc-800.webp); }
.tl-photo-work-printing::before { background-image: url(/img/work-printing-800.webp); }
.tl-photo-work-builds::before { background-image: url(/img/work-builds-800.webp); }
.tl-photo-work-award::before { background-image: url(/img/work-award-800.webp); }
.tl-photo-service-screen::before { background-image: url(/img/service-screen-800.webp); }
.tl-photo-service-console::before { background-image: url(/img/service-console-800.webp); }
@media (min-width: 720px) {
  .tl-photo-work-engraving::before { background-image: url(/img/work-engraving-1600.webp); }
  .tl-photo-work-cutting::before { background-image: url(/img/work-cutting-1600.webp); }
  .tl-photo-work-cnc::before { background-image: url(/img/work-cnc-1600.webp); }
  .tl-photo-work-printing::before { background-image: url(/img/work-printing-1600.webp); }
  .tl-photo-work-builds::before { background-image: url(/img/work-builds-1600.webp); }
  .tl-photo-work-award::before { background-image: url(/img/work-award-1600.webp); }
  .tl-photo-service-screen::before { background-image: url(/img/service-screen-1600.webp); }
  .tl-photo-service-console::before { background-image: url(/img/service-console-1600.webp); }
}
/* A repair title band with a photo behind it: a touch taller, the picture a touch darker than on Third Law's bands. */
.page-band.tl-photo { padding-top: 44px; padding-bottom: 40px; }
@media (min-width: 700px) { .page-band.tl-photo { padding-top: 64px; padding-bottom: 56px; } }
.page-band.tl-photo::after { background: linear-gradient(180deg, rgba(15, 22, 32, .62), rgba(15, 22, 32, .84)); }
/* Compact tiles carry a photo too, the ring on its foot. */
.tl-door-compact.tl-door-photo .tl-door-main { padding: 0 16px 20px; }
.tl-door-compact .tl-door-figure { margin: 0 -16px 0; }
.tl-door-compact.tl-door-photo .tl-icon-ring { margin: -28px 0 10px; }

/* ================= Damage Control takes the template's bands (the owner, 2026-11-10) =================
   The repair pages still had the old structure: each section a white card on cream, 24 px apart, its title in the
   card's corner. Now a section is a full-width band, light or dark in turn, its content sitting on the band inside the
   page's column, its title centred with air around it. The .sheet element stays (the wizard's container queries hang
   on it) but no longer draws a card. Staff pages, and the small centred cards (thanks, errors), keep their look. */
[data-site="repair"] body:not(.admin) main.wrap { max-width: none; padding: 0; }
[data-site="repair"] body:not(.admin) main.wrap > :not(.panel) { max-width: 1180px; margin-left: auto; margin-right: auto; padding-left: var(--gutter); padding-right: var(--gutter); box-sizing: border-box; }
[data-site="repair"] body:not(.admin) .panel:not(.narrow) { margin: 0; padding: 56px var(--gutter); }
@media (min-width: 700px) { [data-site="repair"] body:not(.admin) .panel:not(.narrow) { padding: 80px var(--gutter); } }
[data-site="repair"] body:not(.admin) .panel:not(.narrow) > .sheet { max-width: 1180px; margin: 0 auto; padding: 0; background: none; border: 0; box-shadow: none; }
[data-site="repair"] .panel.band-white { background: var(--paper-light); }
[data-site="repair"] .page-band { padding: 44px var(--gutter) 40px; box-shadow: none; }
@media (min-width: 700px) { [data-site="repair"] .page-band { padding: 56px var(--gutter) 48px; } }
[data-site="repair"] .band-inner { max-width: 1180px; margin: 0 auto; }
[data-site="repair"] .page-band.tl-photo { padding-top: 64px; padding-bottom: 56px; }
@media (min-width: 700px) { [data-site="repair"] .page-band.tl-photo { padding-top: 88px; padding-bottom: 76px; } }

/* Titles: centred, large, the brand's line under them, on every repair page (the band heads keep their own). */
[data-site="repair"] body:not(.admin) .panel:not(.narrow) .sheet > .title,
[data-site="repair"] body:not(.admin) .panel:not(.narrow) .title-row .title,
[data-site="repair"] body:not(.admin) .panel:not(.narrow) .sheet > .title-small,
[data-site="repair"] body:not(.admin) .panel:not(.narrow) .sheet > .stamp { display: block; width: fit-content; max-width: 100%; margin-left: auto; margin-right: auto; text-align: center; background-position: center bottom; }
[data-site="repair"] body:not(.admin) .panel:not(.narrow) .sheet > .title, [data-site="repair"] body:not(.admin) .panel:not(.narrow) .title-row .title { font-size: clamp(32px, 5.5vw, 56px); margin-bottom: 18px; }
[data-site="repair"] body:not(.admin) .panel:not(.narrow) .sheet > .title-small { font-size: clamp(24px, 3.6vw, 32px); margin-top: 40px; }
[data-site="repair"] body:not(.admin) .panel:not(.narrow) .title-row { flex-direction: column; align-items: center; gap: 0; text-align: center; }
[data-site="repair"] body:not(.admin) .panel:not(.narrow) .title-row .kicker { text-align: center; }
[data-site="repair"] body:not(.admin) .panel:not(.narrow) .sheet > .lede, [data-site="repair"] body:not(.admin) .panel:not(.narrow) .sheet > .intro { max-width: 800px; margin-left: auto; margin-right: auto; text-align: center; }
[data-site="repair"] body:not(.admin) .panel:not(.narrow) .title-icon { margin: 8px auto 0; }

/* A dark band's own text goes light; the white cards it holds (posts, questions, price rows) keep their ink. */
.band-dark .title, .band-dark .job-group h3, .band-dark .areas strong { color: #fff; }
.band-dark .kicker, .band-dark .areas, .band-dark .kinds { color: rgba(233, 236, 241, .74); }
.band-dark .services .lede, .band-dark .checks li, .band-dark .kind-icons li, .band-dark .empty { color: rgba(233, 236, 241, .9); }
.band-dark .checks li a { color: #fff; text-decoration-color: var(--accent-tint); }
.band-dark .checks li::before { color: var(--accent-tint); border-color: var(--accent-tint); }
.band-dark .stamp { color: #fff; border-color: rgba(255, 255, 255, .85); }
.band-dark .stamp em { color: var(--accent-tint); }
.band-dark .kind-icons img { box-sizing: border-box; width: 92px; height: 92px; padding: 16px; background: var(--paper-light); border-radius: 50%; object-fit: contain; box-shadow: 0 8px 20px rgba(0, 0, 0, .3); }
.band-dark .job-links a { background: var(--paper-light); }
.band-dark .center .btn-ghost { border-color: rgba(255, 255, 255, .75); color: #fff; }

/* The hero: text on the dark band, the two drawings on white plates. */
.home .hero { margin: 0; }
.home .hero .sheet { color: var(--space-ink); }
.home .hero.tl-photo::after { background: linear-gradient(180deg, rgba(15, 22, 32, .66), rgba(15, 22, 32, .84)); }
.hero-plate { display: inline-block; padding: 12px 16px; background: var(--paper-light); border-radius: 8px; box-shadow: 0 16px 36px rgba(0, 0, 0, .4); }
.hero-plate .hero-logo { width: min(100%, 420px); margin: 0; }
.hero-plate-art { display: block; padding: 10px 14px; }
.hero-plate-art img { display: block; width: 100%; }
.hero-title { line-height: 1.05; }
.hero-h1 { margin-top: 18px; color: #fff; font: 500 clamp(28px, 4.4vw, 46px)/1.05 var(--heading); letter-spacing: .03em; }
.home .hero .tagline { color: rgba(233, 236, 241, .9); }
.home .hero .tl-law blockquote { color: #fff; }
.home .hero .tl-law figcaption { color: rgba(233, 236, 241, .72); }
.home .hero .kinds { color: rgba(233, 236, 241, .78); margin-top: 10px; }
.home .hero .stamp { color: #fff; border-color: rgba(255, 255, 255, .85); }
.home .hero .stamp em { color: var(--accent-tint); }
.home .hero .area { color: rgba(233, 236, 241, .9); }
.home .hero .family { color: var(--accent-tint); }
.home .hero .btn-ghost { border-color: rgba(255, 255, 255, .75); color: #fff; background: transparent; }
.home .hero .btn-ghost:hover, .home .hero .btn-ghost:focus-visible { background: #fff; color: var(--space); border-color: #fff; }

/* ================= The Damage Control wordmark (the owner, 2026-11-10: the type of A with the strike of C) =================
   Live text in the heading face: "Damage" heavy, red and struck through by a bar in the surface's ink; "Control" light
   beside it. One mark for the header, the footer, the hero and (rendered once to PNG) the icons and the sharing image.
   On a dark surface the red lifts so it reads, and the bar goes white. */
.dc-mark { display: inline-flex; align-items: baseline; gap: .14em; line-height: 1; white-space: nowrap; font-family: var(--heading); font-size: var(--mark-size, 28px); text-transform: uppercase; color: var(--ink); text-decoration: none; }
.dc-damage { position: relative; font-weight: 700; letter-spacing: -.01em; color: var(--mark-red, var(--accent)); }
.dc-damage::after { content: ""; position: absolute; left: -.04em; right: -.04em; top: 52%; height: .1em; border-radius: .02em; background: var(--mark-bar, var(--ink)); transform: translateY(-50%) rotate(-2.5deg); }
.dc-control { font-weight: 300; letter-spacing: .06em; }
.tl-field .dc-mark, .band-dark .dc-mark, .footer .dc-mark { --mark-red: #ff5c73; --mark-bar: #fff; color: #fff; }
/* In the header. */
.brand.brand-mark { display: inline-flex; align-items: center; min-height: 44px; line-height: 1; --mark-size: 28px; }
.topbar-inner .brand-mark + .brand-by { align-self: center; margin: 2px 0 0 4px; }
@media (max-width: 699px) { .topbar-inner:has(.brand-by) .brand-mark + .brand-by { margin: -6px 0 0 1px; } }
/* In the footer. */
.footer-brand.footer-mark { display: inline-flex; letter-spacing: 0; --mark-size: 24px; }
/* In the hero: set large, white Control, the bar white. */
.hero .dc-mark-hero { --mark-size: clamp(42px, 7.2vw, 92px); margin-bottom: 6px; }
.hero-h1 { margin-top: 14px; }
/* The mark is a link now, so the link's underline must not draw under it. */
.brand.brand-mark, .brand.brand-mark:hover, .footer-brand.footer-mark, .footer-brand.footer-mark:hover { text-decoration: none; }
/* No band keeps a width cap of its own: the page column is the sheet inside it (the owner saw bands sit flush left on a wide screen). */
[data-site="repair"] body:not(.admin) .panel:not(.narrow) { max-width: none; width: auto; }
/* The blog's title band runs the full width like every other band; its text is centred already. */
[data-site="repair"] body:not(.admin) main.wrap > .blog-band { max-width: none; margin-left: 0; margin-right: 0; margin-top: 0; }

/* ================= Motion on the repair pages (design website-region-and-blog.md §C) =================
   What Third Law has: the hero's still drifts and scrolls a touch slower than the page, the text rises in, cards
   arrive as they scroll into view, tiles lift on hover. All of it under the reduced-motion setting. */
.home .hero { overflow: hidden; }
/* The photo is taller than the band, reaching up past its top, so the parallax (at most 28% of the band's height,
   downward) never uncovers an edge; the band clips it (RB-M7). */
.home .hero.tl-photo::before { inset: -30vh 0 0; translate: 0 var(--tl-parallax, 0px); }
@media (prefers-reduced-motion: no-preference) {
  .home .hero.tl-photo::before { animation: tl-drift 30s ease-in-out infinite alternate; }
  /* The first screen moves but never fades in (RB-M8): the heading, the buttons and the drawing are painted at once, so
     the largest paint isn't held back by an animation. */
  .home .hero .hero-brand > *, .home .hero .hero-art, .home .hero .hero-stamp { animation: dc-rise .9s cubic-bezier(.2, .7, .3, 1) both; }
  .home .hero .hero-brand > :nth-child(2) { animation-delay: .12s; }
  .home .hero .hero-brand > :nth-child(3) { animation-delay: .24s; }
  .home .hero .hero-brand > :nth-child(4) { animation-delay: .36s; }
  .home .hero .hero-art { animation-delay: .2s; }
  .home .hero .hero-stamp { animation-delay: .4s; }
  @keyframes dc-rise { from { transform: translateY(14px); } to { transform: none; } }
}
/* Arrivals, a beat apart. */
.reveal-on .cards > [data-reveal]:nth-child(2), .reveal-on .steps > [data-reveal]:nth-child(2), .reveal-on .good > [data-reveal]:nth-child(2) { transition-delay: .08s; }
.reveal-on .cards > [data-reveal]:nth-child(3), .reveal-on .steps > [data-reveal]:nth-child(3), .reveal-on .good > [data-reveal]:nth-child(3) { transition-delay: .16s; }
.reveal-on .cards > [data-reveal]:nth-child(4), .reveal-on .steps > [data-reveal]:nth-child(4), .reveal-on .good > [data-reveal]:nth-child(4) { transition-delay: .24s; }
.reveal-on .cards > [data-reveal]:nth-child(n+5) { transition-delay: .3s; }
/* Lifts. */
.card, .good li, .step, .job-links a { transition: transform .25s ease, box-shadow .25s ease; }
.card:hover, .good li:hover, .step:hover, .job-links a:hover { translate: 0 -4px; box-shadow: 0 2px 4px rgba(15, 22, 32, .06), 0 18px 40px rgba(15, 22, 32, .12); }

/* Third Law's blog (website-region-and-blog.md §B.3): the same pages in Third Law's look. Its main column has no padding
   of its own (the bands run edge to edge), so the blog's columns take the section width and gutters here, and the title
   band sits flush under the header like the other bands. */
[data-site="thirdlaw"] .blog-band { margin-top: 0; }
[data-site="thirdlaw"] .blog-layout, [data-site="thirdlaw"] .blog-more { max-width: 1180px; margin-left: auto; margin-right: auto; padding-left: var(--gutter); padding-right: var(--gutter); box-sizing: content-box; }
[data-site="thirdlaw"] .tl-blog .post-cards { margin-top: 0; }

/* Which blog, at a glance (code review RBC2-M5): one fixed colour per blog, the same in the editor's badge, the Blog
   field's dialog line, the post list and the preview ribbon. Damage Control in its red, Third Law in its night blue. */
.site-chip, .site-tag { display: inline-block; padding: 1px 10px; border-radius: 999px; border: 2px solid transparent; font-size: 13px; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; text-decoration: none; }
.site-tag { margin-right: 6px; padding: 0 8px; font-size: 12px; }
.site-chip[data-blog="repair"], .site-tag[data-blog="repair"] { background: #b30d2a; border-color: #b30d2a; color: #fff; }
.site-chip[data-blog="thirdlaw"], .site-tag[data-blog="thirdlaw"] { background: #0f1620; border-color: #0f1620; color: #fff; }
a.site-chip:hover, a.site-chip:focus-visible { text-decoration: underline; }
.publish-blog { margin: 0 0 6px; }
/* A long item in the Publish dialog's list: its bullet sits by its first line, not its last (a button's baseline is its last
   line), and the button keeps its full tap height. */
.publish-errors li > .link-btn { vertical-align: top; }

/* Photos, mounted (the owner, 2026-11-10: "border? shadow? something?"). The blog's photos sit on a white mat like a
   print laid on the bench: a hairline at the photo's edge, and a layered shadow that's crisp where the mat meets the page
   and soft beyond (no glow: the owner reads blur as washed out). The list's photos and a post's lead photo carry the site's
   accent along the top, as the sidebar's boxes do; photos and videos in the text are quieter (no accent). Captions sit on
   the mat, under the photo. */
:root {
  --mat: 10px;
  --mat-color: #fff;
  --print-shadow: 0 1px 2px rgba(15, 22, 32, .12), 0 4px 10px -2px rgba(15, 22, 32, .1), 0 18px 34px -14px rgba(15, 22, 32, .32);
  --print-shadow-up: 0 2px 4px rgba(15, 22, 32, .12), 0 10px 18px -4px rgba(15, 22, 32, .14), 0 30px 50px -18px rgba(15, 22, 32, .42);
}
@media (max-width: 619px) { :root { --mat: 6px; } }
.post-hero, .post-figure, .post-video { padding: var(--mat); background: var(--mat-color); box-shadow: var(--print-shadow); }
.post-hero { margin: 0 0 30px; border-top: 3px solid var(--accent); }
.post-hero img, .post-figure img { border: 0; border-radius: 0; background: var(--paper); box-shadow: 0 0 0 1px rgba(15, 22, 32, .1); }
.post-hero figcaption, .post-figure figcaption, .post-video figcaption { margin: 0; padding: 10px 4px 2px; }
.post-video .video-facade, .post-video .video-frame { border-radius: 0; box-shadow: none; }
@media (min-width: 720px) {
  .post-figure.align-left { margin-right: 1.8em; }
  .post-figure.align-right { margin-left: 1.8em; }
}
/* On a post, below the sidebar's width the sidebar stacks under the post, right after the post's own call to action: its
   copy of the same call would say it twice in a row, so it's left out there (both blogs). */
@media (max-width: 979px) { .post-page .blog-aside .widget-cta { display: none; } }

/* ================= The restyle's experience review (docs/design/reviews/website-third-law-code-review-6-experience.md) ================= */

/* R6X-H2: the wordmark fits the phone's top bar in both languages (it's wider than the drawn logo was). */
@media (max-width: 560px) { .brand.brand-mark { --mark-size: 19px; } }
@media (max-width: 360px) { .brand.brand-mark { --mark-size: 17px; } }

/* R6X-H1: on a Spanish phone the way back to English is a strip of its own under the top bar, ink on white, not cream on
   the cream page under the hero's edge. */
@media (max-width: 560px) {
  html[lang^="es"] .lang-mini { margin: 0; padding: 0 var(--gutter); background: var(--paper-light); border-bottom: 1px solid var(--line); }
  .lang-mini a { color: var(--ink); }
}

/* R6X-H3, R6X-M9, R6X-L1: a service page's title band says the job, the price and the button, centred like the template's
   head; on a phone it's short (no icon plate, less padding) and the long lede reads left-aligned. */
.page-band .band-inner { text-align: center; }
.page-band .crumbs { text-align: center; }
.page-band .title-row, .page-band .service-title-row { flex-direction: column; align-items: center; justify-content: center; text-align: center; }
.page-band .price-stamp, .page-band .kicker, .page-band .title-icon { margin: 14px auto 0; text-align: center; }
.page-band .stamp { margin-left: auto; margin-right: auto; }
.band-cta { margin: 22px 0 0; }
.page-lead .service-facts { max-width: 800px; margin: 18px auto 0; }
.page-lead .service-cta { text-align: center; }
@media (max-width: 699px) {
  .page-band .title-icon { display: none; }
  [data-site="repair"] .page-band, [data-site="repair"] .page-band.tl-photo { padding-top: 32px; padding-bottom: 28px; }
  [data-site="repair"] body:not(.admin) .panel.page-lead { padding-top: 32px; }
  [data-site="repair"] body:not(.admin) .panel:not(.narrow) .sheet > .lede,
  [data-site="repair"] body:not(.admin) .panel:not(.narrow) .sheet > .intro { text-align: left; font-size: 18px; }
}

/* R6X-M1: on a dark band "We fix or buy" and a job's price are a line under a word, not a box that looks like a button. */
.home .hero .stamp, .page-band .stamp, .page-band .price-stamp {
  border-color: transparent; padding-left: 0; padding-right: 0;
  background: linear-gradient(var(--accent-tint), var(--accent-tint)) no-repeat center bottom / 56px 3px;
}

/* R6X-M3: the focus ring is the light one on every dark band, not only Third Law's. */
.tl-field :focus-visible, .band-dark :focus-visible, .page-band :focus-visible { outline-color: var(--line-accent-dark); }

/* R6X-M4: off, the button is gone for the keyboard too; never on staff pages (it sat over the inbox's reply buttons). */
.btt { visibility: hidden; transition: opacity .25s, transform .25s, background-color .2s, visibility 0s linear .25s; }
.btt-on .btt { visibility: visible; transition: opacity .25s, transform .25s, background-color .2s, visibility 0s; }
body.admin .btt { display: none; }

/* R6X-M5: the wizard's tiles share a 320 px screen: the columns may shrink, and long words wrap rather than run out. */
.tile > span { overflow-wrap: anywhere; hyphens: auto; }
@media (max-width: 360px) { .tile > span { font-size: 17px; padding-left: 10px; padding-right: 30px; } }

/* R6X-M6: staff on a phone: a smaller mark, and the header scrolls away so the blog editor's bar can sit at the top. */
@media (max-width: 560px) { body.admin .brand.brand-mark { --mark-size: 17px; } }
@media (max-width: 699px) { body.admin .topbar { position: static; } body.admin .editor-bar { top: 0; } }

/* R6X-M8 (once Third Law is live): on a small phone the home's quote doesn't push the buttons out of the first screen, and
   "by Third Law" is a target a thumb can hit apart from the mark. */
@media (max-width: 420px) { .home .hero .tl-law { display: none; } }
@media (max-width: 699px) { .topbar-inner .brand-by { display: inline-flex; align-items: center; min-height: 24px; padding: 2px 8px 2px 2px; } }

/* R6X-M10, R6X-L6, R6X-L7, R6X-L8: the home's first screen on a small phone: a smaller mark that fits, the tagline in
   sentence case, less padding on top; headings that don't leave "TX" alone; buttons that don't move under a tap. */
.hero .dc-mark-hero { --mark-size: clamp(34px, 7.2vw, 92px); }
.home .hero .tagline { text-transform: none; letter-spacing: normal; font-size: clamp(17px, 1.6vw, 20px); line-height: 1.5; }
@media (max-width: 420px) { .home .hero { padding-top: 20px; } .hero .sheet { padding-top: 8px; } }
.hero-h1, .page-band .title, .post-entry-title { text-wrap: balance; }
.home .hero .hero-brand > .hero-actions { animation: none; }

/* R6X-L2: the repair blog's post doesn't touch the sticky header. */
[data-site="repair"] .post-layout { margin-top: 24px; }

/* R6X-L3: a centred heading's line is centred too (error and thanks pages). */
.sheet.center > .title { background-position: center bottom; }


/* R6X-L5: the check marks on a dark band are light. */
.band-dark .checks li::before { filter: invert(1) brightness(1.6); }

/* R6X-L9: the footer's mark and contact links are full-size targets, and the phone number reads as a link. */
.footer-brand.footer-mark { min-height: 44px; align-items: center; }
.footer-line a { display: inline-flex; align-items: center; min-height: 44px; }
.footer-line a[href^="tel:"] { text-decoration: underline; text-underline-offset: 3px; }

/* R6X-L10: Windows high contrast keeps the drawings on their white plates and the strike through "Damage". */
@media (forced-colors: active) {
  .title-icon, .hero-plate, .kind-icons img, .band-dark .kind-icons img { forced-color-adjust: none; background: #fff; }
  .dc-damage::after { forced-color-adjust: none; background: CanvasText; }
}

/* ================= The restyle's correctness review (docs/design/reviews/website-third-law-code-review-6-correctness.md) ================= */

/* R6C-L3: the lifts move with translate; the arrival keeps its own transition and gains the lift's. */
.card, .good li, .step, .job-links a, .tl-door, .tl-steps li { transition-property: transform, translate, box-shadow, opacity, border-color, background-color; }
.reveal-on [data-reveal] { transition: opacity .55s ease, transform .55s cubic-bezier(.2, .7, .3, 1), translate .25s cubic-bezier(.2, .7, .3, 1), box-shadow .25s ease; }
@media (prefers-reduced-motion: reduce) {
  .card:hover, .good li:hover, .step:hover, .job-links a:hover, .tl-door:hover, .tl-door:focus-within, .tl-steps li:hover { translate: none; }
}

/* R6C-L7: printed, a page is ink on white: no bars, buttons or photos behind text, every card shown. */
@media print {
  .topbar, .lang-mini, .offer, .btt, .skip, .footer-links, .hero-actions, .band-cta, .service-cta, .request-panel, .form-panel { display: none !important; }
  body, .tl-field, .band-dark, .page-band, .panel, .hero { background: #fff !important; color: #000 !important; box-shadow: none !important; }
  .tl-field::before, .tl-field::after, .tl-photo::before, .tl-photo::after { display: none !important; }
  .title, .hero-h1, .page-band .title, .band-dark .title, .tagline, .kicker, .checks li, .crumbs a, .crumbs span { color: #000 !important; }
  .reveal-on [data-reveal], [data-reveal] { opacity: 1 !important; transform: none !important; transition: none !important; }
  .dc-mark { color: #000 !important; --mark-red: #000; --mark-bar: #000; }
  a { color: #000; }
}

/* Third Law's hero says what kind of place it is (the owner, 2026-11-10: the name alone was too abstract, and the two
   buttons repeated the doors under them): the name, "Repair & fabrication studio" in the heading face, the tagline, then
   two plain facts with a drawn brass dot between them. */
.tl-hero .tl-kind { margin: 14px 0 0; font: 500 clamp(17px, 2.3vw, 26px)/1.2 var(--heading); letter-spacing: .22em; text-transform: uppercase; color: var(--tl-brass-light); text-wrap: balance; }
.tl-hero .tl-kind + .tl-tagline { margin-top: 14px; }
.tl-hero .tl-facts { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 6px 14px; margin: 26px 0 0; font: 400 clamp(13px, 1.4vw, 16px)/1.3 var(--hand); letter-spacing: .16em; text-transform: uppercase; color: rgba(233, 236, 241, .82); }
.tl-hero .tl-fact-next::before { content: ""; display: inline-block; width: 6px; height: 6px; margin-right: 14px; border-radius: 50%; background: var(--tl-brass); vertical-align: middle; }
@media (prefers-reduced-motion: no-preference) {
  .tl-hero-text .tl-kind { animation-delay: .1s; }
  .tl-hero-text .tl-tagline { animation-delay: .2s; }
  .tl-hero-text .tl-facts { animation-delay: .3s; }
}

/* Third Law's mark (docs/design/website-third-law-mark.md, 2026-11-11): drawn inline by _TlMark.cshtml and coloured
   here. The ring's sheen is a crisp gradient (no blur, no glow); each needle is split into a lit and a shaded face. */
.tl-mark { display: block; flex: none; }
.tl-mark .tl-ring { fill: none; }
.tl-mark-dark .tl-stop-0 { stop-color: #f1f3f6; } .tl-mark-dark .tl-stop-1 { stop-color: var(--tl-brass-light); } .tl-mark-dark .tl-stop-2 { stop-color: var(--tl-brass); }
.tl-mark-dark .tl-face-l { fill: #fff; } .tl-mark-dark .tl-face-r { fill: var(--tl-brass-light); } .tl-mark-dark .tl-flank-l { fill: var(--tl-brass-light); } .tl-mark-dark .tl-flank-r { fill: var(--tl-brass); }
.tl-mark-light .tl-stop-0 { stop-color: #6b7280; } .tl-mark-light .tl-stop-1 { stop-color: var(--tl-brass); } .tl-mark-light .tl-stop-2 { stop-color: var(--tl-brass-ink); }
.tl-mark-light .tl-face-l { fill: var(--ink); } .tl-mark-light .tl-face-r { fill: var(--tl-brass-ink); } .tl-mark-light .tl-flank-l { fill: var(--ink-soft); } .tl-mark-light .tl-flank-r { fill: var(--tl-brass); }
/* The hero: the mark centred above the name, sized per width so the first door stays on a small phone's first screen (TLM-H2). */
.tl-hero-mark { display: flex; justify-content: center; margin: 0 0 14px; }
.tl-hero-mark .tl-mark { width: 136px; height: 136px; }
@media (max-width: 599px) { .tl-hero-mark { margin-bottom: 8px; } .tl-hero-mark .tl-mark { width: 80px; height: 80px; } }
@media (max-width: 360px) { .tl-hero-mark { margin-bottom: 6px; } .tl-hero-mark .tl-mark { width: 64px; height: 64px; } }
@media (max-width: 719px) { .tl-hero { padding-top: 40px; } }
@media (max-width: 360px) { .tl-hero { padding-top: 32px; } }
/* The header: the mark beside the name at every width (§3; TLM-M2); the link at least 44px each way (TLM-L5). Across the
   whole phone range (to 719px, the site's divide) the menu sits under the lockup as one full-width line, two rows
   whatever the language and whether About is open; from 720px everything shares one row. Breakpoints set at the
   widths that were measured, with About closed, left ragged two- and three-line menus a pixel either side of them
   (code review TLMC-H1). On phones the lockup tightens; under 480px the Spanish menu's long item shows its short
   form, and under 400px About leaves the menu for the footer, so the line never wraps. */
[data-site="thirdlaw"] .tl-brand { gap: 9px; padding: 0 6px; }
[data-site="thirdlaw"] .tl-brand .tl-mark { width: 35.5px; height: 42px; }
@media (max-width: 719px) {
  [data-site="thirdlaw"] .topbar-inner { display: flex; flex-wrap: wrap; }
  [data-site="thirdlaw"] .nav { flex: 1 1 100%; justify-content: flex-end; }
}
@media (max-width: 480px) {
  [data-site="thirdlaw"] .tl-brand { gap: 6px; padding: 0 4px; font-size: 16px; letter-spacing: .1em; }
  [data-site="thirdlaw"] .tl-brand .tl-mark { width: 25.3px; height: 30px; }
  [data-site="thirdlaw"] .nav a { padding: 4px; }
}
@media (max-width: 399px) { [data-site="thirdlaw"] .nav a.nav-about { display: none; } }
/* The Spanish pill ("EN") stays in Third Law's header at every width: the site-wide rule hides it on narrow Spanish
   pages in favour of the strip under the bar, which Third Law doesn't show (TLMC-L6). */
html[lang^="es"][data-site="thirdlaw"] .nav a.lang-switch { display: inline-flex; }
/* The hero band's tint starts deeper than the other dark bands' (.4, not .1): a flat darkening, no glow, so the mark's
   lit strokes keep 4:1 or better against every still, measured under the strokes themselves (TLM-M3). */
.tl-hero.tl-field::after { background: radial-gradient(ellipse 55% 70% at 78% 18%, color-mix(in srgb, var(--accent) 30%, transparent), transparent 70%), linear-gradient(180deg, rgba(15, 22, 32, .4), rgba(15, 22, 32, .7)); }
/* The Spanish menu's long item shows its short form on phones (TLM-M1): never three rows. */
.nav a .nav-short { display: none; }
@media (max-width: 479px) { .nav a .nav-short { display: inline; } .nav a .nav-long { display: none; } }
/* Printed, the mark is ink on white like everything else (TLM-L7). */
@media print { .tl-mark .tl-ring { stroke: #000 !important; } .tl-mark polygon { fill: #000 !important; } }

/* ================= Third Law's blog in the dark (docs/design/website-third-law-blog-dark.md, 2026-11-12; charcoal since its evening addendum) ================= */
/* The template's dark blog as a token scope: every rule the blog builds from the shared tokens flips at once, nothing is
   left ink-on-night (TLB-M2). The ground is the template's own charcoal (its bg-dark4; the owner: "go charcoal"), the
   panels its bg-dark1, neutral greys for the text, and brass the one accent (OD-7). The header stays light above it,
   as above the front page's hero. The staff preview's sheet takes the same scope. */
[data-site="thirdlaw"] .blog-page main.wrap, [data-site="thirdlaw"] .sheet.post-sheet {
  --paper: #212121; --paper-light: #313131; --ink: #e4e4e4; --ink-soft: #a3a3a3; --line: #343434; --line-strong: #454545;
  --accent-ink: #d9b57c; --mat: 0px; --mat-color: transparent; --print-shadow: none; --print-shadow-up: none; --card-shadow: none;
  color: var(--ink); color-scheme: dark;
}
[data-site="thirdlaw"] body.blog-page, [data-site="thirdlaw"] .blog-page main.wrap { background: #212121; }
[data-site="thirdlaw"] .sheet.post-sheet { background: #212121; border: 0; box-shadow: none; }
/* Headings white, ledes a shade under, meta the grey of the table (all 4.5:1 or better on the ground and on a panel). */
[data-site="thirdlaw"] .blog-page .post-title, [data-site="thirdlaw"] .blog-page .post-entry-title, [data-site="thirdlaw"] .blog-page .widget-title,
[data-site="thirdlaw"] .blog-page .post-card-title, [data-site="thirdlaw"] .blog-page .post-body h2, [data-site="thirdlaw"] .blog-page .post-body h3,
[data-site="thirdlaw"] .blog-page .blog-more .title, [data-site="thirdlaw"] .blog-page .blog-band .blog-title,
[data-site="thirdlaw"] .post-sheet .post-title, [data-site="thirdlaw"] .post-sheet .post-body h2, [data-site="thirdlaw"] .post-sheet .post-body h3 { color: #fff; }
[data-site="thirdlaw"] .blog-page .post-lede, [data-site="thirdlaw"] .blog-page .post-entry-summary, [data-site="thirdlaw"] .blog-page .post-card-summary,
[data-site="thirdlaw"] .blog-page .blog-band .blog-kicker, [data-site="thirdlaw"] .post-sheet .post-lede { color: #cacaca; }
[data-site="thirdlaw"] .blog-page .blog-foot a, [data-site="thirdlaw"] .blog-page .feed-link, [data-site="thirdlaw"] .blog-page .post-translation a { color: #d9b57c; }
/* The category stamp and the chips (TLB-M1): brass lines, light-brass text; the chosen chip and a hovered stamp fill brass
   with charcoal text. The chips' edge is the one hairline that must be seen: under 980px they are the category navigation (TLC-M3). */
[data-site="thirdlaw"] .blog-page .tag, [data-site="thirdlaw"] .post-sheet .tag { background: transparent; border-color: var(--tl-brass); color: var(--tl-brass-light); }
[data-site="thirdlaw"] .blog-page a.tag:hover { background: var(--tl-brass); border-color: var(--tl-brass); color: #212121; }
[data-site="thirdlaw"] .blog-page .chips a { background: transparent; border-color: #6b6b6b; color: #e4e4e4; }
[data-site="thirdlaw"] .blog-page .chips a span { color: #a3a3a3; }
[data-site="thirdlaw"] .blog-page .chips a[aria-current=page] { background: var(--tl-brass); border-color: var(--tl-brass); color: #212121; }
[data-site="thirdlaw"] .blog-page .chips a[aria-current=page] span { color: #212121; }
[data-site="thirdlaw"] .blog-page .post-body mark, [data-site="thirdlaw"] .post-sheet .post-body mark { background: var(--tl-brass-light); color: #212121; }
/* Buttons on the dark blog take the brass-with-dark-text rule the hero's buttons have, white on hover (TLB-H4); the pager's ghosts too. */
[data-site="thirdlaw"] .blog-page .btn, [data-site="thirdlaw"] .blog-page .btn-ghost { background: var(--tl-brass); border-color: var(--tl-brass); color: #212121; }
[data-site="thirdlaw"] .blog-page .btn:hover, [data-site="thirdlaw"] .blog-page .btn-ghost:hover, [data-site="thirdlaw"] .blog-page .btn:focus-visible, [data-site="thirdlaw"] .blog-page .btn-ghost:focus-visible { background: #fff; border-color: #fff; color: #212121; }
/* The light focus ring the dark bands use (TLB-H3). */
[data-site="thirdlaw"] .blog-page :focus-visible, [data-site="thirdlaw"] .blog-page .btn:focus-visible, [data-site="thirdlaw"] .post-sheet :focus-visible { outline-color: var(--line-accent-dark); }
/* Photos bare, as the template's (the addendum; it reverses the morning's hairline, TLB-M3/H3, by the owner's word: "a box in
   a box"): no mat, no shadow, no hairline, no accent top, on the hero, the figures, the videos and the list's photos; the
   loading ground is the charcoal, a video's box a step darker. */
[data-site="thirdlaw"] .blog-page .post-hero, [data-site="thirdlaw"] .blog-page .post-figure, [data-site="thirdlaw"] .blog-page .post-video,
[data-site="thirdlaw"] .post-sheet .post-hero, [data-site="thirdlaw"] .post-sheet .post-figure, [data-site="thirdlaw"] .post-sheet .post-video { padding: 0; background: transparent; box-shadow: none; border-top: 0; }
[data-site="thirdlaw"] .blog-page .post-entry-photo { padding: 0; background: transparent; box-shadow: none; border-top: 0; }
[data-site="thirdlaw"] .blog-page .post-hero img, [data-site="thirdlaw"] .blog-page .post-figure img, [data-site="thirdlaw"] .post-sheet .post-hero img, [data-site="thirdlaw"] .post-sheet .post-figure img { background: #212121; box-shadow: none; }
[data-site="thirdlaw"] .blog-page .video-facade, [data-site="thirdlaw"] .blog-page .video-frame, [data-site="thirdlaw"] .post-sheet .video-facade, [data-site="thirdlaw"] .post-sheet .video-frame { background-color: #1a1a1a; box-shadow: none; }
[data-site="thirdlaw"] .blog-page .post-entry-frame, [data-site="thirdlaw"] .blog-page .post-card-photo { background-color: #1a1a1a; }
[data-site="thirdlaw"] .blog-page .post-hero figcaption, [data-site="thirdlaw"] .blog-page .post-figure figcaption, [data-site="thirdlaw"] .blog-page .post-video figcaption,
[data-site="thirdlaw"] .post-sheet .post-hero figcaption, [data-site="thirdlaw"] .post-sheet .post-figure figcaption, [data-site="thirdlaw"] .post-sheet .post-video figcaption { padding: 12px 0 0; font: italic 15px/1.4 var(--plain); }
[data-site="thirdlaw"] .blog-page .post-entry-link:hover .post-entry-photo, [data-site="thirdlaw"] .blog-page .post-entry-link:focus-visible .post-entry-photo { box-shadow: none; } /* the lift stays (TLB-L6) */
/* The stamp on the hero (the addendum, TLC-H1): the list's date and author over the photo's corner, on a solid charcoal plate,
   so the contrast is the plate's and never the photo's (16:1 on a white subject as on a dark one); the list's stamp takes
   the same plate, and its corner gradient and inset hairline go. The stamp lets taps through to the zoom link under it, and
   a long author or a Spanish date wraps on the plate short of the left edge (TLC-L1). The frame is the positioning box, so
   a caption under the photo is never under the stamp. */
.post-hero-frame { position: relative; }
.post-hero-stamp, [data-site="thirdlaw"] .blog-page .post-entry-stamp {
  position: absolute; right: 16px; bottom: 14px; z-index: 1; display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 4px 14px;
  max-width: calc(100% - 32px); margin: 0; padding: 6px 10px; background: #212121; color: #fff;
  font: 500 14px/1.3 var(--heading); letter-spacing: .1em; text-transform: uppercase; text-align: right; pointer-events: none;
}
[data-site="thirdlaw"] .blog-page .post-entry-frame::after { display: none; }
@media (max-width: 619px) { .post-hero-stamp, [data-site="thirdlaw"] .blog-page .post-entry-stamp { right: 10px; bottom: 10px; max-width: calc(100% - 20px); padding: 5px 8px; font-size: 12px; } }
/* The crumb stays where it is the one-tap way back (TLC-H3): below 1000px, in the quiet capitals of the page heads; from
   1000px the header's Blog link shows and the crumb goes. */
[data-site="thirdlaw"] .post-layout .crumbs { margin: 0 0 18px; font: 400 13px/1.4 var(--heading); letter-spacing: .12em; text-transform: uppercase; }
[data-site="thirdlaw"] .post-layout .crumbs a { color: #a3a3a3; }
@media (min-width: 1000px) { [data-site="thirdlaw"] .post-layout .crumbs { display: none; } }
/* The head and the body, the template's: a little more air above the photo, the title tight under it (40px from 1000px, 30px
   on a phone; TLC-L5), the category and the place on one line, then a sans lede a size above a sans body with lining
   figures in a column of about 73 characters (TLC-M5), the template's heading sizes, and no serif anywhere on the page. */
[data-site="thirdlaw"] .post-layout { margin-top: 40px; } /* the one rule for it (TLCC-L2) */
[data-site="thirdlaw"] .blog-page .post-hero, [data-site="thirdlaw"] .post-sheet .post-hero { margin-bottom: 26px; }
[data-site="thirdlaw"] .blog-page .post-head, [data-site="thirdlaw"] .post-sheet .post-head { margin-top: 0; }
[data-site="thirdlaw"] .blog-page .post-kicker, [data-site="thirdlaw"] .post-sheet .post-kicker { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 12px; margin: 0 0 10px; }
.post-place { font: 500 13px/1.2 var(--heading); letter-spacing: .08em; text-transform: uppercase; color: var(--ink-soft); }
[data-site="thirdlaw"] .blog-page .post-title, [data-site="thirdlaw"] .post-sheet .post-title { margin-bottom: 12px; font-size: clamp(30px, 4vw, 40px); line-height: 1.12; }
[data-site="thirdlaw"] .blog-page .post-lede, [data-site="thirdlaw"] .post-sheet .post-lede { margin-bottom: 0; font: 400 19px/1.6 var(--plain); font-variant-numeric: lining-nums; }
[data-site="thirdlaw"] .blog-page .post-lede + .byline, [data-site="thirdlaw"] .post-sheet .post-lede + .byline { margin-top: 14px; } /* the no-hero preview shape keeps its byline off the lede (TLCC-L8) */
[data-site="thirdlaw"] .blog-page .post-body, [data-site="thirdlaw"] .post-sheet .post-body { max-width: 640px; font: 400 17px/1.8 var(--plain); font-variant-numeric: lining-nums; }
[data-site="thirdlaw"] .blog-page .post-body h2, [data-site="thirdlaw"] .post-sheet .post-body h2 { margin: 2.2em 0 .6em; font-size: 24px; }
[data-site="thirdlaw"] .blog-page .post-body h3, [data-site="thirdlaw"] .post-sheet .post-body h3 { margin: 2.2em 0 .5em; font-size: 20px; }
[data-site="thirdlaw"] .blog-page .post-quote blockquote, [data-site="thirdlaw"] .post-sheet .post-quote blockquote { font: italic 400 21px/1.5 var(--plain); }
[data-site="thirdlaw"] .blog-page .video-title, [data-site="thirdlaw"] .post-sheet .video-title { font-family: var(--plain); }
/* Inline code and the back-to-top button were night-on-night (TLBC-L4, L5). */
[data-site="thirdlaw"] .blog-page .post-body code, [data-site="thirdlaw"] .post-sheet .post-body code { background: rgba(255, 255, 255, .08); }
[data-site="thirdlaw"] .blog-page .btt { background: #313131; border: 1px solid #454545; }
/* Plain panels, as the template's (the addendum; it reverses the morning's edges, TLB-M6, by the owner's word): widgets, the
   call to action, the photo cards, the empty state and older/newer on the panel ground with no edge and no accent line;
   the widgets' separators a shade up, decoration only. Older/newer keep their hierarchy (a small grey label, the title
   white) and lighten on hover as the template's panels do (TLC-M6). */
[data-site="thirdlaw"] .blog-page .widget, [data-site="thirdlaw"] .blog-page .post-cta, [data-site="thirdlaw"] .blog-page .blog-empty { border: 0; }
[data-site="thirdlaw"] .blog-page .widget { padding: 22px 24px 24px; }
[data-site="thirdlaw"] .blog-page .widget-title { font-size: 14px; letter-spacing: .14em; }
[data-site="thirdlaw"] .blog-page .widget-list a { border-bottom-color: #454545; }
[data-site="thirdlaw"] .blog-page .post-card-link, [data-site="thirdlaw"] .blog-page .post-card-link:hover { border: 0; box-shadow: none; }
[data-site="thirdlaw"] .blog-page .post-card-photo { border-bottom: 0; }
/* The list: the band a step darker than the page under the field drawing, with a hairline foot, so it doesn't dissolve into
   the page (TLB-M7); the entries stay unboxed (OD-5), a hairline between them. */
[data-site="thirdlaw"] .blog-page .blog-band { position: relative; isolation: isolate; margin: 0 0 32px; background: #1a1a1a; border-bottom: 1px solid #343434; }
[data-site="thirdlaw"] .blog-page .blog-band::before { content: ""; position: absolute; inset: 0; z-index: -1; background: url(/img/field.svg) center / 1400px auto repeat; opacity: .6; }
[data-site="thirdlaw"] .blog-page .post-list { gap: 40px; }
[data-site="thirdlaw"] .blog-page .post-entry + .post-entry { padding-top: 40px; border-top: 1px solid #343434; }
/* Older / newer under the call to action (TLB-H2): two panels, a small label and the title; one panel sits alone on its side. */
.post-nav { display: grid; gap: 14px; max-width: 760px; margin: 28px 0 0; }
@media (min-width: 620px) { .post-nav { grid-template-columns: 1fr 1fr; } .post-nav-newer:only-child { grid-column: 2; } }
.post-nav-link { display: grid; gap: 8px; padding: 16px 18px; background: var(--paper-light); border: 1px solid var(--line); color: var(--ink); text-decoration: none; transition: background .2s; } /* token-built, so the repair blog could take it light (TLBC-L2) */
.post-nav-newer { text-align: right; }
.post-nav-label { font: 500 11px/1 var(--heading); letter-spacing: .18em; text-transform: uppercase; color: var(--ink-soft); }
.post-nav-title { font: 500 18px/1.25 var(--heading); letter-spacing: .02em; text-transform: uppercase; }
[data-site="thirdlaw"] .blog-page .post-nav-link { border: 0; }
[data-site="thirdlaw"] .blog-page .post-nav-link:hover, [data-site="thirdlaw"] .blog-page .post-nav-link:focus-visible { background: #454545; }
[data-site="thirdlaw"] .blog-page .post-nav-link:hover .post-nav-label, [data-site="thirdlaw"] .blog-page .post-nav-link:focus-visible .post-nav-label { color: #cacaca; } /* 5.9:1 on the lit panel; the grey would be 3.8 (TLCC-M1) */
[data-site="thirdlaw"] .blog-page .post-nav-title { color: #fff; }
/* On a phone the sidebar follows the post; with nothing but the hidden call to action left in it, it is left out (TLB-L2). */
@media (max-width: 979px) { [data-site="thirdlaw"] .post-page .blog-aside:not(:has(.widget:not(.widget-cta))) { display: none; } }
/* Printed, the blog is ink on white on both blogs, the band included, which printed night blue before (TLB-M5). The
   text rules are named, not "everything": a button, a stamp over a photo or a card's photo box keeps a ground of its
   own, so those get a white ground and a hairline instead (code review TLBC-M1). The hero's stamp prints static, under
   the photo (TLC-M7). */
@media print {
  .blog-band, .widget, .post-cta, .post-nav-link, .post-card-link, .post-entry, .sheet.post-sheet, .blog-page main.wrap { background: #fff !important; color: #000 !important; border-color: #000 !important; }
  .blog-band::before, .post-entry-frame::after, .post-card-photo::after, .video-facade::after { display: none !important; }
  .blog-page .post-title, .blog-page .post-lede, .blog-page .post-body, .blog-page .post-body *, .blog-page .byline, .blog-page .byline strong, .blog-page .crumbs a, .blog-page .post-place,
  .blog-page .post-entry-title, .blog-page .post-entry-summary, .blog-page .post-entry-meta, .blog-page .post-entry-more, .blog-page .widget-title, .blog-page .widget-list a, .blog-page .widget-list a span, .blog-page .widget-posts a, .blog-page .widget-posts time,
  .blog-page .post-card-title, .blog-page .post-card-summary, .blog-page .post-card-meta, .blog-page .post-nav-label, .blog-page .post-nav-title, .blog-page .blog-kicker, .blog-page .blog-title, .blog-page .blog-foot, .blog-page .blog-foot a, .blog-page .feed-link,
  .blog-page .post-translation a, .blog-page .post-cta-text, .blog-page .widget-cta p, .blog-page .tag, .blog-page .chips a, .blog-page .chips a span, .blog-page .pager-count, .blog-page figcaption,
  .post-sheet .post-title, .post-sheet .post-lede, .post-sheet .post-body, .post-sheet .post-body *, .post-sheet .byline, .post-sheet .tag, .post-sheet .post-place, .post-sheet figcaption { color: #000 !important; }
  .blog-page .btn, .blog-page .btn-ghost { background: #fff !important; border-color: #000 !important; color: #000 !important; }
  .post-entry-frame, .post-card-photo, .video-facade { background: #fff !important; background-image: none !important; border: 1px solid #000 !important; }
  .post-entry-stamp, .post-hero-stamp, .video-title { color: #000 !important; background: #fff !important; padding: 2px 6px !important; }
  .post-hero-stamp { position: static !important; max-width: none !important; justify-content: flex-start !important; text-align: left !important; }
  .post-hero, .post-figure, .post-video, .post-entry-photo, .post-hero img, .post-figure img, .video-facade { outline: 0 !important; }
  .blog-page .tag, .blog-page .chips a { background: #fff !important; border-color: #000 !important; }
}