:root{
  --paper:#fbfaf7;
  --surface:#ffffff;
  --line:#e4ded2;
  --line-2:#cfc6b5;
  --text:#181512;
  --text-2:#4a443b;
  --text-3:#857b6b;
  --accent:#b34a2a;
  --sans:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif;
  --serif:'Instrument Serif',Georgia,'Times New Roman',serif;
  --deva:'Noto Serif Devanagari',serif;
}
:root[data-theme="dark"]{
  --paper:#15130f; --surface:#1d1a15; --line:#2e2a23; --line-2:#433d33;
  --text:#f2ece1; --text-2:#c3baa9; --text-3:#8d8474; --accent:#e08558;
}
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]){
    --paper:#15130f; --surface:#1d1a15; --line:#2e2a23; --line-2:#433d33;
    --text:#f2ece1; --text-2:#c3baa9; --text-3:#8d8474; --accent:#e08558;
  }
}
*{margin:0;padding:0;box-sizing:border-box}
body.boot *{transition:none !important}
html{-webkit-text-size-adjust:100%}
body{
  background:var(--paper); color:var(--text); font-family:var(--sans);
  -webkit-font-smoothing:antialiased; line-height:1.65;
}
:focus-visible{outline:2px solid var(--accent); outline-offset:2px; border-radius:4px}

.page{max-width:760px; margin:0 auto; padding:0 22px; display:flex; flex-direction:column; min-height:100vh}

.bar{display:flex; align-items:center; padding:max(16px,env(safe-area-inset-top)) 0 0}
.home{
  display:inline-flex; align-items:center; gap:7px; height:38px; padding:0 14px 0 10px;
  color:var(--text); text-decoration:none; font:500 14px/1 var(--sans);
  background:var(--surface); border:1px solid var(--line); border-radius:999px;
  transition:background .15s, border-color .15s;
}
.home span{font-family:var(--serif); font-size:18px}
.home:hover{border-color:var(--line-2)}

main{flex:1; padding:34px 0 8px}

.kicker{font-size:11.5px; font-weight:600; letter-spacing:.15em; text-transform:uppercase; color:var(--text-3)}
h1{
  font-family:var(--serif); font-weight:400; font-size:clamp(36px,6.4vw,58px);
  line-height:1.02; letter-spacing:-.01em; margin:8px 0 16px;
}
.sub{font-size:17px; line-height:1.6; color:var(--text-2); max-width:62ch}
.lede{margin-bottom:44px}

section{margin-bottom:40px}
h2{
  font-family:var(--serif); font-weight:400; font-size:27px; line-height:1.15;
  margin:0 0 12px; letter-spacing:-.005em;
}
p{font-size:15.5px; color:var(--text-2); margin-bottom:13px; max-width:66ch}
p em{font-style:italic; color:var(--text); font-family:var(--serif); font-size:17.5px}
p i{font-style:italic}
a{color:var(--accent); text-decoration:underline; text-underline-offset:2.5px; text-decoration-thickness:1px}
a:hover{text-decoration-thickness:2px}

.rules{list-style:none; margin:16px 0 16px; display:flex; flex-direction:column; gap:1px}
.rules li{
  font-size:15px; color:var(--text-2); padding:13px 16px; max-width:66ch;
  background:var(--surface); border:1px solid var(--line);
}
.rules li:first-child{border-radius:12px 12px 0 0}
.rules li:last-child{border-radius:0 0 12px 12px}
.rules li + li{border-top:none}
.rules b{color:var(--text); font-weight:600}

.note{font-size:14px; color:var(--text-3); border-left:2px solid var(--line-2); padding-left:14px}

.byline p{font-size:16px}

footer{
  display:flex; flex-wrap:wrap; justify-content:space-between; gap:8px 20px;
  border-top:1px solid var(--line); padding:20px 0 max(26px,env(safe-area-inset-bottom));
  font-size:13px; color:var(--text-3);
}
footer a{color:var(--text-3)}
footer a:hover{color:var(--accent)}
.deva{font-family:var(--deva); font-weight:700; color:var(--accent)}

@media (max-width:560px){
  main{padding-top:26px}
  .lede{margin-bottom:34px}
  .sub{font-size:16px}
  h2{font-size:24px}
  .rules li{padding:12px 14px}
}
@media (prefers-reduced-motion:reduce){
  *{transition-duration:.01ms !important}
}