/* Readable information pages using the game's existing burgundy/cream tokens. */
.site-footer{flex-wrap:wrap}.site-footer .actions{flex-wrap:wrap}
.info-back{margin-left:auto;display:inline-flex;align-items:center;min-height:44px;font-size:14px}
.info-main{max-width:800px;padding:36px 0 56px;min-height:0}
.info-paper{background:var(--paper);color:var(--ink);border:1px solid var(--line);border-radius:12px;padding:clamp(22px,5vw,48px);box-shadow:0 6px 0 #d9c6ac,0 14px 30px #260d183b;overflow-wrap:anywhere}
.info-heading{padding-bottom:24px;margin-bottom:24px;border-bottom:1px solid var(--line)}
.info-heading h1{margin:10px 0 14px}.info-date{font-size:13px;color:var(--muted)}
.info-paper p,.info-paper li{font-size:16px;line-height:1.75;max-width:68ch}.info-paper p+p{margin-top:16px}
.info-paper section{margin-top:32px}.info-paper h2{font-size:27px;line-height:1.3;margin-bottom:14px}
/* The changelog is the only page with a third level, and without this its
   sub-headings sit on the paragraph above them. */
.info-paper h3{font-size:19px;line-height:1.35;margin:26px 0 10px}.info-paper h2+h3{margin-top:14px}

/* The changelog is a record of dates, so the dates are what people scan for,
   and a timeline is the shape that says so without a word. The rail runs
   continuously because the margin between sections is zero and the space is
   padding instead - a margin would break the line into unexplained segments.
   The gold square is the game's own mark: the share grid is six of them. */
.info-changelog section{position:relative;margin:0;padding:30px 0 0 30px;border-left:2px solid var(--line)}
.info-changelog h2{font-size:27px;letter-spacing:-.3px;color:var(--accent);margin-bottom:14px}
/* Centred on the 2px rule: 12px wide inside a 2px paper-coloured ring, so the
   ring masks the line behind it and the square sits ON the rail, not beside. */
.info-changelog h2::before{content:"";position:absolute;left:-7px;top:40px;width:12px;height:12px;background:var(--action);border:2px solid var(--paper);border-radius:3px}
@media(max-width:480px){.info-changelog section{padding:26px 0 0 22px}.info-changelog h2{font-size:24px}.info-changelog h2::before{left:-6px;top:34px;width:10px;height:10px}}
.info-paper a{color:#703248;text-decoration-thickness:1px}.info-paper a:hover{text-decoration-thickness:2px}
.info-callout{padding:18px;border-left:4px solid #8a5136;background:var(--soft);border-radius:4px}
@media(max-width:850px){.info-main{margin:0 20px}.info-heading h1{font-size:38px}}
@media(max-width:480px){.info-main{margin:0 14px;padding-top:24px}.info-paper{padding:24px 20px}.info-heading h1{font-size:34px}.info-paper h2{font-size:25px}.site-header:has(.info-back){flex-wrap:wrap;gap:12px}.info-back{margin-left:0}.site-footer .actions{gap:18px}}

/* Changelog entries as disclosures: a bold title and one line that says what
   changed, with the full account a click away. Built on <details>, so it
   opens with the keyboard, is announced as expandable, and still works with
   no JavaScript at all - and a page print or an in-page find will not miss
   what is inside, because browsers open a closed <details> for both. */
.info-changelog .entry{margin:0 0 14px;border:1px solid var(--line);border-radius:8px;background:var(--soft)}
.info-changelog .entry>summary{display:grid;grid-template-columns:1fr 14px;gap:5px 16px;padding:14px 16px;cursor:pointer;list-style:none}
.info-changelog .entry>summary::-webkit-details-marker{display:none}
.info-changelog .entry>summary h3{grid-column:1;grid-row:1;margin:0;font-size:18px;line-height:1.35}
.info-changelog .entry-lede{grid-column:1;grid-row:2;font-size:14px;line-height:1.65;color:var(--muted)}
/* A chevron drawn from two borders, so it needs no image and follows the ink. */
.info-changelog .entry>summary::after{content:"";grid-column:2;grid-row:1/3;align-self:start;width:9px;height:9px;margin-top:6px;border-right:2px solid var(--muted);border-bottom:2px solid var(--muted);transform:rotate(45deg);transition:transform .15s ease}
.info-changelog .entry[open]>summary::after{transform:rotate(-135deg);margin-top:9px}
.info-changelog .entry>summary:focus-visible{outline:3px solid var(--action);outline-offset:-3px;border-radius:8px}
.info-changelog .entry-detail{padding:2px 16px 14px}
.info-changelog .entry-detail p{margin:0 0 12px}
.info-changelog .entry-detail p:last-child{margin-bottom:0}
/* An entry whose whole content is one sentence keeps the same shell but no
   chevron: there is nothing behind it, and a control that opens onto the line
   already on screen is worse than no control. */
.info-changelog .entry-plain{padding:14px 16px}
.info-changelog .entry-plain h3{margin:0 0 5px;font-size:18px;line-height:1.35}
.info-changelog .entry-plain .entry-lede{display:block}
@media(max-width:480px){.info-changelog .entry>summary{padding:13px 13px}.info-changelog .entry>summary h3{font-size:17px}.info-changelog .entry-detail{padding:2px 13px 13px}}

/* The changelog's intro and its callout are the only prose on these pages
   that sits directly above a full-width column of cards, so the 68ch reading
   measure left them stopping well short of everything below. Here they take
   the width of the heading they follow, which puts their right edge flush
   with every entry; the timeline keeps its own 32px indent, which is what the
   rail is for. The policy pages are untouched and keep the measure. */
.info-changelog>p{max-width:none}
.info-changelog .entry-detail p{max-width:none}