/* THE WEBSITE'S ONE STYLESHEET (tamer.land: landing, news, legal, wiki). Midnight Astrolabe, the
   game's look (apps/game/public/ui/00-tokens.css) restated for the web: deep navy, one accent metal
   (pale brass), star-white ink, Cinzel for display. Spec: docs/site-design.md. Linked by every page
   through apps/site/server/page.ts; `{{asset:<path>}}` is filled with hashed urls when served
   (apps/site/server/assets.ts). Never used by the game or the tools. */

/* ------------------------------------------------------------------ fonts */
/* Two families (CONTRIBUTING: no web fonts beyond two): Cinzel display, Barlow Semi Condensed body.
   Subset to ASCII plus the few marks the pages use (docs/site-design.md, Speed), Cinzel pinned to its
   700 instance (the only weight drawn); swap, with metric-matched local fallbacks so the swap does not
   move the page. A character outside unicode-range falls through to the fallback, never a download. */
@font-face { font-family: "Cinzel"; font-style: normal; font-weight: 700; font-display: swap; src: url("/site/vendor/fonts/cinzel.woff2?v=df7fe03d") format("woff2"); unicode-range: U+0020-007E, U+00A0, U+00A9, U+00AE, U+00B0, U+00B7, U+00D7, U+00E9, U+2013-2014, U+2018-2019, U+201C-201D, U+2022, U+2026, U+2122, U+2212; }
@font-face { font-family: "Barlow Semi Condensed"; font-style: normal; font-weight: 400; font-display: swap; src: url("/site/vendor/fonts/barlow-semi-condensed-400.woff2?v=6d9496a6") format("woff2"); unicode-range: U+0020-007E, U+00A0, U+00A9, U+00AE, U+00B0, U+00B7, U+00D7, U+00E9, U+2013-2014, U+2018-2019, U+201C-201D, U+2022, U+2026, U+2122, U+2212; }
@font-face { font-family: "Barlow Semi Condensed"; font-style: normal; font-weight: 600; font-display: swap; src: url("/site/vendor/fonts/barlow-semi-condensed-600.woff2?v=fe4e439e") format("woff2"); unicode-range: U+0020-007E, U+00A0, U+00A9, U+00AE, U+00B0, U+00B7, U+00D7, U+00E9, U+2013-2014, U+2018-2019, U+201C-201D, U+2022, U+2026, U+2122, U+2212; }
@font-face { font-family: "Cinzel fallback"; src: local("Times New Roman"), local("Georgia"); size-adjust: 118%; ascent-override: 82%; descent-override: 26%; }
@font-face { font-family: "Barlow fallback"; src: local("Arial"), local("Helvetica"); size-adjust: 88%; ascent-override: 100%; descent-override: 22%; }

/* ------------------------------------------------------------------ tokens */
:root {
  /* the navy ladder (the game's --navy-0..4) */
  --tl-navy-0: #080d1a;   /* the well: page ground, inputs, code */
  --tl-navy-1: #0d1321;   /* the slab: panels, cards */
  --tl-navy-2: #141c2e;
  --tl-navy-3: #1a2439;
  --tl-navy-4: #223049;   /* the lightest surface: a lit row, a head band */
  --tl-plate: #18324c;    /* a button's face */
  --tl-plate-hi: #1e3c5a;
  --tl-plate-lo: #0f2135;
  /* the one metal */
  --tl-brass-pale: #f4e6c4;
  --tl-brass-hi: #e6cf9c;
  --tl-brass: #d4b57a;
  --tl-brass-dim: #7c6844;
  --tl-brass-rgb: 212, 181, 122;
  /* starlight and ink */
  --tl-sky: #c9d6f2;
  --tl-sky-rgb: 201, 214, 242;
  --tl-ink-strong: #f4f6fb;
  --tl-ink: #e3e8f1;
  --tl-ink-mute: #a4afc3;  /* body copy (the game's #9ba7bd, a step lighter for 4.5:1 on navy-0 at 16px) */
  --tl-ink-faint: #75819a;
  --tl-error: #e0776a;
  --tl-ok: #8fae86;
  --tl-shadow: 1, 3, 10;

  --tl-line: rgba(var(--tl-brass-rgb), .18);        /* a plain hairline */
  --tl-line-strong: rgba(var(--tl-brass-rgb), .42); /* a rule, a framed edge */
  --tl-ring: var(--tl-brass-pale);                  /* focus */

  --tl-font-display: "Cinzel", "Cinzel fallback", Georgia, serif;
  --tl-font-body: "Barlow Semi Condensed", "Barlow fallback", "Segoe UI", system-ui, sans-serif;
  --tl-font-mono: ui-monospace, "SF Mono", Menlo, Consolas, monospace;

  --tl-fs-1: clamp(1.9rem, 1.4rem + 1.9vw, 3rem);
  --tl-fs-2: clamp(1.5rem, 1.2rem + 1.2vw, 2.2rem);
  --tl-fs-3: 1.2rem;
  --tl-fs-lede: clamp(1.06rem, 1rem + .3vw, 1.25rem);
  --tl-fs-body: 1rem;
  --tl-fs-read: 1.0625rem;
  --tl-fs-small: .875rem;
  --tl-fs-micro: .75rem;
  --tl-track-caps: .16em;
  --tl-track-wide: .26em;

  /* 4 pt space */
  --tl-1: 4px; --tl-2: 8px; --tl-3: 12px; --tl-4: 16px; --tl-5: 20px; --tl-6: 24px;
  --tl-8: 32px; --tl-10: 40px; --tl-12: 48px; --tl-16: 64px; --tl-20: 80px; --tl-24: 96px;
  --tl-wrap: 1200px;
  --tl-gutter: clamp(16px, 4vw, 40px);
  --tl-measure: 68ch;
  --tl-head-h: 64px;
  --tl-radius: 2px;

  /* Old names (the previous warm theme), mapped onto the night so the wiki's sheets read right until
     they move to the names above. Do not use in new rules; delete when nothing reads them. */
  --tl-abyss: var(--tl-navy-0); --tl-base-deep: var(--tl-navy-0); --tl-base: var(--tl-navy-1); --tl-raised: var(--tl-navy-2);
  --tl-gold: var(--tl-brass-hi); --tl-bronze: var(--tl-brass-dim); --tl-parchment: var(--tl-ink-strong);
  --tl-brown: var(--tl-navy-3); --tl-brown-deep: var(--tl-navy-2);
  --tl-slate: var(--tl-navy-4); --tl-slate-deep: var(--tl-navy-3); --tl-slate-lit: var(--tl-plate-hi);
  --tl-text-mute: var(--tl-ink-mute); --tl-text-faint: var(--tl-ink-faint);
  --tl-ember: var(--tl-error); --tl-ember-deep: #3a1c22; --tl-verdigris: var(--tl-ok); --tl-verdigris-deep: #1c3328;
  --tl-metal: linear-gradient(180deg, var(--tl-brass-dim), var(--tl-brass-hi));

  /* The game's button sparkle (data/art/ui/btn-spark, --btn-orn), copied: a four-point brass star
     around a bright lozenge in a soft glow. 32 px, 2x the largest end sparkle (hero, 14 px). */
  --tl-spark: url("/site/ui/btn-spark.webp?v=1e263b6a");

  --tl-ease-out: cubic-bezier(.2, .7, .2, 1);
  --tl-dur-1: 120ms; --tl-dur-2: 200ms; --tl-dur-3: 360ms;

  color-scheme: dark;
}

/* ------------------------------------------------------------------ base */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; scroll-padding-top: calc(var(--tl-head-h) + 16px); overflow-x: clip; }
body {
  margin: 0; min-height: 100vh; overflow-x: clip;
  font: 400 var(--tl-fs-body)/1.6 var(--tl-font-body); color: var(--tl-ink-mute);
  background: var(--tl-navy-0);
  -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility;
}
img, picture, svg, video { display: block; max-width: 100%; height: auto; }
a { color: var(--tl-brass-hi); text-underline-offset: .18em; text-decoration-thickness: 1px; }
a:hover { color: var(--tl-brass-pale); }
:focus-visible { outline: 2px solid var(--tl-ring); outline-offset: 3px; }
h1, h2, h3, h4 { margin: 0; font-family: var(--tl-font-display); font-weight: 700; color: var(--tl-ink-strong); line-height: 1.15; letter-spacing: .01em; text-wrap: balance; }
p { margin: 0; text-wrap: pretty; }
ul, ol { margin: 0; padding: 0; }
.visually-hidden { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* The ground: navy with two soft washes of starlight (top and one side). Smooth light, never grain. */
.plate {
  background:
    radial-gradient(60rem 40rem at 85% -10%, rgba(var(--tl-sky-rgb), .07), transparent 70%),
    radial-gradient(50rem 50rem at -10% 40%, rgba(var(--tl-brass-rgb), .04), transparent 70%),
    var(--tl-navy-0);
}

.site-wrap { width: min(100% - 2 * var(--tl-gutter), var(--tl-wrap)); margin-inline: auto; }

/* ------------------------------------------------------------------ type roles */
.t-1 { font-size: var(--tl-fs-1); }
.t-2 { font-size: var(--tl-fs-2); }
.t-3 { font-size: var(--tl-fs-3); letter-spacing: .03em; }
.t-eyebrow {
  display: inline-flex; align-items: center; gap: .7em;
  font: 700 var(--tl-fs-micro)/1 var(--tl-font-display); letter-spacing: var(--tl-track-wide); text-transform: uppercase; color: var(--tl-brass);
}
/* The eyebrow's one ornament: a small four-point star before it. */
.t-eyebrow::before, .star {
  content: ""; flex: none; width: .9em; height: .9em; background: currentColor;
  clip-path: polygon(50% 0, 61% 39%, 100% 50%, 61% 61%, 50% 100%, 39% 61%, 0 50%, 39% 39%);
}
.t-lede { font-size: var(--tl-fs-lede); line-height: 1.55; color: var(--tl-ink); max-width: 52ch; }
.t-meta { font-size: var(--tl-fs-small); color: var(--tl-ink-faint); }

/* ------------------------------------------------------------------ buttons */
/* The game's square .btn: a navy plate in a 1px brass line, an inner hairline, a soft sheen, and a
   brass sparkle at each end (the game's --btn-orn). Cinzel caps label. */
.btn {
  --h: 48px; --spark: 14px;
  position: relative; display: inline-flex; align-items: center; justify-content: center; gap: .6em;
  min-height: var(--h); padding: 0 calc(var(--h) * .72);
  font: 700 .875rem/1 var(--tl-font-display); letter-spacing: var(--tl-track-caps); text-transform: uppercase; white-space: nowrap;
  color: #fbf4e2; text-decoration: none; text-shadow: 0 1px 2px rgba(var(--tl-shadow), .9);
  background:
    var(--tl-spark) left calc(var(--h) * .3 - var(--spark) / 2) center / var(--spark) var(--spark) no-repeat,
    var(--tl-spark) right calc(var(--h) * .3 - var(--spark) / 2) center / var(--spark) var(--spark) no-repeat,
    linear-gradient(180deg, rgba(var(--tl-sky-rgb), .12), transparent 48%, rgba(var(--tl-shadow), .3)),
    var(--tl-plate);
  border: 1px solid #c4a76f; border-radius: var(--tl-radius);
  box-shadow: inset 0 0 0 3px var(--tl-plate-lo), inset 0 0 0 4px rgba(var(--tl-brass-rgb), .32), 0 10px 26px -8px rgba(var(--tl-shadow), .8);
  cursor: pointer; transition: transform var(--tl-dur-1) var(--tl-ease-out);
}
.btn:hover { color: #fff; background-color: var(--tl-plate-hi); border-color: var(--tl-brass-pale); }
.btn:active { transform: translateY(1px); }
.btn:focus-visible { outline: 2px solid var(--tl-ring); outline-offset: 3px; }
.btn--lg { --h: 58px; --spark: 16px; font-size: 1rem; }
.btn--sm { --h: 38px; --spark: 12px; font-size: .75rem; }
/* The second action: no plate, a quieter rim. */
.btn--ghost { background: rgba(var(--tl-shadow), .35); border-color: var(--tl-brass-dim); box-shadow: inset 0 0 0 3px transparent, inset 0 0 0 4px rgba(var(--tl-brass-rgb), .14); color: var(--tl-ink); }
.btn--ghost:hover { background-color: rgba(var(--tl-sky-rgb), .06); border-color: var(--tl-brass); }
@media (hover: hover) { .btn:hover { transform: translateY(-1px); } }

/* THE HEXAGON (.btn--special), the game's special button (apps/game/public/ui/20-components.css)
   restated in px from --h: a 1px brass rim clipped to a pointed hexagon (::before), the navy face
   the same hexagon inset 1px under the game's sheen with a sparkle at each end (::after), and the
   game's inner line, a 1px brass hairline inset --ring that fades out where the sparkles begin
   (drawn on the face as two lines; the diagonals sit under the fade). The box itself is not
   clipped, so the focus ring stays visible. Every primary that sends a player into the game. */
.btn--special {
  --pt: 13px; --ring: 4px; --spark: 12px;   /* the game's .65em point, .2em ring, .6em sparkle at h 2.4em */
  --hex: polygon(0 50%, var(--pt) 0, calc(100% - var(--pt)) 0, 100% 50%, calc(100% - var(--pt)) 100%, var(--pt) 100%);
  --line: linear-gradient(90deg, transparent calc(var(--h) * .21), rgba(var(--tl-brass-rgb), .24) calc(var(--h) * .71), rgba(var(--tl-brass-rgb), .24) calc(100% - var(--h) * .71), transparent calc(100% - var(--h) * .21));
  isolation: isolate;
  padding: 0 calc(var(--h) * .81);
  background: none; border: 0; border-radius: 0; box-shadow: none;
  transition: filter var(--tl-dur-1) var(--tl-ease-out);
}
.btn--special::before, .btn--special::after { content: ""; position: absolute; z-index: -1; pointer-events: none; clip-path: var(--hex); }
.btn--special::before { inset: 0; background: #c4a76f; }
.btn--special::after {
  inset: 1px;
  background:
    var(--tl-spark) left calc(var(--pt) - 1px) center / var(--spark) var(--spark) no-repeat,
    var(--tl-spark) right calc(var(--pt) - 1px) center / var(--spark) var(--spark) no-repeat,
    var(--line) 0 calc(var(--ring) - 1px) / 100% 1px no-repeat,
    var(--line) 0 calc(100% - var(--ring) + 1px) / 100% 1px no-repeat,
    linear-gradient(180deg, rgba(var(--tl-sky-rgb), .1), transparent 48%, rgba(var(--tl-shadow), .3)),
    var(--tl-plate);
}
.btn--special:hover { color: #fbf4e2; background: none; filter: brightness(1.07); transform: none; }
.btn--special:active { filter: brightness(.94); transform: none; }
.btn--special.btn--lg { --pt: 16px; --ring: 5px; --spark: 14px; }
.btn--special.btn--sm { --pt: 10px; --ring: 3px; --spark: 10px; }

/* Quiet secondary: Cinzel caps link with an arrow that steps on hover. */
.link-more {
  display: inline-flex; align-items: center; gap: .5em; padding-block: .4em;
  font: 700 var(--tl-fs-micro)/1 var(--tl-font-display); letter-spacing: var(--tl-track-caps); text-transform: uppercase;
  color: var(--tl-brass-hi); text-decoration: none;
}
.link-more::after { content: "\2192"; transition: transform var(--tl-dur-2) var(--tl-ease-out); }
.link-more:hover::after { transform: translateX(4px); }

/* ------------------------------------------------------------------ rule */
/* One hairline in brass that fades at both ends, a four-point star at its centre. */
.rule { position: relative; height: 12px; margin: 0; border: 0; color: var(--tl-brass); overflow: visible;
  background: linear-gradient(90deg, transparent, var(--tl-line-strong) 30%, var(--tl-line-strong) 70%, transparent) 50% 50% / 100% 1px no-repeat; }
.rule::after { content: ""; position: absolute; left: 50%; top: 0; width: 12px; height: 12px; margin-left: -6px; background: currentColor; box-shadow: 0 0 0 6px var(--tl-navy-0);
  clip-path: polygon(50% 0, 61% 39%, 100% 50%, 61% 61%, 50% 100%, 39% 61%, 0 50%, 39% 39%); }

/* ------------------------------------------------------------------ panel */
/* A surface: the game's slab, a brass hairline, a lift of starlight at the top. No corner pieces. */
.panel {
  position: relative; background: linear-gradient(180deg, var(--tl-navy-2), var(--tl-navy-1));
  border: 1px solid var(--tl-line); border-radius: var(--tl-radius);
  box-shadow: inset 0 1px 0 rgba(var(--tl-sky-rgb), .06), 0 24px 48px -24px rgba(var(--tl-shadow), .9);
}

/* ------------------------------------------------------------------ chrome */
.skip { position: absolute; left: 8px; top: -100px; z-index: 100; padding: 8px 14px; background: var(--tl-navy-4); color: var(--tl-ink-strong); }
.skip:focus { top: 8px; }

.site-head {
  position: sticky; top: 0; z-index: 50; height: var(--tl-head-h);
  background: rgba(8, 13, 26, .78); border-bottom: 1px solid var(--tl-line);
  -webkit-backdrop-filter: blur(12px) saturate(1.2); backdrop-filter: blur(12px) saturate(1.2);
}
.site-head > .site-wrap { display: flex; align-items: center; gap: var(--tl-6); height: 100%; }
.site-head__logo { flex: none; display: block; }
.site-head__logo img { width: 96px; height: 40px; object-fit: contain; }
.site-head__nav { display: flex; align-items: center; gap: var(--tl-6); min-width: 0; margin-left: auto; }
.site-head__nav a {
  position: relative; flex: none; padding-block: var(--tl-2);
  font: 700 var(--tl-fs-small)/1 var(--tl-font-display); letter-spacing: var(--tl-track-caps); text-transform: uppercase;
  color: var(--tl-ink); text-decoration: none;
}
.site-head__nav a:hover { color: var(--tl-brass-pale); }
.site-head__nav a[aria-current] { color: var(--tl-brass-hi); }
.site-head__nav a::after { content: ""; position: absolute; left: 0; right: 0; bottom: -2px; height: 1px; background: var(--tl-brass); transform: scaleX(0); transition: transform var(--tl-dur-2) var(--tl-ease-out); }
.site-head__nav a[aria-current]::after { transform: none; }
.site-head__social { display: flex; gap: var(--tl-1); margin-right: calc(var(--tl-2) * -1); }
@media (max-width: 800px) { .site-head__social { display: none; } }
@media (max-width: 560px) {
  .site-head > .site-wrap { gap: var(--tl-4); }
  .site-head__nav { gap: var(--tl-4); }
  .site-head__logo img { width: 84px; height: 35px; }
}
@media (max-width: 440px) {
  .site-head > .site-wrap { gap: var(--tl-2); }
  .site-head__nav { gap: 10px; }
  .site-head__nav a { font-size: .75rem; letter-spacing: .04em; }
  .site-head__logo img { width: 68px; height: 28px; }
  .site-head .btn--sm { padding-inline: 26px; }
}
/* Under 640 px the Community link leaves the bar (the footer and the landing still carry it): "Almanac" and the full Play label leave no room for it. */
@media (max-width: 639px) { .site-head__nav [data-spy] { display: none; } }
@media (max-width: 359px) { .site-head__nav a { letter-spacing: .02em; } }

/* Discord and Instagram as icon links (header, footer, community panels). */
.social { display: grid; place-items: center; width: 36px; height: 36px; color: var(--tl-brass); border-radius: var(--tl-radius); transition: color var(--tl-dur-1) var(--tl-ease-out), background-color var(--tl-dur-1) var(--tl-ease-out); }
.social:hover { color: var(--tl-brass-pale); background: rgba(var(--tl-sky-rgb), .07); }
.social-ico { width: 20px; height: 20px; flex: none; }

/* The footer: a brass hairline fading at both ends, the brand with its social marks, five short link
   columns, then the language switch and the operator on one quiet line. */
.site-foot { position: relative; margin-top: var(--tl-12); padding-block: var(--tl-12) var(--tl-6); background: linear-gradient(180deg, var(--tl-navy-1), var(--tl-navy-0)); }
.site-foot::before { content: ""; position: absolute; inset: 0 0 auto; height: 1px; background: linear-gradient(90deg, transparent, var(--tl-line-strong) 20%, var(--tl-line-strong) 80%, transparent); }
.site-foot > .site-wrap { display: grid; grid-template-columns: minmax(10rem, 1fr) minmax(0, 4fr); gap: var(--tl-8) var(--tl-10); }
.site-foot__brand { display: grid; align-content: start; justify-items: start; gap: var(--tl-4); }
.site-foot__logo { width: 120px; height: 50px; object-fit: contain; }
.site-foot__social { display: flex; gap: var(--tl-1); margin-left: calc(var(--tl-2) * -1); }
.site-foot__cols { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: var(--tl-6); }
.site-foot__col h2 { margin-bottom: var(--tl-3); font: 700 var(--tl-fs-micro)/1.2 var(--tl-font-display); letter-spacing: var(--tl-track-caps); text-transform: uppercase; color: var(--tl-brass); }
.site-foot__col ul { display: grid; gap: var(--tl-2); list-style: none; }
.site-foot__col a, .site-foot__lang a { color: var(--tl-ink-mute); text-decoration: none; font-size: var(--tl-fs-small); }
.site-foot__col a:hover, .site-foot__lang a:hover { color: var(--tl-brass-pale); }
.site-foot__end { grid-column: 1 / -1; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--tl-3) var(--tl-6); padding-top: var(--tl-5); border-top: 1px solid var(--tl-line); font: 700 var(--tl-fs-micro)/1.4 var(--tl-font-display); letter-spacing: var(--tl-track-caps); text-transform: uppercase; color: var(--tl-ink-faint); }
.site-foot__end p { margin-left: auto; }
.site-foot__lang { display: flex; flex-wrap: wrap; gap: var(--tl-2) var(--tl-5); }
.site-foot__lang a { font: 400 var(--tl-fs-small)/1.4 var(--tl-font-body); letter-spacing: 0; text-transform: none; }
.site-foot__lang a[aria-current] { color: var(--tl-brass-hi); }
.site-foot__lang a { display: inline-flex; align-items: center; gap: .5em; }
/* a flag before each language: 3:2, slightly rounded, a faint rim so white edges hold on the navy */
.flag { flex: none; width: 18px; height: 12px; border-radius: 2px; overflow: hidden; box-shadow: 0 0 0 1px rgba(var(--tl-sky-rgb), .14); }
@media (max-width: 1000px) { .site-foot > .site-wrap { grid-template-columns: minmax(0, 1fr); } .site-foot__brand { grid-auto-flow: column; align-items: center; justify-content: space-between; } }
@media (max-width: 760px) { .site-foot__cols { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: var(--tl-6); } }

/* ------------------------------------------------------------------ sections */
.section { padding-block: clamp(56px, 8vw, 112px); }
.section__head { display: grid; gap: var(--tl-3); max-width: 46rem; margin-bottom: clamp(28px, 4vw, 48px); }
.section__head--center { margin-inline: auto; justify-items: center; text-align: center; }
.section__head p { color: var(--tl-ink-mute); font-size: var(--tl-fs-lede); }
.section--lit { background: radial-gradient(70rem 30rem at 50% 70%, rgba(var(--tl-sky-rgb), .06), transparent 70%), linear-gradient(180deg, transparent, rgba(13, 19, 33, .7) 30%, rgba(13, 19, 33, .7) 70%, transparent); }
.rule--short { width: min(100%, 24rem); margin-bottom: var(--tl-4); }

/* ------------------------------------------------------------------ landing: hero */
/* Centred: the login screen's symmetric night vista full-bleed (statues framing both sides, the gold
   astrolabe arc over the middle), the logo large inside the arc, the one line, Play now and the
   platforms in one centred column, and the four heroes with their pets on their own layer
   (site/landing/hero-group.webp) standing on the moonlit path at the foot. A soft radial darkening
   behind the column, never a box; the foot fades into the page. */
/* The landing's header lies over the art: a soft wash only, until site/landing/head.js says the page
   has scrolled (.is-scrolled: the solid bar fades in) and the hero is almost gone (.is-past: the small
   logo comes back). Without JS the logo just stays. */
.home .site-head { position: fixed; inset: 0 0 auto; background: linear-gradient(180deg, rgba(8, 13, 26, .72), rgba(8, 13, 26, .2)); border-bottom-color: transparent; -webkit-backdrop-filter: none; backdrop-filter: none; }
.home .site-head::before { content: ""; position: absolute; inset: 0; z-index: -1; background: rgba(8, 13, 26, .86); border-bottom: 1px solid var(--tl-line); -webkit-backdrop-filter: blur(12px) saturate(1.2); backdrop-filter: blur(12px) saturate(1.2); opacity: 0; transition: opacity var(--tl-dur-3) var(--tl-ease-out); }
.home .site-head.is-scrolled::before { opacity: 1; }
/* While the hero is in view the menu sits at the far left, where the logo goes (head.js measures the
   distance into --nav-shift), and the logo is away; past the hero the menu slides right beside Play
   and the logo drops in from the top. Transform and opacity only; reduced motion makes it a swap. */
@media (scripting: enabled) {
  .home .site-head__logo { transition: opacity var(--tl-dur-3) var(--tl-ease-out), transform var(--tl-dur-3) var(--tl-ease-out), visibility 0s; }
  .home .site-head.is-ready .site-head__nav { transition: transform 520ms var(--tl-ease-out); }
  .home .site-head:not(.is-past) .site-head__nav { transform: translateX(calc(var(--nav-shift, 0px) * -1)); }
  .home .site-head:not(.is-past) .site-head__logo { opacity: 0; transform: translateY(-14px); visibility: hidden; pointer-events: none; transition: opacity var(--tl-dur-2) var(--tl-ease-out), transform var(--tl-dur-2) var(--tl-ease-out), visibility 0s linear var(--tl-dur-2); }
  .home .site-head.is-past .site-head__logo { transition-delay: 160ms; }
}

.hero { position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; min-height: min(100svh, 1120px); padding: calc(var(--tl-head-h) + clamp(8px, 3svh, 40px)) var(--tl-gutter) clamp(12px, 3svh, 40px); text-align: center; isolation: isolate; overflow: hidden; }
/* The placeholder: the key art at 48 px (phone crop 30 px), inlined, cropped like the picture over it,
   so the night paints with the first frame; the opaque key art covers it once loaded. */
.hero__art { position: absolute; inset: 0; z-index: -2; background: var(--tl-navy-0) url("data:image/webp;base64,UklGRggBAABXRUJQVlA4IPwAAACwBgCdASowABsAPrFGn0mnI6MhNVQMAOAWCWMAzcAJy1fgl0fMM/yaToYRQ/ctb0hV70Aw6XwgKhzBoHE0gAD+8w3VMeFcWo6lTCj8HYzvCorxy+xQOYUOf2JfVMndCDuZlwJoeVetkYAW+fXgFSRpMXllCIy2NNNehfkCw5t6D/ZZ1AzB4NV9chw6LKvxUciw1euwqLottvN0lwPnN3Q5iVMJT7vvzkjyU0zxA6HDS/zYabVyfTgOODjE4Kd8J7TyObXfo6MIvsNtw1IvZ0SCOSMEwvJt84bo44T7EcbxadvB6QPxSJX8+kJTYyp0IuSrx1uz3m6tNHWIAAA=") 50% 0 / cover no-repeat; }
.hero__art img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 0; }
.hero::before {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background:
    radial-gradient(ellipse min(40rem, 56%) 40% at 50% 30%, rgba(8, 13, 26, .6), rgba(8, 13, 26, .32) 50%, transparent 100%),
    linear-gradient(0deg, var(--tl-navy-0) 0%, rgba(8, 13, 26, .72) 5%, rgba(8, 13, 26, .25) 12%, transparent 22%),
    linear-gradient(180deg, rgba(8, 13, 26, .45), transparent 14%);
}
.hero__copy { display: grid; justify-items: center; gap: clamp(16px, 2.6svh, 28px); }
.hero__title { margin: 0 0 clamp(0px, 1svh, 12px); line-height: 0; }
.hero__logo { width: clamp(300px, 30vw, 520px); height: auto; filter: drop-shadow(0 10px 28px rgba(var(--tl-shadow), .75)); }
.hero__actions { display: flex; justify-content: center; }
/* One line, one treatment: label and platforms the same size and tracking, the label in brass, each
   mark centred on its word, equal gaps. */
.hero__on { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: var(--tl-2) var(--tl-6); margin: 0; padding: 0; list-style: none; font: 600 var(--tl-fs-small)/1 var(--tl-font-body); letter-spacing: .06em; color: var(--tl-ink); text-shadow: 0 1px 10px rgba(var(--tl-shadow), .95); }
.hero__on li { display: inline-flex; align-items: center; gap: .5em; }
.hero__on li:first-child { color: var(--tl-brass); }
.hero__on svg { width: 1.1em; height: 1.1em; flex: none; color: var(--tl-brass); }
/* Its <picture> (AVIF first) takes no box: the img stays the hero's flex item. */
.hero__figure { display: contents; }
/* The group stands on the path just under the platforms line. The four heroes stand 50 px left of the
   picture's centre (the dragon pet widens its right side); translate puts the heroes on the axis. */
.hero__group { display: block; flex: none; margin-top: clamp(4px, 1.5svh, 20px); translate: 4.6% 0; width: auto; height: clamp(220px, 40svh, 460px); max-width: 100%; object-fit: contain; object-position: 50% 100%; pointer-events: none; user-select: none; }

/* Landscape phones and short windows: a smaller logo; the heroes continue below the fold. */
@media (max-height: 520px) and (orientation: landscape) {
  .hero { min-height: 100svh; justify-content: flex-start; padding-top: calc(var(--tl-head-h) + 4px); }
  .hero__copy { gap: var(--tl-4); }
  .hero__logo { width: 240px; }
  .hero__group { height: max(200px, 50svh); margin-top: var(--tl-3); }
}

/* Upright tablets (iPad portrait): the logo a size up, so it holds the tall hero. */
@media (min-width: 761px) and (orientation: portrait) { .hero__logo { width: clamp(300px, 40vw, 520px); } }

/* Upright phones: the tall phone crop (landscape phones take the wide art and the block above). */
@media (max-width: 760px) and (orientation: portrait) {
  .hero { min-height: min(92svh, 760px); padding-top: calc(var(--tl-head-h) + var(--tl-4)); }
  .hero__art { background-image: url("data:image/webp;base64,UklGRgoBAABXRUJQVlA4IP4AAAAQCACdASoeADMAPrFGmUmnI6IhM/ZtUOAWCWUAuzQKRerQ3AprBMrQZpRwgB1Y9+vN9fTU+FV499MC8Y3IKdiA3y1rI80MxIAAAP7729mJiTkObquD9SFthpr8lMObNvtRuQtOqdY4iOs7b+bDW/oUp2VrlfBKBsmmoseJVtCxWJLML1ywy7k1VphjTVME+JPHuvZ4X30qJKPxu68HP/rAgLbTVR2NUj/tpdiuztGhxfDOQvySNKZRr+GD6kq8uwo3ptHYrHJ9s1lW0s46wHVBFJAvaK7AFAb1Q07hVYthQlo1kpFC1/e0GzFS89YvVXSepmQoJqkLklid5cAAAA=="); background-position: 50% 100%; }
  .hero__art img { object-position: 50% 100%; }
  .hero::before { background: radial-gradient(ellipse 95% 36% at 50% 40%, rgba(8, 13, 26, .7), rgba(8, 13, 26, .4) 55%, transparent 100%), linear-gradient(0deg, var(--tl-navy-0) 0%, rgba(8, 13, 26, .35) 5%, transparent 12%), linear-gradient(180deg, rgba(8, 13, 26, .55), transparent 12%); }
  .hero__logo { width: min(280px, 76vw); }
  .hero__group { height: auto; width: min(100%, 460px); margin-top: var(--tl-4); }
}
/* Narrow phones: tighter gaps keep "Gratis dimainkan" and the three platforms on one line. */
@media (max-width: 420px) { .hero__on { column-gap: var(--tl-3); } }

/* Install on a phone (shown by site/landing/install.js on touch devices only). */
.install { display: grid; gap: var(--tl-2); justify-items: inherit; }
.install[hidden] { display: none; }
/* Where install.js will show it (touch, in a browser tab), its room is kept from the first paint, so
   showing it does not shift the hero (CLS). */
@media (hover: none) and (pointer: coarse) and (display-mode: browser) { .hero .install[hidden] { display: grid; visibility: hidden; } }
.install__row { display: flex; flex-wrap: wrap; gap: var(--tl-2); justify-content: center; }
.install-btn {
  display: inline-flex; align-items: center; gap: var(--tl-2); min-height: 44px; padding: 0 var(--tl-4);
  font: 700 var(--tl-fs-micro)/1.2 var(--tl-font-display); letter-spacing: .1em; text-transform: uppercase;
  color: var(--tl-brass-hi); background: rgba(var(--tl-shadow), .55); border: 1px solid var(--tl-line-strong); border-radius: var(--tl-radius); cursor: pointer;
}
.install-btn:hover { color: var(--tl-brass-pale); border-color: var(--tl-brass); }
/* Narrow phones: the two stack, one width, labels centred. */
@media (max-width: 560px) { .install__row { flex-direction: column; align-items: stretch; } .install-btn { justify-content: center; } }
.install-btn svg { width: 20px; height: 20px; flex: none; }
.install__note { max-width: 28rem; font-size: var(--tl-fs-small); color: var(--tl-ink); }
.install__note[hidden] { display: none; }

.sheet { width: min(100% - 32px, 28rem); max-height: calc(100dvh - 32px); padding: 0; color: var(--tl-ink-mute); background: linear-gradient(180deg, var(--tl-navy-2), var(--tl-navy-1)); border: 1px solid var(--tl-line-strong); border-radius: var(--tl-radius); }
.sheet { text-align: left; }
.sheet li[hidden] { display: none; }
.sheet::backdrop { background: rgba(var(--tl-shadow), .75); }
.sheet__head { display: flex; align-items: center; gap: var(--tl-2); padding: var(--tl-4) var(--tl-5); border-bottom: 1px solid var(--tl-line); background: var(--tl-navy-3); }
.sheet__head h2 { flex: 1; font-size: 1rem; letter-spacing: .06em; }
.sheet__head svg { width: 20px; height: 20px; color: var(--tl-ink-strong); }
.sheet__close { min-width: 44px; min-height: 44px; padding: 4px 8px; background: none; border: 0; color: var(--tl-ink-strong); font-size: 1.5rem; line-height: 1; cursor: pointer; }
.sheet__body { padding: var(--tl-4) var(--tl-5) var(--tl-5); }
.sheet__warn { margin-bottom: var(--tl-3); padding: var(--tl-3); border-left: 2px solid var(--tl-error); background: rgba(224, 119, 106, .1); color: var(--tl-ink); font-size: var(--tl-fs-small); }
.sheet__warn[hidden] { display: none; }
.sheet ol { list-style: none; counter-reset: step; }
.sheet li { counter-increment: step; display: flex; gap: var(--tl-3); padding: var(--tl-3) 0; border-top: 1px solid var(--tl-line); line-height: 1.5; }
.sheet li:first-child { border-top: 0; }
.sheet li::before { content: counter(step); flex: none; display: grid; place-items: center; width: 1.6rem; height: 1.6rem; border-radius: 50%; background: var(--tl-brass); color: var(--tl-navy-0); font-weight: 600; font-size: var(--tl-fs-small); }
.sheet li b { color: var(--tl-ink-strong); }
.chip { display: inline-flex; vertical-align: middle; align-items: center; justify-content: center; width: 1.8rem; height: 1.8rem; margin: 0 2px; border-radius: 4px; background: var(--tl-navy-4); color: var(--tl-ink-strong); }
.chip svg { width: 18px; height: 18px; }
.sheet__actions { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--tl-3); margin-top: var(--tl-4); }
.sheet__copied { margin-top: var(--tl-2); font-size: var(--tl-fs-small); color: var(--tl-ok); text-align: center; }
.sheet__copied[hidden] { display: none; }

/* ------------------------------------------------------------------ landing: pillars */
.pillars { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--tl-4); list-style: none; }
.pillar { display: grid; align-content: start; gap: var(--tl-3); padding: var(--tl-8) var(--tl-6) var(--tl-6); }
.pillar img { width: 64px; height: 64px; margin-bottom: var(--tl-2); }
.pillar h3 { font-size: var(--tl-fs-3); }
/* Two by two up to iPad landscape (1024-1180): four columns there squeeze each title onto two lines. */
@media (max-width: 1100px) { .pillars { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px) { .pillars { grid-template-columns: minmax(0, 1fr); } .pillar { grid-template-columns: 56px minmax(0, 1fr); column-gap: var(--tl-4); padding: var(--tl-5); } .pillar img { grid-row: span 2; width: 56px; height: 56px; margin: 0; } }

/* ------------------------------------------------------------------ landing: pets */
/* Creatures stand on the night, cut out clean: no box behind a portrait, a pool of starlight under it. */
.pets { --cols: 5; display: flex; flex-wrap: wrap; justify-content: center; gap: var(--tl-8) var(--tl-4); list-style: none; }
.pet { flex: 0 1 calc((100% - (var(--cols) - 1) * var(--tl-4)) / var(--cols)); display: grid; justify-items: center; gap: var(--tl-1); text-align: center; }
.pet__art { position: relative; display: grid; place-items: end center; width: 100%; aspect-ratio: 165 / 200; }
.pet__art::before { content: ""; position: absolute; left: 12%; right: 12%; bottom: 2%; height: 22%; border-radius: 50%; background: radial-gradient(closest-side, rgba(var(--tl-sky-rgb), .16), transparent); }
.pet__art img { position: relative; width: 100%; height: 100%; object-fit: contain; object-position: 50% 100%; transition: transform var(--tl-dur-3) var(--tl-ease-out); }
.pet:hover .pet__art img { transform: translateY(-4px); }
.pet h3 { margin-top: var(--tl-2); font-size: 1rem; }
.pet p { font-size: var(--tl-fs-small); color: var(--tl-ink-faint); }
.pets-more { display: flex; justify-content: center; margin-top: var(--tl-8); }
/* iPads keep the five in one row; phones take three, then two. */
@media (max-width: 700px) { .pets { --cols: 3; } }
@media (max-width: 340px) { .pets { --cols: 2; } }

/* ------------------------------------------------------------------ landing: world */
.world { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--tl-6); }
.shot { margin: 0; }
.shot img { width: 100%; height: auto; aspect-ratio: 1160 / 658; object-fit: cover; border: 1px solid var(--tl-line); border-radius: var(--tl-radius); background: var(--tl-navy-1); }
.shot figcaption { margin-top: var(--tl-3); font: 700 var(--tl-fs-micro)/1 var(--tl-font-display); letter-spacing: var(--tl-track-caps); text-transform: uppercase; color: var(--tl-brass); }
.world-more { display: flex; justify-content: flex-end; margin-top: var(--tl-6); }
@media (max-width: 760px) { .world { grid-template-columns: minmax(0, 1fr); } }

/* ------------------------------------------------------------------ news cards (/blog) */
.news-empty { display: flex; align-items: center; justify-content: space-between; gap: 1.5rem; flex-wrap: wrap; padding: 1.4rem 1.6rem; }
.news-empty p { margin: 0; color: var(--ink-mute, #9ba7bd); }
.news-empty__links { display: flex; gap: 1.4rem; }
.news-empty__links a { display: inline-flex; align-items: center; gap: .5rem; color: var(--brass-hi, #e6cf9c); text-decoration: none; letter-spacing: .04em; }
.news-empty__links a:hover { color: var(--brass-pale, #f4e6c4); }
.news-empty__links svg { width: 20px; height: 20px; flex: none; }
.news-card { display: grid; grid-template-rows: auto 1fr; overflow: hidden; }
.news-card__cover { display: block; aspect-ratio: 16 / 9; background: radial-gradient(circle at 50% 120%, var(--tl-navy-4), var(--tl-navy-1)); border-bottom: 1px solid var(--tl-line); overflow: hidden; }
.news-card__cover img { width: 100%; height: 100%; object-fit: cover; transition: transform var(--tl-dur-3) var(--tl-ease-out); }
.news-card:hover .news-card__cover img { transform: scale(1.03); }
.news-card__cover--none { display: grid; place-items: center; }
.news-card__cover--none img { width: 45%; height: auto; opacity: .5; }
.news-card__body { display: grid; align-content: start; gap: var(--tl-2); padding: var(--tl-5); }
.news-card :is(h2, h3) { font-size: 1.15rem; }
.news-card :is(h2, h3) a { color: var(--tl-ink-strong); text-decoration: none; }
.news-card :is(h2, h3) a::after { content: ""; position: absolute; inset: 0; }
.news-card :is(h2, h3) a:hover { color: var(--tl-brass-pale); }
.news-card p { font-size: var(--tl-fs-small); }

/* ------------------------------------------------------------------ landing: latest news */
/* The three newest posts right under the hero: title left, All news right, three cards (the
   post's cover, or the dim logo). The section is not rendered at all when there are no posts. */
.section--news { padding-block: clamp(48px, 6vw, 88px) clamp(24px, 3vw, 40px); }
.news-head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: var(--tl-3) var(--tl-6); margin-bottom: clamp(20px, 3vw, 32px); }
.news { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--tl-4); list-style: none; }
.news .news-card { transition: transform var(--tl-dur-2) var(--tl-ease-out); }
.news .news-card:hover { transform: translateY(-2px); border-color: var(--tl-line-strong); }
.news .news-card p:last-child { color: var(--tl-ink-mute); }
@media (max-width: 860px) { .news { grid-template-columns: minmax(0, 1fr); } .news .news-card { grid-template-columns: minmax(0, 2fr) minmax(0, 3fr); grid-template-rows: none; } .news .news-card__cover { aspect-ratio: auto; min-height: 100%; border-bottom: 0; border-right: 1px solid var(--tl-line); } .news .news-card__body { padding: var(--tl-4); } }
/* phones: a thumbnail, the date and the title; the lead waits on the post */
@media (max-width: 560px) { .news .news-card__body p:last-child { display: none; } .news .news-card :is(h2, h3) { font-size: 1rem; } }

/* ------------------------------------------------------------------ community */
.community { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--tl-4); list-style: none; }
.community a { display: grid; justify-items: center; text-align: center; gap: var(--tl-2); height: 100%; padding: var(--tl-6); text-decoration: none; color: inherit; transition: transform var(--tl-dur-2) var(--tl-ease-out); }
.community a:hover { transform: translateY(-2px); border-color: var(--tl-line-strong); }
.community b { display: flex; align-items: center; gap: .55em; font: 700 var(--tl-fs-3)/1.2 var(--tl-font-display); color: var(--tl-ink-strong); }
.community .social-ico { width: 22px; height: 22px; color: var(--tl-brass); }
/* iPad portrait: three narrow panels, so a tighter pad and title keep "Tamer's Almanac" on one line. */
@media (max-width: 1000px) { .community a { padding-inline: var(--tl-4); } .community b { font-size: 1.05rem; } }
@media (max-width: 760px) { .community { grid-template-columns: minmax(0, 1fr); } }

/* ------------------------------------------------------------------ reading pages */
.page { padding-block: clamp(32px, 6vw, 72px) 0; }
.page-head { display: grid; gap: var(--tl-3); max-width: var(--tl-measure); margin-bottom: var(--tl-10); }
.page-head p:not(.t-meta) { font-size: var(--tl-fs-lede); }
.crumbs ol { display: flex; flex-wrap: wrap; gap: var(--tl-2); list-style: none; font-size: var(--tl-fs-small); margin-bottom: var(--tl-6); }
.crumbs li + li::before { content: "/"; margin-right: var(--tl-2); color: var(--tl-ink-faint); }
.crumbs a { color: var(--tl-ink-mute); text-decoration: none; }
.crumbs a:hover { color: var(--tl-brass-pale); }
.crumbs [aria-current] { color: var(--tl-ink); }

.article { max-width: var(--tl-measure); }
.article-cover { margin: 0 0 var(--tl-8); }
.article-cover img { width: 100%; height: auto; border: 1px solid var(--tl-line); border-radius: var(--tl-radius); }
.article-foot { margin-top: var(--tl-12); padding-top: var(--tl-6); border-top: 1px solid var(--tl-line); display: flex; flex-wrap: wrap; gap: var(--tl-4) var(--tl-8); }

.blog-list { display: grid; gap: var(--tl-6); list-style: none; max-width: 60rem; }
.blog-list .news-card { grid-template-columns: minmax(0, 2fr) minmax(0, 3fr); grid-template-rows: none; position: relative; }
.blog-list .news-card__cover { aspect-ratio: auto; min-height: 100%; border-bottom: 0; border-right: 1px solid var(--tl-line); }
.blog-list .news-card__body { padding: var(--tl-6); }
@media (max-width: 620px) { .blog-list .news-card { grid-template-columns: minmax(0, 1fr); } .blog-list .news-card__cover { aspect-ratio: 16 / 9; border-right: 0; border-bottom: 1px solid var(--tl-line); } }
.news-card { position: relative; }
.empty { padding: var(--tl-8); text-align: center; }

/* Prose: articles, posts, legal, wiki text. */
.prose { font-size: var(--tl-fs-read); line-height: 1.72; color: var(--tl-ink-mute); }
.prose > * + * { margin-top: 1em; }
.prose h2 { margin-top: 2em; font-size: 1.5rem; }
.prose h3 { margin-top: 1.6em; font-size: 1.2rem; }
.prose h4 { margin-top: 1.4em; font-size: 1rem; letter-spacing: .04em; }
.prose strong { color: var(--tl-ink); font-weight: 600; }
.prose em { font-style: normal; color: var(--tl-ink); }
.prose a { color: var(--tl-brass-hi); text-decoration-color: rgba(var(--tl-brass-rgb), .5); }
.prose ul, .prose ol { padding-left: 1.4em; }
.prose li + li { margin-top: .35em; }
.prose ul li::marker { content: "\2726  "; color: var(--tl-brass-dim); font-size: .8em; }
.prose blockquote { margin-inline: 0; padding: .2em 0 .2em 1.2em; border-left: 2px solid var(--tl-brass); color: var(--tl-ink); }
.prose code, .prose kbd { padding: .1em .35em; font: .9em var(--tl-font-mono); color: var(--tl-brass-hi); background: var(--tl-navy-2); border-radius: 3px; }
.prose pre { overflow-x: auto; padding: var(--tl-4); background: var(--tl-navy-1); border: 1px solid var(--tl-line); border-radius: var(--tl-radius); }
.prose pre code { padding: 0; background: none; }
.prose img { height: auto; border-radius: var(--tl-radius); }
.prose hr { height: 1px; border: 0; background: var(--tl-line-strong); margin-block: 2em; }
.prose table { display: block; max-width: 100%; overflow-x: auto; border-collapse: collapse; font-size: var(--tl-fs-small); }
.prose th { padding: .6em .9em; text-align: left; font: 700 var(--tl-fs-micro)/1.3 var(--tl-font-display); letter-spacing: var(--tl-track-caps); text-transform: uppercase; color: var(--tl-brass); border-bottom: 1px solid var(--tl-line-strong); }
.prose td { padding: .6em .9em; border-bottom: 1px solid var(--tl-line); }
.prose tr:nth-child(even) td { background: rgba(var(--tl-sky-rgb), .025); }

/* Forms (future forum, sign-up). */
.tl-input { width: 100%; min-height: 44px; padding: 0 var(--tl-3); font: inherit; color: var(--tl-ink); background: var(--tl-navy-0); border: 1px solid var(--tl-line-strong); border-radius: var(--tl-radius); }
.tl-input:focus-visible { outline: 2px solid var(--tl-ring); outline-offset: 1px; }
.tl-input[aria-invalid="true"] { border-color: var(--tl-error); }

/* ------------------------------------------------------------------ the moved page */
.moved { min-height: 100vh; display: grid; place-items: center; padding: var(--tl-6); }
.moved__box { width: min(100%, 30rem); padding: var(--tl-10) var(--tl-8); display: grid; justify-items: center; gap: var(--tl-4); text-align: center; }
.moved__box img { width: 240px; height: auto; }
.moved__addr { font: 600 1.15rem/1.3 var(--tl-font-body); color: var(--tl-brass-pale); }
/* Landscape phones: a smaller logo and pad so Go now stays on screen. */
@media (max-height: 520px) {
  .moved { padding: var(--tl-3); }
  .moved__box { padding: var(--tl-5) var(--tl-6); gap: var(--tl-2); }
  .moved__box img { width: 150px; }
}

/* ------------------------------------------------------------------ motion */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition: none !important; animation: none !important; scroll-behavior: auto !important; }
}
@media (forced-colors: active) { .btn { border: 2px solid ButtonText; } .btn--special::before, .btn--special::after { content: none; } }

/* The header's Play shortens on phones so a long locale ("Main sekarang") still fits at 320 px;
   the full label stays the accessible name. */
.site-head__play .short { display: none; }
@media (max-width: 720px) {
  .site-head__play .long { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  .site-head__play .short { display: inline; }
}

/* ------------------------------------------------------------------ touch */
/* Tap targets of at least 44 px on touch screens (phones, iPads). The header links grow an invisible
   hit box (no change to the look anywhere); the rest only change under a coarse pointer, so the
   desktop layout stays as drawn. */
.site-head__nav a::before { content: ""; position: absolute; inset: -9px -5px; }
@media (pointer: coarse) {
  .social { width: 44px; height: 44px; }
  .site-head__logo { padding-block: 8px; }
  .site-head__social { margin-right: -12px; }
  .site-foot__social { margin-left: -12px; }
  .site-head .btn--sm { --h: 44px; }
  .link-more { min-height: 44px; }
  .site-foot__col ul { gap: 0; }
  .site-foot__col a { display: inline-block; padding-block: 11px; }
  .site-foot__lang a { min-height: 44px; }
  .news-empty__links a { min-height: 44px; }
  .crumbs a { display: inline-block; padding-block: 11px; }
  .crumbs ol { align-items: baseline; margin-block: -11px calc(var(--tl-6) - 11px); }
}