/* ==========================================================================
   FiveMart Scripts — poster wall
   Flat vector / thick keyline / halftone. Ink navy draws everything.
   ========================================================================== */

:root {
  /* Ground + ink */
  --paper:       #F2EBDD;
  --paper-deep:  #E4D9C2;
  --paper-edge:  #D3C5A8;
  --ink:         #141B2E;
  --ink-soft:    #46506B;

  /* Named fields */
  --sky:         #2E9BD6;
  --sky-deep:    #1E6E9C;
  --signal:      #EF5F1B;
  --signal-deep: #C4430C;
  --crimson:     #C31E5F;
  --crimson-deep:#8E1244;

  /* Services green — deliberately not one of the script hues */
  --palm:        #21855A;
  --palm-deep:   #14603F;
  --sun:         #F2B705;

  --keyline: 3px;
  --rule: 2px;

  --gutter: clamp(1rem, 3.5vw, 2.5rem);
  --shell: 1320px;

  --display: "Big Shoulders Display", "Archivo", "Haettenschweiler", sans-serif;
  --body: "Archivo", ui-sans-serif, system-ui, sans-serif;

  --ease-settle: cubic-bezier(.16,.84,.32,1);
  --ease-snap: cubic-bezier(.2,.9,.25,1.08);
}

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

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

body {
  margin: 0;
  background: var(--paper-deep);
  color: var(--ink);
  font-family: var(--body);
  font-size: clamp(1rem, .96rem + .18vw, 1.075rem);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

img, svg, video { display: block; max-width: 100%; }

h1, h2, h3, h4 {
  font-family: var(--display);
  font-weight: 800;
  line-height: .92;
  letter-spacing: -.015em;
  text-transform: uppercase;
  margin: 0;
  text-wrap: balance;
}

p { margin: 0; }

a { color: inherit; }

:focus-visible {
  outline: var(--keyline) solid var(--signal);
  outline-offset: 3px;
}

.shell {
  width: min(100% - (var(--gutter) * 2), var(--shell));
  margin-inline: auto;
}

.skip {
  position: absolute;
  left: -9999px;
  top: 0;
  background: var(--ink);
  color: var(--paper);
  padding: .75rem 1.25rem;
  font-family: var(--display);
  font-size: 1.1rem;
  letter-spacing: .04em;
  z-index: 99;
}
.skip:focus { left: 0; }

/* A heading the page needs for structure but the design carries visually */
.visually-hidden-heading {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

/* Halftone — real dots, used as an overlay on flat fields ------------------ */
.halftone {
  position: absolute;
  inset: 0;
  background-image: radial-gradient(var(--ink) 1.1px, transparent 1.2px);
  background-size: 7px 7px;
  opacity: .13;
  pointer-events: none;
}
.halftone--fine { background-size: 5px 5px; opacity: .1; }

/* ==========================================================================
   Printed banner strip — the header
   ========================================================================== */

.strip {
  position: sticky;
  top: 0;
  z-index: 40;
  background: var(--ink);
  border-bottom: var(--keyline) solid var(--ink);
  box-shadow: 0 6px 18px -12px rgba(20, 27, 46, .8);
}

.strip__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
  padding-block: .7rem;
}

.wordmark {
  font-family: var(--display);
  font-weight: 900;
  font-size: clamp(1.45rem, 1.2rem + 1.1vw, 2rem);
  line-height: 1;
  letter-spacing: -.02em;
  text-transform: uppercase;
  color: var(--paper);
  text-decoration: none;
  display: inline-flex;
  align-items: baseline;
  gap: .4em;
  white-space: nowrap;
}
.wordmark b { font-weight: 900; }
.wordmark span {
  font-weight: 700;
  font-size: .5em;
  letter-spacing: .22em;
  color: var(--signal);
  transform: translateY(-.15em);
}

.strip__nav {
  display: flex;
  align-items: center;
  gap: clamp(.9rem, 2vw, 1.9rem);
}

.strip__nav a {
  font-family: var(--display);
  font-weight: 700;
  font-size: 1.12rem;
  letter-spacing: .05em;
  text-transform: uppercase;
  color: var(--paper);
  text-decoration: none;
  padding-block: .25rem;
  border-bottom: var(--rule) solid transparent;
  transition: border-color .16s var(--ease-settle), color .16s;
}
.strip__nav a:hover,
.strip__nav a[aria-current="page"] {
  border-bottom-color: var(--signal);
}
.strip__nav a:hover { color: var(--signal); }

/* ==========================================================================
   The wall
   ========================================================================== */

.wall {
  padding-block: clamp(1.5rem, 4vw, 3rem) clamp(2.5rem, 6vw, 4.5rem);
  position: relative;
}

.wall__grid {
  display: grid;
  gap: clamp(.85rem, 1.6vw, 1.4rem);
  grid-template-columns: repeat(3, 1fr);
  grid-template-areas:
    "mast mast mast"
    "voic voic warr"
    "voic voic ers"
    "serv serv serv";
  align-items: stretch;
}

.panel {
  --hue: var(--sky);
  --hue-deep: var(--sky-deep);
  --hue-pop: var(--signal);
  position: relative;
  display: flex;
  flex-direction: column;
  background: var(--hue);
  border: var(--keyline) solid var(--ink);
  overflow: hidden;
  text-decoration: none;
  color: var(--ink);
  box-shadow: 0 3px 10px -6px rgba(20, 27, 46, .45);
  transition:
    transform .28s var(--ease-settle),
    box-shadow .28s var(--ease-settle);
}

.panel--warrants { --hue: var(--signal); --hue-deep: var(--signal-deep); --hue-pop: var(--sky); }
.panel--voice    { --hue: var(--crimson); --hue-deep: var(--crimson-deep); --hue-pop: var(--sun); }
/* Sky was freed up when AI Dispatch merged into AI Voice. */
.panel--ers      { --hue: var(--sky); --hue-deep: var(--sky-deep); --hue-pop: var(--signal); }
/* Services are not a script. Palm was held back for exactly this kind of
   separation, so the offering reads as a different category on sight. */
.panel--service  { --hue: var(--palm); --hue-deep: var(--palm-deep); --hue-pop: var(--sun); }

.panel--mast { background: var(--paper); }

/* Placement is scoped to the wall. Unscoped `grid-area` names leak into any
   other grid these same panels appear in (the store box wall) and invent
   phantom named columns there. */
.wall__grid .panel--mast { grid-area: mast; }
.wall__grid .panel--voice { grid-area: voic; }
.wall__grid .panel--warrants { grid-area: warr; }
.wall__grid .panel--ers { grid-area: ers; }
.wall__grid .panel--service { grid-area: serv; }

/* Services run full width along the bottom, so their plate is a deliberate
   letterbox crop of the drawing rather than a stretched square. */
.wall__grid .panel--service .panel__art { min-height: clamp(150px, 17vw, 230px); }

/* The flagship. It owns four cells of the wall, and its caption band is set a
   step up so the scale reads as intent rather than as an accident of the grid. */
.wall__grid .panel--hero .panel__title {
  font-size: clamp(2.1rem, 1.2rem + 2.9vw, 3.6rem);
}
.wall__grid .panel--hero .panel__line {
  font-size: clamp(1rem, .96rem + .3vw, 1.15rem);
  max-width: 56ch;
  color: var(--ink);
}
.wall__grid .panel--hero .panel__band {
  padding: clamp(1.1rem, 2vw, 1.6rem) clamp(1.1rem, 2.2vw, 1.7rem) clamp(1.2rem, 2.2vw, 1.6rem);
  gap: .7rem;
}

/* A pasted poster lifting off the wall — offset and soft blur, no costume. */
a.panel:hover,
a.panel:focus-visible {
  transform: translateY(-5px);
  box-shadow: 0 16px 30px -14px rgba(20, 27, 46, .55);
}

.panel__art {
  position: relative;
  flex: 1;
  display: block;
  min-height: clamp(190px, 21vw, 270px);
  transition: transform .2s var(--ease-snap);
}
.panel__art svg {
  width: 100%;
  height: 100%;
  display: block;
  position: absolute;
  inset: 0;
}

/* Type set inside the SVG screen scales with the poster, as printed type would */
.scr-label {
  font-family: var(--display);
  font-weight: 700;
  font-size: 20px;
  letter-spacing: .13em;
  fill: var(--sky);
  text-transform: uppercase;
}
.scr-sub {
  font-family: var(--body);
  font-weight: 500;
  font-size: 10px;
  letter-spacing: .16em;
  fill: rgba(242, 235, 221, .55);
}
.scr-sweep { animation: scrSweep 4s var(--ease-settle) infinite; }

@keyframes scrSweep {
  0%   { transform: translateY(0); }
  68%  { transform: translateY(196px); }
  100% { transform: translateY(196px); }
}

/* Off-register printing: the art shifts one way, the ghost title the other. */
a.panel:hover .panel__art { transform: translate(-2.5px, 2px); }

/* Caption band — printed paper strip. All body copy lives here, on paper. */
.panel__band {
  position: relative;
  z-index: 2;
  background: var(--paper);
  border-top: var(--keyline) solid var(--ink);
  padding: clamp(.85rem, 1.6vw, 1.15rem) clamp(.95rem, 1.8vw, 1.35rem) clamp(.95rem, 1.8vw, 1.2rem);
  display: grid;
  gap: .55rem;
}

.panel__title {
  position: relative;
  font-family: var(--display);
  font-weight: 900;
  font-size: clamp(1.65rem, 1.1rem + 1.8vw, 2.6rem);
  line-height: .88;
  letter-spacing: -.02em;
  text-transform: uppercase;
}
.panel__title::before {
  content: attr(data-text);
  position: absolute;
  inset: 0;
  color: var(--hue-pop);
  mix-blend-mode: multiply;
  opacity: 0;
  transform: translate(0, 0);
  transition: transform .18s var(--ease-snap), opacity .18s linear;
  pointer-events: none;
}
a.panel:hover .panel__title::before {
  opacity: .85;
  transform: translate(4px, -3px);
}

.panel__line {
  font-size: .95rem;
  line-height: 1.45;
  color: var(--ink-soft);
  max-width: 46ch;
}

.panel__meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .4rem .5rem;
  margin-top: .15rem;
}

.badge {
  font-family: var(--display);
  font-weight: 700;
  font-size: .92rem;
  letter-spacing: .06em;
  text-transform: uppercase;
  line-height: 1;
  padding: .34em .55em .28em;
  border: var(--rule) solid var(--ink);
  background: var(--paper);
  color: var(--ink);
  white-space: nowrap;
}
.badge--fill { background: var(--ink); color: var(--paper); }
/* Deep, not the base hue: paper on palm is only 3.88:1 and badge type is 14.7px,
   so it needs 4.5. palm-deep clears 6.3. Any hue used here must clear 4.5 on paper. */
.badge--hue  { background: var(--hue-deep); color: var(--paper); border-color: var(--ink); }
.badge--soft { border-style: dashed; color: var(--ink-soft); }
/* In development. Sun on ink clears 8.6:1 and sun already reads as "unfinished"
   everywhere else on this site, so the signal is consistent. */
.badge--wip { background: var(--sun); color: var(--ink); border-color: var(--ink); }

/* A real price is a confident thing. Full ink, set at display weight, pushed to
   the end of the meta row so it reads as the answer to "how much". */
.panel__price {
  margin-left: auto;
  font-family: var(--display);
  font-weight: 900;
  font-size: 1.5rem;
  line-height: 1;
  letter-spacing: .01em;
  color: var(--ink);
  white-space: nowrap;
}


/* ==========================================================================
   Masthead panel — the thesis
   ========================================================================== */

.mast {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 1.15rem;
  padding: clamp(1.5rem, 3.4vw, 2.9rem);
  z-index: 2;
}

.mast__hook {
  font-family: var(--display);
  font-weight: 900;
  font-size: clamp(2.5rem, 1.2rem + 5.2vw, 6rem);
  line-height: .84;
  letter-spacing: -.025em;
  text-transform: uppercase;
  max-width: 14ch;
}
/* Emphasis is a printed block, not colored text — orange on paper never
   clears 3:1, but ink on orange clears 4.7:1. */
.mast__hook em {
  font-style: normal;
  background: var(--signal);
  color: var(--ink);
  padding: 0 .1em .06em;
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
  box-shadow: 0 0 0 var(--rule) var(--ink);
}

.mast__sub {
  font-size: clamp(1rem, .95rem + .3vw, 1.15rem);
  line-height: 1.55;
  max-width: 54ch;
  color: var(--ink-soft);
}

.mast__actions {
  display: flex;
  flex-wrap: wrap;
  gap: .7rem;
  margin-top: .35rem;
}

/* Buttons — printed blocks, not chrome */
.btn {
  font-family: var(--display);
  font-weight: 800;
  font-size: 1.2rem;
  letter-spacing: .045em;
  text-transform: uppercase;
  line-height: 1;
  display: inline-flex;
  align-items: center;
  gap: .55em;
  padding: .72em 1.15em .62em;
  border: var(--keyline) solid var(--ink);
  background: var(--ink);
  color: var(--paper);
  text-decoration: none;
  cursor: pointer;
  transition: transform .18s var(--ease-snap), background-color .18s, color .18s;
}
.btn:hover { transform: translate(-2px, -2px); background: var(--signal); color: var(--ink); }
.btn svg { width: .85em; height: .85em; flex: none; }

.btn--ghost { background: transparent; color: var(--ink); }
.btn--ghost:hover { background: var(--ink); color: var(--paper); }

/* The Payhip buy button. Styled as our own block so the checkout entry point
   belongs to this world, not to a generic marketplace widget. Payhip's script
   is loaded with data-theme="none" precisely so it leaves the styling alone. */
.btn--buy {
  width: 100%;
  justify-content: center;
  margin-top: .35rem;
}
.btn--buy:hover { background: var(--signal); color: var(--ink); }

.panel__actions {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: .6rem;
  margin-top: .35rem;
}
.panel__actions .btn--buy { margin-top: 0; }
@media (max-width: 560px) {
  .panel__actions { grid-template-columns: 1fr; }
}

/* Before a real Payhip product key exists this is a span, not a link, so there
   is no broken checkout URL to click. */
.btn--pending {
  background: transparent;
  color: var(--ink-soft);
  border-style: dashed;
  cursor: not-allowed;
}
.btn--pending:hover {
  background: transparent;
  color: var(--ink-soft);
  transform: none;
}

/* ==========================================================================
   Requirements strips — frameworks it runs on vs resources it needs.
   Two different axes, and the "needs" one is purchase-blocking, so it gets
   the sun field and the heavier keyline rather than sitting in a badge row.
   ========================================================================== */

.reqs {
  margin-top: clamp(1rem, 2vw, 1.35rem);
  display: grid;
  gap: .5rem;
  max-width: 64ch;
}
.reqs__row {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: .35rem .7rem;
  border: var(--rule) solid var(--ink);
  background: var(--paper);
  padding: .55rem .75rem .5rem;
  font-size: .98rem;
  line-height: 1.45;
}
.reqs__k {
  font-family: var(--display);
  font-weight: 700;
  font-size: .95rem;
  letter-spacing: .09em;
  text-transform: uppercase;
  white-space: nowrap;
}
.reqs__row--need {
  background: var(--sun);
  border-width: var(--keyline);
}

/* ==========================================================================
   Paste-up entrance — pure CSS, no JS gate
   ========================================================================== */

/* A poster arrives by being slapped on the wall, not by fading in — and a
   transform-only entrance can never leave content stranded invisible if the
   animation is throttled or never advances. */
@keyframes pasteup {
  0%   { transform: translateY(-26px) rotate(-1.4deg); }
  60%  { transform: translateY(3px) rotate(.35deg); }
  100% { transform: translateY(0) rotate(0); }
}

.wall__grid > * {
  animation: pasteup .72s var(--ease-settle) backwards;
}
.wall__grid > *:nth-child(1) { animation-delay: .05s; }
.wall__grid > *:nth-child(2) { animation-delay: .19s; }
.wall__grid > *:nth-child(3) { animation-delay: .31s; }
.wall__grid > *:nth-child(4) { animation-delay: .42s; }

/* ==========================================================================
   Proof — dialogue tree vs. what actually happens
   ========================================================================== */

.proof {
  background: var(--paper);
  border-top: var(--keyline) solid var(--ink);
  border-bottom: var(--keyline) solid var(--ink);
  padding-block: clamp(3rem, 7vw, 5.5rem);
  position: relative;
}

.section__head { max-width: 62ch; margin-bottom: clamp(1.8rem, 4vw, 3rem); }
.section__head h2 {
  font-size: clamp(2.1rem, 1.3rem + 3.2vw, 4.2rem);
  margin-bottom: .8rem;
}
.section__head p {
  font-size: clamp(1rem, .96rem + .25vw, 1.12rem);
  color: var(--ink-soft);
  max-width: 68ch;
}

.slab {
  border: var(--keyline) solid var(--ink);
  background: var(--paper);
  position: relative;
  overflow: hidden;
}
.slab__cap {
  font-family: var(--display);
  font-weight: 800;
  font-size: 1.15rem;
  letter-spacing: .07em;
  text-transform: uppercase;
  padding: .6rem .95rem .5rem;
  border-bottom: var(--keyline) solid var(--ink);
  background: var(--ink);
  color: var(--paper);
}
.slab--dead .slab__cap { background: var(--paper-edge); color: var(--ink); }
.slab--live .slab__cap { background: var(--signal); color: var(--ink); }
/* Services carry palm-deep, not palm: paper on palm is 3.8:1 and the cap type
   sits just under the large-text threshold. palm-deep clears 6.3:1. */
.slab--service .slab__cap { background: var(--palm-deep); color: var(--paper); }
.slab__body { padding: clamp(1rem, 2vw, 1.5rem); position: relative; }

.slab--dead .slab__body { background: var(--paper-deep); }


/* ==========================================================================
   Radio traffic — things you can just say, printed as transmissions
   ========================================================================== */

.radio {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: clamp(.5rem, 1.2vw, .75rem);
}
.radio__line {
  display: grid;
  grid-template-columns: 1.6rem minmax(0, 1fr);
  gap: .85rem;
  align-items: start;
  border: var(--keyline) solid var(--ink);
  background: var(--paper);
  padding: .85rem 1rem .8rem .85rem;
  font-size: clamp(1.02rem, .97rem + .32vw, 1.24rem);
  line-height: 1.4;
  text-wrap: pretty;
}
.radio__line svg {
  width: 1.6rem;
  height: 1.6rem;
  flex: none;
  margin-top: -.1em;
  color: var(--signal);
}

@media (max-width: 520px) {
  .radio__line { grid-template-columns: 1.3rem minmax(0, 1fr); gap: .6rem; }
  .radio__line svg { width: 1.3rem; height: 1.3rem; }
}

/* ==========================================================================
   Pull quote — one claim, at poster scale, on ink
   ========================================================================== */

.pull {
  background: var(--ink);
  color: var(--paper);
  border-block: var(--keyline) solid var(--ink);
  padding-block: clamp(3rem, 7vw, 5.5rem);
  position: relative;
}
.pull .halftone {
  background-image: radial-gradient(var(--paper) 1.1px, transparent 1.2px);
  opacity: .16;
}
.pull__inner { position: relative; z-index: 1; }
.pull p {
  font-family: var(--display);
  font-weight: 800;
  font-size: clamp(1.8rem, 1rem + 3.4vw, 3.9rem);
  line-height: .97;
  letter-spacing: -.02em;
  text-transform: uppercase;
  max-width: 24ch;
  text-wrap: balance;
}
.pull p + p { margin-top: .5em; }
.pull em { font-style: normal; color: var(--signal); }

/* ==========================================================================
   Numbered experience list — what you notice, in order of noticing
   ========================================================================== */

.things {
  display: grid;
  gap: clamp(.9rem, 1.8vw, 1.4rem);
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
}
.thing {
  border: var(--keyline) solid var(--ink);
  background: var(--paper);
  padding: clamp(1rem, 2vw, 1.4rem);
  display: grid;
  gap: .5rem;
  align-content: start;
}
.thing h3 {
  font-size: clamp(1.3rem, 1.1rem + .6vw, 1.7rem);
  letter-spacing: -.01em;
  line-height: 1;
}
.thing p { font-size: .97rem; line-height: 1.55; color: var(--ink-soft); }
.thing__tag {
  justify-self: start;
  font-family: var(--display);
  font-weight: 700;
  font-size: .85rem;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--ink);
  background: var(--sun);
  border: var(--rule) solid var(--ink);
  padding: .18em .45em .1em;
}

/* ==========================================================================
   Tool manifest — a printed index of what she can actually do.
   The numbers run 1..20 unbroken across groups because the count IS the claim.
   Monospace here is for real function identifiers, not for atmosphere.
   ========================================================================== */

.tools { counter-reset: tool; display: grid; gap: clamp(1.1rem, 2.4vw, 1.8rem); }

.tools__group {
  border: var(--keyline) solid var(--ink);
  background: var(--paper);
  overflow: hidden;
}
.tools__head {
  background: var(--ink);
  color: var(--paper);
  padding: .6rem clamp(.8rem, 1.6vw, 1.1rem) .5rem;
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: .5rem 1rem;
}
.tools__head h3 {
  font-size: 1.2rem;
  letter-spacing: .05em;
  color: var(--paper);
}
.tools__note {
  font-family: var(--body);
  font-size: .78rem;
  font-weight: 600;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--sun);
}

.tools__list { list-style: none; margin: 0; padding: 0; }

.tools__row {
  display: grid;
  grid-template-columns: 2.4rem minmax(0, 13rem) minmax(0, 1fr);
  gap: .2rem 1rem;
  align-items: baseline;
  padding: .6rem clamp(.8rem, 1.6vw, 1.1rem);
  border-bottom: var(--rule) solid var(--paper-edge);
}
.tools__row:last-child { border-bottom: 0; }

.tools__row::before {
  counter-increment: tool;
  content: counter(tool);
  font-family: var(--display);
  font-weight: 700;
  font-size: 1.05rem;
  color: var(--ink-soft);
  font-variant-numeric: tabular-nums;
}
.tools__row code {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: .92rem;
  font-weight: 600;
  color: var(--ink);
  word-break: break-word;
}
.tools__row span { font-size: .95rem; line-height: 1.5; color: var(--ink-soft); }

@media (max-width: 620px) {
  .tools__row {
    grid-template-columns: 2.2rem minmax(0, 1fr);
    row-gap: .25rem;
  }
  .tools__row span { grid-column: 2; }
}

/* ==========================================================================
   The close — a final printed band that ends the page on the action
   ========================================================================== */

.close {
  background: var(--sun);
  border-block: var(--keyline) solid var(--ink);
  padding-block: clamp(3rem, 6vw, 4.75rem);
  position: relative;
}
.close__inner {
  position: relative;
  z-index: 1;
  display: grid;
  gap: 1.15rem;
  justify-items: start;
  max-width: 62ch;
}
.close h2 { font-size: clamp(2.1rem, 1.3rem + 3.2vw, 4rem); }
.close p { font-size: clamp(1rem, .96rem + .3vw, 1.15rem); line-height: 1.6; max-width: 56ch; }
.close .btn { margin-top: .5rem; }

/* ==========================================================================
   Standing pages — About, Terms
   ========================================================================== */

.page { padding-block: clamp(1.5rem, 4vw, 2.75rem) clamp(3rem, 6vw, 4.5rem); }

.page__head {
  position: relative;
  background: var(--paper);
  border: var(--keyline) solid var(--ink);
  padding: clamp(1.6rem, 4vw, 3.2rem);
  overflow: hidden;
  margin-bottom: clamp(1.5rem, 3.5vw, 2.5rem);
}
.page__head > * { position: relative; z-index: 1; }
.page__head h1 {
  font-size: clamp(2.3rem, 1.3rem + 4.4vw, 5.2rem);
  line-height: .86;
  letter-spacing: -.025em;
  max-width: 18ch;
}
.page__lede {
  margin-top: 1.1rem;
  font-size: clamp(1.05rem, 1rem + .4vw, 1.3rem);
  line-height: 1.5;
  color: var(--ink-soft);
  max-width: 56ch;
}

.blocks {
  display: grid;
  gap: clamp(.9rem, 1.8vw, 1.4rem);
  grid-template-columns: repeat(auto-fit, minmax(290px, 1fr));
}
.blocks--single { grid-template-columns: minmax(0, 72ch); }

.slab__body > * + * { margin-top: .85rem; }
/* 60ch of the `0` glyph lands at ~70 real characters, inside the comfortable
   reading measure. 68ch overshot to 80. */
.slab__body p { font-size: .98rem; line-height: 1.6; max-width: 60ch; }
.slab__body ul {
  margin: 0;
  padding-left: 1.1rem;
  display: grid;
  gap: .45rem;
  font-size: .98rem;
  line-height: 1.55;
}
.slab__body li::marker { color: var(--signal); }
/* A warranty disclaimer has to be conspicuous to actually disclaim anything.
   Caps plus a bordered block is the conventional way to meet that. */
.legal-caps {
  text-transform: uppercase;
  font-size: .84rem;
  line-height: 1.6;
  letter-spacing: .015em;
  font-weight: 600;
  border: var(--rule) solid var(--ink);
  background: var(--paper-deep);
  padding: .85rem .95rem;
  max-width: none;
}
/* Inline links only. Without the :not(.btn) this beats .btn on specificity and
   paints ink text on an ink button, invisible until hover swaps the colours. */
.slab__body a:not(.btn) {
  color: var(--ink);
  font-weight: 600;
  text-decoration-thickness: 2px;
  text-underline-offset: 3px;
}
.slab__body code {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: .88em;
  background: var(--paper-deep);
  border: 1px solid var(--paper-edge);
  padding: .08em .35em;
  word-break: break-word;
}

/* Anything only he can answer is marked on the page itself, never guessed at */
.gap {
  display: inline-block;
  background: var(--sun);
  border: var(--rule) dashed var(--ink);
  color: var(--ink);
  font-family: var(--display);
  font-weight: 700;
  font-size: .92em;
  letter-spacing: .07em;
  text-transform: uppercase;
  padding: .1em .45em .04em;
  line-height: 1.3;
}
/* ==========================================================================
   Footer
   ========================================================================== */

.foot {
  background: var(--ink);
  color: rgba(242, 235, 221, .7);
  padding-block: clamp(2.5rem, 5vw, 3.5rem);
  border-top: var(--keyline) solid var(--ink);
}
.foot__inner {
  display: flex;
  flex-wrap: wrap;
  gap: 2rem;
  justify-content: space-between;
  align-items: flex-start;
}
.foot__nav { display: flex; flex-wrap: wrap; gap: 1.4rem; }
.foot__nav a {
  font-family: var(--display);
  font-weight: 700;
  font-size: 1.05rem;
  letter-spacing: .05em;
  text-transform: uppercase;
  color: var(--paper);
  text-decoration: none;
  border-bottom: var(--rule) solid transparent;
}
.foot__nav a:hover { border-bottom-color: var(--signal); }
.foot__fine { font-size: .85rem; max-width: 46ch; line-height: 1.55; }

/* ==========================================================================
   Store page — the box wall
   ========================================================================== */

.store {
  padding-block: clamp(2rem, 5vw, 3.5rem) clamp(3rem, 7vw, 5rem);
}
.store__head {
  display: grid;
  gap: .9rem;
  max-width: 66ch;
  margin-bottom: clamp(1.8rem, 4vw, 2.8rem);
}
.store__head h1 { font-size: clamp(2.4rem, 1.4rem + 4vw, 5rem); }
.store__head p { color: var(--ink-soft); font-size: clamp(1rem, .96rem + .3vw, 1.15rem); max-width: 66ch; }

/* Three across is the grammar the store keeps from 3 products to 12 — only the
   breakpoints change, never the component. The flagship leads by order, by its
   badge, and by being the box with the live screen, not by being oversized. */
/* auto-fit collapses empty tracks, so two products fill the row properly instead
   of leaving a hole, and the same rule gives three-across once there are more. */
.boxes {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: clamp(.9rem, 1.8vw, 1.5rem);
  align-items: start;
}

/* A square plate at every column width, so slice never crops the poster. */
.boxes .panel__art {
  flex: none;
  aspect-ratio: 1 / 1;
  min-height: 0;
}

.boxes .panel__band { gap: .6rem; }

/* The flagship runs the full width and turns on its side: poster plate on the
   left, the whole spec table beside it. A different composition, not a bigger box. */
.boxes .panel--hero {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: minmax(0, 0.95fr) minmax(0, 1.05fr);
  align-items: stretch;
}
.boxes .panel--hero .panel__art {
  aspect-ratio: auto;
  height: 100%;
  min-height: clamp(320px, 34vw, 480px);
}
.boxes .panel--hero .panel__band {
  border-top: 0;
  border-left: var(--keyline) solid var(--ink);
  align-content: center;
}
.boxes .panel--hero .panel__title {
  font-size: clamp(2rem, 1.2rem + 2.6vw, 3.2rem);
}

@media (max-width: 760px) {
  .boxes .panel--hero { grid-template-columns: 1fr; }
  .boxes .panel--hero .panel__art { aspect-ratio: 1 / 1; height: auto; min-height: 0; }
  .boxes .panel--hero .panel__band {
    border-top: var(--keyline) solid var(--ink);
    border-left: 0;
  }
}

/* Spec rows — the compatibility answers, given before persuasion */
.spec {
  display: grid;
  gap: 0;
  margin-top: .2rem;
  border-top: var(--rule) solid var(--paper-edge);
}
.spec__row {
  display: grid;
  grid-template-columns: 7.5rem 1fr;
  gap: .9rem;
  padding: .5rem 0;
  border-bottom: var(--rule) solid var(--paper-edge);
  align-items: baseline;
}
.spec__k {
  font-family: var(--display);
  font-weight: 700;
  font-size: .95rem;
  letter-spacing: .09em;
  text-transform: uppercase;
  color: var(--ink);
}
.spec__v { font-size: .92rem; line-height: 1.5; color: var(--ink-soft); }

@media (max-width: 560px) {
  .spec__row { grid-template-columns: 1fr; gap: .1rem; padding: .55rem 0; }
}

.store__note {
  margin-top: clamp(2rem, 4vw, 3rem);
  border: var(--rule) dashed var(--ink-soft);
  padding: 1.1rem 1.3rem;
  color: var(--ink-soft);
  font-size: .95rem;
  line-height: 1.6;
  max-width: 74ch;
}
.store__note b { color: var(--ink); font-weight: 700; }
.store__note + .store__note { margin-top: .8rem; }
.store__note a { color: var(--ink); font-weight: 600; text-decoration-thickness: 2px; text-underline-offset: 3px; }

/* ==========================================================================
   Responsive
   ========================================================================== */

@media (max-width: 1020px) {
  .wall__grid {
    grid-template-columns: 1fr 1fr;
    grid-template-areas:
      "mast mast"
      "voic voic"
      "warr ers"
      "serv serv";
  }
  .boxes { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 700px) {
  .wall__grid {
    grid-template-columns: 1fr;
    grid-template-areas: "mast" "voic" "warr" "ers" "serv";
  }
  .boxes { grid-template-columns: 1fr; }
  .strip__inner { flex-wrap: wrap; gap: .5rem 1.1rem; }
  .strip__nav { gap: 1.1rem; }
  /* Half this traffic arrives from a Discord link on a phone — the nav has to
     be thumb-sized, not desktop-sized. */
  .strip__nav a { font-size: 1.02rem; padding-block: .55rem; }
  .panel__price { margin-left: 0; }
}

/* ==========================================================================
   Reduced motion — everything settles instantly, nothing is hidden
   ========================================================================== */

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
  }
  .wall__grid > * { animation: none; }
  a.panel:hover { transform: none; }
  a.panel:hover .panel__art { transform: none; }
}