/* Long Table Open - chronicle-spine / brass-vellum / spine-entry / rule-spine motif
   Both paradigm and palette are coined for this build: entries hang off a ruled
   vertical spine rather than sitting in panels or a grid, and the palette is
   antique brass + pale verdigris on warm near-black. */

:root{
  --lto-bg:#0f0d0a; --lto-plate:#1a1611; --lto-plate-2:#151109; --lto-deep:#0a0806;
  --lto-brass:#d9b25f; --lto-verd:#7fd1c1; --lto-text:#f0e9dc;
  --lto-muted:rgba(240,233,220,.76); --lto-dim:rgba(240,233,220,.62);
  --lto-line:rgba(217,178,95,.20); --lto-line-2:rgba(217,178,95,.46);
  --lto-mono:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
  --lto-sans:system-ui,-apple-system,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  --lto-serif:"Iowan Old Style","Palatino Linotype",Palatino,"Book Antiqua",Georgia,serif;
  --lto-spine:34px;
}

*,*::before,*::after{box-sizing:border-box}
html,body{overflow-x:clip}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{margin:0;background:var(--lto-bg);color:var(--lto-text);font-family:var(--lto-sans);
  font-size:16px;line-height:1.66;-webkit-font-smoothing:antialiased}
img,svg{max-width:100%}
a{color:var(--lto-brass);text-decoration:none}
a:hover{text-decoration:underline}
h1,h2,h3{margin:0 0 12px;line-height:1.14;font-weight:600}
p{margin:0 0 14px}
code{font-family:var(--lto-mono)}
:focus-visible{outline:2px solid var(--lto-verd);outline-offset:3px}

.lto-wrap{width:100%;max-width:1080px;margin:0 auto;padding:0 clamp(14px,3.4vw,30px)}

/* ---------- header ---------- */
.lto-navtoggle{position:absolute;opacity:0;pointer-events:none;width:0;height:0}
.lto-top{border-bottom:1px solid var(--lto-line);background:var(--lto-deep)}
.lto-top-in{display:flex;align-items:center;justify-content:space-between;gap:16px;
  width:100%;max-width:1080px;margin:0 auto;padding:14px clamp(14px,3.4vw,30px)}
.lto-brand{display:inline-flex;align-items:center;gap:11px;color:var(--lto-text)}
.lto-brand:hover{text-decoration:none}
.lto-mark{flex:0 0 auto;width:28px;height:28px}
.lto-brand-n{font-family:var(--lto-serif);font-size:1.16rem;letter-spacing:.01em;line-height:1}
.lto-brand-s{display:block;font-family:var(--lto-mono);font-size:.58rem;letter-spacing:.22em;
  text-transform:uppercase;color:var(--lto-dim);margin-top:4px}
.lto-burger{display:none;align-items:center;justify-content:center;height:38px;padding:0 15px;
  cursor:pointer;background:transparent;border:1px solid var(--lto-line-2);color:var(--lto-brass);
  border-radius:999px;font-family:var(--lto-mono);font-size:.66rem;letter-spacing:.18em;
  text-transform:uppercase}
.lto-nav{display:flex;align-items:center;gap:clamp(8px,1.7vw,24px)}
.lto-nav a{font-family:var(--lto-mono);font-size:.7rem;letter-spacing:.16em;text-transform:uppercase;
  color:var(--lto-muted);padding:5px 0;border-bottom:1px solid transparent}
.lto-nav a:hover{color:var(--lto-text);text-decoration:none}
.lto-nav a.lto-on{color:var(--lto-brass);border-bottom-color:var(--lto-brass)}
@media(max-width:880px){
  .lto-burger{display:inline-flex}
  .lto-nav{display:none;position:absolute;left:0;right:0;top:100%;z-index:30;flex-direction:column;
    align-items:stretch;gap:0;padding:6px clamp(14px,3.4vw,30px) 14px;background:var(--lto-plate);
    border-bottom:1px solid var(--lto-line-2)}
  .lto-navtoggle:checked ~ .lto-top .lto-nav{display:flex}
  .lto-nav a{padding:12px 0;font-size:.82rem;border-bottom:1px solid var(--lto-line)}
  .lto-top{position:relative}
}

/* ---------- ledger ticker ---------- */
.lto-ledger{display:flex;align-items:stretch;background:var(--lto-plate-2);
  border-bottom:1px solid var(--lto-line);overflow:hidden}
.lto-ledger-l{flex:0 0 auto;display:inline-flex;align-items:center;gap:8px;padding:8px 14px;
  font-family:var(--lto-mono);font-size:.62rem;letter-spacing:.2em;text-transform:uppercase;
  color:var(--lto-verd);border-right:1px solid var(--lto-line)}
.lto-ledger-track{flex:1 1 auto;overflow:hidden}
.lto-ledger-run{display:flex;width:max-content;animation:lto-roll 42s linear infinite}
.lto-ledger:hover .lto-ledger-run{animation-play-state:paused}
.lg{display:inline-flex;align-items:center;gap:7px;padding:8px 16px;font-family:var(--lto-mono);
  font-size:.71rem;color:var(--lto-muted);white-space:nowrap}
.lg b{color:var(--lto-text);font-weight:700}
.lg .v{color:var(--lto-brass)}
.lg i{color:var(--lto-dim);font-style:normal}
.lg-sep{width:1px;align-self:center;height:12px;background:var(--lto-line)}

/* ---------- hero ---------- */
.lto-hero{padding:clamp(32px,6vw,64px) 0 clamp(22px,3.5vw,38px);background:var(--lto-deep);
  border-bottom:1px solid var(--lto-line)}
.lto-eyebrow{display:inline-block;font-family:var(--lto-mono);font-size:.64rem;letter-spacing:.24em;
  text-transform:uppercase;color:var(--lto-verd);margin-bottom:16px}
.lto-hero h1{font-family:var(--lto-serif);font-size:clamp(2rem,5.6vw,3.5rem);line-height:1.06;
  margin:0 0 16px;max-width:19ch;font-weight:600}
.lto-hero h1 em{font-style:italic;color:var(--lto-brass)}
.lto-lead{color:var(--lto-muted);font-size:clamp(1rem,2.1vw,1.1rem);max-width:62ch;margin-bottom:22px}
.lto-cta{display:flex;flex-wrap:wrap;gap:11px;margin-bottom:22px}
.lto-btn{display:inline-flex;align-items:center;justify-content:center;min-height:45px;padding:12px 24px;
  border:1px solid var(--lto-line-2);background:transparent;color:var(--lto-text);cursor:pointer;
  border-radius:999px;font-family:var(--lto-mono);font-size:.68rem;letter-spacing:.16em;
  text-transform:uppercase;font-weight:700;-webkit-appearance:none;appearance:none}
.lto-btn:hover{text-decoration:none;background:rgba(217,178,95,.12)}
.lto-btn--solid{background:var(--lto-brass);color:#171105;border-color:var(--lto-brass)}
.lto-btn--solid:hover{filter:brightness(1.07);background:var(--lto-brass)}
.lto-meta{display:flex;flex-wrap:wrap;gap:0;list-style:none;margin:0;padding:0}
.lto-meta li{padding:0 20px 0 0;margin-right:20px;border-right:1px solid var(--lto-line)}
.lto-meta li:last-child{border-right:0;margin-right:0}
.lto-meta b{display:block;font-family:var(--lto-serif);font-size:1.34rem;line-height:1.1;
  margin-bottom:3px}
.lto-meta span{font-family:var(--lto-mono);font-size:.6rem;letter-spacing:.16em;
  text-transform:uppercase;color:var(--lto-dim)}

/* ---------- the spine ---------- */
.lto-spine{position:relative;padding:clamp(26px,4.5vw,48px) 0}
.lto-spine::before{content:"";position:absolute;top:0;bottom:0;left:calc(var(--lto-spine) / 2);
  width:1px;background:linear-gradient(180deg,transparent,var(--lto-line-2) 8%,
    var(--lto-line-2) 92%,transparent)}
.lto-entry{position:relative;padding-left:calc(var(--lto-spine) + 20px);
  padding-bottom:clamp(26px,4vw,44px)}
.lto-entry:last-child{padding-bottom:0}
.lto-entry::before{content:"";position:absolute;left:calc(var(--lto-spine) / 2 - 5px);top:7px;
  width:11px;height:11px;border-radius:50%;background:var(--lto-bg);
  border:2px solid var(--lto-brass)}
.lto-entry--mark::before{background:var(--lto-verd);border-color:var(--lto-verd)}
.lto-entry-k{display:block;font-family:var(--lto-mono);font-size:.62rem;letter-spacing:.2em;
  text-transform:uppercase;color:var(--lto-verd);margin-bottom:8px}
.lto-entry h2{font-family:var(--lto-serif);font-size:clamp(1.34rem,3.4vw,2rem);margin-bottom:14px}
.lto-entry-lead{color:var(--lto-muted);max-width:66ch}
/* in-text links must not rely on colour alone (a11y: link-in-text-block) */
.lto-entry-lead a,.lto-plate a{text-decoration:underline;text-underline-offset:2px}
@media(max-width:640px){
  :root{--lto-spine:22px}
  .lto-entry{padding-left:calc(var(--lto-spine) + 14px)}
}

/* ---------- plate (the boxed sub-unit inside an entry) ---------- */
.lto-plate{background:var(--lto-plate);border:1px solid var(--lto-line);border-radius:11px;
  padding:16px 18px}
.lto-plate--deep{background:var(--lto-plate-2)}
.lto-plate+.lto-plate{margin-top:12px}

/* ---------- the two-leg final tie ---------- */
.lto-tie{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:clamp(10px,3vw,30px);
  padding:clamp(18px,3.4vw,30px);background:var(--lto-plate);border:1px solid var(--lto-line-2);
  border-radius:13px}
.lto-side{min-width:0}
.lto-side--b{text-align:right}
.lto-seat{display:inline-block;font-family:var(--lto-mono);font-size:.62rem;letter-spacing:.16em;
  color:var(--lto-verd);border:1px solid var(--lto-line-2);border-radius:999px;padding:2px 10px;
  margin-bottom:9px}
.lto-who{font-family:var(--lto-serif);font-size:clamp(1.3rem,3.8vw,2.1rem);line-height:1.05}
.lto-whom{font-family:var(--lto-mono);font-size:.62rem;letter-spacing:.1em;color:var(--lto-dim);
  margin-top:7px}
.lto-vs{text-align:center;font-family:var(--lto-serif);font-style:italic;
  font-size:clamp(1.1rem,3vw,1.6rem);color:var(--lto-brass)}
.lto-vs span{display:block;font-family:var(--lto-mono);font-style:normal;font-size:.58rem;
  letter-spacing:.16em;color:var(--lto-dim);margin-top:7px;text-transform:uppercase}
@media(max-width:620px){
  .lto-tie{grid-template-columns:minmax(0,1fr);text-align:center}
  .lto-side--b{text-align:center}
  .lto-vs{order:2}
}

/* ---------- tables ---------- */
.lto-tw{overflow-x:auto;-webkit-overflow-scrolling:touch}
.lto-table{width:100%;border-collapse:collapse;min-width:430px}
.lto-table caption{text-align:left;padding:0 0 10px;font-family:var(--lto-mono);font-size:.6rem;
  letter-spacing:.18em;text-transform:uppercase;color:var(--lto-dim)}
.lto-table th,.lto-table td{padding:9px 12px 9px 0;text-align:left;
  border-bottom:1px solid var(--lto-line);font-size:.89rem}
.lto-table th{font-family:var(--lto-mono);font-size:.58rem;letter-spacing:.18em;
  text-transform:uppercase;color:var(--lto-dim);font-weight:700}
.lto-table td.n,.lto-table th.n{text-align:right;font-family:var(--lto-mono);white-space:nowrap}
.lto-table tr:last-child td{border-bottom:0}
.lto-table .top td{color:var(--lto-text)}
.lto-pl{font-family:var(--lto-serif);font-size:1.06rem;color:var(--lto-brass);padding-right:14px}
.lto-hand{font-family:var(--lto-mono);font-weight:700}
.lto-hand::before{content:"";color:var(--lto-dim)}

/* ---------- round list ---------- */
.lto-rounds{list-style:none;margin:0;padding:0}
.lto-rounds li{display:grid;grid-template-columns:auto 1fr auto;align-items:baseline;gap:12px;
  padding:10px 0;border-bottom:1px solid var(--lto-line)}
.lto-rounds li:last-child{border-bottom:0}
.lto-r-n{font-family:var(--lto-mono);font-size:.64rem;letter-spacing:.12em;color:var(--lto-dim);
  white-space:nowrap}
.lto-r-m{font-size:.9rem;min-width:0}
.lto-r-s{font-family:var(--lto-mono);font-size:.82rem;color:var(--lto-brass);white-space:nowrap}
@media(max-width:560px){
  .lto-rounds li{grid-template-columns:auto 1fr;row-gap:4px}
  .lto-r-s{grid-column:2;justify-self:start}
}

/* ---------- duelists ---------- */
.lto-duelists{display:grid;grid-template-columns:repeat(auto-fit,minmax(238px,1fr));gap:13px}
.lto-duelist{background:var(--lto-plate);border:1px solid var(--lto-line);border-radius:11px;
  padding:15px 16px}
.lto-d-h{display:flex;align-items:baseline;justify-content:space-between;gap:10px;margin-bottom:9px}
.lto-d-n{font-family:var(--lto-mono);font-size:1.06rem;font-weight:700;color:var(--lto-text)}
.lto-d-s{font-family:var(--lto-serif);font-size:1.2rem;color:var(--lto-brass)}
.lto-d-m{font-family:var(--lto-mono);font-size:.62rem;letter-spacing:.1em;color:var(--lto-dim);
  padding-top:9px;border-top:1px solid var(--lto-line)}
.lto-d-m b{color:var(--lto-muted);font-weight:700}

/* ---------- prose + faq ---------- */
.lto-prose{max-width:74ch}
.lto-prose h2{font-family:var(--lto-serif);font-size:clamp(1.24rem,3vw,1.62rem);margin-top:28px}
.lto-prose h2:first-child{margin-top:0}
.lto-prose h3{font-size:1rem;margin-top:20px;color:var(--lto-verd)}
.lto-prose p,.lto-prose li{color:var(--lto-muted);font-size:.94rem}
.lto-prose ul,.lto-prose ol{padding-left:20px}
.lto-prose li{margin-bottom:7px}
.lto-prose a{text-decoration:underline;text-underline-offset:2px}
.lto-note{border-left:3px solid var(--lto-verd);background:var(--lto-plate-2);
  border-radius:0 10px 10px 0;padding:13px 16px;margin:18px 0}
.lto-note p{margin:0;color:var(--lto-text);font-size:.9rem}
.lto-q{border-bottom:1px solid var(--lto-line)}
.lto-q:last-child{border-bottom:0}
.lto-q summary{list-style:none;cursor:pointer;padding:14px 0;font-weight:600;font-size:.97rem;
  font-family:var(--lto-serif);display:flex;align-items:flex-start;justify-content:space-between;
  gap:14px}
.lto-q summary::-webkit-details-marker{display:none}
.lto-q summary::after{content:"+";flex:0 0 auto;font-family:var(--lto-mono);color:var(--lto-brass);
  font-weight:400;font-size:1.05rem}
.lto-q[open] summary::after{content:"\2212"}
.lto-q p{margin:0 0 14px;color:var(--lto-muted);font-size:.9rem;max-width:70ch}

/* ---------- footer ---------- */
.lto-footer{padding:28px 0 14px;border-top:1px solid var(--lto-line-2);background:var(--lto-deep)}
.lto-fnav{display:flex;flex-wrap:wrap;gap:9px 20px;margin-bottom:15px}
.lto-fnav a{font-family:var(--lto-mono);font-size:.66rem;letter-spacing:.14em;text-transform:uppercase;
  color:var(--lto-muted)}
.lto-fnav a:hover{color:var(--lto-brass);text-decoration:none}
.lto-disc{font-size:.79rem;color:var(--lto-dim);max-width:84ch;margin-bottom:11px;line-height:1.68}
.lto-copy{font-family:var(--lto-mono);font-size:.63rem;letter-spacing:.1em;color:var(--lto-dim)}

/* ---------- cookie banner ---------- */
.lto-cookie{position:fixed;left:14px;right:14px;bottom:14px;z-index:70;display:flex;flex-wrap:wrap;
  align-items:center;gap:12px 18px;padding:15px 18px;background:var(--lto-plate);
  border:1px solid var(--lto-line-2);border-radius:13px;box-shadow:0 16px 44px rgba(0,0,0,.62);
  max-width:748px;margin:0 auto}
.lto-cookie[hidden]{display:none}
.lto-cookie p{margin:0;flex:1 1 300px;font-size:.85rem;color:var(--lto-muted)}
.lto-cookie p a{text-decoration:underline;text-underline-offset:2px}
.lto-cookie-act{display:flex;gap:9px;flex:0 0 auto}
.lto-cookie .lto-btn{min-height:40px;padding:9px 17px;font-size:.62rem}

@keyframes lto-roll{from{transform:translateX(0)}to{transform:translateX(-50%)}}
@media (prefers-reduced-motion:reduce){
  .lto-ledger-run{animation:none!important}
  html{scroll-behavior:auto}
  *{transition:none!important}
}