/* Zone Tax site. Clan print style: paper, ink, olive, a red stamp, a gold accent.
   Follows the system theme by default. The header toggle overrides it and is remembered on that device. */
:root{
  --paper:#e9e4d4; --paper-2:#f3efe3; --sunk:#ded8c4; --ink:#1a1d1a; --ink-2:#2a2e2a; --olive:#57614a; --rule:#c9c3b0;
  --red:#b23a2e; --gold:#c9a227;
  --role-commander:#d4af37; --role-auditor:#c0392b; --role-collector:#2e8b57; --role-intern:#95a5a6;
  --display:'Archivo Black','Arial Black',Impact,sans-serif;
  --mono:'Courier Prime','Courier New',monospace;
  --sans:'IBM Plex Sans',system-ui,'Segoe UI',sans-serif;
  color-scheme: light dark;
}
@media (prefers-color-scheme:dark){ :root:not([data-theme="light"]){
  --paper:#101210; --paper-2:#1a1d1a; --sunk:#1d211c; --ink:#e9e4d4; --ink-2:#cfc9b8; --olive:#9aa48c; --rule:#2f342e; --red:#d2584a;
  color-scheme: dark;
}}
:root[data-theme="dark"]{
  --paper:#101210; --paper-2:#1a1d1a; --sunk:#1d211c; --ink:#e9e4d4; --ink-2:#cfc9b8; --olive:#9aa48c; --rule:#2f342e; --red:#d2584a;
  color-scheme: dark;
}

*{ box-sizing:border-box; }
html{ scroll-behavior:smooth; }
body{ margin:0; background:var(--paper); color:var(--ink); font-family:var(--sans); line-height:1.5; -webkit-font-smoothing:antialiased; }
img{ max-width:100%; height:auto; display:block; }
a{ color:inherit; }

.page{ max-width:960px; margin:0 auto; padding:28px 28px 64px; position:relative; overflow-x:hidden; }
.page::before{ content:""; position:absolute; left:8px; top:0; bottom:0; width:2px; background:var(--red); opacity:.45; }

/* header */
.top{ display:flex; justify-content:space-between; align-items:flex-end; gap:16px 24px; border-bottom:3px solid var(--ink); padding-bottom:12px; flex-wrap:wrap; }
.wordmark{ font-family:var(--display); font-size:34px; letter-spacing:.5px; line-height:1; margin:0; text-decoration:none; }
.wordmark span{ color:var(--red); }
.nav{ display:flex; flex-wrap:wrap; gap:4px 28px; font-family:var(--sans); font-size:14px; font-weight:600; letter-spacing:.3px; text-transform:uppercase; }
.nav a{ color:var(--olive); text-decoration:none; padding:4px 0; }
.nav a:hover{ color:var(--red); }
.theme{ font:inherit; font-family:var(--mono); font-size:12px; letter-spacing:.5px; text-transform:uppercase; color:var(--olive); background:none; border:1px solid var(--rule); border-radius:3px; padding:3px 8px; cursor:pointer; }
.theme:hover{ color:var(--red); border-color:var(--red); }
.theme:focus-visible{ outline:2px solid var(--red); outline-offset:2px; }

/* hero */
.hero{ display:grid; grid-template-columns:minmax(0,1.5fr) minmax(0,1fr); gap:32px; align-items:center; padding:44px 0 28px; }
.stamp-line{ font-family:var(--mono); font-size:14px; letter-spacing:1px; color:var(--olive); margin-bottom:14px; }
h1{ font-family:var(--display); font-size:clamp(30px,5vw,46px); line-height:1.08; margin:0 0 16px; text-wrap:balance; }
.lede{ font-size:18px; color:var(--ink-2); margin:0 0 22px; max-width:56ch; }
.lede b{ font-weight:600; color:var(--ink); }
.hero-art{ display:flex; flex-direction:column; align-items:center; gap:18px; }
.mark{ width:150px; height:150px; border-radius:20px; box-shadow:0 8px 28px rgba(0,0,0,.22); }

/* buttons */
.cta{ display:flex; flex-wrap:wrap; align-items:center; gap:12px 18px; }
.cta-note{ font-family:var(--mono); font-size:14px; color:var(--olive); }
.button{ display:inline-block; font-family:var(--display); font-size:17px; letter-spacing:.5px; text-decoration:none; background:var(--red); color:#f6eedc; padding:13px 22px; border:2px solid var(--red); border-radius:3px; line-height:1; }
.button:hover{ background:#9a2f25; border-color:#9a2f25; }
.button.secondary{ background:transparent; color:var(--ink); border-color:var(--ink); }
.button.secondary:hover{ background:var(--sunk); }

/* ledger blocks */
.ledger{ font-family:var(--mono); font-size:16px; line-height:1.55; color:var(--ink-2); margin:0; white-space:pre; overflow-x:auto; }
.ledger b{ color:var(--red); font-weight:700; }
.ledger i{ font-style:normal; margin:0 .22em; }
.ledger.small{ font-size:14px; }

/* sections */
.section{ font-family:var(--mono); font-size:16px; letter-spacing:1px; color:var(--olive); margin:48px 0 10px; display:flex; align-items:center; gap:12px; scroll-margin-top:16px; }
.section::after{ content:""; flex:1; border-top:1px dashed var(--rule); }
.prose p{ margin:0 0 14px; color:var(--ink-2); font-size:17px; }
.prose.tight p{ font-size:16px; margin-bottom:10px; }
.fine{ font-family:var(--mono); font-size:13px; color:var(--olive); margin:10px 0 0; }
.fine a{ color:var(--olive); }

/* how we play */
.items{ display:grid; grid-template-columns:repeat(auto-fit,minmax(270px,1fr)); gap:0 32px; }
.item{ padding:20px 0; border-bottom:1px solid var(--rule); }
.num{ font-family:var(--mono); font-weight:700; font-size:14px; color:var(--red); letter-spacing:1px; }
.item h2{ font-family:var(--display); font-size:20px; margin:4px 0 8px; line-height:1.2; }
.item p{ margin:0; color:var(--ink-2); font-size:16px; }

.ranks{ display:flex; flex-wrap:wrap; align-items:center; gap:8px 12px; margin:22px 0 0; font-family:var(--sans); font-size:14px; font-weight:600; }
.rank{ display:inline-flex; align-items:center; gap:8px; line-height:1; border:1px solid var(--rule); background:var(--paper-2); padding:7px 10px; border-radius:3px; }
.rank::before{ content:""; width:10px; height:10px; border-radius:50%; background:var(--c); flex:none; }
.arrow{ color:var(--olive); font-family:var(--mono); font-size:13px; font-weight:400; }

.rules{ margin-top:28px; border-top:3px solid var(--ink); padding-top:14px; }
.rules h3{ font-family:var(--mono); font-size:14px; letter-spacing:1px; text-transform:uppercase; color:var(--olive); margin:0 0 8px; }

/* photos */
.photo{ margin:0; border:1px solid var(--rule); background:var(--paper-2); padding:6px; }
.photo.wide{ margin-top:10px; }
.photo img{ width:100%; }
.gallery{ display:grid; grid-template-columns:repeat(auto-fit,minmax(240px,1fr)); gap:14px; margin-top:8px; }

/* server */
.server{ display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:28px; align-items:start; }
.server-name{ font-family:var(--display); font-size:22px; margin:0 0 12px; line-height:1.2; }
.server .ledger{ margin-bottom:16px; }

/* faq */
.faq{ margin:0; max-width:70ch; }
.faq dt{ font-family:var(--display); font-size:17px; margin:18px 0 4px; }
.faq dd{ margin:0; color:var(--ink-2); font-size:16px; }
.faq dd a{ color:var(--ink); }

/* footer */
.foot{ margin-top:56px; border-top:3px solid var(--ink); padding-top:22px; display:flex; flex-direction:column; gap:18px; }

@media (max-width:720px){
  .page{ padding:20px 18px 48px; }
  .hero{ grid-template-columns:minmax(0,1fr); gap:24px; padding:32px 0 20px; }
  .hero-text,.hero-art{ min-width:0; }
  .hero-art .ledger{ min-width:0; flex:1; }
  .hero-art{ flex-direction:row; justify-content:flex-start; align-items:center; gap:16px; }
  .mark{ width:84px; height:84px; border-radius:12px; flex:none; }
  .hero-art .ledger{ font-size:13px; }
  .server{ grid-template-columns:1fr; }
  .wordmark{ font-size:30px; }
}