:root{
  --sand:#efe4cb; --sand-2:#e4d5b4; --court:#cdb488;
  --ink:#221c12; --ink-soft:#4a4030; --line:#c3ad82;
  --red:#ad3327; --blue:#2f4d6e; --brass:#9a7712; --cream:#f7f0df; --black:#181410;
  --wrap:1140px;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--sand);color:var(--ink);
  font-family:"Spectral",Georgia,serif;font-size:19px;line-height:1.66;
  -webkit-font-smoothing:antialiased}
.wrap{max-width:var(--wrap);margin:0 auto;padding:0 24px}
.narrow{max-width:760px}
a{color:var(--red)}
h1,h2,h3{font-family:"Fraunces",Georgia,serif;font-weight:600;line-height:1.05;margin:0}
.mono{font-family:"Space Mono",ui-monospace,monospace}

/* ---- top rule ---- */
.masthead{border-bottom:2px solid var(--ink);background:var(--sand)}
.masthead .wrap{display:flex;align-items:center;justify-content:space-between;
  gap:20px;padding-top:14px;padding-bottom:14px;flex-wrap:wrap}
.brandmark{display:flex;align-items:center;gap:12px;text-decoration:none;color:var(--ink)}
.brandmark img{height:34px;image-rendering:auto}
.brandmark b{font-family:"Fraunces";font-weight:900;font-size:24px;letter-spacing:.02em}
nav.top{display:flex;gap:26px;font-family:"Space Mono",monospace;font-size:13px;
  text-transform:uppercase;letter-spacing:.14em}
nav.top a{color:var(--ink-soft);text-decoration:none;padding-bottom:2px;border-bottom:1px solid transparent}
nav.top a:hover{color:var(--red);border-color:var(--red)}

/* ---- hero ---- */
.hero{position:relative;padding:64px 0 40px;overflow:hidden}
.hero .wrap{position:relative;z-index:2}
.eyebrow{font-family:"Space Mono",monospace;font-size:13px;letter-spacing:.34em;
  text-transform:uppercase;color:var(--brass);margin:0 0 18px}
.hero h1{font-size:clamp(58px,12vw,150px);font-weight:900;letter-spacing:-.01em;line-height:.86}
.hero .sub{font-family:"Fraunces";font-weight:400;font-style:italic;
  font-size:clamp(22px,3.4vw,34px);color:var(--ink-soft);margin:16px 0 0}
.lede{max-width:640px;margin:26px 0 0;font-size:21px}
.cta{margin-top:30px;display:flex;gap:16px;flex-wrap:wrap}
.btn{font-family:"Space Mono",monospace;text-transform:uppercase;letter-spacing:.12em;
  font-size:13px;text-decoration:none;padding:13px 22px;border:2px solid var(--ink)}
.btn.solid{background:var(--ink);color:var(--sand)}
.btn.solid:hover{background:var(--red);border-color:var(--red)}
.btn.ghost{color:var(--ink)}
.btn.ghost:hover{background:var(--ink);color:var(--sand)}

/* ---- court diagram ---- */
.court-wrap{margin:40px 0 0}
.court{display:block;width:100%;height:auto;max-height:520px}
.court .wall{fill:var(--court);stroke:var(--ink);stroke-width:2.4}
.court .line{fill:none;stroke:#7c6a45;stroke-width:1;stroke-dasharray:5 5}
.court .arch{fill:none;stroke:var(--ink);stroke-width:3}
.court .stake{fill:var(--brass);stroke:var(--ink);stroke-width:1.4}
.court .ball{stroke:var(--ink);stroke-width:1.2}
.court .b-red{fill:var(--red)} .court .b-blue{fill:var(--blue)}
.court .b-white{fill:var(--cream)} .court .b-black{fill:var(--black)}
.court text{font-family:"Space Mono",monospace;fill:var(--ink-soft)}
@keyframes roll{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
.court .ball{animation:roll .7s both}
.court .b-red{animation-delay:.15s}.court .b-white{animation-delay:.3s}
.court .b-blue{animation-delay:.45s}.court .b-black{animation-delay:.6s}

/* ---- sections ---- */
section{padding:66px 0;border-top:1px solid var(--line)}
.sec-label{font-family:"Space Mono",monospace;font-size:12px;letter-spacing:.3em;
  text-transform:uppercase;color:var(--brass);margin:0 0 14px}
.sec-title{font-size:clamp(34px,5vw,54px);font-weight:600;max-width:14ch;margin-bottom:10px}
.sec-intro{max-width:640px;color:var(--ink-soft);font-size:20px;margin-top:8px}

/* ---- specs strip ---- */
.specs{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:var(--line);
  border:1px solid var(--line);margin-top:20px}
.specs div{background:var(--sand);padding:24px 20px}
.specs .n{font-family:"Fraunces";font-weight:900;font-size:40px;line-height:1;display:block}
.specs .k{font-family:"Space Mono",monospace;font-size:12px;text-transform:uppercase;
  letter-spacing:.12em;color:var(--ink-soft);margin-top:8px;display:block}

/* ---- plates gallery ---- */
.plates{display:grid;grid-template-columns:repeat(3,1fr);gap:26px;margin-top:34px}
figure.plate{margin:0;background:var(--cream);border:1px solid var(--line);
  padding:14px 14px 16px;box-shadow:3px 4px 0 rgba(34,28,18,.09)}
figure.plate img{width:100%;height:auto;display:block;border:1px solid #d9c8a2}
figure.plate figcaption{font-family:"Space Mono",monospace;font-size:12px;color:var(--ink-soft);
  margin-top:12px;display:flex;gap:8px;align-items:baseline}
figure.plate .pl-no{color:var(--brass);font-weight:700;flex:none}

/* ---- pull quote ---- */
.pull{font-family:"Fraunces";font-weight:400;font-style:italic;font-size:clamp(26px,4vw,40px);
  line-height:1.24;max-width:16ch;color:var(--ink);border-left:4px solid var(--red);
  padding-left:26px;margin:0}
.byline{font-family:"Space Mono",monospace;font-size:13px;letter-spacing:.1em;
  color:var(--ink-soft);text-transform:uppercase;margin-top:18px}

/* ---- prose (history & rules) ---- */
.prose p{margin:0 0 18px}
.prose h3.subhead{font-family:"Space Mono",monospace;font-weight:700;font-size:15px;
  text-transform:uppercase;letter-spacing:.16em;color:var(--brass);
  margin:44px 0 16px;padding-bottom:8px;border-bottom:1px solid var(--line)}
.rulenum{font-family:"Space Mono",monospace;font-weight:700;font-size:.82em;
  color:var(--red);white-space:nowrap}
.ruletitle{font-family:"Fraunces";font-weight:600;font-style:normal}
.article{font-family:"Fraunces";font-weight:900;font-size:clamp(26px,3.4vw,38px);
  margin:56px 0 6px;padding-top:26px;border-top:2px solid var(--ink);display:flex;
  gap:16px;align-items:baseline}
.article .ar-no{font-family:"Space Mono",monospace;font-weight:700;font-size:15px;
  color:var(--brass);letter-spacing:.1em}

/* ---- image band ---- */
.band{display:grid;grid-template-columns:1fr 1fr;gap:0;align-items:stretch;
  border:1px solid var(--line);margin-top:34px;background:var(--cream)}
.band figure{margin:0;padding:0}
.band img{width:100%;height:100%;object-fit:cover;display:block}
.band .cap{padding:34px 32px}
.band .cap h3{font-size:30px;margin-bottom:12px}
.band .cap p{color:var(--ink-soft);margin:0}
.band figcaption{font-family:"Space Mono",monospace;font-size:11px;color:var(--ink-soft);
  padding:8px 12px;border-top:1px solid var(--line)}

/* ---- heritage cards ---- */
.two-col{display:grid;grid-template-columns:1fr 1fr;gap:26px;margin-top:34px}
.card{background:var(--cream);border:1px solid var(--line);padding:30px 30px 26px;
  box-shadow:3px 4px 0 rgba(34,28,18,.09)}
.card h3{font-size:28px;margin-bottom:12px}
.card h3::before{content:"";display:block;width:38px;height:3px;background:var(--red);margin-bottom:14px}
.card p{margin:0;color:var(--ink-soft)}
.card em{font-style:italic;color:var(--ink)}

/* ---- memoir ---- */
.memoir p{font-size:20px}
.memoir p:first-of-type{font-size:22px}
.memoir p:first-of-type::first-letter{font-family:"Fraunces";font-weight:900;float:left;
  font-size:76px;line-height:.72;padding:6px 14px 0 0;color:var(--red)}

/* ---- footer ---- */
footer{background:var(--ink);color:var(--sand);padding:56px 0 40px;margin-top:20px}
footer a{color:var(--cream)}
footer .cols{display:flex;justify-content:space-between;gap:40px;flex-wrap:wrap}
footer h4{font-family:"Fraunces";font-weight:600;font-size:22px;margin:0 0 10px}
footer p{color:#cdbf9f;max-width:46ch;margin:0}
footer .fine{font-family:"Space Mono",monospace;font-size:12px;color:#9c8f6f;
  margin-top:40px;border-top:1px solid #4a3f2a;padding-top:20px;line-height:1.7}

/* ---- rules page header ---- */
.rules-hero{padding:56px 0 34px;border-bottom:2px solid var(--ink)}
.toc{columns:2;column-gap:40px;font-family:"Space Mono",monospace;font-size:13px;
  margin-top:24px}
.toc a{display:block;color:var(--ink-soft);text-decoration:none;padding:5px 0;
  border-bottom:1px solid var(--line)}
.toc a:hover{color:var(--red)}

@media(max-width:820px){
  .plates{grid-template-columns:repeat(2,1fr)}
  .specs{grid-template-columns:repeat(2,1fr)}
  .band{grid-template-columns:1fr}
  .two-col{grid-template-columns:1fr}
  nav.top{display:none}
  .toc{columns:1}
}
@media(max-width:520px){ .plates{grid-template-columns:1fr} }
@media(prefers-reduced-motion:reduce){ .court .ball{animation:none} }