/* Hallmark · pre-emit critique: P5 H4 E4 S5 R4 V5 · base layer (type, controls, chrome). Tokens: css/tokens.css */

*, *::before, *::after { box-sizing: border-box; }
[hidden] { display: none !important; }   /* an author display (.btn, .quote__done) must never beat the attribute */
html, body { overflow-x: clip; }
html { -webkit-text-size-adjust: 100%; scroll-padding-top: 6rem; }
@media (prefers-reduced-motion: no-preference) { html { scroll-behavior: smooth; } }
body {
  margin: 0; background: var(--color-paper); color: var(--color-ink);
  font: 400 var(--text-base)/1.6 var(--font-body); font-kerning: normal;
  -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility;
}
img, svg, video { display: block; max-width: 100%; }
img { height: auto; }
a { color: var(--color-accent); text-decoration-thickness: 1px; text-underline-offset: 0.2em; }
a:hover { color: var(--color-accent-hover); }
p { margin: 0 0 var(--space-sm); }
ul, ol { margin: 0; padding: 0; }
button, input, textarea, select { font: inherit; color: inherit; }
:focus-visible { outline: 3px solid var(--color-focus); outline-offset: 3px; border-radius: 2px; }
::selection { background: var(--color-teal); color: var(--color-ink); }

h1, h2, h3, h4 {
  font-family: var(--font-display); font-weight: 800; font-style: normal; line-height: 0.95;
  letter-spacing: 0; margin: 0 0 var(--space-sm); color: var(--color-ink);
  overflow-wrap: anywhere; min-width: 0; text-wrap: balance;
}
h1 { font-size: var(--text-display); }
h2 { font-size: var(--text-4xl); }
h3 { font-size: var(--text-2xl); line-height: 1; }
h4 { font-size: var(--text-xl); line-height: 1.05; }
.lede { font-size: var(--text-lg); line-height: 1.5; color: var(--color-ink-2); max-width: 44ch; }
.mono { font-family: var(--font-mono); font-size: var(--text-xs); letter-spacing: 0.04em; text-transform: uppercase; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.skip { position: absolute; left: var(--space-sm); top: -4rem; z-index: 100; background: var(--color-ink); color: var(--color-paper); padding: var(--space-2xs) var(--space-sm); border-radius: var(--radius-ctl); }
.skip:focus { top: var(--space-sm); }

.wrap { width: min(100% - 2 * var(--gutter), var(--page)); margin-inline: auto; }
.section { padding-block: var(--space-3xl); position: relative; }
.section--tight { padding-block: var(--space-2xl); }
.section--dark { background: var(--color-dark); color: var(--color-on-dark); }
.section--dark h2, .section--dark h3, .section--dark h4 { color: var(--color-on-dark); }
.section--dark .lede { color: var(--color-on-dark-2); }
.section--dark a:not(.btn) { color: var(--color-bright); }
.section--paper2 { background: var(--color-paper-2); }
.head { display: grid; gap: var(--space-sm); margin-bottom: var(--space-xl); max-width: 52rem; }
.head h2 { margin: 0; }
.head p { margin: 0; }

/* the 2x2 mark, as a marker */
.mark { display: inline-grid; grid-template-columns: 1fr 1fr; gap: 2px; width: 1.1em; height: 1.1em; flex: none; vertical-align: -0.12em; }
.mark i { border-radius: 1px; background: var(--color-slate); }
.mark i:nth-child(1), .mark i:nth-child(4) { background: var(--color-teal); }

/* buttons: 8 states. hover lift, active press, focus ring instant, disabled, loading via [aria-busy] */
.btn {
  --b-bg: var(--color-accent); --b-fg: var(--color-accent-ink); --b-bd: var(--color-accent);
  display: inline-flex; align-items: center; justify-content: center; gap: var(--space-2xs);
  min-height: 3rem; padding: 0 var(--space-md); border: 1.5px solid var(--b-bd); border-radius: var(--radius-ctl);
  background: var(--b-bg); color: var(--b-fg); font-weight: 600; font-size: var(--text-base); line-height: 1;
  text-decoration: none; white-space: nowrap; cursor: pointer;
  transition: transform var(--dur-fast) var(--ease-out), background-color var(--dur-fast) var(--ease-out), box-shadow var(--dur-med) var(--ease-out);
}
.btn:hover { color: var(--b-fg); transform: translateY(-2px); box-shadow: 0 10px 22px -12px var(--color-dark); }
.btn:active { transform: translateY(0); box-shadow: none; }
.btn[disabled], .btn[aria-disabled="true"] { opacity: 0.45; cursor: not-allowed; transform: none; box-shadow: none; }
.btn[aria-busy="true"] { cursor: progress; }
.btn[aria-busy="true"]::after { content: ""; width: 1em; height: 1em; border: 2px solid currentColor; border-right-color: transparent; border-radius: 50%; animation: spin 700ms linear infinite; }
@keyframes spin { to { transform: rotate(1turn); } }
.btn--solid:hover { --b-bg: var(--color-accent-hover); --b-bd: var(--color-accent-hover); }
.btn--ghost { --b-bg: transparent; --b-fg: var(--color-ink); --b-bd: var(--color-rule); }
.btn--ghost:hover { --b-bd: var(--color-ink); }
.btn--bright { --b-bg: var(--color-teal); --b-fg: var(--color-dark); --b-bd: var(--color-teal); }
.btn--bright:hover { --b-bg: var(--color-bright); --b-bd: var(--color-bright); }
.btn--ghost-dark { --b-bg: transparent; --b-fg: var(--color-on-dark); --b-bd: color-mix(in oklch, var(--color-on-dark) 35%, transparent); }
.btn--ghost-dark:hover { --b-bd: var(--color-on-dark); }
.btn--sm { min-height: 2.5rem; padding: 0 var(--space-sm); font-size: var(--text-sm); }
.btn svg { width: 1.1em; height: 1.1em; }
.link-arrow { display: inline-flex; align-items: center; gap: var(--space-2xs); font-weight: 600; text-decoration: none; white-space: nowrap; }
.link-arrow svg { width: 1.1em; height: 1.1em; transition: transform var(--dur-fast) var(--ease-out); }
.link-arrow:hover svg { transform: translateX(3px); }

/* a tile: the unit of every grid; the grid gap is the grout */
.tile { background: var(--color-paper); border-radius: var(--radius-tile); box-shadow: var(--shadow-tile); position: relative; }
.section--paper2 .tile { background: var(--color-paper); }
.section--dark .tile { background: var(--color-dark-2); box-shadow: 0 1px 0 color-mix(in oklch, var(--color-on-dark) 8%, transparent) inset; }
.grout { background: var(--color-grout); padding: var(--grout); gap: var(--grout); border-radius: calc(var(--radius-tile) + 2px); }
.section--dark .grout { background: var(--color-dark-grout); }

.chip {
  display: inline-flex; align-items: center; gap: var(--space-2xs); min-height: 2.5rem; padding: 0 var(--space-sm);
  border: 1.5px solid var(--color-rule); border-radius: 999px; background: transparent; color: var(--color-ink);
  font-weight: 600; font-size: var(--text-sm); white-space: nowrap; cursor: pointer;
  transition: background-color var(--dur-fast) var(--ease-out), border-color var(--dur-fast) var(--ease-out);
}
.chip span { color: var(--color-muted); font-weight: 500; }
.chip:hover { border-color: var(--color-ink); }
.chip[aria-pressed="true"] { background: var(--color-ink); border-color: var(--color-ink); color: var(--color-paper); }
.chip[aria-pressed="true"] span { color: var(--color-on-dark-2); }

.stars { display: inline-flex; gap: 2px; }
.stars svg { width: 1rem; height: 1rem; fill: var(--color-star); }

/* ---------- top bar ---------- */
.bar { position: sticky; top: 0; z-index: 50; padding: var(--space-xs) var(--gutter) 0; pointer-events: none; }
.bar__inner {
  pointer-events: auto; max-width: var(--page); margin: 0 auto; display: flex; align-items: center; gap: var(--space-md);
  min-height: 4rem; padding: var(--space-2xs) var(--space-2xs) var(--space-2xs) var(--space-sm);
  background: var(--color-paper); border: 1px solid var(--color-rule); border-radius: 10px;
  transition: box-shadow var(--dur-med) var(--ease-out), transform var(--dur-med) var(--ease-out);
}
.bar.is-scrolled .bar__inner { box-shadow: 0 14px 30px -18px var(--color-dark); }
.bar__logo { display: grid; flex: none; }
.bar__logo img { grid-area: 1 / 1; width: clamp(8.5rem, 6.5rem + 5vw, 11.5rem); height: auto; }
.bar__logo-dark { opacity: 0; }
.bar__nav { display: none; }
.bar__nav ul { list-style: none; display: flex; gap: var(--space-2xs); }
.bar__nav a { display: block; padding: var(--space-2xs) var(--space-xs); border-radius: var(--radius-ctl); color: var(--color-ink); font-weight: 600; text-decoration: none; white-space: nowrap; }
.bar__nav a:hover { background: var(--color-paper-2); }
.bar__nav a[aria-current="page"] { color: var(--color-accent); box-shadow: inset 0 -2px 0 var(--color-teal); border-radius: 0; }
.bar__menu-cta { display: none; }
.bar__actions { margin-left: auto; display: flex; align-items: center; gap: var(--space-2xs); }
.bar__phone { display: none; align-items: center; gap: var(--space-2xs); padding: 0 var(--space-xs); color: var(--color-ink); font-weight: 700; text-decoration: none; white-space: nowrap; font-variant-numeric: tabular-nums; }
.bar__phone:hover { color: var(--color-accent); }
.bar__actions .btn--sm { display: none; }
.bar__toggle { display: grid; place-items: center; width: 3rem; height: 3rem; border: 0; border-radius: var(--radius-ctl); background: var(--color-paper-2); cursor: pointer; }
.bar__toggle:hover { background: var(--color-paper-3); }
.bar__toggle-box { display: grid; grid-template-columns: 1fr 1fr; gap: 3px; width: 20px; height: 20px; transition: transform var(--dur-med) var(--ease-out); }
.bar__toggle-box span { background: var(--color-ink); border-radius: 1px; }
.bar__toggle-box span:nth-child(1), .bar__toggle-box span:nth-child(4) { background: var(--color-accent); }
.bar__toggle[aria-expanded="true"] .bar__toggle-box { transform: rotate(45deg); }

@media (max-width: 63.99rem) {
  .menu-open { overflow: hidden; }
  .bar__nav {
    position: fixed; inset: 0; z-index: -1; display: flex; flex-direction: column; justify-content: center; gap: var(--space-xl);
    padding: 7rem var(--gutter) calc(var(--space-xl) + env(safe-area-inset-bottom, 0px)); background: var(--color-dark);
    visibility: hidden; opacity: 0; transition: opacity var(--dur-med) var(--ease-out), visibility 0s linear var(--dur-med);
  }
  .menu-open .bar__nav { visibility: visible; opacity: 1; transition: opacity var(--dur-med) var(--ease-out); pointer-events: auto; }
  .bar__nav ul { flex-direction: column; gap: 0; }
  .bar__nav a { font-family: var(--font-display); font-weight: 800; font-size: var(--text-3xl); line-height: 1.1; color: var(--color-on-dark); padding: var(--space-3xs) 0; }
  .bar__nav a:hover { background: none; color: var(--color-bright); }
  .bar__nav a[aria-current="page"] { color: var(--color-bright); box-shadow: none; }
  .bar__menu-cta { display: flex; flex-wrap: wrap; gap: var(--space-xs); }
  .bar__menu-cta .btn--ghost { --b-fg: var(--color-on-dark); --b-bd: color-mix(in oklch, var(--color-on-dark) 35%, transparent); }
  .menu-open .bar__inner { background: var(--color-dark); border-color: var(--color-dark-2); }
  .menu-open .bar__logo-light { opacity: 0; }
  .menu-open .bar__logo-dark { opacity: 1; }
  .menu-open .bar__toggle { background: var(--color-dark-2); }
  .menu-open .bar__toggle-box span:nth-child(2), .menu-open .bar__toggle-box span:nth-child(3) { background: var(--color-on-dark); }
}
@media (min-width: 40rem) { .bar__actions .btn--sm { display: inline-flex; } }
@media (min-width: 64rem) {
  .bar__nav { display: block; margin-inline: auto; }
  .bar__toggle { display: none; }
  .bar__phone { display: inline-flex; }
}
@media (min-width: 64rem) and (max-width: 75rem) { .bar__phone { display: none; } }
.bar__phone-icon svg { width: 1.1rem; height: 1.1rem; }

/* ---------- mobile dock ---------- */
.dock {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 40; display: grid; grid-template-columns: 1fr 1fr 1.9fr; gap: 1px;
  background: var(--color-dark-grout); padding-bottom: env(safe-area-inset-bottom, 0px);
  transform: translateY(0); transition: transform var(--dur-med) var(--ease-out);
}
.dock.is-hidden { transform: translateY(110%); }
.dock__item {
  display: flex; align-items: center; justify-content: center; gap: var(--space-2xs); min-height: 3.5rem;
  background: var(--color-dark); color: var(--color-on-dark); font-weight: 600; text-decoration: none; white-space: nowrap;
}
.dock__item:hover { color: var(--color-bright); }
.dock__item svg { width: 1.2rem; height: 1.2rem; flex-shrink: 0; }
@media (max-width: 25rem) { .dock__item--main svg { display: none; } }
.dock__item--main { background: var(--color-teal); color: var(--color-dark); }
.dock__item--main:hover { color: var(--color-dark); background: var(--color-bright); }
body { padding-bottom: calc(3.5rem + env(safe-area-inset-bottom, 0px)); }
@media (min-width: 64rem) { .dock { display: none; } body { padding-bottom: 0; } }

/* ---------- footer (Ft5 statement) ---------- */
.foot { background: var(--color-dark); color: var(--color-on-dark); position: relative; overflow: hidden; }
.foot::before {
  content: ""; position: absolute; inset: 0; opacity: 0.5; pointer-events: none;
  background-image: linear-gradient(var(--color-dark-grout) 2px, transparent 2px), linear-gradient(90deg, var(--color-dark-grout) 2px, transparent 2px);
  background-size: 6rem 6rem; mask-image: linear-gradient(to bottom, black, transparent 70%);
}
.foot__statement { position: relative; width: min(100% - 2 * var(--gutter), var(--page)); margin-inline: auto; padding-block: var(--space-3xl) var(--space-2xl); }
.foot__lead { font-family: var(--font-display); font-weight: 800; font-size: var(--text-2xl); line-height: 1; max-width: 18ch; margin-bottom: var(--space-lg); text-wrap: balance; }
.foot__phone {
  display: inline-block; font-family: var(--font-display); font-weight: 900; font-size: var(--text-4xl); line-height: 0.9;
  color: var(--color-teal); text-decoration: none; font-variant-numeric: tabular-nums; margin-bottom: var(--space-lg);
  background: linear-gradient(currentColor, currentColor) 0 100% / 0 3px no-repeat; transition: background-size var(--dur-slow) var(--ease-out);
}
.foot__phone:hover { color: var(--color-bright); background-size: 100% 3px; }
.foot__ctas { display: flex; flex-wrap: wrap; gap: var(--space-xs); margin-bottom: var(--space-md); }
.foot__promise { color: var(--color-on-dark-2); margin: 0; display: flex; gap: var(--space-2xs); align-items: center; }
.foot__base {
  position: relative; width: min(100% - 2 * var(--gutter), var(--page)); margin-inline: auto; padding-block: var(--space-lg) var(--space-xl);
  border-top: 1px solid var(--color-dark-2); display: grid; gap: var(--space-md); align-items: center;
}
.foot__logo img { width: 12rem; }
.foot__nav { display: flex; flex-wrap: wrap; gap: var(--space-2xs) var(--space-md); }
.foot__nav a, .foot__legal a { color: var(--color-on-dark); text-decoration: none; white-space: nowrap; }
.foot__nav a:hover, .foot__legal a:hover { color: var(--color-bright); text-decoration: underline; }
.foot__area, .foot__legal { margin: 0; color: var(--color-on-dark-2); font-size: var(--text-sm); }
.foot__social { display: flex; gap: var(--space-2xs); }
.foot__social a { display: grid; place-items: center; width: 2.75rem; height: 2.75rem; border-radius: 50%; border: 1px solid var(--color-dark-2); color: var(--color-on-dark); }
.foot__social a:hover { border-color: var(--color-teal); color: var(--color-teal); }
@media (min-width: 64rem) {
  .foot__base { grid-template-columns: auto 1fr auto; }
  .foot__area, .foot__legal { grid-column: 1 / -1; }
}

/* ---------- rails: card sequences become swipeable on small screens ---------- */
@media (max-width: 59.99rem) {
  .rail {
    display: grid; grid-auto-flow: column; grid-auto-columns: min(84%, 22rem); gap: var(--space-sm);
    overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x mandatory; scrollbar-width: none;
    margin-inline: calc(-1 * var(--gutter)); padding: var(--space-3xs) var(--gutter) var(--space-sm); scroll-padding-inline: var(--gutter);
  }
  .rail::-webkit-scrollbar { display: none; }
  .rail > * { scroll-snap-align: start; }
}
.rail-dots { display: flex; justify-content: center; gap: 6px; margin-top: var(--space-xs); }
.rail-dots i { width: 8px; height: 8px; transform: rotate(45deg); background: var(--color-rule); transition: background-color var(--dur-fast) var(--ease-out); }
.rail-dots i.is-on { background: var(--color-accent); }
.section--dark .rail-dots i { background: var(--color-dark-2); }
.section--dark .rail-dots i.is-on { background: var(--color-teal); }
@media (min-width: 60rem) { .rail-dots { display: none; } }

/* ---------- post cards (markup shared with functions/_lib/blog.js) ---------- */
.post-grid { display: grid; gap: var(--space-md); grid-template-columns: repeat(auto-fill, minmax(min(100%, 18rem), 1fr)); }
.post-card { overflow: hidden; transition: transform var(--dur-med) var(--ease-out), box-shadow var(--dur-med) var(--ease-out); }
.post-card:hover { transform: translateY(-3px); box-shadow: var(--shadow-lift); }
.post-card__link { display: grid; height: 100%; color: inherit; text-decoration: none; }
.post-card__media { margin: 0; aspect-ratio: 3 / 2; overflow: hidden; background: var(--color-paper-3); }
.post-card__media img { width: 100%; height: 100%; object-fit: cover; transition: transform var(--dur-slow) var(--ease-out); }
.post-card:hover .post-card__media img { transform: scale(1.04); }
.post-card__body { padding: var(--space-md); }
.post-card__meta { display: flex; gap: var(--space-xs); align-items: center; font-size: var(--text-sm); color: var(--color-muted); margin-bottom: var(--space-2xs); }
.post-card__cat { font-family: var(--font-mono); font-size: var(--text-xs); text-transform: uppercase; letter-spacing: 0.05em; color: var(--color-accent); }
.post-card__title { font-size: var(--text-xl); line-height: 1.05; margin-bottom: var(--space-2xs); text-wrap: balance; }
.post-card__excerpt { color: var(--color-ink-2); font-size: var(--text-sm); margin: 0; }
.section--dark .post-card__title { color: var(--color-on-dark); }
.section--dark .post-card__excerpt { color: var(--color-on-dark-2); }

/* ---------- reveal ---------- */
.motion [data-reveal] { opacity: 0; transform: translateY(18px); transition: opacity var(--dur-slow) var(--ease-out), transform var(--dur-slow) var(--ease-out); transition-delay: calc(var(--i, 0) * 70ms); }
.motion [data-reveal].is-in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 1ms !important; animation-iteration-count: 1 !important; transition-duration: 120ms !important; scroll-behavior: auto !important; }
}
.foot__art { display: none; }
@media (min-width: 64rem) {
  .foot__statement { display: grid; grid-template-columns: minmax(0, 1fr) auto; column-gap: var(--space-2xl); }
  .foot__statement > :not(.foot__art) { grid-column: 1; }
  .foot__art { display: grid; grid-column: 2; grid-row: 1 / span 5; align-self: center; grid-template-columns: repeat(2, 11rem); grid-auto-rows: 11rem; gap: 12px; padding: 12px; background: var(--color-dark-grout); border-radius: 6px; }
  .foot__art i { border-radius: var(--radius-tile); background: var(--color-slate); }
  .foot__art i:nth-child(1), .foot__art i:nth-child(4) { background: var(--color-teal); }
  .motion .foot__art i { opacity: 0; transform: scale(0.6) rotate(8deg); transition: opacity var(--dur-slow) var(--ease-out), transform var(--dur-slow) var(--ease-out); }
  .motion .foot__art.is-in i { opacity: 1; transform: none; }
  .motion .foot__art i:nth-child(2) { transition-delay: 120ms; } .motion .foot__art i:nth-child(3) { transition-delay: 240ms; } .motion .foot__art i:nth-child(4) { transition-delay: 360ms; }
}

/* Mobile rule (Alan, 28-29/09): cards and photos never stack on phones; they swipe. Sequences (the anatomy steps)
   stay vertical; the portfolio stays a 2-column grid. The rail wins over every per-component grid below 60rem. */
@media (max-width: 59.99rem) {
  .rail { grid-template-columns: none !important; grid-template-rows: none !important; grid-auto-rows: auto !important; columns: auto !important; background: none !important; border-radius: 0 !important; }
  .rail > * { grid-column: auto !important; grid-row: auto !important; transform: none !important; }
  .scroll-row { flex-wrap: nowrap !important; overflow-x: auto; scrollbar-width: none; margin-inline: calc(-1 * var(--gutter)); padding-inline: var(--gutter); }
  .scroll-row::-webkit-scrollbar { display: none; }
  .scroll-row > * { flex: none; }
}

/* blog pagination (rendered by functions/_lib/blog.js when there are more than 9 posts) */
.post-pagination { grid-column: 1 / -1; display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: var(--space-md); padding-block: var(--space-md); font-weight: 600; }
.post-pagination a { white-space: nowrap; }
.post-pagination__status { color: var(--color-muted); font-size: var(--text-sm); }
@media (max-width: 59.99rem) { .post-grid.rail > .post-pagination { align-self: center; flex-direction: column; } }