/* FPO: 4-column grid, 8px baseline. EB Garamond only. */

@font-face{
  font-family:"EB Garamond";
  src:url("../fonts/EBGaramond-Regular.otf?v=20260823") format("opentype");
  font-weight:400; font-style:normal; font-display:swap;
}
@font-face{
  font-family:"EB Garamond";
  src:url("../fonts/EBGaramond-Italic.otf?v=20260823") format("opentype");
  font-weight:400; font-style:italic; font-display:swap;
}
@font-face{
  font-family:"EB Garamond";
  src:url("../fonts/EBGaramond-Medium.otf?v=20260823") format("opentype");
  font-weight:500; font-style:normal; font-display:swap;
}
@font-face{
  font-family:"EB Garamond";
  src:url("../fonts/EBGaramond-SemiBold.otf?v=20260823") format("opentype");
  font-weight:600; font-style:normal; font-display:swap;
}
@font-face{
  font-family:"EB Garamond";
  src:url("../fonts/EBGaramond-Bold.otf?v=20260823") format("opentype");
  font-weight:700; font-style:normal; font-display:swap;
}

:root{
  --paper:#d4d0c4;
  --paper-2:#e4e0d4;
  --card:#ece7db;
  --ink:#161410;
  --muted:#4e4940;
  --faint:#756e63;
  --rule:#2a2620;
  --oxide:#9e1b12;
  --steel:#24352b;
  --chalk:#f3efe4;
  --gutter:24px;
  --base:8px;
  --measure:38rem;
  --page:72rem;
}

*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{
  min-height:100vh;
  display:flex;
  flex-direction:column;
  background:
    radial-gradient(circle at 1px 1px, rgba(22,20,16,.07) 1px, transparent 0) 0 0 / 7px 7px,
    var(--paper-2);
  color:var(--ink);
  font-family:"EB Garamond", Garamond, "Times New Roman", serif;
  font-size:18px;
  line-height:28px;
}
img{display:block;max-width:100%;height:auto}
a{color:var(--oxide);text-underline-offset:.15em}
a:hover{color:var(--ink)}
:focus-visible{outline:2px solid var(--oxide);outline-offset:3px}

.kicker,.stamp,nav,.btn{
  font-family:"EB Garamond", Garamond, serif;
  letter-spacing:.08em;
  text-transform:uppercase;
  font-weight:600;
}
.mono{font-family:"EB Garamond", Garamond, serif;font-size:16px;line-height:24px}

.mast{
  position:sticky;
  top:0;
  z-index:50;
  border-bottom:1px solid var(--rule);
  background:var(--card);
}
.mast-inner{
  max-width:var(--page);
  margin:0 auto;
  padding:16px 24px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:16px;
  flex-wrap:wrap;
}
.mark{display:flex;align-items:center;gap:12px;text-decoration:none;color:var(--ink)}
.stamp{
  display:inline-grid;place-items:center;
  min-width:3rem;height:2rem;padding:0 6px;
  border:2px solid var(--oxide);color:var(--oxide);
  font-size:18px;letter-spacing:.14em;
}
.mark .name{
  font-family:"EB Garamond", Garamond, serif;
  font-weight:600;font-size:18px;line-height:22px;
  text-transform:none;letter-spacing:0;
}
.mark .name small{
  display:block;
  font-size:12px;line-height:16px;
  letter-spacing:.12em;text-transform:uppercase;
  color:var(--muted);font-weight:600;
}
nav{display:flex;flex-wrap:wrap;gap:4px 16px}
nav a{
  color:var(--ink);text-decoration:none;
  font-size:14px;line-height:24px;
}
nav a:hover,nav a[aria-current="page"]{color:var(--oxide)}

.wrap{
  flex:1 0 auto;
  width:100%;
  max-width:var(--page);
  margin:0 auto;
  padding:32px 24px 48px;
}
.measure{max-width:var(--measure)}
.grid4{
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:var(--gutter);
}
.grid4 > .span2{grid-column:span 2}
.grid4 > .span4{grid-column:span 4}
.grid3{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:var(--gutter);
}
.split{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:16px 40px;
}
.split p:last-child{margin-bottom:0}
@media (max-width:800px){
  .grid4,.grid3,.split{grid-template-columns:1fr}
  .grid4 > .span2,.grid4 > .span4{grid-column:auto}
}

/* Reading pages: body copy stays on a measure. Tables and the chain use the grid. */
.wrap section > p,
.wrap section > ol,
.wrap section > ul,
.wrap section > h2,
.wrap section > h3{max-width:var(--measure)}
.wrong{max-width:var(--measure)}

h1{
  font-family:"EB Garamond", Garamond, serif;
  font-weight:600;
  font-size:36px;
  line-height:44px;
  letter-spacing:0;
  text-transform:none;
  margin:0 0 16px;
}
h2{
  font-family:"EB Garamond", Garamond, serif;
  font-weight:600;
  font-size:24px;
  line-height:32px;
  margin:0 0 8px;
}
h3{
  font-family:"EB Garamond", Garamond, serif;
  font-weight:600;
  font-size:20px;
  line-height:28px;
  margin:0 0 8px;
}
.kicker{
  display:block;
  font-size:13px;line-height:16px;
  color:var(--oxide);
  margin-bottom:8px;
}
.lead{font-size:20px;line-height:30px;margin-bottom:16px}
p{margin:0 0 16px}
.muted{color:var(--muted)}

.chain-photo{
  margin:24px 0 32px;
  background:transparent;
  line-height:0;
}
.chain-photo img{width:100%;height:auto}
.actions{display:flex;flex-wrap:wrap;gap:8px;margin:24px 0 0}
.btn{
  display:inline-flex;align-items:center;justify-content:center;
  padding:10px 16px;
  border:2px solid var(--ink);
  text-decoration:none;
  font-size:14px;line-height:16px;
  color:var(--ink);
}
.btn.solid{background:var(--oxide);border-color:var(--oxide);color:var(--chalk)}
.btn.solid:hover{background:var(--ink);border-color:var(--ink);color:var(--chalk)}
.btn.ghost{background:transparent}
.btn.ghost:hover{border-color:var(--oxide);color:var(--oxide)}

.ticket{
  background:var(--card);
  border:1px solid var(--rule);
  padding:16px 16px 20px;
  color:var(--ink);
}
.grid4.quarters > .ticket h2{min-height:64px}
a.ticket{text-decoration:none;color:var(--ink)}
a.ticket h2{color:var(--ink)}
a.ticket:hover{border-color:var(--oxide)}
a.ticket:hover h2{color:var(--oxide)}
.ticket p:last-child{margin-bottom:0}

.wrong{
  border-left:6px solid var(--oxide);
  background:var(--chalk);
  padding:12px 16px;
  margin:16px 0 24px;
}
.wrong strong{
  font-family:"EB Garamond", Garamond, serif;
  letter-spacing:.08em;text-transform:uppercase;
  font-size:15px;display:block;margin-bottom:4px;
}

table.data{width:100%;border-collapse:collapse;margin:16px 0 24px;font-size:16px;line-height:24px}
table.data th,table.data td{border:1px solid var(--rule);padding:8px 10px;text-align:left;vertical-align:top}
table.data th{
  background:var(--steel);color:var(--chalk);
  font-family:"EB Garamond", Garamond, serif;
  letter-spacing:.06em;text-transform:uppercase;font-weight:600;font-size:14px;
}

ol.steps,ul.plain{margin:0 0 16px 1.2rem}
ol.steps li,ul.plain li{margin:6px 0}

.band{margin-top:40px;padding-top:24px;border-top:1px solid var(--rule)}
.toc-nav{
  display:flex;flex-wrap:wrap;gap:8px 16px;
  margin:0 0 24px;padding-bottom:16px;border-bottom:1px solid var(--rule);
  font-family:"EB Garamond", Garamond, serif;
  letter-spacing:.08em;text-transform:uppercase;font-weight:600;font-size:14px;
}
.toc-nav a{text-decoration:none;color:var(--ink)}
.toc-nav a:hover{color:var(--oxide)}

.sim{background:var(--steel);color:var(--chalk);padding:16px;margin:16px 0 24px}
.sim .stations{display:flex;gap:8px;align-items:flex-end;justify-content:space-between;margin:16px 0;min-height:8.5rem}
.station{flex:1;text-align:center;font-size:13px;color:#c9c3b4;font-family:"EB Garamond", Garamond, serif}
.bar{margin:0 auto 6px;width:70%;background:var(--chalk);min-height:2px}
.station.drum .bar{background:#c23a22}
.simrow{display:flex;gap:8px;flex-wrap:wrap;align-items:center;margin-top:8px}
.sim button{
  cursor:pointer;
  font-family:"EB Garamond", Garamond, serif;
  letter-spacing:.08em;text-transform:uppercase;font-weight:600;font-size:14px;
  border:2px solid var(--chalk);background:transparent;color:var(--chalk);
  padding:8px 12px;
}
.sim button.primary{background:var(--oxide);border-color:var(--oxide)}
.sim .stat{font-family:"EB Garamond", Garamond, serif;font-size:14px;color:#c9c3b4}
.sim .stat b{color:var(--chalk)}

@media (max-width:640px){
  .mast-inner{padding:12px 16px}
  nav{width:100%}
}

.site-foot{
  flex-shrink:0;
  border-top:1px solid var(--rule);
  background:var(--ink);color:#cfc8b8;
  padding:20px 24px 28px;
  font-size:16px;line-height:24px;
}
.site-foot .inner{max-width:var(--page);margin:0 auto}
.site-foot a{color:var(--chalk)}
.legal{margin-top:4px;color:#8c8678;font-size:14px;line-height:22px}

@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}