/* The Anzacs — same page grammar as the Complaint Dept site (ruled strip, big masthead,
   register list + sticky specimen, docket-style form) in the materials of the signs:
   black granite, kraft paper, bronze plaque, ruled index card. */
:root {
  --granite: #131311;
  --granite-2: #1a1814;
  --khaki: #17251c;
  --bronze: #4a3b22;
  --bronze-2: #6b573a;
  --bronze-3: #8a7248;
  --brass: #c0ac85;
  --parchment: #edE4cc;
  --paper: #dacdae;
  --paper-2: #e2d8c0;
  --card: #f4eedf;
  --card-line: #c9d6dc;
  --ink: #1c1409;
  --poppy: #c9452f;
  --poppy-d: #b62d1e;
  --poppy-dd: #7e1f12;
  --serif: "EB Garamond", Georgia, serif;
  --display: "Cinzel", "Times New Roman", serif;
  --type: "Special Elite", "Courier Prime", "Courier New", monospace;
  --grain: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='180' height='180'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='3' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 0  0 0 0 0 0  0 0 0 0 0  0 0 0 .5 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--granite); color: var(--parchment); font-family: var(--serif); font-size: 18px; line-height: 1.5; }
img, svg { max-width: 100%; }
a { color: inherit; }
.wrap { max-width: 1240px; margin: 0 auto; padding: 0 clamp(16px, 4vw, 40px); }
.hp { position: absolute; left: -9999px; height: 0; overflow: hidden; }
.poppy { width: 30px; height: 30px; flex: none; }
.poppy-lg { width: clamp(96px, 13vw, 170px); height: clamp(96px, 13vw, 170px); }
:focus-visible { outline: 3px solid var(--poppy); outline-offset: 2px; }

/* ---------- buttons ---------- */
.btn { display: inline-block; font-family: var(--display); font-weight: 800; font-size: 14px; letter-spacing: .16em; text-transform: uppercase; text-decoration: none; padding: 15px 22px; border: 2px solid transparent; cursor: pointer; transition: background .15s, color .15s, border-color .15s; }
.btn-poppy { background: var(--poppy); color: #fff; border-color: var(--poppy); }
.btn-poppy:hover { background: var(--poppy-d); border-color: var(--poppy-d); }
.btn-ghost { background: transparent; color: var(--parchment); border-color: var(--bronze-3); }
.btn-ghost:hover { border-color: var(--parchment); }
.btn-ink { background: var(--ink); color: var(--parchment); border-color: var(--ink); }
.btn-ink:hover { background: var(--poppy-d); border-color: var(--poppy-d); }
.btn-ghost-ink { background: transparent; color: var(--ink); border-color: var(--ink); }
.btn-ghost-ink:hover { background: var(--ink); color: var(--card); }
.btn-block { width: 100%; text-align: center; }
.btn:disabled { opacity: .5; cursor: progress; }

/* ---------- masthead: granite over a khaki glow ---------- */
.masthead { position: relative; background:
    radial-gradient(1100px 520px at 82% 8%, rgba(23,37,28,.95), transparent 70%),
    radial-gradient(800px 500px at 0% 100%, rgba(74,59,34,.35), transparent 70%),
    var(--granite);
  border-bottom: 6px solid var(--poppy-d); overflow: hidden; }
.masthead::before { content: ""; position: absolute; inset: 0; background: var(--grain); opacity: .35; mix-blend-mode: overlay; pointer-events: none; }
.masthead > .wrap { position: relative; }
.strip { display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap; padding: 12px 0 9px; border-bottom: 1px solid var(--bronze-3); font-family: var(--display); font-size: 11.5px; letter-spacing: .24em; text-transform: uppercase; color: var(--brass); }
.nav { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 16px 0; }
.brand { display: flex; align-items: center; gap: 12px; text-decoration: none; font-family: var(--display); font-weight: 800; letter-spacing: .22em; text-transform: uppercase; font-size: 18px; color: var(--parchment); }
.nav-links { display: flex; align-items: center; gap: clamp(14px, 3vw, 34px); font-family: var(--display); font-size: 12.5px; letter-spacing: .2em; text-transform: uppercase; }
.nav-links a { text-decoration: none; color: var(--brass); padding: 6px 0; border-bottom: 1px solid transparent; }
.nav-links a:hover { color: var(--parchment); border-bottom-color: var(--poppy); }
.nav-links .nav-cta { color: var(--parchment); border: 1px solid var(--poppy); padding: 9px 14px; }
.nav-links .nav-cta:hover { background: var(--poppy); }

.hero { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); gap: clamp(20px, 4vw, 60px); align-items: center; padding: clamp(28px, 6vw, 72px) 0 clamp(40px, 7vw, 84px); }
.eyebrow { font-family: var(--display); font-size: 12.5px; letter-spacing: .26em; text-transform: uppercase; color: var(--brass); margin: 0 0 14px; }
.hero h1 { font-family: var(--display); font-weight: 800; font-size: clamp(48px, 7.6vw, 100px); line-height: .98; letter-spacing: .03em; text-transform: uppercase; margin: 0; color: var(--parchment); }
.rule-3 { border-top: 5px solid var(--bronze-3); border-bottom: 1px solid var(--bronze-3); margin: 22px 0 20px; padding: 11px 0; display: flex; justify-content: space-between; gap: 12px 24px; flex-wrap: wrap; font-family: var(--display); font-size: 11.5px; letter-spacing: .2em; text-transform: uppercase; color: var(--brass); }
.lede { font-size: clamp(19px, 2.1vw, 24px); line-height: 1.45; max-width: 34em; margin: 0 0 26px; color: #d9cfb6; }
.cta-row { display: flex; gap: 12px; flex-wrap: wrap; }

.hero-stage { position: relative; min-height: 500px; padding-bottom: 34px; }
.hero-stage .hero-card { position: absolute; box-shadow: 0 18px 44px rgba(0,0,0,.6), 0 2px 0 rgba(255,255,255,.04) inset; }
.hero-stage .hc-1 { left: 2%; top: 4%; width: 42%; transform: rotate(-4deg); z-index: 2; }
.hero-stage .hc-2 { right: 0; top: 0; width: 48%; transform: rotate(3.5deg); z-index: 1; }
.hero-stage .hc-3 { left: 33%; bottom: 4%; width: 28%; transform: rotate(-1.5deg); z-index: 3; }
.specimen-note { position: absolute; z-index: 5; left: 0; right: 0; bottom: 0; text-align: center; font-family: var(--display); font-size: 10.5px; letter-spacing: .18em; text-transform: uppercase; color: var(--bronze-3); margin: 0; }

/* ---------- scaled sign renders ---------- */
.sign { position: relative; overflow: hidden; width: 100%; }
.sign > .scaled { transform-origin: top left; position: absolute; left: 0; top: 0; }

/* ---------- section heads ---------- */
.sec-head { display: flex; align-items: baseline; gap: 18px; flex-wrap: wrap; border-bottom: 5px solid var(--ink); padding-bottom: 8px; }
.sec-head h2 { margin: 0; font-family: var(--display); font-weight: 800; font-size: clamp(28px, 4.2vw, 46px); letter-spacing: .1em; text-transform: uppercase; color: var(--ink); }
.sec-head .count { margin-left: auto; font-family: var(--display); font-size: 11.5px; letter-spacing: .22em; text-transform: uppercase; color: #6b5b3c; }
.sec-lede { max-width: 46em; font-size: 20px; margin: 16px 0 6px; color: #2c2313; }

/* ---------- THE SIGNS: kraft paper ---------- */
.paper { position: relative; background: var(--paper); color: var(--ink); padding: clamp(36px, 6vw, 72px) 0 clamp(44px, 7vw, 84px); }
.paper::before, .card-bg::before { content: ""; position: absolute; inset: 0; background: var(--grain); opacity: .22; mix-blend-mode: multiply; pointer-events: none; }
.paper > .wrap, .card-bg > .wrap { position: relative; }
.chips { display: flex; gap: 6px; flex-wrap: wrap; margin: 18px 0 4px; }
.chip { font-family: var(--display); font-size: 12px; letter-spacing: .16em; text-transform: uppercase; padding: 9px 14px; border: 1px solid #8f8261; background: transparent; color: var(--ink); cursor: pointer; }
.chip:hover { border-color: var(--ink); }
.chip[aria-selected="true"] { background: var(--ink); color: var(--paper); border-color: var(--ink); }
.register-grid { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); gap: clamp(20px, 4vw, 44px); align-items: start; margin-top: 8px; }
.register { border-top: 1px solid #8f8261; }
.reg-row { display: grid; grid-template-columns: 46px minmax(0, 1fr) auto; align-items: baseline; gap: 12px; width: 100%; text-align: left; padding: 15px 10px; background: transparent; border: 0; border-bottom: 1px solid #b9ab86; cursor: pointer; color: var(--ink); font: inherit; }
.reg-row:hover { background: rgba(28,20,9,.07); }
.reg-row[aria-current="true"] { background: rgba(28,20,9,.12); box-shadow: inset 4px 0 0 var(--poppy-d); }
.reg-code { font-family: var(--display); font-weight: 800; font-size: 15px; color: var(--poppy-d); letter-spacing: .06em; }
.reg-name { font-family: var(--display); font-weight: 600; font-size: 19px; letter-spacing: .06em; text-transform: uppercase; }
.reg-sub { display: block; font-size: 16px; color: #5c4d30; margin-top: 2px; text-transform: none; letter-spacing: 0; font-family: var(--serif); font-weight: 400; }
.reg-size { font-family: var(--type); font-size: 13px; color: #5c4d30; white-space: nowrap; }
.specimen-panel { position: sticky; top: 18px; border: 1px solid var(--ink); background: var(--card); box-shadow: 8px 8px 0 rgba(28,20,9,.18); }
.spec-bar { display: flex; justify-content: space-between; padding: 9px 14px; border-bottom: 1px solid var(--ink); font-family: var(--display); font-size: 11.5px; letter-spacing: .22em; text-transform: uppercase; color: #6b5b3c; }
.spec-stage { padding: 18px; background: #cfc3a4; display: flex; justify-content: center; }
.spec-stage .sign { box-shadow: 0 10px 26px rgba(0,0,0,.35); }
.spec-meta { padding: 12px 14px 4px; display: grid; gap: 6px; }
.spec-meta > div { display: flex; justify-content: space-between; gap: 12px; border-bottom: 1px solid #d3c8ab; padding-bottom: 6px; font-size: 16px; }
.k { font-family: var(--display); font-size: 10.5px; letter-spacing: .2em; text-transform: uppercase; color: #6b5b3c; align-self: center; }
.v { text-align: right; }
.specimen-panel .btn-block { margin: 12px 0 0; width: calc(100% - 28px); margin-left: 14px; margin-right: 14px; }
.spec-fine { margin: 10px 14px 14px; font-size: 14.5px; color: #6b5b3c; }

/* ---------- HOW IT WORKS: bronze plaque ---------- */
.bronze { position: relative; background: var(--bronze); padding: clamp(36px, 6vw, 76px) 0; }
.bronze::before { content: ""; position: absolute; inset: 0; background: var(--grain); opacity: .4; mix-blend-mode: overlay; pointer-events: none; }
.plaque { position: relative; max-width: 980px; margin: 0 auto; border: 8px solid var(--bronze-2); padding: 14px; box-shadow: 0 12px 40px rgba(0,0,0,.45); }
.plaque-inner { border: 1px solid #7e683f; padding: clamp(24px, 5vw, 56px) clamp(18px, 5vw, 60px); text-align: center; }
.plaque h2 { font-family: var(--display); font-weight: 800; letter-spacing: .3em; text-transform: uppercase; font-size: clamp(24px, 3.6vw, 36px); margin: 18px 0 8px; color: var(--parchment); text-indent: .3em; }
.steps { list-style: none; counter-reset: step; margin: 34px 0 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0; text-align: left; border-top: 1px solid #8a7248; }
.steps li { counter-increment: step; padding: 24px 22px 24px 60px; border-bottom: 1px solid #8a7248; position: relative; }
.steps li:nth-child(odd) { border-right: 1px solid #8a7248; }
.steps li::before { content: counter(step); position: absolute; left: 16px; top: 22px; font-family: var(--display); font-weight: 800; font-size: 30px; color: var(--poppy); }
.steps h3 { font-family: var(--display); font-weight: 600; letter-spacing: .14em; text-transform: uppercase; font-size: 15px; color: var(--parchment); margin: 0 0 8px; }
.steps p { margin: 0; color: #d3c7a8; font-size: 17.5px; }
.steps a { color: var(--parchment); text-decoration-color: var(--poppy); text-underline-offset: 3px; }
.plaque-foot { margin: 26px 0 0; font-style: italic; color: var(--brass); font-size: 17px; }

/* ---------- THE FORM: ruled index card ---------- */
.card-bg { position: relative; padding: clamp(36px, 6vw, 72px) 0 clamp(48px, 7vw, 88px); color: var(--ink);
  background:
    linear-gradient(90deg, transparent 0 calc(50% - 620px + 22px), rgba(182,45,30,.55) calc(50% - 620px + 22px) calc(50% - 620px + 24px), transparent calc(50% - 620px + 24px)),
    repeating-linear-gradient(0deg, transparent 0 33px, var(--card-line) 33px 34px),
    var(--card); }
.card-bg::before { opacity: .16; }
.sec-head.on-card { border-bottom-color: var(--ink); }
.sec-lede.on-card { color: #2c2313; }
.make-grid { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); gap: clamp(22px, 4vw, 48px); align-items: start; margin-top: 22px; }
.attest { background: rgba(244,238,223,.92); border: 1px solid var(--ink); padding: clamp(16px, 3vw, 30px); box-shadow: 8px 8px 0 rgba(28,20,9,.16); font-family: var(--type); }
.attest fieldset { border: 0; border-top: 3px double var(--ink); margin: 0 0 22px; padding: 18px 0 0; min-width: 0; }
.attest fieldset:first-of-type { border-top: 0; padding-top: 0; }
.attest legend { padding: 0 0 12px; font-family: var(--display); font-weight: 800; font-size: 15px; letter-spacing: .22em; text-transform: uppercase; display: flex; align-items: center; gap: 10px; }
.no { display: inline-grid; place-items: center; width: 26px; height: 26px; border: 2px solid var(--poppy-d); color: var(--poppy-d); font-size: 14px; letter-spacing: 0; }
.row { display: grid; gap: 14px; margin-bottom: 14px; }
.row.two { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.row.three { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.fld { display: block; margin-bottom: 14px; min-width: 0; }
.row .fld { margin-bottom: 0; }
.fld > span { display: block; font-size: 12px; letter-spacing: .12em; text-transform: uppercase; color: #5c4d30; margin-bottom: 4px; }
.fld em { font-style: normal; color: var(--poppy-d); margin-left: 4px; }
.fld small { text-transform: none; letter-spacing: 0; color: #7a6a48; font-size: 12px; }
.attest input:not([type=checkbox]), .attest select, .attest textarea { width: 100%; font: inherit; font-size: 16px; color: var(--ink); background: transparent; border: 0; border-bottom: 1.5px solid #6b5b3c; padding: 7px 2px; border-radius: 0; }
.attest textarea { border: 1.5px solid #6b5b3c; padding: 8px; }
.attest input:focus, .attest select:focus, .attest textarea:focus { outline: none; border-color: var(--poppy-d); background: rgba(201,69,47,.06); }
.attest input.bad { border-bottom-color: var(--poppy-d); background: rgba(201,69,47,.1); }
.checks { display: grid; gap: 8px; margin: 4px 0 16px; }
.checks .lbl { font-size: 12px; letter-spacing: .12em; text-transform: uppercase; color: #5c4d30; }
.checks label, .confirm { display: flex; align-items: flex-start; gap: 10px; font-size: 15.5px; cursor: pointer; }
.checks input, .confirm input { width: 19px; height: 19px; margin: 2px 0 0; accent-color: var(--poppy-d); flex: none; }
.hint { font-size: 14px; color: #5c4d30; margin: 2px 0 14px; font-family: var(--serif); }
.confirm { margin-top: 6px; font-weight: 700; }
.picks { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.pick { display: grid; grid-template-columns: 22px minmax(0, 1fr); gap: 10px; padding: 11px 12px; border: 1.5px solid #8f8261; cursor: pointer; align-items: start; background: rgba(255,255,255,.35); }
.pick:hover { border-color: var(--ink); }
.pick.on { border-color: var(--poppy-d); background: rgba(201,69,47,.09); box-shadow: inset 4px 0 0 var(--poppy-d); }
.pick input { width: 18px; height: 18px; accent-color: var(--poppy-d); margin: 2px 0 0; }
.pick b { display: block; font-family: var(--display); font-weight: 800; font-size: 13.5px; letter-spacing: .1em; text-transform: uppercase; }
.pick i { display: block; font-style: normal; font-size: 12.5px; color: #5c4d30; }
.submit-row { display: flex; gap: 12px; flex-wrap: wrap; margin-top: 8px; }
.status { min-height: 1.5em; margin: 14px 0 0; font-size: 15px; }
.status.err { color: var(--poppy-d); }
.status.ok { color: #1f5b2c; }
.fine { margin: 6px 0 0; font-family: var(--serif); font-size: 14.5px; color: #5c4d30; }

.live { position: sticky; top: 16px; }
.live-bar { display: flex; justify-content: space-between; background: var(--ink); color: var(--parchment); padding: 9px 14px; font-family: var(--display); font-size: 11.5px; letter-spacing: .22em; text-transform: uppercase; }
.live-tabs { display: flex; flex-wrap: wrap; gap: 0; background: #2a2114; }
.live-tab { flex: 1 1 0; min-width: 44px; font-family: var(--display); font-size: 12px; letter-spacing: .1em; padding: 10px 6px; background: transparent; color: var(--brass); border: 0; border-right: 1px solid #4a3b22; cursor: pointer; }
.live-tab[aria-selected="true"] { background: var(--card); color: var(--ink); }
.live-stage { background: #cfc3a4; padding: 18px; display: flex; justify-content: center; border: 1px solid var(--ink); border-top: 0; }
.live-stage .sign { box-shadow: 0 10px 26px rgba(0,0,0,.35); }
.live-note { font-family: var(--serif); font-size: 15px; color: #5c4d30; margin: 10px 2px 0; }

/* ---------- FOOTER: granite, red band ---------- */
.granite { position: relative; background: var(--granite); border-top: 6px solid var(--poppy-d); padding: 40px 0 26px; color: #cfc4a8; }
.granite::before { content: ""; position: absolute; inset: 0; background: var(--grain); opacity: .3; mix-blend-mode: overlay; pointer-events: none; }
.granite > .wrap { position: relative; }
.foot-grid { display: grid; grid-template-columns: 1.1fr 1fr 1fr; gap: 32px; }
.foot-grid h3 { font-family: var(--display); font-size: 12px; letter-spacing: .22em; text-transform: uppercase; color: var(--brass); margin: 0 0 8px; font-weight: 600; }
.foot-grid p { margin: 8px 0 0; font-size: 16.5px; }
.brand-foot { font-size: 16px; }
.foot-base { margin-top: 30px; padding-top: 12px; border-top: 1px solid var(--bronze-3); display: flex; justify-content: space-between; gap: 12px; flex-wrap: wrap; font-family: var(--display); font-size: 11px; letter-spacing: .22em; text-transform: uppercase; color: var(--bronze-3); }

/* ---------- responsive ---------- */
@media (max-width: 980px) {
  .hero { grid-template-columns: 1fr; }
  .hero-stage { min-height: 440px; max-width: 560px; margin: 0 auto; width: 100%; }
  .register-grid, .make-grid { grid-template-columns: 1fr; }
  .specimen-panel, .live { position: static; }
  .live { order: -1; }
  .steps { grid-template-columns: 1fr; }
  .steps li:nth-child(odd) { border-right: 0; }
  .foot-grid { grid-template-columns: 1fr; }
  .card-bg { background: repeating-linear-gradient(0deg, transparent 0 33px, var(--card-line) 33px 34px), var(--card); }
}
@media (max-width: 620px) {
  .nav-links a:not(.nav-cta) { display: none; }
  .row.two, .row.three, .picks { grid-template-columns: 1fr; }
  .strip span:last-child { display: none; }
  .hero-stage { min-height: 360px; }
  .btn { padding: 14px 16px; font-size: 13px; }
  .reg-row { grid-template-columns: 38px minmax(0, 1fr); }
  .reg-size { grid-column: 2; }
}
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

/* ---------- giant masthead name (the Complaint Dept treatment) ---------- */
.wordmark { display: flex; align-items: center; gap: clamp(10px, 2.2vw, 30px); padding: clamp(14px, 3vw, 40px) 0 clamp(10px, 1.6vw, 20px); }
.wordmark .poppy { width: clamp(34px, 8.6vw, 124px); height: clamp(34px, 8.6vw, 124px); }
.wm-name { margin: 0; font-family: var(--display); font-weight: 800; font-size: clamp(38px, 10.4vw, 150px); line-height: .9; letter-spacing: .035em; text-transform: uppercase; white-space: nowrap; color: var(--parchment); text-shadow: 0 3px 0 rgba(0,0,0,.35); }
.wm-rule { margin: 0; }
.hero-h { margin: 0; font-family: var(--display); font-weight: 800; font-size: clamp(38px, 5.4vw, 72px); line-height: 1; letter-spacing: .04em; text-transform: uppercase; color: var(--brass); }
.hero { padding-top: clamp(24px, 4vw, 48px); }
.hero-copy .lede { margin-top: 20px; }

/* ---------- poppies scattered outside the plaque ---------- */
.bronze { overflow: hidden; }
.poppy-field { position: absolute; inset: 0; pointer-events: none; z-index: 0; }
.pp { position: absolute; opacity: var(--o, 1); transform: rotate(var(--r, 0deg)); filter: drop-shadow(0 5px 7px rgba(0,0,0,.4)); max-width: none; }
.pp-m { display: none; }
.bronze > .wrap { position: relative; z-index: 1; }
@media (max-width: 760px) {
  .pp-s { display: none; }
  .pp-m { display: block; }
  .bronze { padding-top: 86px; padding-bottom: 86px; }
}
@media (max-width: 760px) {
  .nav .brand { display: none; }
  .nav { justify-content: flex-end; padding: 12px 0 0; }
}

/* =====================================================================
   THE FORM, inverted: khaki-green gate-board section, granite form panel,
   big light boxed fields so it is obvious exactly where to type.
   ===================================================================== */
[hidden] { display: none !important; }
.card-bg { background: radial-gradient(900px 500px at 85% 0%, #22382a, transparent 70%), #17251c; color: var(--parchment); }
.card-bg::before { opacity: .35; mix-blend-mode: overlay; }
.sec-head.on-card { border-bottom-color: var(--brass); }
.sec-head.on-card h2 { color: var(--parchment); }
.sec-head .count { color: var(--brass); }
.card-bg .sec-head .count { color: var(--brass); }
.sec-lede.on-card { color: #dcd2b8; }

.attest { background: rgba(14,14,12,.82); border: 2px solid var(--bronze-3); box-shadow: 10px 10px 0 rgba(0,0,0,.4); color: var(--parchment); }
.attest fieldset { border-top: 3px double var(--bronze-3); }
.attest legend { color: var(--parchment); font-size: 16px; }
.no { border-color: #e9634b; color: #ff8d77; }

.fld > span { color: var(--brass); font-size: 13px; letter-spacing: .1em; font-weight: 700; margin-bottom: 7px; }
.fld em { color: #ff8d77; font-weight: 700; }
.fld small { color: #b3a882; }

.attest input:not([type=checkbox]), .attest select, .attest textarea {
  background: #f4eedf; color: #1c1409; border: 2px solid var(--brass); border-radius: 3px;
  padding: 12px 14px; min-height: 50px; font-size: 17px; line-height: 1.3;
  box-shadow: inset 0 2px 0 rgba(0,0,0,.08); transition: border-color .12s, box-shadow .12s;
}
.attest textarea { min-height: 96px; }
.attest input::placeholder, .attest textarea::placeholder { color: #8d8266; opacity: 1; }
.attest input:not([type=checkbox]):hover, .attest select:hover, .attest textarea:hover { border-color: #fff; }
.attest input:focus, .attest select:focus, .attest textarea:focus { outline: none; border-color: #fff; background: #fff; box-shadow: 0 0 0 4px rgba(233,99,75,.65); }
.attest input.bad { border-color: #ff6a50; background: #ffe9e3; box-shadow: 0 0 0 3px rgba(255,106,80,.5); }
.attest select { appearance: auto; }

.checks .lbl { color: var(--brass); font-size: 13px; font-weight: 700; letter-spacing: .1em; }
.checks label, .confirm { color: var(--parchment); font-size: 16.5px; }
.checks label { padding: 10px 12px; border: 2px solid #4f4128; background: rgba(255,255,255,.04); }
.checks label:hover { border-color: var(--brass); }
.checks input, .confirm input { width: 22px; height: 22px; }
.confirm { padding: 14px; border: 2px solid var(--bronze-3); background: rgba(255,255,255,.05); }
.hint { color: #cdc2a2; }
.fine { color: #bfb494; }
.status.err { color: #ff9d8a; font-weight: 700; }
.status.ok { color: #9ad7a4; font-weight: 700; }

.pick { background: rgba(255,255,255,.05); border: 2px solid #5a4a2d; color: var(--parchment); }
.pick:hover { border-color: var(--brass); }
.pick.on { border-color: #ff7c62; background: rgba(233,99,75,.18); box-shadow: inset 5px 0 0 #ff7c62; }
.pick i { color: var(--brass); }
.pick input { width: 22px; height: 22px; }

.attest .btn-ghost-ink { color: var(--parchment); border-color: var(--brass); }
.attest .btn-ghost-ink:hover { background: var(--parchment); color: var(--ink); }

.live-bar { background: #0e0e0c; border: 2px solid var(--bronze-3); border-bottom: 0; color: var(--parchment); }
.live-tabs { background: #0e0e0c; border-left: 2px solid var(--bronze-3); border-right: 2px solid var(--bronze-3); }
.live-tab { color: var(--brass); border-right-color: #3a2f1b; }
.live-tab[aria-selected="true"] { background: var(--card); color: var(--ink); }
.live-stage { border: 2px solid var(--bronze-3); border-top: 0; background: #cfc3a4; }
.live-note { color: #cdc2a2; }

/* =====================================================================
   BIG TYPE, fitted to the width of the page (container units), so the name and
   "Lest we forget." fill the masthead on any screen instead of a fixed pixel cap.
   ===================================================================== */
.masthead > .wrap { max-width: 1760px; }
.wordmark { container-type: inline-size; display: flex; align-items: center; gap: 2.2cqw; padding: 2.4cqw 0 1.2cqw; }
.wordmark .poppy { width: 10cqw; height: 10cqw; flex: none; }
.wm-name { font-size: 12.1cqw; line-height: .9; letter-spacing: .035em; white-space: nowrap; margin: 0; }
.lwf { padding: 1.6vw 0 0; }
.lwf .hero-h { font-size: clamp(38px, 5.4vw, 72px); line-height: 1; letter-spacing: .04em; margin: 0; color: var(--brass); }
.hero { padding-top: clamp(20px, 3vw, 44px); }
.hero { align-items: start; }
.hero-copy .lede { margin-top: 6px; }

/* ---- soldier finder ---- */
#finder{position:relative;margin:0 0 28px;padding:18px 18px 16px;background:#131311;border:2px solid #b08d3c;border-radius:4px}
#finder .finder-label{display:block;font:700 .78rem/1 var(--sans,system-ui);letter-spacing:.16em;text-transform:uppercase;color:#d9b45a;margin-bottom:10px}
#finder-input{width:100%;min-height:56px;padding:0 16px;font-size:1.15rem;background:#f4eedf;color:#131311;border:2px solid #b08d3c;border-radius:3px}
#finder-input:focus{outline:3px solid #c9452f;outline-offset:2px}
#finder-note{margin:10px 2px 0;font-size:.9rem;line-height:1.45;color:#cfc6ad}
#finder-note a{color:#f0d488}
#finder .finder-box{position:relative}
#finder-list{position:absolute;left:0;right:0;top:calc(100% + 4px);z-index:30;margin:0;padding:0;list-style:none;max-height:min(60vh,440px);overflow:auto;background:#f4eedf;color:#131311;border:2px solid #b08d3c;border-radius:3px;box-shadow:0 18px 40px rgba(0,0,0,.55)}
#finder-list li{padding:10px 14px;border-bottom:1px solid #d8ccb0;cursor:pointer;display:grid;gap:2px}
#finder-list li[aria-selected="true"],#finder-list li[role=option]:hover{background:#e6d9b6}
#finder-list .f-name{font-size:1.05rem}
#finder-list .f-line{font-size:.86rem;color:#4a4331}
#finder-list .f-ship{color:#7a2a1c}
#finder-list .empty,#finder-list .more{cursor:default;font-size:.88rem;color:#5b5440}
.ship-card{margin:0 0 24px;display:grid;grid-template-columns:minmax(0,220px) 1fr;gap:16px;align-items:center;padding:14px;background:#131311;border:1px solid #b08d3c;border-radius:4px;color:#e9e1c9}
.ship-card[hidden]{display:none}
.ship-card .sc-img{width:100%;height:auto;max-height:160px;object-fit:contain;background:#000;border-radius:2px}
.ship-card .sc-name{font-weight:700;letter-spacing:.06em}
.ship-card .sc-meta{font-size:.9rem;color:#cfc6ad;margin-top:4px}
.ship-card .sc-credit{font-size:.72rem;color:#9d947c;margin-top:8px}
@media (max-width:560px){.ship-card{grid-template-columns:1fr}}

.ship-card figcaption>*{display:block}
.ship-card{margin-inline:0}

/* ---- How it works: black page, larger type ---- */
.bronze { background: #0a0a09; }
.bronze::before { opacity: .22; }
.plaque { border-color: var(--bronze-3); background: #0e0e0c; max-width: 1180px; }
.plaque-inner { border-color: #6b573a; }
.plaque h2 { font-size: clamp(32px, 5vw, 56px); }
.steps li { padding: 32px 28px 32px 76px; }
.steps li::before { font-size: 44px; left: 20px; top: 26px; }
.steps h3 { font-size: clamp(18px, 2vw, 23px); margin-bottom: 12px; }
.steps p { font-size: clamp(19px, 1.9vw, 23px); line-height: 1.55; color: #e6dcc0; }
.plaque-foot { font-size: clamp(18px, 1.8vw, 22px); }

/* ---- fieldset 1 heading: gold; the box no longer repeats it ---- */
.attest fieldset:first-of-type legend { color: #d9b45a; font-size: 18px; }
#finder .finder-label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

.wm-rule > span:first-child { font-size: clamp(13px, 1.7vw, 22px); letter-spacing: .12em; color: var(--parchment); }

/* ---- Te Hokowhitu-a-Tu: Maori Contingent and Pioneer Battalion ---- */
.pio { position: relative; overflow: hidden; background: radial-gradient(120% 90% at 78% 40%, #0f2a20 0%, #08120e 55%, #050908 100%); padding: clamp(44px, 7vw, 96px) 0; border-block: 3px solid var(--bronze-3); }
.pio-fern { position: absolute; color: #cfd8d2; opacity: .07; pointer-events: none; }
.pio-fern-a { width: min(70vw, 620px); height: min(70vw, 620px); left: -8%; bottom: -14%; transform: rotate(-12deg); }
.pio-fern-b { width: min(50vw, 440px); height: min(50vw, 440px); right: -6%; top: -10%; transform: rotate(160deg); }
.pio-grid { position: relative; z-index: 1; display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, .75fr); gap: clamp(24px, 5vw, 72px); align-items: center; }
.pio-kicker { margin: 0 0 12px; font-family: var(--display); font-size: clamp(12px, 1.3vw, 15px); letter-spacing: .22em; text-transform: uppercase; color: #d9b45a; }
.pio-h { margin: 0 0 18px; font-family: var(--display); font-weight: 800; font-size: clamp(38px, 7vw, 92px); line-height: 1; letter-spacing: .02em; color: var(--parchment); }
.pio-lede { margin: 0 0 16px; font-size: clamp(18px, 1.9vw, 23px); line-height: 1.55; color: #e6dcc0; max-width: 46em; }
.pio-note { margin: 18px 0 0; font-size: 15px; font-style: italic; color: #a99f85; max-width: 46em; }
.pio-panel { position: relative; aspect-ratio: 3 / 4; max-width: 380px; margin-inline: auto; width: 100%; border: 8px solid var(--bronze-3); outline: 1px solid #6b573a; outline-offset: -20px; background: #0a0f0c; display: grid; place-items: center; align-content: center; gap: 10px; text-align: center; box-shadow: 0 16px 50px rgba(0,0,0,.6); }
.pio-mark { width: 78%; height: 62%; color: #e8e2d0; }
.pio-name { font-family: var(--display); font-weight: 800; font-size: clamp(18px, 2.2vw, 26px); letter-spacing: .12em; color: var(--parchment); text-transform: uppercase; }
.pio-sub { font-family: var(--display); font-size: 12px; letter-spacing: .2em; color: #d9b45a; text-transform: uppercase; padding-bottom: 14px; }
@media (max-width: 820px) { .pio-grid { grid-template-columns: 1fr; } .pio-panel { max-width: 300px; order: -1; } }

.finder-scope { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 12px; }
.finder-scope .chip { min-height: 44px; padding: 0 16px; font: 700 .82rem/1 var(--sans, system-ui); letter-spacing: .08em; text-transform: uppercase; color: #e6dcc0; background: transparent; border: 2px solid #6b573a; border-radius: 3px; cursor: pointer; }
.finder-scope .chip.on { background: #d9b45a; color: #131311; border-color: #d9b45a; }
.finder-scope .chip:focus-visible { outline: 3px solid #c9452f; outline-offset: 2px; }
.pio-h { font-size: clamp(32px, 5.4vw, 74px); white-space: nowrap; }
.pio-panel { align-content: center; padding: 0 22px; }
.pio-mark { width: 100%; height: auto; aspect-ratio: 420 / 430; max-height: 66%; }
.pio-name { font-size: clamp(15px, 1.7vw, 20px); letter-spacing: .08em; white-space: nowrap; }
.pio-sub { font-size: 11px; letter-spacing: .14em; }
.pio-h { font-size: clamp(30px, 4.5vw, 62px); } @media (max-width:820px){ .pio-h { font-size: clamp(28px, 8.4vw, 56px); } }
.live-tab { font-size: 10.5px; letter-spacing: .1em; padding: 0 6px; line-height: 1.2; white-space: normal; }

/* ---- WW1 / WW2 distinction ---- */
.pio-split-wrap { position: relative; z-index: 1; margin-top: clamp(28px, 5vw, 56px); }
.pio-split { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(14px, 2.4vw, 28px); }
.pio-card { border: 2px solid #6b573a; background: rgba(8,14,11,.72); padding: clamp(18px, 2.6vw, 30px); display: flex; flex-direction: column; align-items: flex-start; gap: 6px; }
.pio-card-on { border-color: #d9b45a; }
.pio-era { font-family: var(--display); font-size: 12px; letter-spacing: .2em; text-transform: uppercase; color: #d9b45a; }
.pio-card h3 { margin: 6px 0 0; font-family: var(--display); font-weight: 800; font-size: clamp(22px, 2.6vw, 32px); letter-spacing: .04em; color: var(--parchment); }
.pio-sub2 { margin: 0 0 6px; font-style: italic; color: #b9ae92; font-size: 17px; }
.pio-card p:not(.pio-sub2) { margin: 0 0 14px; font-size: clamp(17px, 1.6vw, 20px); line-height: 1.5; color: #e6dcc0; }
.pio-card .btn { margin-top: auto; }
@media (max-width: 820px) { .pio-split { grid-template-columns: 1fr; } }

.pick { grid-template-columns: 22px minmax(0, 1fr); }
.pick-size { grid-column: 2; margin-top: 8px; min-height: 42px; width: 100%; padding: 0 10px; font: inherit; font-size: 14px; color: #131311; background: #f4eedf; border: 2px solid var(--bronze-3); border-radius: 3px; }
.pick:not(.on) .pick-size { display: none; }

.spec-stage, .live-stage { gap: 14px; align-items: flex-start; }
.remember { margin: .2em 0 0; font-family: var(--display); font-weight: 600; font-size: clamp(24px, 4.2vw, 56px); letter-spacing: .05em; color: var(--parchment); line-height: 1.1; }
.ode { margin: 0 0 26px; padding: 4px 0 4px 20px; border-left: 3px solid var(--bronze-3); max-width: 34em; }
.ode p { margin: 0 0 14px; font-style: italic; font-size: clamp(17px, 1.6vw, 21px); line-height: 1.6; color: #d8cdae; }
.ode em { color: var(--parchment); font-style: italic; font-weight: 600; }
.ode footer { font-family: var(--display); font-size: 11px; letter-spacing: .18em; text-transform: uppercase; color: var(--brass); }
.hero-stage .hc-3 { left: auto; right: 5%; bottom: 3%; width: 26%; }
.pio-badge { width: 52%; height: auto; max-height: 58%; object-fit: contain; }
.pio-credit { font-size: 10px; letter-spacing: .04em; color: #8f866e; padding: 0 16px 12px; line-height: 1.4; }

/* ---- The signs: selector on top, big specimen underneath ---- */
.register-grid { grid-template-columns: 1fr; gap: 26px; }
.register { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0; border-top: 1px solid #8f8261; border-left: 1px solid #8f8261; }
.register .reg-row { grid-template-columns: 34px minmax(0, 1fr); border-right: 1px solid #8f8261; border-bottom: 1px solid #8f8261; }
.register .reg-size { grid-column: 2; }
.specimen-panel { position: static; }
.spec-stage { padding: clamp(18px, 3vw, 40px); gap: clamp(18px, 3vw, 44px); }
.spec-meta { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; padding: 16px 18px 6px; }
.spec-meta > div { flex-direction: column; gap: 4px; }
.specimen-panel .btn-block { width: auto; display: block; max-width: 420px; margin: 14px auto 0; }
@media (max-width: 820px) { .register { grid-template-columns: 1fr; } .spec-meta { grid-template-columns: 1fr; gap: 8px; } .spec-meta > div { flex-direction: row; } }
.register, .register-grid { grid-template-columns: minmax(0, 1fr); } @media (min-width: 821px) { .register { grid-template-columns: repeat(3, minmax(0, 1fr)); } }

/* hero: the first sign is big and square-on so the soldier's name reads at a glance */
.hero-stage { min-height: 620px; }
.hero-stage .hc-1 { left: 0; top: 0; width: 54%; transform: rotate(-1.5deg); z-index: 4; }
.hero-stage .hc-2 { right: 0; top: 6%; width: 50%; transform: rotate(3deg); z-index: 1; }
.hero-stage .hc-3 { left: auto; right: 3%; bottom: 2%; width: 24%; transform: rotate(-1.5deg); z-index: 2; }
@media (max-width: 900px) { .hero-stage { min-height: 520px; } }
@media (max-width: 560px) { .hero-stage { min-height: 460px; } .hero-stage .hc-1 { width: 62%; } .hero-stage .hc-2 { width: 46%; top: 12%; } .hero-stage .hc-3 { width: 26%; } }
.hero-stage .hc-1 { left: 3%; top: 2%; }
.ode { max-width: 40em; }
.ode p { font-size: clamp(22px, 2.4vw, 34px); line-height: 1.5; margin-bottom: 20px; }
.ode footer { font-size: 13px; }
.pio-badge { width: 84%; max-height: 70%; }
.pio-panel { gap: 6px; }
.ode p { font-size: clamp(19px, 1.85vw, 25px); }
.hero-stage { padding-bottom: 64px; }
.hero-stage .hc-3 { bottom: 9%; }
.pio-card p.pio-honour { font-style: italic; color: var(--parchment); border-left: 3px solid #d9b45a; padding-left: 14px; }

.pio-badges { display: flex; gap: 18px; margin: 4px 0 10px; width: 100%; }
.pio-badges figure { margin: 0; flex: 1 1 0; min-width: 0; display: flex; flex-direction: column; align-items: center; text-align: center; gap: 8px; padding: 14px 8px 10px; background: #050908; border: 1px solid #3a3020; }
.pio-badges img { width: 100%; max-width: 190px; height: auto; max-height: 220px; object-fit: contain; }
.pio-badges figcaption { font-family: var(--display); font-size: 12px; letter-spacing: .12em; text-transform: uppercase; color: var(--parchment); line-height: 1.35; }
.pio-badges small { display: block; margin-top: 4px; font-family: var(--serif); font-size: 11px; letter-spacing: 0; text-transform: none; color: #8f866e; }
.pio-badges-one figure { max-width: 260px; }
@media (max-width: 560px) { .pio-badges { flex-direction: column; } }

/* specimen details: dark, large, one size per line */
.spec-meta .k { font-family: var(--display); font-size: 14px; font-weight: 700; letter-spacing: .2em; color: #1c1409; }
.spec-meta .v { font-family: var(--display); font-size: clamp(19px, 1.9vw, 25px); font-weight: 700; line-height: 1.35; color: #120c04; }
.spec-meta .v .sz { display: block; }
.spec-meta .v .sz b { font-weight: 800; margin-right: .5em; }
.spec-meta > div { text-align: left; align-items: flex-start; }
.spec-meta > div .v { text-align: left; }
.spec-meta > div { display: flex; flex-direction: column; justify-content: flex-start; align-items: flex-start; }
.spec-meta .k { text-align: left; }
.spec-meta .k { width: 100%; text-align: left !important; }

/* sign names: larger, bolder, one above the other */
.register, .register-grid { grid-template-columns: minmax(0, 1fr) !important; }
.register .reg-row { grid-template-columns: 52px minmax(0, 1fr) auto; padding: 22px 16px; }
.register .reg-size { grid-column: auto; font-size: 15px; font-weight: 700; color: #1c1409; }
.reg-code { font-size: 26px; }
.reg-name { font-size: clamp(26px, 3vw, 38px); font-weight: 800; letter-spacing: .05em; line-height: 1.15; }
.reg-sub { font-size: 19px; color: #3a2e18; margin-top: 6px; }
.live-tabs { flex-direction: column; }
.live-tab { flex: none; width: 100%; text-align: left; font-size: 17px; font-weight: 800; letter-spacing: .08em; padding: 14px 16px; border-right: 0; border-bottom: 1px solid #3a2f1b; text-transform: uppercase; line-height: 1.2; }
@media (max-width: 820px) { .register .reg-row { grid-template-columns: 40px minmax(0, 1fr); } .register .reg-size { grid-column: 2; } }

/* ---- the ships ---- */
.ships { background: #0a0a09; padding: clamp(40px, 6vw, 84px) 0; border-block: 3px solid var(--bronze-3); }
.ships .sec-head { border-bottom-color: var(--bronze-3); }
.ships .sec-head h2, .ships-lede { color: var(--parchment); }
.ships .count { color: var(--brass); }
.ships-lede { font-size: clamp(18px, 1.8vw, 22px); max-width: 46em; }
.ship-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(14px, 2vw, 26px); margin-top: 26px; }
.ship { margin: 0; background: #131311; border: 1px solid #3a3020; display: flex; flex-direction: column; }
.ship img { width: 100%; aspect-ratio: 4 / 3; object-fit: contain; background: #000; display: block; }
.ship figcaption { padding: 14px 16px 16px; display: grid; gap: 4px; }
.ship b { font-family: var(--display); font-weight: 800; font-size: clamp(20px, 2vw, 26px); letter-spacing: .08em; text-transform: uppercase; color: var(--parchment); }
.ship span { font-size: 17px; color: #d8cdae; }
.ship small { font-size: 12px; color: #8f866e; line-height: 1.4; }
.ships-more { text-align: center; margin: 28px 0 0; }
.ships-credit { color: #8f866e; margin-top: 18px; }
@media (max-width: 900px) { .ship-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px) { .ship-grid { grid-template-columns: 1fr; } }
/* the ship card inside the form: bigger */
.ship-card { grid-template-columns: minmax(0, 300px) 1fr; }
.ship-card .sc-img { max-height: 240px; }
.ship-card .sc-name { font-size: 20px; }

/* the Cenotaph credit under the hero signs: out of the way, below them, readable */
.hero-stage { padding-bottom: 96px; }
.hero-stage .specimen-note { position: absolute; left: 0; right: 0; bottom: 0; z-index: 0; text-align: left; font-size: 13px; letter-spacing: .06em; text-transform: none; line-height: 1.5; color: #b9ae92; padding: 10px 0 0; border-top: 1px solid #3a3020; }
.hero-stage .hc-3 { bottom: 15%; }

/* specimen details in a plain sans-serif */
.spec-meta .k, .spec-meta .v, .spec-meta .v .sz, .spec-meta .v .sz b { font-family: system-ui, -apple-system, "Segoe UI", "Helvetica Neue", Helvetica, Arial, sans-serif; font-variant: normal; font-variant-caps: normal; text-transform: none; }
.spec-meta .k { text-transform: uppercase; letter-spacing: .14em; font-size: 14px; font-weight: 700; }
.spec-meta .v { font-weight: 700; letter-spacing: 0; font-size: clamp(19px, 1.9vw, 24px); }
.spec-meta .v .sz b { font-weight: 800; }

/* hero stage: height follows the width, so the caption sits below the signs and never under them */
.hero-stage { min-height: 0 !important; padding-bottom: 0 !important; }
.hero-stage::before { content: ""; display: block; padding-top: 92%; }
.hero-stage .hero-card { position: absolute; }
.hero-stage .hc-1 { left: 2%; top: 0; width: 54%; }
.hero-stage .hc-2 { right: 0; top: 3%; width: 46%; }
.hero-stage .hc-3 { right: 2%; left: auto; bottom: auto; top: 38%; width: 23%; }
.hero-stage .specimen-note { position: static !important; margin: 16px 0 0; padding: 10px 0 0; }
.hero-stage::before { padding-top: 104%; }
.hero-stage .specimen-note { margin-top: 24px; }

/* ---- choosing signs: colour, size, quantity ---- */
.picks { grid-template-columns: 1fr !important; }
.pick { display: block; padding: 0; cursor: default; }
.pick-top { display: grid; grid-template-columns: 26px minmax(0, 1fr); gap: 12px; padding: 14px 14px; cursor: pointer; align-items: start; }
.pick-opts { display: none; padding: 4px 14px 16px 52px; gap: 14px; grid-template-columns: repeat(3, minmax(0, 1fr)); align-items: start; }
.pick.on .pick-opts { display: grid; }
.pick-lbl { display: block; font-family: system-ui, -apple-system, "Segoe UI", Helvetica, Arial, sans-serif; font-weight: 700; font-size: 14px; letter-spacing: .04em; color: var(--parchment); margin-bottom: 8px; }
.pick-lbl em { font-style: normal; font-weight: 500; color: var(--brass); }
.pick-colours { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.pick-colours .pick-lbl { flex: 0 0 100%; margin-bottom: 2px; }
.col { display: inline-flex; align-items: center; gap: 8px; min-height: 46px; padding: 0 14px 0 10px; border: 2px solid #5a4a2d; border-radius: 3px; cursor: pointer; font-family: system-ui, -apple-system, "Segoe UI", Helvetica, Arial, sans-serif; font-weight: 700; font-size: 16px; color: var(--parchment); background: rgba(255,255,255,.04); }
.col input { width: 20px; height: 20px; accent-color: #ff7c62; margin: 0; }
.col .sw { width: 22px; height: 22px; border-radius: 2px; border: 2px solid #d9b45a; display: inline-block; }
.col:has(input:checked) { border-color: #ff7c62; background: rgba(233,99,75,.18); }
.pick-field { display: block; }
.pick-size { width: 100%; min-height: 46px; padding: 0 10px; font: inherit; font-size: 16px; color: #131311; background: #f4eedf; border: 2px solid var(--bronze-3); border-radius: 3px; }
.add-row { margin-top: 18px; display: grid; gap: 10px; justify-items: start; }
@media (max-width: 720px) { .pick-opts { grid-template-columns: 1fr; padding-left: 14px; } }

/* ---- the order ---- */
.basket-empty { margin: 0; color: #cfc6ad; font-size: 18px; }
.b-soldier { border: 2px solid #5a4a2d; background: rgba(255,255,255,.04); margin: 0 0 16px; }
.b-soldier header { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 16px; padding: 12px 14px; border-bottom: 1px solid #5a4a2d; }
.b-soldier h3 { margin: 0; font-family: system-ui, -apple-system, "Segoe UI", Helvetica, Arial, sans-serif; font-size: 20px; font-weight: 800; color: var(--parchment); }
.b-soldier header span { color: var(--brass); font-size: 15px; flex: 1 1 200px; }
.b-soldier ul { list-style: none; margin: 0; padding: 0; }
.b-soldier li { display: grid; grid-template-columns: 84px minmax(0, 1fr) auto auto; gap: 14px; align-items: center; padding: 12px 14px; border-top: 1px solid #3a3020; }
.b-soldier li:first-child { border-top: 0; }
.b-thumb { width: 84px; }
.b-line b { display: block; font-family: system-ui, -apple-system, "Segoe UI", Helvetica, Arial, sans-serif; font-size: 17px; color: var(--parchment); }
.b-line span { color: #cfc6ad; font-size: 15px; }
.b-qty { font-family: system-ui, sans-serif; font-weight: 800; font-size: 18px; color: var(--parchment); }
.b-remove { background: transparent; border: 1px solid #7a6438; color: var(--brass); font: 600 13px system-ui, sans-serif; padding: 8px 12px; cursor: pointer; border-radius: 3px; }
.b-remove:hover { border-color: #ff7c62; color: #ff9c85; }
.basket-total { margin: 4px 0 0; color: var(--parchment); font-size: 17px; }
@media (max-width: 560px) { .b-soldier li { grid-template-columns: 64px minmax(0, 1fr); } .b-thumb { width: 64px; } .b-qty, .b-soldier li .b-remove { grid-column: 2; justify-self: start; } }
.hero-stage .hc-3 { right: 17%; top: 27%; width: 23%; z-index: 3; }
.hero-stage::before { padding-top: 92%; } .hero-stage .specimen-note { margin-top: 20px; }

/* ---- sign options: a tidy label / control grid ---- */
.pick .pick-opts { display: none; margin: 0; padding: 4px 20px 22px 58px; }
.pick.on .pick-opts { display: grid; grid-template-columns: 1fr; gap: 0; border-top: 1px solid rgba(255,255,255,.12); margin: 0 16px; padding: 6px 4px 20px 42px; }
.opt-row { display: grid; grid-template-columns: 190px minmax(0, 1fr); gap: 8px 24px; align-items: center; padding: 14px 0; border-bottom: 1px solid rgba(255,255,255,.07); }
.opt-row:last-child { border-bottom: 0; padding-bottom: 0; }
.opt-label { display: block; font-family: system-ui, -apple-system, "Segoe UI", "Helvetica Neue", Helvetica, Arial, sans-serif; font-weight: 700; font-size: 17px; line-height: 1.25; color: var(--parchment); }
.opt-label small { display: block; margin-top: 2px; font-weight: 500; font-size: 13.5px; color: var(--brass); }
.opt-chips { display: flex; flex-wrap: wrap; gap: 10px; }
.chip-opt { position: relative; display: inline-flex; }
.chip-opt input { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer; }
.chip-opt span { display: inline-flex; align-items: center; justify-content: center; min-width: 124px; min-height: 50px; padding: 0 20px; font-family: system-ui, -apple-system, "Segoe UI", "Helvetica Neue", Helvetica, Arial, sans-serif; font-weight: 700; font-size: 17px; color: var(--parchment); background: rgba(255,255,255,.05); border: 2px solid #6b573a; border-radius: 4px; white-space: nowrap; }
.chip-opt:hover span { border-color: var(--brass); }
.chip-opt input:focus-visible + span { outline: 3px solid #ff7c62; outline-offset: 2px; }
.chip-opt input:checked + span { background: #f4eedf; color: #131311; border-color: #f4eedf; }
.chip-opt input:checked + span::before { content: "\2713"; margin-right: 9px; font-weight: 800; color: #b3301f; }
.opt-select, .opt-qty { font-family: system-ui, -apple-system, "Segoe UI", "Helvetica Neue", Helvetica, Arial, sans-serif; font-weight: 600; font-size: 17px; color: #131311; background: #f4eedf; border: 2px solid #b08d3c; border-radius: 4px; min-height: 50px; padding: 0 14px; }
.opt-select { width: 100%; max-width: 420px; }
.opt-qty { width: 110px; text-align: center; }
.opt-select:focus-visible, .opt-qty:focus-visible { outline: 3px solid #ff7c62; outline-offset: 2px; }
@media (max-width: 720px) {
  .pick.on .pick-opts { margin: 0 10px; padding: 4px 2px 18px; }
  .opt-row { grid-template-columns: 1fr; gap: 10px; }
  .opt-label small { display: inline; margin-left: 8px; }
  .chip-opt span { min-width: 0; padding: 0 16px; }
}

/* narrow form column: label above control, chips in a row, real sans-serif fields */
.attest .opt-row { grid-template-columns: 1fr; gap: 10px; }
.attest .opt-label small { display: inline; margin: 0 0 0 10px; }
.attest .chip-opt span { min-width: 0; padding: 0 22px; min-height: 52px; }
.attest .opt-select, .attest .opt-qty { font-family: system-ui, -apple-system, "Segoe UI", "Helvetica Neue", Helvetica, Arial, sans-serif; font-weight: 600; font-size: 17px; }
.attest .opt-select { max-width: none; }
.attest .opt-qty { width: 120px; }
.attest .pick.on .pick-opts { padding-left: 4px; }
.spec-stage, .live-stage { flex-wrap: nowrap; }
.attest .opt-qty, .attest .opt-select { font-family: system-ui, -apple-system, "Segoe UI", "Helvetica Neue", Helvetica, Arial, sans-serif !important; }
#signs .wrap { max-width: 1400px; }
.spec-stage { padding: clamp(16px, 2.4vw, 32px); gap: clamp(14px, 2vw, 32px); }

/* ---- the poem: wall posters ---- */
.poem { background: #131311; padding: clamp(40px, 6vw, 84px) 0; border-bottom: 3px solid var(--bronze-3); }
.poem .sec-head { border-bottom-color: var(--bronze-3); }
.poem .sec-head h2, .poem-lede { color: var(--parchment); }
.poem .count { color: var(--brass); }
.poem-lede { font-size: clamp(18px, 1.8vw, 22px); max-width: 46em; }
.poem-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(20px, 4vw, 56px); margin-top: 28px; }
.poem-card { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 10px; }
.poem-card img { width: min(100%, 420px); height: auto; aspect-ratio: 210 / 297; border: 1px solid #3a3020; box-shadow: 0 16px 44px rgba(0,0,0,.6); background: #f4eedf; }
.poem-card h3 { margin: 12px 0 0; font-family: var(--display); font-weight: 800; font-size: clamp(22px, 2.4vw, 30px); letter-spacing: .06em; text-transform: uppercase; color: var(--parchment); }
.poem-card p { margin: 0; font-size: 18px; color: #d8cdae; max-width: 30em; }
.poem-dl { display: flex; flex-wrap: wrap; gap: 12px; justify-content: center; margin-top: 8px; }
.poem-note { color: #8f866e; margin-top: 26px; }
@media (max-width: 820px) { .poem-grid { grid-template-columns: 1fr; } }
.pio-card, .pio-card-on { border: 2px solid #d9b45a; }
.register .reg-row { grid-template-columns: 84px minmax(0, 1fr) auto; }
.reg-code { font-size: clamp(48px, 5.4vw, 72px); font-weight: 800; line-height: 1; }
@media (max-width: 820px) { .register .reg-row { grid-template-columns: 56px minmax(0, 1fr); } .reg-code { font-size: 44px; } }
.register .reg-row { align-items: center; }
.reg-code { align-self: center; display: flex; align-items: center; justify-content: center; }
.register .reg-size { display: grid; gap: 3px; text-align: left; white-space: nowrap; font-family: system-ui, -apple-system, "Segoe UI", "Helvetica Neue", Helvetica, Arial, sans-serif; font-size: clamp(16px, 1.5vw, 19px); font-weight: 600; color: #120c04; line-height: 1.3; }
.register .reg-size .rs { display: block; }
.register .reg-size .rs b { font-weight: 800; margin-right: .45em; }
@media (max-width: 820px) { .register .reg-size { grid-column: 2; margin-top: 6px; } }
.register .reg-size { grid-template-columns: auto auto; column-gap: clamp(20px, 3vw, 44px); row-gap: 4px; align-items: baseline; }
.register .reg-size .rs-l { text-align: left; font-weight: 800; margin: 0; }
.register .reg-size .rs-m { text-align: right; font-weight: 600; font-variant-numeric: tabular-nums; }
@media (min-width: 821px) {
  .register .reg-row { grid-template-columns: 84px minmax(0, 1fr) 330px; }
  .register .reg-size { width: 100%; grid-template-columns: 1fr auto; }
}

/* size chips with prices */
.opt-sizes { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.size-opt { position: relative; display: block; }
.size-opt input { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer; }
.size-opt span { display: grid; gap: 3px; justify-items: center; text-align: center; height: 100%; padding: 12px 8px; font-family: system-ui, -apple-system, "Segoe UI", "Helvetica Neue", Helvetica, Arial, sans-serif; color: var(--parchment); background: rgba(255,255,255,.05); border: 2px solid #6b573a; border-radius: 4px; }
.size-opt b { font-size: 16px; font-weight: 800; }
.size-opt em { font-style: normal; font-size: 14px; font-weight: 500; color: #d8cdae; white-space: nowrap; }
.size-opt strong { font-size: 22px; font-weight: 800; margin-top: 2px; }
.size-opt:hover span { border-color: var(--brass); }
.size-opt input:focus-visible + span { outline: 3px solid #ff7c62; outline-offset: 2px; }
.size-opt input:checked + span { background: #f4eedf; color: #131311; border-color: #f4eedf; }
.size-opt input:checked + span em { color: #4a3b22; }
.size-opt input:checked + span strong { color: #b3301f; }
@media (max-width: 560px) { .opt-sizes { grid-template-columns: 1fr; } .size-opt span { grid-template-columns: 1fr auto auto; justify-items: start; align-items: center; gap: 12px; padding: 12px 16px; text-align: left; } .size-opt strong { margin: 0; } }
.register .reg-size { grid-template-columns: auto auto auto; }
.register .reg-size .rs-p { text-align: right; font-weight: 800; color: #7a1f12; }
.spec-meta .v .sz-p { margin-left: .5em; color: #7a1f12; font-weight: 800; }
.b-qty small { display: block; font-size: 14px; font-weight: 700; color: var(--brass); text-align: right; }
.basket-total b { font-size: 20px; }
.basket-total span { font-size: 15px; color: #cfc6ad; }
@media (min-width: 821px) { .register .reg-row { grid-template-columns: 84px minmax(0, 1fr) 400px; } .register .reg-row { padding-right: 24px; } }
.pick-top input[type=checkbox] { accent-color: #d9b45a; outline-color: #d9b45a; }
.pick-top input[type=checkbox]:focus-visible { outline: 3px solid #d9b45a; outline-offset: 2px; }
.pick-top b { font-size: clamp(22px, 2.4vw, 30px); letter-spacing: .07em; line-height: 1.15; }
.pick-top i { font-size: 15px; margin-top: 4px; }
.pick-top { padding: 18px 16px; align-items: center; }
.pick-top b { font-size: clamp(19px, 1.7vw, 23px); letter-spacing: .05em; white-space: nowrap; }
.pick-top input[type=checkbox] { width: 26px; height: 26px; }
@media (max-width: 560px) { .pick-top b { white-space: normal; font-size: 20px; } }
.rule-3 { border-bottom-width: 5px !important; }
.hero-copy .lwf { padding: 0 0 6px; }
.hero { padding-top: clamp(14px, 2vw, 26px); }
.hero-stage::before { padding-top: 88%; }
.hero-copy .lwf .hero-h { font-size: clamp(30px, 4vw, 58px); white-space: nowrap; }
.hero-copy .lwf .remember { font-size: clamp(22px, 3vw, 44px); white-space: nowrap; }
@media (max-width: 900px) { .hero-copy .lwf .hero-h { font-size: clamp(32px, 9vw, 58px); } .hero-copy .lwf .remember { font-size: clamp(22px, 6.4vw, 40px); white-space: normal; } }

/* record details read as a printed record, not as boxes to type in */
.fld.ro input { background: transparent !important; border: 0 !important; border-bottom: 1px dashed #5a4a2d !important; border-radius: 0; box-shadow: none !important; min-height: 0 !important; padding: 6px 0 8px !important; font-size: 21px; font-weight: 600; color: var(--parchment) !important; outline: none; caret-color: transparent; }
.fld.ro input::placeholder { color: #6b6450; opacity: 1; }
.fld.ro input:focus { border-bottom-style: solid !important; border-bottom-color: #d9b45a !important; caret-color: auto; }
.fld.ro > span { color: #b9ae92; }
.fld.ro input::-webkit-calendar-picker-indicator { display: none !important; }
@media (max-width: 900px) { .register-grid, .make-grid { grid-template-columns: minmax(0, 1fr) !important; } .live, .live-stage { min-width: 0; max-width: 100%; } .live-stage { overflow: hidden; } }

/* ship card: photograph on the left, the ship's details on the right */
.ship-card { display: grid !important; grid-template-columns: minmax(0, 44%) minmax(0, 1fr); gap: 0; align-items: stretch; padding: 0; margin: 4px 0 22px; background: #0c0c0b; border: 2px solid #d9b45a; overflow: hidden; }
.ship-card[hidden] { display: none !important; }
.ship-pic { background: #000; display: flex; align-items: center; justify-content: center; min-height: 190px; }
.ship-card .sc-img { width: 100%; height: 100%; max-height: none; object-fit: cover; display: block; }
.ship-card .sc-img[hidden] { display: none; }
.ship-card .sc-noimg { padding: 18px; text-align: center; font: 600 15px system-ui, sans-serif; color: #8f866e; }
.ship-card figcaption { display: flex; flex-direction: column; justify-content: center; gap: 8px; padding: 18px 22px; }
.ship-kicker { font: 700 12px system-ui, sans-serif; letter-spacing: .16em; text-transform: uppercase; color: #d9b45a; }
.ship-card .sc-name { font-family: var(--display); font-weight: 800; font-size: clamp(22px, 2.6vw, 32px); letter-spacing: .05em; line-height: 1.12; color: var(--parchment); text-transform: uppercase; }
.ship-card .sc-meta { font: 500 17px system-ui, sans-serif; color: #e6dcc0; }
.ship-card .sc-meta b { font-weight: 800; color: #fff; }
.ship-card .sc-stats { font-style: normal; font-size: 17px; line-height: 1.45; color: #d8cdae; }
.ship-card .sc-credit { font-size: 11.5px; color: #8f866e; line-height: 1.4; margin-top: 4px; }
@media (max-width: 640px) { .ship-card { grid-template-columns: 1fr; } .ship-pic { min-height: 0; aspect-ratio: 4 / 3; } }
.ship-card .sc-img { object-fit: contain; background: #000; }
.ship-card .sc-stats, .ship-card .sc-credit { font-family: system-ui, -apple-system, "Segoe UI", Helvetica, Arial, sans-serif; }
.ship-card .sc-stats { font-size: 16px; }
.ship-card .sc-pics { width: 100%; display: grid; gap: 2px; }
.ship-card .sc-pics figure { margin: 0; position: relative; background: #000; }
.ship-card .sc-pics img { width: 100%; height: auto; max-height: 260px; object-fit: contain; display: block; }
.ship-card .sc-pics figcaption { position: absolute; left: 0; bottom: 0; right: 0; padding: 6px 10px; font: 700 12px system-ui, sans-serif; letter-spacing: .06em; text-transform: uppercase; color: #fff; background: linear-gradient(transparent, rgba(0,0,0,.75)); }
.ship-card .sc-pics:empty { display: none; }

/* Where he served: no box. A big red tick on a soft, airbrushed white glow. */
.checks input[type=checkbox] { -webkit-appearance: none; appearance: none; flex: none; width: 46px; height: 46px; margin: -6px 4px -6px -4px; border: 0; border-radius: 0; background: radial-gradient(circle at 50% 50%, rgba(255,255,255,.20) 0, rgba(255,255,255,.10) 38%, rgba(255,255,255,0) 68%); cursor: pointer; transition: background .15s; }
.checks input[type=checkbox]:checked { background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M4.5 12.8l5 5.2L19.8 6' fill='none' stroke='%23c1281b' stroke-width='4.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 62% 62% no-repeat, radial-gradient(circle at 50% 50%, rgba(255,255,255,.98) 0, rgba(255,255,255,.90) 30%, rgba(255,255,255,.5) 52%, rgba(255,255,255,0) 72%); }
.checks input[type=checkbox]:focus-visible { outline: none; background-color: rgba(217,180,90,.25); border-radius: 50%; }
.checks label { align-items: center; }
.checks input[type=checkbox]:focus, .checks input[type=checkbox]:focus-visible { outline: 0 !important; box-shadow: none !important; }
#finder-list .f-rank { color: #7a1f12; font-weight: 800; letter-spacing: .04em; }
.since-war { margin: 14px 0 0; padding: 16px 20px; border: 2px solid #d9b45a; background: rgba(217,180,90,.08); display: grid; gap: 4px; }
.since-war[hidden] { display: none; }
.sw-k { font: 800 13px system-ui, sans-serif; letter-spacing: .16em; text-transform: uppercase; color: #d9b45a; }
.sw-v { font-family: var(--display); font-weight: 800; font-size: clamp(24px, 3vw, 38px); letter-spacing: .03em; color: var(--parchment); line-height: 1.2; }
.sw-d { font: 500 17px system-ui, sans-serif; color: #d8cdae; }
.bignum { margin: 8px 0 22px; display: grid; grid-template-columns: auto auto; justify-content: start; align-items: baseline; column-gap: 18px; row-gap: 2px; }
.bignum b { font-family: var(--display); font-weight: 800; font-size: clamp(64px, 11vw, 150px); line-height: .95; letter-spacing: .01em; color: #d9b45a; font-variant-numeric: lining-nums; white-space: nowrap; }
.bignum span { font-family: var(--display); font-weight: 800; font-size: clamp(30px, 5vw, 64px); letter-spacing: .08em; text-transform: uppercase; color: var(--parchment); }
.bignum em { grid-column: 1 / -1; font-style: normal; font-size: clamp(18px, 1.8vw, 22px); color: #d8cdae; margin-top: 4px; }
.bignum span { font-size: clamp(24px, 3.6vw, 46px); }
.bignum { grid-template-columns: minmax(0, auto); } .bignum span { grid-column: 1; font-size: clamp(22px, 3vw, 40px); letter-spacing: .1em; margin-top: 2px; }
.hero-copy > .bignum { margin: 0 0 18px; }

/* =====================================================================
   PHONES: a different layout, not a squeezed desktop.
   Big type, one idea per screen, swipe strips instead of long stacks,
   and a thumb-reach bar at the bottom.
   ===================================================================== */
.m-cta { display: none; }
@media (max-width: 720px) {
  html { -webkit-text-size-adjust: 100%; scroll-padding-top: 12px; }
  body { padding-bottom: 84px; overscroll-behavior-x: none; }
  .wrap { padding-left: 18px; padding-right: 18px; }

  /* ---- the thumb bar ---- */
  .m-cta { display: flex; align-items: center; justify-content: center; position: fixed; z-index: 60; left: 12px; right: 12px; bottom: calc(12px + env(safe-area-inset-bottom)); min-height: 58px; padding: 0 20px; font-family: var(--display); font-weight: 800; font-size: 17px; letter-spacing: .12em; text-transform: uppercase; color: #fff; background: #c9452f; border-radius: 6px; text-decoration: none; box-shadow: 0 10px 30px rgba(0,0,0,.6), 0 0 0 2px rgba(0,0,0,.35); }
  .m-cta:active { transform: translateY(1px); background: #a3311f; }

  /* ---- masthead: compact ---- */
  .strip { display: none; }
  .nav { padding: 10px 0 0; flex-wrap: nowrap; gap: 10px; }
  .nav .brand { display: none; }
  .nav-links { display: flex; flex-wrap: nowrap; gap: 8px; overflow-x: auto; -webkit-overflow-scrolling: touch; scrollbar-width: none; width: 100%; padding: 2px 0 8px; }
  .nav-links::-webkit-scrollbar { display: none; }
  .nav-links a { flex: none; min-height: 44px; display: inline-flex; align-items: center; padding: 0 16px; font-size: 13px; letter-spacing: .12em; border: 1px solid #5a4a2d; border-radius: 22px; white-space: nowrap; }
  .nav-links .nav-cta { display: none; }
  .wordmark { padding: 6px 0 4px; }
  .wm-rule { margin: 10px 0 12px; padding: 10px 0; }
  .wm-rule > span:first-child { font-size: 14px !important; letter-spacing: .09em !important; line-height: 1.4; }

  /* ---- hero: the number, the promise, then the signs to swipe ---- */
  .hero { grid-template-columns: 1fr !important; gap: 22px; padding: 6px 0 30px !important; }
  .bignum b { font-size: clamp(72px, 24vw, 120px); }
  .bignum span { font-size: 22px; letter-spacing: .12em; }
  .bignum em { font-size: 17px; line-height: 1.45; }
  .hero-copy .lwf .hero-h { font-size: clamp(32px, 10.4vw, 48px); }
  .hero-copy .lwf .remember { font-size: clamp(20px, 6.4vw, 30px); white-space: normal; }
  .ode { margin: 10px 0 18px; padding-left: 14px; }
  .ode p:first-of-type { display: none; }
  .ode p { font-size: 21px; line-height: 1.55; margin: 0 0 10px; }
  .hero-copy .lede { font-size: 19px; line-height: 1.55; margin: 0 0 16px; }
  .cta-row { display: grid; gap: 10px; }
  .cta-row .btn { width: 100%; min-height: 56px; justify-content: center; font-size: 15px; }

  .hero-stage { display: flex !important; gap: 14px; overflow-x: auto; scroll-snap-type: x mandatory; -webkit-overflow-scrolling: touch; margin: 0 -18px; padding: 6px 18px 10px !important; min-height: 0 !important; scrollbar-width: none; }
  .hero-stage::-webkit-scrollbar { display: none; }
  .hero-stage::before { display: none !important; }
  .hero-stage .hero-card { position: relative !important; inset: auto !important; left: auto !important; right: auto !important; top: auto !important; bottom: auto !important; flex: 0 0 76vw; width: 76vw !important; max-width: 340px; transform: none !important; scroll-snap-align: center; z-index: 1 !important; }
  .hero-stage .specimen-note { position: static !important; flex: 0 0 100%; order: 9; font-size: 13px; line-height: 1.5; padding-top: 8px; margin: 0; display: none; }

  /* ---- Te Hokowhitu-a-Tu: tighter, cards swipe ---- */
  .pio { padding: 30px 0 !important; }
  .pio-fern, .pio-panel { display: none !important; }
  .pio-grid { grid-template-columns: 1fr !important; }
  .pio-h { font-size: clamp(30px, 9.4vw, 44px) !important; white-space: normal !important; }
  .pio-lede { font-size: 19px; line-height: 1.55; }
  .pio-lede + .pio-lede { display: none; }
  .pio-split { display: flex !important; gap: 14px; overflow-x: auto; scroll-snap-type: x mandatory; margin: 0 -18px; padding: 0 18px 8px; scrollbar-width: none; }
  .pio-split::-webkit-scrollbar { display: none; }
  .pio-card { flex: 0 0 86vw; max-width: 380px; scroll-snap-align: center; }
  .pio-badges { flex-direction: row !important; gap: 10px; }
  .pio-badges img { max-height: 120px; }
  .pio-badges figcaption { font-size: 10.5px; }
  .pio-badges small { display: none; }
  .pio-card h3 { font-size: 22px; }
  .pio-card p:not(.pio-sub2) { font-size: 17px; }

  /* ---- how it works: numbered list, no frame ---- */
  .bronze { padding: 30px 0 !important; }
  .poppy-field, .plaque .poppy-lg { display: none !important; }
  .plaque { border: 0 !important; padding: 0 !important; box-shadow: none !important; background: transparent !important; }
  .plaque-inner { border: 0 !important; padding: 0 !important; text-align: left; }
  .plaque h2 { font-size: 30px !important; letter-spacing: .12em !important; margin: 0 0 8px; }
  .steps { margin-top: 12px; }
  .steps li { padding: 16px 0 16px 58px !important; border-right: 0 !important; }
  .steps li::before { font-size: 40px !important; left: 4px !important; top: 12px !important; }
  .steps h3 { font-size: 17px !important; margin-bottom: 6px !important; }
  .steps p { font-size: 18px !important; line-height: 1.5 !important; }
  .plaque-foot { font-size: 17px !important; }

  /* ---- the signs ---- */
  .paper { padding-top: 30px !important; padding-bottom: 30px !important; }
  .sec-head h2 { font-size: 30px !important; letter-spacing: .1em !important; }
  .sec-lede { font-size: 18px !important; line-height: 1.5; }
  .register .reg-row { padding: 16px 12px 16px 6px !important; grid-template-columns: 46px minmax(0, 1fr) !important; gap: 4px 8px !important; }
  .reg-code { font-size: 40px !important; }
  .reg-name { font-size: 23px !important; }
  .reg-sub { display: none; }
  .register .reg-size { grid-column: 2 !important; margin-top: 4px !important; font-size: 15px !important; grid-template-columns: auto 1fr auto !important; }
  .spec-stage { flex-direction: column !important; align-items: center !important; padding: 14px !important; }
  .spec-meta { display: none !important; }
  .specimen-panel .btn-block { width: calc(100% - 28px); max-width: none; min-height: 54px; }

  /* ---- the form: the sign first, then the fields ---- */
  .card-bg { padding: 26px 0 40px !important; }
  .make-grid { display: flex !important; flex-direction: column; gap: 20px; }
  .make-grid > .live { order: -1; position: static; }
  .attest { padding: 18px 16px !important; }
  .attest legend { font-size: 17px; }
  .row.two, .row.three { grid-template-columns: 1fr !important; gap: 12px; }
  .fld > span { font-size: 13px; }
  .fld input, .fld select, .fld textarea { font-size: 18px !important; min-height: 54px; }
  .fld.ro input { min-height: 0 !important; font-size: 20px !important; }
  .finder-note, #finder-note { font-size: 16px; }
  #finder-input { min-height: 60px; font-size: 19px; }
  #finder-list { max-height: 46vh; }
  #finder-list li { padding: 14px 14px; }
  .since-war { padding: 14px 16px; }
  .sw-v { font-size: 26px; }
  .live-tabs { flex-direction: row !important; overflow-x: auto; flex-wrap: nowrap !important; scrollbar-width: none; }
  .live-tabs::-webkit-scrollbar { display: none; }
  .live-tab { flex: 0 0 auto !important; width: auto !important; white-space: nowrap !important; padding: 14px 16px !important; font-size: 14px !important; border-bottom: 0 !important; }
  .live-stage { padding: 12px !important; }
  .pick-top { padding: 16px 12px !important; }
  .chip-opt span { min-height: 56px; font-size: 18px; }
  .size-opt span { min-height: 60px; }
  .opt-qty, .opt-select { min-height: 56px; font-size: 19px; }
  .add-row .btn, #submit-btn, #download-btn { width: 100%; min-height: 58px; }
  .confirm { padding: 14px; }
  .b-soldier li { grid-template-columns: 64px minmax(0, 1fr); }

  /* ---- the poem: two posters to swipe ---- */
  .poem { padding: 30px 0 !important; }
  .poem-grid { display: flex !important; gap: 16px; overflow-x: auto; scroll-snap-type: x mandatory; margin: 18px -18px 0; padding: 0 18px 8px; scrollbar-width: none; }
  .poem-grid::-webkit-scrollbar { display: none; }
  .poem-card { flex: 0 0 76vw; max-width: 320px; scroll-snap-align: center; }
  .poem-card img { width: 100%; }
  .poem-card .btn { width: 100%; min-height: 54px; }

  /* ---- the ships: a swipe strip, not 77 stacked cards ---- */
  .ships { padding: 30px 0 !important; }
  .ship-grid { display: flex !important; gap: 14px; overflow-x: auto; scroll-snap-type: x mandatory; margin: 18px -18px 0; padding: 0 18px 8px; scrollbar-width: none; }
  .ship-grid::-webkit-scrollbar { display: none; }
  .ship { flex: 0 0 78vw; max-width: 340px; scroll-snap-align: center; }
  .ships-more { display: none; }

  /* ---- footer ---- */
  .foot-grid { grid-template-columns: 1fr !important; gap: 18px; }
  .foot-base { flex-direction: column; gap: 6px; }
}
@media (max-width: 720px) {
  .hero > *, .hero-copy, .make-grid > *, .pio-copy { min-width: 0 !important; }
  .hero { grid-template-columns: minmax(0, 1fr) !important; }
  .hero-copy .lwf .hero-h { font-size: clamp(28px, 8.6vw, 40px) !important; white-space: normal !important; }
  .ode p { font-size: 20px; }
  /* portrait signs swipe side by side; landscape ones stack */
  .spec-stage, .live-stage { flex-direction: row !important; flex-wrap: nowrap !important; justify-content: flex-start !important; overflow-x: auto; scroll-snap-type: x mandatory; -webkit-overflow-scrolling: touch; gap: 14px !important; padding: 16px !important; scrollbar-width: none; align-items: flex-start !important; }
  .spec-stage::-webkit-scrollbar, .live-stage::-webkit-scrollbar { display: none; }
  .spec-stage .sign, .live-stage .sign { flex: 0 0 auto !important; width: 70vw !important; scroll-snap-align: center; }
  .spec-stage.stacked, .live-stage.stacked { flex-direction: column !important; overflow-x: visible; align-items: center !important; }
  .spec-stage.stacked .sign, .live-stage.stacked .sign { width: 100% !important; }
  .live-stage:has(.sign:only-child) { justify-content: center !important; }
  .live-stage .sign:only-child, .spec-stage .sign:only-child { width: min(86vw, 62vh * .66) !important; margin-inline: auto; }
  .live-bar, .spec-bar { flex-wrap: wrap; gap: 4px 12px; }
  .live-bar span, .spec-bar span { font-size: 12px; }
}
@media (max-width: 720px) {
  .row.three, .row.two:has(input[type=date]) { grid-template-columns: 1fr 1fr !important; gap: 10px 12px; }
  .row.three .fld:last-child:nth-child(odd) { grid-column: 1 / -1; }
  .fld.ro input { font-size: 19px !important; }
  fieldset { margin-bottom: 18px !important; }
  .fld { gap: 4px; }
}
@media (max-width: 720px) {
  .rk-nav { overflow-x: auto; flex-wrap: nowrap !important; scrollbar-width: none; }
  .rk-nav a { flex: none; white-space: nowrap; }
  .pf-top .back { font-size: 12px; }
  .tl li { padding-left: 22px; }
}

/* ---------- the same scattered poppies, down both sides of the ships ---------- */
.ships { position: relative; overflow: hidden; }
.ships-poppies { position: absolute; inset: 0; pointer-events: none; z-index: 0; overflow: hidden; }
.ships-poppies .poppy-field { position: relative !important; inset: auto !important; height: 1500px; width: 100%; }
.ships > .wrap { position: relative; z-index: 1; }
@media (max-width: 760px) { .ships .pp-s { display: none !important; } .ships .pp-m { display: block !important; } }
@media (max-width: 720px) { .ships .poppy-field { display: block !important; } .ships-poppies { opacity: .55; } }

/* ===== poppies down both sides of the whole site ===== */
body { position: relative; }
.rail { position: absolute; top: 0; bottom: 0; width: clamp(64px, 7vw, 120px); z-index: 4; pointer-events: none; overflow: hidden; }
.rail-l { left: 0; } .rail-r { right: 0; }
.rail-tile { position: relative; height: 1300px; }
.rp { position: absolute; opacity: var(--o, 1); transform: rotate(var(--r, 0deg)); filter: drop-shadow(0 4px 6px rgba(0,0,0,.45)); max-width: none; }
@media (max-width: 720px) {
  .rail { width: 30px; }
  .rp { opacity: calc(var(--o, 1) * .75); }
  .has-rails .wrap { padding-left: 30px !important; padding-right: 30px !important; }
  .hero-stage, .pio-split, .poem-grid, .ship-grid { margin-left: -30px !important; margin-right: -30px !important; padding-left: 30px !important; padding-right: 30px !important; }
  .m-cta { z-index: 70; }
}

/* the Te Hokowhitu-a-Tu heading must never run into the badge panel */
.pio-h { white-space: normal !important; font-size: clamp(30px, 4.2vw, 60px) !important; overflow-wrap: anywhere; }
/* poppies drift gently */
@keyframes rp-drift {
  0%   { transform: translate(0, 0) rotate(var(--r, 0deg)) scale(1); }
  25%  { transform: translate(var(--dx, 10px), var(--dy, -14px)) rotate(calc(var(--r, 0deg) + var(--dr, 8deg))) scale(var(--sc, 1.3)); }
  50%  { transform: translate(calc(var(--dx, 10px) * -.6), calc(var(--dy, -14px) * -.8)) rotate(calc(var(--r, 0deg) - var(--dr, 8deg) * .5)) scale(var(--sm, .8)); }
  75%  { transform: translate(calc(var(--dx, 10px) * .5), calc(var(--dy, -14px) * .4)) rotate(calc(var(--r, 0deg) + var(--dr, 8deg) * .3)) scale(1.12); }
  100% { transform: translate(0, 0) rotate(var(--r, 0deg)) scale(1); }
}
.rp { animation: rp-drift var(--t, 24s) ease-in-out var(--d, 0s) infinite; }
@media (prefers-reduced-motion: reduce) { .rp { animation: none; } }

/* poppies spread across a wider band, closer in from the edge */
@media (max-width: 720px) { .rail { width: 30px; } }

/* black side bands on the signs section, and the form section all black */
:root { --railw: clamp(90px, 12.5vw, 250px); }
@media (max-width: 720px) { :root { --railw: 30px; } }
.rail { width: var(--railw) !important; }
.card-bg { background: #0a0a09 !important; }
.card-bg::before { opacity: .12; }
.attest { background: #0e0e0c !important; }

/* no horizontal rules: keep only the gold and red bar at the very bottom */
.masthead, .strip, .rule-3, .wm-rule, .sec-head, .nav { border-top: 0 !important; border-bottom: 0 !important; }
.steps, .steps li { border-top: 0 !important; border-bottom: 0 !important; }
.register, .reg-row, .spec-bar, .spec-meta > div, .opt-row, .pick-opts, .live-tab, .live-bar, .live-tabs, .foot-base, .rk-top, .rk-cmd, .pf-top, .rk-nav, .plaque-foot { border-top: 0 !important; border-bottom: 0 !important; }
.attest fieldset, .attest fieldset:first-of-type { border-top: 0 !important; }
.pio, .poem { border-top: 0 !important; border-bottom: 0 !important; }
.ships { border-top: 0 !important; }
.ships-lede, .b-soldier header { border-bottom: 0 !important; }
.b-soldier li { border-top: 0 !important; }
.spec-meta, .live-stage { border-top: 0 !important; }

/* poppies sit in the side margins only; no panel is resized to make room */
:root { --railw: max(40px, calc((100vw - 1320px) / 2)); }
@media (max-width: 720px) { :root { --railw: 30px; } }

/* The Sign of a Soldier: black sides. Content stays exactly where it was; the tan simply stops 20px before it. */
@media (min-width: 721px) {
  .paper { background: linear-gradient(to right, #0a0a09 0, #0a0a09 calc(var(--railw) - 12px), transparent calc(var(--railw) - 12px), transparent calc(100% - var(--railw) + 12px), #0a0a09 calc(100% - var(--railw) + 12px), #0a0a09 100%), var(--paper) !important; }
}
@media (max-width: 720px) {
  .paper { background: linear-gradient(to right, #0a0a09 0, #0a0a09 12px, transparent 12px, transparent calc(100% - 12px), #0a0a09 calc(100% - 12px), #0a0a09 100%), var(--paper) !important; }
}

/* carousel: signs swing out and in as the design changes */
.spec-stage, .live-stage { perspective: 1100px; }
.spec-stage .sign, .live-stage .sign { transform-origin: 50% 60%; backface-visibility: hidden; }
@keyframes car-in { from { transform: translateX(calc(var(--dir, 1) * 70%)) rotateY(calc(var(--dir, 1) * -62deg)) scale(.78); opacity: 0; } to { transform: none; opacity: 1; } }
@keyframes car-out { from { transform: none; opacity: 1; } to { transform: translateX(calc(var(--dir, 1) * -70%)) rotateY(calc(var(--dir, 1) * 62deg)) scale(.78); opacity: 0; } }
.car-in { animation: car-in .5s cubic-bezier(.2, .8, .25, 1) both; }
.car-ghost { animation: car-out .48s cubic-bezier(.6, 0, .8, .4) both; z-index: 2; }
.spec-stage, .live-stage { overflow: hidden; }
@media (max-width: 720px) { .spec-stage, .live-stage { overflow-x: auto; } }

/* every section shares The Sign of a Soldier's width */
@media (min-width: 721px) {
  .wrap { max-width: 1400px !important; }
  .plaque { max-width: none !important; }
}

/* The Sign of a Soldier: big, centred headline */
#signs .sec-head { flex-direction: column; align-items: center; justify-content: center; text-align: center; gap: 6px; }
#signs .sec-head h2 { font-size: clamp(40px, 6.4vw, 92px) !important; line-height: 1.02; letter-spacing: .08em !important; text-align: center; margin: 0; }
#signs .sec-head .count { order: 2; }
#signs .sec-lede { text-align: center; margin-left: auto; margin-right: auto; }
@media (max-width: 720px) { #signs .sec-head h2 { font-size: clamp(34px, 10.4vw, 48px) !important; letter-spacing: .06em !important; } }
#signs .sec-head .count { display: none; } #signs .sec-lede { font-size: clamp(20px, 1.9vw, 26px) !important; margin-top: 10px; margin-bottom: 0; }
#signs .register-grid { margin-top: 4px; }

/* poppies floating across the masthead, in front of the text */
.hero-drift { position: absolute; inset: 0; pointer-events: none; z-index: 20; overflow: hidden; }
.hd { position: absolute; max-width: none; opacity: 0; filter: drop-shadow(0 6px 10px rgba(0,0,0,.5)); animation: hd-float var(--dur, 20s) ease-in-out forwards; will-change: transform, opacity; }
@keyframes hd-float {
  0%   { opacity: 0;                    transform: translate(0, 0) rotate(var(--r, 0deg)) scale(.75); }
  18%  { opacity: var(--peak, .9);      transform: translate(calc(var(--dx) * .2), calc(var(--dy) * .2)) rotate(calc(var(--r, 0deg) + var(--dr) * .2)) scale(1); }
  50%  { opacity: var(--peak, .9);      transform: translate(calc(var(--dx) * .55), calc(var(--dy) * .55)) rotate(calc(var(--r, 0deg) + var(--dr) * .55)) scale(1.28); }
  82%  { opacity: var(--peak, .9);      transform: translate(calc(var(--dx) * .9), calc(var(--dy) * .9)) rotate(calc(var(--r, 0deg) + var(--dr) * .9)) scale(.9); }
  100% { opacity: 0;                    transform: translate(var(--dx), var(--dy)) rotate(calc(var(--r, 0deg) + var(--dr))) scale(.7); }
}
@media (max-width: 720px) { .hd { transform-origin: center; } }

/* the two bars above and below the tagline are back, same thickness */
.rule-3, .wm-rule { border-top: 5px solid var(--bronze-3) !important; border-bottom: 5px solid var(--bronze-3) !important; }
@media (min-width: 721px) { .spec-stage, .live-stage { align-items: center !important; box-sizing: border-box; } .spec-stage.stacked, .live-stage.stacked { justify-content: center; } }

/* The Sign of a Soldier: the chosen design is unmistakable */
.register .reg-row { cursor: pointer; transition: background .18s, color .18s, box-shadow .18s; background: rgba(255,255,255,.28) !important; position: relative; }
.register .reg-row:hover { background: rgba(28,20,9,.14) !important; }
.register .reg-row:focus-visible { outline: 3px solid #c9452f; outline-offset: -3px; }
.register .reg-row[aria-current="true"] { background: #17120a !important; box-shadow: inset 20px 0 0 #c9302c, 0 6px 22px rgba(0,0,0,.35) !important; color: #f4eedf; }
.register .reg-row[aria-current="true"] .reg-name, .register .reg-row[aria-current="true"] .reg-size, .register .reg-row[aria-current="true"] .reg-size .rs-l { color: #f4eedf !important; }
.register .reg-row[aria-current="true"] .reg-code { color: #d9b45a !important; }
.register .reg-row[aria-current="true"] .reg-sub { color: #cfc6ad !important; }
.register .reg-row[aria-current="true"] .rs-p { color: #f0d488 !important; }
.register .reg-row:not([aria-current="true"]) .reg-code { opacity: .75; }
.register .reg-row:not([aria-current="true"]) .reg-name { color: #3a2e18; }
.register .reg-row[aria-current="true"] .reg-code { color: #ff3b2a !important; opacity: 1 !important; text-shadow: 0 0 18px rgba(255,59,42,.35); }
/* under the sign selector: nothing but the signs */
.specimen-panel .spec-meta, .specimen-panel .btn-block, .specimen-panel #spec-use, .specimen-panel .spec-fine { display: none !important; }

/* the Service Record, tucked under the big plaque and the Sentinel, on an angle */
@media (min-width: 721px) {
  .hero-stage .hc-4 { left: 45%; top: 40%; width: 27%; transform: rotate(8deg); z-index: 1; right: auto; bottom: auto; }
  .hero-stage .hc-2 { z-index: 0; }
}
@media (max-width: 720px) { .hero-stage .hc-4 { transform: none !important; } }
@media (min-width: 721px) {
  .hero-stage .hc-4 { left: 47%; top: 30%; width: 30%; transform: rotate(9deg); z-index: 1; }
  .hero-stage .hc-3 { right: 0; top: 60%; width: 21%; z-index: 3; }
}
@media (min-width: 721px) { .hero-stage .hc-3 { top: 47%; right: 1%; width: 19%; } .hero-stage .hc-4 { left: 46%; top: 27%; } }
@media (min-width: 721px) { .hero-stage .hc-3 { top: 42%; width: 18%; } }

/* hero signs at true relative scale: 1 mm is the same on every sign (Small sizes: Plaque 200x300, Service Record 200x300, Sentinel 200x475, Honour Gate 600x333 on a 700 mm wide stage) */
@media (min-width: 721px) {
  .hero-stage::before { padding-top: 76% !important; }
  .hero-stage .hero-card { transform-origin: 50% 50%; }
  .hero-stage .hc-2 { left: 12%; right: auto; top: 0; width: 85.7%; transform: rotate(-2deg); z-index: 1; }
  .hero-stage .hc-3 { left: 1%; right: auto; top: 9%; width: 28.6%; transform: rotate(-5deg); z-index: 3; bottom: auto; }
  .hero-stage .hc-1 { left: 32%; right: auto; top: 34%; width: 28.6%; transform: rotate(2deg); z-index: 5; bottom: auto; }
  .hero-stage .hc-4 { left: 59%; right: auto; top: 30%; width: 28.6%; transform: rotate(6deg); z-index: 2; bottom: auto; }
}

/* Te Hokowhitu-a-Tu: no side panel, the words take the full width */
.pio-panel { display: none !important; }
.pio-grid { grid-template-columns: minmax(0, 1fr) !important; }
.pio-copy { max-width: none; }
.pio-h { font-size: clamp(40px, 7vw, 104px) !important; white-space: normal !important; margin-bottom: 22px; }
.pio-lede { max-width: 60em; font-size: clamp(20px, 2vw, 26px); }
@media (min-width: 900px) { .pio-copy { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); column-gap: clamp(28px, 5vw, 80px); align-items: start; } .pio-copy > .pio-kicker, .pio-copy > .pio-h { grid-column: 1 / -1; } }

/* gold flourishes of the era in the gaps between sections */
.flourish { display: flex; justify-content: center; padding: clamp(18px, 3vw, 34px) 0; background: #0a0a09; position: relative; z-index: 5; }
.flourish svg { width: min(78vw, 560px); height: auto; filter: drop-shadow(0 0 6px rgba(217,180,90,.25)); }
@media (max-width: 720px) { .flourish { padding: 12px 0; } .flourish svg { width: 82vw; } }

/* "of Aotearoa": large, but well below the headline */
.wm-sub { container-type: inline-size; padding: 0 0 .6cqw; }
.wm-sub span { display: block; font-family: var(--display); font-weight: 600; font-size: 6.2cqw; line-height: 1.05; letter-spacing: .12em; text-transform: uppercase; color: #d9b45a; padding-left: 12.6cqw; white-space: nowrap; }

/* hero signs: the blue plaque is clearly the largest; the others sit behind it and smaller */
@media (min-width: 721px) {
  .hero-stage::before { padding-top: 84% !important; }
  .hero-stage .hc-1 { left: 1%;  top: 5%;  width: 45%; transform: rotate(-2deg); z-index: 5; }
  .hero-stage .hc-2 { left: auto; right: 0; top: 1%; width: 49%; transform: rotate(2.5deg); z-index: 1; }
  .hero-stage .hc-4 { left: 38%; top: 36%; width: 27%; transform: rotate(6deg); z-index: 3; }
  .hero-stage .hc-3 { left: 73%; right: auto; top: 40%; width: 19%; transform: rotate(-3deg); z-index: 4; }
}
.flourish { padding: clamp(10px, 1.6vw, 18px) 0 !important; }
.flourish svg { width: min(58vw, 250px) !important; filter: none !important; }
@media (max-width: 720px) { .flourish { padding: 8px 0 !important; } .flourish svg { width: 60vw !important; } }

/* hero signs: drawn closer together; the Service Record (white) a little larger */
@media (min-width: 721px) {
  .hero-stage::before { padding-top: 78% !important; }
  .hero-stage .hc-1 { left: 5%;  top: 4%;  width: 44%; }
  .hero-stage .hc-2 { left: auto; right: 3%; top: 2%; width: 46%; }
  .hero-stage .hc-4 { left: 36%; top: 33%; width: 33%; transform: rotate(6deg); z-index: 3; }
  .hero-stage .hc-3 { left: 66%; top: 36%; width: 18%; transform: rotate(-3deg); z-index: 4; }
}
@media (min-width: 721px) { .hero-stage::before { padding-top: 82% !important; } .hero-stage .hc-4 { top: 31%; } .hero-stage .hc-3 { top: 34%; } }

/* "of Aotearoa": white, spread to span the whole headline panel */
.wm-sub span { color: var(--parchment) !important; padding-left: 0 !important; text-align: justify; text-align-last: justify; letter-spacing: 0 !important; font-size: 9.6cqw !important; white-space: nowrap; }
.wm-sub span { font-size: 10.8cqw !important; letter-spacing: .14em !important; }
.flourish { padding: clamp(14px, 2.2vw, 26px) 0 !important; }
.flourish svg { width: min(72vw, 420px) !important; }
@media (max-width: 720px) { .flourish svg { width: 72vw !important; } }
.ships-closing { margin: 34px 0 6px; text-align: center; font-family: var(--display); font-weight: 800; font-size: clamp(30px, 5vw, 64px); letter-spacing: .08em; text-transform: uppercase; color: #d9b45a; line-height: 1.1; }

/* ---- the research panel ---- */
.research { margin: 16px 0 6px; border: 2px solid #d9b45a; background: #0c0c0b; }
.research[hidden] { display: none; }
.rs-head { display: flex; align-items: center; gap: 14px; padding: 14px 18px; background: #17120a; border-bottom: 1px solid #3a3020; }
.rs-head b { display: block; font-family: var(--display); font-weight: 800; font-size: clamp(17px, 1.8vw, 22px); letter-spacing: .05em; color: var(--parchment); }
.rs-head span:not(.rs-clock) { display: block; font: 500 15px system-ui, sans-serif; color: #b9ae92; margin-top: 2px; }
.rs-clock { flex: none; width: 34px; height: 34px; border-radius: 50%; border: 3px solid #d9b45a; position: relative; }
.rs-clock::before, .rs-clock::after { content: ""; position: absolute; left: 50%; bottom: 50%; width: 3px; background: #d9b45a; transform-origin: 50% 100%; border-radius: 2px; margin-left: -1.5px; }
.rs-clock::before { height: 11px; animation: rs-spin 1.2s linear infinite; }
.rs-clock::after { height: 8px; animation: rs-spin 9.6s linear infinite; }
.research:not(.busy) .rs-clock::before, .research:not(.busy) .rs-clock::after { animation: none; }
.research:not(.busy) .rs-clock { border-color: #6ea56e; }
.research:not(.busy) .rs-clock::before { transform: rotate(0deg); background: #6ea56e; height: 10px; }
.research:not(.busy) .rs-clock::after { transform: rotate(90deg); background: #6ea56e; }
@keyframes rs-spin { to { transform: rotate(360deg); } }
.rs-steps { list-style: none; margin: 0; padding: 8px 18px 10px; }
.rs-steps li { display: grid; grid-template-columns: 22px minmax(0, 1fr); gap: 4px 12px; padding: 10px 0; align-items: start; }
.rs-steps .dot { width: 14px; height: 14px; border-radius: 50%; border: 2px solid #5a4a2d; margin-top: 4px; }
.rs-steps .rs-t b { display: block; font: 700 16px system-ui, sans-serif; color: var(--parchment); }
.rs-steps .rs-t em { display: block; font-style: normal; font: 500 14px system-ui, sans-serif; color: #9d947c; }
.rs-steps .rs-f { grid-column: 2; font: 500 15px/1.4 system-ui, sans-serif; color: #e6dcc0; }
.rs-steps li.wait { opacity: .45; }
.rs-steps li.run .dot { border-color: #d9b45a; border-top-color: transparent; animation: rs-spin .8s linear infinite; }
.rs-steps li.ok .dot { background: #6ea56e; border-color: #6ea56e; }
.rs-steps li.miss .dot { background: transparent; border-color: #8f866e; }
.rs-steps li.later .dot { background: #d9b45a; border-color: #d9b45a; }
.rs-steps li.later .rs-f { color: #d9b45a; font-weight: 700; }
.rs-result { padding: 4px 18px 20px; border-top: 1px solid #3a3020; }
.rs-result h3 { margin: 14px 0 8px; font: 800 13px system-ui, sans-serif; letter-spacing: .16em; text-transform: uppercase; color: #d9b45a; }
.rs-result p { margin: 0 0 12px; font-size: clamp(19px, 1.8vw, 22px); line-height: 1.55; color: #f4eedf; }
.rs-locked { display: grid; gap: 9px; margin: 2px 0 14px; filter: blur(2.2px); opacity: .75; }
.rs-locked i { display: block; height: 14px; border-radius: 7px; background: linear-gradient(90deg, #6b573a, #3a3020); }
.rs-locked i:nth-child(2) { width: 92%; } .rs-locked i:nth-child(3) { width: 97%; } .rs-locked i:nth-child(4) { width: 84%; } .rs-locked i:nth-child(5) { width: 60%; }
.rs-lock { border: 1px dashed #d9b45a; padding: 14px 16px; background: rgba(217,180,90,.07); }
.rs-lock b { display: block; font: 800 17px system-ui, sans-serif; color: #fff; }
.rs-lock span { display: block; margin-top: 4px; font: 500 15px/1.5 system-ui, sans-serif; color: #d8cdae; }
@media (prefers-reduced-motion: reduce) { .rs-clock::before, .rs-clock::after, .rs-steps li.run .dot { animation: none; } }
.rs-result p { font-family: "EB Garamond", Georgia, serif !important; }
.ships-head { flex-direction: column; align-items: center; text-align: center; gap: 6px; }
.ships-h { font-size: clamp(38px, 7vw, 100px) !important; line-height: 1.02; letter-spacing: .06em !important; text-align: center; margin: 0; }
.ships-head .count { display: none; }
.ships-lede { text-align: center; margin-left: auto; margin-right: auto; }
@media (max-width: 720px) { .ships-h { font-size: clamp(32px, 9.6vw, 46px) !important; } }
.medal-row.na { opacity: .5; } .mr-note { font: 600 13px system-ui; color: #d9b45a; font-style: normal; }

/* of Aotearoa: 25% smaller than before (138px -> 104px), letters spread to the full width of the panel */
.wm-sub span { display: flex !important; justify-content: space-between; text-align: initial !important; text-align-last: initial !important; letter-spacing: 0 !important; font-size: 8.1cqw !important; }
.wm-sub span i { font-style: normal; display: block; }

/* the top signs are one graphic, drawn wider and reaching further into the right of the page */
@media (min-width: 900px) {
  .hero { overflow: visible; }
  .hero-stage { margin-right: calc(-1 * min(9vw, 150px)); }
}
@media (min-width: 900px) {
  .hero { grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr) !important; }
  .hero-stage { margin-right: -30px !important; }
}
.hero-copy .bn-fact { margin: 0 0 18px; font-size: clamp(19px, 1.9vw, 24px); line-height: 1.5; color: #f0d488; font-weight: 500; max-width: 30em; }
.wm-sub span { font-size: 6.1cqw !important; }
/* nothing may sit on top of the poppies: section bands stay behind the side rails */
.flourish { position: static !important; z-index: auto !important; }
.rail { z-index: 6 !important; }
/* white service-record sign in the hero: 20% larger (33% -> 39.6% of the stage), same centre */
@media (min-width: 721px) { .hero-stage .hc-4 { width: 39.6% !important; left: 32.7% !important; top: 22% !important; } }
/* ship graphic option */
.ship-art-opt { margin: 8px 0 18px; padding: 16px 18px; border: 1px solid rgba(217,180,90,.45); background: rgba(217,180,90,.05); }
.ship-art-opt .sa-tick { display: flex; gap: 12px; align-items: center; cursor: pointer; font-size: 17px; color: #f3ead2; }
.ship-art-opt input[type=checkbox], .ship-art-opt input[type=radio] { width: 20px; height: 20px; accent-color: #d9b45a; flex: none; }
.ship-art-opt .sa-choice { margin-top: 12px; display: grid; gap: 8px; }
.ship-art-opt .sa-which { display: flex; gap: 10px; align-items: center; cursor: pointer; color: #ddd3b8; }
.ship-art-opt .sa-which b { color: #d9b45a; font-weight: 600; }
.ship-art-opt .sa-prev { width: min(320px, 100%); color: #d9b45a; margin: 6px 0 0; line-height: 0; }
.ship-art-opt .sa-prev:empty { display: none; }
.ship-art-opt .sa-note { color: #b9ae92; font-size: 13px; line-height: 1.5; }
/* 28th (Maori) Battalion badge: centred in its card */
.pio-badges-one { display: flex !important; justify-content: center !important; }
.pio-badges-one figure { margin-left: auto; margin-right: auto; }
/* the first New Zealanders to go to war */
.first-nz { padding: clamp(28px, 5vw, 56px) 0; }
.fn-card { border: 2px solid #d9b45a; background: linear-gradient(180deg, rgba(217,180,90,.09), rgba(217,180,90,.03)); padding: clamp(22px, 3.4vw, 44px); }
.fn-k { display: block; font-size: 13px; letter-spacing: .22em; text-transform: uppercase; color: #d9b45a; margin-bottom: 10px; }
.fn-card h2 { margin: 0 0 18px; font-size: clamp(30px, 4.4vw, 54px); line-height: 1.08; color: #f3ead2; }
.fn-story { columns: 2 340px; column-gap: 40px; }
.fn-story p { margin: 0 0 14px; font-size: 19px; line-height: 1.6; color: #e6dcc3; break-inside: avoid; }
.fn-roll { list-style: none; margin: 22px 0 0; padding: 18px 0 0; border-top: 1px solid rgba(217,180,90,.45); columns: 2; column-gap: 40px; }
@media (max-width: 560px) { .fn-roll { columns: 1; } }
.fn-roll li { break-inside: avoid; padding: 5px 0; color: #ddd3b8; font-size: 16px; line-height: 1.35; }
.fn-roll b { color: #f3ead2; font-weight: 600; }
.fn-r { display: block; font-size: 11px; letter-spacing: .16em; text-transform: uppercase; color: #d9b45a; }
.fn-roll small { display: block; color: #a99f85; font-size: 12px; }
.fn-fine { margin: 20px 0 0; font-size: 13.5px; color: #b9ae92; line-height: 1.55; }
.fn-fine a { color: #d9b45a; }
.fn-card h2 { font-size: clamp(40px, 7.2vw, 96px); line-height: 1.02; margin-bottom: 24px; }
.fn-story p { font-size: clamp(21px, 2.1vw, 26px); line-height: 1.55; }
.fn-roll li { font-size: clamp(22px, 2.3vw, 30px); line-height: 1.25; padding: 9px 0; }
.fn-r { font-size: 14px; letter-spacing: .18em; margin-bottom: 2px; }
.fn-roll small { font-size: 15px; margin-top: 1px; }
.fn-card h2 { font-family: var(--display); font-weight: 800; text-transform: uppercase; letter-spacing: .04em; font-size: clamp(34px, 5.6vw, 78px); line-height: 1.05; }
.fn-card h2 { font-size: clamp(30px, 4.5vw, 66px); }
/* headlines everywhere use the old-style serif (EB Garamond), bold, in normal capitalisation */
h1, h2, .hero h1, .sec-head h2, #signs .sec-head h2, .plaque h2, .fn-card h2, .pio h2, .ships h2, #maori h2, #ships h2, .hero-h {
  font-family: var(--serif) !important; font-weight: 700 !important; text-transform: none !important; letter-spacing: .005em !important;
}
.hero h1 { line-height: 1 !important; }
.hero h1 { font-size: clamp(64px, 11.6vw, 220px) !important; }
.wm-sub span, .bignum span { font-family: var(--serif) !important; font-weight: 700 !important; }
.bignum span { text-transform: none !important; letter-spacing: .01em !important; }
.wordmark .wm-name { font-size: 18.4cqw !important; line-height: .95 !important; letter-spacing: 0 !important; }
h3, .reg-name, .remember, .steps h3, .pio-card h3 { font-family: var(--serif) !important; font-weight: 700 !important; text-transform: none !important; letter-spacing: .01em !important; }
.reg-name { font-size: 26px !important; }
.pio-card h3 { font-size: clamp(30px, 3.4vw, 44px) !important; }
.wordmark .wm-name { text-transform: uppercase !important; font-size: 13.5cqw !important; letter-spacing: .02em !important; }
#signs .sec-head { display: block !important; }
#signs .sec-head h2 { white-space: nowrap !important; font-size: clamp(24px, 8.4vw, 104px) !important; line-height: 1.05 !important; text-align: center !important; }
#signs .sec-head .count { display: block; margin: 8px 0 0 !important; text-align: center; }
.bignum b { font-family: var(--serif) !important; font-weight: 700 !important; font-variant-numeric: lining-nums !important; font-feature-settings: "lnum" 1 !important; letter-spacing: 0 !important; }
.bignum b { font-size: clamp(76px, 13vw, 176px) !important; }
@media (max-width: 720px) { .bignum b { font-size: clamp(72px, 25vw, 124px) !important; } }
#make .sec-head h2 { font-size: clamp(26px, 7vw, 96px) !important; line-height: 1.05 !important; white-space: nowrap; }
@media (max-width: 720px) { #make .sec-head h2 { font-size: clamp(26px, 8.4vw, 48px) !important; } }
.poem-head h2, .plaque-inner > h2, .lwf .hero-h { font-size: clamp(28px, 7vw, 96px) !important; line-height: 1.05 !important; }
.poem-head h2 { white-space: nowrap; }
@media (max-width: 720px) { .poem-head h2, .plaque-inner > h2, .lwf .hero-h { font-size: clamp(26px, 8.4vw, 48px) !important; } }
.steps h3 { font-size: clamp(26px, 2.8vw, 38px) !important; line-height: 1.15 !important; margin-bottom: 10px !important; }
.steps li::before { font-size: 44px !important; }
/* the Pioneers write-up */
.pio-write-wrap { position: relative; z-index: 1; margin-top: clamp(28px, 5vw, 56px); }
.pio-write { border: 2px solid #d9b45a; background: rgba(8,14,11,.72); padding: clamp(22px, 3.4vw, 44px); }
.pio-write .pio-era { display: block; font-size: 13px; letter-spacing: .22em; text-transform: uppercase; color: #d9b45a; margin-bottom: 8px; }
.pio-write h3 { margin: 0 0 18px; font-size: clamp(34px, 4.6vw, 62px) !important; line-height: 1.05; color: #f3ead2; }
.pio-write-cols { columns: 2 340px; column-gap: 40px; }
.pio-write-cols p { margin: 0 0 14px; font-size: clamp(19px, 1.7vw, 23px); line-height: 1.6; color: #e6dcc3; break-inside: avoid; }
.pio-write-cols b { color: #d9b45a; font-weight: 600; }
.pio-write-fine { margin: 14px 0 0; font-size: 13.5px; line-height: 1.55; color: #b9ae92; }
.pio-write-cols p { font-size: clamp(21px, 2.1vw, 26px) !important; line-height: 1.55 !important; }
.pio-write-fine { font-size: 13.5px; }
.pio-write h3 { font-size: clamp(30px, 4.5vw, 66px) !important; }
.pio-write-2 { margin-top: clamp(18px, 2.6vw, 30px); }
.pio-read-h { margin: 22px 0 8px; font-family: var(--display); font-size: 12.5px; letter-spacing: .2em; text-transform: uppercase; color: #d9b45a; font-weight: 600; }
.pio-read { list-style: none; margin: 0; padding: 0; columns: 2 340px; column-gap: 40px; }
.pio-read li { break-inside: avoid; padding: 5px 0; font-size: 17px; line-height: 1.4; }
.pio-read a { color: #e6dcc3; text-decoration: underline; text-decoration-color: rgba(217,180,90,.6); text-underline-offset: 3px; }
.pio-read a:hover { color: #d9b45a; }
/* Pioneer Battalion photograph */
.pio-photo { margin: 0 0 clamp(18px, 2.6vw, 30px); border: 2px solid #d9b45a; background: #050807; }
.pio-stage { position: relative; height: clamp(300px, 50vw, 660px); overflow: hidden; background: #050807; }
.pio-slide { position: absolute; inset: 0; display: block; width: 100%; height: 100%; object-fit: cover; object-position: 50% 55%; filter: contrast(1.03); transition: transform .9s cubic-bezier(.65,0,.35,1); will-change: transform; }
@media (prefers-reduced-motion: reduce) { .pio-slide { transition: none; } }
.pio-dots { position: absolute; left: 0; right: 0; bottom: 12px; display: flex; justify-content: center; gap: 10px; z-index: 2; }
.pio-dots button { width: 13px; height: 13px; padding: 0; border-radius: 50%; border: 2px solid #d9b45a; background: rgba(5,8,7,.55); cursor: pointer; }
.pio-dots button.on { background: #d9b45a; }
.pio-cap { display: none; }
.pio-cap.on { display: block; }
.pio-photo figcaption { padding: 14px 18px 16px; font-size: 15.5px; line-height: 1.5; color: #b9ae92; }
.pio-photo figcaption b { color: #e6dcc3; font-weight: 600; }
.pio-photo figcaption a { color: #d9b45a; }
/* Victoria Cross promo block */
.vcp { padding: clamp(28px, 5vw, 56px) 0; }
.vcp-card { display: grid; grid-template-columns: clamp(110px, 16vw, 220px) 1fr; gap: clamp(20px, 4vw, 56px); align-items: center; text-decoration: none; color: inherit; border: 2px solid #d9b45a; background: linear-gradient(180deg, rgba(217,180,90,.09), rgba(217,180,90,.03)), #0c0c0b; padding: clamp(22px, 3.4vw, 44px); }
.vcp-cross { width: 100%; height: auto; color: #d9b45a; display: block; }
.vcp-txt h2 { margin: 6px 0 14px; font-size: clamp(34px, 5.6vw, 78px) !important; line-height: 1.04 !important; color: #e0b94f; font-family: 'IM Fell English', 'EB Garamond', serif !important; font-weight: 400 !important; letter-spacing: .01em !important; }
.vcp-txt p { margin: 0 0 20px; font-size: clamp(20px, 2vw, 26px); line-height: 1.55; color: #e6dcc3; max-width: 36em; }
.vcp-card:hover { border-color: #f0d488; }
@media (max-width: 640px) { .vcp-card { grid-template-columns: 1fr; } .vcp-cross { width: 110px; } }
.nav-links a.nav-vc { color: #131311; background: #d9b45a; padding: 12px 14px; border-radius: 4px; font-weight: 700; }
.nav-links a.nav-vc:hover { background: #f0d488; color: #131311; }
.f-vc { font-style: normal; font: 700 11px system-ui, sans-serif; letter-spacing: .12em; text-transform: uppercase; background: #d9b45a; color: #131311; padding: 2px 8px; margin-left: 8px; border-radius: 3px; vertical-align: middle; }
.vc-match { margin: 4px 0 22px; padding: 16px 20px; border: 2px solid #d9b45a; background: rgba(217,180,90,.08); }
.vc-match[hidden] { display: none; }
.vc-match p { margin: 8px 0 0; font-size: 19px; line-height: 1.55; color: #e6dcc3; }
.vc-match a { color: #f0d488; }
.vc-match b { color: #f3ead2; }
.vc-match .vm-same { color: #e0b94f; }
.vc-match { display: grid; grid-template-columns: clamp(96px, 14vw, 150px) 1fr; gap: clamp(14px, 2.4vw, 26px); align-items: start; }
.vc-match:not([hidden]) { display: grid; }
.vm-medal { width: 100%; height: auto; display: block; filter: drop-shadow(0 6px 10px rgba(0,0,0,.5)); }
.vm-h { margin: 0 0 6px; font-size: clamp(28px, 3.4vw, 46px) !important; line-height: 1.05; color: #e0b94f; }
@media (max-width: 520px) { .vc-match { grid-template-columns: 84px 1fr; } .vm-h { font-size: 26px !important; } }

/* famous Anzac photographs carousel under the hero signs */
.anzac-photos { margin: 0; border: 2px solid #d9b45a; background: #050807; align-self: start; min-width: 0; }
.ap-stage { position: relative; aspect-ratio: 3 / 2; overflow: hidden; background: #050807; }
.ap-slide { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform .9s cubic-bezier(.65,0,.35,1); }
.ap-dots { position: absolute; left: 0; right: 0; bottom: 10px; display: flex; justify-content: center; gap: 10px; z-index: 2; }
.ap-dots button { width: 12px; height: 12px; padding: 0; border-radius: 50%; border: 2px solid #d9b45a; background: rgba(5,8,7,.55); cursor: pointer; }
.ap-dots button.on { background: #d9b45a; }
.anzac-photos figcaption { padding: 12px 16px 14px; font-size: 14.5px; line-height: 1.5; color: #b9ae92; min-height: 6.2em; }
.anzac-photos figcaption b { color: #e6dcc3; font-weight: 600; }
.ap-cap { display: none; } .ap-cap.on { display: block; }
@media (min-width: 900px) {
  .hero > .hero-copy { grid-row: 1 / span 2; }
  .hero > .hero-stage { grid-row: 1; grid-column: 2; }
  .hero > .anzac-photos { grid-row: 2; grid-column: 2; margin-top: 8px; }
}
@media (max-width: 899px) { .anzac-photos { margin-top: 18px; } }

/* poppies live at different depths: scale by --z, and scroll parallax moves them via translate/rotate (independent of the drift animation) */

.rail .rp { scale: var(--z, 1);  }
/* selected sign box: gold outline (same gold as the Maori panel box), add button full width */
.pick.on { border-color: #d9b45a !important; box-shadow: inset 5px 0 0 #d9b45a !important; }
#add-btn { display: block; width: 100%; text-align: center; }
/* form step numbers */
.attest legend .no { display: inline-flex; align-items: center; justify-content: center; min-width: 1.5em; height: 1.5em; padding: 0 .12em; font-family: var(--serif) !important; font-weight: 700 !important; font-size: clamp(44px, 5vw, 64px) !important; line-height: 1 !important; letter-spacing: 0 !important; color: #d9b45a; background: transparent !important; border: 3px solid #d9b45a !important; border-radius: 4px; }
.attest legend { gap: 16px; font-size: clamp(18px, 1.8vw, 24px) !important; }
/* simpler step 1: no nested boxes */
.attest .finder { border: 0 !important; background: none !important; padding: 0 !important; box-shadow: none !important; }
.attest .finder-note { margin-top: 8px; }
.sw-pair { display: grid; grid-template-columns: 1fr 1fr; gap: 6px 32px; margin-top: 18px; padding-top: 16px; border-top: 1px solid rgba(217,180,90,.35); }
.sw-pair .since-war { border: 0 !important; background: none !important; padding: 0 !important; margin: 0 !important; }
.sw-pair .sw-v { font-size: clamp(22px, 2.3vw, 30px) !important; line-height: 1.15 !important; }
.sw-pair .sw-k { font-size: 12px; }
.sw-pair .sw-d { font-size: 15px; }
.sw-pair:not(:has(.since-war:not([hidden]))) { display: none; }
@media (max-width: 640px) { .sw-pair { grid-template-columns: 1fr; } }
/* step numbers: just the numeral, no box */
.attest legend .no { border: 0 !important; min-width: 0 !important; height: auto !important; padding: 0 !important; font-size: clamp(48px, 5.4vw, 68px) !important; }
.sw-pair .sw-v { font-size: clamp(17px, 1.7vw, 22px) !important; text-transform: none !important; letter-spacing: .01em !important; font-weight: 700 !important; }
#add-btn { font-size: 23px !important; letter-spacing: 1.15px !important; padding: 18px 22px !important; }
@media (max-width: 720px) { #add-btn { font-size: 20px !important; letter-spacing: 1px !important; } }
/* on/off switch buttons (Age it): light up when on, no tick mark */
.chip-switch input:checked + span::before { content: none !important; margin: 0 !important; }
.chip-switch input:checked + span { background: #d9b45a !important; color: #131311 !important; border-color: #f0d488 !important; box-shadow: 0 0 0 3px rgba(217,180,90,.28), 0 0 18px rgba(217,180,90,.45); }

/* three-state wear buttons: half filled = light, fully filled = heavy */
.chip-tri { cursor: pointer; }
.chip-tri span { transition: background .15s, color .15s, box-shadow .15s; }
.chip-tri[data-level="1"] span { background: linear-gradient(90deg, #a5842f 0 50%, transparent 50% 100%) !important; color: #fff6dc !important; text-shadow: 0 1px 2px rgba(0,0,0,.6); border-color: #d9b45a !important; box-shadow: 0 0 0 3px rgba(217,180,90,.2); }
.chip-tri[data-level="2"] span { background: #d9b45a !important; color: #131311 !important; border-color: #f0d488 !important; box-shadow: 0 0 0 3px rgba(217,180,90,.28), 0 0 18px rgba(217,180,90,.45); }
.chip-tri[data-level="1"] span, .chip-tri[data-level="2"] span { text-shadow: none; }
.chip-tri:focus-visible span { outline: 3px solid #ff7c62; outline-offset: 2px; }
/* quantity radios: 1 to 4, compact chips */
.qty-chips .chip-opt span { min-width: 64px !important; padding: 0 !important; font-size: 20px; }
/* send and download: large type like the add button, stacked, full width */
.submit-row { display: flex !important; flex-direction: column !important; align-items: stretch !important; gap: 14px !important; }
.submit-row .btn { display: block; width: 100%; text-align: center; font-size: 23px !important; letter-spacing: 1.15px !important; padding: 18px 22px !important; }
@media (max-width: 720px) { .submit-row .btn { font-size: 20px !important; letter-spacing: 1px !important; } }
/* step titles sized to match their numerals */
.attest legend { font-size: clamp(28px, 3.4vw, 46px) !important; letter-spacing: .14em !important; align-items: center !important; }
@media (max-width: 640px) { .attest legend { font-size: 24px !important; letter-spacing: .1em !important; } }
.qty-chips .chip-opt input:checked + span::before { content: none !important; margin: 0 !important; }
/* step titles: same serif as the numerals, one line, one size for all */
.attest legend { font-family: var(--serif) !important; font-weight: 700 !important; text-transform: none !important; letter-spacing: 0 !important; font-size: clamp(30px, 4.2vw, 56px) !important; white-space: nowrap; line-height: 1.05; }
@media (max-width: 640px) { .attest legend { font-size: clamp(26px, 8vw, 34px) !important; gap: 12px !important; } }

/* poppies far off screen are switched off entirely, so the browser only ever holds a couple of dozen drawing layers */
.rp.rp-off { display: none; }
/* form buttons in the headline serif (EB Garamond), normal capitalisation */
#add-btn, .submit-row .btn { font-family: var(--serif) !important; font-weight: 700 !important; text-transform: none !important; letter-spacing: .01em !important; font-size: clamp(26px, 2.6vw, 34px) !important; }
@media (max-width: 720px) { #add-btn, .submit-row .btn { font-size: 24px !important; } }
/* every red button: headline serif, bold, normal capitals, large */
.btn-poppy, .m-cta, #add-btn, #submit-btn { font-family: var(--serif) !important; font-weight: 700 !important; text-transform: none !important; letter-spacing: .01em !important; font-size: clamp(24px, 2.4vw, 32px) !important; line-height: 1.15; }
.btn-poppy { padding: 16px 26px; }
@media (max-width: 720px) { .btn-poppy, .m-cta, #add-btn, #submit-btn { font-size: 22px !important; } }
/* the Pioneer photo and write-up panels join into one block: no gaps, no doubled borders */
.pio-photo { margin: 0 !important; }
.pio-write-wrap { margin-top: 0 !important; }
.pio-write-wrap .pio-write { border-top-width: 0 !important; margin: 0 !important; }
.pio-write-wrap .pio-write + .pio-write { margin-top: 0 !important; }
.pio-write-wrap:has(.pio-photo) .pio-photo { border-bottom: 0; }
.pio-write-wrap { display: block; }
/* sign list headings in "The Sign of a Soldier": larger */
.reg-name { font-size: clamp(30px, 3.4vw, 44px) !important; line-height: 1.08 !important; }
.reg-sub { font-size: clamp(18px, 1.7vw, 22px) !important; }
@media (max-width: 720px) { .reg-name { font-size: 28px !important; } }
/* every list number uses the numeral face of the form step numbers: headline serif, bold, no lining override */
.reg-code, .steps li::before, .rs-steps li::before, .attest legend .no, .vc-no {
  font-family: var(--serif) !important; font-weight: 700 !important; font-variant-numeric: normal !important; font-feature-settings: normal !important; letter-spacing: 0 !important;
}
.reg-code { font-size: clamp(56px, 6.4vw, 84px) !important; }
.steps li::before { font-size: clamp(52px, 5vw, 64px) !important; }
@media (max-width: 720px) { .reg-code { font-size: 48px !important; } .steps li::before { font-size: 46px !important; } }
/* the preview panel gets a lid: a gold top border matching its sides */
.live-bar { border-top: 2px solid #d9b45a !important; border-left-color: #d9b45a !important; border-right-color: #d9b45a !important; }
.live-tabs { border-left-color: #d9b45a !important; border-right-color: #d9b45a !important; }
.live-stage { border-color: #d9b45a !important; border-top: 0 !important; }
.attest legend { gap: clamp(22px, 2.4vw, 34px) !important; }
@media (max-width: 640px) { .attest legend { gap: 18px !important; } }
/* the joined Pioneer panels read as one open block: no divider line between the write-ups */
.pio-write-wrap .pio-write:not(:first-of-type) { border-top: 0 !important; padding-top: 0 !important; }
.pio-write-wrap .pio-write:has(+ .pio-write) { border-bottom: 0 !important; padding-bottom: clamp(10px, 1.6vw, 20px) !important; }

/* GPU safety: no blur/drop-shadow filters on the poppies and no backdrop blur on the sticky nav. Filters on hundreds of moving layers exhaust graphics memory in real browsers and make page text blank out. */
.rp, .rail .rp { filter: none !important; }
.sub-nav { backdrop-filter: none !important; -webkit-backdrop-filter: none !important; background: rgb(19,19,17) !important; }
.rail { contain: layout paint; }
/* sign list: the size and price block sizes itself to fit inside the row, wherever the row is wide enough for three columns */
@media (min-width: 821px) {
  .register .reg-row { grid-template-columns: 96px minmax(0, 1fr) max-content !important; column-gap: 16px !important; padding-right: 20px !important; }
  .register .reg-size { width: auto !important; grid-template-columns: max-content max-content max-content !important; column-gap: 18px !important; font-size: clamp(14px, 1.3vw, 17px) !important; }
  .register .reg-size .rs-p { white-space: nowrap; }
}
@media (min-width: 821px) and (max-width: 1100px) { .register .reg-row { grid-template-columns: 56px minmax(0, 1fr) max-content !important; } .reg-name { font-size: 26px !important; } }

html { overflow-anchor: none; scroll-behavior: auto !important; }

/* home masthead: tagline under the top gold line, a second gold line, then the existing sentence */
.wm-rule-tag { display: block !important; text-align: left; }
.wm-rule-tag > span { display: block; }
.wm-rule-tag .wm-tagline { font-family: var(--serif); font-weight: 700; font-size: clamp(22px, 3vw, 40px); letter-spacing: .01em; color: #e0b94f; line-height: 1.15; padding: 12px 0 14px; }
.wm-rule-tag .wm-mid { display: block; border-top: 5px solid var(--bronze-3); margin: 0 0 12px; }
@media (max-width: 720px) { .wm-rule-tag .wm-tagline { font-size: 22px; padding: 8px 0 10px; } }
.wm-rule-tag .wm-tagline { text-transform: none !important; letter-spacing: .01em !important; color: #e0b94f !important; }
/* masthead: tagline sized to span the gold bars; the sentence below keeps its own styling */
.wm-rule-tag { container-type: inline-size; }
.wm-rule-tag .wm-tagline { font-size: 4.7cqw !important; white-space: nowrap; padding: 10px 0 12px !important; line-height: 1.1 !important; }
.wm-rule-tag > span:not(.wm-tagline) { font-size: clamp(13px, 1.7vw, 22px) !important; letter-spacing: .12em !important; color: var(--parchment) !important; text-transform: uppercase; line-height: 1.4; padding-bottom: 10px; }
@media (max-width: 720px) { .wm-rule-tag .wm-tagline { font-size: 4.7cqw !important; } .wm-rule-tag > span:not(.wm-tagline) { font-size: 14px !important; letter-spacing: .09em !important; } }
.wm-rule-tag .wm-tagline, .wm-rule.wm-rule-tag > span.wm-tagline { font-size: 5.3cqw !important; letter-spacing: 0 !important; }
@media (max-width: 720px) { .wm-rule.wm-rule-tag > span.wm-tagline { font-size: 5.3cqw !important; letter-spacing: 0 !important; line-height: 1.1 !important; } }
.wm-rule.wm-rule-tag > span:not(.wm-tagline) { font-size: 1.62cqw !important; white-space: nowrap; letter-spacing: .11em !important; }
@media (max-width: 720px) { .wm-rule.wm-rule-tag > span:not(.wm-tagline) { font-size: 14px !important; white-space: normal; text-wrap: balance; letter-spacing: .08em !important; } }
/* masthead tagline in capitals, both lines centred vertically between their gold lines */
.wm-rule.wm-rule-tag { padding: 0 !important; }
.wm-rule.wm-rule-tag > span.wm-tagline { text-transform: uppercase !important; letter-spacing: .02em !important; padding: 0 !important; line-height: 1 !important; display: flex; align-items: center; min-height: 1.9em; font-size: 4.0cqw !important; }
.wm-rule-tag .wm-mid { margin: 0 !important; }
.wm-rule.wm-rule-tag > span:not(.wm-tagline) { display: flex; align-items: center; min-height: 3.2em; padding: 0 !important; line-height: 1.2 !important; }
@media (max-width: 720px) { .wm-rule.wm-rule-tag > span.wm-tagline { font-size: 4.0cqw !important; min-height: 1.9em; } .wm-rule.wm-rule-tag > span:not(.wm-tagline) { min-height: 3.6em; } }
.wm-rule.wm-rule-tag > span.wm-tagline, .wm-rule.wm-rule-tag > span.wm-tagline { font-size: 3.6cqw !important; }
@media (max-width: 720px) { .wm-rule.wm-rule-tag > span.wm-tagline { font-size: 3.6cqw !important; } }
/* masthead sentence in upper and lower case, in the headline serif */
.wm-rule.wm-rule-tag > span:not(.wm-tagline) { text-transform: none !important; font-family: var(--serif) !important; font-weight: 500 !important; letter-spacing: .01em !important; font-size: 2.4cqw !important; }
@media (max-width: 720px) { .wm-rule.wm-rule-tag > span:not(.wm-tagline) { font-size: 17px !important; letter-spacing: .01em !important; } }
/* masthead sentence: all capitals, spread edge to edge between the margins */
.wm-rule.wm-rule-tag > span:not(.wm-tagline) { text-transform: uppercase !important; font-family: var(--display) !important; font-weight: 600 !important; font-size: 1.62cqw !important; white-space: nowrap !important; display: block !important; min-height: 0 !important; padding: 1.2em 0 !important; letter-spacing: .1em; }
@media (max-width: 720px) { .wm-rule.wm-rule-tag > span:not(.wm-tagline) { font-size: 14px !important; white-space: normal !important; text-align: justify; text-align-last: justify; text-wrap: balance; padding: .9em 0 !important; letter-spacing: .06em !important; } }
/* masthead tagline in an old, worn letterpress face (IM Fell English), sized to span the bars */
.wm-rule.wm-rule-tag > span.wm-tagline { font-family: 'IM Fell English', 'EB Garamond', serif !important; font-weight: 400 !important; font-style: normal; letter-spacing: .02em !important; font-size: 4.6cqw !important; }
@media (max-width: 720px) { .wm-rule.wm-rule-tag > span.wm-tagline { font-size: 4.6cqw !important; } }
.wm-rule.wm-rule-tag > span.wm-tagline { text-transform: none !important; font-size: 5.6cqw !important; letter-spacing: 0 !important; }
@media (max-width: 720px) { .wm-rule.wm-rule-tag > span.wm-tagline { font-size: 5.6cqw !important; } }
/* TRIAL: masthead title and subtitle in the worn letterpress face. To undo, delete this block. */
.wordmark .wm-name { font-family: 'IM Fell English', 'EB Garamond', serif !important; font-weight: 400 !important; font-size: 11.4cqw !important; letter-spacing: .02em !important; }
.wm-sub span { font-family: 'IM Fell English', 'EB Garamond', serif !important; font-weight: 400 !important; }
/* END TRIAL */

/* masthead: sentence removed; the second gold line closes the tagline, no bar below it */
.wm-rule.wm-rule-tag { border-bottom: 0 !important; }
/* "THE ANZACS" hugs the right edge; "of Aotearoa" stays centred/full-width via spreadSub() */
.wordmark .wm-name { flex: 1 1 auto; text-align: right; }
/* hero: the left column stretches to the height of the right one, and the spare space goes above "Lest we forget", so the buttons line up with the bottom of the photo panel */
@media (min-width: 900px) {
  .hero > .hero-copy { align-self: stretch; display: flex; flex-direction: column; }
  .hero-copy .lwf { margin-top: auto; padding-top: 18px; }
}
/* hero "Lest we forget." in the worn letterpress face */
.hero-copy .lwf .hero-h, .hero-copy .lwf h2.hero-h { font-family: 'IM Fell English', 'EB Garamond', serif !important; font-weight: 400 !important; letter-spacing: .01em !important; }
.hero-copy .lwf .hero-h { font-size: clamp(26px, 3.4vw, 50px) !important; }
.hero-copy .lwf .hero-h { font-size: clamp(34px, 5.6vw, 82px) !important; }

/* wear buttons: three levels. one third filled = light, two thirds = medium, fully filled = heavy */
.chip-tri[data-level="1"] span { background: linear-gradient(90deg, #a5842f 0 33.3%, transparent 33.3% 100%) !important; }
.chip-tri[data-level="2"] span { background: linear-gradient(90deg, #a5842f 0 66.6%, transparent 66.6% 100%) !important; color: #fff6dc !important; border-color: #d9b45a !important; box-shadow: 0 0 0 3px rgba(217,180,90,.2) !important; text-shadow: 0 1px 2px rgba(0,0,0,.6); }
.chip-tri[data-level="3"] span { background: #d9b45a !important; color: #131311 !important; border-color: #f0d488 !important; box-shadow: 0 0 0 3px rgba(217,180,90,.28), 0 0 18px rgba(217,180,90,.45) !important; text-shadow: none; }
.pick[data-code="D1"] .chip-opt input:checked + span::before, .pick[data-code="V1"] .chip-opt input:checked + span::before { content: none; margin: 0; }
.qty-step { display: inline-flex; align-items: stretch; }
.pick .qty-step input.qty-stepper { width: 92px; height: 64px; min-height: 64px; margin: 0; padding: 0; font: 700 34px system-ui, -apple-system, "Segoe UI", Helvetica, Arial, sans-serif; text-align: center; color: #131311; background: #f4eedf; border: 2px solid #f4eedf; border-radius: 0; -moz-appearance: textfield; appearance: textfield; }
.pick .qty-step input.qty-stepper::-webkit-inner-spin-button, .pick .qty-step input.qty-stepper::-webkit-outer-spin-button { -webkit-appearance: none; margin: 0; }
.qty-step .qs-btns { display: flex; flex-direction: column; }
.qty-step .qs-btns button { flex: 1; width: 52px; padding: 0; font-size: 20px; line-height: 1; color: #f4eedf; background: #3a2018; border: 2px solid #f4eedf; border-left: 0; border-radius: 0; cursor: pointer; }
.qty-step .qs-btns button + button { border-top: 0; }
.qty-step .qs-btns button:hover { background: #b3301f; }
.qty-step .qs-total { display: flex; flex-direction: column; justify-content: center; margin-left: 22px; color: #f4eedf; line-height: 1.15; }
.qty-step .qs-total b { font: 700 34px system-ui, -apple-system, "Segoe UI", Helvetica, Arial, sans-serif; }
.qty-step .qs-total small { font-size: 14px; color: #cdbf9a; }
.pick .qty-chips:has(.qty-step) { justify-content: center; width: 100%; }
.pick .qty-step { align-items: center; justify-content: center; gap: 0; }
.pick .qty-step .qs-btns { align-self: stretch; }
.qty-step .qs-total { margin-left: 26px; justify-content: center; align-items: center; text-align: center; min-width: 190px; }
.pick .opt-row:has(.qty-step) { width: fit-content; margin-left: auto; margin-right: auto; }
.pick .qty-chips:has(.qty-step) { width: auto; justify-content: flex-start; }
.addr-panel { margin: 4px 0 16px; padding: 16px 18px 18px; border: 1px solid rgba(201,169,110,.45); background: rgba(255,255,255,.03); }
.addr-panel .addr-h { margin: 0 0 12px; font: 700 15px/1.2 "Cinzel", Georgia, serif; letter-spacing: .12em; text-transform: uppercase; color: var(--brass); }
.addr-panel .addr-h small { font: 400 13px system-ui, sans-serif; letter-spacing: 0; text-transform: none; color: #b3a882; margin-left: 8px; }
.addr-panel > .fld, .addr-panel > .row { margin-bottom: 12px; }
.addr-panel > .row:last-child { margin-bottom: 0; }
.pick[data-code="D1"] .opt-chips:not(.qty-chips), .pick[data-code="V1"] .opt-chips:not(.qty-chips) { display: grid; grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); gap: 12px; }
.pick[data-code="D1"] .chip-opt span img, .pick[data-code="V1"] .chip-opt span img { display: block; width: 100%; height: auto; aspect-ratio: 420 / 585; object-fit: cover; }
.pick[data-code="D1"] .chip-opt span em, .pick[data-code="V1"] .chip-opt span em { font-style: normal; font-size: 15px; line-height: 1.2; text-align: center; color: inherit; margin: 0; white-space: normal; }
.pick-head { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
.pick-top .tag { display: inline-flex; align-items: center; order: 1; margin-left: 0; padding: 6px 16px; font: 900 13px/1.3 system-ui, -apple-system, "Segoe UI", Helvetica, Arial, sans-serif; letter-spacing: .07em; text-transform: uppercase; text-decoration: none; border: 2px solid; border-radius: 99px; white-space: nowrap; -webkit-text-stroke: .4px currentColor; }
.pick-top .tag-custom { color: #17120a; border-color: #d9b45a; background: #d9b45a; }
.pick-top .tag-stock { color: #131311; border-color: #f4eedf; background: #f4eedf; }
.pick[data-code="D1"] .opt-chips:not(.qty-chips), .pick[data-code="V1"] .opt-chips:not(.qty-chips) { grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); align-items: start; }
.reg-name { display: block; }
.reg-head { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; }
.reg-name .reg-tag { display: inline-flex; align-items: center; order: 1; margin-left: 0; font-size: 13px; font-weight: 900; letter-spacing: .07em; text-transform: uppercase; text-decoration: none; padding: 6px 16px; border: 2px solid; border-radius: 99px; white-space: nowrap; -webkit-text-stroke: .4px currentColor; }
.reg-name .tag-custom.reg-tag { color: #17120a; border-color: #d9b45a; background: #d9b45a; }
.reg-name .tag-stock.reg-tag { color: #f4eedf; border-color: #241a12; background: #241a12; }
.tag-count { order: 2; font-family: 'IM Fell English', 'EB Garamond', serif; font-weight: 400; letter-spacing: .04em; color: var(--brass); white-space: nowrap; }
.pick-head .tag-count { font-size: clamp(19px, 1.7vw, 23px); }
.reg-head .tag-count { font-size: clamp(30px, 3.4vw, 44px); color: #5c4d30; }
.register .reg-row[aria-current="true"] .tag-count { color: #cfc6ad; }
.reg-viewing { display: none; }
.register .reg-row[aria-current="true"] .reg-viewing { display: inline-flex; align-items: center; order: 2; margin-left: auto; text-decoration: none; font: 900 13px system-ui, -apple-system, "Segoe UI", Helvetica, Arial, sans-serif; letter-spacing: .1em; text-transform: uppercase; padding: 6px 16px; border-radius: 99px; color: #17120a; background: #d9b45a; white-space: nowrap; }
.attest legend .no { font-variant-numeric: lining-nums !important; font-feature-settings: "lnum" 1 !important; }
#signs .sec-head h2 { font-family: 'IM Fell English', 'EB Garamond', serif !important; font-weight: 400 !important; letter-spacing: .01em !important; }
.reg-title { font-family: 'IM Fell English', 'EB Garamond', serif !important; font-weight: 400 !important; letter-spacing: .01em !important; }
#signs .reg-sub { font-family: 'IM Fell English', 'EB Garamond', serif !important; font-weight: 400 !important; font-size: clamp(14px, 1.3vw, 17px) !important; }
.fld-code { max-width: 260px; margin-top: 10px; }
.basket-total .was { opacity: .6; margin-right: 8px; text-decoration: line-through; }
.code-note { margin: 6px 0 0; font-size: 13px; color: var(--brass); }
.pick[data-code="D1"] .opt-chips:not(.qty-chips) .chip-opt, .pick[data-code="V1"] .opt-chips:not(.qty-chips) .chip-opt { display: block; }
.pick[data-code="D1"] .opt-chips:not(.qty-chips) .chip-opt span, .pick[data-code="V1"] .opt-chips:not(.qty-chips) .chip-opt span { display: flex; flex-direction: column; align-items: center; gap: 8px; width: 100%; min-width: 0; min-height: 0; padding: 8px 8px 10px; }
.pick[data-code="D1"] .opt-chips:not(.qty-chips) .chip-opt:nth-child(1), .pick[data-code="V1"] .opt-chips:not(.qty-chips) .chip-opt:nth-child(1) { order: 1; }
.pick[data-code="D1"] .opt-chips:not(.qty-chips) .chip-opt:nth-child(2), .pick[data-code="V1"] .opt-chips:not(.qty-chips) .chip-opt:nth-child(2) { order: 2; }
.pick[data-code="D1"] .opt-chips:not(.qty-chips) .chip-opt:nth-child(3), .pick[data-code="V1"] .opt-chips:not(.qty-chips) .chip-opt:nth-child(3) { order: 3; }
.pick[data-code="D1"] .opt-chips:not(.qty-chips) .chip-opt:nth-child(4), .pick[data-code="V1"] .opt-chips:not(.qty-chips) .chip-opt:nth-child(4) { order: 4; }
.pick[data-code="D1"] .opt-chips:not(.qty-chips) .chip-opt:nth-child(5), .pick[data-code="V1"] .opt-chips:not(.qty-chips) .chip-opt:nth-child(5) { order: 5; }
.pick[data-code="D1"] .opt-chips:not(.qty-chips) .chip-opt:nth-child(6), .pick[data-code="V1"] .opt-chips:not(.qty-chips) .chip-opt:nth-child(6) { order: 6; }
.pick[data-code="D1"] .opt-chips:not(.qty-chips) .chip-opt:nth-child(7), .pick[data-code="V1"] .opt-chips:not(.qty-chips) .chip-opt:nth-child(7) { order: 7; }
.pick[data-code="D1"] .opt-chips:not(.qty-chips) .chip-opt:nth-child(8), .pick[data-code="V1"] .opt-chips:not(.qty-chips) .chip-opt:nth-child(8) { order: 8; }
.pick[data-code="D1"] .opt-chips:not(.qty-chips) .chip-opt:nth-child(9), .pick[data-code="V1"] .opt-chips:not(.qty-chips) .chip-opt:nth-child(9) { order: 9; }
.pick[data-code="D1"] .opt-chips:not(.qty-chips) .chip-opt:nth-child(10), .pick[data-code="V1"] .opt-chips:not(.qty-chips) .chip-opt:nth-child(10) { order: 10; }
.pick[data-code="D1"] .opt-chips:not(.qty-chips) .chip-opt:nth-child(11), .pick[data-code="V1"] .opt-chips:not(.qty-chips) .chip-opt:nth-child(11) { order: 11; }
.pick[data-code="D1"] .opt-chips:not(.qty-chips) .chip-opt:nth-child(12), .pick[data-code="V1"] .opt-chips:not(.qty-chips) .chip-opt:nth-child(12) { order: 12; }
.pick[data-code="D1"] .opt-chips:not(.qty-chips) .chip-opt:nth-child(13), .pick[data-code="V1"] .opt-chips:not(.qty-chips) .chip-opt:nth-child(13) { order: 13; }
.pick[data-code="D1"] .opt-chips:not(.qty-chips) .chip-opt:nth-child(14), .pick[data-code="V1"] .opt-chips:not(.qty-chips) .chip-opt:nth-child(14) { order: 14; }
.pick[data-code="D1"] .opt-chips:not(.qty-chips) .chip-opt:nth-child(15), .pick[data-code="V1"] .opt-chips:not(.qty-chips) .chip-opt:nth-child(15) { order: 15; }
.pick[data-code="D1"] .opt-chips:not(.qty-chips) .chip-opt:nth-child(16), .pick[data-code="V1"] .opt-chips:not(.qty-chips) .chip-opt:nth-child(16) { order: 16; }
.pick[data-code="D1"] .opt-chips:not(.qty-chips) .chip-opt:nth-child(17), .pick[data-code="V1"] .opt-chips:not(.qty-chips) .chip-opt:nth-child(17) { order: 17; }
.pick[data-code="D1"] .opt-chips:not(.qty-chips) .chip-opt:nth-child(18), .pick[data-code="V1"] .opt-chips:not(.qty-chips) .chip-opt:nth-child(18) { order: 18; }
.pick[data-code="D1"] .opt-chips:not(.qty-chips) .chip-opt:nth-child(19), .pick[data-code="V1"] .opt-chips:not(.qty-chips) .chip-opt:nth-child(19) { order: 19; }
.pick[data-code="D1"] .opt-chips:not(.qty-chips) .chip-opt:nth-child(20), .pick[data-code="V1"] .opt-chips:not(.qty-chips) .chip-opt:nth-child(20) { order: 20; }