/* ============================================================
   About page (/about/)
   The hero uses the shared tool intro (includes/page-intro.php);
   then three eras (an undated About, the MMO years, the World of Warcraft years
   with four chapters, each with a character standing on the right),
   the whole crew along a floor, and a support panel.
   ============================================================ */

/* --- Buttons: Buy me a coffee + a quiet text link --- */
.about-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 14px 24px;
}

.about-support-btn svg {
    width: 18px;
    height: 18px;
    color: var(--color-wow-gold);
}

/* The cup stays put (the CTA arrow's hover nudge is for arrows) */
.dash-intro__cta.about-support-btn:hover svg {
    transform: none;
}

.about-link {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 0.92rem;
    font-weight: 600;
    color: var(--color-text-light);
    text-decoration: underline;
    text-decoration-color: rgba(255, 255, 255, 0.28);
    text-underline-offset: 4px;
}

.about-link:hover {
    color: #fff;
    text-decoration-color: var(--color-primary);
}

.about-link svg {
    width: 15px;
    height: 15px;
    transition: transform 0.2s ease;
}

.about-link:hover svg {
    transform: translateX(3px);
}

/* --- Era headers: About (undated), the MMO years, the World of Warcraft years ---
   A section title with the years in a gold pill beside it, then the home
   hero's gold flourish at the same scale (24px tall), drawn longer. */
.about-era {
    position: relative;
    z-index: 1;
    padding: 26px 44px 0;
}

.about-era__head {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px 14px;
}

.panel .about-era__title {
    margin: 0;
    text-align: left;
    /* Level 2: a step under the hero's heading (34px), heavier */
    font-size: clamp(1.6rem, 1.3rem + 0.8vw, 1.9rem);
    font-weight: 800;
    line-height: 1.15;
    letter-spacing: -0.025em;
    color: var(--color-text-light);
}

/* Optical tuning (measured 2026-09-29 at 1x and 2x): the pill's box sat 1.5px
   above the title's ink center (the mostly lowercase title reads low), and its
   digits sat 1px low inside the pill. The pill drops 1.5px; its text rises 1px. */
.about-era__years {
    margin: 0;
    padding: 3px 11px 5px;
    transform: translateY(1.5px);
    border: 1px solid rgba(255, 209, 0, 0.35);
    border-radius: var(--radius-full);
    background: rgba(255, 209, 0, 0.07);
    font-size: 0.8rem;
    font-weight: 700;
    line-height: 1.2;
    letter-spacing: 0.08em;
    font-variant-numeric: lining-nums tabular-nums;
    color: var(--color-wow-gold);
}

.about-era__flourish {
    display: block;
    width: 440px;
    max-width: 100%;
    height: 24px;
    margin-top: 10px;
    color: var(--color-wow-gold);
    opacity: 0.55;
}

/* About me, the MMO years and These days: copy on the left and a gold line
   drawing on the right, in the same 300px column as the World of Warcraft years
   characters. Its center, 150px from the panel edge, is the hero emblem's. */
.about-era-panel {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 300px;
    gap: 48px;
    padding-right: 0;
}

.about-era-panel__main {
    position: relative;
    z-index: 1;
    min-width: 0;
}

.about-era-panel .about-era {
    padding-right: 0;
}

.about-era-art {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0;
    padding: 24px 0 0;
    color: var(--color-wow-gold);
}

.about-era-art::before {
    content: "";
    position: absolute;
    inset: 0 -20px -28px;
    background: radial-gradient(closest-side, rgba(255, 209, 0, 0.12), transparent);
    pointer-events: none;
}

.about-era-art__svg {
    position: relative;
    display: block;
    width: 200px;
    height: auto;
    filter: drop-shadow(0 6px 18px rgba(255, 209, 0, 0.18));
}

/* These days: a tall arcade cabinet whose screen shows code */
.about-era-art--arcade .about-era-art__svg {
    width: 150px;
}

/* The screen matches the MMO years' CRT: a teal glass and teal glyphs */
.about-arcade__screen {
    /* solid, because this panel's glow is gold, not the MMO years' teal */
    fill: #173833;
}

.about-arcade__code {
    stroke: #5fd8bf;
}

/* "Updated …" at the bottom of the support panel's copy, small, like the
   dashboard's */
.about-support__copy .about-updated {
    margin: 14px 0 0;
    font-size: 0.78rem;
    color: var(--color-text-muted);
}

/* The CRT's screen glows the MMO years' teal */
.about-era-art--crt::before {
    background: radial-gradient(closest-side, rgba(64, 196, 170, 0.16), transparent);
}

.about-era-art--crt .about-era-art__svg {
    width: 220px;
}

.about-crt__screen {
    fill: rgba(64, 196, 170, 0.1);
}

.about-crt__scene,
.about-crt__cursor {
    fill: #5fd8bf;
}

.about-crt__cursor {
    animation: about-cursor 1.1s steps(1) infinite;
}

@keyframes about-cursor {
    50% { opacity: 0; }
}

/* About me: undated, a short intro under the header */
.about-me {
    padding: 0 0 28px 0;
    background:
        radial-gradient(45% 110% at 0% 0%, rgba(255, 209, 0, 0.06), transparent 70%),
        var(--color-bg-panel);
}

.about-me__body {
    max-width: calc(68ch + 88px);
    padding: 14px 44px 0;
}

.about-me__body p,
.about-mmo__chapter p:not(.about-kicker) {
    margin: 0 0 14px;
    font-size: 1rem;
    line-height: 1.7;
    color: var(--color-text-muted);
}

.about-me__body p:last-child,
.about-mmo__chapter p:last-child {
    margin-bottom: 0;
}

/* The Blizzard years: Warcraft to Warcraft III, before the MMOs. Blizzard's
   icy blue for the glow and the screens, like the MMO years' teal CRT. */
.about-blizzard {
    padding: 0 0 28px 0;
    background:
        radial-gradient(45% 110% at 0% 0%, rgba(79, 169, 255, 0.07), transparent 70%),
        var(--color-bg-panel);
}

/* The closer sits on its own line, set apart by space, same color as the story */
.about-me__body p.about-closer {
    margin-top: 20px;
}

.about-era-art--lan::before {
    background: radial-gradient(closest-side, rgba(79, 169, 255, 0.16), transparent);
}

/* Two monitors side by side need more width than one drawing */
.about-era-art--lan .about-era-art__svg {
    width: 260px;
}

/* Each screen glows in its own game's color, like the MMO years' teal CRT:
   Warcraft gold, Diablo blood red, StarCraft Protoss blue, Diablo II desert
   amber. Windows and doorways are cut back to dark glass. */
.about-lan__screen--wc { fill: rgba(242, 196, 107, 0.12); }
.about-lan__screen--d1 { fill: rgba(255, 107, 94, 0.12); }
.about-lan__screen--sc { fill: rgba(124, 196, 255, 0.13); }
.about-lan__screen--d2 { fill: rgba(245, 179, 95, 0.12); }

.about-lan__scene--wc { fill: #f2c46b; color: #f2c46b; }
.about-lan__scene--d1 { fill: #ff6b5e; color: #ff6b5e; }
.about-lan__scene--sc { fill: #7cc4ff; color: #7cc4ff; }
.about-lan__scene--d2 { fill: #f5b35f; color: #f5b35f; }

.about-lan__void {
    fill: #0f1a28;
}

/* Power and link lights: the section's blue */
.about-lan__led {
    fill: #8cc8ff;
}

.about-lan__cable {
    stroke-width: 1.8;
}

/* The MMO years: before World of Warcraft, so no characters. A faint
   CRT scanline and a cooler glow set it apart from the World of Warcraft years. */
.about-mmo {
    position: relative;
    padding: 0 0 28px 0;
    overflow: hidden;
    background:
        repeating-linear-gradient(0deg, rgba(255, 255, 255, 0.018) 0 1px, transparent 1px 3px),
        radial-gradient(50% 120% at 100% 100%, rgba(64, 196, 170, 0.1), transparent 70%),
        var(--color-bg-panel);
}

.about-mmo__grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 30px;
    max-width: calc(68ch + 88px);
    padding: 18px 44px 0;
}

.panel .about-mmo__chapter h3,
.panel .about-chapter__copy h3 {
    /* Level 3: chapter and story titles */
    margin: 0 0 12px;
    text-align: left;
    font-size: 1.45rem;
    font-weight: 700;
    line-height: 1.2;
    letter-spacing: -0.02em;
    color: var(--color-text-light);
}

/* The gold label over each level 3 title, led by the flourish's diamond */
.about-kicker,
.about-mmo__chapter p.about-kicker {
    display: block;
    margin: 0 0 9px;
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.16em;
    line-height: 1.3;
    text-transform: uppercase;
    color: var(--color-wow-gold);
}

.about-kicker::before {
    content: "";
    display: inline-block;
    width: 6px;
    height: 6px;
    margin: 0 11px 0 1px;
    border: 1px solid currentColor;
    vertical-align: 1px;
    transform: rotate(45deg);
}

/* Lines the owner still has to write */
.about-todo,
.about-chapter__copy p.about-todo {
    padding: 8px 12px;
    border: 1px dashed rgba(255, 209, 0, 0.35);
    border-radius: 10px;
    background: rgba(255, 209, 0, 0.04);
    font-size: 0.9rem;
    font-style: italic;
}

.about-todo span {
    margin-right: 4px;
    font-style: normal;
    font-weight: 700;
    color: var(--color-wow-gold);
}

/* --- The story: four chapters, a character beside each --- */
.about-story {
    padding: 0;
    overflow: hidden;
}

.about-chapter {
    --tint: var(--color-primary);
    position: relative;
    display: grid;
    grid-template-columns: minmax(0, 1fr) 300px;
    align-items: end;
    gap: 48px;
    /* Half the 300px column = 150px from the right edge: the same center
       line as the hero's emblem */
    padding: 0 0 0 44px;
}

.about-chapter + .about-chapter {
    border-top: 1px solid var(--color-border-light);
}

/* Each chapter's glow takes its character's class color */
/* A pillar of light down the art side: it fades in from nothing a little
   way past the text (no edge, so long weapons can reach into it) and
   brightens toward the panel edge, with a pool of light at the feet. It runs the full
   height, so the chapters' pillars join into one column that shifts color
   class by class, starting in gold under the era header. The era panels
   with drawings share it. --copy is the text's max width. */
.about-chapter,
.about-era-panel,
.about-story > .about-era {
    --pillar: max(332px, calc(100% - 44px - var(--copy, 62ch) - 56px));
}

.about-era-panel {
    --copy: 68ch;
}

.about-chapter::before,
.about-era-panel::before,
.about-story > .about-era::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    background:
        radial-gradient(170px 46px at calc(100% - 150px) 100%, color-mix(in srgb, var(--tint) 34%, transparent), transparent),
        linear-gradient(to right, transparent, color-mix(in srgb, var(--tint) 7%, transparent) 30%, color-mix(in srgb, var(--tint) 18%, transparent)) right / var(--pillar) 100% no-repeat;
}

/* Under the World of Warcraft years header the pillar takes chapter one's color
   (rogue) and fades in from the top, so it runs into chapter one with no
   seam. Change it with chapter one's tint. */
.about-story > .about-era {
    --tint: var(--class-rogue);
}

.about-story > .about-era::before {
    background: linear-gradient(to right, transparent, color-mix(in srgb, var(--tint) 7%, transparent) 30%, color-mix(in srgb, var(--tint) 18%, transparent)) right / var(--pillar) 100% no-repeat;
    -webkit-mask-image: linear-gradient(to bottom, transparent, #000);
    mask-image: linear-gradient(to bottom, transparent, #000);
}

.about-story > .about-era > * {
    position: relative;
    z-index: 1;
}

.about-era-panel {
    position: relative;
    overflow: hidden;
    --tint: #ffd100;
}

.about-mmo {
    --tint: #40c4aa;
}

.about-blizzard {
    --tint: #4fa9ff;
}

.about-era-art {
    z-index: 1;
}

.about-chapter--rogue   { --tint: var(--class-rogue); }
.about-chapter--warlock { --tint: var(--class-warlock); }
.about-chapter--paladin { --tint: var(--class-paladin); }
.about-chapter--druid   { --tint: var(--class-druid); }
.about-chapter--monk    { --tint: var(--class-monk); }
.about-chapter--mage    { --tint: var(--class-mage); }
.about-chapter--evoker  { --tint: var(--class-evoker); }

.about-chapter__copy {
    position: relative;
    z-index: 1;
    align-self: center;
    max-width: 62ch;
    padding: 44px 0;
}

.about-chapter__copy p:not(.about-kicker) {
    margin: 0 0 14px;
    font-size: 1rem;
    line-height: 1.7;
    color: var(--color-text-muted);
}

.about-chapter__copy p:last-child {
    margin-bottom: 0;
}

/* The character stands on the chapter's bottom edge, whole and at their
   race's true size (the width is set per image) */
.about-chapter__art {
    position: relative;
    z-index: 1;
    display: flex;
    align-items: flex-end;
    justify-content: center;
    height: 100%;
    min-height: 240px;
    margin: 0;
    padding-top: 28px;
}

.about-chapter__art img {
    display: block;
    flex: none;
    height: auto;
    max-width: none;
    /* Slide the image so the head, not the image's middle, is on the center line */
    transform: translateX(calc((0.5 - var(--head, 0.5)) * 100%));
}

/* --- The crew: everyone together along a floor --- */
.about-crew {
    position: relative;
    padding: 36px 0 0;
    overflow: hidden;
    text-align: center;
    /* Alliance on the left, Horde on the right, meeting in the middle */
    background:
        radial-gradient(38% 75% at 24% 100%, rgba(72, 146, 255, 0.24), transparent 70%),
        radial-gradient(38% 75% at 76% 100%, rgba(232, 52, 44, 0.2), transparent 70%),
        radial-gradient(40% 50% at 50% 0%, rgba(255, 209, 0, 0.07), transparent 70%),
        var(--color-bg-panel);
}

.about-crew__copy {
    max-width: 85ch;
    margin: 0 auto;
    padding: 0 20px;
}

.panel .about-crew__copy h2 {
    margin: 0 0 10px;
    text-align: center;
    font-size: clamp(1.4rem, 1rem + 1vw, 1.8rem);
    font-weight: 700;
    letter-spacing: -0.02em;
    color: var(--color-text-light);
}

.about-crew__copy p {
    margin: 0;
    font-size: 1rem;
    line-height: 1.6;
    color: var(--color-text-muted);
}

.about-crew__art {
    margin-top: 26px;
    padding: 0 12px;
    -webkit-mask-image: linear-gradient(to top, transparent 0, #000 10%), linear-gradient(to right, transparent 0, #000 4%, #000 96%, transparent 100%);
    -webkit-mask-composite: source-in;
    mask-image: linear-gradient(to top, transparent 0, #000 10%), linear-gradient(to right, transparent 0, #000 4%, #000 96%, transparent 100%);
    mask-composite: intersect;
}

/* Chapter and line-up art is a <picture> (sized copies); it lays out as if the img stood alone */
.about-chapter__art picture,
.about-crew__art picture {
    display: contents;
}

.about-crew__art img {
    display: block;
    width: 100%;
    max-width: 1340px;
    height: auto;
    margin: 0 auto;
}

/* These days: three short chapters, then a coffee */
.about-days {
    padding: 0 0 28px 0;
    background:
        radial-gradient(45% 110% at 100% 100%, rgba(255, 209, 0, 0.07), transparent 70%),
        var(--color-bg-panel);
}

.about-days__grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 20px 32px;
}

/* Same-page links inside the story copy ([text](#anchor) in about_paragraphs()) */
.about-inline-link {
    color: var(--color-text-light);
    text-decoration: underline;
    text-decoration-color: rgba(255, 209, 0, 0.55);
    text-underline-offset: 3px;
    transition: color 0.2s ease, text-decoration-color 0.2s ease;
}

.about-inline-link:hover {
    color: var(--color-wow-gold);
    text-decoration-color: var(--color-wow-gold);
}

/* --- Altaholic: the collection's opener ---
   A bigger, gold title between two mirrored flourishes, a class icon row
   (most played first, each linking to its section) and a band of every
   class color along the floor. */
.about-altaholic {
    position: relative;
    scroll-margin-top: 16px;
    overflow: hidden;
    padding: 44px 28px 46px;
    text-align: center;
    border-color: rgba(255, 209, 0, 0.22);
    background:
        radial-gradient(45% 70% at 50% 0%, rgba(255, 209, 0, 0.12), transparent 70%),
        radial-gradient(60% 40% at 50% 100%, rgba(255, 255, 255, 0.05), transparent 70%),
        var(--color-bg-panel);
}

/* Every class color, druids first, as a thin band with a soft glow above it */
.about-altaholic::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 3px;
    background: linear-gradient(90deg,
        var(--class-druid), var(--class-hunter), var(--class-paladin), var(--class-shaman),
        var(--class-mage), var(--class-priest), var(--class-warlock), var(--class-death-knight),
        var(--class-monk), var(--class-warrior), var(--class-rogue), var(--class-demon-hunter), var(--class-evoker));
    box-shadow: 0 -6px 22px rgba(255, 255, 255, 0.12);
}

.about-altaholic__title {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 18px;
    color: var(--color-wow-gold);
}

.about-altaholic__flourish {
    flex: 0 1 320px;
    min-width: 0;
    height: 24px;
    opacity: 0.6;
    /* the knot sits by the title and the rule fades outward */
    transform: scaleX(-1);
}

.about-altaholic__flourish--end {
    transform: none;
}

.panel .about-altaholic__title h2 {
    margin: 0;
    font-size: clamp(2.4rem, 1.7rem + 2.2vw, 3.4rem);
    font-weight: 800;
    line-height: 1;
    letter-spacing: -0.03em;
    color: var(--color-wow-gold);
    text-shadow: 0 2px 28px rgba(255, 209, 0, 0.28);
}

.about-altaholic__copy {
    max-width: 70ch;
    margin: 20px auto 0;
}

.about-altaholic__copy p {
    margin: 0 0 12px;
    font-size: 1.02rem;
    line-height: 1.7;
    color: var(--color-text-muted);
}

.about-altaholic__copy p:last-child {
    margin-bottom: 0;
}

.about-altaholic__classes {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 10px;
    margin: 28px 0 0;
    padding: 0;
    list-style: none;
}

.about-altaholic__classes a {
    display: block;
    border-radius: 11px;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.about-altaholic__classes img {
    display: block;
    width: 40px;
    height: 40px;
    border-radius: 10px;
    box-shadow: 0 0 0 1px color-mix(in srgb, var(--cc) 60%, transparent), 0 4px 14px color-mix(in srgb, var(--cc) 25%, transparent);
}

.about-altaholic__classes a:hover,
.about-altaholic__classes a:focus-visible {
    transform: translateY(-3px);
    box-shadow: 0 8px 22px color-mix(in srgb, var(--cc) 45%, transparent);
}

.about-crew__copy p + p,
.about-class .about-crew__copy p {
    margin-top: 8px;
}

@media (max-width: 560px) {
    .about-altaholic {
        padding: 34px 18px 38px;
    }
    .about-altaholic__title {
        gap: 10px;
    }
    .panel .about-altaholic__title h2 {
        font-size: 1.9rem;
        text-wrap: balance;
    }
    .about-altaholic__classes {
        gap: 8px;
        max-width: 290px;
        margin-inline: auto;
    }
    .about-altaholic__classes img {
        width: 34px;
        height: 34px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .about-altaholic__classes a {
        transition: none;
    }
}

/* --- Every class, level 80 and up ---
   One section per class, built like the regulars: the heading carries the
   class icon and color, and the line-up stands on the panel's floor. Big
   classes shrink to the panel; small ones are capped so nobody looms. */
.about-class {
    background:
        radial-gradient(40% 55% at 50% 0%, color-mix(in srgb, var(--cc) 14%, transparent), transparent 70%),
        radial-gradient(38% 75% at 24% 100%, rgba(72, 146, 255, 0.18), transparent 70%),
        radial-gradient(38% 75% at 76% 100%, rgba(232, 52, 44, 0.15), transparent 70%),
        var(--color-bg-panel);
}

.panel .about-crew__copy .about-class__title {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 12px;
    margin: 0;
    color: var(--cc);
}

.about-class__title img {
    flex: none;
    width: 32px;
    height: 32px;
    border-radius: 8px;
    box-shadow: 0 0 0 1px color-mix(in srgb, var(--cc) 50%, transparent), 0 4px 14px color-mix(in srgb, var(--cc) 30%, transparent);
}

.about-crew__art.about-class__art {
    margin-top: 22px;
}

.about-crew__art.about-class__art img {
    width: calc(var(--w) * 0.75px);
    max-width: 100%;
}

/* Phones: every line-up fits the width. Tap one to see it full size. */
@media (max-width: 700px) {
    .about-crew__art.about-class__art img {
        width: 100%;
    }
}

/* --- Line-ups open in a viewer (about/assets/about.js) --- */
.about-zoom {
    position: relative;
    display: block;
    width: 100%;
    padding: 0;
    border: 0;
    border-radius: 12px;
    background: none;
    color: inherit;
    font: inherit;
    cursor: zoom-in;
}

.about-zoom::after {
    content: "View everyone";
    position: absolute;
    /* top right: the art fades out along its floor */
    right: 14px;
    top: 4px;
    padding: 5px 11px;
    border: 1px solid rgba(255, 255, 255, 0.14);
    border-radius: var(--radius-full);
    background: rgba(6, 10, 16, 0.78);
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--color-text-light);
    opacity: 0;
    transform: translateY(4px);
    transition: opacity 0.2s ease, transform 0.2s ease;
    pointer-events: none;
}

.about-zoom:hover::after,
.about-zoom:focus-visible::after {
    opacity: 1;
    transform: none;
}

/* Desktop: the viewer is off (about.js disables the buttons) */
.about-zoom:disabled {
    cursor: default;
}

.about-zoom:disabled::after {
    display: none;
}

/* Touch screens have no hover, so the cue stays, quietly */
@media (hover: none) {
    .about-zoom::after {
        content: "Tap to see everyone";
        right: 4px;
        top: 0;
        padding: 3px 9px;
        transform: none;
        opacity: 0.8;
        font-size: 0.66rem;
    }
}

.about-viewer {
    /* the site's margin reset would pin it top left */
    margin: auto;
    width: min(96vw, 1400px);
    max-width: none;
    max-height: 92vh;
    padding: 0;
    border: 1px solid var(--color-border-light);
    border-radius: 16px;
    background: var(--color-bg-panel);
    color: var(--color-text-light);
    box-shadow: 0 24px 80px rgba(0, 0, 0, 0.6);
}

.about-viewer[open] {
    animation: about-viewer-in 0.22s cubic-bezier(0.2, 0.8, 0.2, 1);
}

@keyframes about-viewer-in {
    from { opacity: 0; transform: translateY(8px) scale(0.98); }
}

.about-viewer::backdrop {
    background: rgba(3, 6, 10, 0.82);
    backdrop-filter: blur(4px);
}

.about-viewer__bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 14px 14px 6px 22px;
}

.panel .about-viewer__title,
.about-viewer__title {
    margin: 0;
    font-size: 1.15rem;
    font-weight: 700;
    color: var(--color-text-light);
}

.about-viewer__close {
    display: grid;
    place-items: center;
    width: 40px;
    height: 40px;
    padding: 0;
    border: 1px solid var(--color-border-light);
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.04);
    color: var(--color-text-light);
    cursor: pointer;
}

.about-viewer__close:hover {
    background: rgba(255, 255, 255, 0.1);
}

.about-viewer__close svg {
    width: 18px;
    height: 18px;
}

.about-viewer__stage {
    display: flex;
    justify-content: safe center;
    overflow-x: auto;
    overflow-y: hidden;
    overscroll-behavior-x: contain;
    padding: 10px 22px 12px;
    scrollbar-width: thin;
    scrollbar-color: rgba(255, 209, 0, 0.35) transparent;
}

.about-viewer__img {
    display: block;
    flex: none;
    width: auto;
    height: auto;
    max-width: none;
    max-height: 66vh;
}

@media (max-width: 700px) {
    .about-viewer__img {
        max-height: 52vh;
    }
}

.about-viewer__hint {
    margin: 0;
    padding: 0 22px 16px;
    text-align: center;
    font-size: 0.78rem;
    color: var(--color-text-muted);
}

@media (prefers-reduced-motion: reduce) {
    .about-zoom::after {
        transition: none;
    }
    .about-viewer[open] {
        animation: none;
    }
}


/* --- Support --- */
.about-support {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    gap: 20px 48px;
    padding: 30px 36px;
    border-color: rgba(255, 209, 0, 0.22);
    background:
        radial-gradient(60% 140% at 100% 50%, rgba(255, 209, 0, 0.09), transparent 70%),
        var(--color-bg-panel);
}

.panel .about-support__copy h2 {
    margin: 0 0 8px;
    text-align: left;
    font-size: 1.35rem;
    font-weight: 700;
    color: var(--color-text-light);
}

.about-support__copy p {
    max-width: 64ch;
    margin: 0;
    font-size: 0.98rem;
    line-height: 1.6;
    color: var(--color-text-muted);
}

@media (max-width: 900px) {
    .about-era {
        padding: 22px 24px 0;
    }
    .about-me__body,
    .about-mmo__grid {
        padding: 12px 24px 0;
    }
    .about-mmo__grid,
    .about-days__grid {
        grid-template-columns: minmax(0, 1fr);
    }
    .about-era-panel {
        grid-template-columns: minmax(0, 1fr);
        gap: 0;
        padding: 0 0 24px;
    }
    .about-era-panel .about-era {
        padding-right: 24px;
    }
    .about-era-art {
        padding-top: 20px;
    }
    .about-era-art__svg,
    .about-era-art--crt .about-era-art__svg {
        width: 150px;
    }
    .about-era-art--lan .about-era-art__svg {
        width: 200px;
    }
    .about-era-art--arcade .about-era-art__svg {
        width: 110px;
    }

    .about-chapter {
        grid-template-columns: minmax(0, 1fr);
        gap: 0;
        padding: 0 24px;
    }
    .about-chapter__copy {
        padding: 32px 0 8px;
    }
    .about-chapter__art {
        min-height: 0;
        padding-top: 12px;
    }
    .about-chapter__art {
        min-height: 0;
    }
    .about-chapter__art img {
        max-width: 100%;
    }
    /* Stacked: the pillar becomes a pool of light under the art */
    .about-chapter::before,
    .about-era-panel::before {
        background: radial-gradient(70% 45% at 50% 100%, color-mix(in srgb, var(--tint) 22%, transparent), transparent 70%);
    }
    .about-story > .about-era::before {
        display: none;
    }
    .about-support {
        grid-template-columns: minmax(0, 1fr);
        padding: 26px 24px;
    }
}

@media (max-width: 560px) {
    .about-actions {
        justify-content: center;
    }
    /* The hero's and the support panel's buttons stack the same way */
    .about-actions {
        flex-direction: column;
    }
    .panel .about-chapter__copy h3,
    .panel .about-support__copy h2 {
        text-align: left;
    }
}

/* Below 1300px the chapter copy narrows so the widest groups (drawn at true
   scale) keep clear of it, side by side, never stacked */
/* The World of Warcraft years header uses the same --copy, so its pillar is the
   same width as chapter one's and runs into it with no seam */
@media (min-width: 901px) and (max-width: 1300px) {
    .about-chapter,
    .about-story > .about-era {
        --copy: 48ch;
    }
    .about-chapter__copy {
        max-width: 48ch;
    }
}

@media (min-width: 901px) and (max-width: 1023px) {
    .about-chapter,
    .about-story > .about-era {
        --copy: 40ch;
    }
    .about-chapter__copy {
        max-width: 40ch;
    }
}

/* Narrow two-column widths: the art shrinks around its alignment point, so
   the widest pairs stay inside the pillar and clear of the text */
@media (max-width: 1100px) and (min-width: 901px) {
    .about-chapter__art img {
        transform-origin: calc(var(--head, 0.5) * 100%) 100%;
        transform: translateX(calc((0.5 - var(--head, 0.5)) * 100%)) scale(min(0.8, var(--fit, 1)));
    }
}

/* Side by side, an image wider than its room shrinks around its alignment point to clear the
   copy (--fit from about.js; 2026-10-01, for the split chapters, Legion and Battle for Azeroth) */
@media (min-width: 1101px) {
    .about-chapter__art img {
        transform-origin: calc(var(--head, 0.5) * 100%) 100%;
        transform: translateX(calc((0.5 - var(--head, 0.5)) * 100%)) scale(var(--fit, 1));
    }
}

@media (max-width: 1200px) and (min-width: 901px) {
    .about-mmo__grid,
    .about-days__grid {
        grid-template-columns: minmax(0, 1fr);
    }
}

@media (prefers-reduced-motion: reduce) {
    .about-link svg {
        transition: none;
    }
    .about-crt__cursor {
        animation: none;
    }
}

/* Side by side (901px and up), once about.js has measured the era header:
   chapter one's pillar reaches up behind it, fading in from the header's
   top, and the header draws none. One layer instead of two meeting on a
   fractional pixel, which left a flickering dark hairline above the
   rogues (at 1026px, for one). Without JS the header keeps its own. */
@media (min-width: 901px) {
    .about-story.has-joined-pillar > .about-era::before {
        display: none;
    }
    .about-story.has-joined-pillar > .about-era + .about-chapter::before {
        top: calc(-1 * var(--era-h, 0px));
        -webkit-mask-image: linear-gradient(to bottom, transparent, #000 var(--era-h, 0px));
        mask-image: linear-gradient(to bottom, transparent, #000 var(--era-h, 0px));
    }
}

/* Stacked (900px and below): each chapter's characters still center on
   their alignment point (--head), but the slide is clamped to the room the
   image has in the column, so a group as wide as the column just centers
   and nobody is pushed past the edge (a Dwarf was cut off, a pair ran off
   the right at 390px) */
@media (max-width: 900px) {
    .about-chapter__art {
        container-type: inline-size;
    }
    .about-chapter__art img {
        transform: translateX(clamp(
            calc((100cqw - 100%) / -2),
            calc((0.5 - var(--head, 0.5)) * 100%),
            calc((100cqw - 100%) / 2)
        ));
    }
}

/* A chapter whose art would have to shrink below 75% beside its copy (about.js, 2026-10-01: the
   split chapters, Legion and Battle for Azeroth between 901 and about 1200px) steps the art down a
   row instead: full size, under the copy, its alignment point still on the emblem's line (150px
   in from the right edge; its reach right of that point is (1 - --head) x --w, at most 146px) and
   its feet in the same pillar of light */
@media (min-width: 901px) {
    .about-chapter.is-art-below {
        grid-template-columns: minmax(0, 1fr) 300px;
        grid-template-rows: auto auto;
        row-gap: 0;
    }
    .about-chapter.is-art-below .about-chapter__copy {
        padding-bottom: 8px;
    }
    .about-chapter.is-art-below .about-chapter__art {
        grid-column: 1 / -1;
        justify-content: flex-end;
        min-height: 0;
        padding-top: 0;
    }
    .about-chapter.is-art-below .about-chapter__art img {
        transform: none;
        margin-right: calc(150px - (1 - var(--head, 0.5)) * var(--w, 300) * 1px);
    }
}