/* ============================================================
   CYCLESHOPNEARME — "THE SHOP INDEX"
   A bench-card desk for finding an independent bicycle shop.
   Register: workshop blueprint / job ticket. Flat colour only.
   Tokens (contrast on --paper #EFF2EF, computed):
     --ink    #12212B  body text      ~14.6:1
     --ink-2  #33454F  secondary      ~8.8:1
     --muted  #3E515B  captions       ~7.7:1
     --rust   #8C2708  accent/stamps  ~7.7:1
     --steel  #14465C  links          ~9.0:1
     --moss   #2E5A1E  "sound" marks  ~7.2:1
   Type: heavy grotesque display (system) · system sans body ·
         ui-monospace for ticket data, prices, bench labels.
   ============================================================ */
:root{
  --paper:#EFF2EF; --paper-2:#E3E9E2; --card:#FBFCF9;
  --ink:#12212B; --ink-2:#33454F; --muted:#3E515B;
  --rust:#8C2708; --steel:#14465C; --moss:#2E5A1E;
  --line:#C3CCC0; --line-dark:#8FA08D;
  --dark:#12212B; --dark-2:#1B303D;
  --s1:4px; --s2:8px; --s3:12px; --s4:16px; --s5:24px; --s6:32px; --s7:48px; --s8:64px;
  --measure:68ch; --wide:1200px;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0; background:var(--paper); color:var(--ink);
  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
  font-size:1.0625rem; line-height:1.68; -webkit-font-smoothing:antialiased;
  background-image:repeating-linear-gradient(0deg, rgba(18,33,43,.045) 0 1px, transparent 1px 28px),repeating-linear-gradient(90deg, rgba(18,33,43,.045) 0 1px, transparent 1px 28px);}
::selection{background:var(--rust); color:#F7F3E8}
h1,h2,h3{font-family:"Helvetica Neue",Helvetica,Arial,sans-serif; font-weight:800; letter-spacing:-.018em; color:var(--ink)}
h1{font-size:clamp(2.2rem,1.5rem + 3.4vw,3.5rem); line-height:1.05; margin:0 0 var(--s4)}
h2{font-size:clamp(1.5rem,1.25rem + 1.2vw,1.95rem); line-height:1.18; margin:0 0 var(--s4)}
h3{font-size:1.18rem; line-height:1.3; margin:0 0 var(--s2)}
p{margin:0 0 var(--s4); max-width:var(--measure)}
a{color:var(--steel); text-decoration:underline; text-underline-offset:3px; text-decoration-thickness:1.5px}
a:hover{color:var(--rust)}
strong{font-weight:700}
.mono{font-family:ui-monospace,"SF Mono",Menlo,Consolas,monospace; font-variant-numeric:tabular-nums}
.tag{font-family:ui-monospace,Menlo,Consolas,monospace; font-size:.74rem; letter-spacing:.13em; text-transform:uppercase; font-weight:700}
.eyebrow{font-family:ui-monospace,Menlo,Consolas,monospace; font-size:.78rem; letter-spacing:.14em; text-transform:uppercase; color:var(--rust); font-weight:700; display:flex; align-items:center; gap:var(--s3); margin:0 0 var(--s4)}
.eyebrow::after{content:""; flex:0 0 52px; height:2px; background:var(--rust)}
.lede{font-size:1.22rem; line-height:1.58; color:var(--ink-2); max-width:62ch}
.small{font-size:.9rem; color:var(--muted); line-height:1.55}
.lead-answer{font-size:1.16rem; line-height:1.6; border-left:5px solid var(--rust); padding:var(--s2) 0 var(--s2) var(--s5); margin:0 0 var(--s6); max-width:64ch}
.lead-answer strong:first-child{color:var(--rust); text-transform:uppercase; font-size:.8rem; letter-spacing:.1em; display:block; margin-bottom:var(--s2); font-family:ui-monospace,Menlo,Consolas,monospace}
.wrap{max-width:var(--wide); margin:0 auto; padding:0 var(--s5)}
.section{padding:var(--s8) 0}
.section.tight{padding:var(--s7) 0}
.band{background:var(--paper-2); border-top:1px solid var(--line); border-bottom:1px solid var(--line)}
.band-dark{background:var(--dark); color:#E9EDE4}
.band-dark h2,.band-dark h3{color:#F4F2E8}
.band-dark p{color:#C9D2C6}
.band-dark .eyebrow{color:#E8A183}.band-dark .eyebrow::after{background:#E8A183}
.band-dark a{color:#A9CFDF}
.grid-2{display:grid; grid-template-columns:1fr 1fr; gap:var(--s7)}
.grid-3{display:grid; grid-template-columns:repeat(3,1fr); gap:var(--s5)}
@media (max-width:920px){.grid-2,.grid-3{grid-template-columns:1fr}.section{padding:var(--s7) 0}}
.skip{position:absolute; left:-9999px; top:0; z-index:60; background:var(--ink); color:var(--paper); padding:12px 18px; font-weight:700; text-decoration:none}
.skip:focus{left:10px; top:10px; outline:3px solid var(--rust); outline-offset:2px}
:focus-visible{outline:3px solid var(--rust); outline-offset:2px}

/* ---------- bench bar masthead ---------- */
.benchbar{background:var(--dark); color:#DDE4D8; font-family:ui-monospace,Menlo,Consolas,monospace; font-size:.72rem; letter-spacing:.11em; text-transform:uppercase}
.benchbar .wrap{display:flex; justify-content:space-between; gap:var(--s4); padding-top:9px; padding-bottom:9px; flex-wrap:wrap}
.benchbar b{color:#E8A183; font-weight:700}
.masthead{background:var(--paper); border-bottom:3px solid var(--ink)}
.masthead .wrap{display:flex; align-items:center; gap:var(--s4); padding-top:var(--s4); padding-bottom:var(--s3); flex-wrap:wrap}
.mark{width:52px; height:52px; flex:0 0 auto}
.wordmark{font-weight:800; font-size:1.72rem; letter-spacing:-.02em; color:var(--ink); text-decoration:none; line-height:1}
.wordmark em{font-style:normal; color:var(--rust)}
.wordmark:hover{color:var(--ink)}
.mast-tag{font-family:ui-monospace,Menlo,Consolas,monospace; font-size:.74rem; letter-spacing:.1em; text-transform:uppercase; color:var(--muted); margin-left:auto; text-align:right}
nav.mainnav{border-top:1px solid var(--line)}
nav.mainnav .wrap{display:flex; gap:var(--s2); flex-wrap:wrap; padding-top:0; padding-bottom:0}
nav.mainnav a{color:var(--ink); text-decoration:none; font-weight:700; font-size:.97rem; min-height:48px; display:inline-flex; align-items:center; padding:0 12px; border-bottom:3px solid transparent}
nav.mainnav a:hover, nav.mainnav a[aria-current="page"]{color:var(--rust); border-bottom-color:var(--rust)}

/* ---------- job ticket ---------- */
.ticket{background:var(--card); border:2px solid var(--ink); box-shadow:6px 6px 0 rgba(18,33,43,.16); margin:0 0 var(--s7)}
.ticket-head{display:flex; justify-content:space-between; gap:var(--s4); flex-wrap:wrap; border-bottom:2px dashed var(--line-dark); padding:var(--s4) var(--s6)}
.ticket-head .t-no{font-family:ui-monospace,Menlo,Consolas,monospace; font-size:.76rem; letter-spacing:.13em; text-transform:uppercase; color:var(--rust); font-weight:700}
.ticket-body{padding:var(--s5) var(--s6) var(--s6)}
.ticket-foot{border-top:2px dashed var(--line-dark); padding:var(--s3) var(--s6); font-family:ui-monospace,Menlo,Consolas,monospace; font-size:.76rem; letter-spacing:.06em; color:var(--muted); display:flex; justify-content:space-between; gap:var(--s4); flex-wrap:wrap}
.stamp{display:inline-flex; align-items:center; gap:var(--s2); font-family:ui-monospace,Menlo,Consolas,monospace; font-size:.74rem; font-weight:700; letter-spacing:.12em; text-transform:uppercase; padding:6px 12px; border:2.5px solid currentColor; border-radius:3px; transform:rotate(-1.4deg); white-space:nowrap}
.stamp::before{content:""; width:8px; height:8px; border-radius:50%; background:currentColor}
.stamp.sound{color:var(--moss)} .stamp.watch{color:var(--rust)} .stamp.info{color:var(--steel)}

/* ---------- finder ---------- */
.finder-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:var(--s5)}
@media (max-width:920px){.finder-grid{grid-template-columns:1fr}}
fieldset.q{border:1.5px solid var(--ink); background:var(--paper); padding:var(--s4) var(--s4) var(--s5); margin:0}
fieldset.q legend{font-weight:800; font-size:1.02rem; padding:0 var(--s2)}
fieldset.q legend .q-no{color:var(--rust); font-family:ui-monospace,Menlo,Consolas,monospace; font-size:.76rem; display:block; letter-spacing:.13em}
label.choice{display:flex; gap:var(--s3); align-items:flex-start; border:1px solid var(--line-dark); padding:11px 13px; margin-top:var(--s2); cursor:pointer; min-height:48px; background:var(--card); font-size:.99rem}
label.choice:hover{border-color:var(--ink)}
label.choice:has(input:checked){border-color:var(--steel); box-shadow:inset 0 0 0 2px var(--steel); background:#EDF3F2}
label.choice input{width:20px; height:20px; margin-top:3px; accent-color:var(--steel); flex:0 0 auto}
label.choice small{display:block; color:var(--muted); line-height:1.45}
.btn{display:inline-flex; align-items:center; min-height:50px; padding:11px 24px; background:var(--ink); color:#F7F3E8; text-decoration:none; font-weight:700; font-size:1rem; border:2px solid var(--ink); cursor:pointer; font-family:inherit}
.btn:hover{background:var(--rust); border-color:var(--rust); color:#FFF6EC}
.btn.ghost{background:transparent; color:var(--ink)}
.btn.ghost:hover{color:var(--rust); background:transparent}
.btn-row{display:flex; gap:var(--s4); flex-wrap:wrap; margin:var(--s5) 0}
.finder-result{border:2.5px solid var(--steel); background:#EDF3F2; padding:var(--s5) var(--s6); margin-top:var(--s6)}
.finder-result h3{margin-top:0; font-size:1.35rem}
.finder-result .fr-type{font-family:ui-monospace,Menlo,Consolas,monospace; font-size:.78rem; letter-spacing:.12em; text-transform:uppercase; color:var(--steel); font-weight:700; display:block; margin-bottom:var(--s2)}
.finder-result ul{margin:0 0 var(--s4); padding-left:1.2em}
.finder-result li{margin-bottom:var(--s1)}
.fr-price{font-family:ui-monospace,Menlo,Consolas,monospace; font-weight:700; font-size:1.08rem; background:var(--card); border:1.5px solid var(--ink); display:inline-block; padding:8px 14px; margin:0 0 var(--s4)}
.fr-cols{display:grid; grid-template-columns:1fr 1fr; gap:var(--s6)}
@media (max-width:760px){.fr-cols{grid-template-columns:1fr}}
.fr-cols h4{font-family:ui-monospace,Menlo,Consolas,monospace; font-size:.76rem; letter-spacing:.12em; text-transform:uppercase; margin:0 0 var(--s2)}
.fr-cols .ask-h{color:var(--moss)} .fr-cols .flag-h{color:var(--rust)}

/* ---------- tables: ledger + wall chart ---------- */
.table-scroll{overflow-x:auto; border:2px solid var(--ink); background:var(--card)}
.table-scroll:focus-visible{outline:3px solid var(--rust); outline-offset:2px}
table.ledger{border-collapse:collapse; width:100%; min-width:760px; font-size:.97rem}
table.ledger th{font-family:ui-monospace,Menlo,Consolas,monospace; font-size:.72rem; letter-spacing:.11em; text-transform:uppercase; color:var(--paper); background:var(--ink); text-align:left; padding:12px 14px; white-space:nowrap}
table.ledger td{padding:12px 14px; border-bottom:1px solid var(--line); vertical-align:top}
table.ledger tr:last-child td{border-bottom:none}
table.ledger td:first-child{font-weight:700; width:26%}
table.ledger .band-price{font-family:ui-monospace,Menlo,Consolas,monospace; font-weight:700; white-space:nowrap}
table.data{border-collapse:collapse; width:100%; font-size:.98rem; margin:0 0 var(--s5)}
table.data th, table.data td{padding:10px 14px; border-bottom:1px solid var(--line); text-align:left; vertical-align:top}
table.data th{font-family:ui-monospace,Menlo,Consolas,monospace; font-size:.72rem; letter-spacing:.1em; text-transform:uppercase; color:var(--muted); border-bottom:2px solid var(--ink)}
table.data td:first-child{font-weight:700; width:34%}
@media (max-width:560px){ table.data tr{display:block; padding:7px 0; border-bottom:1px solid var(--line)} table.data th, table.data td{display:block; width:auto !important; padding:1px 14px; border-bottom:none} }

/* wall chart rows (metro index) */
.chart{border-top:3px solid var(--ink)}
.chart-row{display:grid; grid-template-columns:70px 1fr auto; gap:var(--s5); align-items:baseline; padding:var(--s5) 0; border-bottom:1px solid var(--line)}
.chart-row .no{font-family:ui-monospace,Menlo,Consolas,monospace; color:var(--rust); font-weight:700}
.chart-row h3,.chart-row h2{margin-bottom:var(--s1)} .chart-row h2{font-size:1.18rem; line-height:1.3}
.chart-row h3 a,.chart-row h2 a{color:var(--ink); text-decoration:none}
.chart-row h3 a:hover,.chart-row h2 a:hover{color:var(--rust); text-decoration:underline}
/* n1: standalone chart + crumb links get a >=24px target */
.chart-row h3 a,.chart-row h2 a{display:inline-flex; align-items:center; min-height:24px}
.chart-row p{margin:0; color:var(--ink-2); font-size:.98rem}
.chart-row .clim{font-family:ui-monospace,Menlo,Consolas,monospace; font-size:.72rem; letter-spacing:.1em; text-transform:uppercase; color:var(--muted); white-space:nowrap; text-align:right}
@media (max-width:640px){.chart-row{grid-template-columns:46px 1fr}.chart-row .clim{display:none}}

/* ---------- editorial bits ---------- */
.checklist{list-style:none; padding:0; margin:0 0 var(--s5)}
.checklist li{padding:var(--s2) 0 var(--s2) 36px; position:relative; border-bottom:1px solid var(--line)}
.checklist li::before{content:""; position:absolute; left:2px; top:15px; width:17px; height:17px; border:2.5px solid var(--moss)}
.flaglist{list-style:none; padding:0; margin:0 0 var(--s5)}
.flaglist li{padding:var(--s2) 0 var(--s2) 36px; position:relative; border-bottom:1px solid var(--line)}
.flaglist li::before{content:"!"; position:absolute; left:2px; top:10px; width:19px; height:19px; border:2.5px solid var(--rust); color:var(--rust); font-family:ui-monospace,Menlo,monospace; font-weight:700; font-size:.85rem; display:flex; align-items:center; justify-content:center}
.steps{counter-reset:step; list-style:none; padding:0; margin:0}
.steps li{counter-increment:step; padding:0 0 var(--s5) 62px; position:relative}
.steps li::before{content:counter(step,decimal-leading-zero); position:absolute; left:0; top:2px; font-family:ui-monospace,Menlo,Consolas,monospace; font-weight:700; color:var(--rust); font-size:1.05rem}
.steps h3{margin-bottom:var(--s1)}
.bench-print{border:1.5px solid var(--ink); background:var(--card); padding:var(--s4) var(--s5); margin:0 0 var(--s5)}
.bench-print ul{margin:0 0 var(--s4); padding-left:1.2em}
.bench-print li{margin-bottom:var(--s1)}
.callout{background:var(--paper-2); border:1.5px solid var(--ink); padding:var(--s5) var(--s6); margin:0 0 var(--s6)}
.callout h3{margin-top:0}
.disclosure{border:2px dashed var(--line-dark); padding:var(--s4) var(--s5); font-size:.92rem; color:var(--ink-2); background:var(--card); margin:0 0 var(--s6)}
.disclosure strong{font-family:ui-monospace,Menlo,Consolas,monospace; font-size:.72rem; letter-spacing:.11em; text-transform:uppercase; color:var(--rust); display:block; margin-bottom:var(--s1)}
.pullquote{font-size:1.42rem; line-height:1.42; font-weight:800; letter-spacing:-.01em; border-left:5px solid var(--rust); padding-left:var(--s5); margin:var(--s6) 0; max-width:54ch}
.spec-plate{display:flex; gap:var(--s4); align-items:center; border:1.5px solid var(--ink); background:var(--card); padding:var(--s3) var(--s5); margin:0 0 var(--s6); max-width:780px}
.spec-plate svg{width:62px; height:62px; flex:0 0 auto}
.spec-plate figcaption{font-size:.93rem; color:var(--ink-2)}
.spec-plate figcaption .sp-label{font-family:ui-monospace,Menlo,Consolas,monospace; font-size:.7rem; letter-spacing:.12em; text-transform:uppercase; color:var(--rust); display:block; margin-bottom:2px; font-weight:700}
figure{margin:0}
.diagram{border:2px solid var(--ink); background:var(--card); padding:var(--s5); margin:0 0 var(--s6)}
.diagram figcaption{font-family:ui-monospace,Menlo,Consolas,monospace; font-size:.74rem; letter-spacing:.08em; text-transform:uppercase; color:var(--muted); margin-top:var(--s3); display:flex; justify-content:space-between; gap:var(--s4); flex-wrap:wrap}
svg text{font-family:ui-monospace,Menlo,Consolas,monospace}
.toc{border:1.5px solid var(--ink); border-left:6px solid var(--steel); background:var(--card); padding:var(--s4) var(--s5); margin:0 0 var(--s6); max-width:780px}
.toc h2,.toc h3{font-family:ui-monospace,Menlo,Consolas,monospace; font-size:.74rem; letter-spacing:.12em; text-transform:uppercase; color:var(--muted); margin:0 0 var(--s2)}
.toc ol{margin:0; padding-left:1.3em}.toc li{margin-bottom:4px}
.toc a{color:var(--ink); text-decoration:none}.toc a:hover{color:var(--rust); text-decoration:underline}
.hero{padding:var(--s7) 0 var(--s6)}
.crumb{font-family:ui-monospace,Menlo,Consolas,monospace; font-size:.76rem; letter-spacing:.1em; text-transform:uppercase; color:var(--muted); margin:0 0 var(--s4)}
.crumb a{color:var(--steel); display:inline-flex; align-items:center; min-height:24px}

/* ---------- footer ---------- */
footer.site{border-top:4px solid var(--ink); margin-top:var(--s8); padding:var(--s7) 0 var(--s6); background:var(--paper)}
footer.site .cols{display:grid; grid-template-columns:1.4fr 1fr 1fr; gap:var(--s7)}
@media (max-width:760px){footer.site .cols{grid-template-columns:1fr}}
footer.site h2.foot-h{font-family:ui-monospace,Menlo,Consolas,monospace; font-size:.74rem; letter-spacing:.12em; text-transform:uppercase; color:var(--muted); margin:0 0 var(--s3)}
footer.site ul{list-style:none; padding:0; margin:0}
footer.site li a{display:block; padding:7px 0; color:var(--ink-2); text-decoration:none}
footer.site a:hover{color:var(--rust); text-decoration:underline}
.colophon{border-top:1px solid var(--line); margin-top:var(--s6); padding-top:var(--s4); font-size:.85rem; color:var(--muted); display:flex; justify-content:space-between; gap:var(--s4); flex-wrap:wrap}

/* Fail-safe reveal: content is visible by default. The hidden state is
   applied only when reveal.js has run and added .js-reveal to <html>. */
.reveal{transition:opacity .55s ease-out, transform .55s ease-out}
html.js-reveal .reveal{opacity:0; transform:translateY(12px)}
html.js-reveal .reveal.in{opacity:1; transform:none}
@media (prefers-reduced-motion: reduce){ html{scroll-behavior:auto} .reveal, html.js-reveal .reveal{opacity:1; transform:none; transition:none} }
@media (scripting: none){ .reveal{opacity:1; transform:none} }
@media print{ .reveal, html.js-reveal .reveal{opacity:1 !important; transform:none !important} .skip, nav.mainnav, .benchbar{display:none} body{font-size:11pt; background:#fff} @page{margin:18mm 16mm} }
/* Small screens: stamps wrap, ticket padding tightens (QA fix 2026-10-15) */
@media (max-width:640px){
  .stamp{white-space:normal}
  .ticket-head,.ticket-body,.ticket-foot{padding-left:16px; padding-right:16px}
  .finder-result,.callout{padding-left:16px; padding-right:16px}
  .mast-tag{display:none}
  .benchbar .wrap span:last-child{display:none}
}