*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{background:#f4f7fb;color:#1c2430;font-family:Georgia,serif;line-height:1.7}
.court{display:grid;grid-template-columns:1fr 92px;min-height:100vh}
.post{background:#c0392b;position:sticky;top:0;height:100vh;display:flex;flex-direction:column;justify-content:space-between;padding:18px 0}
.post a{color:#fff;text-decoration:none;writing-mode:vertical-rl;transform:rotate(180deg);text-align:center;padding:16px 0;font-family:"Trebuchet MS",sans-serif;font-size:.78rem;letter-spacing:.14em;text-transform:uppercase;border-top:1px solid rgba(255,255,255,.35)}
.post a.on{background:#1c2430}
.read{padding:32px 36px 70px;max-width:780px}
h1{font-size:clamp(1.6rem,3.4vw,2.3rem);line-height:1.12;margin:0 0 14px}
h2{font-family:"Trebuchet MS",sans-serif;font-size:.78rem;letter-spacing:.16em;text-transform:uppercase;color:#c0392b;margin:22px 0 8px}
p,li{margin:0 0 12px}
ul{margin:0 0 12px 1.1em}
img{width:100%;height:auto;display:block;margin:14px 0}
.cap{color:#6d7886;font-size:.84rem;margin:-6px 0 14px}
.tape{border-top:8px solid #f0c14a;padding-top:10px;margin:8px 0 16px}
table{width:100%;border-collapse:collapse;margin:8px 0 16px;font-size:.92rem}
td{border-bottom:1px solid #d5dde6;padding:7px 4px}
td:first-child{color:#c0392b;font-weight:700;width:4.2em}
.end{color:#6d7886;font-size:.88rem}
@media(max-width:720px){.court{grid-template-columns:1fr}.post{position:sticky;height:auto;flex-direction:row}.post a{writing-mode:horizontal-tb;transform:none;flex:1;padding:12px 4px;border-top:0;border-right:1px solid rgba(255,255,255,.35)}.read{padding:18px 14px 40px}}
