@font-face{font-family:'Archivo';font-style:normal;font-weight:400;font-display:swap;
  src:url(/fonts/Archivo-Regular.woff2) format('woff2')}
@font-face{font-family:'Archivo';font-style:normal;font-weight:500;font-display:swap;
  src:url(/fonts/Archivo-Medium.woff2) format('woff2')}
@font-face{font-family:'Archivo';font-style:normal;font-weight:600;font-display:swap;
  src:url(/fonts/Archivo-SemiBold.woff2) format('woff2')}
@font-face{font-family:'Archivo';font-style:normal;font-weight:700;font-display:swap;
  src:url(/fonts/Archivo-Bold.woff2) format('woff2')}
@font-face{font-family:'IBM Plex Mono';font-style:normal;font-weight:400;font-display:swap;
  src:url(/fonts/IBMPlexMono-Regular.woff2) format('woff2')}
@font-face{font-family:'IBM Plex Mono';font-style:normal;font-weight:500;font-display:swap;
  src:url(/fonts/IBMPlexMono-Medium.woff2) format('woff2')}
@font-face{font-family:'IBM Plex Mono';font-style:normal;font-weight:600;font-display:swap;
  src:url(/fonts/IBMPlexMono-SemiBold.woff2) format('woff2')}
@font-face{font-family:'Source Serif 4';font-style:normal;font-weight:400;font-display:swap;
  src:url(/fonts/SourceSerif4-Regular.woff2) format('woff2')}
@font-face{font-family:'Source Serif 4';font-style:italic;font-weight:400;font-display:swap;
  src:url(/fonts/SourceSerif4-Italic.woff2) format('woff2')}
@font-face{font-family:'Source Serif 4';font-style:normal;font-weight:600;font-display:swap;
  src:url(/fonts/SourceSerif4-SemiBold.woff2) format('woff2')}

:root{
  --ink:#16181A; --ink-body:#33383D; --ink-meta:#5C6166; --ink-rule:#3A3F44; --ground:#E9EBEA; --ground-sunk:#DEE1E0; --plate:#F4F5F4; --rule:#C3C6C4; --action:#1E4B5A; --open:#1F5C3A; --open-dark:#7FBF9A; --shut:#A81F0C; --on-dark:#A9B0B6; --on-dark-soft:#C6CCD2;
  --ui:Archivo,system-ui,-apple-system,"Segoe UI",sans-serif;
  --mono:"IBM Plex Mono",ui-monospace,Menlo,monospace;
  --serif:"Source Serif 4",Georgia,serif;
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--ground);color:var(--ink-body);font-family:var(--ui);
  font-size:16px;line-height:1.5;-webkit-font-smoothing:antialiased}
img,svg{max-width:100%}
a{color:var(--action)}
h1,h2,h3{font-family:var(--ui);letter-spacing:-.014em;margin:0;text-wrap:balance}
h1{font-weight:700;font-size:clamp(30px,4.6vw,50px);line-height:1.05}
h2{font-weight:700;font-size:clamp(26px,3.4vw,34px);line-height:1.12}
h3{font-weight:600;font-size:20px;line-height:1.22}
p{margin:0}
.serif{font-family:var(--serif);font-size:17px;line-height:1.6;max-width:64ch}
.lb{font:600 11px/1 var(--mono);letter-spacing:.14em;text-transform:uppercase;
  color:var(--ink-meta)}
.micro{font:400 13px/1.45 var(--mono);color:var(--ink-meta)}
.meta{font-size:14px;color:var(--ink-meta)}
.wrap{max-width:1180px;margin:0 auto;padding:0 30px}
.band{padding:44px 0}
.band.sunk{background:var(--ground-sunk)}
.band.plate{background:var(--plate)}
.band.ink{background:var(--ink);color:var(--on-dark-soft)}
.band.ink h1,.band.ink h2,.band.ink h3{color:#fff}
.band.teal{background:var(--action);color:#fff}
.band.teal h2{color:#fff}
.stack{display:flex;flex-direction:column;gap:16px}
.rule2{height:2px;background:var(--ink)}
:focus-visible{outline:2px solid var(--open);outline-offset:3px}

/* ---- actions. A primary action is teal with a 2px border and inverts. ---- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;
  min-height:56px;padding:14px 24px;font:700 15px/1.15 var(--ui);
  letter-spacing:.04em;text-transform:uppercase;text-decoration:none;
  border-radius:0;border:2px solid var(--ink);cursor:pointer;
  transition:background .12s,color .12s}
.btn-buy{background:var(--action);color:#fff}
.btn-buy:hover{background:#fff;color:var(--ink)}
.btn-free{background:transparent;color:var(--open);border-color:var(--open)}
.btn-free:hover{background:var(--open);color:#fff}
.band.ink .btn-free,.band.teal .btn-free{color:var(--open-dark);border-color:var(--open-dark)}
.band.ink .btn-free:hover{background:var(--open-dark);color:var(--ink)}
.band.teal .btn-buy{background:#fff;color:var(--ink);border-color:#fff}
.band.teal .btn-buy:hover{background:var(--ink);color:#fff}
.ticks{display:flex;flex-wrap:wrap;gap:10px 22px;margin:0;padding:0;list-style:none}
.ticks li{display:flex;gap:8px;align-items:baseline;font-size:14px}
.tick{color:var(--open);font-weight:700}
.band.ink .tick{color:var(--open-dark)}

/* ---- header: three rows, per the design README ------------------------- */
.hd{position:sticky;top:0;z-index:40}
.hd-1{background:var(--plate);border-bottom:1px solid var(--rule)}
.hd-1 .in{display:flex;align-items:stretch;justify-content:space-between;gap:12px;
  min-height:60px}
/* The lockup is two lines, not one row: OUT FOR A is a tracked mono label
   ABOVE the Archivo word, then the teal rule, then ROADBOOKS. The brand
   pack's HANDOFF snippet sets all four spans in a single flex row, which
   contradicts logo-rules.md and the SVG masters. The rules win. */
.brand{display:flex;text-decoration:none;color:var(--ink);padding:12px 0}
.wm{display:flex;align-items:flex-end;gap:10px}.wm-stack{display:flex;flex-direction:column;align-items:flex-start;gap:3px}.wm-label{font:600 9.5px/1 var(--mono);letter-spacing:.24em;text-transform:uppercase;color:var(--ink-meta)}.wm-word{font:700 25px/1 var(--ui);letter-spacing:-.022em;color:var(--ink)}.wm-bar{width:3px;background:var(--action);align-self:stretch;margin:6px 0 5px}.wm-suffix{font:600 9.5px/1 var(--mono);letter-spacing:.18em;text-transform:uppercase;color:var(--ink-meta);padding-bottom:4px}
.hd-buy{display:flex;align-items:center;gap:10px;background:var(--action);color:#fff;
  text-decoration:none;padding:0 22px;border-left:2px solid var(--ink);
  font:700 13px/1 var(--ui);letter-spacing:.06em;text-transform:uppercase}
.hd-buy:hover{background:var(--ink)}
.hd-2{background:var(--ground-sunk);border-bottom:2px solid var(--ink)}
.hd-2 .in{display:flex;align-items:center;justify-content:space-between;gap:16px;
  flex-wrap:wrap}
.hd-2 nav{display:flex;flex-wrap:wrap}
.hd-2 nav a{font:600 11px/1 var(--mono);letter-spacing:.14em;text-transform:uppercase;
  color:var(--ink-meta);text-decoration:none;padding:12px 20px}
.hd-2 nav a:hover{box-shadow:inset 0 -4px 0 var(--open);color:var(--ink)}
.hd-2 nav a.on{background:var(--ink);color:var(--plate)}
.langs{display:flex;gap:4px}
.langs a{font:600 11px/1 var(--mono);letter-spacing:.14em;text-transform:uppercase;
  color:var(--ink-meta);text-decoration:none;padding:10px 8px}
.langs a.on{color:var(--ink);box-shadow:inset 0 -2px 0 var(--open)}
/* A nav item that is only written in English, marked as such on a German
   page. Cheaper and more honest than translating a label onto a page that is
   not translated: the reader knows before they click. */
.hd-2 nav a.en::after{content:"EN";font-size:8px;margin-left:5px;
  color:var(--open);vertical-align:super}
.hd-3{background:var(--ink)}
.hd-3 ul{display:flex;flex-wrap:wrap;gap:8px 26px;margin:0;padding:9px 0;list-style:none}
.hd-3 li{display:flex;gap:7px;align-items:baseline;font:400 12px/1.4 var(--mono);
  color:var(--on-dark)}
.hd-3 .tick{color:var(--open-dark)}
@media(max-width:560px){
  .brand .wm{display:none}
  .brand::before{content:"OFD";background:var(--ink);color:#fff;font:700 15px/1 var(--ui);
    letter-spacing:-.02em;padding:7px 8px}
  .hd{position:static}
  .hd-1 .hd-buy{display:none}
  .hd-3 li:nth-child(n+3){display:none}
  .wrap{padding:0 14px}
  .band{padding:30px 0}
}

/* ---- the phone Buy bar. Leaves the header, returns at the foot. -------- */
.buybar{display:none}
@media(max-width:560px){
  .buybar{display:flex;position:fixed;left:0;right:0;bottom:0;z-index:60;
    align-items:center;justify-content:space-between;gap:12px;
    background:var(--action);color:#fff;text-decoration:none;
    padding:17px 18px;border-top:2px solid var(--ink);min-height:54px;
    font:700 14px/1 var(--ui);letter-spacing:.05em;text-transform:uppercase}
  body{padding-bottom:70px}
}

/* ---- footer ------------------------------------------------------------ */
.ft{background:var(--plate);border-top:2px solid var(--ink);padding:34px 0 44px;
  margin-top:0}
.ft .cols{display:flex;flex-wrap:wrap;gap:26px 44px;justify-content:space-between}
.ft .legal{display:flex;flex-wrap:wrap;gap:8px 20px;margin-top:18px}
.ft .legal a{font:600 11px/1 var(--mono);letter-spacing:.14em;text-transform:uppercase;
  color:var(--ink-meta);text-decoration:none}
.ft .legal a:hover{color:var(--ink)}
.ft .de::after{content:"DE";font-size:9px;margin-left:5px;color:var(--open)}
.ft .en::after{content:"EN";font-size:9px;margin-left:5px;color:var(--open)}

/* ---- the region vote: real checkboxes, not decoration -------------------
   They rendered as <span class="chip"> outside the <form> until 30 Aug, while
   the copy beside them said "tick the ones you would buy" and "I will publish
   the count". Nothing was ticked and nothing was counted. A label is the hit
   area, so the whole chip is tappable at 44 px. */
/* The vote form is wider than the plain address form: 60ch turns nine region
   names into a single tall column, which is a list rather than a choice. */
.form.wide{max-width:88ch}
/* The region boxes are hidden until the script that joins their ticks has
   run, and that script is what reveals them: they cannot be on screen unless
   the mechanism behind them is working. Without it nine checkboxes sharing one
   name post a repeated key, the receiver keeps one, and the count the copy
   promises to publish looks plausible and is wrong. No data beats wrong data,
   which is the rule the empty stop slots are already on. */
.chips,.vote-lb{display:none}
.has-js .chips{display:flex}
.has-js .vote-lb{display:block}
.has-js .nojs-note{display:none}
label.chip{display:inline-flex;align-items:center;gap:9px;cursor:pointer;
  min-height:40px;text-transform:none;letter-spacing:.02em;font-size:12px}
label.chip input{accent-color:var(--open);width:16px;height:16px;margin:0}
label.chip:has(input:checked){background:var(--open);color:#fff;border-color:var(--open)}
label.chip:has(input:checked) input{accent-color:#fff}
label.chip:focus-within{outline:2px solid var(--open);outline-offset:3px}

/* ---- a link out of the reader's language ------------------------------- */
a.en::after{content:"EN";font-size:8px;margin-left:4px;color:var(--open);
  vertical-align:super;letter-spacing:.06em}
.band.ink a.en::after,.band.teal a.en::after{color:var(--open-dark)}

/* ---- the untranslated band -------------------------------------------- */
.notrans{background:var(--ink);color:var(--on-dark-soft);padding:12px 0;
  font:400 13px/1.5 var(--mono)}