/* Classic portal layout (ADR-052): side menu in groups on the left, page content in the middle, boxes on the right,
   parchment boxes with gold corner ornaments over the kingdom art. Loaded after premium.css; everything is scoped to
   body.classic so a page that has not moved to the layout yet is untouched. */
.classic {
  /* Parchment in the official game site's tones (measured 21/09 on its pages): box body #fef0d6, light row #f1e0c6,
     dark row #d4c0a1. The owner asked for that tone instead of the yellower one of 21/09. */
  --cl-parch: #fef0d6; --cl-parch-2: #f9e9cd; --cl-parch-row: #f1e0c6; --cl-parch-deep: #d4c0a1;
  --cl-tint: rgba(212, 192, 161, .5); --cl-tint-strong: rgba(212, 192, 161, .85);
  --cl-ink: #3a2a1a; --cl-ink-soft: #5a4630; --cl-ink-mute: #6a5438;
  --cl-bronze: #94722f; --cl-bronze-line: rgba(148, 114, 47, .38);
  --cl-stone: #1d2226; --cl-stone-2: #343a41; --cl-bone: #eae4d4;
  --cl-side: 226px;
  --cl-corner-tl: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='22' height='22' viewBox='0 0 22 22'%3E%3Cpath d='M1 21V5a4 4 0 0 1 4-4h16' fill='none' stroke='%231a130a' stroke-width='4'/%3E%3Cpath d='M1 21V5a4 4 0 0 1 4-4h16' fill='none' stroke='%23c9a457' stroke-width='2'/%3E%3Cpath d='M7 3.5l3.5 3.5L7 10.5 3.5 7z' fill='%23e3c77f' stroke='%231a130a'/%3E%3C/svg%3E");
  --cl-corner-tr: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='22' height='22' viewBox='0 0 22 22'%3E%3Cg transform='translate(22 0) scale(-1 1)'%3E%3Cpath d='M1 21V5a4 4 0 0 1 4-4h16' fill='none' stroke='%231a130a' stroke-width='4'/%3E%3Cpath d='M1 21V5a4 4 0 0 1 4-4h16' fill='none' stroke='%23c9a457' stroke-width='2'/%3E%3Cpath d='M7 3.5l3.5 3.5L7 10.5 3.5 7z' fill='%23e3c77f' stroke='%231a130a'/%3E%3C/g%3E%3C/svg%3E");
  --cl-corner-bl: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='22' height='22' viewBox='0 0 22 22'%3E%3Cg transform='translate(0 22) scale(1 -1)'%3E%3Cpath d='M1 21V5a4 4 0 0 1 4-4h16' fill='none' stroke='%231a130a' stroke-width='4'/%3E%3Cpath d='M1 21V5a4 4 0 0 1 4-4h16' fill='none' stroke='%23c9a457' stroke-width='2'/%3E%3Cpath d='M7 3.5l3.5 3.5L7 10.5 3.5 7z' fill='%23e3c77f' stroke='%231a130a'/%3E%3C/g%3E%3C/svg%3E");
  --cl-corner-br: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='22' height='22' viewBox='0 0 22 22'%3E%3Cg transform='translate(22 22) scale(-1 -1)'%3E%3Cpath d='M1 21V5a4 4 0 0 1 4-4h16' fill='none' stroke='%231a130a' stroke-width='4'/%3E%3Cpath d='M1 21V5a4 4 0 0 1 4-4h16' fill='none' stroke='%23c9a457' stroke-width='2'/%3E%3Cpath d='M7 3.5l3.5 3.5L7 10.5 3.5 7z' fill='%23e3c77f' stroke='%231a130a'/%3E%3C/g%3E%3C/svg%3E");
}

/* The kingdom art sits behind every page and darkens as the page goes down, so the boxes stay readable. */
body.classic {
  background:
    linear-gradient(180deg, rgba(8, 10, 12, .38) 0, rgba(8, 10, 12, .74) 420px, rgba(8, 10, 12, .93) 900px),
    url("img/ravora-kingdom-dusk-20260915.png") center top / cover no-repeat fixed,
    var(--ground);
}
.classic main { animation: none; }
.cl-page { padding-block: 0 8px; }

/* Masthead: the name of the game over the art, above the columns. */
.cl-mast { display: grid; justify-items: center; gap: 6px; padding-block: 34px 30px; text-align: center; color: var(--cl-bone); }
.cl-mast .name { font: 400 clamp(2.6rem, 5vw, 3.6rem)/1 var(--display); letter-spacing: .16em; text-indent: .16em; text-shadow: 0 2px 0 #0a0c0e, 0 0 28px rgba(0, 0, 0, .85); }
.cl-mast small { font: .72rem var(--ui); letter-spacing: .42em; text-indent: .42em; color: var(--gold-bright); text-shadow: 0 1px 6px #000; }
.cl-mast:hover { text-decoration: none; }

.cl-cols { display: grid; grid-template-columns: var(--cl-side) minmax(0, 1fr) var(--cl-side); gap: 16px; align-items: start; }
/* one track that may shrink: a wide table or a long word scrolls inside its own box, never widens the column */
.cl-left, .cl-right, .cl-center { display: grid; grid-template-columns: minmax(0, 1fr); gap: 16px; align-content: start; min-width: 0; }
.cl-pagebox { min-width: 0; }

/* A box: dark stone title band with rivets, parchment body, gold corner ornaments. Inside it the site's colour tokens
   switch to ink on parchment, so components written for the dark ground keep working. */
.cl-box {
  position: relative; border: 2px solid var(--cl-bronze); border-radius: 3px; color: var(--cl-ink);
  background: linear-gradient(180deg, var(--cl-parch) 0%, var(--cl-parch-2) 100%);
  box-shadow: inset 0 0 0 1px rgba(255, 250, 238, .6), inset 0 0 22px rgba(121, 61, 3, .1), 0 8px 22px rgba(0, 0, 0, .55);
  --ink: var(--cl-ink); --ink-soft: var(--cl-ink-soft); --ink-mute: var(--cl-ink-mute);
  --line: var(--cl-bronze-line); --line-strong: rgba(148, 114, 47, .62); --line-gold: rgba(148, 114, 47, .5);
  --surface: var(--cl-parch-row); --surface-2: var(--cl-tint); --ground: #fffbf2; --ground-deep: var(--cl-parch-row);
  --gold: #7a5a1e; --gold-bright: #7a5a1e; --gold-deep: #94722f; --green: #2f6e5c; --ember: #9a4a26;
}
.cl-box::before {
  content: ""; position: absolute; inset: -5px; z-index: 2; pointer-events: none;
  background: var(--cl-corner-tl) left top, var(--cl-corner-tr) right top, var(--cl-corner-bl) left bottom, var(--cl-corner-br) right bottom;
  background-repeat: no-repeat; background-size: 22px 22px;
}
.cl-band {
  display: flex; align-items: center; justify-content: space-between; gap: 10px; margin: 0; padding: 9px 24px;
  color: var(--cl-bone); font: 400 .875rem/1.2 var(--display); letter-spacing: .07em; text-transform: uppercase;
  text-shadow: 0 1px 2px rgba(0, 0, 0, .7); border-bottom: 2px solid #c9a457; border-top: 1px solid rgba(255, 255, 255, .08);
  background:
    radial-gradient(circle at 10px 50%, #e3c77f 0 2.5px, #1a130a 2.6px 3.6px, transparent 3.7px),
    radial-gradient(circle at calc(100% - 10px) 50%, #e3c77f 0 2.5px, #1a130a 2.6px 3.6px, transparent 3.7px),
    linear-gradient(180deg, var(--cl-stone-2) 0%, var(--cl-stone) 55%, #15191c 100%);
}
.cl-band a { color: inherit; }
.cl-band .more { font: .72rem var(--ui); letter-spacing: .06em; text-transform: none; color: #e3c77f; }
.cl-body { padding: 14px 16px 16px; display: grid; grid-template-columns: minmax(0, 1fr); gap: 12px; }
.cl-body a:not(.btn) { color: #1d4f7a; }
.cl-body a:not(.btn):hover { color: #0f3557; }
.cl-box .btn { color: var(--cl-ink); border-color: rgba(94, 67, 27, .7); background: rgba(255, 251, 242, .7); }
.cl-box .btn.gold { color: #14110a; border-color: #b8923f; background: linear-gradient(180deg, #e9cd7e, #a67c2e); box-shadow: inset 0 1px 0 #ffe9a6, 0 3px 8px rgba(58, 42, 26, .35); }
.cl-box .btn.discord-btn { color: #fff; border-color: #5865F2; background: #5865F2; }
.cl-box .note, .cl-note { margin: 0; font-size: .82rem; color: var(--cl-ink-mute); }

/* Left column: account box, download, menu groups. */
.cl-login .cl-body { gap: 10px; text-align: center; }
.cl-login .btn, .cl-download { width: 100%; }
.cl-login .alt { font: .8rem var(--ui); }
.cl-download { min-height: 48px; font-size: .85rem; box-shadow: 0 8px 22px rgba(0, 0, 0, .55); }
.cl-menu { display: grid; gap: 16px; }
.cl-group > summary { cursor: pointer; list-style: none; user-select: none; }
.cl-group > summary::-webkit-details-marker { display: none; }
.cl-group > summary::after { content: "▾"; font: .75rem var(--ui); color: #e3c77f; transition: transform .2s ease; }
.cl-group:not([open]) > summary::after { transform: rotate(-90deg); }
.cl-group:not([open]) > summary { border-bottom-color: transparent; }
.cl-group > summary:focus-visible { outline: 2px solid #e3c77f; outline-offset: 2px; }
.cl-group ul { list-style: none; margin: 0; padding: 6px 0 8px; font: .86rem/1.25 var(--ui); }
.cl-group li a { display: block; padding: 8px 14px 8px 13px; border-left: 3px solid transparent; color: var(--cl-ink); }
.cl-group li a:hover { background: var(--cl-tint); border-left-color: rgba(148, 114, 47, .6); color: var(--cl-ink); text-decoration: none; }
.cl-group li a[aria-current] { border-left-color: var(--cl-bronze); background: var(--cl-tint-strong); font-weight: 600; color: var(--cl-ink); }
.cl-group li a .tag { float: right; margin-left: 6px; padding: 1px 5px; border-radius: 2px; font-size: .62rem; font-weight: 700; letter-spacing: .04em; color: #fff; background: #2f6e5c; }

/* Centre: information bar, ticker, news. */
.cl-infobar {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 6px 18px; padding: 9px 24px;
  border: 2px solid var(--cl-bronze); border-radius: 3px; color: var(--cl-bone); font: .8rem var(--ui);
  box-shadow: 0 8px 22px rgba(0, 0, 0, .55);
  background:
    radial-gradient(circle at 10px 50%, #e3c77f 0 2.5px, #1a130a 2.6px 3.6px, transparent 3.7px),
    radial-gradient(circle at calc(100% - 10px) 50%, #e3c77f 0 2.5px, #1a130a 2.6px 3.6px, transparent 3.7px),
    linear-gradient(180deg, var(--cl-stone-2) 0%, var(--cl-stone) 55%, #15191c 100%);
}
.cl-infobar a { color: var(--cl-bone); }
.cl-infobar a:hover { color: #fff; }
.cl-infobar strong { font-weight: 700; font-variant-numeric: tabular-nums; }
.cl-infobar .sep { width: 1px; height: 16px; background: rgba(234, 228, 212, .3); }
.cl-infobar #st-online { color: #8fe0b6; }
.cl-infobar .online { padding: 2px 8px; border-radius: 999px; border: 1px solid rgba(234, 228, 212, .35); font-size: .7rem; letter-spacing: .06em; text-transform: uppercase; }
.cl-infobar .online.live { border-color: #5fa893; color: #8fe0b6; }

.cl-ticker { display: grid; }
.cl-ticker a.row {
  display: grid; grid-template-columns: 22px auto minmax(0, 1fr) 12px; gap: 10px; align-items: center;
  padding: 8px 10px; border-bottom: 1px solid var(--cl-bronze-line); color: var(--cl-ink); font: .875rem/1.35 var(--ui);
}
.cl-ticker a.row:nth-child(odd) { background: var(--cl-parch-row); }
.cl-ticker a.row:hover { background: var(--cl-tint-strong); color: var(--cl-ink); text-decoration: none; }
.cl-ticker svg { width: 20px; height: 20px; fill: none; stroke: #7a5a1e; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
.cl-ticker time { color: var(--cl-ink-mute); font-size: .8rem; font-variant-numeric: tabular-nums; white-space: nowrap; }
.cl-ticker .txt { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cl-ticker .txt b { font-weight: 600; }
.cl-ticker .go { color: var(--cl-bronze); }

.cl-feature { display: grid; gap: 12px; }
.cl-feature .headline {
  display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 4px 12px; align-items: center; padding: 10px 14px;
  border: 1px solid rgba(94, 67, 27, .55); border-radius: 2px; background: linear-gradient(180deg, var(--cl-parch-row), rgba(241, 224, 198, .45));
}
.cl-feature .headline svg { grid-row: 1 / span 2; width: 30px; height: 30px; fill: none; stroke: #7a5a1e; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
.cl-feature .headline small { font: .74rem var(--ui); letter-spacing: .06em; text-transform: uppercase; color: var(--cl-ink-mute); }
.cl-feature h2 { margin: 0; font: 400 1.45rem/1.2 var(--display); color: var(--cl-ink); text-wrap: balance; }
.cl-feature h2 a { color: inherit; }
.cl-feature figure { margin: 0; }
.cl-feature img { display: block; width: 100%; height: auto; border: 1px solid rgba(94, 67, 27, .6); border-radius: 2px; }
.cl-feature p { margin: 0; max-width: 70ch; color: var(--cl-ink); }
.cl-newslist { display: grid; border-top: 1px solid var(--cl-bronze-line); }
.cl-newslist article { display: grid; grid-template-columns: 22px minmax(0, 1fr); gap: 4px 12px; padding: 12px 2px; border-bottom: 1px solid var(--cl-bronze-line); }
.cl-newslist svg { grid-row: 1 / span 3; width: 20px; height: 20px; margin-top: 3px; fill: none; stroke: #7a5a1e; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
.cl-newslist small { font: .74rem var(--ui); letter-spacing: .05em; text-transform: uppercase; color: var(--cl-ink-mute); }
.cl-newslist h3 { margin: 0; font: 400 1.08rem/1.25 var(--display); }
.cl-newslist p { margin: 0; font-size: .92rem; color: var(--cl-ink-soft); max-width: 70ch; }
.cl-links { display: flex; flex-wrap: wrap; gap: 6px 18px; font: .82rem var(--ui); }

.cl-world { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
.cl-world article { display: grid; grid-template-rows: auto 1fr; border: 1px solid rgba(94, 67, 27, .55); border-radius: 2px; overflow: hidden; background: var(--cl-parch-row); }
.cl-world img { display: block; width: 100%; height: auto; aspect-ratio: 7 / 3; object-fit: cover; }
.cl-world .body { padding: 10px 12px 12px; display: grid; gap: 4px; }
.cl-world h3 { margin: 0; font: 400 1.05rem/1.25 var(--display); }
.cl-world p { margin: 0; font-size: .88rem; color: var(--cl-ink-soft); }

/* The box that holds an inner page: the band names the section, the page keeps its own heading inside. */
.cl-home { display: grid; grid-template-columns: minmax(0, 1fr); gap: 16px; min-width: 0; }
.cl-main { padding: 4px 22px 26px; min-width: 0; }
.classic .cl-main.hub-page, .classic .cl-main.wiki-page { padding-bottom: 26px; }
.classic .cl-main .page-head { padding-top: 18px; }
.classic .cl-main .legal-document { margin-top: 18px; }
.classic .cl-main > .portal-nav:first-child { margin-top: 18px; }
.classic .cl-main .hub-card { background: var(--cl-parch-row); }

/* Pieces of the inner pages that were painted with fixed dark colours: on parchment they take the box's tones. */
.classic .cl-main h1, .classic .cl-main h2, .classic .cl-main .section-heading h2 { text-shadow: none; animation: none; }
.classic .cl-main .page-head > .eyebrow { display: none; }
.classic .cl-main input:not([type="checkbox"]):not([type="radio"]), .classic .cl-main select, .classic .cl-main textarea {
  color: var(--cl-ink); background: #fffbf2; border-color: rgba(94, 67, 27, .6); }
.classic .cl-main input::placeholder, .classic .cl-main textarea::placeholder { color: var(--cl-ink-mute); opacity: .85; }
.classic .cl-main input:focus-visible, .classic .cl-main select:focus-visible, .classic .cl-main textarea:focus-visible { outline: 2px solid #7a5a1e; outline-offset: 1px; }
.classic .cl-main .portal-table th { color: var(--cl-bone); background: var(--cl-stone); }
.classic .cl-main .portal-table tbody tr:hover { background: var(--cl-tint); }
.classic .cl-main .account-nav button { color: var(--cl-ink); background: var(--cl-parch-row); }
.classic .cl-main .account-nav button[aria-pressed="true"] { background: var(--cl-parch-deep); }
.classic .cl-main .hub-contact, .classic .cl-main .journey .mini, .classic .cl-main .support-message, .classic .cl-main .poll-bar { background: var(--cl-parch-row); }
.classic .cl-main .world-card, .classic .cl-main .boosted-card { background: linear-gradient(135deg, #fff6e4, var(--cl-parch-row)); }
.classic .cl-main .calendar-day.has-event { background: var(--cl-tint-strong); }
.classic .cl-main .shelf-tile:hover, .classic .cl-main .shelf-tile:focus-visible { background: var(--cl-tint); }
.classic .cl-main .news-medal { background: radial-gradient(circle at 50% 35%, #fffbf2 0, var(--cl-parch-deep) 100%); box-shadow: inset 0 0 0 2px var(--cl-parch), inset 0 0 0 3px rgba(121, 61, 3, .35); }
.classic .cl-main .is-waiting { background: linear-gradient(90deg, var(--cl-tint) 25%, var(--cl-tint-strong) 50%, var(--cl-tint) 75%); background-size: 200% 100%; }
.classic .cl-main .rows div, .classic .cl-main .news article { border-bottom-color: var(--cl-bronze-line); }

/* Text over a dark picture keeps the light tones, even inside a parchment box. */
.classic .cl-main .news-feature, .classic .cl-main .callout, .classic .cl-main .on-art {
  --ink: #f0eadb; --ink-soft: #d6d2c6; --ink-mute: #b4bab6; --gold: #d4b25e; --gold-bright: #e6cb89; --gold-deep: #a68b4a;
  --line: #2a3438; --line-gold: #605338; --surface: #141a1e; --surface-2: #1b2328; --ground: #0c1012; color: var(--ink); }
.classic .cl-main .news-feature a:not(.btn) { color: var(--ink); }

/* Date, month and time fields: iPhones draw them natively, with a minimum width and height of their own that ignore
   width: 100%, so the month of Event Schedule ran past its box and stood taller than the world beside it
   (owner, 2026-09-21). Without the native look they take the width of their column and the height of the other fields. */
.classic input[type="date"], .classic input[type="month"], .classic input[type="time"],
.classic input[type="datetime-local"], .classic input[type="week"] {
  -webkit-appearance: none; appearance: none; display: block; box-sizing: border-box;
  width: 100%; min-width: 0; max-width: 100%; margin: 0; text-align: left; }
.classic input[type="date"]::-webkit-date-and-time-value, .classic input[type="month"]::-webkit-date-and-time-value,
.classic input[type="time"]::-webkit-date-and-time-value, .classic input[type="datetime-local"]::-webkit-date-and-time-value {
  text-align: left; min-height: 1.5em; margin: 0; }
.classic input[type="date"]::-webkit-calendar-picker-indicator, .classic input[type="month"]::-webkit-calendar-picker-indicator { opacity: .7; }
/* a label that holds a field never grows past its column */
.classic .portal-filters label, .classic .field { min-width: 0; }
.classic .portal-filters input, .classic .portal-filters select { box-sizing: border-box; min-height: 48px; }

/* The bar of pages (previous · label · next): on a phone the label goes on top and the two buttons share one line,
   instead of one button left alone on a line of its own. */
@media (max-width: 640px) {
  .classic .portal-pages { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 10px; align-items: stretch; }
  .classic .portal-pages > span { grid-column: 1 / -1; grid-row: 1; text-align: center; }
  .classic .portal-pages > a { display: flex; justify-content: center; width: 100%; min-width: 0; text-align: center; }
}

/* The look of each character on the account page sits in a slot of the client's size (64 px) and is drawn from the
   bottom-right, as the client does: an outfit drawn in 32 px frames and one drawn in 64 px frames stand in the same
   place, every row has the same height and every name lines up (owner's screenshot, 2026-09-21). */
.classic .kv .character-row { align-items: center; }
.classic .kv .character-name { display: inline-flex; align-items: center; gap: 10px; }
.classic .kv .character-name .outfit-slot { display: inline-grid; place-items: end; flex: none; width: 64px; height: 64px; margin-block: -28px -4px; }
.classic .kv .character-name .outfit-slot .sprite { margin: 0; }

/* Right column: boosted and community boxes. */
.cl-boosted .pair { display: grid; grid-template-columns: minmax(0, 1fr) 1px minmax(0, 1fr); gap: 8px; align-items: start; }
.cl-boosted .pair > i { align-self: stretch; background: var(--cl-bronze-line); }
.cl-boosted .daily-selection, .cl-boosted .daily-selection.has-sprite { display: grid; grid-template-columns: minmax(0, 1fr); justify-items: center; gap: 4px; padding: 0; text-align: center; color: var(--cl-ink); }
.cl-boosted .daily-selection.has-sprite > .sprite-stage { grid-row: auto; }
.cl-boosted .daily-selection .sprite-stage { width: 72px; height: 72px; margin: 0; }
.cl-boosted .daily-selection > span { font: .62rem var(--ui); letter-spacing: .1em; text-transform: uppercase; color: var(--cl-ink-mute); }
.cl-boosted .daily-selection strong { font: 400 .92rem/1.2 var(--display); color: var(--cl-ink); overflow-wrap: anywhere; }
.cl-boosted a.daily-selection:hover { text-decoration: none; }
.cl-boosted a.daily-selection:hover strong { color: #1d4f7a; }
.cl-coins .cl-body { text-align: center; }
.cl-coins p { margin: 0; font-size: .88rem; color: var(--cl-ink-soft); }
.cl-coins .btn { width: 100%; }
.cl-discord .discord-box { display: grid; justify-items: center; gap: 10px; margin: 0; padding: 0; border: 0; background: none; text-align: center; }
.cl-discord .discord-text h4 { display: none; }
.cl-discord .discord-text p { margin: 0; font-size: .88rem; color: var(--cl-ink-soft); }
.cl-discord .btn { width: 100%; }

/* Footer: the site map by section, then the motto and the year. A plain dark panel, without the frame of the boxes
   (owner, 2026-09-21: "deixa sem"). */
.cl-footer { margin-top: 24px; padding: 20px 22px 16px; border: 2px solid var(--cl-bronze); border-radius: 3px; color: var(--ink-soft);
  background: linear-gradient(180deg, rgba(29, 34, 38, .94), rgba(14, 17, 19, .96)); box-shadow: 0 8px 22px rgba(0, 0, 0, .55); }
.cl-sitemap { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 18px; font: .8rem/1.3 var(--ui); }
.cl-sitemap h2 { margin: 0 0 8px; font: 400 .8rem var(--display); letter-spacing: .1em; text-transform: uppercase; color: var(--gold-bright); }
.cl-sitemap ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.cl-sitemap a { color: var(--ink-soft); }
.cl-sitemap a:hover { color: var(--gold-bright); }
.cl-footline { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 8px 16px; margin-top: 18px; padding-top: 12px; border-top: 1px solid var(--line-gold); font: .72rem var(--ui); letter-spacing: .1em; text-transform: uppercase; color: var(--ink-mute); }
.cl-footline b { color: var(--gold-deep); font-weight: 400; }
.cl-footline .legal { letter-spacing: .04em; text-transform: none; }

/* Computer: the side menu replaces the top bar and the strip of pages of each section. */
@media (min-width: 1161px) {
  .classic .top { display: none; }
  .classic .portal-nav { display: none; }
}
/* Phone and tablet: the top bar and its drawer come back, the side menu leaves, the boxes of the right go under the
   content, and the art becomes a strip under the bar (a fixed background is heavy on a phone). */
@media (max-width: 1160px) {
  body.classic { background: var(--ground); }
  .cl-mast {
    padding-block: 26px; margin-inline: calc(50% - 50vw); margin-bottom: 14px; border-bottom: 1px solid var(--line-gold);
    background: linear-gradient(180deg, rgba(8, 10, 12, .25), rgba(8, 10, 12, .8)), url("img/ravora-kingdom-dusk-20260915.png") center 30% / cover no-repeat;
  }
  .cl-mast .name { font-size: 2rem; }
  .cl-cols { grid-template-columns: minmax(0, 1fr); }
  .cl-left { display: none; }
  .cl-right { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .cl-sitemap { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 640px) {
  .cl-right, .cl-world { grid-template-columns: minmax(0, 1fr); }
  .cl-sitemap { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .cl-body { padding: 12px 12px 14px; }
  .cl-band { padding-inline: 22px; }
  .cl-ticker a.row { grid-template-columns: 20px minmax(0, 1fr) 10px; }
  .cl-ticker time { display: none; }
  .cl-feature h2 { font-size: 1.25rem; }
  .cl-footline { justify-content: center; text-align: center; }
}
@media (prefers-reduced-motion: reduce) {
  .cl-group > summary::after { transition: none; }
}