/* =========================================================================
   RyanMichaels.com — "Plaster & Ink, with the Tiger"
   An austere contemporary-art catalogue. Bodoni Moda (display) / Space Mono
   (labels & catalogue numbers) / Hanken Grotesk (body). The restraint is the
   joke: present the absurd with the gravity of a museum checklist.
   ========================================================================= */

:root {
  /* palette — gallery plaster + warm ink + a single Tiger amber */
  --plaster:    #e9e4d8;   /* gallery wall (page) */
  --plaster-2:  #e3ddcf;   /* slightly deeper wall band */
  --paper:      #f5f1e9;   /* lifted card / plate mat */
  --ink:        #18130e;   /* near-black, warm */
  --ink-2:      #5f584c;   /* muted body ink */
  --ink-3:      #6e6657;   /* captions / meta (AA on plaster/paper) */
  --ink-4:      #877f70;   /* decorative-only glyphs (year marks), not for body text */
  --hair:       #cdc4ac;   /* hairline rules */
  --hair-soft:  #d4ccb8;
  --tiger:      #c2571f;   /* the accent — used sparingly */
  --tiger-ink:  #a3461a;   /* AA-safe tiger for text/links on light */
  --tiger-on-night: #e07a3d; /* AA-safe tiger for text on dark sections */
  --tiger-wash: #c2571f14;
  --night:      #16110c;   /* dark gallery section */
  --night-2:    #1f1810;
  --on-night:   #ece4d4;   /* text on night */
  --on-night-2: #b3a890;

  --maxw: 1180px;
  --gutter: clamp(20px, 5vw, 64px);

  --serif: "Bodoni Moda", "Times New Roman", serif;
  --mono:  "Space Mono", ui-monospace, "Courier New", monospace;
  --sans:  "Hanken Grotesk", system-ui, -apple-system, "Segoe UI", sans-serif;

  --shadow: 0 1px 0 rgba(24,19,14,.04), 0 18px 44px -28px rgba(24,19,14,.45);
  --ease: cubic-bezier(.2, .7, .2, 1);
}

/* ---- reset ---- */
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  font-family: var(--sans);
  color: var(--ink);
  background: var(--plaster);
  font-size: clamp(1rem, 0.97rem + 0.18vw, 1.075rem);
  line-height: 1.65;
  font-weight: 400;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  font-feature-settings: "kern" 1, "liga" 1;
}

img, svg, video { display: block; max-width: 100%; height: auto; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; cursor: pointer; background: none; border: 0; }
::selection { background: var(--tiger); color: #fff; }

/* ---- type ---- */
h1, h2, h3, h4 { font-family: var(--serif); font-weight: 500; line-height: 1.04; letter-spacing: -0.01em; }
.serif-i { font-style: italic; }

.display {
  font-family: var(--serif);
  font-weight: 500;
  font-size: clamp(3.1rem, 1.4rem + 7.4vw, 8.4rem);
  line-height: 0.92;
  letter-spacing: -0.022em;
}

.kicker {
  font-family: var(--mono);
  font-size: 0.72rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--ink-3);
  font-weight: 400;
}
.kicker--tiger { color: var(--tiger-ink); }
.kicker--on-night { color: var(--on-night-2); }

.lede {
  font-family: var(--serif);
  font-weight: 400;
  font-size: clamp(1.3rem, 1.05rem + 1.1vw, 1.95rem);
  line-height: 1.32;
  color: var(--ink);
  letter-spacing: -0.005em;
}
.muted { color: var(--ink-2); }
.tiger-text { color: var(--tiger-ink); }

/* ---- layout primitives ---- */
.container { width: 100%; max-width: var(--maxw); margin-inline: auto; padding-inline: var(--gutter); }
.container--wide { max-width: 1320px; }
.container--narrow { max-width: 760px; }

.section { padding-block: clamp(56px, 8vw, 128px); position: relative; }
.section--tight { padding-block: clamp(40px, 5vw, 80px); }
.section--night { background: var(--night); color: var(--on-night); }
.section--night h1, .section--night h2, .section--night h3 { color: var(--on-night); }
.section--band { background: var(--plaster-2); }

.rule { border: 0; border-top: 1px solid var(--hair); }
.rule--night { border-top-color: #3a2f22; }

.section__head { display: flex; flex-wrap: wrap; align-items: baseline; gap: 10px 22px; margin-bottom: clamp(28px, 4vw, 56px); }
.section__head .kicker { flex: none; }
.section__head h2 { font-size: clamp(1.9rem, 1.2rem + 2.6vw, 3.5rem); }
.section__lede { max-width: 60ch; color: var(--ink-2); }

.stack-s > * + * { margin-top: 0.85rem; }
.stack > * + * { margin-top: 1.3rem; }
.mt-s { margin-top: 1.25rem; } .mt-m { margin-top: 2rem; } .mt-l { margin-top: clamp(2.4rem,4vw,3.6rem); }
.center { text-align: center; }

/* numbered eyebrow used on section heads: "01 — Selected works" */
.idxlabel { font-family: var(--mono); font-size: 0.72rem; letter-spacing: 0.18em; text-transform: uppercase; color: var(--ink-3); }
.idxlabel b { color: var(--tiger-ink); font-weight: 400; }

/* =======================================================================
   Header / nav
   ======================================================================= */
.brandbar { height: 3px; background: var(--tiger); }

.skip-link { position: absolute; left: -9999px; top: 0; background: var(--ink); color: #fff; padding: 10px 16px; z-index: 200; }
.skip-link:focus { left: 12px; top: 12px; }

.site-header {
  position: sticky; top: 0; z-index: 100;
  background: color-mix(in srgb, var(--plaster) 86%, transparent);
  backdrop-filter: blur(10px) saturate(1.1);
  border-bottom: 1px solid var(--hair);
}
.site-header__inner { display: flex; align-items: center; justify-content: space-between; gap: 20px; height: 70px; }

.brand { display: inline-flex; align-items: center; gap: 12px; }
.brand__mark { width: 34px; height: 34px; flex: none; display: block; }
.brand__mark svg { width: 100%; height: 100%; }
.brand__word { font-family: var(--serif); font-weight: 600; font-size: 1.32rem; letter-spacing: -0.01em; line-height: 1; }
.brand__word b { font-weight: 600; }
.brand__sub { display: block; font-family: var(--mono); font-weight: 400; font-size: 0.56rem; letter-spacing: 0.24em; text-transform: uppercase; color: var(--ink-3); margin-top: 4px; }

.site-nav { display: flex; align-items: center; gap: 4px; }
.site-nav__list { list-style: none; padding: 0; display: flex; align-items: center; gap: 4px; }
.site-nav__list a {
  font-family: var(--mono); font-size: 0.74rem; letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--ink-2); padding: 9px 14px; border-radius: 2px; position: relative; transition: color .2s var(--ease);
}
.site-nav__list a:hover { color: var(--ink); }
.site-nav__list a.is-active { color: var(--ink); }
.site-nav__list a.is-active::after {
  content: ""; position: absolute; left: 14px; right: 14px; bottom: 2px; height: 1px; background: var(--tiger);
}
.site-nav__cta a {
  color: var(--ink) !important; border: 1px solid var(--ink); border-radius: 999px; padding: 9px 18px !important;
}
.site-nav__cta a:hover { background: var(--ink); color: var(--plaster) !important; }
.site-nav__cta a.is-active::after { display: none; }

.site-nav__toggle { display: none; width: 42px; height: 42px; flex-direction: column; justify-content: center; gap: 5px; align-items: center; }
.site-nav__toggle-bar { width: 22px; height: 1.5px; background: var(--ink); transition: transform .3s var(--ease), opacity .2s; }
.visually-hidden { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* =======================================================================
   Hero
   ======================================================================= */
.hero { padding-top: clamp(40px, 7vw, 96px); padding-bottom: clamp(36px, 5vw, 72px); }
.hero__grid { display: grid; grid-template-columns: 1.15fr 0.85fr; gap: clamp(28px, 5vw, 72px); align-items: end; }
.hero__name { margin-bottom: 0.2em; }
.hero__name .display { display: block; }
.hero__role { font-family: var(--mono); font-size: clamp(0.74rem, 0.6rem + 0.4vw, 0.92rem); letter-spacing: 0.26em; text-transform: uppercase; color: var(--ink-2); margin-top: 0.4em; }
.hero__lede { margin-top: clamp(20px, 3vw, 34px); max-width: 38ch; }
.hero__meta { margin-top: clamp(24px, 3vw, 36px); display: flex; flex-wrap: wrap; gap: 12px 26px; align-items: center; }

.portrait { position: relative; }
.portrait__frame { position: relative; background: var(--paper); padding: 12px; box-shadow: var(--shadow); border: 1px solid var(--hair-soft); }
.portrait__frame img { width: 100%; filter: saturate(0.96) contrast(1.02); }
.portrait__cap { font-family: var(--mono); font-size: 0.66rem; letter-spacing: 0.04em; color: var(--ink-3); margin-top: 12px; line-height: 1.5; padding-inline: 2px; text-transform: none; }
.portrait__cap b { color: var(--ink-2); font-weight: 400; }

/* =======================================================================
   Buttons
   ======================================================================= */
.btn {
  display: inline-flex; align-items: center; gap: 10px; font-family: var(--mono);
  font-size: 0.76rem; letter-spacing: 0.14em; text-transform: uppercase; font-weight: 400;
  padding: 14px 26px; border-radius: 999px; border: 1px solid transparent;
  transition: background .22s var(--ease), color .22s var(--ease), border-color .22s var(--ease), transform .22s var(--ease);
}
.btn .arrow { transition: transform .25s var(--ease); }
.btn:hover .arrow { transform: translateX(4px); }
.btn--ink { background: var(--ink); color: var(--plaster); }
.btn--ink:hover { background: var(--tiger); color: #fff; }
.btn--ghost { border-color: var(--ink); color: var(--ink); }
.btn--ghost:hover { background: var(--ink); color: var(--plaster); }
.btn--ghost-light { border-color: var(--on-night); color: var(--on-night); }
.btn--ghost-light:hover { background: var(--on-night); color: var(--night); }
.btn--lg { padding: 16px 32px; font-size: 0.8rem; }

/* link with underline-on-hover, mono */
.tlink { display: inline-block; font-family: var(--mono); font-size: 0.78rem; letter-spacing: 0.06em; color: var(--ink); border-bottom: 1px solid var(--tiger); padding: 4px 0 3px; transition: color .2s; }
.tlink:hover { color: var(--tiger-ink); }
.tlink--on-night { color: var(--on-night); }

/* =======================================================================
   Work — catalogue raisonné as a checklist
   ======================================================================= */
.work-list { border-top: 1px solid var(--hair); }
.work-row {
  display: grid; grid-template-columns: 64px 1fr auto; gap: clamp(14px, 3vw, 40px);
  align-items: baseline; padding: clamp(22px, 3vw, 34px) 0;
  border-bottom: 1px solid var(--hair); position: relative;
}
.work-row__idx { font-family: var(--mono); font-size: 0.8rem; color: var(--ink-3); letter-spacing: 0.04em; padding-top: 6px; }
.work-row__title { font-family: var(--serif); font-size: clamp(1.5rem, 1.05rem + 1.8vw, 2.5rem); line-height: 1.05; }
.work-row__title .yr { font-family: var(--serif); font-style: italic; color: var(--ink-3); font-size: 0.62em; }
.work-row__medium { font-family: var(--mono); font-size: 0.72rem; letter-spacing: 0.03em; color: var(--ink-2); margin-top: 10px; text-transform: none; }
.work-row__blurb { color: var(--ink-2); margin-top: 12px; max-width: 64ch; }
.work-row__meta { text-align: right; font-family: var(--mono); font-size: 0.68rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--ink-3); white-space: nowrap; padding-top: 8px; }
.work-row__disc { display: block; color: var(--tiger-ink); }
.work-row__status { display: block; margin-top: 6px; }
.work-row:hover .work-row__title { color: var(--tiger-ink); transition: color .2s; }

/* featured plates grid */
.plate-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(300px, 100%), 1fr)); gap: clamp(20px, 3vw, 36px); }
.plate { background: var(--paper); border: 1px solid var(--hair-soft); padding: 14px; box-shadow: var(--shadow); }
.plate__img { overflow: hidden; background: var(--plaster-2); aspect-ratio: 4 / 3; }
.plate__img img { width: 100%; height: 100%; object-fit: cover; transition: transform .8s var(--ease); }
.plate:hover .plate__img img { transform: scale(1.03); }
.plate__cap { padding: 14px 4px 4px; }
.plate__title { font-family: var(--serif); font-size: 1.3rem; line-height: 1.1; }
.plate__title .yr { font-style: italic; color: var(--ink-3); font-size: 0.78em; }
.plate__medium { font-family: var(--mono); font-size: 0.66rem; color: var(--ink-2); margin-top: 8px; letter-spacing: 0.02em; }
.plate__disc { font-family: var(--mono); font-size: 0.62rem; letter-spacing: 0.16em; text-transform: uppercase; color: var(--tiger-ink); margin-bottom: 6px; }

/* =======================================================================
   Disciplines
   ======================================================================= */
.disc-list { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(240px,100%),1fr)); gap: 1px; background: var(--hair); border: 1px solid var(--hair); }
.disc { background: var(--plaster); padding: clamp(22px,3vw,32px); }
.section--night .disc { background: var(--night); }
.disc__n { font-family: var(--mono); font-size: 0.7rem; color: var(--tiger-ink); letter-spacing: 0.1em; }
.section--night .disc__n { color: var(--tiger-on-night); }
.disc h3 { font-size: 1.5rem; margin-top: 12px; }
.disc p { color: var(--ink-2); margin-top: 8px; font-size: 0.96rem; }
.section--night .disc p { color: var(--on-night-2); }

/* =======================================================================
   Press — big serif pull quotes
   ======================================================================= */
.press-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(320px,100%),1fr)); gap: clamp(24px,4vw,48px); }
.press { border-top: 2px solid var(--ink); padding-top: 22px; }
.section--night .press { border-top-color: var(--tiger); }
.press__quote { font-family: var(--serif); font-size: clamp(1.25rem, 1rem + 1vw, 1.7rem); line-height: 1.28; font-weight: 400; }
.press__quote::before { content: "\201C"; color: var(--tiger-ink); }
.press__quote::after { content: "\201D"; color: var(--tiger-ink); }
.section--night .press__quote::before, .section--night .press__quote::after { color: var(--tiger-on-night); }
.press__by { font-family: var(--mono); font-size: 0.7rem; letter-spacing: 0.06em; color: var(--ink-3); margin-top: 18px; text-transform: none; }
.press__by b { color: var(--ink-2); font-weight: 400; }
.section--night .press__by { color: var(--on-night-2); }
.section--night .press__by b { color: var(--on-night); }

.ticker { font-family: var(--serif); font-style: italic; font-size: clamp(1.1rem,0.9rem+1vw,1.5rem); color: var(--ink-2); }

/* =======================================================================
   Statement / Manifesto
   ======================================================================= */
.prose { max-width: 64ch; }
.prose p { margin-top: 1.25em; color: var(--ink); }
.prose p:first-child { margin-top: 0; }
.prose .dropcap::first-letter { font-family: var(--serif); font-size: 3.4em; line-height: 0.8; float: left; padding: 6px 12px 0 0; color: var(--tiger-ink); font-weight: 500; }

.manifesto { counter-reset: man; border-top: 1px solid var(--hair); }
.manifesto__item { display: grid; grid-template-columns: 56px 1fr; gap: 18px; padding: clamp(18px,2.5vw,26px) 0; border-bottom: 1px solid var(--hair); align-items: baseline; }
.manifesto__n { font-family: var(--mono); font-size: 0.82rem; color: var(--tiger-ink); padding-top: 4px; }
.manifesto__t { font-family: var(--serif); font-size: clamp(1.2rem,0.95rem+1vw,1.7rem); line-height: 1.2; font-weight: 400; }
.section--night .manifesto, .section--night .manifesto__item { border-color: #3a2f22; }

/* =======================================================================
   CV tables
   ======================================================================= */
.cv-block { margin-top: clamp(30px,4vw,52px); }
.cv-block > .kicker { display: block; padding-bottom: 14px; border-bottom: 2px solid var(--ink); margin-bottom: 6px; }
.cv-row { display: grid; grid-template-columns: 84px 1fr; gap: 10px 22px; padding: 14px 0; border-bottom: 1px solid var(--hair); align-items: baseline; }
.cv-row__year { font-family: var(--mono); font-size: 0.78rem; color: var(--tiger-ink); letter-spacing: 0.04em; }
.cv-row__body .t { font-family: var(--serif); font-size: 1.18rem; line-height: 1.2; }
.cv-row__body .v { font-family: var(--mono); font-size: 0.72rem; color: var(--ink-2); margin-top: 5px; letter-spacing: 0.02em; }
.cv-list { list-style: none; padding: 0; }
.cv-list li { padding: 11px 0; border-bottom: 1px solid var(--hair); font-size: 0.98rem; }
.cv-list li::before { content: "—"; color: var(--tiger-ink); margin-right: 12px; }

/* =======================================================================
   Notes (FAQ) — minimal disclosure
   ======================================================================= */
.notes { border-top: 1px solid var(--hair); max-width: 820px; }
.note { border-bottom: 1px solid var(--hair); }
.note__q { width: 100%; text-align: left; display: flex; justify-content: space-between; align-items: baseline; gap: 18px; padding: 22px 0; font-family: var(--serif); font-size: clamp(1.15rem,0.95rem+0.7vw,1.45rem); line-height: 1.25; }
.note__q .sign { font-family: var(--mono); font-size: 1.1rem; color: var(--tiger-ink); flex: none; transition: transform .3s var(--ease); }
.note.is-open .note__q .sign { transform: rotate(45deg); }
.note__a { max-height: 0; overflow: hidden; visibility: hidden; transition: max-height .4s var(--ease), visibility .4s var(--ease); }
.note.is-open .note__a { visibility: visible; }
.note__q[aria-controls] { cursor: pointer; }
.note__a-inner { padding-bottom: 24px; color: var(--ink-2); max-width: 62ch; }
.note__h { margin: 0; }

/* =======================================================================
   Inquiry form
   ======================================================================= */
.form-wrap { background: var(--paper); border: 1px solid var(--hair-soft); padding: clamp(24px,4vw,48px); box-shadow: var(--shadow); }
.form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 20px 22px; }
.field { display: flex; flex-direction: column; gap: 8px; }
.field--full { grid-column: 1 / -1; }
.field label { font-family: var(--mono); font-size: 0.7rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--ink-2); }
.field .req { color: var(--tiger-ink); }
.field input, .field select, .field textarea {
  font-family: var(--sans); font-size: 1rem; color: var(--ink); background: var(--plaster);
  border: 1px solid var(--hair-soft); border-radius: 2px; padding: 13px 15px; width: 100%; transition: border-color .2s, box-shadow .2s;
}
.field textarea { min-height: 150px; resize: vertical; line-height: 1.55; }
.field input:focus, .field select:focus, .field textarea:focus { outline: none; border-color: var(--tiger); box-shadow: 0 0 0 3px var(--tiger-wash); }
.field__hint { font-size: 0.82rem; color: var(--ink-3); }
.hp-field { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

.form-status { display: none; padding: 14px 18px; border-radius: 2px; font-size: 0.94rem; margin-bottom: 20px; }
.form-status.is-show { display: block; }
.form-status--ok { background: #1c3a2a; color: #d6f0e0; }
.form-status--err { background: #3a1c1a; color: #f3d9d4; }
.form-note { font-family: var(--mono); font-size: 0.7rem; letter-spacing: 0.04em; color: var(--ink-3); }

.gate { font-family: var(--serif); font-style: italic; font-size: clamp(1.2rem,1rem+0.9vw,1.7rem); color: var(--ink); }

/* contact cards */
.contact-strip { display: grid; grid-template-columns: repeat(auto-fit,minmax(min(220px,100%),1fr)); gap: 1px; background: var(--hair); border: 1px solid var(--hair); }
.contact-card { background: var(--plaster); padding: 22px 24px; }
.contact-card .cc-k { font-family: var(--mono); font-size: 0.68rem; letter-spacing: 0.16em; text-transform: uppercase; color: var(--ink-3); font-weight: 400; margin-bottom: 8px; }
.contact-card p { font-family: var(--serif); font-size: 1.15rem; }

/* =======================================================================
   Page head (inner pages)
   ======================================================================= */
.page-head { padding-top: clamp(44px,6vw,88px); padding-bottom: clamp(28px,4vw,52px); border-bottom: 1px solid var(--hair); }
.page-head .crumbs { font-family: var(--mono); font-size: 0.68rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--ink-3); margin-bottom: 22px; }
.page-head .crumbs a:hover { color: var(--tiger-ink); }
.page-head h1 { font-size: clamp(2.6rem, 1.4rem + 5vw, 6rem); }
.page-head__lede { margin-top: clamp(18px,2.5vw,30px); max-width: 56ch; }

/* =======================================================================
   CTA band + footer
   ======================================================================= */
.cta-band { background: var(--night); color: var(--on-night); padding-block: clamp(54px,7vw,104px); }
.cta-band__inner { display: grid; grid-template-columns: 1.4fr auto; gap: 28px; align-items: center; }
.cta-band h2 { color: var(--on-night); font-size: clamp(1.9rem,1.3rem+2.4vw,3.4rem); }
.cta-band p { color: var(--on-night-2); margin-top: 12px; max-width: 48ch; }
.cta-band__actions { display: flex; flex-wrap: wrap; gap: 14px; }

.site-footer { background: var(--night-2); color: var(--on-night-2); padding-block: clamp(48px,6vw,80px) 0; }
.site-footer__inner { display: grid; grid-template-columns: 1.6fr 1fr 1fr; gap: clamp(28px,4vw,56px); }
.site-footer__brand .brand__word { color: var(--on-night); }
.site-footer__tag { margin-top: 16px; max-width: 40ch; font-size: 0.92rem; color: var(--on-night-2); }
.site-footer__col h3 { font-family: var(--mono); font-size: 0.66rem; letter-spacing: 0.18em; text-transform: uppercase; color: var(--on-night-2); font-weight: 400; margin-bottom: 16px; }
.link-list { list-style: none; padding: 0; display: grid; gap: 11px; }
.link-list a { color: var(--on-night); font-size: 0.95rem; transition: color .2s; display: inline-flex; align-items: center; min-height: 24px; }
.link-list a:hover { color: var(--tiger-on-night); }
.site-footer__base { margin-top: clamp(40px,5vw,64px); border-top: 1px solid #3a2f22; padding-block: 22px; }
.site-footer__base-inner { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 10px; font-family: var(--mono); font-size: 0.66rem; letter-spacing: 0.04em; color: var(--on-night-2); }

/* =======================================================================
   Reveal
   ======================================================================= */
.reveal { opacity: 0; transform: translateY(16px); transition: opacity .7s var(--ease), transform .7s var(--ease); }
.reveal.is-in { opacity: 1; transform: none; }
.reveal[data-delay="1"] { transition-delay: .08s; }
.reveal[data-delay="2"] { transition-delay: .16s; }
.reveal[data-delay="3"] { transition-delay: .24s; }
@media (prefers-reduced-motion: reduce) { .reveal { opacity: 1; transform: none; transition: none; } }

:where(a, button, input, select, textarea):focus-visible { outline: 2px solid var(--tiger); outline-offset: 3px; border-radius: 2px; }

/* =======================================================================
   Responsive
   ======================================================================= */
@media (max-width: 900px) {
  .hero__grid { grid-template-columns: 1fr; align-items: start; }
  .portrait { max-width: 440px; margin-top: 8px; }
  .cta-band__inner { grid-template-columns: 1fr; }
  .site-footer__inner { grid-template-columns: 1fr 1fr; }
  .site-footer__brand { grid-column: 1 / -1; }
}
@media (max-width: 720px) {
  .site-nav__toggle { display: flex; }
  .site-nav__pill { position: fixed; inset: 70px 0 auto 0; background: var(--plaster); border-bottom: 1px solid var(--hair); padding: 12px var(--gutter) 22px; transform: translateY(-120%); transition: transform .34s var(--ease); box-shadow: var(--shadow); }
  .site-nav.is-open .site-nav__pill { transform: translateY(0); }
  .site-nav__list { flex-direction: column; align-items: stretch; gap: 2px; }
  .site-nav__list a { padding: 14px 6px; font-size: 0.86rem; }
  .site-nav__list a.is-active::after { display: none; }
  .site-nav__cta { margin-top: 8px; }
  .site-nav__cta a { display: inline-block; text-align: center; }
  .site-nav__list a.is-active { border-left: 2px solid var(--tiger); }
  .work-row { grid-template-columns: 40px 1fr; }
  .work-row__meta { grid-column: 2; text-align: left; margin-top: 8px; padding-top: 0; }
  .form-grid { grid-template-columns: 1fr; }
  .site-footer__inner { grid-template-columns: 1fr; }
}
@media (min-width: 721px) { .site-nav__toggle { display: none; } }