/* ============================================================
   Tasman Bargain Board — shared styling for the written pages
   (about, contact, privacy, terms, disclosure, unsubscribed).

   The board itself is one self-contained file and keeps its own copy of
   these tokens. These pages are plain documents, so they share a stylesheet
   instead. Keep the token block below in step with index.html if you ever
   change the palette.
   ============================================================ */

:root{
  --paper:#F5F6F3;
  --card:#FFFFFF;
  --card-2:#FAFBF9;
  --ink:#101614;
  --ink-2:#38443F;
  --muted:#5F6C67;
  --rule:#DDE1DC;
  --rule-2:#EAEDE9;
  --accent:#D6321E;
  --accent-ink:#FFFFFF;
  --accent-wash:#FCEBE8;
  --teal:#00857D;
  --teal-wash:#E2F1EF;
  --gold:#A5761B;
  --gold-wash:#F7EEDC;
  --shadow:0 1px 0 rgba(16,22,20,.04), 0 8px 24px -18px rgba(16,22,20,.5);
  --focus:#00857D;

  --f-display:"Archivo","Helvetica Neue",Arial,sans-serif;
  --f-mono:"IBM Plex Mono",ui-monospace,"SF Mono",Menlo,monospace;
  --r:10px;
  --maxw:1180px;
}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    --paper:#0C100E;
    --card:#141917;
    --card-2:#1A211E;
    --ink:#E9EDE9;
    --ink-2:#C3CCC7;
    --muted:#8B9791;
    --rule:#242B28;
    --rule-2:#1D2421;
    --accent:#F2543C;
    --accent-ink:#20100C;
    --accent-wash:#2A1512;
    --teal:#20A695;
    --teal-wash:#0F2523;
    --gold:#C29236;
    --gold-wash:#251D0F;
    --shadow:0 1px 0 rgba(0,0,0,.3), 0 10px 30px -20px #000;
    --focus:#20A695;
  }
}
:root[data-theme="dark"]{
  --paper:#0C100E;
  --card:#141917;
  --card-2:#1A211E;
  --ink:#E9EDE9;
  --ink-2:#C3CCC7;
  --muted:#8B9791;
  --rule:#242B28;
  --rule-2:#1D2421;
  --accent:#F2543C;
  --accent-ink:#20100C;
  --accent-wash:#2A1512;
  --teal:#20A695;
  --teal-wash:#0F2523;
  --gold:#C29236;
  --gold-wash:#251D0F;
  --shadow:0 1px 0 rgba(0,0,0,.3), 0 10px 30px -20px #000;
  --focus:#20A695;
}

*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0;
  background:var(--paper);
  color:var(--ink);
  font-family:var(--f-display);
  font-variation-settings:"wdth" 100;
  font-size:16px;
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
}
:focus-visible{outline:2px solid var(--focus);outline-offset:2px;border-radius:4px}
.wrap{max-width:var(--maxw);margin:0 auto;padding:0 18px}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* ---------- top bar ---------- */
.topbar{
  position:sticky;top:0;z-index:40;
  background:color-mix(in srgb, var(--paper) 88%, transparent);
  backdrop-filter:blur(10px);
  border-bottom:1px solid var(--rule);
}
.topbar-in{display:flex;align-items:center;gap:14px;min-height:60px;flex-wrap:wrap;padding:8px 0}
.mark{display:flex;align-items:baseline;gap:8px;margin-right:auto;text-decoration:none;color:inherit}
.mark b{font-variation-settings:"wdth" 112;font-weight:800;letter-spacing:-.02em;font-size:19px}
.mark .tag{
  display:inline-block;background:var(--accent);color:var(--accent-ink);
  font-size:10px;font-weight:800;letter-spacing:.09em;text-transform:uppercase;
  padding:3px 6px;border-radius:3px;transform:rotate(-2deg);
}
.btn{
  display:inline-block;
  border:1px solid var(--rule);background:var(--card);color:var(--ink);
  border-radius:999px;padding:7px 15px;font-size:13.5px;font-weight:700;
  text-decoration:none;box-shadow:var(--shadow);
}
.btn:hover{border-color:var(--ink-2)}
.btn-solid{background:var(--ink);color:var(--paper);border-color:var(--ink)}

/* ---------- document body ---------- */
main{padding:36px 0 8px}
.doc{max-width:70ch}
.eyebrow{
  font-family:var(--f-mono);font-size:11.5px;font-weight:600;
  letter-spacing:.12em;text-transform:uppercase;color:var(--teal);margin:0 0 10px;
}
h1{
  font-size:clamp(28px,5vw,40px);line-height:1.12;letter-spacing:-.025em;
  font-weight:800;font-variation-settings:"wdth" 108;margin:0 0 14px;
}
h2{
  font-size:clamp(19px,3vw,23px);line-height:1.25;letter-spacing:-.015em;
  font-weight:800;margin:34px 0 10px;
}
h3{font-size:17px;font-weight:800;margin:24px 0 6px}
p{margin:0 0 14px;color:var(--ink-2)}
.lede{font-size:18px;color:var(--ink);margin-bottom:22px}
ul,ol{margin:0 0 16px;padding-left:22px;color:var(--ink-2)}
li{margin-bottom:7px}
li::marker{color:var(--muted)}
a{color:var(--teal);text-underline-offset:2px}
a:hover{color:var(--accent)}
strong,b{color:var(--ink)}
hr{border:0;border-top:1px solid var(--rule);margin:34px 0}
code{font-family:var(--f-mono);font-size:.9em;background:var(--card-2);border:1px solid var(--rule-2);border-radius:4px;padding:1px 5px}
.updated{font-family:var(--f-mono);font-size:12px;color:var(--muted);margin:0 0 26px}

/* A panel for the things that deserve to be read, not skimmed. */
.panel{
  background:var(--card);border:1px solid var(--rule);border-radius:var(--r);
  padding:18px 20px;margin:0 0 22px;box-shadow:var(--shadow);
}
.panel :last-child{margin-bottom:0}
.panel.warm{background:var(--gold-wash);border-color:color-mix(in srgb, var(--gold) 30%, transparent)}
.panel.cool{background:var(--teal-wash);border-color:color-mix(in srgb, var(--teal) 28%, transparent)}
.panel.hot{background:var(--accent-wash);border-color:color-mix(in srgb, var(--accent) 28%, transparent)}
.panel h2, .panel h3{margin-top:0}

/* Anything the owner still has to fill in before publishing. Deliberately
   loud: a placeholder that ships to a live site is worse than no page. */
.fill{
  background:var(--accent-wash);color:var(--accent);
  border:1px dashed var(--accent);border-radius:4px;
  font-family:var(--f-mono);font-size:.85em;font-weight:600;
  padding:1px 6px;
}

dl.kv{margin:0 0 16px}
dl.kv dt{font-weight:800;margin-top:14px;color:var(--ink)}
dl.kv dd{margin:3px 0 0;color:var(--ink-2)}

table{border-collapse:collapse;width:100%;margin:0 0 18px;font-size:14.5px}
.table-scroll{overflow-x:auto;margin:0 0 18px}
.table-scroll table{margin:0}
th,td{text-align:left;padding:9px 12px;border-bottom:1px solid var(--rule-2);vertical-align:top}
th{font-size:12px;letter-spacing:.06em;text-transform:uppercase;color:var(--muted);border-bottom-color:var(--rule)}

/* ---------- footer ---------- */
footer{border-top:1px solid var(--rule);margin-top:52px;padding:24px 0 48px;color:var(--muted);font-size:13px;line-height:1.6}
footer .fnav{display:flex;flex-wrap:wrap;gap:8px 18px;margin:0 0 14px;padding:0;list-style:none}
footer .fnav a{color:var(--ink-2);font-weight:700;text-decoration:none}
footer .fnav a:hover{color:var(--accent);text-decoration:underline}
footer .note{max-width:70ch}
footer .note p{color:var(--muted);font-size:13px;margin:0 0 9px}
footer b{color:var(--ink-2)}