/* Cadence — tabletop strategy and reference.
   Type: Manrope for display, Inter for text. Both carry Greek, which rules out
   most display faces (Poppins and Montserrat included); half this site's
   content is Greek and a fallback there is immediately visible.

   The look: high-contrast blocks and one loud orange, worn the way gaming
   sites wear their brand colour — heavy uppercase display type, pill buttons,
   dark-first. Light mode is the same language on white. */

:root {
    --paper: #ffffff;
    --paper-raised: #f6f5f3;
    --ink: #141312;
    --ink-soft: #6b6560;
    --line: #e8e4df;
    --accent: #e05d00;
    --accent-strong: #ff7a1a;
    --accent-soft: #ffeadb;
    --shadow: 20 12 4;

    --measure: 64ch;
    --radius: 14px;
    --step--1: clamp(0.82rem, 0.8rem + 0.1vw, 0.88rem);
    --step-0: clamp(1rem, 0.96rem + 0.2vw, 1.09rem);
    --step-1: clamp(1.2rem, 1.12rem + 0.4vw, 1.4rem);
    --step-2: clamp(1.5rem, 1.34rem + 0.8vw, 2rem);
    --step-3: clamp(2rem, 1.66rem + 1.7vw, 3.05rem);
}

@media (prefers-color-scheme: dark) {
    :root {
        --paper: #0e0d0f;
        --paper-raised: #191719;
        --ink: #f4f1ed;
        --ink-soft: #a39d96;
        --line: #2b282b;
        --accent: #ff8b2d;
        --accent-strong: #ff8b2d;
        --accent-soft: #2b1a0c;
        --shadow: 0 0 0;
    }
}

*,
*::before,
*::after { box-sizing: border-box; }

body {
    margin: 0;
    background: var(--paper);
    color: var(--ink);
    font-family: Inter, ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
    font-size: var(--step-0);
    line-height: 1.65;
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
}

h1, h2, h3, .display {
    font-family: Manrope, Inter, ui-sans-serif, system-ui, sans-serif;
    font-weight: 800;
    line-height: 1.08;
    letter-spacing: 0.005em;
    margin: 0;
    text-wrap: balance;
}

/* The two heading levels shout; below that, case calms down so card titles
   and deck sections stay readable in Greek, which has no small caps. */
h1, h2 { text-transform: uppercase; }

a { color: inherit; }
img { max-width: 100%; height: auto; }

.wrap {
    width: min(100% - 2.5rem, 68rem);
    margin-inline: auto;
}

.wrap--narrow { width: min(100% - 2.5rem, 46rem); }

/* ---- header ---- */

.site-header {
    position: sticky;
    top: 0;
    z-index: 10;
    background: color-mix(in srgb, var(--paper) 88%, transparent);
    backdrop-filter: blur(12px);
    border-bottom: 1px solid var(--line);
}

.site-header .wrap {
    display: flex;
    align-items: center;
    gap: 1.5rem;
    min-height: 4.25rem;
    flex-wrap: wrap;
}

.brand {
    font-family: Manrope, Inter, ui-sans-serif, system-ui, sans-serif;
    font-size: 1.45rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.02em;
    text-decoration: none;
    display: inline-flex;
    align-items: baseline;
    gap: 0.4rem;
}

.brand::before {
    content: "";
    width: 0.55rem;
    height: 0.55rem;
    border-radius: 2px;
    background: var(--accent);
    transform: rotate(45deg);
}

/* Dissolved: nav and the language toggle sit directly on the header row,
   exactly as they did before they were wrapped. The wrapper only becomes a
   box on small screens, where the two have to stay on a row together. */
.nav-row { display: contents; }

/* The toggle reads last on the row; the markup now has it beside the nav so
   that a phone can keep the two together. */
.site-header .langs { order: 1; }

.site-nav {
    display: flex;
    gap: 1.4rem;
    flex: 1;
    flex-wrap: wrap;
}

.site-nav a {
    font-size: var(--step--1);
    font-weight: 500;
    color: var(--ink-soft);
    text-decoration: none;
    padding-block: 0.35rem;
    border-bottom: 2px solid transparent;
    transition: color 0.15s, border-color 0.15s;
}

.site-nav a:hover {
    color: var(--ink);
    border-bottom-color: var(--accent);
}

.langs {
    display: flex;
    gap: 0.25rem;
    padding: 0.2rem;
    background: var(--accent-soft);
    border-radius: 999px;
}

.langs a {
    font-size: 0.72rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--ink-soft);
    text-decoration: none;
    padding: 0.25rem 0.6rem;
    border-radius: 999px;
}

.langs a.on {
    background: var(--accent);
    color: #fff;
}

/* ---- page furniture ---- */

main { padding-block: clamp(2rem, 5vw, 4rem) 5rem; }

.eyebrow {
    font-size: 0.72rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.14em;
    color: var(--accent);
    margin: 0 0 0.75rem;
}

h1 { font-size: var(--step-3); }
h2 { font-size: var(--step-2); margin-block: 3rem 1.25rem; }
h3 { font-size: var(--step-1); }

.lede {
    font-size: var(--step-1);
    line-height: 1.5;
    color: var(--ink-soft);
    margin: 1rem 0 0;
    max-width: var(--measure);
    text-wrap: pretty;
}

.page-head { margin-bottom: clamp(2rem, 4vw, 3rem); }

/* ---- byline ---- */

.byline {
    display: flex;
    align-items: center;
    gap: 0.7rem;
    margin: 1.75rem 0 0;
    font-size: var(--step--1);
    color: var(--ink-soft);
}

.byline .avatar {
    width: 2.25rem;
    height: 2.25rem;
    border-radius: 50%;
    background: var(--accent);
    color: #fff;
    display: grid;
    place-items: center;
    font-family: Manrope, Inter, ui-sans-serif, system-ui, sans-serif;
    font-weight: 700;
    font-size: 0.95rem;
    flex: none;
}

.byline a {
    color: var(--ink);
    font-weight: 600;
    text-decoration: none;
}

.byline a:hover { color: var(--accent); }
.byline .sep { opacity: 0.45; }

/* ---- article body ---- */

.prose {
    max-width: var(--measure);
    margin-top: 2.5rem;
    font-size: 1.075rem;
    line-height: 1.75;
}

.prose p { margin: 0 0 1.4em; }
.prose > p:first-of-type { font-size: 1.15rem; }

.prose h2,
.prose h3 {
    font-size: var(--step-1);
    margin-block: 2.2rem 0.8rem;
}

.prose a { color: var(--accent); text-underline-offset: 0.15em; }

.hero {
    margin: 2rem 0 0;
    max-width: var(--measure);
}

.hero img {
    width: auto;
    max-width: min(420px, 100%);
    border-radius: var(--radius);
    display: block;
    box-shadow: 0 1px 2px rgb(var(--shadow) / 0.1), 0 8px 24px -8px rgb(var(--shadow) / 0.18);
}

.gallery {
    display: flex;
    gap: 0.75rem;
    flex-wrap: wrap;
    margin: 1rem 0 0;
    max-width: var(--measure);
}

.gallery img {
    width: 7.5rem;
    height: 7.5rem;
    object-fit: cover;
    border-radius: 6px;
    border: 1px solid var(--line);
}

/* ---- facts ---- */

.facts {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 0.55rem 1.5rem;
    margin: 2rem 0 0;
    padding: 1.15rem 1.35rem;
    background: var(--paper-raised);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    max-width: var(--measure);
    font-size: var(--step--1);
}

.facts dt {
    color: var(--ink-soft);
    font-weight: 500;
}

.facts dd {
    margin: 0;
    font-weight: 600;
}

/* ---- cards ---- */

.grid {
    display: grid;
    gap: 1.5rem;
    grid-template-columns: repeat(auto-fill, minmax(16rem, 1fr));
    padding: 0;
    margin: 0;
    list-style: none;
}

.card {
    display: flex;
    flex-direction: column;
    background: var(--paper-raised);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    overflow: hidden;
    transition: transform 0.18s ease, box-shadow 0.18s ease, border-color 0.18s;
}

.card:hover {
    transform: translateY(-3px);
    border-color: color-mix(in srgb, var(--accent) 35%, var(--line));
    box-shadow: 0 12px 28px -14px rgb(var(--shadow) / 0.32);
}

.card .thumb {
    display: block;
    aspect-ratio: 4 / 3;
    background: var(--accent-soft);
    overflow: hidden;
}

.card .thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.card-body { padding: 1.1rem 1.2rem 1.35rem; }

.card-title {
    font-family: Manrope, Inter, ui-sans-serif, system-ui, sans-serif;
    font-size: 1.2rem;
    font-weight: 700;
    line-height: 1.2;
    text-decoration: none;
    display: block;
    text-wrap: balance;
}

.card:hover .card-title { color: var(--accent); }

.card p {
    margin: 0.5rem 0 0;
    color: var(--ink-soft);
    font-size: var(--step--1);
    line-height: 1.55;
    display: -webkit-box;
    -webkit-line-clamp: 4;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.card .card-meta {
    margin-top: 0.85rem;
    font-size: 0.72rem;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--ink-soft);
}

/* ---- tags ---- */

.tag {
    display: inline-block;
    font-size: 0.68rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.09em;
    color: var(--accent);
    background: var(--accent-soft);
    border-radius: 999px;
    padding: 0.22rem 0.65rem;
}

.meta {
    color: var(--ink-soft);
    font-size: var(--step--1);
    margin: 0.75rem 0 0;
}

.meta span + span::before {
    content: "·";
    margin: 0 0.5rem;
    opacity: 0.5;
}

.source-note {
    margin-top: 3rem;
    padding-top: 1.25rem;
    border-top: 1px solid var(--line);
    font-size: var(--step--1);
    color: var(--ink-soft);
    max-width: var(--measure);
}

.empty {
    color: var(--ink-soft);
    font-style: italic;
}

/* ---- footer ---- */

.site-footer {
    border-top: 1px solid var(--line);
    padding-block: 2.5rem 3.5rem;
    color: var(--ink-soft);
    font-size: var(--step--1);
}

.site-footer .wrap {
    display: flex;
    justify-content: space-between;
    gap: 1.5rem;
    flex-wrap: wrap;
}

@media (prefers-reduced-motion: reduce) {
    * { transition: none !important; }
    .card:hover { transform: none; }
}

/* ---- front page ---- */

/* The home hero is a full-bleed orange block — the one place the brand
   colour is the surface rather than the accent. It breaks out of .wrap with
   viewport margins, then pads its content back into alignment with it.
   Everything on it is near-black in both schemes: this orange never changes
   with the theme, so neither may the text on it. */
.hero-band {
    --hero-ink: #1d0d02;
    margin: calc(-1 * clamp(2rem, 5vw, 4rem)) calc(50% - 50vw) clamp(2.5rem, 5vw, 4rem);
    padding: clamp(3rem, 7vw, 5rem) max(1.25rem, calc(50vw - 34rem)) clamp(3rem, 6vw, 4.5rem);
    background:
        radial-gradient(60rem 30rem at 85% -20%, rgb(255 255 255 / 0.18), transparent 60%),
        linear-gradient(135deg, #ff9440, #f26a00 55%, #e05d00);
    border-bottom: 0;
    color: var(--hero-ink);
}

.hero-band .eyebrow { color: var(--hero-ink); opacity: 0.75; }

.hero-band h1 {
    font-size: clamp(2.6rem, 1.9rem + 3vw, 4.6rem);
    max-width: 18ch;
    color: var(--hero-ink);
}

.hero-band .lede {
    font-size: var(--step-1);
    max-width: 46ch;
    color: var(--hero-ink);
    opacity: 0.82;
}

.hero-band .stats .n { color: var(--hero-ink); }
.hero-band .stats .l { color: var(--hero-ink); opacity: 0.65; }

/* Hub variant: same band, less altitude — a section page, not the front door. */
.hero-band--hub { padding-block: clamp(2.2rem, 5vw, 3.5rem) clamp(2.2rem, 5vw, 3.25rem); }

.hero-band .hub-link {
    color: var(--hero-ink);
    border-color: color-mix(in srgb, var(--hero-ink) 45%, transparent);
}

.hero-band .hub-link:hover {
    background: rgb(0 0 0 / 0.12);
}

/* The section motif breaks out of the band on the right. The band is a hard
   rectangle everywhere else, so the one thing allowed to break it should be
   the thing the section is about.

   Clipped on one axis only: it may hang past the bottom edge into the margin
   below, but nothing here may push the page sideways. overflow-x: clip is what
   allows that — overflow-x: hidden would force the other axis to scroll and
   take the overhang with it. */
.hero-band {
    position: relative;
    overflow-x: clip;
}

/* Type sits above the drawing, always. */
/* Type sits above the artwork, whichever kind. Both art containers are
   excluded here, or this rule — two classes deep — outranks their own
   position: absolute and drops them into the flow. */
.hero-band > :not(.hero-motif):not(.hero-photo):not(.hero-overlay) { position: relative; z-index: 1; }

/* Sized from the band's own height, and pinned to its top edge. A fixed width
   made the drawing taller than a hub band, and the overhang then broke upward
   as well as downward — over the header. Anchored this way it can only ever
   escape downward, into the margin that is already there. */
.hero-motif {
    position: absolute;
    z-index: 0;
    top: 0;
    right: max(0.5rem, calc(50vw - 37rem));
    height: calc(100% + clamp(1rem, 3vw, 2.5rem));
    min-height: 13rem;
    max-height: 24rem;
    pointer-events: none;
    filter: drop-shadow(0 14px 20px rgb(29 13 2 / 0.3));
}

.hero-motif img {
    display: block;
    height: 100%;
    width: auto;
}

/* A light disc behind the drawing so it sits on the band rather than floating
   over it — the same trick as the band's own top-right glow, aimed downward. */
.hero-motif::before {
    content: "";
    position: absolute;
    inset: -14% -12% -8%;
    z-index: -1;
    border-radius: 50%;
    background: radial-gradient(circle, rgb(255 255 255 / 0.24), rgb(255 255 255 / 0) 68%);
}

/* The stats row is the one thing on the band wide enough to reach the drawing. */
.hero-band:has(.hero-motif) .stats { max-width: 38rem; }

/* Below this the band is all text. There is no room beside a 46ch lede, and
   shrinking the drawing to fit would be worse than not drawing it. */
@media (max-width: 60rem) {
    .hero-motif { display: none; }
}

/* ---- artwork hero ----
   The home band carries the artwork itself rather than a drawing standing
   beside the type. luminosity is what makes this a palette shift and not a
   collage: the picture contributes only its light and dark, and every hue on
   the band still comes from the gradient underneath — so the art cannot
   drift off-brand, and a different picture dropped in here comes out in the
   same orange. The gradient runs deeper than the plain band because the
   artwork's own blacks need somewhere to land. */
.hero-band--art {
    /* Confines the blend to this band; without it the pseudo-element would
       reach for whatever is painted behind the section. */
    isolation: isolate;
    background:
        radial-gradient(52rem 26rem at 78% -15%, rgb(255 214 150 / 0.22), transparent 62%),
        linear-gradient(135deg, #ff8a2b, #e85f00 48%, #a83600);
}

.hero-band--art::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    background: url("../img/hero/dissonance.webp") 68% 45% / cover no-repeat;
    mix-blend-mode: luminosity;
    opacity: 0.42;
}

/* The reading side. Type here is near-black and the artwork is busiest on the
   right, so the left third is pulled back towards flat orange — enough to
   hold the headline off the picture without hiding it. */
.hero-band--art::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    background: linear-gradient(100deg,
        rgb(232 95 0 / 0.88) 0%,
        rgb(232 95 0 / 0.62) 40%,
        rgb(232 95 0 / 0) 74%);
}

/* Narrow: the band is shorter and the type spans it, so the scrim covers the
   whole width and the picture drops back to a texture behind everything. */
@media (max-width: 60rem) {
    .hero-band--art::before { background-position: 62% 40%; opacity: 0.3; }
    .hero-band--art::after {
        background: linear-gradient(180deg,
            rgb(232 95 0 / 0.72) 0%,
            rgb(232 95 0 / 0.55) 60%,
            rgb(232 95 0 / 0.4) 100%);
    }
}

/* ---- Life ----
   The section that is not about games, and the band says so before a word is
   read. Green rather than the brand orange, the artwork on the left, and the
   type ranged right — everything the rest of the site does, done the other way
   round, which is the point it is making about the world of grown ups.
   Confined here: nothing else on the site ranges right, and it would read as a
   mistake anywhere it was not deliberate. */
.hero-band--life {
    /* Light ink: this green is dark enough that the near-black used on the
       orange band would disappear into it. */
    --hero-ink: #f1f6ec;
    isolation: isolate;
    text-align: right;
    background:
        radial-gradient(46rem 24rem at 88% -25%, rgb(198 232 150 / 0.16), transparent 62%),
        linear-gradient(115deg, #16301c, #24491f 46%, #3c6a26);

    /* Sized to the artwork's own proportions. A hub band is short, and cover
       on a box the wrong shape crops from the top — which on this picture
       means losing the thought bubble, which is half the joke. */
    min-height: 23.5rem;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

/* Ranged right means the measure has to move with it. Both of these carry a
   max-width, so without the auto margin the text would range right inside a
   block still sitting on the left. */
.hero-band--life h1,
.hero-band--life .lede {
    margin-left: auto;
    margin-right: 0;
}

/* The lede is measured in ch, which on a wide screen is wider than the space
   left beside the artwork — its first line was starting on top of the orc.
   The panel takes 58%, so this leaves it a column and a gap. */
.hero-band--life .lede { max-width: 38%; }

.hero-band--life .eyebrow { color: var(--hero-ink); opacity: 0.7; }
.hero-band--life .lede { opacity: 0.82; }

/* The orc, bottom-left, mirroring the right-hand side every other band uses.
   A mask rather than a pre-faded picture: the same file then works on any
   background, and the fade can be tuned without going back to an editor.
   Anchored bottom so he stays seated at the desk whatever height the band
   takes — cover with a top crop would behead him. */
.hero-band--life::before {
    content: "";
    position: absolute;
    inset: 0 auto 0 0;

    /* Wide enough for both halves of the joke — him at the desk, and what he
       is actually thinking about. Its ratio is close to the picture's own, so
       cover has almost nothing to crop. */
    width: min(58%, 41rem);
    z-index: 0;
    pointer-events: none;
    background: url("../img/hero/desk-orc.webp") left center / cover no-repeat;

    /* The bubble ends around 83% across, so the fade starts after it and
       dissolves through the wall behind instead of through the axe. */
    -webkit-mask-image: linear-gradient(90deg, #000 84%, transparent 100%);
    mask-image: linear-gradient(90deg, #000 84%, transparent 100%);
}

/* Narrow: the artwork and the type would be fighting over the same column, and
   the type wins. Ranged right stays — it is the point, not the decoration. */
@media (max-width: 60rem) {
    .hero-band--life::before { display: none; }

    /* The height was only ever there to seat the orc. With him gone it is a
       green field the reader has to scroll past, and the lede has the whole
       width back. */
    .hero-band--life { min-height: 0; }
    .hero-band--life .lede { max-width: none; }
}

/* ---- photo hero ----
   A photograph brings its own band. Deep space cannot sit on the brand
   orange, so a page with a photo goes black, the ink flips to light, and the
   picture sits on the right and fades into the band on its left and lower
   edges. The image itself is untouched — the fade is done here, so a better
   photo can be dropped in without being pre-faded in an editor. */
.hero-band--photo {
    --hero-ink: #f4f1ed;
    background: #050507;
    /* Sideways only, as the base band: the overlay hangs past the bottom. */
    overflow-x: clip;
}

.hero-band--photo .eyebrow { color: var(--accent-strong); opacity: 1; }
.hero-band--photo .lede { opacity: 0.78; }
.hero-band--photo .stats .l { opacity: 0.6; }

.hero-band--photo .hub-link {
    border-color: color-mix(in srgb, var(--hero-ink) 40%, transparent);
}

.hero-band--photo .hub-link:hover { background: rgb(255 255 255 / 0.12); }

.hero-photo {
    position: absolute;
    z-index: 0;
    inset: 0 0 0 auto;
    overflow: hidden;
    width: min(64%, 58rem);
    pointer-events: none;
    /* Left edge dissolves into the band. */
    -webkit-mask-image: linear-gradient(to right, transparent 0%, #000 42%);
    mask-image: linear-gradient(to right, transparent 0%, #000 42%);
}

.hero-photo img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: 62% 50%;
}

/* Bottom edge, so the picture reads as receding into the band rather than
   cut off by it. */
.hero-photo::after {
    content: "";
    position: absolute;
    inset: auto 0 0 0;
    height: 38%;
    background: linear-gradient(to bottom, transparent, #050507);
}

/* Grain over the whole band. A long dark gradient bands visibly on most
   screens; a little noise breaks the bands the way a dither would, and it
   also keeps a rendered image from looking too clean against the type. The
   turbulence is generated, not a file, so there is nothing to serve. */
.hero-band--photo::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 1;
    pointer-events: none;
    opacity: 0.16;
    mix-blend-mode: overlay;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0.5 0 0 0 0 0.5 0 0 0 0 0.5 0 0 0 1 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* Above the grain layer as well. */
.hero-band--photo > :not(.hero-photo):not(.hero-overlay) { position: relative; z-index: 2; }

/* The subject over the backdrop. Sized from the band like the motif, pinned
   to its top, and a tenth taller than the band so it breaks the lower edge
   — the one thing allowed to leave the rectangle is the thing the section
   is about. Above the grain (z 3), so it stays as sharp as the file. */
.hero-overlay {
    position: absolute;
    z-index: 3;
    right: max(0.5rem, calc(50vw - 37rem));
    /* Anchored by its bottom, a tenth of the band below the edge: that is the
       "exploding out". Sized by width, not height — a wide subject like a
       fighter sized to the band's height would run across the heading. */
    bottom: -10%;
    width: min(46%, 42rem);
    pointer-events: none;
    filter: drop-shadow(0 22px 28px rgb(0 0 0 / 0.55));
}

.hero-overlay img {
    display: block;
    width: 100%;
    height: auto;
}

/* The lede is the one line long enough to reach the subject. As with the
   stats row and the drawings: the copy yields a little rather than the
   picture shrinking to fit under it. */
.hero-band--photo:has(.hero-overlay) .lede { max-width: 40ch; }

/* Narrow: unlike a drawing, a photograph can survive behind the text. It
   goes full-width, dims, and the fade comes down from the top so the
   heading sits on the darkest part. */
@media (max-width: 60rem) {
    .hero-photo {
        inset: 0;
        width: auto;
        opacity: 0.55;
        -webkit-mask-image: linear-gradient(to bottom, transparent 0%, #000 55%);
        mask-image: linear-gradient(to bottom, transparent 0%, #000 55%);
    }

    .hero-photo::after { display: none; }

    /* The subject stays, smaller, tucked into the top-right behind the
       heading's clear space rather than hanging below. */
    .hero-overlay {
        width: 58%;
        right: 0.5rem;
        bottom: -6%;
        opacity: 0.9;
    }

    /* Room below the last control for the subject to sit in, so it hangs
       under the button rather than across the end of it. */
    .hero-band--photo:has(.hero-overlay) { padding-bottom: clamp(7rem, 30vw, 9rem); }
}

.stats {
    display: flex;
    gap: 2.5rem;
    margin: 2rem 0 0;
    padding: 0;
    list-style: none;
    flex-wrap: wrap;
}

.stats .n {
    display: block;
    font-family: Manrope, Inter, ui-sans-serif, system-ui, sans-serif;
    font-size: 2rem;
    font-weight: 800;
    line-height: 1;
    color: var(--accent);
}

.stats .l {
    font-size: 0.72rem;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: var(--ink-soft);
}

/* featured review — image beside text, stacking narrow */
.feature {
    display: grid;
    grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr);
    gap: clamp(1.5rem, 4vw, 3rem);
    align-items: center;
    padding: 0;
    border: 1px solid var(--line);
    border-radius: var(--radius);
    background: var(--paper-raised);
    overflow: hidden;
}

@media (max-width: 46rem) {
    .feature { grid-template-columns: 1fr; }
}

.feature-image {
    display: block;
    aspect-ratio: 16 / 11;
    background: var(--accent-soft);
    overflow: hidden;
}

.feature-image img { width: 100%; height: 100%; object-fit: cover; }

.feature-body { padding: clamp(1.5rem, 3vw, 2.5rem); }

.feature-body h3 {
    font-size: clamp(1.6rem, 1.3rem + 1.2vw, 2.3rem);
    margin: 0.6rem 0 0;
}

.feature-body h3 a { text-decoration: none; }
.feature-body h3 a:hover { color: var(--accent); }
.feature-body p { color: var(--ink-soft); margin: 0.85rem 0 0; }

.section-head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 1rem;
    margin: clamp(3rem, 6vw, 4.5rem) 0 1.5rem;
    flex-wrap: wrap;
}

.section-head h2 { margin: 0; }

.section-head a {
    font-size: var(--step--1);
    font-weight: 600;
    color: var(--accent);
    text-decoration: none;
    white-space: nowrap;
}

.section-head a:hover { text-decoration: underline; }

/* browse strip */
.chips {
    display: flex;
    gap: 0.75rem;
    flex-wrap: wrap;
    padding: 0;
    margin: 0;
    list-style: none;
}

.chip {
    display: flex;
    align-items: baseline;
    gap: 0.5rem;
    padding: 0.7rem 1.15rem;
    border: 1px solid var(--line);
    border-radius: 999px;
    background: var(--paper-raised);
    text-decoration: none;
    font-weight: 600;
    transition: border-color 0.15s, color 0.15s;
}

.chip:hover { border-color: var(--accent); color: var(--accent); }
.chip .count { font-size: 0.75rem; color: var(--ink-soft); font-weight: 500; }

/* reviewers */
.people {
    display: grid;
    gap: 1.25rem;
    grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
    padding: 0;
    margin: 0;
    list-style: none;
}

.person {
    display: flex;
    gap: 0.9rem;
    padding: 1.15rem 1.25rem;
    border: 1px solid var(--line);
    border-radius: var(--radius);
    background: var(--paper-raised);
}

.person .avatar {
    width: 2.75rem;
    height: 2.75rem;
    border-radius: 50%;
    background: var(--accent);
    color: #fff;
    display: grid;
    place-items: center;
    font-family: Manrope, Inter, ui-sans-serif, system-ui, sans-serif;
    font-weight: 700;
    font-size: 1.15rem;
    flex: none;
}

.person a { font-weight: 600; text-decoration: none; }
.person a:hover { color: var(--accent); }

.person p {
    margin: 0.25rem 0 0;
    font-size: var(--step--1);
    color: var(--ink-soft);
    line-height: 1.5;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* ---- community ---- */

.community {
    margin-top: 3.5rem;
    padding-top: 2rem;
    border-top: 1px solid var(--line);
    max-width: var(--measure);
}

.reactions { display: flex; gap: 0.75rem; flex-wrap: wrap; }

.reaction {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.6rem 1rem;
    font: inherit;
    font-size: var(--step--1);
    color: var(--ink);
    background: var(--paper-raised);
    border: 1px solid var(--line);
    border-radius: 999px;
    cursor: pointer;
    transition: border-color 0.15s, background 0.15s, transform 0.1s;
}

.reaction:hover:not(:disabled) { border-color: var(--accent); }
.reaction:active:not(:disabled) { transform: scale(0.97); }
.reaction:disabled { opacity: 0.55; cursor: default; }

/* the member's own position, so it survives a reload */
.reaction.on {
    background: var(--accent-soft);
    border-color: var(--accent);
    color: var(--accent);
    font-weight: 600;
}

.reaction .ico { font-size: 1.05rem; line-height: 1; }
.reaction .n { font-variant-numeric: tabular-nums; font-weight: 600; }
.reaction .lbl { color: var(--ink-soft); }
.reaction.on .lbl { color: inherit; }

.comments-title { font-size: var(--step-1); margin: 2.5rem 0 1rem; }

.comments { list-style: none; padding: 0; margin: 0; display: grid; gap: 1.25rem; }

.comment { display: flex; gap: 0.85rem; }

.comment .avatar {
    width: 2.25rem;
    height: 2.25rem;
    border-radius: 50%;
    background: var(--accent-soft);
    color: var(--accent);
    display: grid;
    place-items: center;
    font-family: Manrope, Inter, ui-sans-serif, system-ui, sans-serif;
    font-weight: 700;
    flex: none;
}

.comment .who { margin: 0; font-weight: 600; font-size: var(--step--1); }
.comment .when { color: var(--ink-soft); font-weight: 400; margin-left: 0.5rem; }
.comment .what { margin: 0.25rem 0 0; white-space: pre-wrap; }

.comment-form { margin-top: 1.75rem; }

.comment-form textarea {
    width: 100%;
    padding: 0.8rem 0.95rem;
    font: inherit;
    color: var(--ink);
    background: var(--paper-raised);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    resize: vertical;
}

.comment-form textarea:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }

.comment-actions {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    margin-top: 0.75rem;
}

.btn {
    font: inherit;
    font-weight: 600;
    font-size: var(--step--1);
    padding: 0.6rem 1.2rem;
    color: #fff;
    background: var(--accent);
    border: 0;
    border-radius: 999px;
    cursor: pointer;
}

.btn:hover { filter: brightness(1.08); }
.hint { color: var(--accent); font-size: var(--step--1); }

.signin-prompt {
    margin-top: 1.75rem;
    padding: 1rem 1.25rem;
    background: var(--paper-raised);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    font-size: var(--step--1);
    color: var(--ink-soft);
}

.signin-prompt a { color: var(--accent); font-weight: 600; }

.visually-hidden {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
}

/* ---- account forms ---- */

.account-form { max-width: 24rem; display: grid; gap: 0.35rem; }
.account-form label { font-size: var(--step--1); font-weight: 600; margin-top: 0.75rem; }

.account-form input {
    padding: 0.65rem 0.85rem;
    font: inherit;
    color: var(--ink);
    background: var(--paper-raised);
    border: 1px solid var(--line);
    border-radius: var(--radius);
}

.account-form input:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
.account-form .btn { margin-top: 1.25rem; justify-self: start; }

/* A form that is only a button — the resend offer, which sits above the
   sign-in form rather than inside it, because forms cannot nest. */
.account-form--inline { margin-bottom: 1.5rem; }
.account-form--inline .btn { margin-top: 0; }

/* Secondary: it is an offer, not the thing the page is asking you to do. */
.btn--quiet {
    background: transparent;
    color: var(--ink);
    border: 1px solid var(--line);
}

.btn--quiet:hover { border-color: var(--accent); color: var(--accent); }

.form-error {
    margin: 0 0 0.5rem;
    padding: 0.7rem 0.95rem;
    background: var(--accent-soft);
    color: var(--accent);
    border-radius: var(--radius);
    font-size: var(--step--1);
}

/* ---- member bar ---- */

/* The profile form is wider than sign-in: it has a picker in it. */
.account-form--wide { max-width: 34rem; }
.account-form .field-note { font-size: var(--step--1); color: var(--ink-soft); margin: 0.15rem 0 0; }
.account-form textarea {
    padding: 0.65rem 0.85rem;
    font: inherit;
    color: var(--ink);
    background: var(--paper-raised);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    resize: vertical;
}
.account-form select {
    padding: 0.6rem 0.85rem;
    font: inherit;
    color: var(--ink);
    background: var(--paper-raised);
    border: 1px solid var(--line);
    border-radius: var(--radius);
}
.account-form .check { display: flex; align-items: center; gap: 0.55rem; margin-top: 1rem; font-weight: 500; }
.account-form .check input { width: auto; }

/* The face picker: the marks as they will actually appear, not a list of
   names. Choosing a face from a dropdown of words would be absurd. */
.marks { border: 0; padding: 0; margin: 1.5rem 0 0; }
.marks legend { font-size: var(--step--1); font-weight: 600; padding: 0; }
.marks .mark {
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    gap: 0.35rem;
    padding: 0.55rem 0.4rem;
    border: 1px solid transparent;
    border-radius: var(--radius);
    cursor: pointer;
    width: 5.2rem;
}
.marks .mark:hover { background: var(--paper-raised); }
.marks .mark input { position: absolute; opacity: 0; pointer-events: none; }
.marks .mark:has(input:checked) { border-color: var(--accent); background: var(--accent-soft); }
.marks .mark:has(input:focus-visible) { outline: 2px solid var(--accent); outline-offset: 1px; }
.marks .mark-label { font-size: 0.72rem; color: var(--ink-soft); text-align: center; }

.avatar--mark { display: inline-flex; align-items: center; justify-content: center; color: var(--accent-strong); background: var(--accent-soft); }

.form-notice {
    padding: 0.7rem 1rem;
    border-radius: var(--radius);
    background: var(--accent-soft);
    color: var(--ink);
    font-weight: 500;
}

/* Portrait beside the name, rather than above it. */
.seller-head { display: flex; align-items: center; gap: 0.9rem; }
.seller-head h1 { margin: 0; }
.seller-name { display: flex; align-items: center; gap: 0.5rem; }

.member-bar {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    font-size: var(--step--1);
}

.member-bar .who { color: var(--ink-soft); font-weight: 600; }
.member-bar a { color: var(--ink-soft); text-decoration: none; font-weight: 600; }
.member-bar a:hover { color: var(--accent); }
.member-bar form { margin: 0; }

.linkish {
    font: inherit;
    font-weight: 600;
    color: var(--ink-soft);
    background: none;
    border: 0;
    padding: 0;
    cursor: pointer;
}

.linkish:hover { color: var(--accent); }

/* ---- moderation ---- */

.badge {
    display: inline-block;
    margin-left: 0.5rem;
    padding: 0.1rem 0.5rem;
    font-size: 0.68rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.07em;
    color: var(--ink-soft);
    background: var(--accent-soft);
    border-radius: 999px;
}

.badge--warn { color: #fff; background: var(--accent); }

/* a member's own comment, not yet visible to anyone else */
.comment.pending { opacity: 0.72; }

.report {
    margin-top: 0.4rem;
    font: inherit;
    font-size: 0.72rem;
    color: var(--ink-soft);
    background: none;
    border: 0;
    padding: 0;
    cursor: pointer;
    text-decoration: underline;
    text-underline-offset: 0.15em;
}

.report:hover { color: var(--accent); }
.report:disabled { opacity: 0.5; cursor: default; text-decoration: none; }

.queue { list-style: none; padding: 0; margin: 0; display: grid; gap: 1.25rem; }

.queued {
    padding: 1.15rem 1.35rem;
    background: var(--paper-raised);
    border: 1px solid var(--line);
    border-radius: var(--radius);
}

.queued.done { opacity: 0.5; }
.queued-head { display: flex; align-items: baseline; gap: 0.5rem; flex-wrap: wrap; font-size: var(--step--1); }
.queued-head .when { color: var(--ink-soft); }
.queued .what { margin: 0.7rem 0 1rem; white-space: pre-wrap; }
.queued-actions { display: flex; align-items: center; gap: 1rem; }
.danger { color: var(--accent); }

/* ---- comment ban notice ---- */

.banned-notice {
    margin-top: 1.75rem;
    padding: 1.1rem 1.35rem;
    background: var(--accent-soft);
    border: 1px solid var(--accent);
    border-radius: var(--radius);
    font-size: var(--step--1);
}

.banned-notice strong { color: var(--accent); }
.banned-notice p { margin: 0.5rem 0 0; }
.banned-notice .fine { color: var(--ink-soft); }

/* ---- marketplace ----
   The second-hand marketplace. It borrows the card, queue and badge styles
   from the editorial side rather than inventing a parallel set — it is the
   same site, and a marketplace that looks bolted on reads as one. */

.muted { color: var(--ink-soft); }

.panel {
    padding: 1.1rem 1.25rem;
    background: var(--paper-raised);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    font-size: var(--step--1);
}

.panel + .panel { margin-top: 1rem; }
.panel h3 { font-size: 1rem; margin: 0 0 0.5rem; }
.panel h4 { font-size: var(--step--1); margin: 1rem 0 0.4rem; color: var(--ink-soft); }
.panel p { margin: 0 0 0.6rem; }
.panel p:last-child { margin-bottom: 0; }

.flash {
    padding: 0.8rem 1.1rem;
    border-radius: var(--radius);
    border: 1px solid var(--line);
    font-size: var(--step--1);
    margin: 0 0 1.5rem;
}

.flash--good { background: var(--paper-raised); }
.flash--bad { background: var(--accent-soft); border-color: var(--accent); color: var(--accent); }
.flash--bad li { margin-left: 1rem; }

/* Buttons inside marketplace forms are the primary action by default, so
   every form does not need a class on its submit. */
.marketplace-form button,
.stack button,
.reply button,
.enquire button,
.rate button,
.queued-actions button:not(.linkish),
.filters button,
.panel button:not(.linkish),
a.button {
    font: inherit;
    font-weight: 600;
    font-size: var(--step--1);
    padding: 0.55rem 1.15rem;
    color: #fff;
    background: var(--accent);
    border: 0;
    border-radius: 999px;
    cursor: pointer;
    text-decoration: none;
    display: inline-block;
}

.stack button.secondary {
    background: transparent;
    color: var(--ink);
    border: 1px solid var(--line);
}

.chip {
    display: inline-block;
    padding: 0.15rem 0.6rem;
    border-radius: 999px;
    border: 1px solid var(--line);
    background: var(--paper-raised);
    font-size: 0.72rem;
    font-weight: 600;
}

.chip--warn { border-color: var(--accent); color: var(--accent); }

.price { font-weight: 700; font-variant-numeric: tabular-nums; }

/* filters */

.filters {
    display: flex;
    flex-wrap: wrap;
    align-items: end;
    gap: 1rem;
    padding: 1.1rem 1.25rem;
    background: var(--paper-raised);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    margin-bottom: 2rem;
}

.filters label { display: grid; gap: 0.3rem; font-size: var(--step--1); }
.filters label span { color: var(--ink-soft); font-weight: 600; }

.filters input,
.filters select {
    font: inherit;
    font-size: var(--step--1);
    padding: 0.45rem 0.7rem;
    border: 1px solid var(--line);
    border-radius: 6px;
    background: var(--paper);
    color: var(--ink);
}

.seller-cta { font-size: var(--step--1); margin: 0 0 1.5rem; }

/* listing cards and pages */

.listing-meta {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    flex-wrap: wrap;
    margin: 0.5rem 0;
    font-size: var(--step--1);
}

.listing-meta--big { margin-top: 1rem; font-size: var(--step-0); }
.card-note { margin: 0; font-size: var(--step--1); color: var(--ink-soft); }
.card-note a { color: inherit; font-weight: 600; }
.listing-card .card-title a { text-decoration: none; }
.listing-card .card-title a:hover { color: var(--accent); }

.shots { display: flex; gap: 0.75rem; flex-wrap: wrap; margin: 2rem 0 0; }

.shots img {
    width: 14rem;
    height: 10.5rem;
    object-fit: cover;
    border-radius: var(--radius);
    border: 1px solid var(--line);
}

.shots--small img { width: 6rem; height: 4.5rem; }

.listing-body {
    display: grid;
    gap: 2.5rem;
    grid-template-columns: minmax(0, 1fr);
    margin-top: 1rem;
}

@media (min-width: 56rem) {
    .listing-body { grid-template-columns: minmax(0, 1fr) 21rem; }
}

.listing-side .prose { margin-top: 0; }
.seller-name { font-size: var(--step-0); font-weight: 600; }
.seller-name a { text-decoration: none; }
.seller-name a:hover { color: var(--accent); }

.shipping { list-style: none; padding: 0; margin: 0; display: grid; gap: 0.5rem; }
.shipping li { display: flex; gap: 0.5rem; align-items: baseline; flex-wrap: wrap; }

.enquire textarea,
.reply textarea,
.stack textarea,
.stack input,
.stack select,
.rate input,
.report-form input {
    font: inherit;
    width: 100%;
    padding: 0.6rem 0.75rem;
    border: 1px solid var(--line);
    border-radius: 8px;
    background: var(--paper);
    color: var(--ink);
    resize: vertical;
}

.enquire textarea { margin-bottom: 0.75rem; }
.report-form { margin-top: 1rem; }
.report-form input { margin-bottom: 0.6rem; }

/* seller standing */

.standing {
    display: flex;
    gap: 2.5rem;
    flex-wrap: wrap;
    padding: 1.1rem 1.35rem;
    background: var(--paper-raised);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    margin-bottom: 2rem;
}

.standing-item { display: grid; gap: 0.2rem; }

.standing-label {
    font-size: 0.72rem;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: var(--ink-soft);
    font-weight: 600;
}

.ratings { list-style: none; padding: 0; margin: 0; display: grid; gap: 1rem; }

.rating {
    padding: 0.9rem 1.1rem;
    background: var(--paper-raised);
    border: 1px solid var(--line);
    border-left: 3px solid var(--line);
    border-radius: var(--radius);
    font-size: var(--step--1);
}

.rating--good { border-left-color: #4a7c59; }
.rating--bad { border-left-color: var(--accent); }
.rating--mixed { border-left-color: var(--ink-soft); }
.rating-head { display: flex; gap: 0.6rem; align-items: baseline; flex-wrap: wrap; }
.rating p { margin: 0.4rem 0 0; }

/* forms */

.stack { display: grid; gap: 1.25rem; max-width: 44rem; }
.stack label { display: grid; gap: 0.35rem; font-size: var(--step--1); }
.stack label > span { font-weight: 600; }
.stack small { color: var(--ink-soft); font-size: 0.78rem; }
.stack .row { display: flex; gap: 1rem; flex-wrap: wrap; align-items: end; }
.stack .row label { flex: 1; min-width: 8rem; }
.stack .actions { display: flex; gap: 0.75rem; align-items: center; }

.shipping-editor { border: 1px solid var(--line); border-radius: var(--radius); padding: 1.1rem 1.25rem; }
.shipping-editor legend { font-weight: 600; font-size: var(--step--1); padding: 0 0.4rem; }
.shipping-row { margin-bottom: 0.6rem; }
.shipping-row select { flex: 0 0 11rem; }
.shipping-row input { flex: 1; }

/* desk and threads */

.desk-link { display: inline-flex; align-items: center; gap: 0.35rem; }

.threads { list-style: none; padding: 0; margin: 0; display: grid; gap: 0.6rem; }

.threads a {
    display: flex;
    gap: 0.75rem;
    align-items: baseline;
    flex-wrap: wrap;
    padding: 0.85rem 1.1rem;
    background: var(--paper-raised);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    text-decoration: none;
    font-size: var(--step--1);
}

.threads a:hover { border-color: var(--accent); }
.thread--unread a { border-left: 3px solid var(--accent); }
.thread-with { font-weight: 700; }
.thread-about { color: var(--ink-soft); flex: 1; }
.thread-when { color: var(--ink-soft); font-size: 0.78rem; }

.messages { list-style: none; padding: 0; margin: 2rem 0 0; display: grid; gap: 1rem; max-width: 46rem; }

.message {
    padding: 0.85rem 1.1rem;
    background: var(--paper-raised);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    font-size: var(--step--1);
}

/* Your own messages sit right, theirs left — the cheapest way to make a
   thread scannable without colouring one side. */
.message--mine { margin-left: 3rem; background: var(--accent-soft); border-color: var(--accent-soft); }
.message-head { display: flex; gap: 0.6rem; align-items: baseline; }
.message-head .when { color: var(--ink-soft); font-size: 0.78rem; }
.message p { margin: 0.35rem 0 0; white-space: pre-wrap; }

.reply { max-width: 46rem; margin-top: 1.5rem; display: grid; gap: 0.75rem; justify-items: start; }
.thread-side { max-width: 46rem; margin-top: 2.5rem; }
.thread-side form + form { margin-top: 0.5rem; }

.rate { display: flex; gap: 0.75rem; align-items: center; flex-wrap: wrap; }
.rate-scores { display: flex; gap: 0.9rem; font-size: var(--step--1); }
.rate-scores label { display: inline-flex; gap: 0.3rem; align-items: center; }
.rate input[type="text"] { flex: 1; min-width: 12rem; }

.ban-form { margin-top: 0.75rem; font-size: var(--step--1); }
.ban-form summary { cursor: pointer; color: var(--ink-soft); }
.ban-form form { display: flex; gap: 0.6rem; margin-top: 0.6rem; flex-wrap: wrap; }
.ban-form input { flex: 1; min-width: 14rem; }

.queued-actions form { margin: 0; }

.thumb-empty {
    display: grid;
    place-items: center;
    height: 100%;
    color: var(--ink-soft);
    font-size: 0.72rem;
    text-transform: uppercase;
    letter-spacing: 0.12em;
}

/* ---- curator's picks ----
   Three badges, three colours, and no fourth. If a pick needs explaining
   beyond one word and one line, it is not a pick. */

.pick {
    position: absolute;
    top: 0.6rem;
    left: 0.6rem;
    padding: 0.2rem 0.65rem;
    border-radius: 999px;
    font-size: 0.68rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: #fff;
    background: var(--ink);
}

.pick--inline { position: static; }
.pick--recommended { background: #3f6d54; }
.pick--hot { background: var(--accent); }
.pick--bargain { background: #5c5aa8; }

.listing-card .thumb { position: relative; text-decoration: none; }
.listing-card--picked { border-color: color-mix(in srgb, var(--accent) 40%, var(--line)); }

.pick-note {
    margin: 0 0 0.5rem;
    font-size: var(--step--1);
    font-style: italic;
    color: var(--ink);
}

.picks { margin-bottom: 3rem; }
.picks .section-head { margin-bottom: 1.25rem; }
.picks .section-head h2 { margin: 0; }
.picks .section-head p { margin: 0.25rem 0 0; font-size: var(--step--1); }

.pick-banner {
    display: grid;
    gap: 0.4rem;
    justify-items: start;
    margin: 2rem 0 0;
    padding: 1rem 1.25rem;
    max-width: var(--measure);
    background: var(--paper-raised);
    border: 1px solid var(--line);
    border-left: 3px solid var(--accent);
    border-radius: var(--radius);
    font-size: var(--step--1);
}

.pick-banner--recommended { border-left-color: #3f6d54; }
.pick-banner--bargain { border-left-color: #5c5aa8; }
.pick-banner p { margin: 0; }
.pick-banner p:not(.muted) { font-size: var(--step-0); font-style: italic; }

.pick-form { margin-top: 0.6rem; }
.pick-form summary { cursor: pointer; color: var(--ink-soft); font-size: var(--step--1); }

.pick-form-row {
    display: flex;
    gap: 0.6rem;
    flex-wrap: wrap;
    align-items: center;
    margin-top: 0.7rem;
}

.pick-form-row select { flex: 0 0 10rem; }
.pick-form-row input { flex: 1; min-width: 14rem; }

.pick-form-row select,
.pick-form-row input {
    font: inherit;
    font-size: var(--step--1);
    padding: 0.45rem 0.7rem;
    border: 1px solid var(--line);
    border-radius: 6px;
    background: var(--paper);
    color: var(--ink);
}

.pick-form-row button {
    font: inherit;
    font-weight: 600;
    font-size: var(--step--1);
    padding: 0.5rem 1.05rem;
    color: #fff;
    background: var(--accent);
    border: 0;
    border-radius: 999px;
    cursor: pointer;
}

.queued-head a { color: inherit; }

/* ---- contributor portraits ----
   The byline avatar is a letter or a picture in the same 2.25rem circle, so a
   contributor without a portrait leaves the line the same shape. */

img.avatar {
    width: 2.25rem;
    height: 2.25rem;
    border-radius: 50%;
    object-fit: cover;
    flex: none;
    background: var(--accent-soft);
}

/* Each context sizes its own circle, and those rules are two classes deep so
   they win over the one above — which is what keeps a reviewer card's picture
   at the card's size rather than the byline's. What has to be undone per
   context is the lettering: a picture needs no grid centring and no coloured
   disc behind it, both of which are there for the monogram. */
.byline img.avatar,
.person img.avatar,
.comment img.avatar {
    display: block;
    background: none;
    object-fit: cover;
}

.contributor-head .portrait {
    width: 8rem;
    height: 8rem;
    border-radius: 50%;
    object-fit: cover;
    display: block;
    margin-bottom: 1.25rem;
    box-shadow: 0 8px 24px -10px rgb(var(--shadow) / 0.4);
}

/* ---- decklists ----
   A decklist is reference material inside prose, so it sits in a quiet panel:
   the article speaks, the list is there when you want it. Card previews are
   pure CSS hover — no script, and the images only load when first shown. */

.decklist {
    margin: 2.5rem 0 0;
    padding: 1.4rem 1.6rem 1.6rem;
    max-width: var(--measure);
    background: var(--paper-raised);
    border: 1px solid var(--line);
    border-radius: var(--radius);
}

.decklist-head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 1rem;
    flex-wrap: wrap;
}

.decklist-head h2 { margin: 0; font-size: var(--step-1); }

.decklist-count {
    font-size: var(--step--1);
    color: var(--ink-soft);
    white-space: nowrap;
}

.decklist h3 {
    font-family: inherit;
    font-size: 0.72rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    color: var(--accent);
    margin: 1.4rem 0 0.5rem;
}

.decklist-core {
    display: flex;
    gap: 0.5rem 2rem;
    flex-wrap: wrap;
    margin-top: 1rem;
}

.decklist-slot { display: flex; align-items: baseline; gap: 0.6rem; }

.slot-label {
    font-size: 0.72rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    color: var(--ink-soft);
}

.decklist-cards {
    list-style: none;
    margin: 0;
    padding: 0;
    columns: 2;
    column-gap: 2.5rem;
    font-size: var(--step--1);
}

.decklist-cards li { break-inside: avoid; padding-block: 0.16rem; }

@media (max-width: 40rem) {
    .decklist-cards { columns: 1; }
}

.card-count {
    display: inline-block;
    min-width: 1.6em;
    font-weight: 600;
    color: var(--ink-soft);
    font-variant-numeric: tabular-nums;
}

.card-ref { position: relative; }
.card-ref .card-name { cursor: default; }
.card-ref:not(.card-ref--unknown) .card-name {
    text-decoration: underline dotted color-mix(in srgb, var(--accent) 55%, transparent);
    text-underline-offset: 0.2em;
}

/* Unknown means the card table has not synced that set yet — the raw id is
   deliberate, so the gap is visible instead of silently pretty. */
.card-ref--unknown .card-name { font-family: ui-monospace, monospace; opacity: 0.7; }

.card-pop {
    display: none;
    position: absolute;
    bottom: calc(100% + 0.5rem);
    left: 0;
    z-index: 20;
    gap: 0.4rem;
    padding: 0.4rem;
    background: var(--paper-raised);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    box-shadow: 0 16px 40px -12px rgb(var(--shadow) / 0.45);
}

.card-ref:hover .card-pop,
.card-ref:focus-within .card-pop { display: flex; }

.card-pop img {
    width: 15rem;
    max-width: 60vw;
    border-radius: 6px;
    display: block;
}

.decklist-foot { margin: 1.4rem 0 0; font-size: var(--step--1); }
.decklist-foot a { color: var(--accent); }

.chip--kind {
    display: inline-block;
    font-size: 0.66rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: var(--accent);
    background: var(--accent-soft);
    border-radius: 999px;
    padding: 0.18rem 0.6rem;
    margin-bottom: 0.45rem;
}

/* ---- tournament calendar ---- */

.cal-list {
    list-style: none;
    margin: 0 0 2.5rem;
    padding: 0;
    max-width: var(--measure);
}

.cal-row {
    display: flex;
    align-items: baseline;
    gap: 1rem;
    padding: 0.65rem 0;
    border-bottom: 1px solid var(--line);
    font-size: var(--step--1);
}

.cal-date {
    flex: 0 0 9.5rem;
    font-weight: 600;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

.cal-date--approx { color: var(--ink-soft); font-weight: 500; font-style: italic; }

.cal-body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 0.1rem; }
.cal-body a { font-weight: 600; text-decoration: none; color: var(--ink); }
.cal-body a:hover { color: var(--accent); }
.cal-meta { color: var(--ink-soft); }

.cal-row--cancelled .cal-body a { text-decoration: line-through; color: var(--ink-soft); }

.chip--live { background: #3f6d54; color: #fff; }

.cal-foot { font-size: var(--step--1); color: var(--ink-soft); max-width: var(--measure); }

.hub-links { margin: 1.25rem 0 0; }

.hub-link {
    display: inline-block;
    font-size: var(--step--1);
    font-weight: 600;
    text-decoration: none;
    color: var(--accent);
    padding: 0.45rem 1rem;
    border: 1px solid color-mix(in srgb, var(--accent) 40%, var(--line));
    border-radius: 999px;
}

.hub-link:hover { background: var(--accent-soft); }

@media (max-width: 40rem) {
    .cal-row { flex-wrap: wrap; }
    .cal-date { flex-basis: 100%; }
}


/* ---- gaming-frog energy: buttons and CTAs ----
   One rule for every solid button on the site, appended so it outranks the
   per-feature declarations above. Pills, heavy weight, uppercase — the
   reference wears its buttons loud, and so do we. */

.filters button,
.pick-form-row button,
.community form button:not(.linkish),
.comment-form button,
button.cta,
.hub-link {
    font-family: Manrope, Inter, ui-sans-serif, system-ui, sans-serif;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.filters button,
.pick-form-row button {
    background: var(--accent-strong);
    border-radius: 999px;
    color: #fff;
}

.hub-link {
    background: var(--accent-strong);
    color: #fff;
    border: 0;
    padding: 0.55rem 1.3rem;
}

.hub-link:hover { background: var(--accent); color: #fff; }

/* Header: a solid dark band in both schemes, like the reference nav. */
.site-header {
    background: #0e0d0f;
    border-bottom: 2px solid var(--accent-strong);
    backdrop-filter: none;
}

.site-header .brand,
.site-header .site-nav a { color: #f4f1ed; }
.site-header .site-nav a { font-weight: 700; }
.site-header .site-nav a:hover { color: var(--accent-strong); border-bottom-color: var(--accent-strong); }
.site-header .member-bar,
.site-header .member-bar a,
.site-header .member-bar .who,
.site-header .search-link { color: #a39d96; }
.site-header .search-link:hover { color: var(--accent-strong); }
.site-header .langs { background: #211f22; }
.site-header .langs a { color: #a39d96; }
.site-header .langs a.on { background: var(--accent-strong); color: #fff; }

/* Cards lift a little harder on hover; the accent border does the talking. */
.card:hover {
    border-color: var(--accent-strong);
    box-shadow: 0 16px 36px -16px rgb(var(--shadow) / 0.4);
}

/* Chips: the pill grammar of the reference. */
.chip--kind,
.pick {
    font-weight: 800;
    letter-spacing: 0.08em;
}

.eyebrow { font-weight: 800; letter-spacing: 0.16em; }

/* Honeypot: off-canvas rather than display:none, because some bots skip
   fields they can see are hidden. */
.hp {
    position: absolute;
    left: -9999px;
    width: 1px;
    height: 1px;
    overflow: hidden;
}

/* ---- search ---- */

.visually-hidden {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
    border: 0;
}

.search-form { display: flex; gap: 0.5rem; }

.search-form input {
    font: inherit;
    font-size: var(--step--1);
    padding: 0.4rem 0.85rem;
    border: 1px solid var(--line);
    border-radius: 999px;
    background: var(--paper-raised);
    color: var(--ink);
    min-width: 0;
}

.search-form input:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: 1px;
}

.search-form--header input { width: 9rem; transition: width 0.18s ease; }
.search-form--header input:focus { width: 13rem; }

.search-form--page { margin-top: 1.5rem; max-width: var(--measure); }
.search-form--page input { flex: 1; font-size: var(--step-0); padding: 0.6rem 1.1rem; }

.search-form--page button {
    font: inherit;
    font-weight: 600;
    font-size: var(--step--1);
    padding: 0.6rem 1.4rem;
    color: #fff;
    background: var(--accent);
    border: 0;
    border-radius: 999px;
    cursor: pointer;
}

.search-note {
    margin-top: 2.5rem;
    font-size: var(--step--1);
    color: var(--ink-soft);
    max-width: var(--measure);
}

/* Desktop has room for the field itself, so the link stays out of the way. */
.search-link {
    display: none;
    align-items: center;
    color: var(--ink-soft);
}

.search-link:hover { color: var(--accent); }

/* ---- the header on small screens ----
   Every part of the header sits on one wrapping flex row. At phone widths the
   nav could not fit beside the brand, and because it wraps internally too it
   broke five sections over five lines: the header stood 384px tall on an
   812px screen, a fifth of the viewport spent before a word of content, and
   sticky, so it stayed spent. Two rows now — identity and account above, the
   sections below as a strip that scrolls sideways rather than growing. */
@media (max-width: 52rem) {
    .site-header .wrap {
        gap: 0.6rem 0.75rem;
        min-height: 0;
        padding-block: 0.55rem;
    }

    .brand { font-size: 1.2rem; }

    /* Everything from here rides to the right of the brand. The padding is
       there for the thumb — a 19px glyph is not a tap target — and the
       negative block margin keeps it from making the row taller. */
    .search-link {
        display: inline-flex;
        margin-inline-start: auto;
        padding: 0.7rem;
        margin-block: -0.7rem;
    }

    /* The display name is decoration and of unknown length; Desk and Sign out
       are the controls, and the row has no width to gamble. */
    .member-bar { gap: 0.6rem; }
    .member-bar .who { display: none; }

    /* Sections and language, on a row of their own once the first one is
       full — and on the first row still, at the wide end of this range, where
       everything fits. Whichever it is, the two stay together: the toggle
       used to be the item that fell off the end alone. */
    .nav-row {
        display: flex;
        align-items: center;
        gap: 0.75rem;
        order: 10;
        flex: 1 1 auto;
        min-width: 0;
    }

    /* A strip rather than a block: nowrap keeps the sections on one line so
       the row scrolls sideways instead of growing downwards. Bled to the left
       screen edge, so a half-visible link reads as more to come rather than
       as a broken margin — which is also the only affordance it needs. */
    .site-nav {
        flex: 1 1 auto;
        min-width: 0;
        flex-wrap: nowrap;
        gap: 1.1rem;
        overflow-x: auto;
        scrollbar-width: none;
        margin-inline-start: -1.25rem;
        padding-inline-start: 1.25rem;
        scroll-padding-inline: 1.25rem;
    }

    /* Rides the end of the sections row. Signed in, the account controls take
       the whole of the first row on a phone, and this was the piece that fell
       off the end of it. */
    /* Same buttons, less pill. */
    .langs { padding: 0.15rem; }
    .langs a { padding: 0.2rem 0.45rem; }

    .site-nav::-webkit-scrollbar { display: none; }

    /* Fades the strip out before the language pill rather than butting a
       half-cut word against it, which reads as an overlap rather than as
       something to scroll. The padding matches the fade, so the last section
       sits clear of it once the strip is scrolled to the end. */
    .site-nav {
        padding-inline-end: 1.6rem;
        -webkit-mask-image: linear-gradient(90deg, #000 calc(100% - 1.6rem), transparent);
        mask-image: linear-gradient(90deg, #000 calc(100% - 1.6rem), transparent);
    }

    /* nowrap so "Fly Casual" cannot break across lines and give the strip a
       second row; taller so the links are thumb-sized rather than pointer-sized. */
    .site-nav a { white-space: nowrap; padding-block: 0.6rem; }

    /* A full-width input cost a third row of sticky header. The icon beside
       the account controls goes to the search page, which has a proper form. */
    .search-form--header { display: none; }
}

/* Smallest phones: the brand gives up the last of its size before the row
   is allowed to wrap. */
@media (max-width: 26rem) {
    .brand { font-size: 1.05rem; }
    .site-nav { gap: 0.95rem; }
}

/* ---- attribution ---- */

.attribution {
    margin-top: 1.25rem;
    padding-top: 1.25rem;
    border-top: 1px solid var(--line);
    font-size: 0.78rem;
    line-height: 1.5;
    color: var(--ink-soft);
    display: block;
}

.attribution p { margin: 0 0 0.35rem; max-width: 60ch; }
.attribution a { color: inherit; text-underline-offset: 0.15em; }
.attribution a:hover { color: var(--accent); }

.standing-line {
    display: flex;
    align-items: baseline;
    gap: 0.5rem;
    margin: 0.75rem 0 0;
    font-size: var(--step--1);
}

.kudos-count {
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    color: var(--accent);
}

/* ---- decklist: aspects, curve, export ----
   The six aspect colours as the cards print them. Villainy is near-black and
   Heroism near-white, so both carry a ring — on a dark page one of them would
   otherwise vanish entirely. */

.aspects { display: inline-flex; gap: 0.15rem; vertical-align: middle; margin-right: 0.1rem; }

.aspect {
    width: 0.5rem;
    height: 0.5rem;
    border-radius: 50%;
    display: inline-block;
    box-shadow: inset 0 0 0 1px rgb(0 0 0 / 0.35);
}

.aspect--vigilance  { background: #4a86c8; }
.aspect--command    { background: #4f9d69; }
.aspect--aggression { background: #c4483f; }
.aspect--cunning    { background: #d8b13a; }
/* Heroism is white and Villainy black on the printed cards, so each needs the
   ring the others do not: on a dark page a black dot is a hole, and on a light
   one a white dot is nothing at all. */
.aspect--heroism    { background: #f2ece0; box-shadow: inset 0 0 0 1px rgb(0 0 0 / 0.55); }
.aspect--villainy   { background: #46404e; box-shadow: inset 0 0 0 1px rgb(255 255 255 / 0.55); }

@media (prefers-color-scheme: light) {
    .aspect--villainy { background: #1d1a20; box-shadow: inset 0 0 0 1px rgb(255 255 255 / 0.3); }
}

/* Cost curve: eight bars, tallest normalised to the row height. */
.curve {
    display: flex;
    align-items: flex-end;
    gap: 0.35rem;
    list-style: none;
    margin: 1.25rem 0 0;
    padding: 0;
    height: 4.5rem;
}

.curve li {
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    align-items: center;
    height: 100%;
    gap: 0.2rem;
}

.curve-n { font-size: 0.62rem; color: var(--ink-soft); font-variant-numeric: tabular-nums; min-height: 0.9em; }

.curve-bar {
    width: 100%;
    min-height: 2px;
    background: color-mix(in srgb, var(--accent) 70%, transparent);
    border-radius: 2px 2px 0 0;
}

.curve-cost {
    font-size: 0.62rem;
    font-weight: 600;
    color: var(--ink-soft);
    font-variant-numeric: tabular-nums;
}

.deck-export { margin-top: 1rem; }
.deck-export summary { cursor: pointer; font-size: var(--step--1); color: var(--accent); font-weight: 600; }
.deck-export p { margin: 0.6rem 0 0.4rem; font-size: var(--step--1); }

.deck-export textarea {
    width: 100%;
    font-family: ui-monospace, monospace;
    font-size: 0.72rem;
    line-height: 1.45;
    padding: 0.7rem 0.9rem;
    border: 1px solid var(--line);
    border-radius: 6px;
    background: var(--paper);
    color: var(--ink);
    resize: vertical;
}

/* The preview is reachable by tap and keyboard, not only hover. */
.card-ref:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 3px; }

/* ---- machine-translation notice ----
   Sits under the byline, quiet enough not to shout over the headline but not
   so quiet it can be missed — the whole point is that a reader knows before
   they form an opinion about the prose. */

.mt-notice {
    display: flex;
    align-items: flex-start;
    gap: 0.75rem;
    margin: 1.5rem 0 0;
    padding: 0.85rem 1.1rem;
    max-width: var(--measure);
    background: var(--accent-soft);
    border-left: 3px solid var(--accent);
    border-radius: var(--radius);
    font-size: var(--step--1);
    line-height: 1.5;
}

.mt-notice p { margin: 0; }
.mt-notice strong { color: var(--ink); }
.mt-notice a { color: var(--accent); font-weight: 600; white-space: nowrap; }

.mt-glyph { flex: none; color: var(--accent); margin-top: 0.1rem; }

.mt-pair {
    display: inline-block;
    margin-left: 0.15rem;
    padding: 0.05rem 0.45rem;
    border-radius: 999px;
    background: color-mix(in srgb, var(--accent) 18%, transparent);
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    font-variant-numeric: tabular-nums;
}

.mt-why { color: var(--ink-soft); }

/* ---- paging ---- */

/* Sits under a card grid that no longer runs to three hundred items. Centred
   and quiet: it is navigation for the few readers who reach the bottom, not a
   thing to draw the eye down the page. */
.pager {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: clamp(1rem, 4vw, 2.5rem);
    margin: 3rem 0 1rem;
    padding-top: 2rem;
    border-top: 1px solid var(--line);
}

.pager-link {
    font-weight: 700;
    font-size: var(--step--1);
    letter-spacing: 0.02em;
    text-decoration: none;
    color: var(--accent);
    padding: 0.5rem 1rem;
    border: 1px solid color-mix(in srgb, var(--accent) 35%, transparent);
    border-radius: 999px;
}

.pager-link:hover { background: var(--accent-soft); }

/* Kept in the flow rather than removed, so the page number does not slide
   sideways between the first page and the last. */
.pager-link.is-off {
    color: var(--ink-soft);
    border-color: var(--line);
    opacity: 0.55;
}

.pager-at {
    font-size: var(--step--1);
    color: var(--ink-soft);
    white-space: nowrap;
}

/* ---- read on ---- */

.read-on {
    margin-top: clamp(3rem, 7vw, 5rem);
    padding-top: clamp(2rem, 4vw, 3rem);
    border-top: 1px solid var(--line);
}

.read-on .meta { margin-top: 1.5rem; }

/* Complexity pips. The glyphs carry the shape, the number carries the fact —
   a reader who cannot see the pips still gets "3 / 5", and a reader who can
   still does not have to count them. */
.pips {
    letter-spacing: 0.12em;
    color: var(--accent);
    margin-right: 0.5rem;
}

.pips-n { color: var(--ink-soft); }

/* ---- game catalogue ---- */

/* The A–Z. A jump bar of letters, then one section per letter with a plain
   list under it — a directory, not a card grid, because a reader here is
   scanning for a name rather than browsing pictures. */
.az {
    display: flex;
    flex-wrap: wrap;
    gap: 0.35rem;
    margin: 0 0 2rem;
    position: sticky;
    top: 4.5rem;
    z-index: 5;
    padding: 0.6rem 0;
    background: color-mix(in srgb, var(--paper) 92%, transparent);
    backdrop-filter: blur(8px);
}

.az a {
    display: grid;
    place-items: center;
    min-width: 2rem;
    height: 2rem;
    padding: 0 0.5rem;
    border-radius: 999px;
    border: 1px solid var(--line);
    font-family: Manrope, Inter, ui-sans-serif, system-ui, sans-serif;
    font-weight: 700;
    font-size: var(--step--1);
    text-decoration: none;
    color: var(--ink);
}

.az a:hover { border-color: var(--accent); color: var(--accent); }

/* Letters on the page being read, as against ones a click away. The bar
   spans the whole alphabet across every page, so without this a reader
   cannot tell which letters are already below them. */
.az a.az-here {
    border-color: var(--accent);
    background: var(--accent-soft);
}

.az-group h2 {
    margin-block: 2.5rem 0.75rem;
    padding-bottom: 0.4rem;
    border-bottom: 2px solid var(--accent);
    display: inline-block;
    scroll-margin-top: 8rem;
}

.az-group { scroll-margin-top: 8rem; }

.az-list {
    list-style: none;
    padding: 0;
    margin: 0;
    columns: 2;
    column-gap: 3rem;
}

.az-list li {
    break-inside: avoid;
    padding: 0.35rem 0;
    display: flex;
    align-items: baseline;
    gap: 0.6rem;
    border-bottom: 1px solid var(--line);
}

.az-name { text-decoration: none; font-weight: 600; color: var(--ink); }
.az-name:hover { color: var(--accent); }
.az-year { color: var(--ink-soft); font-size: var(--step--1); }
.az-count {
    margin-left: auto;
    font-size: 0.78rem;
    font-weight: 600;
    color: var(--accent);
    white-space: nowrap;
}

@media (max-width: 40rem) { .az-list { columns: 1; } }

/* A game's own page: cover beside the fact box. */
.game-page {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 2rem;
    align-items: start;
    max-width: var(--measure);
    margin-top: 1rem;
}

.game-page .facts { margin-top: 0; }
.game-cover { margin: 0; }
.game-cover img { max-width: 12rem; }

@media (max-width: 40rem) { .game-page { grid-template-columns: 1fr; } }

/* On a review, the box carries the game's name as its heading, linking to
   the game's page. */
.facts-block { max-width: var(--measure); margin: 2rem 0 0; }
.facts-title { margin: 0 0 0.5rem; font-weight: 700; }
.facts-title a { text-decoration: none; }
.facts-title a:hover { color: var(--accent); }
.facts-block .facts { margin-top: 0; }
.facts--rating { margin-top: 0.75rem !important; }

/* Admin: rows for hidden entries, and side-by-side fields. */
.queued.is-hidden { opacity: 0.55; }
.field-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(10rem, 1fr)); gap: 1rem; }
.field-row--checks label.check { display: flex; align-items: center; gap: 0.5rem; }
.field-row--checks input[type="checkbox"] { width: auto; }
.hint { color: var(--ink-soft); font-weight: 400; }
.linkish--danger { color: #b3261e; }
.stack--inline { display: block; max-width: none; }
.small { font-size: var(--step--1); }