/* ————————————————————————————————
   Fybonaci — main stylesheet
   Two registers: the Study (paper) and the Field (near-black).
   The drawn gold line threads both.
   ———————————————————————————————— */

/* base ------------------------------------------------ */

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

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
}

body {
  margin: 0;
  font-family: var(--f-text);
  font-size: var(--t-1);
  line-height: 1.62;
  font-weight: 380;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
}

body[data-register="field"] { background: var(--ground-field); color: var(--bone); }
body[data-register="study"] { background: var(--ground-study); color: var(--ink); }

h1, h2, h3, h4 {
  font-family: var(--f-display);
  font-weight: 400;
  line-height: 1.06;
  letter-spacing: -0.012em;
  margin: 0 0 var(--s-4);
  text-wrap: balance;
}

h2 { font-size: clamp(var(--t-4), 1.1rem + 1.9vw, var(--t-6)); }

p { margin: 0 0 var(--s-3); max-width: var(--measure); }
p:last-child { margin-bottom: 0; }

ul, ol { margin: 0; padding: 0; list-style: none; }

img { max-width: 100%; height: auto; }
svg { max-width: 100%; }

a { color: inherit; text-decoration: none; }

::selection { background: var(--gold); color: var(--ground-field); }

:focus-visible {
  outline: 2px solid var(--gold);
  outline-offset: 4px;
}

.skiplink {
  position: absolute;
  top: -60px;
  left: var(--s-3);
  z-index: 100;
  padding: var(--s-2) var(--s-3);
  background: var(--ground-field);
  color: var(--gold);
  font-family: var(--f-ui);
  font-size: var(--t-0);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  transition: top 200ms var(--ease-out);
}
.skiplink:focus-visible { top: var(--s-3); }

/* shell + grid ---------------------------------------- */

.shell {
  max-width: var(--shell-max);
  margin-inline: auto;
  padding-inline: var(--shell-pad);
  position: relative;
}

.grid13 {
  display: grid;
  grid-template-columns: repeat(13, 1fr);
  column-gap: var(--s-3);
}

.col-main { grid-column: 1 / 9; }
.col-side { grid-column: 10 / 14; }
.col-off  { grid-column: 6 / 14; }
.col-full { grid-column: 1 / 14; }
.col-mid  { grid-column: 3 / 12; }

/* typography voices ----------------------------------- */

.label {
  font-family: var(--f-ui);
  font-size: var(--t-0);
  font-weight: 500;
  letter-spacing: 0.17em;
  text-transform: uppercase;
  color: var(--gold-deep);
}
[data-register="field"] .label,
[data-ground="field"] .label,
[data-ground="ox"] .label,
[data-ground="green"] .label,
[data-ground="indigo"] .label { color: var(--gold); }

.meta {
  font-family: var(--f-mono);
  font-size: var(--t-0);
  letter-spacing: 0.08em;
}

.lede {
  font-size: var(--t-3);
  line-height: 1.4;
  font-weight: 340;
  letter-spacing: -0.004em;
  max-width: 26em;
}

.small { font-size: var(--t-0); line-height: 1.6; }

.muted { color: var(--ink-soft); }
[data-register="field"] .muted,
[data-ground="field"] .muted,
[data-ground="ox"] .muted,
[data-ground="green"] .muted,
[data-ground="indigo"] .muted { color: var(--bone-soft); }

/* the drawn line -------------------------------------- */

.link-drawn {
  display: inline-block;
  padding-bottom: 4px;
  font-family: var(--f-ui);
  font-size: var(--t-0);
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 120 6' preserveAspectRatio='none'%3E%3Cpath d='M2 4.2 C 18 2.6 34 5 52 3.6 C 70 2.4 88 4.8 104 3.4 C 110 3 115 3.4 118 3.8' fill='none' stroke='%23D59D30' stroke-width='1.8' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: left bottom;
  background-size: 100% 6px;
  transition: color 250ms var(--ease-out);
}
.link-drawn:hover { color: var(--gold-deep); }
[data-register="field"] .link-drawn:hover,
[data-ground="field"] .link-drawn:hover,
[data-ground="ox"] .link-drawn:hover { color: var(--gold); }

p a:not(.btn):not(.link-drawn), .prose a:not(.btn):not(.link-drawn) {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 120 6' preserveAspectRatio='none'%3E%3Cpath d='M2 4.2 C 18 2.6 34 5 52 3.6 C 70 2.4 88 4.8 104 3.4 C 110 3 115 3.4 118 3.8' fill='none' stroke='%23D59D30' stroke-width='1.8' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: left calc(100% - 1px);
  background-size: 100% 5px;
  padding-bottom: 3px;
  transition: color 250ms var(--ease-out);
}
p a:not(.btn):hover { color: var(--gold-deep); }

.rule-drawn {
  display: block;
  width: 100%;
  height: 5px;
  overflow: visible;
}
.rule-drawn path {
  fill: none;
  stroke: var(--gold);
  stroke-width: 2;
  stroke-linecap: round;
  vector-effect: non-scaling-stroke;
}
/* non-scaling-stroke computes dashes in screen units, so the dash must cover
   the widest stretched rendering, not the 200-unit viewBox */
.js .rule-drawn path {
  stroke-dasharray: 2400;
  stroke-dashoffset: 2400;
  transition: stroke-dashoffset 1300ms var(--ease-draw);
}
.js .rule-drawn.is-in path { stroke-dashoffset: 0; }

/* buttons --------------------------------------------- */

.btn {
  position: relative;
  display: inline-block;
  padding: var(--s-2) var(--s-4);
  font-family: var(--f-ui);
  font-size: var(--t-0);
  font-weight: 500;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  border: 1px solid var(--rule-ink);
  transition: color 300ms var(--ease-out), border-color 300ms var(--ease-out);
}
[data-register="field"] .btn,
[data-ground="field"] .btn,
[data-ground="ox"] .btn { border-color: var(--rule-bone); }

.btn::before, .btn::after {
  content: "";
  position: absolute;
  pointer-events: none;
}
.btn::before {
  top: -1px; left: -1px;
  width: 0; height: 0;
  border-top: 1px solid var(--gold);
  border-left: 1px solid var(--gold);
  transition: width 240ms var(--ease-out), height 240ms var(--ease-out) 240ms;
}
.btn::after {
  bottom: -1px; right: -1px;
  width: 0; height: 0;
  border-bottom: 1px solid var(--gold);
  border-right: 1px solid var(--gold);
  transition: width 240ms var(--ease-out), height 240ms var(--ease-out) 240ms;
}
.btn:hover::before, .btn:hover::after,
.btn:focus-visible::before, .btn:focus-visible::after {
  width: calc(100% + 2px);
  height: calc(100% + 2px);
}
.btn:hover { color: var(--gold-deep); }
[data-register="field"] .btn:hover,
[data-ground="field"] .btn:hover,
[data-ground="ox"] .btn:hover { color: var(--gold); }

/* header ---------------------------------------------- */

.site-head {
  position: absolute;
  inset-inline: 0;
  top: 0;
  z-index: 20;
  padding-block: var(--s-4);
}
.site-head__inner {
  max-width: var(--shell-max);
  margin-inline: auto;
  padding-inline: var(--shell-pad);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-4);
}

.brand {
  display: inline-flex;
  align-items: center;
  gap: var(--s-2);
  color: inherit;
}
.brand__mark { color: var(--gold); flex: none; }
.brand__word {
  font-family: var(--f-display);
  font-size: 1.22rem;
  font-weight: 460;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  transform: translateY(1px);
}

.site-nav__list {
  display: flex;
  align-items: center;
  gap: var(--s-4);
}
.site-nav__link {
  font-family: var(--f-ui);
  font-size: var(--t-0);
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  padding-bottom: 4px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 120 6' preserveAspectRatio='none'%3E%3Cpath d='M2 4.2 C 18 2.6 34 5 52 3.6 C 70 2.4 88 4.8 104 3.4 C 110 3 115 3.4 118 3.8' fill='none' stroke='%23D59D30' stroke-width='1.8' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: left bottom;
  background-size: 0% 6px;
  transition: background-size 350ms var(--ease-out);
}
.site-nav__link:hover,
.site-nav__link.is-current { background-size: 100% 6px; }

.site-nav__give {
  font-family: var(--f-ui);
  font-size: var(--t-0);
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  padding: var(--s-1) var(--s-3);
  border: 1px solid var(--rule-gold);
  color: inherit;
  transition: border-color 250ms var(--ease-out), color 250ms var(--ease-out);
}
.site-nav__give:hover { border-color: var(--gold); color: var(--gold-deep); }
[data-register="field"] .site-nav__give:hover { color: var(--gold); }

.site-nav__toggle {
  display: none;
  appearance: none;
  background: none;
  border: 1px solid var(--rule-gold);
  color: inherit;
  font-family: var(--f-ui);
  font-size: var(--t-0);
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  padding: var(--s-1) var(--s-3);
  cursor: pointer;
}

/* sections -------------------------------------------- */

.sect { padding-block: clamp(89px, 11vw, 144px); position: relative; }
.sect--tight { padding-block: clamp(55px, 7vw, 89px); }

[data-ground="study"] { background: var(--ground-study); color: var(--ink); }
[data-ground="study-deep"] { background: var(--ground-study-deep); color: var(--ink); }
[data-ground="field"] { background: var(--ground-field); color: var(--bone); }
[data-ground="ox"] { background: var(--ox-raw); color: var(--bone); }
[data-ground="green"] { background: var(--green-raw); color: var(--bone); }
[data-ground="indigo"] { background: var(--indigo-raw); color: var(--bone); }

/* marginalia: sequence terms in the margin */
.term {
  display: block;
  font-family: var(--f-mono);
  font-size: var(--t-0);
  letter-spacing: 0.1em;
  color: var(--gold-deep);
  margin-bottom: var(--s-3);
}
[data-ground="field"] .term,
[data-ground="ox"] .term,
[data-ground="green"] .term,
[data-ground="indigo"] .term { color: var(--gold); }
.term::before { content: "term "; opacity: 0.65; }

@media (min-width: 1440px) {
  .term {
    position: absolute;
    left: calc(var(--shell-pad) * -0.82);
    top: 10px;
    margin: 0;
    writing-mode: initial;
  }
}

.sect__head { margin-bottom: var(--s-5); }
.sect__head h2 { font-size: clamp(var(--t-5), 2vw + 1.4rem, var(--t-7)); max-width: 14em; }

.margin-note {
  font-family: var(--f-text);
  font-style: italic;
  font-size: var(--t-0);
  line-height: 1.55;
  color: var(--ink-faint);
  border-left: 1px solid var(--rule-gold);
  padding-left: var(--s-3);
  max-width: 21em;
}
[data-ground="field"] .margin-note,
[data-ground="ox"] .margin-note { color: var(--bone-faint); }

/* reveals --------------------------------------------- */

.js .rev {
  opacity: 0;
  transform: translateY(13px);
  transition: opacity 800ms var(--ease-out), transform 800ms var(--ease-out);
  transition-delay: var(--d, 0ms);
}
.js .rev.is-in { opacity: 1; transform: none; }

/* the construction ------------------------------------ */

.construction { margin: 0; }
.construction__svg { display: block; width: 100%; height: auto; }

.c-fill--ox { fill: var(--ox-raw); }
.c-fill--green path { fill: var(--green-raw); }
.c-fill--indigo rect { fill: var(--indigo-raw); }

.c-stroke {
  stroke: var(--gold);
  stroke-width: 2.5;
  fill: none;
}

.js .construction.is-armed .c-stroke {
  stroke-dasharray: var(--len);
  stroke-dashoffset: var(--len);
}
.js .construction.is-armed .c-fill { opacity: 0; }

.js .construction.is-play .c-stroke {
  stroke-dashoffset: 0;
  transition: stroke-dashoffset 1050ms var(--ease-draw);
  transition-delay: calc(var(--o) * 150ms);
}
.js .construction.is-play .c-stroke--spiral {
  transition-duration: 1700ms;
  transition-delay: calc(var(--o) * 150ms + 350ms);
}
.js .construction.is-play .c-fill {
  opacity: 1;
  transition: opacity 1100ms ease;
}
.js .construction.is-play .c-fill--ox { transition-delay: 1050ms; }
.js .construction.is-play .c-fill--indigo { transition-delay: 1500ms; }
.js .construction.is-play .c-fill--green { transition-delay: 1850ms; }

/* hero ------------------------------------------------ */

.hero {
  min-height: 100svh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding-block: var(--s-7) var(--s-6);
  position: relative;
}
.hero .construction {
  width: clamp(280px, 36vw, 540px);
  margin-bottom: var(--s-5);
}
.hero__title {
  font-size: clamp(var(--t-6), 2.2rem + 3.4vw, var(--t-9));
  font-weight: 380;
  margin-bottom: var(--s-4);
  max-width: 9em;
}
.hero__sub {
  font-size: var(--t-2);
  line-height: 1.5;
  color: var(--bone-soft);
  max-width: 30em;
  margin-inline: auto;
}
.hero__cue {
  position: absolute;
  bottom: var(--s-4);
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--s-1);
  color: var(--gold);
}
.hero__cue svg { display: block; }
.hero__cue .meta { color: var(--bone-faint); letter-spacing: 0.22em; text-transform: uppercase; }

/* sequence strips ------------------------------------- */

.seqstrip {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: var(--s-3) var(--s-4);
  font-family: var(--f-display);
  font-weight: 340;
  font-size: clamp(var(--t-5), 1.6rem + 3.4vw, var(--t-8));
  letter-spacing: -0.01em;
}
.seqstrip span { opacity: calc(1.06 - var(--i, 0) * 0.085); }

/* home: the model ------------------------------------- */

.flow {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--s-4);
  counter-reset: flow;
}
.flow__step { position: relative; padding-top: var(--s-3); }
.flow__step .rule-drawn { position: absolute; top: 0; left: 0; right: 0; }
.flow__step h3 {
  font-size: var(--t-3);
  margin: var(--s-2) 0 var(--s-2);
}
.flow__step .meta { color: var(--gold-deep); display: block; }
[data-ground="field"] .flow__step .meta { color: var(--gold); }
.flow__step p { font-size: var(--t-1); color: var(--ink-soft); }
[data-ground="field"] .flow__step p { color: var(--bone-soft); }

/* plates ---------------------------------------------- */

.plate {
  position: relative;
  padding: clamp(var(--s-4), 6vw, var(--s-6));
  margin-block: var(--s-4);
}
.plate--ox { background: var(--ox-raw); color: var(--bone); }
.plate--green { background: var(--green-raw); color: var(--bone); }
.plate--indigo { background: var(--indigo-raw); color: var(--bone); }
.plate__frame {
  /* svg is a replaced element: insets alone will not stretch it */
  position: absolute;
  top: var(--s-2);
  left: var(--s-2);
  width: calc(100% - (var(--s-2) * 2));
  height: calc(100% - (var(--s-2) * 2));
  pointer-events: none;
}
.plate__frame rect {
  fill: none;
  stroke: var(--rule-gold);
  stroke-width: 1.5;
  vector-effect: non-scaling-stroke;
}
.js .plate__frame rect { stroke-dasharray: 4600; stroke-dashoffset: 4600; transition: stroke-dashoffset 1800ms var(--ease-draw) 200ms; }
.js .is-in .plate__frame rect, .js .plate__frame.is-in rect { stroke-dashoffset: 0; }

.edition {
  text-align: center;
}
.edition__kicker { margin-bottom: var(--s-3); }
.edition__title {
  font-size: clamp(var(--t-6), 2rem + 3vw, var(--t-8));
  font-weight: 360;
  margin-bottom: var(--s-4);
}
.edition__meta {
  display: flex;
  flex-direction: column;
  gap: var(--s-2);
  align-items: center;
  margin-bottom: var(--s-4);
}
.edition__meta .meta { color: var(--bone-soft); }
.edition__meta .meta b { color: var(--bone); font-weight: 500; }

/* ledger ---------------------------------------------- */

.ledger { border-top: 1px solid var(--rule-ink); max-width: 46em; }
[data-ground="field"] .ledger, [data-ground="ox"] .ledger { border-color: var(--rule-bone); }
.ledger__row {
  display: grid;
  grid-template-columns: minmax(9em, 1fr) 2.2fr;
  gap: var(--s-3);
  padding-block: var(--s-3);
  border-bottom: 1px solid var(--rule-ink);
}
[data-ground="field"] .ledger__row, [data-ground="ox"] .ledger__row { border-color: var(--rule-bone); }
.ledger__k {
  font-family: var(--f-ui);
  font-size: var(--t-0);
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--gold-deep);
  padding-top: 4px;
}
[data-ground="field"] .ledger__k, [data-ground="ox"] .ledger__k { color: var(--gold); }
.ledger__v { max-width: 30em; }
.ledger__v p { margin: 0; }

/* doors (take part) ----------------------------------- */

.doors {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--s-4);
}
.door {
  border: 1px solid var(--rule-ink);
  padding: var(--s-4);
  display: flex;
  flex-direction: column;
  gap: var(--s-3);
}
[data-ground="field"] .door { border-color: var(--rule-bone); }
.door__n { color: var(--gold-deep); }
.door h3 { font-size: var(--t-4); margin: 0; }
.door p { font-size: var(--t-1); color: var(--ink-soft); flex-grow: 1; }
.door__status {
  font-family: var(--f-mono);
  font-size: var(--t-0);
  letter-spacing: 0.06em;
  color: var(--ink-faint);
  border-top: 1px solid var(--rule-ink);
  padding-top: var(--s-2);
}

/* chapters (journey model) ---------------------------- */

.chapters { display: flex; flex-direction: column; }
.chap {
  display: grid;
  grid-template-columns: minmax(9em, 1fr) 2.2fr;
  gap: var(--s-4);
  padding-block: var(--s-5);
  border-top: 1px solid var(--rule-bone);
}
.chap:last-child { border-bottom: 1px solid var(--rule-bone); }
[data-ground="study"] .chap { border-color: var(--rule-ink); }
.chap__n { color: var(--gold); }
.chap h3 { font-size: var(--t-4); margin: var(--s-1) 0 0; }
.chap__body { max-width: 36em; }
.chap__body p { color: var(--bone-soft); }
[data-ground="study"] .chap__body p { color: var(--ink-soft); }

/* prose blocks ---------------------------------------- */

.prose { max-width: var(--measure); }
.prose > * + * { margin-top: var(--s-3); }
.prose h3 { font-size: var(--t-4); margin: var(--s-5) 0 var(--s-2); }

.statement {
  font-family: var(--f-display);
  font-size: clamp(var(--t-4), 1.4rem + 1.8vw, var(--t-6));
  font-weight: 360;
  line-height: 1.18;
  letter-spacing: -0.01em;
  max-width: 20em;
}

/* footer ---------------------------------------------- */

.site-foot {
  background: var(--ground-field);
  color: var(--bone);
  padding-block: clamp(89px, 11vw, 144px) var(--s-4);
}
.site-foot__inner {
  max-width: var(--shell-max);
  margin-inline: auto;
  padding-inline: var(--shell-pad);
}
.site-foot__statement {
  font-family: var(--f-display);
  font-size: clamp(var(--t-6), 2rem + 4vw, var(--t-9));
  font-weight: 360;
  line-height: 1.02;
  letter-spacing: -0.014em;
  margin: 0 0 var(--s-5);
}
.site-foot__seq {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-2) var(--s-3);
  font-family: var(--f-mono);
  font-size: var(--t-0);
  color: var(--gold);
  padding-bottom: var(--s-5);
  border-bottom: 1px solid var(--rule-bone);
  margin-bottom: var(--s-5);
}
.site-foot__seq span:nth-child(n+7) { opacity: 0.6; }
.site-foot__seq span:nth-child(n+10) { opacity: 0.3; }
.site-foot__grid {
  display: grid;
  grid-template-columns: 1fr 1.6fr 1.6fr;
  gap: var(--s-5);
  margin-bottom: var(--s-6);
}
.site-foot__h {
  font-family: var(--f-ui);
  font-size: var(--t-0);
  font-weight: 500;
  letter-spacing: 0.17em;
  text-transform: uppercase;
  color: var(--gold);
  margin: 0 0 var(--s-3);
}
.site-foot__list { display: flex; flex-direction: column; gap: var(--s-1); }
.site-foot__list a {
  font-family: var(--f-text);
  font-size: var(--t-1);
  color: var(--bone-soft);
  transition: color 200ms var(--ease-out);
}
.site-foot__list a:hover { color: var(--gold); }
.site-foot__note {
  font-size: var(--t-1);
  color: var(--bone-soft);
  max-width: 26em;
  margin-bottom: var(--s-3);
}
.site-foot__base {
  display: flex;
  justify-content: space-between;
  gap: var(--s-4);
  flex-wrap: wrap;
  font-family: var(--f-mono);
  font-size: 0.72rem;
  letter-spacing: 0.05em;
  color: var(--bone-faint);
}
.site-foot__base p { margin: 0; max-width: none; }

/* specimen (identity page) ---------------------------- */

.swatches { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: var(--s-3); }
.swatch { border: 1px solid var(--rule-ink); }
.swatch__chip { height: 89px; }
.swatch__info { padding: var(--s-2); display: flex; justify-content: space-between; gap: var(--s-2); }

.typerow { border-top: 1px solid var(--rule-ink); padding-block: var(--s-4); }
.typerow .meta { color: var(--ink-faint); display: block; margin-bottom: var(--s-2); }

/* responsive ------------------------------------------ */

@media (max-width: 1100px) {
  .col-main { grid-column: 1 / 14; }
  .col-side { grid-column: 1 / 14; margin-top: var(--s-4); }
  .col-off { grid-column: 1 / 14; }
  .col-mid { grid-column: 1 / 14; }
  .flow { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 820px) {
  .site-nav__toggle { display: inline-block; position: relative; z-index: 40; }
  .site-nav__list {
    display: none;
    position: fixed;
    inset: 0;
    z-index: 30;
    background: var(--ground-field);
    color: var(--bone);
    flex-direction: column;
    align-items: flex-start;
    justify-content: center;
    padding: var(--shell-pad);
    gap: var(--s-4);
  }
  .site-nav__list.is-open { display: flex; }
  .site-nav__list .site-nav__link {
    font-family: var(--f-display);
    font-size: var(--t-5);
    text-transform: none;
    letter-spacing: -0.01em;
    font-weight: 380;
  }
  .site-nav__list .site-nav__give { margin-top: var(--s-3); }
  body.nav-open { overflow: hidden; }

  .doors { grid-template-columns: 1fr; }
  .flow { grid-template-columns: 1fr; }
  .chap { grid-template-columns: 1fr; gap: var(--s-2); }
  .ledger__row { grid-template-columns: 1fr; gap: var(--s-1); }
  .site-foot__grid { grid-template-columns: 1fr; gap: var(--s-4); }
}

@media (max-width: 560px) {
  :root { --shell-pad: 21px; }
  .hero .construction { width: min(78vw, 340px); }
  .brand__word { letter-spacing: 0.22em; font-size: 1.05rem; }
}

/* reduced motion -------------------------------------- */

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .js .rev { opacity: 1; transform: none; transition: none; }
  .js .rule-drawn path { stroke-dashoffset: 0; transition: none; }
  .js .construction.is-armed .c-stroke { stroke-dasharray: none; stroke-dashoffset: 0; }
  .js .construction.is-armed .c-fill { opacity: 1; }
  .js .construction .c-stroke, .js .construction .c-fill { transition: none; }
  .js .plate__frame rect { stroke-dasharray: none; stroke-dashoffset: 0; transition: none; }
  .site-nav__link { transition: none; }
}