:root {
    color-scheme: dark;
    --fabric-sumi: #15150f;
    --fabric-panel: #1f1f18;
    --fabric-deep: #0b0c09;
    --canvas: #d8c7a1;
    --canvas-shadow: #8c7b5d;
    --thread-bone: #f1e4c5;
    --thread-red: #dc5c49;
    --thread-red-dark: #872b24;
    --thread-gold: #caa75e;
    --thread-moss: #79826a;
    --paper: var(--fabric-sumi);
    --paper-light: var(--fabric-panel);
    --ink: var(--thread-bone);
    --ink-soft: #b9b09b;
    --rule: rgba(241, 228, 197, 0.17);
    --rule-strong: rgba(241, 228, 197, 0.38);
    --vermilion: var(--thread-red);
    --vermilion-dark: #ed715b;
    --brass: var(--thread-gold);
    --indigo: #84909c;
    --display-serif: "Avenir Next Condensed", "Arial Narrow", "Roboto Condensed", "Hiragino Kaku Gothic ProN", sans-serif;
    --serif: "Avenir Next Condensed", "Arial Narrow", "Roboto Condensed", "Yu Gothic", "Hiragino Kaku Gothic ProN", sans-serif;
    --sans: "Avenir Next", "Avenir Next Condensed", Inter, ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", "Hiragino Kaku Gothic ProN", "Yu Gothic", Meiryo, sans-serif;
    --zh: Inter, ui-sans-serif, -apple-system, BlinkMacSystemFont, "PingFang TC", "Noto Sans TC", "Microsoft JhengHei", sans-serif;
    --mono: "SFMono-Regular", "Roboto Mono", Consolas, "Liberation Mono", monospace;
    --page: min(1280px, calc(100vw - 64px));
    --page-half: min(640px, calc(50vw - 32px));
    --patch-shadow:
        0 1.2rem 2.8rem rgba(0, 0, 0, 0.3),
        0 0.18rem 0 rgba(255, 255, 255, 0.06) inset,
        0 -0.22rem 0 rgba(0, 0, 0, 0.2) inset;
    --stitch-line: repeating-linear-gradient(90deg, var(--thread-gold) 0 5px, transparent 5px 10px);
    --focus-stitch: #ffd77e;
}

@view-transition {
    navigation: auto;
}

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

html {
    background: var(--fabric-sumi);
    overflow-x: hidden;
    overflow-x: clip;
}

body {
    margin: 0;
    min-width: 320px;
    padding-top: 84px;
    overflow-x: hidden;
    color: var(--ink);
    background:
        radial-gradient(circle at 84% 6%, rgba(209, 75, 57, 0.1), transparent 34rem),
        repeating-linear-gradient(90deg, rgba(255, 255, 255, 0.018) 0 1px, transparent 1px 4px),
        repeating-linear-gradient(0deg, rgba(0, 0, 0, 0.055) 0 1px, transparent 1px 5px),
        var(--paper);
    font-family: var(--sans);
    font-size: 16px;
    line-height: 1.65;
    text-rendering: optimizeLegibility;
    -webkit-font-smoothing: antialiased;
}

::selection {
    color: var(--paper);
    background: var(--brass);
}

a {
    color: inherit;
}

a:focus-visible {
    outline: 2px dashed var(--focus-stitch);
    outline-offset: 5px;
}

svg {
    display: block;
    max-width: 100%;
}

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

.i18n-ja,
.only-ja {
    display: none !important;
}

html[data-lang="ja"] .i18n-en,
html[data-lang="ja"] .only-en {
    display: none !important;
}

html[data-lang="ja"] .i18n-ja,
html[data-lang="ja"] .only-ja {
    display: revert !important;
}

html[data-lang="zh-Hant"] .i18n-ja,
html[data-lang="zh-Hant"] .only-ja {
    display: none !important;
}

html[data-lang="ja"] body {
    letter-spacing: 0.015em;
}

html[data-lang="zh-Hant"] body {
    font-family: var(--zh);
    letter-spacing: 0.015em;
}

html[data-lang="th"] {
    --sans: Tahoma, "Leelawadee UI", "Noto Sans Thai", sans-serif;
    --serif: Tahoma, "Leelawadee UI", "Noto Sans Thai", sans-serif;
}

html[data-lang="vi"] {
    --sans: "Helvetica Neue", Arial, "Noto Sans", sans-serif;
    --serif: "Iowan Old Style", "Palatino Linotype", Georgia, "Noto Serif", serif;
}

html[data-lang="my"] {
    --sans: "Myanmar Sangam MN", "Noto Sans Myanmar", Padauk, sans-serif;
    --serif: "Myanmar Sangam MN", "Noto Sans Myanmar", Padauk, sans-serif;
}

html[data-lang="km"] {
    --sans: "Khmer Sangam MN", "Noto Sans Khmer", "Khmer UI", sans-serif;
    --serif: "Khmer Sangam MN", "Noto Sans Khmer", "Khmer UI", sans-serif;
}

html[data-lang="lo"] {
    --sans: "Lao Sangam MN", "Noto Sans Lao", "Phetsarath OT", sans-serif;
    --serif: "Lao Sangam MN", "Noto Sans Lao", "Phetsarath OT", sans-serif;
}

.skip-link {
    position: fixed;
    left: 1rem;
    top: 1rem;
    z-index: 100;
    padding: 0.65rem 0.9rem;
    background: var(--ink);
    color: var(--paper-light);
    text-decoration: none;
    transform: translateY(-180%);
}

.skip-link:focus {
    transform: translateY(0);
}

.site-header {
    position: fixed;
    top: 0;
    z-index: 40;
    width: 100%;
    min-height: 84px;
    margin-inline: auto;
    padding-inline: max(2rem, calc((100vw - 1280px) / 2));
    display: grid;
    grid-template-columns: minmax(170px, 1fr) auto minmax(170px, 1fr);
    align-items: center;
    gap: 2rem;
    border-bottom: 1px dashed rgba(202, 167, 94, 0.72);
    background:
        repeating-linear-gradient(90deg, rgba(255, 255, 255, 0.018) 0 1px, transparent 1px 4px),
        rgba(21, 21, 15, 0.94);
    box-shadow: 0 4px 0 rgba(0, 0, 0, 0.24), 0 1px 0 rgba(241, 228, 197, 0.12) inset;
    backdrop-filter: blur(14px);
}

.site-mark,
.site-nav a,
.header-tools a {
    text-decoration: none;
}

.site-mark {
    justify-self: start;
    min-height: 2.75rem;
    display: inline-flex;
    align-items: center;
    gap: 0.55rem;
    font-family: var(--mono);
    font-size: 0.76rem;
    font-weight: 700;
    letter-spacing: 0.13em;
    padding: 0.4rem 0.7rem;
    border: 1px dashed rgba(202, 167, 94, 0.62);
    border-radius: 0.35rem;
    background: rgba(11, 12, 9, 0.62);
    box-shadow: 0 0 0 2px rgba(11, 12, 9, 0.72), 0 0 0 3px rgba(241, 228, 197, 0.12);
}

.site-mark span:last-child {
    color: var(--vermilion);
}

.site-nav {
    display: flex;
    align-items: center;
    gap: clamp(1.2rem, 3vw, 2.8rem);
}

.site-nav a,
.header-tools a {
    position: relative;
    font-size: 0.71rem;
    font-weight: 650;
    letter-spacing: 0.12em;
    text-transform: uppercase;
}

.site-nav a::after,
.language-link::after {
    content: "";
    position: absolute;
    left: 0;
    right: 100%;
    bottom: -0.35rem;
    height: 1px;
    background: currentColor;
    transition: right 180ms ease;
}

.site-nav a:hover::after,
.site-nav a:focus-visible::after,
.site-nav a[aria-current="location"]::after,
.language-link:hover::after,
.language-link:focus-visible::after {
    right: 0;
}

.site-nav a[aria-current="location"] {
    color: var(--vermilion-dark);
}

#archive,
#history,
#records,
#method {
    scroll-margin-top: 6.5rem;
}

.header-tools {
    justify-self: end;
    display: flex;
    align-items: center;
    gap: 1.35rem;
}

.language-menu {
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: 0.85rem;
}

.language-menu .language-link[aria-current="page"] {
    color: var(--ink);
}

.language-menu .language-link[aria-current="page"]::after {
    right: 0;
    background: var(--vermilion);
}

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

.language-picker {
    position: relative;
    color: var(--ink-soft);
}

.language-picker summary {
    min-height: 2.75rem;
    display: inline-grid;
    grid-template-columns: auto auto auto;
    align-items: center;
    gap: 0.6rem;
    color: inherit;
    cursor: pointer;
    list-style: none;
    user-select: none;
}

.language-picker summary::-webkit-details-marker {
    display: none;
}

.language-picker summary::after {
    width: 0.42rem;
    height: 0.42rem;
    border-right: 1px solid var(--vermilion);
    border-bottom: 1px solid var(--vermilion);
    content: "";
    rotate: 45deg;
    translate: 0 -0.14rem;
    transition: rotate 180ms ease, translate 180ms ease;
}

.language-picker[open] summary::after {
    rotate: 225deg;
    translate: 0 0.14rem;
}

.language-picker__label {
    font-family: var(--mono);
    font-size: 0.625rem;
    letter-spacing: 0.1em;
    text-transform: uppercase;
}

.language-picker summary strong {
    color: var(--ink);
    font-family: var(--mono);
    font-size: 0.64rem;
    letter-spacing: 0.12em;
}

.language-picker summary:focus-visible,
.language-picker__link:focus-visible {
    outline: 2px solid var(--vermilion);
    outline-offset: 4px;
}

.language-picker__panel {
    position: absolute;
    top: calc(100% + 0.65rem);
    right: 0;
    z-index: 30;
    width: min(24rem, calc(100vw - 2rem));
    padding: 0.9rem;
    border: 1px dashed var(--brass);
    border-top: 3px solid var(--vermilion);
    border-radius: 0.45rem;
    background:
        repeating-linear-gradient(0deg, rgba(255, 255, 255, 0.018) 0 1px, transparent 1px 4px),
        #181812;
    box-shadow: 0 1.25rem 3.2rem rgba(0, 0, 0, 0.42);
}

.language-picker__note {
    margin: 0 0 0.7rem;
    padding-bottom: 0.65rem;
    border-bottom: 1px solid var(--rule);
    color: var(--ink-soft);
    font-family: var(--mono);
    font-size: 0.625rem;
    letter-spacing: 0.07em;
    line-height: 1.5;
}

.language-picker__links {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.header-tools .language-picker__link {
    min-height: 2.55rem;
    display: flex;
    align-items: center;
    padding: 0.55rem 0.65rem;
    border-bottom: 1px solid var(--rule);
    color: var(--ink-soft);
    font-family: var(--sans);
    font-size: 0.68rem;
    font-weight: 550;
    letter-spacing: 0.01em;
    line-height: 1.35;
    text-decoration: none;
    text-transform: none;
    transition: color 160ms ease, background-color 160ms ease;
}

.header-tools .language-picker__link:nth-last-child(-n + 2) {
    border-bottom: 0;
}

.header-tools .language-picker__link:hover {
    color: var(--ink);
    background: rgba(238, 232, 220, 0.04);
}

.header-tools .language-picker__link[aria-current="page"] {
    color: var(--vermilion-dark);
}

.header-tools .language-picker__link[aria-current="page"]::before {
    margin-right: 0.45rem;
    color: var(--vermilion);
    content: "■";
    font-size: 0.42rem;
}

.home-link {
    min-height: 2.75rem;
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    padding-left: 1.35rem;
    border-left: 1px solid var(--rule);
}

main,
.site-footer {
    width: var(--page);
    margin-inline: auto;
}

main {
    position: relative;
    z-index: 0;
    isolation: isolate;
}

.site-footer {
    position: relative;
    z-index: 2;
}

.hero {
    position: relative;
    min-height: calc(100svh - 84px);
    display: grid;
    grid-template-columns: repeat(12, minmax(0, 1fr));
    grid-template-rows: 1fr auto;
    column-gap: clamp(1rem, 2.4vw, 2rem);
    align-items: center;
    padding: clamp(3.5rem, 8vh, 7.5rem) 0 2rem;
    border-bottom: 1px dashed rgba(202, 167, 94, 0.62);
    isolation: isolate;
}

.hero::before {
    position: absolute;
    inset: clamp(1.25rem, 3vw, 2.25rem) 0 1.25rem;
    z-index: -1;
    border: 1px solid rgba(241, 228, 197, 0.12);
    border-radius: clamp(0.75rem, 1.6vw, 1.35rem);
    content: "";
    background:
        linear-gradient(110deg, rgba(241, 228, 197, 0.035), transparent 32%),
        rgba(11, 12, 9, 0.24);
    box-shadow: 0 0 0 5px rgba(11, 12, 9, 0.22) inset;
    pointer-events: none;
}

.hero > *,
.section-grid > * {
    min-width: 0;
}

.hero > :not(.route-study),
.section-grid > * {
    position: relative;
    z-index: 2;
}

.hero-edition {
    grid-column: 1 / 3;
    align-self: start;
    display: flex;
    flex-direction: column;
    gap: 0.2rem;
    padding-top: 0.4rem;
}

.edition-number {
    font-family: var(--mono);
    color: var(--vermilion);
    font-size: clamp(1.35rem, 2.4vw, 2.1rem);
    line-height: 1;
    letter-spacing: -0.05em;
}

.edition-copy,
.eyebrow,
.section-kicker,
.discipline-code {
    font-family: var(--mono);
    font-size: 0.67rem;
    letter-spacing: 0.12em;
    border-top: 1px dashed rgba(202, 167, 94, 0.48);
    text-transform: uppercase;
}

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

.hero-copy {
    grid-column: 3 / 9;
    align-self: center;
    padding-top: clamp(1rem, 7vh, 4rem);
}

.eyebrow {
    margin: 0 0 clamp(1.2rem, 2.8vw, 2.2rem);
    color: var(--vermilion-dark);
}

h1,
h2,
h3,
p {
    overflow-wrap: break-word;
}

h1 {
    margin: 0;
    font-family: var(--display-serif);
    font-size: clamp(3.35rem, 8vw, 8rem);
    font-weight: 850;
    line-height: 0.82;
    letter-spacing: -0.045em;
    text-transform: uppercase;
    text-shadow: 0 2px 0 #090a07, 0 4px 12px rgba(0, 0, 0, 0.42);
}

h1 > span {
    display: block;
}

h1 > span:nth-child(2) {
    margin-left: 0.48em;
    color: var(--vermilion);
    font-style: normal;
    text-shadow: 0 1px 0 #f3a493, 0 3px 0 var(--thread-red-dark), 0 7px 14px rgba(0, 0, 0, 0.46);
}

h1 small {
    display: block;
    margin: 1.4rem 0 0 0.1em;
    font-family: var(--mono);
    font-size: clamp(0.68rem, 1vw, 0.82rem);
    font-style: normal;
    font-weight: 600;
    line-height: 1.2;
    letter-spacing: 0.2em;
    text-transform: uppercase;
}

.hero-lead {
    max-width: 54ch;
    margin: clamp(2rem, 4vw, 3.5rem) 0 0;
    color: var(--ink-soft);
    font-family: var(--sans);
    font-size: clamp(1.05rem, 1.55vw, 1.35rem);
    line-height: 1.6;
}

.hero-patch {
    --route-detail-opacity: 1;
    --route-offset: 0;
    --route-stroke: var(--thread-red);
    position: relative;
    grid-column: 9 / 13;
    grid-row: 1;
    width: min(100%, 25rem);
    justify-self: end;
    align-self: center;
    rotate: 1.5deg;
    transform: translateZ(0);
}

.hero-patch::before,
.hero-patch::after {
    position: absolute;
    content: "";
    pointer-events: none;
}

.hero-patch::before {
    inset: 11% 7% -2%;
    z-index: -1;
    border-radius: 50%;
    background: rgba(0, 0, 0, 0.7);
    filter: blur(1.35rem);
}

.hero-patch::after {
    inset: 7% 9% 12%;
    z-index: 3;
    border-radius: 46%;
    background: linear-gradient(116deg, transparent 28%, rgba(255, 255, 255, 0.14) 40%, transparent 52%);
    mix-blend-mode: screen;
    opacity: 0.28;
}

.hero-patch__rim {
    position: relative;
    width: 100%;
    aspect-ratio: 1.04;
    display: grid;
    justify-items: center;
    align-items: center;
    padding: clamp(1.25rem, 2.2vw, 2rem) clamp(1rem, 1.8vw, 1.6rem) clamp(2.8rem, 4vw, 3.6rem);
    overflow: hidden;
    border: clamp(0.42rem, 0.7vw, 0.62rem) solid var(--thread-red-dark);
    border-radius: 48% 48% 42% 42% / 46% 46% 54% 54%;
    background:
        radial-gradient(circle at 50% 43%, rgba(220, 92, 73, 0.38) 0 25%, transparent 25.5%),
        repeating-linear-gradient(96deg, rgba(255, 255, 255, 0.035) 0 1px, rgba(0, 0, 0, 0.035) 1px 4px),
        #27261e;
    box-shadow:
        0 0 0 2px var(--thread-bone),
        0 0 0 6px var(--thread-gold),
        0 0 0 9px #594925,
        var(--patch-shadow);
}

.hero-patch__rim::before {
    position: absolute;
    inset: 0.55rem;
    z-index: 2;
    border: 1px dashed rgba(241, 228, 197, 0.48);
    border-radius: inherit;
    content: "";
    pointer-events: none;
}

.hero-patch__route {
    position: relative;
    z-index: 1;
    grid-area: 1 / 1;
    width: 100%;
    align-self: center;
}

.hero-patch__route-svg {
    display: block;
    width: 100%;
    height: auto;
    overflow: visible;
    filter: drop-shadow(0 0.42rem 0.22rem rgba(0, 0, 0, 0.68));
}

.hero-patch__route .route-line--field {
    stroke-width: 16;
    opacity: 0.1;
}

.hero-patch__route .route-line--seam {
    stroke-width: 11;
}

.hero-patch__route .route-line--base {
    stroke: var(--thread-bone);
    stroke-width: 7;
    opacity: 0.74;
}

.hero-patch__route .route-line--draw {
    stroke-width: 4.7;
}

.hero-patch__route .route-line--stitches {
    stroke: #ffdca0;
    stroke-width: 2.35;
}

.hero-patch__route-mask {
    fill: none;
    stroke: #fff;
    stroke-width: 15;
    stroke-linecap: round;
    stroke-linejoin: round;
    stroke-dasharray: none;
    stroke-dashoffset: 0;
    vector-effect: non-scaling-stroke;
}

.hero-patch__label {
    position: relative;
    z-index: 4;
    grid-area: 1 / 1;
    align-self: end;
    min-width: 68%;
    display: grid;
    gap: 0.25rem;
    justify-items: center;
    padding: 0.65rem 1rem 0.58rem;
    border: 0.2rem solid var(--thread-red-dark);
    border-radius: 0.4rem;
    background:
        repeating-linear-gradient(100deg, rgba(255, 255, 255, 0.12) 0 1px, rgba(0, 0, 0, 0.035) 1px 4px),
        var(--canvas);
    color: #17150f;
    box-shadow:
        0 0 0 1px var(--thread-bone),
        0 0 0 3px var(--thread-red-dark),
        0 0.55rem 1.1rem rgba(0, 0, 0, 0.42);
    translate: 0 35%;
}

.hero-patch__name,
.hero-patch__series {
    display: block;
    font-family: var(--mono);
    font-weight: 900;
    line-height: 1;
    letter-spacing: 0.14em;
    text-align: center;
}

.hero-patch__name {
    font-size: clamp(0.68rem, 1.15vw, 0.94rem);
}

.hero-patch__series {
    color: #554936;
    font-size: clamp(0.48rem, 0.72vw, 0.62rem);
}

html[data-lang="ja"] .hero-lead {
    font-family: var(--sans);
    font-size: clamp(1rem, 1.35vw, 1.17rem);
    line-height: 2;
}

.route-study {
    position: fixed;
    z-index: 0;
    top: max(84px, 8svh);
    right: 0;
    bottom: 0;
    left: 0;
    width: auto;
    margin: 0;
    pointer-events: none;
    overflow: hidden;
    opacity: 0.42;
    contain: layout paint style;
}

.route-study__maps {
    position: relative;
    width: 100%;
    height: 100%;
}

.route-plate {
    --route-offset: 1;
    --route-marker-opacity: 0;
    --route-detail-opacity: 0;
    --route-finish-opacity: 0;
    --route-visibility: 0;
    --route-x: 24%;
    --route-lift: 0svh;
    --route-stroke: var(--vermilion);
    position: absolute;
    display: block;
    top: 50%;
    left: var(--route-x);
    width: clamp(28rem, 52vw, 52rem);
    margin: 0;
    overflow: visible;
    opacity: var(--route-visibility);
    transform: translate(-50%, calc(-50% + var(--route-lift)));
    transform-origin: center;
    visibility: hidden;
    filter: drop-shadow(0 0.38rem 0.28rem rgba(0, 0, 0, 0.62));
}

.route-plate[data-route-side="right"] {
    --route-x: 76%;
}

.route-plate.is-route-present {
    visibility: visible;
}

.route-plate.is-route-active {
    will-change: auto;
}

.route-plate[data-route-tone="1"] {
    --route-stroke: var(--brass);
}

.route-plate[data-route-tone="2"] {
    --route-stroke: var(--indigo);
}

.route-plate__canvas {
    display: block;
    width: 100%;
    height: auto;
    aspect-ratio: 533 / 400;
    overflow: visible;
}

.route-line {
    fill: none;
    stroke-linecap: round;
    stroke-linejoin: round;
    stroke-dasharray: 1;
    stroke-dashoffset: var(--route-offset);
    vector-effect: non-scaling-stroke;
}

.route-line--base {
    stroke: color-mix(in srgb, var(--route-stroke) 46%, var(--thread-bone));
    stroke-width: 5.4;
    opacity: 0.5;
}

.route-line--field {
    stroke: var(--route-stroke);
    stroke-width: 13;
    opacity: 0.07;
}

.route-line--seam {
    stroke: #090a07;
    stroke-width: 9;
    opacity: 0.82;
}

.route-line--puncture {
    stroke: rgba(2, 3, 2, 0.9);
    stroke-width: 1.6;
    stroke-linecap: round;
    opacity: var(--route-detail-opacity);
}

.route-line--draw {
    stroke: var(--route-stroke);
    stroke-width: 4.25;
}

.route-line--draw {
    filter:
        drop-shadow(0 -0.7px 0 color-mix(in srgb, var(--route-stroke) 50%, white))
        drop-shadow(0 1.2px 0 color-mix(in srgb, var(--route-stroke) 56%, black));
}

.route-line--stitches {
    stroke: color-mix(in srgb, var(--route-stroke) 68%, var(--thread-bone));
    stroke-width: 2.2;
    stroke-linecap: round;
    opacity: var(--route-detail-opacity);
}

.route-line--highlight {
    stroke: rgba(255, 246, 222, 0.74);
    stroke-width: 0.72;
    stroke-linecap: round;
    opacity: var(--route-detail-opacity);
}

.route-stitch-mask {
    fill: none;
    stroke: #fff;
    stroke-width: 14;
    stroke-linecap: round;
    stroke-linejoin: round;
    stroke-dasharray: 1;
    stroke-dashoffset: var(--route-offset);
    vector-effect: non-scaling-stroke;
}

.route-annotations {
    opacity: var(--route-detail-opacity);
}

.route-direction,
.route-terminal__line,
.route-terminal__frame {
    fill: none;
    vector-effect: non-scaling-stroke;
}

.route-direction {
    stroke: var(--route-stroke);
    stroke-width: 1.3;
    stroke-linecap: square;
    stroke-linejoin: miter;
}

.route-terminal__frame {
    stroke: var(--ink);
    stroke-width: 1;
}

.route-terminal__point {
    fill: var(--route-stroke);
}

.route-terminal--finish {
    opacity: var(--route-finish-opacity);
}

.route-terminal__line {
    stroke: var(--ink);
    stroke-width: 1.1;
}

.route-index {
    position: absolute;
    z-index: 0;
    inset: 0;
    pointer-events: none;
    contain: layout style;
}

/* The cycling route register is decorative in the textile edition. Keep its
   state hooks for the course sequence, but do not let it sit over the header. */
.site-header > .route-index {
    display: none;
}

.route-index__entry {
    --route-label-visibility: 0;
    position: absolute;
    top: 50%;
    left: clamp(11.5rem, 18vw, 17rem);
    width: min(10.5rem, 15vw);
    padding-top: 0.45rem;
    opacity: var(--route-label-visibility);
    text-align: left;
    transform: translateY(-50%);
    visibility: hidden;
}

.route-index__entry::before {
    position: absolute;
    top: 0;
    width: clamp(2.5rem, 7vw, 5rem);
    border-top: 1px solid var(--route-stroke, var(--vermilion));
    content: "";
}

.route-index__entry[data-route-side="left"] {
    left: clamp(11.5rem, 18vw, 17rem);
}

.route-index__entry[data-route-side="right"] {
    right: auto;
    left: clamp(11.5rem, 18vw, 17rem);
    text-align: left;
}

.route-index__entry[data-route-side="left"]::before {
    left: 0;
}

.route-index__entry[data-route-side="right"]::before {
    right: auto;
    left: 0;
}

.route-index__entry[data-route-tone="1"] {
    --route-stroke: var(--brass);
}

.route-index__entry[data-route-tone="2"] {
    --route-stroke: var(--indigo);
}

.route-index__entry.is-route-label-present {
    visibility: visible;
}

.route-index__number,
.route-index__alternate {
    display: block;
    font-family: var(--mono);
    line-height: 1.2;
    text-transform: uppercase;
}

.route-index__number {
    color: var(--route-stroke, var(--vermilion));
    font-size: 0.48rem;
    font-weight: 700;
    letter-spacing: 0.14em;
}

.route-index__name {
    display: block;
    margin-top: 0.15rem;
    color: var(--ink);
    font-family: var(--serif);
    font-size: 0.82rem;
    line-height: 1.1;
}

html[data-lang="ja"] .route-index__name {
    font-family: var(--sans);
    font-weight: 550;
}

.route-index__alternate {
    margin-top: 0.25rem;
    color: var(--ink-soft);
    font-size: 0.45rem;
    letter-spacing: 0.12em;
}

.js .route-plate {
    opacity: var(--route-visibility);
}

.js .route-line--draw,
.js .route-stitch-mask {
    stroke-dashoffset: var(--route-offset);
}

.js .route-study.is-route-ready .route-plate,
.js .route-study.is-route-static .route-plate {
    transform: translate(-50%, calc(-50% + var(--route-lift)));
}

.route-marker {
    opacity: var(--route-marker-opacity);
    pointer-events: none;
}

.route-marker__heading {
    fill: var(--route-stroke);
    stroke: var(--thread-bone);
    stroke-width: 1.3;
    stroke-linejoin: round;
    paint-order: stroke fill;
    filter: drop-shadow(0 1.4px 0 #15140f) drop-shadow(0 2.5px 2px rgba(0, 0, 0, 0.64));
    vector-effect: non-scaling-stroke;
}

.js .route-study.is-route-static .route-line--draw,
.js .route-study.is-route-static .route-stitch-mask {
    stroke-dashoffset: 0;
}

.js .route-study.is-route-static .route-line {
    stroke-dashoffset: 0;
}

.js .route-study.is-route-static .route-plate {
    display: none;
    opacity: 0;
    visibility: hidden;
}

.js .route-study.is-route-static {
    opacity: 0.62;
}

.js .route-study.is-route-static .route-plate[data-route-static-visible] {
    display: block;
    opacity: 0.24;
    visibility: visible;
}

.js .route-study.is-route-static .route-marker {
    display: none;
}

.js .route-study.is-route-static .route-annotations,
.js .route-study.is-route-static .route-terminal--finish {
    opacity: 0.55;
}

.js .route-index.is-route-static .route-index__entry {
    display: none;
}

.js .route-index.is-route-static .route-index__entry[data-route-static-label] {
    display: block;
    opacity: 0.72;
    visibility: visible;
}

.hero-register {
    grid-column: 1 / 13;
    grid-row: 2;
    margin: clamp(3rem, 8vh, 7rem) 0 0;
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    padding: 0.4rem 0.75rem 0.7rem;
    border: 1px dashed rgba(202, 167, 94, 0.58);
    border-radius: 0.55rem;
    background:
        repeating-linear-gradient(0deg, rgba(255, 255, 255, 0.018) 0 1px, transparent 1px 4px),
        rgba(11, 12, 9, 0.64);
    box-shadow: var(--patch-shadow);
}

.hero-register div {
    padding: 0.75rem 1.25rem 0.2rem 0;
}

.hero-register div + div {
    padding-left: 1.25rem;
    border-left: 1px solid var(--rule);
}

.hero-register dt {
    color: var(--ink-soft);
    font-family: var(--mono);
    font-size: 0.65rem;
    letter-spacing: 0.15em;
    text-transform: uppercase;
}

.hero-register dd {
    margin: 0.3rem 0 0;
    font-family: var(--sans);
    font-weight: 700;
    font-size: clamp(1rem, 1.5vw, 1.22rem);
}

.section-grid {
    display: grid;
    grid-template-columns: repeat(12, minmax(0, 1fr));
    column-gap: clamp(1rem, 2.4vw, 2rem);
    padding: clamp(5rem, 11vw, 10rem) 0;
    border-bottom: 1px dashed rgba(202, 167, 94, 0.5);
}

.section-index {
    grid-column: 1 / 2;
    font-family: var(--mono);
    font-size: 0.72rem;
    color: var(--vermilion);
    font-weight: 800;
    letter-spacing: 0.12em;
}

.section-heading {
    grid-column: 2 / 7;
}

.section-kicker {
    margin: 0 0 1.3rem;
    color: var(--vermilion-dark);
}

.section-heading h2 {
    margin: 0;
    font-family: var(--serif);
    font-size: clamp(2.35rem, 4.8vw, 5rem);
    font-weight: 800;
    line-height: 0.94;
    letter-spacing: -0.035em;
    text-transform: uppercase;
}

html[data-lang="ja"] .section-heading h2 {
    font-size: clamp(2rem, 4.2vw, 4.1rem);
    line-height: 1.35;
}

.section-heading > p.i18n {
    max-width: 52ch;
    margin: 2rem 0 0;
    color: var(--ink-soft);
}

.discipline-list {
    grid-column: 8 / 13;
    align-self: end;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: clamp(0.8rem, 1.4vw, 1.25rem);
    border-top: 0;
}

.discipline {
    position: relative;
    display: grid;
    grid-template-columns: 1fr;
    gap: 0.6rem;
    padding: clamp(1.2rem, 2vw, 1.7rem);
    border: 0.38rem solid #6f231d;
    border-radius: 1.15rem 0.85rem 1.05rem 0.9rem;
    background:
        repeating-linear-gradient(100deg, rgba(255, 255, 255, 0.1) 0 1px, rgba(0, 0, 0, 0.025) 1px 4px),
        var(--canvas);
    color: #17150f;
    box-shadow:
        0 0 0 2px var(--thread-bone),
        0 0 0 4px var(--thread-red-dark),
        var(--patch-shadow);
    rotate: -0.7deg;
}

.discipline:nth-child(2) {
    border-color: #776332;
    box-shadow:
        0 0 0 2px var(--thread-bone),
        0 0 0 4px #635228,
        var(--patch-shadow);
    rotate: 0.8deg;
}

.discipline::after {
    position: absolute;
    inset: 0.32rem;
    border: 1px dashed rgba(63, 45, 27, 0.55);
    border-radius: 0.55rem;
    content: "";
    pointer-events: none;
}

.discipline-code {
    grid-row: auto;
    margin: 0;
    color: var(--thread-red-dark);
    font-weight: 850;
}

.discipline h3,
.method-list h3 {
    margin: 0;
    font-family: var(--serif);
    font-size: clamp(1.25rem, 2vw, 1.8rem);
    font-weight: 850;
    line-height: 1.25;
}

.discipline > p.i18n {
    margin: 0.5rem 0 0;
    color: #514936;
    font-size: 0.9rem;
}

.playing-history {
    position: relative;
    grid-column: auto;
    min-width: 0;
    margin-top: 0;
    border-top: 0;
    isolation: isolate;
}

.playing-history::before {
    position: absolute;
    top: clamp(8rem, 14vw, 13rem);
    right: calc((100vw - var(--page)) / -2);
    z-index: -1;
    width: min(58vw, 54rem);
    height: 3px;
    content: "";
    background: repeating-linear-gradient(90deg, transparent 0 7px, rgba(202, 167, 94, 0.58) 7px 13px);
}

.playing-history__header {
    grid-column: 2 / 13;
    display: grid;
    grid-template-columns: minmax(17rem, 1.05fr) minmax(17rem, 0.72fr);
    gap: clamp(2rem, 5vw, 5rem);
    align-items: end;
    padding: 0 0 clamp(2.75rem, 5vw, 4.5rem);
    border-bottom: 1px dashed rgba(202, 167, 94, 0.55);
}

.playing-history__header h2 {
    max-width: 12ch;
    margin: 0;
    font-family: var(--serif);
    font-size: clamp(2rem, 4vw, 4rem);
    font-weight: 850;
    line-height: 0.98;
    letter-spacing: -0.04em;
}

html[data-lang="ja"] .playing-history__header h2 {
    word-break: keep-all;
}

.playing-history__introduction {
    position: relative;
    max-width: 38ch;
    padding-left: clamp(1rem, 2vw, 1.75rem);
    color: var(--ink-soft);
    font-family: var(--sans);
    font-size: clamp(1rem, 1.35vw, 1.25rem);
    line-height: 1.55;
}

.playing-history__introduction::before {
    position: absolute;
    top: 0.25em;
    bottom: 0.25em;
    left: 0;
    width: 4px;
    content: "";
    background: repeating-linear-gradient(to bottom, var(--vermilion) 0 5px, var(--brass) 5px 10px);
}

.playing-history__introduction p {
    margin: 0;
}

.playing-history__timeline {
    position: relative;
    grid-column: 2 / 13;
    min-width: 0;
    counter-reset: season-chapter;
}

.playing-history__timeline::before {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 50%;
    width: 7px;
    content: "";
    border-radius: 999px;
    background:
        repeating-linear-gradient(to bottom, var(--thread-bone) 0 4px, transparent 4px 9px),
        linear-gradient(to bottom, transparent, var(--thread-gold) 8%, var(--thread-red) 88%, transparent);
    box-shadow: 0 0 0 2px rgba(11, 12, 9, 0.84), 1px 0 0 rgba(255, 255, 255, 0.1);
}

.playing-season {
    position: relative;
    display: grid;
    grid-template-columns: minmax(14rem, 0.76fr) clamp(4.5rem, 7vw, 6.5rem) minmax(0, 1.38fr);
    gap: clamp(1.5rem, 3vw, 3.25rem);
    align-items: center;
    min-height: min(66rem, 92svh);
    padding: clamp(5rem, 9vw, 8.75rem) 0;
    border-bottom: 0;
    counter-increment: season-chapter;
    isolation: isolate;
}

.playing-season--photos-left {
    grid-template-columns: minmax(0, 1.38fr) clamp(4.5rem, 7vw, 6.5rem) minmax(14rem, 0.76fr);
}

.playing-season::after {
    position: absolute;
    top: 50%;
    left: 50%;
    z-index: -1;
    max-width: 72vw;
    content: attr(data-focus);
    color: rgba(241, 228, 197, 0.034);
    font-family: var(--display-serif);
    font-size: clamp(5.5rem, 13vw, 12.5rem);
    font-style: normal;
    font-weight: 900;
    line-height: 0.72;
    letter-spacing: -0.075em;
    text-align: center;
    white-space: nowrap;
    transform: translate(-50%, -50%);
    pointer-events: none;
}

.playing-season::before {
    position: absolute;
    top: calc(50% - 0.5px);
    left: 50%;
    width: clamp(2rem, 4vw, 4rem);
    height: 3px;
    content: "";
    background: repeating-linear-gradient(90deg, var(--brass) 0 5px, transparent 5px 10px);
    transform: translateX(-50%);
}

.playing-season__marker {
    position: sticky;
    top: calc(50vh - 3.5rem);
    z-index: 3;
    grid-column: 2;
    grid-row: 1;
    display: grid;
    gap: 0.5rem;
    justify-items: center;
    align-self: start;
    margin: 0;
    padding: 0.72rem 0.55rem;
    color: var(--vermilion);
    border: 0.25rem solid var(--thread-red-dark);
    border-radius: 1.6rem;
    background:
        repeating-linear-gradient(100deg, rgba(255, 255, 255, 0.09) 0 1px, transparent 1px 4px),
        var(--fabric-panel);
    box-shadow: 0 0 0 2px var(--thread-bone), 0 0 0 4px var(--thread-red-dark), var(--patch-shadow);
    font-family: var(--mono);
    font-variant-numeric: tabular-nums;
    line-height: 1;
    text-align: center;
}

.playing-season__marker::before {
    position: absolute;
    inset: -0.72rem -0.95rem;
    z-index: -1;
    border: 1px dashed rgba(202, 167, 94, 0.62);
    border-left-color: transparent;
    border-radius: 50%;
    content: "";
    rotate: 24deg;
    pointer-events: none;
}

.playing-season:nth-child(even) .playing-season__marker::before {
    border-right-color: transparent;
    border-left-color: rgba(202, 167, 94, 0.62);
    rotate: -24deg;
}

.playing-season__marker-progress {
    color: var(--brass);
    font-size: 0.52rem;
    font-weight: 700;
    letter-spacing: 0.1em;
}

.playing-season__marker-season {
    position: relative;
    display: grid;
    width: 2.35rem;
    height: 2.35rem;
    place-items: center;
    border: 1px dashed rgba(241, 228, 197, 0.68);
    border-radius: 50%;
    background: var(--fabric-deep);
    font-size: 0.67rem;
    font-weight: 760;
    letter-spacing: 0.08em;
}

.playing-season__marker-season::after {
    position: absolute;
    inset: 0.22rem;
    border: 1px solid rgba(195, 164, 103, 0.3);
    border-radius: inherit;
    content: "";
}

.playing-season__date {
    color: var(--ink-soft);
    font-size: 0.625rem;
    letter-spacing: 0.04em;
    white-space: nowrap;
}

.playing-season__summary {
    grid-column: 1;
    grid-row: 1;
    min-width: 0;
    align-self: center;
    padding: clamp(1.4rem, 2.4vw, 2.1rem);
    border: 1px dashed rgba(202, 167, 94, 0.52);
    border-radius: 0.75rem;
    background:
        repeating-linear-gradient(94deg, rgba(255, 255, 255, 0.017) 0 1px, transparent 1px 5px),
        rgba(31, 31, 24, 0.84);
    box-shadow: var(--patch-shadow);
}

.playing-season--photos-left .playing-season__summary {
    grid-column: 3;
}

.playing-season__summary h4 {
    display: flex;
    gap: 0.75rem;
    align-items: center;
    margin: 0 0 1.8rem;
    color: var(--thread-gold);
    font-family: var(--mono);
    font-size: 0.64rem;
    font-weight: 720;
    line-height: 1.1;
    letter-spacing: 0.14em;
    text-transform: uppercase;
}

.playing-season__summary h4::after {
    width: min(6rem, 32%);
    height: 1px;
    content: "";
    background: linear-gradient(90deg, var(--rule-strong), transparent);
}

.playing-season__snapshot,
.playing-season__note {
    margin: 0.65rem 0 0;
    color: var(--ink-soft);
    font-family: var(--mono);
    font-size: 0.625rem;
    font-weight: 650;
    letter-spacing: 0.07em;
    line-height: 1.55;
    text-transform: uppercase;
}

.playing-season__note {
    color: var(--vermilion-dark);
}

.playing-season__focus {
    position: relative;
    margin-top: 1.35rem;
    padding: 1.1rem 0 0.35rem;
    border-top: 1px solid var(--rule-strong);
}

.playing-season__focus-label,
.playing-season__focus-title,
.playing-season__focus-copy {
    display: block;
}

.playing-season__focus-label {
    color: var(--vermilion-dark);
    font-family: var(--mono);
    font-size: 0.625rem;
    font-weight: 700;
    letter-spacing: 0.11em;
    text-transform: uppercase;
}

.playing-season__focus-title {
    margin-top: 0.5rem;
    color: var(--ink);
    font-family: var(--display-serif);
    font-size: clamp(2.35rem, 4vw, 4.6rem);
    font-style: normal;
    font-weight: 850;
    letter-spacing: -0.045em;
    line-height: 0.88;
}

.playing-season__focus-copy {
    max-width: 34ch;
    margin: 1rem 0 0;
    color: var(--ink-soft);
    font-size: 0.79rem;
    line-height: 1.65;
}

.playing-season__source {
    min-height: 2.75rem;
    width: fit-content;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.35rem 0.65rem;
    margin-top: 0.9rem;
    color: var(--brass);
    font-family: var(--mono);
    font-size: 0.625rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-decoration: none;
    text-transform: uppercase;
}

.playing-season__source time {
    color: var(--ink-soft);
    font-variant-numeric: tabular-nums;
}

.playing-season__source:hover {
    color: var(--ink);
}

.playing-season__source:focus-visible {
    outline: 2px solid var(--vermilion);
    outline-offset: 4px;
}

.playing-season__facts {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    margin: 1.65rem 0 0;
    padding-top: 1rem;
    border-top: 1px solid var(--rule);
}

.playing-season__fact {
    min-width: 0;
    padding-left: 0.65rem;
    border-left: 1px solid var(--rule);
}

.playing-season__fact:first-child {
    padding-left: 0;
    border-left: 0;
}

.playing-season__fact dt {
    color: var(--ink-soft);
    font-family: var(--mono);
    font-size: 0.625rem;
    font-weight: 650;
    letter-spacing: 0.07em;
    line-height: 1.4;
    text-transform: uppercase;
}

.playing-season__fact dd {
    margin: 0.3rem 0 0;
    font-family: var(--mono);
    font-size: 0.82rem;
    font-variant-numeric: tabular-nums;
    line-height: 1;
}

.playing-season__photos {
    grid-column: 3;
    grid-row: 1;
    min-width: 0;
    display: grid;
    grid-template-columns: repeat(12, minmax(0, 1fr));
    gap: clamp(0.75rem, 1.35vw, 1.15rem);
    align-items: start;
    align-self: center;
    margin: 0;
    padding: 0;
    list-style: none;
}

.playing-season--photos-left .playing-season__photos {
    grid-column: 1;
}

.playing-season--text-only {
    min-height: min(44rem, 74svh);
}

.playing-season--text-only::after {
    content: "NOW";
    color: rgba(195, 164, 103, 0.065);
}

.playing-season--text-only .playing-season__summary {
    position: relative;
}

.playing-season--text-only .playing-season__summary::after {
    display: block;
    width: clamp(3.5rem, 8vw, 7rem);
    height: 1px;
    margin-top: 2.5rem;
    content: "";
    background: linear-gradient(90deg, var(--vermilion), var(--brass));
}

.playing-season__photo-slot {
    position: relative;
    min-width: 0;
    height: fit-content;
    align-self: start;
}

.playing-season__photo-slot--filled {
    min-height: 0;
}

.playing-season__photos--count-2 .playing-season__photo-slot:nth-child(1) {
    grid-column: 1 / 9;
    grid-row: 1;
}

.playing-season__photos--count-2 .playing-season__photo-slot:nth-child(2) {
    z-index: 2;
    grid-column: 8 / 13;
    grid-row: 2;
    margin-top: clamp(-5.5rem, -6vw, -2.5rem);
}

.playing-season__photos--count-3 .playing-season__photo-slot:nth-child(1) {
    grid-column: 1 / 7;
    grid-row: 1;
}

.playing-season__photos--count-3 .playing-season__photo-slot:nth-child(2) {
    grid-column: 7 / 13;
    grid-row: 1;
    margin-top: clamp(1.5rem, 4vw, 3.5rem);
}

.playing-season__photos--count-3 .playing-season__photo-slot:nth-child(3) {
    z-index: 2;
    grid-column: 3 / 11;
    grid-row: 2;
    margin-top: clamp(-1.2rem, -2vw, -0.5rem);
}

.playing-season__photos--count-4 .playing-season__photo-slot {
    grid-column: span 6;
}

.playing-season__photos--count-4 .playing-season__photo-slot:nth-child(even) {
    margin-top: clamp(1.25rem, 3vw, 3rem);
}

.playing-season__photo-slot--filled::before,
.playing-season__photo-slot--filled::after {
    content: none;
}

.playing-season__photo-frame {
    position: relative;
    display: block;
    width: 100%;
    margin: 0;
    overflow: hidden;
    border: 0.48rem solid #2d2c23;
    border-radius: 0.55rem;
    background: #080a09;
    color: inherit;
    box-shadow:
        0 0 0 1px var(--thread-bone),
        0 0 0 4px #4b4738,
        var(--patch-shadow);
}

.playing-season__photo-frame::before {
    position: absolute;
    top: 0;
    right: 0;
    z-index: 2;
    inset: 0.26rem;
    width: auto;
    height: auto;
    content: "";
    border: 1px dashed rgba(241, 228, 197, 0.58);
    border-radius: 0.2rem;
    opacity: 0.72;
    pointer-events: none;
}

.playing-season__photo-frame img {
    display: block;
    width: 100%;
    height: auto;
    filter: saturate(0.82) contrast(1.035) brightness(0.9);
    transition: filter 520ms ease, transform 900ms cubic-bezier(0.22, 1, 0.36, 1);
}

.playing-season__photo-frame:hover img {
    filter: saturate(1) contrast(1.02) brightness(1);
    transform: scale(1.018);
}

.playing-season__photo-caption {
    position: absolute;
    right: 0;
    bottom: 0;
    left: 0;
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    gap: 0.6rem;
    align-items: end;
    padding: 1.5rem 0.65rem 0.65rem;
    color: var(--ink);
    background: linear-gradient(transparent, rgba(8, 10, 9, 0.96));
    pointer-events: none;
}

.playing-season__photo-caption strong {
    justify-self: end;
    font-family: var(--mono);
    font-size: 0.625rem;
    font-weight: 700;
    letter-spacing: 0.045em;
    line-height: 1.35;
    text-align: right;
}

@media (prefers-reduced-motion: no-preference) {
    .js .playing-season.scroll-reveal .playing-season__summary,
    .js .playing-season.scroll-reveal .playing-season__photos,
    .js .playing-season.scroll-reveal .playing-season__marker {
        opacity: 0;
        transition:
            opacity 680ms ease-out calc(var(--reveal-delay) + 120ms),
            transform 900ms cubic-bezier(0.22, 1, 0.36, 1) calc(var(--reveal-delay) + 120ms);
    }

    .js .playing-season--photos-right.scroll-reveal .playing-season__summary,
    .js .playing-season--photos-left.scroll-reveal .playing-season__photos {
        transform: translateX(-2.5rem);
    }

    .js .playing-season--photos-left.scroll-reveal .playing-season__summary,
    .js .playing-season--photos-right.scroll-reveal .playing-season__photos {
        transform: translateX(2.5rem);
    }

    .js .playing-season.scroll-reveal .playing-season__marker {
        transform: scale(0.78);
    }

    .js .playing-season.scroll-reveal.is-visible .playing-season__summary,
    .js .playing-season.scroll-reveal.is-visible .playing-season__photos,
    .js .playing-season.scroll-reveal.is-visible .playing-season__marker {
        opacity: 1;
        transform: none;
    }

    .js .playing-season.scroll-reveal .playing-season__photo-slot {
        opacity: 0;
        transform: translateY(2.2rem) scale(0.985);
        transition:
            opacity 620ms ease-out,
            transform 950ms cubic-bezier(0.22, 1, 0.36, 1);
    }

    .js .playing-season.scroll-reveal.is-visible .playing-season__photo-slot {
        opacity: 1;
        transform: none;
    }

    .js .playing-season.scroll-reveal.is-visible .playing-season__photo-slot:nth-child(1) {
        transition-delay: calc(var(--reveal-delay) + 220ms);
    }

    .js .playing-season.scroll-reveal.is-visible .playing-season__photo-slot:nth-child(2) {
        transition-delay: calc(var(--reveal-delay) + 340ms);
    }

    .js .playing-season.scroll-reveal.is-visible .playing-season__photo-slot:nth-child(3) {
        transition-delay: calc(var(--reveal-delay) + 460ms);
    }

    .js .playing-season.scroll-reveal.is-visible .playing-season__photo-slot:nth-child(4) {
        transition-delay: calc(var(--reveal-delay) + 580ms);
    }
}

.playing-season__photo-code,
.playing-season__photo-state {
    position: relative;
    z-index: 1;
    display: block;
    width: fit-content;
    background: var(--paper);
    font-family: var(--mono);
    font-size: 0.625rem;
    font-weight: 650;
    letter-spacing: 0.08em;
    line-height: 1.45;
    text-transform: uppercase;
}

.playing-history__error {
    margin: 1rem 0 0;
    color: #ed8a76;
    font-family: var(--mono);
    font-size: 0.625rem;
}

.records .section-heading {
    grid-column: 2 / 8;
}

.ledger-wrap {
    grid-column: 2 / 13;
    min-width: 0;
    margin-top: clamp(3rem, 6vw, 5rem);
}

.archive-sync {
    position: relative;
    display: grid;
    grid-template-columns: minmax(10rem, 0.55fr) minmax(14rem, 0.75fr) minmax(20rem, 1.7fr);
    gap: clamp(1.25rem, 3vw, 3rem);
    align-items: center;
    margin-bottom: clamp(2.75rem, 5vw, 5rem);
    padding: 1rem 1.25rem;
    border: 1px dashed rgba(202, 167, 94, 0.56);
    border-radius: 0.5rem;
    background:
        repeating-linear-gradient(0deg, rgba(255, 255, 255, 0.018) 0 1px, transparent 1px 4px),
        rgba(31, 31, 24, 0.76);
    box-shadow: var(--patch-shadow);
}

.archive-sync::before {
    content: "";
    position: absolute;
    inset: 0.35rem auto 0.35rem 0.35rem;
    width: 4px;
    border-radius: 999px;
    background: repeating-linear-gradient(to bottom, var(--vermilion) 0 5px, var(--thread-bone) 5px 9px);
}

.archive-sync__state,
.archive-sync__stamp {
    display: grid;
    grid-template-columns: auto 1fr;
    align-items: center;
}

.archive-sync__state {
    column-gap: 0.55rem;
    font-family: var(--mono);
    font-size: 0.61rem;
    letter-spacing: 0.12em;
    text-transform: uppercase;
}

.archive-sync__pulse {
    grid-row: 1 / 3;
    width: 0.55rem;
    aspect-ratio: 1;
    border-radius: 50%;
    background: var(--thread-moss);
    box-shadow: 0 0 0 2px var(--fabric-panel), 0 0 0 3px var(--thread-moss);
}

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

.archive-sync__cadence {
    color: var(--ink);
    font-size: 0.76rem;
    line-height: 1.2;
}

.archive-sync__stamp {
    grid-template-columns: 1fr;
    gap: 0.12rem;
    padding-left: clamp(1rem, 2vw, 2rem);
    border-left: 1px solid var(--rule);
    font-family: var(--mono);
    font-variant-numeric: tabular-nums;
}

.archive-sync__overline {
    color: var(--ink-soft);
    font-size: 0.625rem;
    font-weight: 650;
    letter-spacing: 0.1em;
    text-transform: uppercase;
}

.archive-sync__time {
    color: var(--brass);
    font-size: clamp(0.72rem, 1vw, 0.88rem);
}

.archive-sync__note {
    margin: 0;
    color: var(--ink-soft);
    font-size: 0.68rem;
    line-height: 1.6;
}

.archive-sync__battle-date {
    color: var(--ink);
    font-family: var(--mono);
    font-size: 0.625rem;
    letter-spacing: 0.04em;
    white-space: nowrap;
}

.archive-summary,
.rank-progression {
    padding: clamp(1.5rem, 3vw, 2.5rem) 0;
    border-top: 1px dashed var(--thread-gold);
    border-bottom: 1px dashed var(--thread-gold);
}

.archive-summary {
    display: grid;
    grid-template-columns: minmax(15rem, 0.8fr) minmax(0, 2.2fr);
    gap: clamp(2rem, 5vw, 5rem);
    align-items: end;
}

.archive-summary__header h3,
.rank-progression h3,
.ta-ledger__header h3 {
    margin: 0;
    font-family: var(--serif);
    font-size: clamp(2rem, 4vw, 4rem);
    font-weight: 850;
    line-height: 0.95;
    letter-spacing: -0.045em;
}

.rank-progression__kicker {
    margin: 0 0 0.8rem;
    color: var(--vermilion-dark);
    font-family: var(--mono);
    font-size: 0.64rem;
    font-weight: 650;
    letter-spacing: 0.14em;
}

.archive-summary__stats {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    margin: 0;
}

.archive-stat {
    min-width: 0;
    display: flex;
    flex-direction: column;
    padding: 0.2rem clamp(0.8rem, 2vw, 1.5rem);
    border-left: 1px solid var(--rule);
}

.archive-stat__value {
    order: -1;
    margin: 0;
    color: var(--vermilion);
    font-family: var(--display-serif);
    font-weight: 850;
    font-size: clamp(2.4rem, 5vw, 5.25rem);
    font-variant-numeric: tabular-nums;
    line-height: 0.9;
    letter-spacing: -0.05em;
}

.archive-stat__label {
    margin-top: 0.85rem;
    color: var(--ink-soft);
    font-family: var(--mono);
    font-size: clamp(0.625rem, 0.75vw, 0.68rem);
    font-weight: 650;
    letter-spacing: 0.08em;
    line-height: 1.5;
    text-transform: uppercase;
}

.rank-progression {
    margin-top: clamp(3.5rem, 7vw, 7rem);
}

.rank-progression__header {
    display: grid;
    grid-template-columns: minmax(15rem, 0.8fr) minmax(0, 2.2fr);
    gap: 0 clamp(2rem, 5vw, 5rem);
    align-items: end;
}

.rank-progression__header > p:last-child {
    grid-column: 2;
    max-width: 68ch;
    margin: 1rem 0 0;
    color: var(--ink-soft);
    font-size: 0.78rem;
    line-height: 1.7;
}

.battle-ledger {
    display: grid;
    gap: clamp(3.5rem, 7vw, 7rem);
    margin: clamp(2rem, 4vw, 3.5rem) 0 0;
    padding: 0;
    list-style: none;
}

.rank-step {
    --season-accent: var(--rule-strong);
    position: relative;
    min-width: 0;
    padding: clamp(0.6rem, 1.2vw, 0.9rem);
    border: 0.38rem solid color-mix(in srgb, var(--season-accent) 64%, #29281f);
    border-radius: 1.1rem 0.8rem 1.05rem 0.9rem;
    background:
        repeating-linear-gradient(96deg, rgba(255, 255, 255, 0.02) 0 1px, transparent 1px 5px),
        #27261e;
    box-shadow:
        0 0 0 2px var(--thread-bone),
        0 0 0 5px color-mix(in srgb, var(--season-accent) 56%, #29281f),
        var(--patch-shadow);
    transition:
        background-color 420ms ease,
        box-shadow 620ms cubic-bezier(0.22, 1, 0.36, 1);
}

.rank-step::after {
    position: absolute;
    inset: 0.35rem;
    z-index: 3;
    border: 1px dashed color-mix(in srgb, var(--season-accent) 62%, var(--thread-bone));
    border-radius: 0.52rem;
    content: "";
    pointer-events: none;
}

.rank-step[data-season="2"] {
    --season-accent: #72786f;
}

.rank-step[data-season="3"] {
    --season-accent: #7193a0;
}

.rank-step[data-season="4"] {
    --season-accent: #a3544b;
}

.rank-step[data-season="5"] {
    --season-accent: #9a895f;
}

.rank-step[data-season="6"] {
    --season-accent: #687aa0;
}

.rank-step--sapphire {
    padding-block: clamp(0.75rem, 1.5vw, 1.1rem);
    background:
        repeating-linear-gradient(96deg, rgba(255, 255, 255, 0.025) 0 1px, transparent 1px 5px),
        #22282a;
}

.rank-step__mast {
    display: grid;
    grid-template-columns: minmax(7.5rem, 0.42fr) minmax(8.75rem, 0.56fr) minmax(14rem, 1.39fr) minmax(10rem, 0.75fr);
    gap: clamp(1rem, 3vw, 3rem);
    align-items: center;
    padding: clamp(1rem, 2vw, 1.5rem) clamp(1rem, 2vw, 1.5rem);
    border: 1px solid rgba(241, 228, 197, 0.13);
    border-radius: 0.55rem 0.35rem 0.55rem 0.35rem;
    background:
        repeating-linear-gradient(90deg, rgba(255, 255, 255, 0.014) 0 1px, transparent 1px 4px),
        rgba(11, 12, 9, 0.86);
}

.rank-step__season {
    align-self: stretch;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: center;
    gap: 0.25rem;
    margin: 0;
    padding-right: clamp(1rem, 2vw, 2rem);
    border-right: 1px solid var(--rule);
    color: var(--season-accent);
    font-weight: 400;
    writing-mode: horizontal-tb;
}

.rank-step__season-word,
.rank-step__season-rounds {
    font-family: var(--mono);
    font-size: 0.62rem;
    font-weight: 650;
    letter-spacing: 0.14em;
    line-height: 1.35;
    text-transform: uppercase;
}

.rank-step__season-number {
    color: var(--ink);
    font-family: var(--serif);
    font-size: clamp(3.2rem, 5.2vw, 5.5rem);
    font-variant-numeric: tabular-nums;
    font-weight: 900;
    letter-spacing: -0.075em;
    line-height: 0.82;
    transform-origin: left center;
    transition:
        color 360ms ease,
        transform 620ms cubic-bezier(0.22, 1, 0.36, 1);
}

.rank-step__season-rounds {
    margin-top: 0.4rem;
    color: var(--ink-soft);
    letter-spacing: 0.06em;
}

.rank-step__identity {
    min-width: 0;
}

.rank-step__folio {
    display: block;
    margin-bottom: 0.45rem;
    color: var(--ink-soft);
    font-family: var(--mono);
    font-size: 0.625rem;
    font-weight: 650;
    letter-spacing: 0.13em;
    text-transform: uppercase;
}

.rank-step__title {
    color: var(--ink);
    font-family: var(--serif);
    font-size: clamp(1.8rem, 3.4vw, 3.5rem);
    font-variant-numeric: tabular-nums;
    font-weight: 850;
    letter-spacing: -0.045em;
    line-height: 0.95;
    transition:
        color 360ms ease,
        transform 620ms cubic-bezier(0.22, 1, 0.36, 1);
}

.rank-step--sapphire .rank-step__title {
    color: #a9c6d2;
    font-size: clamp(2.25rem, 4.2vw, 4.4rem);
}

.rank-step__context {
    max-width: 54ch;
    margin: 0.85rem 0 0;
    color: var(--ink-soft);
    font-family: var(--mono);
    font-size: 0.6875rem;
    letter-spacing: 0.025em;
    line-height: 1.65;
}

.rank-step__rp-summary {
    min-width: 0;
    display: grid;
    grid-template-columns: 1fr;
    align-content: center;
    margin: 0;
    padding-left: clamp(1rem, 2.5vw, 2.5rem);
    border-left: 1px solid var(--rule);
}

.rank-step__rp-summary dt {
    color: var(--ink-soft);
    font-family: var(--mono);
    font-size: 0.625rem;
    font-weight: 650;
    letter-spacing: 0.13em;
    text-transform: uppercase;
}

.rank-step__rp-summary dd {
    margin: 0;
}

.rank-step__rp-total {
    margin-top: 0.25rem !important;
    color: var(--brass);
    font-family: var(--display-serif);
    font-weight: 850;
    font-size: clamp(2rem, 3.8vw, 3.8rem);
    font-variant-numeric: tabular-nums;
    letter-spacing: -0.05em;
    line-height: 0.95;
    transition:
        color 360ms ease,
        transform 620ms cubic-bezier(0.22, 1, 0.36, 1);
}

@media (prefers-reduced-motion: no-preference) {
    .rank-step:is(:hover, :focus-within) {
        background: color-mix(in srgb, var(--season-accent) 7%, rgba(14, 17, 14, 0.68));
        box-shadow:
            8px 0 0 color-mix(in srgb, var(--season-accent) 82%, transparent) inset,
            0 1rem 3.5rem rgba(0, 0, 0, 0.18);
    }

    .rank-step:is(:hover, :focus-within) .rank-step__season-number {
        color: color-mix(in srgb, var(--season-accent) 38%, var(--ink));
        transform: translate3d(0.14rem, -0.08rem, 0) scale(1.035);
    }

    .rank-step:is(:hover, :focus-within) .rank-step__title {
        transform: translate3d(0.12rem, -0.08rem, 0);
    }

    .rank-step:is(:hover, :focus-within) .rank-step__rp-total {
        color: color-mix(in srgb, var(--season-accent) 28%, var(--brass));
        transform: translate3d(0, -0.1rem, 0) scale(1.025);
    }
}

.rank-step__rp-state {
    margin-top: 0.55rem !important;
    color: var(--ink-soft);
    font-family: var(--mono);
    font-size: 0.625rem;
    line-height: 1.55;
    text-transform: uppercase;
}

.rank-badge {
    --rank-mechanism: #8a8f87;
    --rank-mechanism-light: #e7dece;
    --rank-aura-alt: #d7c7aa;
    position: relative;
    width: min(100%, 142px);
    justify-self: center;
    isolation: isolate;
}

.rank-badge--tier {
    padding-bottom: 1.3rem;
}

.rank-badge--star-stack:not(.rank-badge--compact) {
    padding-bottom: 2.05rem;
}

.rank-badge--emerald {
    --rank-mechanism: #719079;
    --rank-aura-alt: #b6d39b;
}

.rank-badge--sapphire,
.rank-badge--pride-cyan {
    --rank-mechanism: #6f95a5;
    --rank-aura-alt: #b9e8ef;
}

.rank-badge--ruby {
    --rank-mechanism: #a7524a;
    --rank-aura-alt: #f0aa83;
}

.rank-badge--pride-gold {
    --rank-mechanism: #b18b40;
    --rank-aura-alt: #f3d58a;
}

.rank-badge--pride-lime {
    --rank-mechanism: #78944e;
    --rank-aura-alt: #d8ef86;
}

.rank-badge--pride-green {
    --rank-mechanism: #71885f;
    --rank-aura-alt: #b4daa0;
}

.rank-badge--pride-indigo {
    --rank-mechanism: #687eaa;
    --rank-aura-alt: #c1b9f5;
}

.rank-step--sapphire .rank-badge {
    width: min(100%, 164px);
}

.rank-badge > img {
    position: relative;
    z-index: 0;
    display: block;
    width: 100%;
    aspect-ratio: 1;
    height: auto;
    filter:
        saturate(0.88)
        contrast(1.08)
        drop-shadow(0 0.16rem 0 rgba(255, 255, 255, 0.18))
        drop-shadow(0 0.35rem 0.24rem rgba(0, 0, 0, 0.46));
}

.rank-badge--tier,
.rank-badge--pride {
    isolation: isolate;
}

.rank-badge--tier::before,
.rank-badge--tier::after,
.rank-badge--pride::before,
.rank-badge--pride::after {
    position: absolute;
    top: -7%;
    left: 50%;
    z-index: -1;
    width: 116%;
    aspect-ratio: 1;
    content: "";
    opacity: 0;
    pointer-events: none;
    transform: translate3d(-50%, 0, 0) scale(0.7);
    transform-origin: center;
}

.rank-badge--tier::before,
.rank-badge--pride::before {
    top: -7%;
    left: 50%;
    opacity: 1;
    transform: translateX(-50%);
    background:
        repeating-linear-gradient(105deg, rgba(255, 255, 255, 0.08) 0 1px, transparent 1px 4px),
        color-mix(in srgb, var(--rank-mechanism) 30%, var(--canvas));
    border: 0.24rem solid color-mix(in srgb, var(--rank-mechanism) 72%, #2b261d);
    border-radius: 50% 48% 50% 46%;
    box-shadow:
        0 0 0 2px var(--thread-bone),
        0 0.55rem 1rem rgba(0, 0, 0, 0.34);
    filter: none;
}

.rank-badge--tier::after,
.rank-badge--pride::after {
    top: -2%;
    right: auto;
    bottom: auto;
    left: 50%;
    width: 104%;
    border: 1px dashed color-mix(in srgb, var(--rank-aura-alt) 58%, #554b38);
    border-radius: 50%;
    background: none;
    -webkit-mask: none;
    mask: none;
    opacity: 0.72;
    transform: translateX(-50%);
}

.rank-badge:not(.rank-badge--empty):focus-visible {
    outline: 2px dashed var(--focus-stitch);
    outline-offset: 0.42rem;
}

.rank-badge--empty {
    display: grid;
    place-items: center;
    width: min(100%, 82px);
    aspect-ratio: 1;
    border: 1px solid var(--rule-strong);
}

.rank-badge--compact {
    width: 3.625rem !important;
    flex: 0 0 3.625rem;
    justify-self: end;
}

.rank-badge--compact.rank-badge--tier {
    padding-bottom: 1rem;
}

.rank-badge--compact.rank-badge--empty {
    border-color: var(--rule);
}

.rank-badge--compact .rank-badge__empty {
    font-size: 1.2rem;
}

.rank-badge__empty {
    color: var(--ink-soft);
    font-family: var(--serif);
    font-size: 2rem;
}

.rank-badge__value {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 55%;
    min-height: 1.65rem;
    display: grid;
    grid-template-rows: auto auto;
    place-items: center;
    align-content: center;
    gap: 0.08rem;
    padding: 0.12rem 0.25rem;
    transform: translate(-50%, -50%);
    border-block: 1px solid color-mix(in srgb, var(--rank-mechanism-light) 52%, transparent);
    color: var(--ink);
    border-radius: 0.2rem;
    background:
        repeating-linear-gradient(0deg, rgba(255, 255, 255, 0.025) 0 1px, transparent 1px 3px),
        rgba(12, 15, 12, 0.92);
    font-family: var(--mono);
    font-variant-numeric: tabular-nums;
    line-height: 1;
    text-align: center;
    z-index: 4;
    transition:
        border-color 280ms ease,
        box-shadow 360ms ease,
        filter 360ms ease;
}

.rank-badge__value-label {
    color: color-mix(in srgb, var(--rank-mechanism-light) 74%, var(--ink-soft));
    font-size: 0.42rem;
    font-weight: 700;
    letter-spacing: 0.18em;
    line-height: 1;
}

.rank-badge__value-number {
    max-width: 100%;
    overflow: hidden;
    font-size: clamp(0.68rem, 1vw, 0.86rem);
    font-weight: 790;
    letter-spacing: -0.065em;
    line-height: 1;
    text-overflow: clip;
    white-space: nowrap;
}

.rank-badge__value--compact {
    width: 57%;
    min-height: 0.8rem;
    gap: 0.05rem;
    padding: 0.04rem 0.1rem;
}

.rank-badge__value--compact .rank-badge__value-label {
    font-size: 0.25rem;
    letter-spacing: 0.1em;
}

.rank-badge__value--compact .rank-badge__value-number {
    font-size: 0.43rem;
}

.rank-stars {
    position: absolute;
    left: 50%;
    bottom: 0;
    z-index: 4;
    width: 96%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.05rem;
    transform: translateX(-50%);
    transform-origin: center;
    transition: scale 420ms cubic-bezier(0.22, 1, 0.36, 1);
}

.rank-stars__row {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.13rem;
    min-height: 0.9rem;
}

.rank-stars img {
    width: clamp(0.72rem, 1vw, 0.9rem);
    height: auto;
    flex: 0 0 auto;
    filter: drop-shadow(0 1px 0 rgba(0, 0, 0, 0.65));
}

.rank-stars--compact {
    bottom: 0;
    width: 108%;
    gap: 0;
}

.rank-stars--compact .rank-stars__row {
    gap: 0.04rem;
    min-height: 0.42rem;
}

.rank-stars--compact img {
    width: 0.4rem;
}

.rank-step--sapphire .rank-stars {
    width: 88%;
}

.rank-badge__mechanism {
    position: absolute;
    top: 3%;
    right: 3%;
    left: 3%;
    aspect-ratio: 1;
    z-index: 2;
    display: none;
    pointer-events: none;
}

.rank-badge__mechanism::before,
.rank-badge__mechanism::after {
    content: "";
    position: absolute;
    opacity: 0;
}

.rank-badge__mechanism::before {
    inset: 18%;
    border: 1px solid color-mix(in srgb, var(--rank-mechanism) 72%, transparent);
    clip-path: polygon(0 11%, 11% 0, 89% 0, 100% 11%, 100% 89%, 89% 100%, 11% 100%, 0 89%);
    transform: scale(0.64) rotate(10deg);
}

.rank-badge__mechanism::after {
    top: 50%;
    left: 50%;
    width: 48%;
    border-top: 1px solid var(--rank-mechanism-light);
    box-shadow:
        -1.2rem -1.2rem 0 -0.48rem var(--rank-mechanism),
        1.2rem 1.2rem 0 -0.48rem var(--rank-mechanism);
    transform: translate(-50%, -50%) scaleX(0.12);
}

.rank-badge__plate {
    position: absolute;
    width: 30%;
    height: 22%;
    opacity: 0;
    border: 1px solid var(--rank-mechanism-light);
    background: color-mix(in srgb, var(--rank-mechanism) 68%, #111512 32%);
    box-shadow: 0 0 0 1px rgba(10, 12, 10, 0.58) inset;
    clip-path: polygon(0 0, 82% 0, 100% 32%, 72% 100%, 20% 82%);
}

.rank-badge__plate::after {
    content: "";
    position: absolute;
    top: 50%;
    right: 18%;
    left: 18%;
    border-top: 1px solid color-mix(in srgb, var(--rank-mechanism-light) 52%, transparent);
    transform: rotate(9deg);
}

.rank-badge__plate--nw {
    --rank-lock-transform: translate3d(0, 0, 0);
    top: 8%;
    left: 3%;
    transform: translate3d(-58%, -90%, 0) rotate(-14deg);
}

.rank-badge__plate--ne {
    --rank-lock-transform: scaleX(-1);
    top: 8%;
    right: 3%;
    transform: translate3d(58%, -90%, 0) rotate(14deg) scaleX(-1);
}

.rank-badge__plate--se {
    --rank-lock-transform: scale(-1);
    right: 3%;
    bottom: 8%;
    transform: translate3d(58%, 90%, 0) rotate(-14deg) scale(-1);
}

.rank-badge__plate--sw {
    --rank-lock-transform: scaleY(-1);
    bottom: 8%;
    left: 3%;
    transform: translate3d(-58%, 90%, 0) rotate(14deg) scaleY(-1);
}

@media (prefers-reduced-motion: no-preference) {
    .rank-badge > img {
        rotate: 0deg;
        scale: 1;
        transition:
            filter 420ms ease,
            rotate 520ms cubic-bezier(0.22, 1, 0.36, 1),
            scale 520ms cubic-bezier(0.22, 1, 0.36, 1);
        transform-origin: center;
    }

    .rank-badge__plate {
        transition:
            opacity 130ms linear,
            transform 380ms cubic-bezier(0.22, 1, 0.36, 1);
    }

    .rank-badge__mechanism::before,
    .rank-badge__mechanism::after {
        transition:
            opacity 150ms linear 120ms,
            transform 420ms cubic-bezier(0.22, 1, 0.36, 1) 80ms;
    }

    .rank-stars img {
        transition:
            filter 240ms ease,
            transform 320ms cubic-bezier(0.22, 1, 0.36, 1);
        transition-delay: var(--rank-star-delay);
    }

    .rank-badge__plate--ne {
        transition-delay: 45ms;
    }

    .rank-badge__plate--se {
        transition-delay: 90ms;
    }

    .rank-badge__plate--sw {
        transition-delay: 135ms;
    }

    .rank-badge:is(:active, .is-mechanizing) > img,
    .round-entry:active .rank-badge > img {
        scale: 1.035;
    }

    .rank-badge:is(:active, .is-mechanizing) .rank-badge__plate,
    .round-entry:active .rank-badge__plate {
        opacity: 0.94;
        transform: var(--rank-lock-transform);
    }

    .rank-badge:is(:active, .is-mechanizing) .rank-badge__mechanism::before,
    .round-entry:active .rank-badge__mechanism::before {
        opacity: 0.8;
        transform: none;
    }

    .rank-badge:is(:active, .is-mechanizing) .rank-badge__mechanism::after,
    .round-entry:active .rank-badge__mechanism::after {
        opacity: 0.88;
        transform: translate(-50%, -50%) scaleX(1);
    }

    .rank-badge:is(:active, .is-mechanizing) .rank-stars img,
    .round-entry:active .rank-stars img {
        filter: drop-shadow(0 0 0.25rem color-mix(in srgb, var(--rank-mechanism) 70%, transparent));
        transform: translateY(-0.08rem);
    }

    html:not([data-rank-input="touch"]) .rank-badge:focus-visible > img,
    html:not([data-rank-input="touch"]) .round-entry:focus-within .rank-badge > img {
        scale: 1.035;
    }

    html:not([data-rank-input="touch"]) .rank-badge:focus-visible .rank-badge__plate,
    html:not([data-rank-input="touch"]) .round-entry:focus-within .rank-badge__plate {
        opacity: 0.94;
        transform: var(--rank-lock-transform);
    }

    html:not([data-rank-input="touch"]) .rank-badge:focus-visible .rank-badge__mechanism::before,
    html:not([data-rank-input="touch"]) .round-entry:focus-within .rank-badge__mechanism::before {
        opacity: 0.8;
        transform: none;
    }

    html:not([data-rank-input="touch"]) .rank-badge:focus-visible .rank-badge__mechanism::after,
    html:not([data-rank-input="touch"]) .round-entry:focus-within .rank-badge__mechanism::after {
        opacity: 0.88;
        transform: translate(-50%, -50%) scaleX(1);
    }

    html:not([data-rank-input="touch"]) .rank-badge:focus-visible .rank-stars img,
    html:not([data-rank-input="touch"]) .round-entry:focus-within .rank-stars img {
        filter: drop-shadow(0 0 0.25rem color-mix(in srgb, var(--rank-mechanism) 70%, transparent));
        transform: translateY(-0.08rem);
    }

    .js .rank-step.scroll-reveal .rank-step__mast > .rank-badge:not(.rank-badge--empty),
    .js .round-entry.scroll-reveal .rank-badge:not(.rank-badge--empty) {
        opacity: 0;
        transform: translate3d(0, 0.75rem, 0) scale(0.84) rotate(-2.5deg);
        transform-origin: 50% 58%;
    }

    .js .round-entry.scroll-reveal {
        transform: translateY(0.75rem);
        transition:
            opacity 440ms ease-out var(--reveal-delay),
            transform 560ms cubic-bezier(0.22, 1, 0.36, 1) var(--reveal-delay);
    }

    .js .rank-step.scroll-reveal.is-visible .rank-step__mast > .rank-badge:not(.rank-badge--empty) {
        animation: rank-crest-settle 760ms cubic-bezier(0.2, 0.8, 0.2, 1) calc(var(--reveal-delay) + 150ms) both;
    }

    .js .round-entry.scroll-reveal.is-visible .rank-badge:not(.rank-badge--empty) {
        animation: rank-chip-settle 540ms cubic-bezier(0.2, 0.8, 0.2, 1) calc(var(--reveal-delay) + 110ms) both;
    }

    .js .rank-step.scroll-reveal.is-visible .rank-step__mast > .rank-badge:not(.rank-badge--empty) > img {
        animation: rank-plate-catch 760ms cubic-bezier(0.2, 0.8, 0.2, 1) calc(var(--reveal-delay) + 150ms) backwards;
    }

    .js .rank-step.scroll-reveal.is-visible .rank-badge__value {
        animation: rank-value-open 520ms cubic-bezier(0.22, 1, 0.36, 1) calc(var(--reveal-delay) + 420ms) both;
    }

    .js .rank-step.scroll-reveal.is-visible .rank-stars img {
        animation-name: rank-mark-settle;
        animation-duration: 420ms;
        animation-timing-function: cubic-bezier(0.22, 1, 0.36, 1);
        animation-delay: calc(var(--reveal-delay) + 430ms + var(--rank-star-delay));
        animation-fill-mode: both;
        transform-origin: center;
    }
}

@media (prefers-reduced-motion: no-preference) and (hover: hover) {
    html:not([data-rank-input="touch"]) .rank-badge:not(.rank-badge--empty):hover > img {
        scale: 1.035;
    }

    html:not([data-rank-input="touch"]) .rank-badge:not(.rank-badge--empty):hover .rank-badge__plate {
        opacity: 0.94;
        transform: var(--rank-lock-transform);
    }

    html:not([data-rank-input="touch"]) .rank-badge:not(.rank-badge--empty):hover .rank-badge__mechanism::before {
        opacity: 0.8;
        transform: none;
    }

    html:not([data-rank-input="touch"]) .rank-badge:not(.rank-badge--empty):hover .rank-badge__mechanism::after {
        opacity: 0.88;
        transform: translate(-50%, -50%) scaleX(1);
    }

    html:not([data-rank-input="touch"]) .rank-badge:not(.rank-badge--empty):hover .rank-stars img {
        filter: drop-shadow(0 0 0.25rem color-mix(in srgb, var(--rank-mechanism) 70%, transparent));
        transform: translateY(-0.08rem);
    }
}

/* --------------------------------------------------------------------------
   High-density embroidery edition: live titles, TA course patches and IDAC
   battle crests. Geometry and values remain live DOM/SVG data.
   -------------------------------------------------------------------------- */

.ta-route-sprite {
    position: absolute;
    width: 0;
    height: 0;
    overflow: hidden;
    pointer-events: none;
}

:where(
    h1 > span,
    h1 small,
    .section-heading h2,
    .playing-history__header h2,
    .discipline h3,
    .archive-summary__header h3,
    .rank-progression h3,
    .ta-ledger__header h3,
    .playing-season__title,
    .rank-step__title,
    .drive-film h3
) {
    --embroidered-title-fill: var(--thread-bone);
    --embroidered-title-edge: #5f5135;
    --embroidered-title-glint: #fff5d8;
    color: var(--embroidered-title-fill);
    paint-order: stroke fill;
    -webkit-text-stroke: 0.025em var(--embroidered-title-edge);
    text-shadow:
        0 -0.02em 0 var(--embroidered-title-glint),
        0 0.035em 0 color-mix(in srgb, var(--embroidered-title-edge) 76%, black),
        0.025em 0.055em 0 color-mix(in srgb, var(--embroidered-title-edge) 64%, black),
        -0.018em 0.07em 0 color-mix(in srgb, var(--embroidered-title-edge) 48%, black),
        0 0.12em 0.12em rgba(0, 0, 0, 0.62),
        0 0.28em 0.45em rgba(0, 0, 0, 0.34);
}

h1 > span:nth-child(2) {
    --embroidered-title-fill: #e86852;
    --embroidered-title-edge: #6f211d;
    --embroidered-title-glint: #ffb09e;
    color: var(--embroidered-title-fill);
    text-shadow:
        0 -0.02em 0 var(--embroidered-title-glint),
        0 0.04em 0 #8e2d25,
        0.025em 0.065em 0 #5b1b17,
        0 0.13em 0.12em rgba(0, 0, 0, 0.68),
        0 0.3em 0.48em rgba(0, 0, 0, 0.38);
}

.section-heading h2,
.playing-history__header h2,
.archive-summary__header h3,
.rank-progression h3,
.ta-ledger__header h3 {
    position: relative;
    width: fit-content;
    max-width: 100%;
    padding: 0.08em 0.04em 0.14em;
    border-bottom: 0.08em solid color-mix(in srgb, var(--thread-gold) 64%, #5a4826);
    filter: drop-shadow(0 0.45rem 0.32rem rgba(0, 0, 0, 0.38));
}

.section-heading h2::after,
.playing-history__header h2::after,
.archive-summary__header h3::after,
.rank-progression h3::after,
.ta-ledger__header h3::after {
    position: absolute;
    right: 0;
    bottom: -0.12em;
    left: 0;
    height: 0.06em;
    border-radius: 999px;
    background: repeating-linear-gradient(
        90deg,
        var(--thread-bone) 0 0.22em,
        transparent 0.22em 0.38em
    );
    content: "";
    opacity: 0.72;
    pointer-events: none;
}

:where(
    html[data-lang="ja"],
    html[data-lang="zh-Hant"],
    html[data-lang="th"],
    html[data-lang="my"],
    html[data-lang="km"],
    html[data-lang="lo"]
) :where(
    .section-heading h2,
    .playing-history__header h2,
    .archive-summary__header h3,
    .rank-progression h3,
    .ta-ledger__header h3
) {
    letter-spacing: 0;
    line-height: 1.24;
    -webkit-text-stroke-width: 0.018em;
}

.hero-patch__rim {
    background:
        radial-gradient(circle at 50% 43%, rgba(220, 92, 73, 0.38) 0 25%, transparent 25.5%),
        repeating-linear-gradient(102deg, rgba(255, 255, 255, 0.08) 0 1px, transparent 1px 3px),
        repeating-linear-gradient(12deg, rgba(0, 0, 0, 0.12) 0 1px, transparent 1px 5px),
        #27261e;
    box-shadow:
        0 0 0 2px var(--thread-bone),
        0 0 0 6px var(--thread-gold),
        0 0 0 9px #594925,
        0 0 0 11px rgba(11, 12, 9, 0.82),
        0 0.28rem 0 rgba(255, 255, 255, 0.09) inset,
        0 -0.38rem 0 rgba(0, 0, 0, 0.32) inset,
        var(--patch-shadow);
}

.hero-patch__route .route-line--draw {
    filter:
        drop-shadow(0 -0.8px 0 #ffae9d)
        drop-shadow(0 1.5px 0 #731f1b)
        drop-shadow(0 3px 2px rgba(0, 0, 0, 0.66));
}

.hero-patch__route .route-line--stitches {
    stroke-width: 1.7;
    stroke-linecap: round;
    opacity: 0.62;
}

.record-table {
    min-width: 1060px;
}

.record-table__course {
    width: 20rem;
    padding-block: 1rem !important;
}

.ta-map-patch {
    --map-course-thread: #bfa56e;
    --map-course-light: #f1dfb3;
    --map-course-deep: #3c3324;
    --map-route-thread: #c65c4d;
    --map-route-light: #ffd2bd;
    --map-route-deep: #531f1b;
    --map-thread: var(--map-route-thread);
    --map-thread-light: var(--map-route-light);
    --map-thread-deep: var(--map-route-deep);
    position: relative;
    isolation: isolate;
    width: min(100%, 19rem);
    min-height: 7.15rem;
    display: grid;
    grid-template-columns: minmax(7.6rem, 1.08fr) minmax(6.2rem, 0.92fr);
    align-items: stretch;
    gap: 0.62rem;
    padding: 0.62rem;
    overflow: hidden;
    border: 0.3rem solid var(--map-route-deep);
    border-radius: 0.86rem 0.64rem 0.78rem 0.58rem;
    background:
        linear-gradient(112deg, rgba(255, 255, 255, 0.055), transparent 34%),
        repeating-linear-gradient(98deg, rgba(255, 255, 255, 0.035) 0 1px, transparent 1px 4px),
        repeating-linear-gradient(8deg, transparent 0 4px, rgba(0, 0, 0, 0.07) 4px 5px),
        #20231a;
    box-shadow:
        0 0 0 1px var(--thread-bone),
        0 0 0 4px color-mix(in srgb, var(--map-course-thread) 74%, #3d392b),
        0 0 0 6px #191b13,
        0 0.18rem 0 rgba(255, 255, 255, 0.09) inset,
        0 -0.24rem 0 rgba(0, 0, 0, 0.34) inset,
        0 0.72rem 1.3rem rgba(0, 0, 0, 0.38);
    font-family: var(--mono);
    font-style: normal;
    text-align: left;
    transform: translateZ(0);
}

.ta-map-patch::before,
.ta-map-patch::after {
    position: absolute;
    content: "";
    pointer-events: none;
}

.ta-map-patch::before {
    inset: 0.28rem;
    z-index: 4;
    border: 1px solid color-mix(in srgb, var(--map-route-light) 52%, transparent);
    border-radius: 0.42rem 0.31rem 0.42rem 0.31rem;
}

.ta-map-patch::after {
    inset: 0;
    z-index: 3;
    background: linear-gradient(112deg, transparent 18%, rgba(255, 255, 255, 0.07) 37%, transparent 53%);
    opacity: 0.46;
    mix-blend-mode: screen;
}

.ta-map-patch[data-match~="horus"] {
    border-color: color-mix(in srgb, var(--map-route-thread) 68%, var(--thread-gold));
    box-shadow:
        0 0 0 1px var(--thread-bone),
        0 0 0 4px color-mix(in srgb, var(--map-course-thread) 62%, var(--thread-gold)),
        0 0 0 6px #191b13,
        0 0.18rem 0 rgba(255, 255, 255, 0.11) inset,
        0 -0.24rem 0 rgba(0, 0, 0, 0.34) inset,
        0 0.72rem 1.3rem rgba(0, 0, 0, 0.42);
}

.ta-map-patch[data-match~="azizi"] {
    border-color: color-mix(in srgb, var(--map-route-thread) 52%, var(--thread-red));
}

.ta-map-patch__art {
    position: relative;
    min-width: 0;
    display: grid;
    place-items: center;
    overflow: hidden;
    border: 1px solid rgba(241, 228, 197, 0.12);
    border-radius: 0.45rem 0.32rem 0.42rem 0.3rem;
    background:
        radial-gradient(circle at 35% 42%, color-mix(in srgb, var(--map-course-thread) 15%, transparent), transparent 60%),
        radial-gradient(circle at 66% 58%, color-mix(in srgb, var(--map-route-thread) 12%, transparent), transparent 62%),
        repeating-linear-gradient(105deg, rgba(255, 255, 255, 0.02) 0 1px, transparent 1px 4px),
        #11140e;
    box-shadow: 0 0 0 3px rgba(0, 0, 0, 0.18) inset;
}

.ta-map-patch__route {
    position: relative;
    z-index: 1;
    width: 100%;
    height: auto;
    max-height: 6.1rem;
    overflow: visible;
    filter: drop-shadow(0 0.28rem 0.2rem rgba(0, 0, 0, 0.72));
}

.ta-map-route {
    fill: none;
    stroke-linecap: round;
    stroke-linejoin: round;
    vector-effect: non-scaling-stroke;
}

.ta-map-route--shadow {
    stroke: rgba(0, 0, 0, 0.76);
    stroke-width: 22;
}

.ta-map-route--edge {
    stroke: var(--map-course-deep);
    stroke-width: 18;
}

.ta-map-route--bed {
    stroke: var(--map-course-thread);
    stroke-width: 15;
}

.ta-map-route--satin {
    stroke: var(--map-route-deep);
    stroke-width: 12.7;
}

.ta-map-route--knit {
    stroke-width: 10.8;
    stroke-linecap: round;
}

.ta-map-knit__ground {
    fill: var(--map-course-thread);
}

.ta-map-knit__wale,
.ta-map-knit__binder {
    fill: none;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.ta-map-knit__wale--shadow {
    stroke: var(--map-route-deep);
    stroke-width: 2.8;
}

.ta-map-knit__wale--route {
    stroke: var(--map-route-thread);
    stroke-width: 1.9;
}

.ta-map-knit__wale--light {
    stroke: var(--map-route-light);
    stroke-width: 0.7;
    opacity: 0.9;
}

.ta-map-knit__binder {
    stroke: color-mix(in srgb, var(--map-course-light) 68%, var(--map-route-thread));
    stroke-width: 0.8;
}

.ta-map-route--ridge {
    stroke: var(--map-route-light);
    stroke-width: 2.1;
    opacity: 0.4;
}

.ta-map-route--highlight {
    stroke: var(--map-course-light);
    stroke-width: 0.82;
    opacity: 0.82;
}

.ta-map-route__terminal {
    vector-effect: non-scaling-stroke;
}

.ta-map-route__terminal--start {
    fill: var(--map-route-thread);
    stroke: var(--map-route-light);
    stroke-width: 2.2;
}

.ta-map-route__terminal--finish {
    fill: var(--map-course-thread);
    stroke: var(--map-course-light);
    stroke-width: 2.2;
}

.ta-map-patch__details {
    position: relative;
    z-index: 5;
    min-width: 0;
    display: flex;
    flex-direction: column;
    padding: 0.22rem 0.24rem 0.15rem 0;
}

.ta-map-patch__folio {
    display: block;
    font-family: var(--mono);
    font-weight: 800;
    line-height: 1.2;
    text-transform: uppercase;
}

.ta-map-patch__folio {
    color: var(--thread-gold);
    font-size: 0.48rem;
    letter-spacing: 0.14em;
}

.ta-map-patch__name {
    display: block;
    min-width: 0;
    margin-top: 0.28rem;
    overflow-wrap: anywhere;
    color: var(--thread-bone);
    font-family: var(--sans);
    font-size: 0.74rem;
    font-weight: 850;
    letter-spacing: 0.025em;
    line-height: 1.28;
    paint-order: stroke fill;
    -webkit-text-stroke: 0.012em #51482f;
    text-shadow:
        0 -1px 0 #fff5d6,
        0 1px 0 #675b3c,
        0 2px 2px rgba(0, 0, 0, 0.72);
}

.ta-map-patch__timings {
    min-width: 0;
    display: grid;
    gap: 0.28rem;
    margin-top: auto;
    padding-top: 0.42rem;
}

.ta-map-patch__timing {
    position: relative;
    min-width: 0;
    display: grid;
    padding: 0.32rem 0.36rem 0.3rem;
    border: 0.12rem solid var(--map-thread-deep);
    border-radius: 0.28rem 0.18rem 0.25rem 0.16rem;
    background:
        repeating-linear-gradient(102deg, rgba(255, 255, 255, 0.08) 0 1px, transparent 1px 3px),
        color-mix(in srgb, var(--map-thread) 16%, #12140e);
    box-shadow:
        0 0 0 1px color-mix(in srgb, var(--map-thread-light) 70%, transparent),
        0 0.18rem 0.28rem rgba(0, 0, 0, 0.44);
}

.ta-map-patch__timing::after {
    position: absolute;
    inset: 0.12rem;
    border: 1px solid color-mix(in srgb, var(--map-thread-light) 48%, transparent);
    border-radius: 0.12rem;
    content: "";
    pointer-events: none;
}

.ta-map-patch__time {
    position: relative;
    z-index: 1;
    display: block;
    min-width: 0;
    overflow: hidden;
    color: var(--thread-bone);
    font-family: var(--mono);
    font-size: clamp(0.74rem, 1vw, 0.92rem);
    font-variant-numeric: tabular-nums;
    font-weight: 900;
    letter-spacing: -0.065em;
    line-height: 1;
    paint-order: stroke fill;
    -webkit-text-stroke: 0.025em var(--map-thread-deep);
    text-overflow: clip;
    text-shadow:
        0 -1px 0 var(--map-thread-light),
        0 1px 0 var(--map-thread-deep),
        0 2px 2px rgba(0, 0, 0, 0.78);
    white-space: nowrap;
}

.ta-map-patch__timing--empty {
    opacity: 0.58;
}

.record-table__identity {
    width: min(100%, 19rem);
    margin-top: 0.75rem;
    padding: 0.38rem 0.55rem;
    border: 1px dashed rgba(220, 92, 73, 0.5);
    border-radius: 0.28rem;
    background: rgba(105, 34, 27, 0.28);
}

/* Inline battle crests retain sourced tier/color meaning while translating
   their recognizable shield, laurel, lightning and PRIDE-ring silhouettes
   into thread rather than displaying the audit PNGs. */
.rank-badge {
    --rank-accent: #747c74;
    --rank-light: #c8d0c6;
    --rank-deep: #293029;
    --rank-gold: #d4a844;
    --rank-gold-light: #ffe6a0;
}

.rank-badge--emerald {
    --rank-accent: #44aa78;
    --rank-light: #b6f2ce;
    --rank-deep: #173f31;
}

.rank-badge--sapphire,
.rank-badge--pride-cyan {
    --rank-accent: #24aee6;
    --rank-light: #c2f4ff;
    --rank-deep: #123c62;
}

.rank-badge--ruby {
    --rank-accent: #e24146;
    --rank-light: #ffc0ac;
    --rank-deep: #5a171d;
}

.rank-badge--pride-gold {
    --rank-accent: #d4a83c;
    --rank-light: #fff0a4;
    --rank-deep: #59400f;
}

.rank-badge--pride-lime {
    --rank-accent: #a3dc22;
    --rank-light: #eaff98;
    --rank-deep: #344d0f;
}

.rank-badge--pride-green {
    --rank-accent: #58b85f;
    --rank-light: #c4f8b9;
    --rank-deep: #214d27;
}

.rank-badge--pride-indigo {
    --rank-accent: #4b70dd;
    --rank-light: #c4d2ff;
    --rank-deep: #202f6d;
}

.rank-badge--tier::before,
.rank-badge--tier::after,
.rank-badge--pride::before,
.rank-badge--pride::after {
    display: none;
}

.rank-badge__crest {
    position: relative;
    z-index: 1;
    display: block;
    width: 100%;
    height: auto;
    overflow: visible;
    transform-origin: center;
    filter:
        drop-shadow(0 -0.08rem 0 rgba(255, 255, 255, 0.18))
        drop-shadow(0 0.42rem 0.25rem rgba(0, 0, 0, 0.58));
}

.rank-thread__accent-ground {
    fill: var(--rank-accent);
}

.rank-thread__accent-strand {
    fill: none;
    stroke: color-mix(in srgb, var(--rank-light) 58%, var(--rank-accent));
    stroke-width: 0.75;
}

.rank-thread__gold-ground {
    fill: var(--rank-gold);
}

.rank-thread__gold-strand {
    fill: none;
    stroke: var(--rank-gold-light);
    stroke-width: 0.68;
}

.rank-thread__dark-ground {
    fill: color-mix(in srgb, var(--rank-deep) 82%, #090b08);
}

.rank-thread__dark-strand {
    fill: none;
    stroke: color-mix(in srgb, var(--rank-light) 24%, var(--rank-deep));
    stroke-width: 0.62;
}

.rank-crest__drop {
    fill: #0a0c09;
    stroke: var(--thread-bone);
    stroke-width: 2;
    stroke-linejoin: round;
}

.rank-crest__laurel {
    stroke: #684814;
    stroke-width: 2.5;
    stroke-linejoin: round;
}

.rank-crest__laurel-bed {
    fill: #201607;
    stroke: #070805;
    stroke-width: 7;
    stroke-linejoin: round;
}

.rank-crest__laurel-seam {
    fill: none;
    stroke: var(--rank-gold-light);
    stroke-width: 1.25;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.rank-crest__shield-outer {
    stroke: var(--rank-gold);
    stroke-width: 5;
    stroke-linejoin: round;
}

.rank-crest__shield-welt {
    fill: none;
    stroke: var(--rank-gold-light);
    stroke-width: 1.4;
    stroke-linejoin: round;
    opacity: 0.88;
}

.rank-crest__shield-field {
    stroke: var(--rank-light);
    stroke-width: 2;
    stroke-linejoin: round;
}

.rank-crest__shield-panel {
    stroke: color-mix(in srgb, var(--rank-light) 78%, white);
    stroke-width: 1.6;
    stroke-linejoin: round;
}

.rank-crest__shield-satin {
    fill: color-mix(in srgb, var(--rank-light) 34%, transparent);
    stroke: none;
}

.rank-crest__shield-ribs {
    fill: none;
    stroke: color-mix(in srgb, var(--rank-light) 48%, transparent);
    stroke-width: 0.82;
    stroke-linecap: round;
    stroke-linejoin: round;
    opacity: 0.72;
}

.rank-crest__lightning-underlay {
    fill: #11150e;
    stroke: var(--rank-gold);
    stroke-width: 6;
    stroke-linejoin: round;
}

.rank-crest__lightning {
    stroke: white;
    stroke-width: 1.2;
    stroke-linejoin: round;
}

.rank-crest__lightning-seam {
    fill: none;
    stroke: #fff4b2;
    stroke-width: 1.15;
    stroke-linecap: round;
    stroke-linejoin: round;
    opacity: 0.94;
}

.rank-crest__sash {
    stroke: var(--rank-gold-light);
    stroke-width: 2.2;
    stroke-linejoin: round;
}

.rank-crest__sash-seam {
    fill: none;
    stroke: color-mix(in srgb, var(--rank-light) 58%, white);
    stroke-width: 1;
}

.rank-crest__word {
    fill: var(--rank-light);
    stroke: var(--rank-deep);
    stroke-width: 2.1;
    font-family: "Arial Black", "Avenir Next Condensed", sans-serif;
    font-style: italic;
    font-weight: 950;
    paint-order: stroke fill;
    letter-spacing: 0.02em;
}

.rank-crest__word--online {
    font-size: 20px;
}

.rank-crest__letter-seam {
    fill: none;
    stroke: #fff9da;
    stroke-width: 0.8;
    stroke-linecap: round;
    opacity: 0.82;
}

.rank-crest__edge-stitch {
    fill: none;
    stroke: var(--rank-gold-light);
    stroke-width: 1.2;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.rank-pride__electric-bed {
    fill: #090b08;
    stroke: color-mix(in srgb, var(--rank-accent) 48%, #090b08);
    stroke-width: 6;
    stroke-linejoin: round;
}

.rank-pride__electric {
    stroke: var(--rank-light);
    stroke-width: 2.2;
    stroke-linejoin: round;
}

.rank-pride__arc-lightning {
    fill: none;
    stroke: var(--rank-light);
    stroke-width: 2.1;
    stroke-linecap: round;
    stroke-linejoin: round;
    filter: drop-shadow(0 0 1.6px var(--rank-accent));
}

.rank-pride__ring-bed,
.rank-pride__ring-satin,
.rank-pride__ring-highlight {
    fill: none;
}

.rank-pride__ring-bed {
    stroke: #0a0c09;
    stroke-width: 22;
}

.rank-pride__ring-satin {
    stroke-width: 15;
    stroke-linecap: round;
}

.rank-pride__ring-highlight {
    stroke: var(--rank-light);
    stroke-width: 2.5;
    stroke-linecap: round;
}

.rank-pride__ring-inner-seam {
    fill: none;
    stroke: color-mix(in srgb, var(--rank-gold-light) 72%, var(--rank-accent));
    stroke-width: 1.1;
    opacity: 0.86;
}

.rank-pride__top-tab,
.rank-pride__bottom-tab {
    stroke: var(--rank-light);
    stroke-width: 2;
    stroke-linejoin: round;
}

.rank-pride__top-tab-seam,
.rank-pride__bottom-tab-seam {
    fill: none;
    stroke: color-mix(in srgb, var(--rank-light) 76%, white);
    stroke-width: 0.85;
    stroke-linejoin: round;
}

.rank-pride__bar-outer {
    stroke: var(--rank-gold);
    stroke-width: 4;
    stroke-linejoin: round;
}

.rank-pride__bar {
    stroke: var(--rank-light);
    stroke-width: 1.8;
    stroke-linejoin: round;
}

.rank-pride__bar-facets {
    fill: none;
    stroke: color-mix(in srgb, var(--rank-light) 58%, transparent);
    stroke-width: 1.05;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.rank-pride__bar-satin {
    fill: none;
    stroke: color-mix(in srgb, var(--rank-light) 58%, transparent);
    stroke-width: 1.35;
}

.rank-crest__word--pride {
    fill: var(--rank-light);
    font-size: 19px;
    stroke-width: 2.4;
}

.rank-crest__word--small {
    fill: var(--rank-light);
    font-size: 8px;
    stroke-width: 1.4;
}

.rank-badge__value,
.rank-badge__value--compact {
    top: 53%;
    width: 48%;
    min-height: 0;
    padding: 0;
    border: 0;
    background: none;
    box-shadow: none;
    filter: none;
}

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

.rank-badge__value-number {
    color: var(--thread-bone);
    font-size: clamp(0.86rem, 1.25vw, 1.08rem);
    font-weight: 950;
    letter-spacing: -0.055em;
    paint-order: stroke fill;
    -webkit-text-stroke: 0.035em var(--rank-deep);
    text-shadow:
        0 -1px 0 var(--rank-light),
        0 1.5px 0 var(--rank-deep),
        0 3px 3px rgba(0, 0, 0, 0.72);
}

.rank-badge__value--compact .rank-badge__value-number {
    font-size: 0.46rem;
}

.rank-stars__mark {
    width: clamp(0.72rem, 1vw, 0.9rem);
    height: auto;
    flex: 0 0 auto;
    overflow: visible;
    filter: drop-shadow(0 1px 0 rgba(0, 0, 0, 0.72));
}

.rank-stars--compact .rank-stars__mark {
    width: 0.4rem;
}

.rank-star__underlay {
    fill: #21180b;
    stroke: #0b0c09;
    stroke-width: 1.6;
    stroke-linejoin: round;
}

.rank-star__thread {
    fill: var(--rank-gold);
    stroke: var(--rank-gold-light);
    stroke-width: 0.9;
    stroke-linejoin: round;
}

.rank-star__seam {
    fill: none;
    stroke: #fff3b0;
    stroke-width: 0.65;
    stroke-linecap: round;
    opacity: 0.82;
}

@media (prefers-reduced-motion: no-preference) {
    .ta-map-patch,
    .rank-badge__crest,
    .rank-stars__mark {
        transition:
            transform 420ms cubic-bezier(0.22, 1, 0.36, 1),
            filter 320ms ease,
            opacity 260ms ease;
    }

    .record-table tbody tr:is(:hover, :focus-within) .ta-map-patch {
        transform: translate3d(0.1rem, -0.08rem, 0) rotate(-0.25deg);
    }

    .rank-badge:is(:hover, :focus-visible, :active, .is-mechanizing) .rank-badge__crest,
    .round-entry:focus-within .rank-badge__crest {
        transform: translate3d(0, -0.12rem, 0) scale(1.035);
        filter:
            drop-shadow(0 -0.08rem 0 rgba(255, 255, 255, 0.22))
            drop-shadow(0 0.52rem 0.32rem rgba(0, 0, 0, 0.66));
    }

}

@media (max-width: 760px) {
    .record-table {
        min-width: 0;
    }

    .record-table tbody tr {
        grid-template-columns: minmax(0, 1fr) minmax(5.25rem, auto);
        grid-template-areas:
            "course course"
            "time placement"
            "car car"
            "updated updated"
            "source source";
        row-gap: 0.5rem;
    }

    .record-table__course {
        display: block;
        grid-area: auto !important;
        grid-column: 1 / -1;
        grid-row: 1;
        width: min(20rem, calc(100vw - 6rem)) !important;
        min-width: min(20rem, calc(100vw - 6rem)) !important;
        max-width: none;
        padding-top: 0.4rem !important;
    }

    .ta-map-patch {
        width: 100%;
        max-width: none;
        grid-template-columns: minmax(7.25rem, 1.08fr) minmax(6.4rem, 0.92fr);
    }

    .record-table__time {
        align-self: end;
    }

    .record-table__placement {
        align-self: end;
    }

    .record-table__car {
        text-align: left;
    }

    .record-table__placement::before,
    .record-table__car::before {
        text-align: inherit;
    }
}

@media (max-width: 460px) {
    .ta-map-patch {
        min-height: 6.8rem;
        grid-template-columns: minmax(6.25rem, 0.94fr) minmax(6.1rem, 1.06fr);
        gap: 0.45rem;
        padding: 0.52rem;
        border-width: 0.24rem;
    }

    .ta-map-patch__route {
        max-height: 5.55rem;
    }

    .ta-map-patch__name {
        font-size: 0.68rem;
    }

    .ta-map-patch__time {
        font-size: 0.82rem;
    }

    .record-table tbody tr {
        padding-right: 0.65rem;
        padding-left: 2.8rem;
    }

    .record-table tbody tr::before {
        left: 2.2rem;
    }

    .rank-step__rp-summary,
    .rank-step--sapphire .rank-step__rp-summary {
        grid-template-columns: minmax(0, 1fr);
        align-items: start;
    }

    .rank-step__rp-summary dt,
    .rank-step__rp-total,
    .rank-step__rp-state {
        grid-column: 1;
        grid-row: auto;
    }

    .rank-step__rp-state {
        align-self: start;
        margin-top: 0.45rem !important;
        padding-bottom: 0;
    }
}

@media (prefers-reduced-motion: reduce) {
    .ta-map-patch,
    .rank-badge__crest,
    .rank-stars__mark {
        animation: none !important;
        transition: none !important;
        transform: none !important;
    }
}

@media (forced-colors: active) {
    :where(
        h1 > span,
        h1 small,
        .section-heading h2,
        .playing-history__header h2,
        .discipline h3,
        .archive-summary__header h3,
        .rank-progression h3,
        .ta-ledger__header h3,
        .playing-season__title,
        .rank-step__title,
        .drive-film h3
    ) {
        color: CanvasText;
        -webkit-text-stroke: 0;
        text-shadow: none;
    }

    .ta-map-patch,
    .rank-badge__crest {
        forced-color-adjust: auto;
    }
}

@media (prefers-reduced-motion: no-preference) {
    .rank-badge--pride:not(.rank-badge--compact)::before {
        animation: rank-pride-aura-idle 4.8s ease-in-out infinite;
    }

    .rank-badge--pride:not(.rank-badge--compact)::after {
        animation: rank-pride-orbit-idle 8s linear infinite;
    }

    .rank-badge:is(:active, .is-mechanizing, :focus-visible)::before,
    .round-entry:is(:active, :focus-within) .rank-badge::before {
        animation: rank-aura-overdrive 1.25s ease-in-out infinite alternate;
    }

    .rank-badge:is(:active, .is-mechanizing, :focus-visible)::after,
    .round-entry:is(:active, :focus-within) .rank-badge::after {
        animation: rank-orbit-overdrive 1.65s linear infinite;
    }

    .rank-badge.rank-badge--tier:is(:active, .is-mechanizing, :focus-visible) > img,
    .round-entry:is(:active, :focus-within) .rank-badge.rank-badge--tier > img {
        rotate: -1.5deg;
        scale: 1.055;
        filter:
            drop-shadow(0 0 0.32rem color-mix(in srgb, var(--rank-aura-alt) 62%, transparent))
            drop-shadow(0 0 0.8rem color-mix(in srgb, var(--rank-mechanism) 32%, transparent));
    }

    .rank-badge.rank-badge--pride:is(:active, .is-mechanizing, :focus-visible) > img,
    .round-entry:is(:active, :focus-within) .rank-badge.rank-badge--pride > img {
        rotate: 1.8deg;
        scale: 1.085;
        filter:
            drop-shadow(0 0 0.38rem color-mix(in srgb, var(--rank-aura-alt) 78%, transparent))
            drop-shadow(0 0 1.15rem color-mix(in srgb, var(--rank-mechanism) 46%, transparent));
    }

    .rank-badge--pride:is(:active, .is-mechanizing, :focus-visible) .rank-badge__value,
    .round-entry:is(:active, :focus-within) .rank-badge--pride .rank-badge__value {
        border-color: var(--rank-aura-alt);
        box-shadow:
            0 0 0 1px color-mix(in srgb, var(--rank-mechanism) 44%, transparent) inset,
            0 0 0.85rem color-mix(in srgb, var(--rank-aura-alt) 34%, transparent);
        filter: brightness(1.16);
    }

    .rank-badge:is(:active, .is-mechanizing, :focus-visible) .rank-badge__mechanism::before,
    .round-entry:is(:active, :focus-within) .rank-badge__mechanism::before {
        animation: rank-mechanism-orbit 2.8s linear infinite;
    }

    .rank-badge:is(:active, .is-mechanizing, :focus-visible) .rank-badge__mechanism::after,
    .round-entry:is(:active, :focus-within) .rank-badge__mechanism::after {
        animation: rank-mechanism-scan 980ms ease-in-out infinite alternate;
    }

    .rank-badge:is(:active, .is-mechanizing, :focus-visible) .rank-badge__plate,
    .round-entry:is(:active, :focus-within) .rank-badge__plate {
        filter:
            brightness(1.18)
            drop-shadow(0 0 0.25rem color-mix(in srgb, var(--rank-mechanism) 55%, transparent));
    }

    .rank-badge--tier:is(:active, .is-mechanizing, :focus-visible) .rank-stars,
    .round-entry:is(:active, :focus-within) .rank-badge--tier .rank-stars {
        scale: 1.1;
        animation: rank-star-array 720ms ease-in-out infinite alternate;
    }
}

@media (prefers-reduced-motion: no-preference) and (hover: hover) {
    html:not([data-rank-input="touch"]) .rank-badge:not(.rank-badge--empty):hover::before {
        animation: rank-aura-overdrive 1.25s ease-in-out infinite alternate;
    }

    html:not([data-rank-input="touch"]) .rank-badge:not(.rank-badge--empty):hover::after {
        animation: rank-orbit-overdrive 1.65s linear infinite;
    }

    html:not([data-rank-input="touch"]) .rank-badge.rank-badge--tier:hover > img {
        rotate: -1.5deg;
        scale: 1.055;
        filter:
            drop-shadow(0 0 0.32rem color-mix(in srgb, var(--rank-aura-alt) 62%, transparent))
            drop-shadow(0 0 0.8rem color-mix(in srgb, var(--rank-mechanism) 32%, transparent));
    }

    html:not([data-rank-input="touch"]) .rank-badge.rank-badge--pride:hover > img {
        rotate: 1.8deg;
        scale: 1.085;
        filter:
            drop-shadow(0 0 0.38rem color-mix(in srgb, var(--rank-aura-alt) 78%, transparent))
            drop-shadow(0 0 1.15rem color-mix(in srgb, var(--rank-mechanism) 46%, transparent));
    }

    html:not([data-rank-input="touch"]) .rank-badge--pride:hover .rank-badge__value {
        border-color: var(--rank-aura-alt);
        box-shadow:
            0 0 0 1px color-mix(in srgb, var(--rank-mechanism) 44%, transparent) inset,
            0 0 0.85rem color-mix(in srgb, var(--rank-aura-alt) 34%, transparent);
        filter: brightness(1.16);
    }

    html:not([data-rank-input="touch"]) .rank-badge:not(.rank-badge--empty):hover .rank-badge__mechanism::before {
        animation: rank-mechanism-orbit 2.8s linear infinite;
    }

    html:not([data-rank-input="touch"]) .rank-badge:not(.rank-badge--empty):hover .rank-badge__mechanism::after {
        animation: rank-mechanism-scan 980ms ease-in-out infinite alternate;
    }

    html:not([data-rank-input="touch"]) .rank-badge:not(.rank-badge--empty):hover .rank-badge__plate {
        filter:
            brightness(1.18)
            drop-shadow(0 0 0.25rem color-mix(in srgb, var(--rank-mechanism) 55%, transparent));
    }

    html:not([data-rank-input="touch"]) .rank-badge--tier:hover .rank-stars {
        scale: 1.1;
        animation: rank-star-array 720ms ease-in-out infinite alternate;
    }
}

@keyframes rank-pride-aura-idle {
    0%, 100% {
        opacity: 0.2;
        transform: translate3d(-50%, 0, 0) scale(0.86);
    }
    50% {
        opacity: 0.46;
        transform: translate3d(-50%, 0, 0) scale(1.08);
    }
}

@keyframes rank-pride-orbit-idle {
    from {
        opacity: 0.3;
        transform: translate3d(-50%, 0, 0) rotate(0deg) scale(0.96);
    }
    50% { opacity: 0.52; }
    to {
        opacity: 0.3;
        transform: translate3d(-50%, 0, 0) rotate(360deg) scale(0.96);
    }
}

@keyframes rank-aura-overdrive {
    from {
        opacity: 0.48;
        transform: translate3d(-50%, 0, 0) scale(0.9);
    }
    to {
        opacity: 0.92;
        transform: translate3d(-50%, 0, 0) scale(1.18);
    }
}

@keyframes rank-orbit-overdrive {
    from {
        opacity: 0.74;
        transform: translate3d(-50%, 0, 0) rotate(0deg) scale(1.04);
    }
    to {
        opacity: 0.74;
        transform: translate3d(-50%, 0, 0) rotate(360deg) scale(1.04);
    }
}

@keyframes rank-mechanism-orbit {
    from { transform: rotate(0deg) scale(0.98); }
    to { transform: rotate(360deg) scale(0.98); }
}

@keyframes rank-mechanism-scan {
    from {
        opacity: 0.58;
        transform: translate(-50%, -50%) scaleX(0.42);
    }
    to {
        opacity: 1;
        transform: translate(-50%, -50%) scaleX(1.14);
    }
}

@keyframes rank-star-array {
    from {
        filter: brightness(1) drop-shadow(0 0 0 transparent);
    }
    to {
        filter: brightness(1.38) drop-shadow(0 0 0.32rem color-mix(in srgb, var(--rank-aura-alt) 72%, transparent));
    }
}

@keyframes rank-crest-settle {
    0% {
        opacity: 0;
        transform: translate3d(0, 0.75rem, 0) scale(0.84) rotate(-2.5deg);
    }

    68% {
        opacity: 1;
        transform: translate3d(0, -0.12rem, 0) scale(1.025) rotate(0.35deg);
    }

    100% {
        opacity: 1;
        transform: none;
    }
}

@keyframes rank-chip-settle {
    0% {
        opacity: 0;
        transform: translate3d(0, 0.45rem, 0) scale(0.88) rotate(-1.5deg);
    }

    100% {
        opacity: 1;
        transform: none;
    }
}

@keyframes rank-plate-catch {
    0%,
    56% {
        transform: scale(0.98) rotate(1.25deg);
    }

    100% {
        transform: none;
    }
}

@keyframes rank-value-open {
    0% {
        opacity: 0;
        transform: translate(-50%, -50%) scaleX(0.25);
    }

    100% {
        opacity: 1;
        transform: translate(-50%, -50%) scaleX(1);
    }
}

@keyframes rank-mark-settle {
    0% {
        opacity: 0;
        transform: translateY(0.3rem) scale(0.55) rotate(-18deg);
    }

    100% {
        opacity: 1;
        transform: none;
    }
}

.round-ledger-disclosure {
    margin: clamp(1.25rem, 2.5vw, 2rem) clamp(1rem, 2vw, 1.5rem) 0;
}

.round-ledger-disclosure__summary {
    position: relative;
    min-height: 3.5rem;
    display: grid;
    grid-template-columns: minmax(7rem, 1fr) auto auto 2rem;
    gap: clamp(0.75rem, 2vw, 1.5rem);
    align-items: center;
    padding: 0.7rem 0.75rem 0.7rem clamp(1rem, 2vw, 1.4rem);
    border: 1px dashed var(--rule-strong);
    border-radius: 0.35rem;
    color: var(--ink-soft);
    font-family: var(--mono);
    font-size: 0.625rem;
    font-variant-numeric: tabular-nums;
    letter-spacing: 0.08em;
    list-style: none;
    text-transform: uppercase;
    cursor: pointer;
    transition:
        border-color 220ms ease,
        background-color 220ms ease,
        color 220ms ease;
}

.round-ledger-disclosure__summary::-webkit-details-marker {
    display: none;
}

.round-ledger-disclosure__summary::before {
    content: "";
    position: absolute;
    top: 0.55rem;
    bottom: 0.55rem;
    left: 0;
    width: 2px;
    background: var(--season-accent);
    transform: scaleY(0.35);
    transform-origin: center;
    transition: transform 280ms cubic-bezier(0.22, 1, 0.36, 1);
}

.round-ledger-disclosure__summary:focus-visible {
    outline: 1px solid var(--season-accent);
    outline-offset: 3px;
}

.round-ledger-disclosure__label {
    color: var(--ink);
    font-weight: 700;
    letter-spacing: 0.14em;
}

.round-ledger-disclosure__range {
    color: var(--season-accent);
}

.round-ledger-disclosure__coverage {
    white-space: nowrap;
}

.round-ledger-disclosure__toggle {
    position: relative;
    width: 2rem;
    aspect-ratio: 1;
    justify-self: end;
    border: 1px dashed color-mix(in srgb, var(--season-accent) 72%, var(--rule));
    border-radius: 50%;
}

.round-ledger-disclosure__toggle::before,
.round-ledger-disclosure__toggle::after {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    width: 0.65rem;
    border-top: 1px solid var(--season-accent);
    transform: translate(-50%, -50%);
    transition: transform 280ms cubic-bezier(0.22, 1, 0.36, 1);
}

.round-ledger-disclosure__toggle::after {
    transform: translate(-50%, -50%) rotate(90deg);
}

.round-ledger-disclosure[open] > .round-ledger-disclosure__summary {
    border-bottom-color: var(--season-accent);
    background: color-mix(in srgb, var(--season-accent) 8%, transparent);
    color: var(--ink);
}

.round-ledger-disclosure[open] > .round-ledger-disclosure__summary::before {
    transform: scaleY(1);
}

.round-ledger-disclosure[open] .round-ledger-disclosure__toggle::after {
    transform: translate(-50%, -50%) rotate(0deg) scaleX(0);
}

@media (hover: hover) {
    .round-ledger-disclosure__summary:hover {
        border-color: var(--season-accent);
        background: color-mix(in srgb, var(--season-accent) 6%, transparent);
        color: var(--ink);
    }

    .round-ledger-disclosure__summary:hover::before {
        transform: scaleY(1);
    }
}

.round-ledger {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    margin: 0;
    padding: 0;
    gap: 0.55rem;
    padding: 0.8rem 0;
    border-left: 0;
    list-style: none;
}

.round-entry {
    position: relative;
    min-width: 0;
    min-height: 10.25rem;
    display: flex;
    flex-direction: column;
    padding: 0.8rem 0.75rem 0.85rem;
    border: 0.2rem solid color-mix(in srgb, var(--season-accent) 56%, #3a372d);
    border-radius: 0.7rem 0.5rem 0.65rem 0.45rem;
    font-family: var(--mono);
    background:
        repeating-linear-gradient(100deg, rgba(255, 255, 255, 0.02) 0 1px, transparent 1px 4px),
        rgba(17, 19, 16, 0.88);
    font-variant-numeric: tabular-nums;
}

.round-entry[data-rank="emerald"] {
    box-shadow: 2px 0 0 rgba(112, 139, 113, 0.7) inset;
}

.round-entry[data-rank="sapphire"] {
    box-shadow: 2px 0 0 rgba(111, 146, 160, 0.75) inset;
}

.round-entry[data-rank="ruby"] {
    box-shadow: 2px 0 0 rgba(162, 83, 75, 0.8) inset;
}

.round-entry[data-rank="pride"] {
    box-shadow: 2px 0 0 rgba(181, 154, 99, 0.7) inset;
}

.round-entry[data-published="false"] {
    color: var(--ink-soft);
    border-style: dashed;
    background: rgba(238, 232, 220, 0.025);
}

.round-entry--live {
    border-color: var(--vermilion);
    box-shadow: 0 0 0 2px var(--thread-bone), 0 0 0 4px var(--thread-red-dark);
}

.round-entry__top {
    display: flex;
    justify-content: space-between;
    gap: 0.75rem;
    align-items: flex-start;
}

.round-entry__number {
    min-height: 2.75rem;
    display: inline-flex;
    align-items: center;
    align-self: flex-start;
    color: var(--vermilion-dark);
    font-size: 0.625rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-decoration: none;
}

.round-entry__number:hover,
.round-entry__number:focus-visible {
    text-decoration: underline;
    text-underline-offset: 0.25em;
}

.round-entry__rp {
    margin-top: auto;
    color: var(--ink);
    font-size: clamp(0.68rem, 1vw, 0.82rem);
    line-height: 1.15;
}

.round-entry[data-published="false"] .round-entry__rp {
    color: var(--ink-soft);
    font-size: 0.625rem;
    font-weight: 600;
    letter-spacing: 0.05em;
    text-transform: uppercase;
}

.round-entry__rank,
.round-entry__placement {
    display: block;
    overflow: hidden;
    margin-top: 0.32rem;
    color: var(--ink-soft);
    font-size: 0.6875rem;
    line-height: 1.35;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.round-entry__rank {
    color: var(--brass);
}

.round-entry[data-published="false"] .round-entry__placement {
    overflow: visible;
    text-overflow: clip;
    white-space: normal;
}

.round-entry__live-label {
    position: absolute;
    top: 0.65rem;
    right: 4.35rem;
    color: var(--vermilion);
    font-size: 0.625rem;
    font-weight: 750;
    letter-spacing: 0.12em;
    text-transform: uppercase;
}

.ta-ledger {
    margin-top: clamp(4rem, 8vw, 8rem);
}

.ta-ledger__header {
    display: grid;
    grid-template-columns: minmax(15rem, 1fr) minmax(16rem, 1fr);
    gap: clamp(2rem, 5vw, 5rem);
    align-items: end;
    padding-bottom: clamp(1.5rem, 3vw, 2.5rem);
}

.ta-ledger__header > p {
    max-width: 60ch;
    margin: 0;
    color: var(--ink-soft);
    font-size: 0.78rem;
    line-height: 1.7;
}

.season-ledger {
    border-top: 2px dashed var(--thread-gold);
}

.season-entry {
    border-bottom: 1px dashed var(--rule-strong);
}

.season-entry__summary {
    display: grid;
    grid-template-columns: minmax(8rem, 0.8fr) minmax(6rem, 0.55fr) minmax(9rem, 1fr) minmax(10rem, 1.2fr);
    gap: 1rem;
    align-items: center;
    padding: 1.25rem 1.25rem;
    border-radius: 0.35rem;
    cursor: pointer;
    list-style-position: outside;
}

.season-entry__summary:hover,
.season-entry__summary:focus-visible {
    background:
        repeating-linear-gradient(90deg, rgba(255, 255, 255, 0.018) 0 1px, transparent 1px 4px),
        rgba(238, 232, 220, 0.035);
}

.season-entry__summary:focus-visible {
    outline: 2px dashed var(--focus-stitch);
    outline-offset: -4px;
}

.season-entry[open] .season-entry__summary {
    border-bottom: 1px solid var(--rule);
}

.season-entry__season {
    color: var(--vermilion);
    font-family: var(--display-serif);
    font-weight: 850;
    font-size: clamp(1.5rem, 2.5vw, 2.25rem);
    line-height: 1;
}

.season-entry[open] .season-entry__season {
    color: var(--ink);
}

.season-entry__count,
.season-entry__matches,
.season-entry__snapshot {
    color: var(--ink-soft);
    font-family: var(--mono);
    font-size: 0.62rem;
    font-weight: 650;
    letter-spacing: 0.06em;
    line-height: 1.5;
    text-transform: uppercase;
}

.season-entry__snapshot {
    justify-self: end;
    color: var(--vermilion-dark);
    text-align: right;
}

.record-table-wrap {
    max-width: 100%;
    overflow-x: auto;
    overscroll-behavior-inline: contain;
    scrollbar-color: var(--vermilion) transparent;
    -webkit-overflow-scrolling: touch;
}

.record-table-wrap:focus-visible {
    outline: 2px dashed var(--focus-stitch);
    outline-offset: 4px;
}

.record-table__pan-cue {
    display: none;
}

.record-table {
    width: 100%;
    min-width: 880px;
    border-collapse: collapse;
    border-top: 0;
    color: var(--ink);
    font-family: var(--mono);
    font-size: 0.6875rem;
    font-variant-numeric: tabular-nums;
    line-height: 1.45;
}

.record-table th,
.record-table td {
    padding: 0.85rem 0.65rem;
    border-top: 1px solid rgba(241, 228, 197, 0.08);
    border-bottom: 1px solid rgba(241, 228, 197, 0.13);
    vertical-align: top;
    text-align: left;
    background:
        repeating-linear-gradient(90deg, rgba(255, 255, 255, 0.012) 0 1px, transparent 1px 4px),
        rgba(17, 19, 16, 0.86);
}

.record-table thead th {
    position: sticky;
    top: 0;
    z-index: 1;
    color: var(--ink-soft);
    background:
        repeating-linear-gradient(0deg, rgba(255, 255, 255, 0.018) 0 1px, transparent 1px 4px),
        var(--paper);
    font-size: 0.625rem;
    font-weight: 700;
    letter-spacing: 0.09em;
    text-transform: uppercase;
}

.record-table tbody tr[data-match~="horus"] .record-table__time,
.record-table tbody tr[data-match~="horus"] .record-table__placement {
    color: var(--ink);
    font-weight: 750;
}

.record-table tbody tr[data-match~="horus"] .record-table__placement {
    color: var(--brass);
}

.record-table tbody tr[data-match~="horus"] .record-table__time {
    font-size: 0.78rem;
}

.record-table tbody tr:hover {
    background: rgba(238, 232, 220, 0.025);
}

.record-table tbody tr:hover td {
    background:
        repeating-linear-gradient(90deg, rgba(255, 255, 255, 0.02) 0 1px, transparent 1px 4px),
        rgba(37, 36, 28, 0.96);
}

.record-table tbody tr[data-match~="azizi"] {
    background: rgba(216, 105, 82, 0.075);
}

.record-table tbody tr[data-match~="azizi"] td {
    background: rgba(75, 38, 31, 0.45);
}

.record-table__number {
    width: 3.3rem;
    color: var(--ink-soft);
}

.record-table__course {
    width: 13rem;
    font-family: var(--sans);
    font-size: 0.74rem;
    font-weight: 600;
}

.record-table__course-name,
.record-table__identity,
.record-identity__line {
    display: block;
}

.record-table__identity {
    margin-top: 0.35rem;
    color: var(--ink-soft);
    font-family: var(--mono);
    font-size: 0.625rem;
    font-weight: 650;
    letter-spacing: 0.04em;
    line-height: 1.45;
}

.record-identity__line + .record-identity__line {
    margin-top: 0.3rem;
}

.record-identity__name,
.record-identity__kind {
    display: inline;
}

.record-identity__kind {
    margin-left: 0.45rem;
    color: var(--vermilion-dark);
    font-size: 0.625rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.record-table__placement {
    width: 5.25rem;
    white-space: nowrap;
}

.record-table__time {
    width: 6.5rem;
    font-size: 0.72rem;
    white-space: nowrap;
}

.record-table__car {
    width: 7.25rem;
}

.record-table__updated {
    width: 11.5rem;
    white-space: nowrap;
}

.record-table__source {
    width: 7.5rem;
}

.record-cell__line {
    display: block;
}

.record-cell__line + .record-cell__line {
    margin-top: 0.35rem;
}

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

.record-source-link {
    min-height: 1.5rem;
    display: inline-flex;
    align-items: center;
    color: var(--brass);
    text-decoration-thickness: 1px;
    text-underline-offset: 0.18em;
}

.record-source-links {
    display: grid;
    justify-items: start;
    gap: 0.4rem;
    white-space: nowrap;
}

.season-entry__provenance {
    margin: 0;
    padding: 0.85rem 0 1.1rem;
    color: var(--ink-soft);
    font-family: var(--mono);
    font-size: 0.625rem;
    line-height: 1.55;
}

.record-data-status,
.record-data-error {
    margin: 1rem 0 0;
    color: var(--ink-soft);
    font-family: var(--mono);
    font-size: 0.625rem;
    letter-spacing: 0.06em;
    line-height: 1.5;
    text-transform: uppercase;
}

.record-data-status--ready {
    color: var(--vermilion-dark);
}

.record-data-error {
    color: #ed8a76;
}

.ledger-status {
    margin: 0;
    padding-top: 1rem;
    display: flex;
    justify-content: space-between;
    gap: 1.5rem;
    color: var(--ink-soft);
    font-family: var(--mono);
    font-size: 0.625rem;
    font-weight: 600;
    letter-spacing: 0.06em;
    line-height: 1.55;
    text-transform: uppercase;
}

.ledger-status > span:first-child {
    max-width: 76ch;
}

.ledger-status a {
    flex: none;
    color: var(--vermilion-dark);
    text-decoration: none;
}

.ledger-sources {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: 0.55rem 1rem;
}

.method .section-heading {
    grid-column: 2 / 8;
}

.method-list {
    grid-column: 8 / 13;
    margin: 0;
    padding: 0;
    list-style: none;
    border-top: 1px solid var(--rule-strong);
}

.method-list li {
    display: grid;
    grid-template-columns: 44px 1fr;
    gap: 1.1rem;
    padding: 1.4rem 0;
    border-bottom: 1px solid var(--rule);
}

.method-number {
    color: var(--vermilion);
    font-family: var(--mono);
    font-size: 0.68rem;
}

.method-list p {
    margin: 0.55rem 0 0;
    color: var(--ink-soft);
    font-size: 0.9rem;
}

.site-footer {
    min-height: 160px;
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    gap: 2rem;
    padding: 2.5rem 0;
    font-family: var(--mono);
    font-size: 0.64rem;
    letter-spacing: 0.11em;
    text-transform: uppercase;
}

.site-footer p {
    margin: 0;
}

.site-footer p:last-child {
    color: var(--ink-soft);
    text-align: right;
}

.js .reveal,
.js .scroll-reveal {
    --reveal-delay: 0ms;
    opacity: 0;
    transform: translateY(clamp(2rem, 4vw, 3.25rem));
    transition:
        opacity 760ms ease-out var(--reveal-delay),
        transform 900ms cubic-bezier(0.22, 1, 0.36, 1) var(--reveal-delay);
}

.js .reveal.is-visible,
.js .scroll-reveal.is-visible {
    opacity: 1;
    transform: none;
}

.section-heading.reveal::before {
    content: "";
    position: absolute;
    top: -1.5rem;
    left: 0;
    width: clamp(2.75rem, 5vw, 4.5rem);
    border-top: 1px solid var(--brass);
    transform: scaleX(0);
    transform-origin: left center;
    transition: transform 900ms cubic-bezier(0.22, 1, 0.36, 1) calc(var(--reveal-delay) + 160ms);
}

.section-heading.reveal.is-visible::before {
    transform: scaleX(1);
}

@media (prefers-reduced-motion: no-preference) {
    main > section[id] {
        opacity: 1;
        transition: opacity 480ms ease-out;
    }

    main > section[id].is-section-dimmed:not(:target):not(:focus-within) {
        opacity: 0.72;
    }
}

@media (max-width: 980px) {
    :root {
        --page: min(100% - 40px, 900px);
        --page-half: min(calc(50vw - 20px), 450px);
    }

    body {
        padding-bottom: 4.75rem;
    }

    .site-header {
        grid-template-columns: 1fr auto;
        gap: 1rem;
    }

    .site-nav {
        position: fixed;
        right: auto;
        bottom: max(0.75rem, env(safe-area-inset-bottom));
        left: 50%;
        z-index: 70;
        width: min(calc(100vw - 1.5rem), 38rem);
        display: grid;
        grid-template-columns: repeat(4, minmax(0, 1fr));
        gap: 0;
        padding: 0.28rem;
        border: 1px dashed var(--thread-gold);
        border-radius: 0.55rem;
        background:
            repeating-linear-gradient(90deg, rgba(255, 255, 255, 0.018) 0 1px, transparent 1px 4px),
            #15150f;
        box-shadow: var(--patch-shadow);
        transform: translateX(-50%);
    }

    .site-nav a {
        min-height: 2.75rem;
        display: grid;
        place-items: center;
        padding-inline: 0.35rem;
        border-right: 1px solid var(--rule);
        font-size: 0.625rem;
        letter-spacing: 0.08em;
        text-align: center;
    }

    .site-nav a:last-child {
        border-right: 0;
    }

    .site-nav a::after {
        right: 50%;
        bottom: 0.2rem;
        left: 50%;
    }

    .site-nav a:hover::after,
    .site-nav a:focus-visible::after,
    .site-nav a[aria-current="location"]::after {
        right: 20%;
        left: 20%;
    }

    .hero {
        grid-template-rows: auto auto auto;
        align-content: center;
    }

    .hero-edition {
        grid-column: 1 / 4;
    }

    .hero-copy {
        grid-column: 1 / 9;
        padding-top: 3rem;
    }

    .route-study {
        right: 0;
        left: 0;
        width: auto;
        opacity: 0.2;
    }

    .route-plate {
        --route-x: 21%;
        width: clamp(28rem, 68vw, 46rem);
    }

    .route-plate[data-route-side="right"] {
        --route-x: 79%;
    }

    .section-heading,
    .records .section-heading,
    .method .section-heading {
        grid-column: 2 / 8;
    }

    .discipline-list,
    .method-list {
        grid-column: 8 / 13;
    }

    .archive-summary,
    .rank-progression__header,
    .playing-history__header {
        grid-template-columns: minmax(13rem, 0.75fr) minmax(0, 2fr);
    }

    .playing-season {
        grid-template-columns: minmax(0, 1fr) 4rem minmax(0, 1fr);
    }

    .archive-sync {
        grid-template-columns: minmax(10rem, 0.65fr) minmax(16rem, 1fr);
    }

    .archive-sync__note {
        grid-column: 1 / -1;
        padding-left: 1.1rem;
    }

    .rank-step__mast {
        grid-template-columns: 7.25rem minmax(7rem, 0.5fr) minmax(12rem, 1.4fr) minmax(9rem, 0.75fr);
        gap: 1.25rem;
    }

    .record-source-links {
        display: flex;
        flex-wrap: wrap;
        gap: 0 0.6rem;
    }

    .record-source-link {
        min-height: 2.75rem;
    }
}

@media (min-width: 761px) {
    .record-table__pan-cue.is-visible {
        width: fit-content;
        min-height: 2.75rem;
        margin: 0 0 0.35rem auto;
        display: flex;
        align-items: center;
        gap: 0.55rem;
        color: var(--brass);
        font-family: var(--mono);
        font-size: 0.8rem;
        letter-spacing: 0.12em;
    }

    .record-table__pan-cue::before {
        width: 2.5rem;
        height: 1px;
        content: "";
        background: linear-gradient(90deg, transparent, var(--rule-strong));
    }

    .record-table-wrap.is-scrollable .record-table__course {
        position: sticky;
        left: 0;
        z-index: 2;
        background: var(--fabric-sumi);
        box-shadow: 1px 0 0 var(--rule-strong), 0.9rem 0 1rem -1rem #000;
    }

    .record-table-wrap.is-scrollable .record-table thead .record-table__course {
        z-index: 3;
        background: var(--paper);
    }

    .record-table-wrap.is-scrollable .record-table tbody tr:hover .record-table__course {
        background: #25241c;
    }

    .record-table-wrap.is-scrollable .record-table tbody tr[data-match~="azizi"] .record-table__course {
        background: #2a1b17;
    }
}

@media (max-width: 760px) {
    :root {
        --page: calc(100% - 32px);
        --page-half: calc(50vw - 16px);
    }

    body {
        padding-top: 70px;
    }

    .site-header {
        min-height: 70px;
        padding-inline: 1rem;
    }

    .header-tools {
        gap: 0.9rem;
    }

    .language-picker__label {
        position: absolute;
        width: 1px;
        height: 1px;
        overflow: hidden;
        clip-path: inset(50%);
        white-space: nowrap;
    }

    .language-picker__panel {
        top: calc(100% + 0.45rem);
        width: min(21rem, calc(100vw - 2rem));
        padding: 0.7rem;
    }

    .header-tools .language-picker__link {
        min-height: 2.75rem;
        padding-inline: 0.5rem;
        font-size: 0.63rem;
    }

    .home-link {
        padding-left: 0.9rem;
    }

    .hero {
        min-height: auto;
        grid-template-columns: repeat(6, minmax(0, 1fr));
        grid-template-rows: auto;
        padding: 3.5rem 0 1.5rem;
    }

    .hero-edition {
        grid-column: 1 / 3;
    }

    .hero-copy {
        grid-column: 1 / 7;
        padding-top: 3rem;
    }

    .hero-patch {
        grid-column: 2 / 6;
        grid-row: auto;
        width: min(13rem, 64vw);
        justify-self: center;
        margin-top: 3.25rem;
    }

    h1 {
        font-size: clamp(3.2rem, 16vw, 6rem);
    }

    .route-study {
        top: 70px;
        right: 0;
        bottom: 0;
        left: 0;
        width: auto;
        opacity: 0.25;
    }

    .route-index {
        inset: 0;
    }

    .route-index__entry {
        top: 50% !important;
        right: auto !important;
        bottom: auto !important;
        left: 50% !important;
        width: min(8.5rem, 35vw);
        padding-top: 0.35rem;
        text-align: center;
        transform: translate(-50%, -50%);
    }

    .route-index__entry::before {
        right: auto !important;
        left: 50% !important;
        width: 2.25rem;
        transform: translateX(-50%);
    }

    .route-index__name {
        font-size: 0.7rem;
    }

    .js .route-plate {
        --route-x: 30%;
        width: min(118vw, 42rem);
    }

    .route-plate[data-route-side="right"] {
        --route-x: 70%;
    }

    .hero-register {
        grid-column: 1 / 7;
        grid-row: auto;
        grid-template-columns: 1fr;
        margin-top: 3.5rem;
    }

    .hero-register div,
    .hero-register div + div {
        padding: 0.85rem 0;
        border-left: 0;
        border-bottom: 1px solid var(--rule);
    }

    .section-grid {
        grid-template-columns: 36px repeat(5, minmax(0, 1fr));
        padding: 5.5rem 0;
    }

    .section-index {
        grid-column: 1;
    }

    .section-heading,
    .records .section-heading,
    .method .section-heading {
        grid-column: 2 / 7;
    }

    .discipline-list,
    .method-list {
        grid-column: 2 / 7;
        margin-top: 3.5rem;
    }

    .discipline-list {
        grid-template-columns: 1fr;
        gap: 1.5rem;
    }

    .ledger-wrap {
        grid-column: 1 / 7;
    }

    .playing-history__header {
        grid-column: 2 / 7;
        gap: 1.5rem;
    }

    .playing-history__introduction {
        padding-left: 1rem;
    }

    .playing-history__timeline {
        grid-column: 1 / 7;
    }

    .playing-history__timeline::before {
        left: 1.25rem;
    }

    .archive-summary,
    .rank-progression__header,
    .ta-ledger__header,
    .playing-history__header {
        grid-template-columns: 1fr;
        align-items: start;
    }

    .archive-sync {
        grid-template-columns: 1fr 1fr;
        gap: 1rem;
    }

    .archive-sync__note {
        grid-column: 1 / -1;
    }

    .archive-summary__stats {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        width: 100%;
    }

    .archive-stat:nth-child(3) {
        border-top: 1px solid var(--rule);
    }

    .archive-stat:nth-child(4) {
        border-top: 1px solid var(--rule);
    }

    .playing-season {
        grid-template-columns: 2.75rem minmax(0, 1fr);
        gap: 1.15rem;
        min-height: 0;
        padding: 4.75rem 0;
    }

    .playing-season::before {
        top: 6.05rem;
        left: 1.3rem;
        width: 1.7rem;
        transform: none;
    }

    .playing-season::after {
        top: 26%;
        left: 62%;
        max-width: 100vw;
        font-size: clamp(4rem, 22vw, 7rem);
        opacity: 0.76;
    }

    .playing-season__marker {
        top: 6rem;
        grid-column: 1;
        padding: 0.6rem 0.18rem;
    }

    .playing-season__marker-season {
        width: 2.2rem;
        height: 2.2rem;
        font-size: 0.625rem;
    }

    .playing-season__date {
        font-size: 0.55rem;
        writing-mode: vertical-rl;
    }

    .playing-season__summary,
    .playing-season--photos-left .playing-season__summary {
        grid-column: 2;
        grid-row: 1;
        padding: 1.25rem;
    }

    .playing-season--text-only {
        min-height: 29rem;
    }

    .playing-season__focus-title {
        font-size: clamp(2.65rem, 12vw, 4rem);
    }

    .playing-season__photos,
    .playing-season--photos-left .playing-season__photos {
        grid-column: 2;
        grid-row: 2;
        grid-template-columns: repeat(6, minmax(0, 1fr));
        gap: 0.85rem;
        margin-top: 2rem;
    }

    .playing-season__photos--count-2 .playing-season__photo-slot:nth-child(1),
    .playing-season__photos--count-3 .playing-season__photo-slot:nth-child(1),
    .playing-season__photos--count-4 .playing-season__photo-slot:nth-child(1) {
        grid-column: 1 / 7;
        grid-row: 1;
        margin-top: 0;
    }

    .playing-season__photos--count-2 .playing-season__photo-slot:nth-child(2) {
        grid-column: 2 / 6;
        grid-row: 2;
        margin-top: -1.35rem;
    }

    .playing-season__photos--count-3 .playing-season__photo-slot:nth-child(2),
    .playing-season__photos--count-4 .playing-season__photo-slot:nth-child(2) {
        grid-column: 2 / 7;
        grid-row: 2;
        margin-top: -0.35rem;
    }

    .playing-season__photos--count-3 .playing-season__photo-slot:nth-child(3),
    .playing-season__photos--count-4 .playing-season__photo-slot:nth-child(3) {
        grid-column: 1 / 6;
        grid-row: 3;
        margin-top: -0.35rem;
    }

    .playing-season__photos--count-4 .playing-season__photo-slot:nth-child(4) {
        grid-column: 2 / 7;
        grid-row: 4;
        margin-top: -0.35rem;
    }

    .rank-progression__header > p:last-child {
        grid-column: 1;
    }

    .rank-step__mast {
        grid-template-columns: 6.25rem minmax(7rem, 0.55fr) minmax(0, 1.45fr);
        gap: 1rem;
    }

    .rank-step__rp-summary {
        grid-column: 2 / 4;
        grid-template-columns: minmax(7rem, 0.7fr) minmax(0, 1.3fr);
        align-items: end;
        margin-top: 0.5rem;
        padding: 1rem 0 0;
        border-top: 1px solid var(--rule);
        border-left: 0;
    }

    .rank-step__rp-summary dt {
        grid-column: 1;
    }

    .rank-step__rp-total {
        grid-column: 1;
    }

    .rank-step__rp-state {
        grid-column: 2;
        grid-row: 1 / 3;
        align-self: end;
        padding-bottom: 0.2rem;
    }

    .round-ledger {
        grid-template-columns: repeat(4, minmax(0, 1fr));
    }

    .season-entry__summary {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 0.65rem 1rem;
    }

    .season-entry__snapshot {
        justify-self: start;
        text-align: left;
    }

    .ledger-status {
        flex-direction: column;
    }

    .ledger-sources {
        justify-content: flex-start;
    }

    .record-table-wrap {
        max-width: calc(100vw - 2rem);
        margin-right: calc((100vw - var(--page)) / -2);
        padding: 0.2rem calc((100vw - var(--page)) / 2) 1.15rem 0;
        overflow-x: auto;
        overscroll-behavior-inline: contain;
        scroll-padding-inline: 0.1rem 1rem;
        scroll-snap-type: inline mandatory;
        scrollbar-width: thin;
    }

    .record-table {
        width: max-content;
        min-width: 100%;
        display: block;
        border-top: 0;
    }

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

    .record-table tbody {
        width: max-content;
        min-width: 100%;
        display: flex;
        gap: 0.8rem;
    }

    .record-table tbody tr {
        position: relative;
        width: min(30rem, calc(100vw - 3.25rem));
        min-width: min(30rem, calc(100vw - 3.25rem));
        flex: 0 0 min(30rem, calc(100vw - 3.25rem));
        display: grid;
        grid-template-columns: minmax(0, 1fr) minmax(5.25rem, auto);
        grid-template-areas:
            "course placement"
            "time car"
            "updated updated"
            "source source";
        column-gap: 1rem;
        padding: 0.9rem 0.9rem 0.9rem 3.25rem;
        border: 1px dashed rgba(202, 167, 94, 0.52);
        border-radius: 0.55rem;
        background:
            repeating-linear-gradient(90deg, rgba(255, 255, 255, 0.018) 0 1px, transparent 1px 4px),
            rgba(17, 19, 16, 0.9);
        box-shadow: 0 0.7rem 1.5rem rgba(0, 0, 0, 0.22);
        scroll-snap-align: start;
        scroll-snap-stop: always;
    }

    .record-table__pan-cue.is-visible {
        width: fit-content;
        min-height: 2.75rem;
        margin: 0 0 0.35rem auto;
        display: flex;
        align-items: center;
        gap: 0.55rem;
        color: var(--brass);
        font-family: var(--mono);
        font-size: 0.8rem;
        letter-spacing: 0.12em;
    }

    .record-table__pan-cue::before {
        width: 2.5rem;
        height: 1px;
        content: "";
        background: linear-gradient(90deg, transparent, var(--rule-strong));
    }

    .record-table tbody tr::before {
        position: absolute;
        top: 0;
        bottom: 0;
        left: 2.55rem;
        width: 1px;
        content: "";
        background: var(--rule);
    }

    .record-table th,
    .record-table td {
        min-width: 0;
        width: auto;
        padding: 0.48rem 0;
        border: 0;
        background: transparent;
    }

    .record-table tbody tr:hover td,
    .record-table tbody tr[data-match~="azizi"] td {
        background: transparent;
    }

    .record-table td::before {
        display: block;
        margin-bottom: 0.22rem;
        color: var(--ink-soft);
        content: attr(data-label);
        font-family: var(--mono);
        font-size: 0.55rem;
        font-weight: 700;
        letter-spacing: 0.09em;
        line-height: 1.2;
        text-transform: uppercase;
    }

    .record-table__number {
        position: absolute;
        top: 1rem;
        left: 0.65rem;
        width: 1.25rem;
        padding: 0;
        font-size: 0.625rem;
        text-align: center;
    }

    .record-table__number::before {
        margin-bottom: 0.3rem;
    }

    .record-table__course {
        grid-area: course;
        align-self: start;
        padding-top: 0.4rem;
        font-size: 0.8rem;
    }

    .record-table__placement {
        grid-area: placement;
        justify-self: end;
        text-align: right;
    }

    .record-table__time {
        grid-area: time;
        padding-top: 0.7rem;
        border-top: 1px solid var(--rule);
        font-size: 0.78rem;
    }

    .record-table__car {
        grid-area: car;
        padding-top: 0.7rem;
        border-top: 1px solid var(--rule);
        text-align: right;
    }

    .record-table__updated {
        grid-area: updated;
        color: var(--ink-soft);
        white-space: normal;
    }

    .record-table__source {
        grid-area: source;
        padding-top: 0.25rem;
    }

    .record-table__placement::before,
    .record-table__car::before {
        text-align: right;
    }

    .record-source-links {
        justify-content: flex-start;
        white-space: normal;
    }
}

@media (max-width: 460px) {
    .site-mark {
        gap: 0.35rem;
        font-size: 0.68rem;
    }

    .header-tools a {
        font-size: 0.65rem;
    }

    .header-tools {
        gap: 0.65rem;
    }

    .home-link {
        display: none;
    }

    .home-link > span[aria-hidden="true"] {
        display: none;
    }

    .hero-copy {
        min-width: 0;
        padding-top: 2.4rem;
    }

    .hero-copy h1 {
        max-width: 100%;
        font-size: clamp(2.65rem, 12vw, 3rem);
    }

    .hero-lead {
        width: 100%;
        max-width: 100%;
        font-size: 0.98rem;
    }

    .route-study {
        display: none;
    }

    .route-index__alternate {
        display: none;
    }

    h1 > span:nth-child(2) {
        margin-left: 0.06em;
    }

    .discipline {
        grid-template-columns: 1fr;
        gap: 0.8rem;
    }

    .playing-history::before {
        width: 72vw;
    }

    .playing-history__header h2 {
        font-size: clamp(2.35rem, 12vw, 3.35rem);
    }

    .playing-history__introduction {
        font-size: 0.95rem;
    }

    .playing-season__marker-progress {
        display: none;
    }

    .playing-season,
    .playing-season--photos-left {
        grid-template-columns: 1.75rem minmax(0, 1fr);
        gap: 0.5rem;
    }

    .playing-season::before {
        left: 0.8rem;
        width: 1.1rem;
    }

    .playing-season__marker {
        min-width: 0;
        padding: 0.5rem 0;
    }

    .playing-season__marker::before {
        inset: -0.45rem -0.25rem;
    }

    .playing-season__marker-season {
        width: 1.7rem;
        height: 1.7rem;
        font-size: 0.56rem;
    }

    .playing-season__summary,
    .playing-season--photos-left .playing-season__summary {
        min-width: 0;
        padding: 1rem;
    }

    .playing-season__photos,
    .playing-season--photos-left .playing-season__photos {
        min-width: 0;
        gap: 0.65rem;
    }

    @media (prefers-reduced-motion: no-preference) {
        .js .playing-season--photos-right.scroll-reveal:not(.is-visible) .playing-season__summary,
        .js .playing-season--photos-left.scroll-reveal:not(.is-visible) .playing-season__summary,
        .js .playing-season--photos-right.scroll-reveal:not(.is-visible) .playing-season__photos,
        .js .playing-season--photos-left.scroll-reveal:not(.is-visible) .playing-season__photos {
            transform: translateY(1.5rem);
        }
    }

    .playing-season__photo-caption {
        grid-template-columns: 1fr;
        gap: 0.15rem;
    }

    .playing-season__photo-caption strong {
        justify-self: start;
        font-size: 0.58rem;
        text-align: left;
    }

    .archive-summary__stats {
        grid-template-columns: 1fr;
    }

    .archive-sync {
        grid-template-columns: 1fr;
        padding-left: 1rem;
    }

    .archive-sync__stamp {
        padding: 0.85rem 0 0;
        border-top: 1px solid var(--rule);
        border-left: 0;
    }

    .archive-sync__note {
        grid-column: 1;
        padding-left: 0;
    }

    .archive-stat {
        display: grid;
        grid-template-columns: 5rem 1fr;
        align-items: baseline;
        padding: 0.8rem 0;
        border-top: 1px solid var(--rule);
        border-left: 0;
    }

    .archive-stat__label {
        margin-top: 0;
    }

    .rank-step,
    .rank-step:nth-child(n + 2),
    .rank-step:nth-child(n + 3) {
        padding: 0.55rem;
        border: 0.32rem solid color-mix(in srgb, var(--season-accent) 64%, #29281f);
    }

    .rank-step--sapphire {
        padding: 0.65rem;
    }

    .rank-step__mast {
        grid-template-columns: minmax(0, 1fr) 5.5rem;
        gap: 1rem 0.75rem;
        padding: 1rem;
    }

    .rank-step__season {
        grid-column: 1 / -1;
        grid-row: 1;
        flex-direction: row;
        align-items: baseline;
        justify-content: flex-start;
        gap: 0.65rem;
        padding: 0 0 0.8rem;
        border-right: 0;
        border-bottom: 1px solid var(--rule);
    }

    .rank-step__season-number {
        font-size: 3.4rem;
    }

    .rank-step__season-rounds {
        margin: 0 0 0 auto;
    }

    .rank-step__mast > .rank-badge {
        grid-column: 2;
        grid-row: 2;
        width: 5.5rem;
        justify-self: end;
    }

    .rank-step--sapphire .rank-step__mast {
        grid-template-columns: minmax(0, 1fr) 7rem;
    }

    .rank-step--sapphire .rank-step__mast > .rank-badge {
        width: 7rem;
    }

    .rank-step__identity {
        grid-column: 1;
        grid-row: 2;
        align-self: center;
    }

    .rank-step__rp-summary,
    .rank-step--sapphire .rank-step__rp-summary {
        grid-column: 1 / -1;
        grid-row: 3;
        display: flex;
        flex-direction: column;
        align-items: flex-start;
    }

    .rank-step__rp-summary dt,
    .rank-step__rp-summary dd {
        width: 100%;
    }

    .rank-step__rp-state {
        align-self: flex-start;
        margin-top: 0.55rem !important;
        padding-bottom: 0;
    }

    .rank-step__title,
    .rank-step--sapphire .rank-step__title {
        font-size: clamp(1.4rem, 8vw, 2.15rem);
    }

    .rank-step__context {
        font-size: 0.6875rem;
    }

    .round-ledger {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .round-ledger-disclosure {
        margin-inline: 1rem;
    }

    .round-ledger-disclosure__summary {
        grid-template-columns: minmax(0, 1fr) auto 2rem;
    }

    .round-ledger-disclosure__coverage {
        display: none;
    }

    .round-entry {
        min-height: 9.75rem;
    }

    .site-footer {
        min-height: 130px;
        flex-direction: column;
        align-items: flex-start;
        justify-content: flex-end;
        gap: 0.7rem;
    }

    .site-footer p:last-child {
        text-align: left;
    }
}

@media (prefers-reduced-motion: reduce) {
    ::view-transition-old(root),
    ::view-transition-new(root) {
        animation: none !important;
    }

    *,
    *::before,
    *::after {
        scroll-behavior: auto !important;
        animation: none !important;
        transition: none !important;
    }

    .js .reveal,
    .js .scroll-reveal {
        opacity: 1;
        transform: none;
    }

    .section-heading.reveal::before {
        transform: scaleX(1);
    }

    .js .route-line,
    .js .route-stitch-mask {
        stroke-dashoffset: 0;
    }

    .route-marker {
        display: none;
    }

    .route-plate.is-route-active {
        will-change: auto;
    }
}

/* Smooth section travel, parallax layers and sewn film panels. */
html {
    scroll-behavior: smooth;
}

#videos {
    scroll-margin-top: 6.5rem;
}

.drive-videos {
    min-height: 100svh;
    background:
        radial-gradient(circle at 82% 14%, rgba(209, 75, 57, 0.1), transparent 28rem),
        repeating-linear-gradient(90deg, rgba(255, 255, 255, 0.018) 0 1px, transparent 1px 4px),
        var(--paper-light);
}

.drive-videos .section-heading {
    grid-column: 3 / span 7;
}

.video-channel-link {
    width: max-content;
    max-width: 100%;
    display: inline-flex;
    gap: 0.55rem;
    margin-top: 1.5rem;
    padding: 0.55rem 0.8rem;
    border: 1px dashed var(--vermilion);
    border-radius: 0.3rem;
    color: var(--ink-soft);
    font-family: var(--mono);
    font-size: 0.65rem;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-decoration: none;
    text-transform: uppercase;
}

.video-channel-link:hover,
.video-channel-link:focus-visible {
    color: var(--ink);
}

.drive-films {
    grid-column: 2 / -1;
    margin-top: clamp(3rem, 7vw, 6rem);
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: clamp(1rem, 2vw, 2rem);
}

.drive-film {
    min-width: 0;
    align-self: start;
    padding: 0.6rem 0.6rem 1.15rem;
    border: 1px dashed rgba(202, 167, 94, 0.48);
    border-radius: 0.65rem;
    background:
        repeating-linear-gradient(0deg, rgba(255, 255, 255, 0.016) 0 1px, transparent 1px 4px),
        rgba(11, 12, 9, 0.58);
    box-shadow: var(--patch-shadow);
    translate: 0 var(--parallax-y, 0px);
}

.drive-film:nth-child(2) {
    margin-top: clamp(1.75rem, 5vw, 4.5rem);
}

.drive-film__media {
    position: relative;
    overflow: hidden;
    aspect-ratio: 16 / 9;
    border: 0.3rem solid #2d2c23;
    border-radius: 0.35rem;
    background: #000;
}

.drive-film__media::after {
    position: absolute;
    inset: 0.22rem;
    border: 1px dashed rgba(241, 228, 197, 0.38);
    content: "";
    pointer-events: none;
}

.drive-film iframe {
    width: 100%;
    height: 100%;
    display: block;
    border: 0;
}

.drive-film__meta {
    margin: 1rem 0 0;
    color: var(--ink-soft);
    font-family: var(--mono);
    font-size: 0.6rem;
    font-weight: 700;
    letter-spacing: 0.12em;
}

.drive-film h3 {
    margin: 0.4rem 0 0;
    font-family: var(--display-serif);
    font-size: clamp(1.5rem, 2.6vw, 2.45rem);
    font-weight: 850;
    line-height: 1.08;
}

.drive-film > a {
    width: max-content;
    display: inline-flex;
    gap: 0.4rem;
    margin-top: 0.9rem;
    color: var(--ink-soft);
    font-family: var(--mono);
    font-size: 0.6rem;
    letter-spacing: 0.08em;
    text-decoration: none;
    text-transform: uppercase;
}

.drive-film > a:hover,
.drive-film > a:focus-visible {
    color: var(--vermilion-dark);
}

[data-parallax] {
    will-change: translate;
}

.route-study {
    translate: 0 var(--parallax-y, 0px);
}

.js .reveal:focus-within,
.js .scroll-reveal:focus-within {
    opacity: 1;
    transform: none;
}

@media (max-width: 900px) {
    .drive-videos .section-heading,
    .drive-films {
        grid-column: 2 / -1;
    }

    .drive-films {
        grid-template-columns: 1fr;
    }

    .drive-film:nth-child(2) {
        margin-top: 0;
    }
}

@media (prefers-reduced-motion: reduce) {
    [data-parallax] {
        translate: none !important;
        will-change: auto;
    }
}

/* Textile motion guardrails: settle and sheen only, never perpetual rank effects. */
@media (prefers-reduced-motion: no-preference) {
    .rank-badge--pride:not(.rank-badge--compact)::before,
    .rank-badge--pride:not(.rank-badge--compact)::after {
        animation: none;
    }

    .hero-patch::after {
        transition: opacity 320ms ease, transform 620ms cubic-bezier(0.22, 1, 0.36, 1);
    }
}

@media (prefers-reduced-motion: no-preference) and (hover: hover) {
    .hero-patch,
    .discipline,
    .drive-film,
    .rank-step {
        transition:
            transform 420ms cubic-bezier(0.22, 1, 0.36, 1),
            filter 320ms ease,
            box-shadow 320ms ease;
    }

    .hero-patch:hover {
        transform: translate3d(0, -0.25rem, 0) rotate(-1deg);
    }

    .hero-patch:hover::after {
        opacity: 0.62;
        transform: translateX(5%);
    }

    .discipline:hover,
    .drive-film:hover,
    .rank-step:is(:hover, :focus-within) {
        transform: translate3d(0, -0.22rem, 0);
    }

    .rank-step:is(:hover, :focus-within) {
        background:
            repeating-linear-gradient(96deg, rgba(255, 255, 255, 0.028) 0 1px, transparent 1px 5px),
            #2c2b22;
        box-shadow:
            0 0 0 2px var(--thread-bone),
            0 0 0 5px color-mix(in srgb, var(--season-accent) 64%, #29281f),
            0 1.5rem 3.1rem rgba(0, 0, 0, 0.36);
    }

    html:not([data-rank-input="touch"]) .rank-badge:not(.rank-badge--empty):hover::before,
    html:not([data-rank-input="touch"]) .rank-badge:not(.rank-badge--empty):hover::after,
    .rank-badge:is(:active, .is-mechanizing, :focus-visible)::before,
    .rank-badge:is(:active, .is-mechanizing, :focus-visible)::after,
    .round-entry:is(:active, :focus-within) .rank-badge::before,
    .round-entry:is(:active, :focus-within) .rank-badge::after {
        animation: none;
    }

    html:not([data-rank-input="touch"]) .rank-badge.rank-badge--tier:hover > img,
    html:not([data-rank-input="touch"]) .rank-badge.rank-badge--pride:hover > img,
    .rank-badge:is(:active, .is-mechanizing, :focus-visible) > img,
    .round-entry:is(:active, :focus-within) .rank-badge > img {
        rotate: 0deg;
        scale: 1.025;
        filter:
            saturate(0.96)
            contrast(1.08)
            drop-shadow(0 0.16rem 0 rgba(255, 255, 255, 0.2))
            drop-shadow(0 0.48rem 0.3rem rgba(0, 0, 0, 0.5));
    }
}

/* Fullscreen time-attack patch universe and source-faithful media treatment. */
body.is-ta-season-open,
body.is-media-lightbox-open {
    overflow: hidden;
}

/* Keep the live course study present behind the editorial layer at every size. */
.route-study {
    display: block;
}

.hero-patch {
    width: min(100%, 21.5rem);
}

/* The rank art is now rendered from detailed transparent embroidery assets. */
.rank-badge__asset {
    position: relative;
    z-index: 1;
    display: block;
    width: 100%;
    height: auto;
    aspect-ratio: 1;
    object-fit: contain;
    filter:
        saturate(0.94)
        contrast(1.055)
        drop-shadow(0 -0.06rem 0 rgba(255, 247, 221, 0.16))
        drop-shadow(0 0.48rem 0.3rem rgba(0, 0, 0, 0.62));
    transform-origin: center;
}

.rank-badge__value,
.rank-badge__value--compact {
    top: 53%;
    width: 47%;
    min-height: 1.45rem;
    padding: 0.16rem 0.34rem 0.14rem;
    border: 1px solid rgba(241, 228, 197, 0.46);
    border-radius: 0.28rem 0.2rem 0.26rem 0.18rem;
    background:
        repeating-linear-gradient(102deg, rgba(255, 255, 255, 0.035) 0 1px, transparent 1px 3px),
        rgba(6, 8, 7, 0.96);
    box-shadow:
        0 0 0 2px rgba(21, 24, 20, 0.82),
        0 0.22rem 0.35rem rgba(0, 0, 0, 0.72),
        0 1px 0 rgba(255, 255, 255, 0.07) inset;
    filter: none;
}

.rank-badge__value-number {
    color: #fff1cf;
    font-size: clamp(0.78rem, 1.15vw, 1rem);
    font-weight: 950;
    letter-spacing: -0.045em;
    -webkit-text-stroke: 0.025em #161911;
    text-shadow:
        0 -1px 0 rgba(255, 255, 255, 0.16),
        0 1.5px 0 #080a07,
        0 2px 3px rgba(0, 0, 0, 0.9);
}

.rank-badge__value--compact {
    width: 52%;
    min-height: 0.72rem;
    padding: 0.06rem 0.12rem;
    border-width: 1px;
    border-radius: 0.12rem;
    box-shadow: 0 0 0 1px rgba(21, 24, 20, 0.8), 0 1px 2px rgba(0, 0, 0, 0.8);
}

.rank-badge__value--compact .rank-badge__value-number {
    font-size: 0.43rem;
}

.rank-stars__mark {
    display: block;
    width: clamp(0.76rem, 1.1vw, 0.96rem);
    height: auto;
    aspect-ratio: 1;
    object-fit: contain;
    filter:
        saturate(0.96)
        contrast(1.06)
        drop-shadow(0 0.1rem 0.08rem rgba(0, 0, 0, 0.8));
}

.rank-stars--compact .rank-stars__mark {
    width: 0.44rem;
}

@media (hover: hover) and (prefers-reduced-motion: no-preference) {
    html:not([data-rank-input="touch"]) .rank-badge.rank-badge--tier:hover > .rank-badge__asset,
    html:not([data-rank-input="touch"]) .rank-badge.rank-badge--pride:hover > .rank-badge__asset {
        scale: 1;
        filter:
            saturate(0.96)
            contrast(1.055)
            drop-shadow(0 -0.06rem 0 rgba(255, 247, 221, 0.16))
            drop-shadow(0 0.55rem 0.34rem rgba(0, 0, 0, 0.66));
    }

    .rank-badge:is(:active, .is-mechanizing, :focus-visible) > .rank-badge__asset,
    .round-entry:is(:active, :focus-within) .rank-badge > .rank-badge__asset {
        scale: 1.012;
        filter:
            saturate(0.96)
            contrast(1.055)
            drop-shadow(0 -0.06rem 0 rgba(255, 247, 221, 0.16))
            drop-shadow(0 0.55rem 0.34rem rgba(0, 0, 0, 0.66));
    }
}

/* Every season is a launch point; records live on the map badges, never a table. */
.record-table-wrap,
.record-table,
.record-table__pan-cue {
    display: none;
}

.ta-ledger__header {
    grid-template-columns: minmax(16rem, 0.9fr) minmax(20rem, 1fr);
    gap: clamp(1.5rem, 4vw, 4rem);
}

.ta-ledger__header h3 {
    font-size: clamp(2.15rem, 4.2vw, 4.6rem);
    line-height: 0.96;
}

.season-ledger {
    width: 100%;
    box-sizing: border-box;
    display: flex;
    gap: 0.75rem;
    padding: 0.7rem clamp(0.85rem, 1.8vw, 1.3rem) 1.35rem;
    overflow-x: auto;
    overflow-y: visible;
    overscroll-behavior-inline: contain;
    scroll-padding-inline: clamp(0.85rem, 1.8vw, 1.3rem);
    scroll-snap-type: inline mandatory;
    scrollbar-color: var(--thread-red) transparent;
    border-top: 2px dashed var(--thread-gold);
    -webkit-overflow-scrolling: touch;
}

.season-ledger::after {
    width: 0.55rem;
    flex: 0 0 0.55rem;
    content: "";
}

.season-entry {
    width: clamp(15.5rem, 24vw, 20rem);
    min-width: 0;
    flex: 0 0 clamp(15.5rem, 24vw, 20rem);
    border: 0;
    scroll-snap-align: start;
    scroll-snap-stop: always;
}

.season-entry__summary {
    appearance: none;
    width: 100%;
    min-height: 10.25rem;
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    grid-auto-rows: min-content;
    gap: 0.58rem 0.9rem;
    align-content: end;
    padding: 1.15rem;
    border: 0.28rem solid #554630;
    border-radius: 0.8rem 0.55rem 0.72rem 0.5rem;
    background:
        linear-gradient(128deg, transparent 24%, rgba(255, 255, 255, 0.055) 40%, transparent 56%),
        repeating-linear-gradient(102deg, rgba(255, 255, 255, 0.025) 0 1px, transparent 1px 4px),
        repeating-linear-gradient(7deg, transparent 0 5px, rgba(0, 0, 0, 0.09) 5px 6px),
        #24241c;
    color: var(--ink);
    box-shadow:
        0 0 0 1px var(--thread-bone),
        0 0 0 4px #8b7040,
        0 0 0 6px #171812,
        0 0.75rem 1.35rem rgba(0, 0, 0, 0.38);
    font: inherit;
    text-align: left;
    cursor: pointer;
}

.season-entry__summary::-webkit-details-marker {
    display: none;
}

.season-entry__summary::after {
    grid-column: 2;
    grid-row: 1 / 5;
    align-self: center;
    color: var(--thread-gold);
    content: "↗";
    font-family: var(--mono);
    font-size: 1.35rem;
    line-height: 1;
}

.season-entry__summary:is(:hover, :focus-visible) {
    background:
        linear-gradient(128deg, transparent 18%, rgba(255, 255, 255, 0.075) 39%, transparent 58%),
        repeating-linear-gradient(102deg, rgba(255, 255, 255, 0.03) 0 1px, transparent 1px 4px),
        repeating-linear-gradient(7deg, transparent 0 5px, rgba(0, 0, 0, 0.09) 5px 6px),
        #2a2a20;
}

.season-entry__summary:focus-visible {
    outline: 2px dashed var(--focus-stitch);
    outline-offset: -0.65rem;
}

.season-entry__season {
    grid-column: 1;
    color: var(--thread-bone);
    font-size: clamp(1.65rem, 2.7vw, 2.4rem);
    text-shadow: 0 1px 0 #6d6147, 0 3px 4px rgba(0, 0, 0, 0.72);
}

.season-entry__count,
.season-entry__matches,
.season-entry__snapshot {
    grid-column: 1;
    justify-self: start;
    color: var(--ink-soft);
    text-align: left;
}

.season-entry__snapshot {
    color: var(--thread-gold);
}

/* Native dialog fills the viewport; the header stays fixed while the badge field pans. */
.ta-season-dialog {
    width: 100vw;
    max-width: none;
    height: 100dvh;
    max-height: none;
    margin: 0;
    padding: 0;
    overflow: hidden;
    border: 0;
    background:
        radial-gradient(circle at 18% 18%, rgba(202, 167, 94, 0.1), transparent 36rem),
        repeating-linear-gradient(90deg, rgba(255, 255, 255, 0.018) 0 1px, transparent 1px 4px),
        repeating-linear-gradient(0deg, rgba(0, 0, 0, 0.08) 0 1px, transparent 1px 5px),
        #0e100d;
    color: var(--ink);
}

.ta-season-dialog[open] {
    display: block;
}

.ta-season-dialog::backdrop {
    background: rgba(4, 5, 4, 0.96);
}

.ta-season-dialog__shell {
    width: 100%;
    height: 100%;
    display: grid;
    grid-template-rows: auto minmax(0, 1fr) auto;
    overflow: hidden;
}

.ta-season-dialog[open] .ta-season-dialog__shell {
    animation: ta-archive-enter 560ms cubic-bezier(0.22, 1, 0.36, 1) both;
}

.ta-season-dialog.is-closing .ta-season-dialog__shell {
    animation: ta-archive-exit 360ms cubic-bezier(0.55, 0, 1, 0.45) both;
    pointer-events: none;
}

@keyframes ta-archive-enter {
    from {
        opacity: 0;
        clip-path: inset(46% 4% 46% 4% round 0.8rem);
        transform: scale(0.975);
    }
    to {
        opacity: 1;
        clip-path: inset(0);
        transform: scale(1);
    }
}

@keyframes ta-archive-exit {
    from {
        opacity: 1;
        clip-path: inset(0);
        transform: scale(1);
    }
    to {
        opacity: 0;
        clip-path: inset(47% 8% 47% 8% round 0.8rem);
        transform: scale(0.985);
    }
}

.ta-season-dialog__header {
    position: sticky;
    top: 0;
    z-index: 20;
    min-width: 0;
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 0.8rem 2rem;
    align-items: center;
    padding:
        max(1rem, env(safe-area-inset-top))
        max(1.25rem, env(safe-area-inset-right))
        0.95rem
        max(1.25rem, env(safe-area-inset-left));
    border-bottom: 1px dashed rgba(241, 228, 197, 0.3);
    background:
        repeating-linear-gradient(96deg, rgba(255, 255, 255, 0.025) 0 1px, transparent 1px 4px),
        rgba(16, 18, 14, 0.96);
    box-shadow: 0 0.75rem 2rem rgba(0, 0, 0, 0.34);
    backdrop-filter: blur(1rem);
}

.ta-season-dialog__heading {
    min-width: 0;
}

.ta-season-dialog__eyebrow {
    margin: 0 0 0.22rem;
    color: var(--thread-red);
    font-family: var(--mono);
    font-size: 0.58rem;
    font-weight: 750;
    letter-spacing: 0.16em;
    line-height: 1.2;
    text-transform: uppercase;
}

.ta-season-dialog__title {
    margin: 0;
    overflow-wrap: anywhere;
    color: var(--thread-bone);
    font-family: var(--display-serif);
    font-size: clamp(1.7rem, 3vw, 3.1rem);
    font-weight: 900;
    letter-spacing: -0.025em;
    line-height: 0.95;
    text-shadow: 0 1px 0 #665a40, 0 3px 6px rgba(0, 0, 0, 0.72);
}

.ta-season-dialog__meta {
    margin: 0.42rem 0 0;
    color: var(--ink-soft);
    font-family: var(--mono);
    font-size: 0.6rem;
    font-weight: 650;
    letter-spacing: 0.055em;
    line-height: 1.45;
    text-transform: uppercase;
}

.ta-season-dialog__controls {
    display: flex;
    gap: 0.45rem;
    align-items: center;
}

.ta-season-dialog__control,
.ta-season-dialog__close {
    appearance: none;
    min-width: 2.75rem;
    min-height: 2.75rem;
    display: inline-grid;
    place-items: center;
    padding: 0.55rem 0.75rem;
    border: 1px dashed rgba(241, 228, 197, 0.48);
    border-radius: 0.32rem;
    background: #22231b;
    color: var(--thread-bone);
    font-family: var(--mono);
    font-size: 0.62rem;
    font-weight: 750;
    letter-spacing: 0.08em;
    line-height: 1;
    text-transform: uppercase;
    cursor: pointer;
}

.ta-season-dialog__control:is(:hover, :focus-visible),
.ta-season-dialog__close:is(:hover, :focus-visible) {
    border-color: var(--focus-stitch);
    background: #323126;
    color: #fff4d7;
}

.ta-season-dialog__control:focus-visible,
.ta-season-dialog__close:focus-visible {
    outline: 2px solid var(--focus-stitch);
    outline-offset: 3px;
}

.ta-season-dialog__gallery {
    position: relative;
    min-width: 0;
    min-height: 0;
    display: block;
    padding: 0;
    overflow: auto;
    overscroll-behavior: contain;
    scroll-behavior: auto;
    scrollbar-color: var(--thread-red) #171812;
    scrollbar-width: thin;
    touch-action: none;
    cursor: grab;
    -webkit-overflow-scrolling: touch;
}

.ta-season-dialog__gallery.is-dragging {
    cursor: grabbing;
    user-select: none;
}

.ta-season-dialog__gallery:focus-visible {
    outline: 2px dashed var(--focus-stitch);
    outline-offset: -0.65rem;
}

.ta-season-dialog__world {
    position: relative;
    width: var(--ta-world-width, 1280px);
    height: var(--ta-world-height, 920px);
    min-width: 100%;
    min-height: 100%;
    overflow: hidden;
    background:
        radial-gradient(circle at 14% 19%, rgba(203, 168, 95, 0.1), transparent 24rem),
        radial-gradient(circle at 79% 67%, rgba(194, 82, 66, 0.075), transparent 30rem),
        repeating-linear-gradient(116deg, transparent 0 8.5rem, rgba(241, 228, 197, 0.025) 8.5rem calc(8.5rem + 1px));
}

.ta-season-dialog__world::before,
.ta-season-dialog__world::after {
    position: absolute;
    z-index: 0;
    width: 24rem;
    aspect-ratio: 1;
    border: 1px dashed rgba(202, 167, 94, 0.12);
    border-radius: 50%;
    content: "";
    pointer-events: none;
}

.ta-season-dialog__world::before {
    top: 8rem;
    left: 38%;
}

.ta-season-dialog__world::after {
    right: 7rem;
    bottom: 10rem;
    width: 36rem;
}

.ta-season-dialog__provenance {
    z-index: 20;
    margin: 0;
    padding:
        0.68rem
        max(1.5rem, env(safe-area-inset-right))
        max(0.68rem, env(safe-area-inset-bottom))
        max(1.5rem, env(safe-area-inset-left));
    border-top: 1px dashed rgba(241, 228, 197, 0.22);
    background: rgba(14, 16, 13, 0.96);
    color: var(--ink-soft);
    font-family: var(--mono);
    font-size: 0.55rem;
    line-height: 1.45;
}

/* A single neutral textile recipe: attributes are explicit official icons, not color. */
.ta-map-patch,
.ta-map-patch[data-match~="horus"],
.ta-map-patch[data-match~="azizi"] {
    --map-course-thread: #bfa56e;
    --map-course-light: #f1dfb3;
    --map-course-deep: #3c3324;
    --map-route-thread: #c65c4d;
    --map-route-light: #ffd2bd;
    --map-route-deep: #531f1b;
    --map-thread: var(--map-route-thread);
    --map-thread-light: var(--map-route-light);
    --map-thread-deep: var(--map-route-deep);
    position: absolute;
    top: var(--ta-field-y, 0);
    left: var(--ta-field-x, 0);
    z-index: var(--ta-field-z, 2);
    width: clamp(20rem, 22vw, 22.75rem);
    min-width: 0;
    min-height: 29rem;
    height: auto;
    display: grid;
    grid-template-columns: 1fr;
    grid-template-rows: minmax(11.5rem, auto) auto;
    gap: 0.78rem;
    align-items: stretch;
    padding: 0.78rem;
    overflow: hidden;
    border: 0.42rem solid #40382a;
    border-radius: 1.05rem 0.72rem 0.92rem 0.64rem;
    background:
        linear-gradient(118deg, transparent 24%, rgba(255, 255, 255, 0.06) 39%, transparent 54%),
        repeating-linear-gradient(101deg, rgba(255, 255, 255, 0.032) 0 1px, transparent 1px 4px),
        repeating-linear-gradient(7deg, transparent 0 5px, rgba(0, 0, 0, 0.085) 5px 6px),
        #202119;
    box-shadow:
        0 0 0 1px #efe0bd,
        0 0 0 5px #9b7d45,
        0 0 0 8px #171813,
        0 0.22rem 0 rgba(255, 255, 255, 0.08) inset,
        0 -0.3rem 0 rgba(0, 0, 0, 0.34) inset,
        0 1rem 2rem rgba(0, 0, 0, 0.52);
    scrollbar-width: thin;
    scrollbar-color: #8f7545 transparent;
    transform:
        translate3d(0, var(--ta-field-lift, 0), 0)
        rotate(var(--ta-field-rotate, 0deg))
        scale(var(--ta-field-scale, 1));
    transform-origin: center;
    transition:
        transform 420ms cubic-bezier(0.22, 1, 0.36, 1),
        filter 320ms ease;
    will-change: transform;
}

.ta-map-patch:is(:hover, :focus-within) {
    --ta-field-lift: -0.65rem;
    z-index: 40;
    filter: brightness(1.06) saturate(1.04);
}

.ta-map-patch::before {
    inset: 0.32rem;
    border: 1px dashed rgba(241, 228, 197, 0.46);
    border-radius: 0.55rem 0.36rem 0.5rem 0.32rem;
}

.ta-map-patch::after {
    opacity: 0.3;
}

.ta-map-patch__art {
    min-height: 11.5rem;
    border-color: rgba(241, 228, 197, 0.16);
    border-radius: 0.6rem 0.4rem 0.54rem 0.36rem;
    background:
        radial-gradient(circle at 50% 48%, rgba(198, 92, 77, 0.12), transparent 62%),
        repeating-linear-gradient(104deg, rgba(255, 255, 255, 0.024) 0 1px, transparent 1px 4px),
        #10120e;
}

.ta-map-patch__route {
    width: min(100%, 20rem);
    height: 11rem;
    max-height: none;
    padding: 0.2rem;
    filter:
        drop-shadow(0 -0.08rem 0 rgba(255, 244, 216, 0.13))
        drop-shadow(0 0.38rem 0.24rem rgba(0, 0, 0, 0.78));
}

.ta-map-patch__details {
    min-height: 0;
    padding: 0.12rem 0.18rem 0.18rem;
}

.ta-map-patch__title-row {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 0.8rem;
    align-items: center;
    padding-bottom: 0.62rem;
    border-bottom: 1px dashed rgba(241, 228, 197, 0.22);
}

.ta-map-patch__name {
    margin: 0;
    color: #f4e5c1;
    font-family: var(--display-serif);
    font-size: clamp(1rem, 1.45vw, 1.3rem);
    font-weight: 900;
    letter-spacing: 0.045em;
    line-height: 1.08;
    -webkit-text-stroke: 0.014em #443923;
    text-shadow:
        0 -1px 0 #fff5d6,
        0 1.5px 0 #675a3a,
        0 3px 3px rgba(0, 0, 0, 0.78);
}

.ta-map-patch__attributes {
    display: flex;
    gap: 0.34rem;
    align-items: center;
    justify-content: flex-end;
}

.ta-map-patch__attribute {
    position: relative;
    width: 2.1rem;
    min-height: 0;
    display: grid;
    place-items: center;
    padding: 0;
    border: 0;
    background: transparent;
}

.ta-map-patch__attribute img {
    width: 1.9rem;
    height: 1.9rem;
    display: block;
    object-fit: contain;
    filter:
        saturate(0.9)
        contrast(1.04)
        drop-shadow(0 0.14rem 0.12rem rgba(0, 0, 0, 0.72));
}

.ta-map-patch__attribute-label {
    max-width: 100%;
    overflow: hidden;
    color: #d8c9a8;
    font-family: var(--mono);
    font-size: 0.34rem;
    font-weight: 750;
    letter-spacing: 0.035em;
    line-height: 1.1;
    text-align: center;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.ta-map-patch__timings {
    gap: 0.52rem;
    margin-top: 0;
    padding-top: 0.62rem;
}

.ta-map-patch__timing {
    gap: 0;
    padding: 0.62rem;
    border: 0.16rem solid #4f402a;
    border-radius: 0.46rem 0.3rem 0.4rem 0.26rem;
    background:
        repeating-linear-gradient(102deg, rgba(255, 255, 255, 0.035) 0 1px, transparent 1px 4px),
        #171913;
    box-shadow:
        0 0 0 1px rgba(232, 209, 159, 0.45),
        0 0.28rem 0.42rem rgba(0, 0, 0, 0.48);
}

.ta-map-patch__timing::after {
    inset: 0.16rem;
    border-color: rgba(241, 228, 197, 0.24);
}

.ta-map-patch__time {
    margin-top: 0;
    color: #fff0cc;
    font-size: clamp(1.28rem, 2.3vw, 2rem);
    letter-spacing: -0.045em;
    -webkit-text-stroke: 0.018em #2b2316;
    text-shadow:
        0 -1px 0 rgba(255, 255, 255, 0.18),
        0 2px 0 #574529,
        0 4px 4px rgba(0, 0, 0, 0.82);
}

.ta-map-patch__meta {
    position: relative;
    z-index: 1;
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 0.38rem;
    margin: 0.6rem 0 0;
    padding-top: 0.5rem;
    border-top: 1px dashed rgba(241, 228, 197, 0.2);
}

.ta-map-patch__meta-group {
    min-width: 0;
}

.ta-map-patch__meta dt,
.ta-map-patch__meta dd {
    margin: 0;
    overflow-wrap: anywhere;
    font-family: var(--mono);
    line-height: 1.25;
}

.ta-map-patch__meta dt {
    color: #928c7d;
    font-size: 0.42rem;
    font-weight: 700;
    letter-spacing: 0.055em;
    text-transform: uppercase;
}

.ta-map-patch__meta dd {
    margin-top: 0.16rem;
    color: #e7d9bb;
    font-size: 0.53rem;
    font-variant-numeric: tabular-nums;
    font-weight: 720;
}

.ta-map-patch__meta-group--rank dd {
    color: #efcf8b;
}

.ta-map-patch__sources {
    position: relative;
    z-index: 1;
    display: flex;
    flex-wrap: wrap;
    gap: 0.3rem 0.65rem;
    margin-top: 0.52rem;
}

.ta-map-patch__source {
    min-height: 1.75rem;
    display: inline-flex;
    align-items: center;
    color: #cfb374;
    font-family: var(--mono);
    font-size: 0.48rem;
    font-weight: 700;
    letter-spacing: 0.035em;
    line-height: 1.2;
    text-decoration-thickness: 1px;
    text-underline-offset: 0.18em;
}

.ta-map-patch__source:is(:hover, :focus-visible) {
    color: #fff0c8;
}

/* Photos enlarge in a native modal, with an explicit path to the source. */
.playing-season__photo-trigger {
    appearance: none;
    position: relative;
    width: 100%;
    display: block;
    margin: 0;
    padding: 0;
    overflow: hidden;
    border: 0;
    background: transparent;
    color: inherit;
    font: inherit;
    text-align: inherit;
    cursor: zoom-in;
}

.playing-season__photo-trigger:focus-visible {
    outline: 2px dashed var(--focus-stitch);
    outline-offset: -0.55rem;
}

.playing-season__photo-zoom {
    position: absolute;
    top: 0.8rem;
    right: 0.8rem;
    z-index: 3;
    min-height: 2rem;
    display: inline-flex;
    align-items: center;
    padding: 0.35rem 0.55rem;
    border: 1px dashed rgba(241, 228, 197, 0.54);
    border-radius: 0.28rem;
    background: rgba(8, 10, 9, 0.84);
    color: #fff0ce;
    font-family: var(--mono);
    font-size: 0.5rem;
    font-weight: 750;
    letter-spacing: 0.08em;
    line-height: 1;
    text-transform: uppercase;
    box-shadow: 0 0.3rem 0.7rem rgba(0, 0, 0, 0.34);
    pointer-events: none;
}

.media-lightbox {
    width: 100vw;
    max-width: none;
    height: 100dvh;
    max-height: none;
    margin: 0;
    padding: 0;
    overflow: hidden;
    border: 0;
    background: rgba(7, 8, 7, 0.98);
    color: var(--ink);
}

.media-lightbox[open] {
    display: grid;
    place-items: center;
}

.media-lightbox::backdrop {
    background: rgba(3, 4, 3, 0.96);
}

.media-lightbox__panel {
    width: 100%;
    height: 100%;
    display: grid;
    grid-template-rows: auto minmax(0, 1fr);
    padding:
        max(1rem, env(safe-area-inset-top))
        max(1rem, env(safe-area-inset-right))
        max(1rem, env(safe-area-inset-bottom))
        max(1rem, env(safe-area-inset-left));
}

.media-lightbox__toolbar {
    z-index: 2;
    display: flex;
    gap: 0.55rem;
    justify-content: flex-end;
    padding-bottom: 0.8rem;
}

.media-lightbox__source,
.media-lightbox__close {
    appearance: none;
    min-height: 2.75rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0.65rem 0.85rem;
    border: 1px dashed rgba(241, 228, 197, 0.5);
    border-radius: 0.32rem;
    background: #202119;
    color: #f3e4c3;
    font-family: var(--mono);
    font-size: 0.58rem;
    font-weight: 750;
    letter-spacing: 0.07em;
    line-height: 1;
    text-decoration: none;
    text-transform: uppercase;
    cursor: pointer;
}

.media-lightbox__source:is(:hover, :focus-visible),
.media-lightbox__close:is(:hover, :focus-visible) {
    border-color: var(--focus-stitch);
    background: #302f24;
    color: #fff2d3;
}

.media-lightbox__source:focus-visible,
.media-lightbox__close:focus-visible {
    outline: 2px solid var(--focus-stitch);
    outline-offset: 3px;
}

.media-lightbox__figure {
    min-width: 0;
    min-height: 0;
    display: grid;
    grid-template-rows: minmax(0, 1fr) auto;
    place-items: center;
    gap: 0.75rem;
    margin: 0;
}

.media-lightbox__image {
    min-width: 0;
    min-height: 0;
    max-width: min(100%, 112rem);
    max-height: calc(100dvh - 9rem);
    width: auto;
    height: auto;
    object-fit: contain;
    border: 0.34rem solid #34342a;
    border-radius: 0.42rem;
    box-shadow:
        0 0 0 1px var(--thread-bone),
        0 0 0 4px #675535,
        0 1rem 3rem rgba(0, 0, 0, 0.62);
}

.media-lightbox__caption {
    max-width: 80ch;
    color: var(--ink-soft);
    font-family: var(--mono);
    font-size: 0.6rem;
    line-height: 1.45;
    text-align: center;
}

@media (max-width: 760px) {
    .hero-patch {
        width: min(12.5rem, 61vw);
    }

    .route-study {
        display: block;
        opacity: 0.18;
    }

    .route-plate,
    .route-plate[data-route-side="right"] {
        --route-x: 50%;
        width: max(31rem, 118vw);
    }

    .season-ledger {
        width: 100%;
        margin-right: 0;
        padding: 0.7rem 0.85rem 1.25rem;
        scroll-padding-inline: 0.85rem;
    }

    .season-entry {
        width: min(17rem, calc(100vw - 3rem));
        flex-basis: min(17rem, calc(100vw - 3rem));
    }

    .season-entry__summary {
        min-height: 9.5rem;
        grid-template-columns: minmax(0, 1fr) auto;
        padding: 1rem;
    }

    .season-entry__snapshot {
        display: block;
    }

    .ta-season-dialog__header {
        grid-template-columns: minmax(0, 1fr);
        gap: 0.7rem;
    }

    .ta-season-dialog__controls {
        justify-content: flex-end;
    }

    .ta-season-dialog__control {
        flex: 0 0 2.75rem;
    }

    .ta-season-dialog__close {
        margin-left: 0;
    }

    .ta-season-dialog__gallery {
        display: block;
        padding: 0;
        overflow: auto;
    }

    .ta-map-patch,
    .ta-map-patch[data-match~="horus"],
    .ta-map-patch[data-match~="azizi"] {
        width: min(20rem, calc(100vw - 2rem));
        min-height: 0;
        height: auto;
        grid-template-rows: minmax(9.75rem, auto) auto;
        overflow: hidden;
    }

    .ta-map-patch__route {
        height: 9.5rem;
        max-height: none;
    }

    .ta-map-patch__time {
        font-size: clamp(1.25rem, 7vw, 1.8rem);
    }

    .media-lightbox__panel {
        padding-inline: max(0.75rem, env(safe-area-inset-left));
    }

    .media-lightbox__image {
        max-height: calc(100dvh - 10rem);
    }
}

@media (max-width: 460px) {
    .route-study {
        display: block;
    }

    .ta-season-dialog__title {
        font-size: 1.55rem;
    }

    .ta-season-dialog__meta {
        font-size: 0.52rem;
    }

    .ta-season-dialog__gallery {
        display: block;
        padding: 0;
    }

    .ta-map-patch,
    .ta-map-patch[data-match~="horus"],
    .ta-map-patch[data-match~="azizi"] {
        padding: 0.65rem;
        border-width: 0.32rem;
    }

    .ta-map-patch__attribute {
        width: 1.85rem;
        min-height: 0;
    }

    .ta-map-patch__attribute img {
        width: 1.72rem;
        height: 1.72rem;
    }

    .ta-map-patch__attribute-label {
        font-size: 0.31rem;
    }

    .ta-map-patch__meta {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .ta-map-patch__meta-group--updated {
        grid-column: 1 / -1;
    }

    .media-lightbox__toolbar {
        justify-content: stretch;
    }

    .media-lightbox__source,
    .media-lightbox__close {
        flex: 1 1 50%;
    }
}

@media (max-height: 720px) and (min-width: 761px) {
    .ta-season-dialog__gallery {
        display: block;
    }
}

@media (prefers-reduced-motion: reduce) {
    .season-ledger,
    .ta-season-dialog__gallery {
        scroll-behavior: auto;
    }

    .ta-map-patch {
        transition: none;
    }

    .ta-season-dialog[open] .ta-season-dialog__shell,
    .ta-season-dialog.is-closing .ta-season-dialog__shell {
        animation: none;
    }

    .rank-badge__asset,
    .rank-stars__mark,
    .ta-map-patch,
    .playing-season__photo-trigger img {
        transition: none;
    }
}


body .season-entry__summary::after {
    content: none;
}

body .season-entry__cue {
    grid-column: 1 / -1;
    margin-top: 0.2rem;
    color: var(--thread-gold);
    font-family: var(--mono);
    font-size: 0.54rem;
    font-weight: 750;
    letter-spacing: 0.08em;
    line-height: 1.3;
    text-transform: uppercase;
}

/* --------------------------------------------------------------------------
   Course badge relay + Online Battle editorial rail
   -------------------------------------------------------------------------- */

.route-study {
    opacity: 0.46;
}

.route-plate {
    --route-x: 20%;
    --route-turn: -1.8deg;
    --route-enter-x: -2.75rem;
    --route-depart-x: -1.25rem;
    top: 52%;
    width: clamp(17rem, 28vw, 25.5rem);
    filter: drop-shadow(0 1.25rem 1.2rem rgba(0, 0, 0, 0.68));
    transition:
        opacity 960ms cubic-bezier(0.22, 1, 0.36, 1),
        transform 1100ms cubic-bezier(0.22, 1, 0.36, 1),
        filter 960ms ease;
    will-change: opacity, transform;
}

.route-plate[data-route-side="right"] {
    --route-x: 80%;
    --route-turn: 1.8deg;
    --route-enter-x: 2.75rem;
    --route-depart-x: 1.25rem;
}

.js .route-study:is(.is-route-ready, .is-route-static) .route-plate {
    transform: translate(-50%, calc(-50% + var(--route-lift))) scale(0.975) rotate(var(--route-turn));
}

.js .route-study.is-route-ready .route-plate.is-route-active {
    transform: translate(-50%, calc(-50% + var(--route-lift))) scale(1) rotate(var(--route-turn));
}

.js .route-study.is-route-ready .route-plate.is-route-entering {
    transform:
        translate(calc(-50% + var(--route-enter-x)), calc(-50% + var(--route-lift)))
        scale(0.9)
        rotate(var(--route-turn));
}

.js .route-study.is-route-ready .route-plate.is-route-departing {
    transform:
        translate(calc(-50% + var(--route-depart-x)), calc(-50% + var(--route-lift)))
        scale(1.035)
        rotate(var(--route-turn));
    filter: drop-shadow(0 1.5rem 1.35rem rgba(0, 0, 0, 0.5));
}

.route-plate__badge {
    position: relative;
    width: 100%;
    aspect-ratio: 1;
    padding: 0.52rem;
    border: 0.34rem solid #9a752d;
    border-radius: 48% 51% 46% 52%;
    background:
        repeating-linear-gradient(105deg, rgba(255, 245, 210, 0.26) 0 1px, transparent 1px 4px),
        linear-gradient(145deg, #c49a3d, #5f4318 64%, #d7aa4a);
    box-shadow:
        0 0 0 2px #1b1911,
        0 0 0 4px rgba(224, 185, 96, 0.64),
        0 0.9rem 1.4rem rgba(0, 0, 0, 0.58);
    isolation: isolate;
}

.route-plate__badge::after {
    position: absolute;
    inset: 0.74rem;
    z-index: 3;
    border: 1px dashed rgba(241, 228, 197, 0.5);
    border-radius: 46% 50% 45% 49%;
    content: "";
    pointer-events: none;
}

.route-plate__rim {
    position: relative;
    height: 100%;
    min-height: 0;
    display: grid;
    grid-template-rows: minmax(0, 1fr) auto;
    padding: clamp(0.9rem, 1.7vw, 1.35rem);
    border: clamp(0.35rem, 0.7vw, 0.58rem) solid #8e2723;
    border-radius: 47% 50% 45% 50%;
    overflow: hidden;
    background:
        radial-gradient(circle at 50% 41%, rgba(156, 59, 45, 0.2), transparent 35%),
        repeating-linear-gradient(98deg, rgba(255, 255, 255, 0.025) 0 1px, transparent 1px 4px),
        repeating-linear-gradient(8deg, #252720 0 2px, #1b1d18 2px 5px);
    box-shadow:
        0 0 0 2px #f0d797,
        0 0 0 5px #4f3615,
        0 0.55rem 1.3rem rgba(0, 0, 0, 0.52) inset;
}

.route-plate__route {
    min-width: 0;
    min-height: 0;
    display: grid;
    place-items: center;
    padding: 0.45rem 0.55rem 0;
}

.route-plate__canvas {
    width: 100%;
    max-height: 100%;
    object-fit: contain;
}

.route-plate__label {
    position: relative;
    z-index: 4;
    justify-self: center;
    width: min(88%, 18rem);
    display: grid;
    gap: 0.2rem;
    padding: 0.6rem 0.75rem 0.55rem;
    border: 0.18rem solid #8e2723;
    border-radius: 0.35rem 0.24rem 0.42rem 0.28rem;
    background:
        repeating-linear-gradient(103deg, rgba(255, 255, 255, 0.16) 0 1px, transparent 1px 4px),
        #ddcda5;
    color: #17150f;
    box-shadow:
        0 0 0 1px #f8e7b9,
        0 0 0 3px #6f211e,
        0 0.35rem 0.7rem rgba(0, 0, 0, 0.48);
}

.route-plate__name,
.route-plate__series {
    display: block;
    overflow: hidden;
    font-family: var(--mono);
    font-weight: 900;
    line-height: 1;
    text-align: center;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.route-plate__name {
    font-size: clamp(0.52rem, 0.86vw, 0.72rem);
    letter-spacing: 0.1em;
}

.route-plate__series {
    color: #5d513b;
    font-size: clamp(0.38rem, 0.58vw, 0.5rem);
    letter-spacing: 0.13em;
}

.js .route-study.is-route-static .route-plate[data-route-static-visible] {
    display: block;
    opacity: 0.72;
    visibility: visible;
}

.rank-progression {
    position: relative;
}

.rank-progression__header {
    position: relative;
    z-index: 2;
    padding: clamp(1.25rem, 2.5vw, 2rem) clamp(1rem, 2vw, 1.5rem);
    border-block: 1px dashed rgba(202, 167, 94, 0.52);
    background:
        linear-gradient(90deg, rgba(164, 57, 47, 0.1), transparent 34%),
        rgba(12, 14, 11, 0.64);
}

.battle-ledger {
    --battle-gutter: max(1rem, 4vw);
    width: 100vw;
    display: flex;
    gap: clamp(1.25rem, 3vw, 2.75rem);
    margin: clamp(2rem, 4vw, 3.5rem) 0 0 calc(50% - 50vw);
    padding: clamp(0.75rem, 1.5vw, 1.25rem) var(--battle-gutter) clamp(2rem, 4vw, 3.5rem);
    overflow-x: auto;
    overflow-y: hidden;
    overscroll-behavior-inline: contain;
    scroll-padding-inline: var(--battle-gutter);
    scroll-snap-type: inline mandatory;
    scrollbar-color: var(--thread-gold) rgba(241, 228, 197, 0.08);
    scrollbar-width: thin;
}

.battle-ledger::after {
    flex: 0 0 max(1rem, calc(var(--battle-gutter) - clamp(1.25rem, 3vw, 2.75rem)));
    content: "";
}

.battle-ledger:focus-visible {
    outline: 2px dashed var(--focus-stitch);
    outline-offset: -0.2rem;
}

.rank-step,
.rank-step:nth-child(n + 2),
.rank-step:nth-child(n + 3) {
    flex: 0 0 clamp(33rem, 56vw, 50rem);
    align-self: flex-start;
    margin: 0;
    padding: clamp(0.65rem, 1vw, 0.9rem);
    overflow: hidden;
    scroll-snap-align: center;
    scroll-snap-stop: always;
    background:
        radial-gradient(circle at 28% 42%, color-mix(in srgb, var(--season-accent) 22%, transparent), transparent 32%),
        radial-gradient(circle at 92% 0%, color-mix(in srgb, var(--season-accent) 13%, transparent), transparent 38%),
        repeating-linear-gradient(96deg, rgba(255, 255, 255, 0.022) 0 1px, transparent 1px 5px),
        #24251e;
}

.rank-step:nth-child(even) {
    margin-top: clamp(2rem, 5vw, 4.5rem);
}

.rank-step::before {
    position: absolute;
    top: -0.12em;
    right: -0.04em;
    z-index: 0;
    color: color-mix(in srgb, var(--season-accent) 20%, transparent);
    content: "S" attr(data-season);
    font-family: var(--display-serif);
    font-size: clamp(7rem, 16vw, 14rem);
    font-weight: 950;
    letter-spacing: -0.1em;
    line-height: 0.72;
    pointer-events: none;
}

.rank-step::after {
    z-index: 5;
}

.rank-step__mast {
    position: relative;
    z-index: 2;
    grid-template-columns: minmax(6.5rem, 0.45fr) minmax(9.5rem, 0.72fr) minmax(13rem, 1.35fr);
    grid-template-rows: auto auto;
    gap: clamp(0.85rem, 2vw, 1.75rem) clamp(1rem, 2.6vw, 2.25rem);
    align-items: center;
    min-height: 18rem;
    padding: clamp(1rem, 2.2vw, 1.85rem);
    background:
        linear-gradient(112deg, rgba(8, 10, 8, 0.96), rgba(17, 20, 16, 0.82)),
        repeating-linear-gradient(90deg, rgba(255, 255, 255, 0.016) 0 1px, transparent 1px 4px);
}

.rank-step__season {
    grid-column: 1;
    grid-row: 1 / -1;
    padding-right: clamp(0.8rem, 2vw, 1.5rem);
}

.rank-step__season-number {
    font-size: clamp(4.5rem, 7vw, 7rem);
}

.rank-step__mast > .rank-badge,
.rank-step--sapphire .rank-step__mast > .rank-badge {
    grid-column: 2;
    grid-row: 1 / -1;
    width: min(100%, 11.5rem);
    justify-self: center;
}

.rank-step__identity {
    grid-column: 3;
    grid-row: 1;
    align-self: end;
}

.rank-step__rp-summary,
.rank-step--sapphire .rank-step__rp-summary {
    grid-column: 3;
    grid-row: 2;
    align-self: start;
    display: grid;
    grid-template-columns: minmax(8rem, auto) minmax(0, 1fr);
    gap: 0.25rem 1rem;
    align-items: end;
    padding: 0.9rem 0 0;
    border-top: 1px solid var(--rule);
    border-left: 0;
}

.rank-step__rp-summary dt,
.rank-step__rp-total {
    grid-column: 1;
}

.rank-step__rp-state {
    grid-column: 2;
    grid-row: 1 / span 2;
    align-self: end;
    padding: 0 0 0.15rem 1rem;
    border-left: 1px solid var(--rule);
}

.round-ledger-disclosure {
    position: relative;
    z-index: 4;
}

.round-ledger {
    display: flex;
    grid-template-columns: none;
    gap: 0.6rem;
    overflow-x: auto;
    overscroll-behavior-inline: contain;
    scroll-snap-type: inline proximity;
    scrollbar-color: var(--season-accent) transparent;
    scrollbar-width: thin;
}

.round-entry {
    flex: 0 0 8.5rem;
    scroll-snap-align: start;
}

.rank-badge--tier::before,
.rank-badge--tier::after,
.rank-badge--pride::before,
.rank-badge--pride::after {
    content: none;
}

.rank-badge--pride .rank-badge__value,
.rank-badge--pride .rank-badge__value--compact {
    top: 41.2%;
    width: 56%;
    min-height: 0;
    display: grid;
    place-items: center;
    padding: 0;
    border: 0;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
    filter: none;
}

.rank-badge__value-label {
    display: none;
}

.rank-badge--pride .rank-badge__value-number {
    color: #fff2d2;
    font-size: clamp(0.82rem, 1.35vw, 1.12rem);
    font-weight: 950;
    letter-spacing: -0.06em;
    line-height: 1;
    -webkit-text-stroke: 0.04em #11130f;
    text-shadow:
        0 -1px 0 rgba(255, 255, 255, 0.28),
        0 1.5px 0 #080a07,
        0 2px 3px rgba(0, 0, 0, 0.82);
}

.rank-badge--pride .rank-badge__value--compact .rank-badge__value-number {
    font-size: 0.43rem;
}

@media (hover: hover) and (prefers-reduced-motion: no-preference) {
    .rank-step:is(:hover, :focus-within) .rank-badge__asset {
        transform: translateY(-0.08rem) scale(1) rotate(0);
    }
}

@media (max-width: 900px) {
    .js .route-plate {
        --route-x: 27%;
        width: min(14rem, 48vw);
    }

    .js .route-plate[data-route-side="right"] {
        --route-x: 73%;
    }

    .route-plate__label {
        padding: 0.45rem 0.55rem 0.42rem;
    }

    .route-plate__name {
        font-size: clamp(0.42rem, 1.3vw, 0.58rem);
    }

    .route-plate__series {
        font-size: clamp(0.32rem, 1vw, 0.42rem);
    }

    .rank-progression__header {
        grid-template-columns: 1fr;
        gap: 0.8rem;
        align-items: start;
    }

    .rank-progression__header > p:last-child {
        grid-column: 1;
        margin-top: 0;
    }

    .rank-step,
    .rank-step:nth-child(n + 2),
    .rank-step:nth-child(n + 3) {
        flex-basis: min(38rem, calc(100vw - 3rem));
    }

    .rank-step:nth-child(even) {
        margin-top: 1.5rem;
    }

    .rank-step__mast,
    .rank-step--sapphire .rank-step__mast {
        grid-template-columns: minmax(0, 1fr) minmax(7rem, 9.5rem);
        grid-template-rows: auto auto auto;
        min-height: 0;
        gap: 1rem;
    }

    .rank-step__season {
        grid-column: 1 / -1;
        grid-row: 1;
        flex-direction: row;
        align-items: baseline;
        padding: 0 0 0.75rem;
        border-right: 0;
        border-bottom: 1px solid var(--rule);
    }

    .rank-step__season-number {
        font-size: 4rem;
    }

    .rank-step__mast > .rank-badge,
    .rank-step--sapphire .rank-step__mast > .rank-badge {
        grid-column: 2;
        grid-row: 2;
        width: min(100%, 9.5rem);
    }

    .rank-step__identity {
        grid-column: 1;
        grid-row: 2;
        align-self: center;
    }

    .rank-step__rp-summary,
    .rank-step--sapphire .rank-step__rp-summary {
        grid-column: 1 / -1;
        grid-row: 3;
    }
}

@media (max-width: 560px) {
    .route-study {
        opacity: 0.25;
    }

    .js .route-plate {
        --route-x: 34%;
        --route-lift: 0svh !important;
        width: min(12rem, 58vw);
    }

    .js .route-plate[data-route-side="right"] {
        --route-x: 66%;
    }

    .route-plate__badge {
        padding: 0.36rem;
        border-width: 0.26rem;
    }

    .route-plate__rim {
        padding: 0.7rem;
        border-width: 0.34rem;
    }

    .battle-ledger {
        --battle-gutter: 0.75rem;
        gap: 0.85rem;
        scroll-snap-type: inline mandatory;
    }

    .rank-step,
    .rank-step:nth-child(n + 2),
    .rank-step:nth-child(n + 3) {
        flex-basis: calc(100vw - 1.5rem);
        padding: 0.5rem;
    }

    .rank-step:nth-child(even) {
        margin-top: 0;
    }

    .rank-step__mast,
    .rank-step--sapphire .rank-step__mast {
        grid-template-columns: minmax(0, 1fr) 6.75rem;
        padding: 0.9rem;
    }

    .rank-step__mast > .rank-badge,
    .rank-step--sapphire .rank-step__mast > .rank-badge {
        width: 6.75rem;
    }

    .rank-step__rp-summary,
    .rank-step--sapphire .rank-step__rp-summary {
        grid-template-columns: 1fr;
    }

    .rank-step__rp-state {
        grid-column: 1;
        grid-row: auto;
        margin-top: 0.25rem !important;
        padding: 0;
        border-left: 0;
    }

    .round-ledger-disclosure {
        margin-inline: 0.5rem;
    }

    .rank-badge--pride .rank-badge__value-number {
        font-size: clamp(0.72rem, 3.6vw, 0.95rem);
    }

    .rank-badge--pride .rank-badge__value--compact .rank-badge__value-number {
        font-size: 0.43rem;
    }
}

/* Circular archive badges: a stitched course field with the full record sewn
   into the lower label. The neutral rim follows the official course-badge
   silhouette without using route attributes as a color code. */
.ta-map-patch,
.ta-map-patch[data-match~="horus"],
.ta-map-patch[data-match~="azizi"] {
    width: 31rem;
    height: 31rem;
    min-height: 0;
    aspect-ratio: 1;
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: minmax(10.5rem, 0.92fr) auto;
    gap: 0.3rem;
    align-content: center;
    padding: 2.35rem 2.45rem 2.15rem;
    overflow: hidden;
    border: 0.58rem solid #922f29;
    border-radius: 50%;
    background:
        radial-gradient(circle at 50% 31%, rgba(166, 62, 50, 0.5) 0 18%, transparent 18.4%),
        repeating-linear-gradient(96deg, rgba(255, 255, 255, 0.035) 0 1px, transparent 1px 4px),
        repeating-linear-gradient(4deg, transparent 0 5px, rgba(0, 0, 0, 0.08) 5px 6px),
        #22231d;
    box-shadow:
        0 0 0 0.16rem #f2dfac,
        0 0 0 0.52rem #ad8b45,
        0 0 0 0.78rem #332817,
        0 0.2rem 0 rgba(255, 255, 255, 0.09) inset,
        0 -0.45rem 0 rgba(0, 0, 0, 0.32) inset,
        0 1.35rem 2.4rem rgba(0, 0, 0, 0.58);
}

.ta-map-patch::before {
    inset: 0.62rem;
    border: 1px dashed rgba(241, 228, 197, 0.52);
    border-radius: 50%;
}

.ta-map-patch::after {
    border-radius: 50%;
    background:
        linear-gradient(116deg, transparent 20%, rgba(255, 255, 255, 0.1) 37%, transparent 50%),
        radial-gradient(circle at 50% 31%, transparent 0 25%, rgba(0, 0, 0, 0.18) 68%);
    opacity: 0.34;
}

.ta-map-patch__art {
    min-height: 0;
    overflow: visible;
    border: 0;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
}

.ta-map-patch__route {
    width: 100%;
    height: 12.2rem;
    max-height: none;
    padding: 0.2rem 0.75rem 0;
}

.ta-map-patch__details {
    min-height: 10.6rem;
    display: block;
    padding: 0.72rem 0.82rem 0.62rem;
    overflow: hidden;
    border: 0.2rem solid #96352f;
    border-radius: 0.9rem 0.72rem 0.82rem 0.64rem;
    background:
        repeating-linear-gradient(101deg, rgba(255, 255, 255, 0.18) 0 1px, rgba(74, 56, 30, 0.045) 1px 4px),
        #e4d4aa;
    box-shadow:
        0 0 0 1px #fff1c9,
        0 0 0 0.32rem #7f2724,
        0 0.58rem 0.85rem rgba(0, 0, 0, 0.48);
}

.ta-map-patch__title-row {
    gap: 0.55rem;
    padding-bottom: 0.42rem;
    border-bottom-color: rgba(87, 60, 29, 0.34);
}

.ta-map-patch__name {
    color: #1b1913;
    font-family: var(--display-serif);
    font-size: 1.08rem;
    letter-spacing: 0.06em;
    -webkit-text-stroke: 0.012em #5d4930;
    text-shadow: 0 -1px 0 #fff3d0, 0 1.4px 0 rgba(105, 79, 39, 0.46);
}

.ta-map-patch__attribute {
    width: 1.7rem;
}

.ta-map-patch__attribute img {
    width: 1.55rem;
    height: 1.55rem;
}

.ta-map-patch__timings {
    grid-template-columns: repeat(auto-fit, minmax(8.5rem, 1fr));
    gap: 0.42rem;
    padding-top: 0.48rem;
}

.ta-map-patch__timing {
    padding: 0.38rem 0.46rem 0.34rem;
    border-width: 0.12rem;
    border-color: #5c4327;
    background:
        repeating-linear-gradient(102deg, rgba(255, 255, 255, 0.13) 0 1px, transparent 1px 4px),
        rgba(246, 232, 194, 0.68);
    box-shadow: 0 0 0 1px rgba(102, 75, 39, 0.45), 0 0.2rem 0.3rem rgba(55, 34, 15, 0.2);
}

.ta-map-patch__timing::after {
    border-color: rgba(91, 61, 28, 0.28);
}

.ta-map-patch__time {
    color: #17150f;
    font-size: 1.32rem;
    -webkit-text-stroke: 0.018em #60462a;
    text-shadow: 0 -1px 0 #fff4d2, 0 1.5px 0 rgba(99, 69, 32, 0.5);
}

.ta-map-patch__meta {
    gap: 0.28rem;
    margin-top: 0.36rem;
    padding-top: 0.34rem;
    border-top-color: rgba(87, 60, 29, 0.28);
}

.ta-map-patch__meta dt {
    color: #756546;
    font-size: 0.34rem;
}

.ta-map-patch__meta dd {
    margin-top: 0.1rem;
    color: #282117;
    font-size: 0.43rem;
}

.ta-map-patch__meta-group--rank dd {
    color: #812b25;
}

.ta-map-patch__sources {
    gap: 0.18rem 0.5rem;
    margin-top: 0.32rem;
}

.ta-map-patch__source {
    min-height: 1.15rem;
    color: #743029;
    font-size: 0.38rem;
}

.ta-map-patch__source:is(:hover, :focus-visible) {
    color: #1e1710;
}

.ta-season-dialog__center-image {
    width: min(42rem, 74vw);
    mix-blend-mode: normal;
}

.ta-season-dialog__shell {
    isolation: isolate;
}

.ta-season-dialog__shell::after {
    position: fixed;
    inset: -18%;
    z-index: 70;
    background:
        linear-gradient(104deg, transparent 34%, rgba(255, 239, 190, 0.7) 45%, rgba(194, 69, 52, 0.64) 50%, transparent 61%);
    content: "";
    opacity: 0;
    pointer-events: none;
    transform: translateX(-76%) skewX(-12deg);
}

.ta-season-dialog[open] .ta-season-dialog__shell {
    animation: ta-archive-enter 1050ms cubic-bezier(0.16, 1, 0.3, 1) both;
}

.ta-season-dialog[open] .ta-season-dialog__shell::after {
    animation: ta-archive-flash 1180ms cubic-bezier(0.22, 1, 0.36, 1) 80ms both;
}

.ta-season-dialog[open] .ta-season-dialog__world {
    animation: ta-archive-world-enter 1120ms cubic-bezier(0.16, 1, 0.3, 1) both;
}

.ta-season-dialog[open] .ta-map-patch {
    animation: ta-archive-patch-enter 820ms cubic-bezier(0.16, 1, 0.3, 1) both;
    animation-delay: calc(180ms + var(--ta-field-ring, 1) * 70ms + var(--ta-field-order, 1) * 10ms);
}

.ta-season-dialog[open] .ta-season-dialog__centerpiece {
    animation: ta-archive-title-enter 940ms cubic-bezier(0.16, 1, 0.3, 1) 260ms both;
}

.ta-season-dialog.is-closing .ta-season-dialog__shell {
    animation: ta-archive-exit 680ms cubic-bezier(0.7, 0, 0.84, 0) both;
}

@keyframes ta-archive-enter {
    0% {
        opacity: 0;
        clip-path: circle(0 at 50% 50%);
        filter: brightness(2.1) blur(0.8rem);
    }
    46% {
        opacity: 1;
        filter: brightness(1.35) blur(0.12rem);
    }
    100% {
        opacity: 1;
        clip-path: circle(78% at 50% 50%);
        filter: none;
    }
}

@keyframes ta-archive-world-enter {
    from {
        opacity: 0;
        transform: scale(1.08);
        filter: blur(0.45rem) saturate(0.6);
    }
    to {
        opacity: 1;
        transform: scale(1);
        filter: none;
    }
}

@keyframes ta-archive-patch-enter {
    from {
        opacity: 0;
        filter: blur(0.55rem) brightness(1.8);
    }
    to {
        opacity: 1;
        filter: none;
    }
}

@keyframes ta-archive-title-enter {
    from {
        opacity: 0;
        filter: blur(0.45rem) brightness(2);
    }
    to {
        opacity: 1;
        filter: none;
    }
}

@keyframes ta-archive-flash {
    0% {
        opacity: 0;
        transform: translateX(-76%) skewX(-12deg);
    }
    22% {
        opacity: 0.78;
    }
    100% {
        opacity: 0;
        transform: translateX(76%) skewX(-12deg);
    }
}

@media (max-width: 760px) {
    .ta-map-patch,
    .ta-map-patch[data-match~="horus"],
    .ta-map-patch[data-match~="azizi"] {
        width: 25rem;
        height: 25rem;
        grid-template-rows: 8.4rem auto;
        padding: 1.95rem 2rem 1.75rem;
    }

    .ta-map-patch__route {
        height: 8.5rem;
    }

    .ta-map-patch__details {
        min-height: 10rem;
        padding: 0.58rem 0.64rem 0.5rem;
    }

    .ta-map-patch__name {
        font-size: 0.92rem;
    }

    .ta-map-patch__time {
        font-size: 1.08rem;
    }
}

@media (prefers-reduced-motion: reduce) {
    .ta-season-dialog__shell::after {
        display: none;
    }

    .ta-season-dialog[open] .ta-season-dialog__world,
    .ta-season-dialog[open] .ta-map-patch,
    .ta-season-dialog[open] .ta-season-dialog__centerpiece {
        animation: none;
    }
}

@media (prefers-reduced-motion: reduce) {
    .route-plate,
    .rank-badge__asset {
        transition: none;
    }

    .rank-step:nth-child(even) {
        margin-top: 0;
    }
}

/* Final cascade: these interaction contracts intentionally follow every
   responsive edition rule above. */
.battle-ledger {
    --battle-card-width: clamp(33rem, 56vw, 50rem);
    --battle-edge-gutter: max(1rem, calc((100vw - min(1280px, calc(100vw - 64px))) / 2));
    margin-left: calc(100% - 50vw - var(--page-half));
    padding-inline: var(--battle-edge-gutter);
    scroll-padding-inline: var(--battle-edge-gutter);
}

.battle-ledger::after,
.season-ledger::after {
    display: none;
    content: none;
}

.rank-step,
.rank-step:nth-child(n + 2),
.rank-step:nth-child(n + 3) {
    flex-basis: var(--battle-card-width);
    scroll-snap-align: start;
}

.season-ledger {
    --season-card-width: clamp(15.5rem, 24vw, 20rem);
    --season-edge-gutter: max(1rem, calc((100vw - min(1280px, calc(100vw - 64px))) / 2));
    width: 100vw;
    margin-left: calc(100% - 50vw - var(--page-half));
    padding-inline: var(--season-edge-gutter);
    scroll-padding-inline: var(--season-edge-gutter);
}

.season-entry {
    width: var(--season-card-width);
    flex-basis: var(--season-card-width);
}

.rank-badge--pride .rank-badge__value,
.rank-badge--pride .rank-badge__value--compact {
    top: 47.25%;
    left: 50%;
    align-content: center;
    justify-content: center;
    transform: translate(-50%, -50%);
}

.rank-badge--pride .rank-badge__value-number {
    display: block;
    line-height: 1;
}

.js .route-study.is-route-ready .route-plate.is-route-present:not(.is-route-entering, .is-route-departing) {
    transform: translate(-50%, calc(-50% + var(--route-lift))) scale(1) rotate(var(--route-turn));
}

.ta-season-dialog {
    inset: 0;
}

.ta-season-dialog__shell {
    position: relative;
    display: block;
}

/* Online Battle archive. This block is intentionally isolated so the
   published chart and the user-supplied projection rules cannot be confused. */
#battle {
    scroll-margin-top: 6.5rem;
}

.discipline__archive-link {
    width: fit-content;
    min-height: 2.75rem;
    display: inline-flex;
    gap: 0.6rem;
    align-items: center;
    margin-top: 0.45rem;
    padding: 0.55rem 0.72rem;
    border: 1px dashed rgba(62, 49, 26, 0.55);
    border-radius: 999px;
    color: #4e2d18;
    font-family: var(--mono);
    font-size: 0.59rem;
    font-weight: 800;
    letter-spacing: 0.07em;
    text-transform: uppercase;
    transition: color 180ms ease, background-color 180ms ease, transform 180ms ease;
}

.discipline__archive-link:is(:hover, :focus-visible) {
    color: #fff2d2;
    background: #6f231d;
    transform: translateY(-0.12rem);
}

.online-battle-archive > .battle-progress,
.online-battle-archive > .battle-rank-math,
.online-battle-archive > .rank-progression,
.online-battle-archive > .battle-archive__footer {
    grid-column: 2 / 13;
}

.battle-progress {
    min-width: 0;
    margin-top: clamp(3rem, 6vw, 5rem);
    padding: clamp(0.7rem, 1.2vw, 1rem);
    border: 0.36rem solid #7c2f29;
    border-radius: 1.25rem 0.85rem 1.2rem 0.95rem;
    background:
        repeating-linear-gradient(96deg, rgba(255, 255, 255, 0.022) 0 1px, transparent 1px 5px),
        #24251e;
    box-shadow:
        0 0 0 2px var(--thread-bone),
        0 0 0 5px #6c5831,
        var(--patch-shadow);
}

.battle-progress__header {
    display: grid;
    grid-template-columns: minmax(14rem, 0.8fr) minmax(18rem, 1.4fr);
    gap: 1rem clamp(2rem, 5vw, 5rem);
    align-items: end;
    padding: clamp(1rem, 2vw, 1.7rem);
    border: 1px dashed rgba(241, 228, 197, 0.24);
    border-bottom: 0;
    border-radius: 0.55rem 0.35rem 0 0;
    background:
        linear-gradient(90deg, rgba(166, 62, 50, 0.12), transparent 44%),
        rgba(10, 12, 9, 0.78);
}

.battle-progress__header h3,
.battle-rank-math__header h3 {
    margin: 0;
    color: var(--thread-bone);
    font-family: var(--serif);
    font-size: clamp(1.75rem, 3.2vw, 3rem);
    font-weight: 900;
    letter-spacing: -0.04em;
    line-height: 0.95;
}

.battle-progress__header > p {
    max-width: 58ch;
    margin: 0;
    color: var(--ink-soft);
    font-size: 0.72rem;
    line-height: 1.65;
}

.battle-month-chart {
    position: relative;
    min-width: 0;
    border: 1px dashed rgba(241, 228, 197, 0.24);
    border-top: 0;
    border-radius: 0 0 0.55rem 0.35rem;
    background:
        radial-gradient(circle at 76% 22%, rgba(87, 110, 165, 0.13), transparent 31%),
        linear-gradient(180deg, rgba(7, 9, 7, 0.9), rgba(19, 21, 17, 0.86));
    overflow: hidden;
}

.battle-month-chart__loading,
.battle-month-chart__error {
    margin: 0;
    padding: 4rem 1.5rem;
    color: var(--ink-soft);
    font-family: var(--mono);
    font-size: 0.65rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.battle-month-chart__viewport {
    width: 100%;
    overflow-x: auto;
    overflow-y: hidden;
    cursor: grab;
    overscroll-behavior-inline: contain;
    scrollbar-color: var(--thread-red) rgba(241, 228, 197, 0.08);
    scrollbar-width: thin;
}

.battle-month-chart__viewport.is-dragging {
    cursor: grabbing;
    user-select: none;
}

.battle-month-chart__viewport:focus-visible {
    outline: 2px dashed var(--focus-stitch);
    outline-offset: -0.35rem;
}

.battle-progress-chart {
    display: block;
    max-width: none;
    overflow: visible;
}

.battle-progress-chart__band {
    stroke: rgba(241, 228, 197, 0.13);
    stroke-dasharray: 3 7;
    stroke-width: 1;
}

.battle-progress-chart__band-label,
.battle-progress-chart__month-label,
.battle-progress-chart__empty,
.battle-progress-chart__point-label {
    font-family: var(--mono);
    font-weight: 800;
    letter-spacing: 0.06em;
}

.battle-progress-chart__band-label {
    fill: rgba(241, 228, 197, 0.58);
    font-size: 9px;
}

.battle-progress-chart__month-tick {
    stroke: rgba(241, 228, 197, 0.055);
    stroke-width: 1;
}

.battle-progress-chart__month-label {
    fill: rgba(241, 228, 197, 0.68);
    font-size: 8px;
}

.battle-progress-chart__empty {
    fill: rgba(241, 228, 197, 0.32);
    font-size: 13px;
}

.battle-progress-chart__line {
    fill: none;
    stroke: var(--thread-gold);
    stroke-dasharray: 2 7;
    stroke-linecap: round;
    stroke-linejoin: round;
    stroke-width: 2.4;
    vector-effect: non-scaling-stroke;
}

.battle-progress-chart__point {
    --battle-point: #d0ad66;
    color: var(--battle-point);
    outline: none;
}

.battle-progress-chart__point[data-rank="emerald"] {
    --battle-point: #56a66a;
}

.battle-progress-chart__point[data-rank="sapphire"] {
    --battle-point: #75a9cf;
}

.battle-progress-chart__point[data-rank="ruby"] {
    --battle-point: #c15c55;
}

.battle-progress-chart__point[data-rank="pride"] {
    --battle-point: #d3ad5c;
}

.battle-progress-chart__point-halo {
    fill: rgba(12, 14, 11, 0.96);
    stroke: var(--battle-point);
    stroke-dasharray: 2 2;
    stroke-width: 2;
    transition: r 220ms ease, fill 220ms ease;
}

.battle-progress-chart__point-core {
    fill: var(--battle-point);
    stroke: #f4e6c8;
    stroke-width: 1.4;
}

.battle-progress-chart__point-label {
    fill: #f1e4c5;
    font-size: 8.5px;
    paint-order: stroke fill;
    stroke: #0b0d0a;
    stroke-linejoin: round;
    stroke-width: 3px;
}

.battle-progress-chart__point:is(:hover, :focus) .battle-progress-chart__point-halo {
    r: 15px;
    fill: color-mix(in srgb, var(--battle-point) 28%, #0c0e0b);
}

.battle-progress-chart__point:focus .battle-progress-chart__point-core {
    stroke: #fff8e7;
    stroke-width: 3;
}

.battle-month-chart__note {
    margin: 0;
    padding: 0.75rem 1rem;
    border-top: 1px dashed rgba(241, 228, 197, 0.14);
    color: rgba(241, 228, 197, 0.58);
    font-family: var(--mono);
    font-size: 0.58rem;
    letter-spacing: 0.04em;
    line-height: 1.55;
}

.battle-rank-math {
    display: grid;
    grid-template-columns: minmax(15rem, 0.72fr) minmax(0, 2fr);
    gap: clamp(1.5rem, 4vw, 4rem);
    margin-top: clamp(3rem, 6vw, 5.5rem);
    padding: clamp(1.2rem, 2.4vw, 2rem);
    border-block: 1px dashed rgba(202, 167, 94, 0.58);
    background:
        linear-gradient(110deg, rgba(166, 62, 50, 0.1), transparent 35%),
        rgba(12, 14, 11, 0.56);
}

.battle-rank-math__header > p:last-child {
    max-width: 44ch;
    margin: 1.1rem 0 0;
    color: var(--ink-soft);
    font-size: 0.68rem;
    line-height: 1.65;
}

.battle-rank-math__rules {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.75rem;
}

.battle-rank-rule {
    --rule-accent: #8a8f87;
    position: relative;
    min-width: 0;
    display: grid;
    gap: 0.72rem;
    padding: 1rem 1.1rem;
    overflow: hidden;
    border: 0.25rem solid color-mix(in srgb, var(--rule-accent) 65%, #27281f);
    border-radius: 0.75rem;
    background:
        repeating-linear-gradient(98deg, rgba(255, 255, 255, 0.022) 0 1px, transparent 1px 4px),
        #24251e;
    box-shadow:
        0 0 0 1px var(--thread-bone),
        0 0 0 3px color-mix(in srgb, var(--rule-accent) 55%, #27281f);
}

.battle-rank-rule::after {
    position: absolute;
    inset: 0.4rem;
    border: 1px dashed color-mix(in srgb, var(--rule-accent) 58%, transparent);
    border-radius: 0.35rem;
    content: "";
    pointer-events: none;
}

.battle-rank-rule--stars {
    --rule-accent: #69a876;
}

.battle-rank-rule--pride-low {
    --rule-accent: #b7a149;
}

.battle-rank-rule--pride-mid {
    --rule-accent: #4d9e88;
}

.battle-rank-rule--pride-high {
    --rule-accent: #687fbd;
}

.battle-rank-rule__range,
.battle-rank-rule > span:last-child {
    position: relative;
    z-index: 1;
    font-family: var(--mono);
    font-size: 0.58rem;
    font-weight: 750;
    letter-spacing: 0.08em;
}

.battle-rank-rule__range {
    color: color-mix(in srgb, var(--rule-accent) 62%, var(--thread-bone));
}

.battle-rank-rule > strong {
    position: relative;
    z-index: 1;
    color: var(--thread-bone);
    font-family: var(--serif);
    font-size: clamp(1.3rem, 2vw, 1.8rem);
    font-weight: 900;
    line-height: 0.95;
}

.battle-rank-rule > span:last-child {
    display: flex;
    gap: 0.7rem;
    color: var(--ink-soft);
}

.battle-rank-rule > span:last-child b:first-child {
    color: #8fc09a;
}

.battle-rank-rule > span:last-child b:last-child {
    color: #d77a70;
}

.battle-rank-math__current {
    grid-column: 1 / -1;
    margin: 0;
    padding: 0.8rem 1rem;
    border-left: 0.25rem solid var(--thread-gold);
    color: var(--thread-bone);
    background: rgba(202, 167, 94, 0.07);
    font-family: var(--mono);
    font-size: 0.65rem;
    letter-spacing: 0.035em;
    line-height: 1.6;
}

.online-battle-archive > .rank-progression {
    margin-top: clamp(3.5rem, 7vw, 7rem);
}

.battle-archive__footer {
    margin-top: clamp(2rem, 4vw, 3.5rem);
}

@media (max-width: 760px) {
    .online-battle-archive > .battle-progress,
    .online-battle-archive > .battle-rank-math,
    .online-battle-archive > .rank-progression,
    .online-battle-archive > .battle-archive__footer {
        grid-column: 1 / 7;
    }

    .battle-progress__header,
    .battle-rank-math {
        grid-template-columns: minmax(0, 1fr);
    }

    .battle-progress__header > p {
        max-width: 100%;
    }

    .battle-rank-math__rules {
        grid-template-columns: minmax(0, 1fr);
    }

    .battle-rank-math__current {
        grid-column: 1;
    }
}

@media (max-width: 560px) {
    .battle-progress {
        margin-inline: 0.25rem;
        padding: 0.52rem;
    }

    .battle-progress__header {
        padding: 1rem;
    }

    .battle-rank-math {
        padding-inline: 0.8rem;
    }
}

@media (prefers-reduced-motion: reduce) {
    .discipline__archive-link,
    .battle-progress-chart__point-halo {
        transition: none;
    }
}

.ta-season-dialog__header {
    position: absolute;
    inset: 0;
    z-index: 30;
    display: block;
    padding: 0;
    border: 0;
    background: transparent;
    box-shadow: none;
    backdrop-filter: none;
    pointer-events: none;
}

.ta-season-dialog__heading {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    clip-path: inset(50%);
    white-space: nowrap;
}

.ta-season-dialog__controls {
    position: absolute;
    top: max(0.8rem, env(safe-area-inset-top));
    right: max(0.8rem, env(safe-area-inset-right));
    z-index: 2;
    justify-content: flex-start;
    padding: 0.32rem;
    border: 1px solid rgba(241, 228, 197, 0.16);
    border-radius: 0.48rem;
    background: rgba(14, 16, 13, 0.76);
    box-shadow: 0 0.65rem 1.6rem rgba(0, 0, 0, 0.4);
    backdrop-filter: blur(0.8rem);
    pointer-events: auto;
}

.ta-season-dialog__gallery {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    display: block;
    padding: 0;
    overflow: auto;
    scrollbar-width: none;
}

.ta-season-dialog__gallery::-webkit-scrollbar {
    display: none;
}

.ta-season-dialog__centerpiece {
    position: absolute;
    top: var(--ta-center-y, 50%);
    left: var(--ta-center-x, 50%);
    z-index: 16;
    width: min(46rem, calc(100vw - 3rem));
    min-height: min(24rem, calc(100dvh - 8rem));
    display: grid;
    place-content: center;
    justify-items: center;
    gap: 0.7rem;
    padding: clamp(1.5rem, 4vw, 3rem);
    color: var(--thread-bone);
    text-align: center;
    transform: translate(-50%, -50%);
    pointer-events: none;
}

.ta-season-dialog__centerpiece::before,
.ta-season-dialog__centerpiece::after {
    position: absolute;
    content: "";
    pointer-events: none;
}

.ta-season-dialog__centerpiece::before {
    inset: 7% 2%;
    border-block: 2px dashed rgba(202, 167, 94, 0.7);
    background:
        radial-gradient(circle, rgba(202, 167, 94, 0.12), transparent 68%),
        repeating-linear-gradient(102deg, rgba(255, 255, 255, 0.02) 0 1px, transparent 1px 4px);
    transform: skewX(-1.5deg);
}

.ta-season-dialog__centerpiece::after {
    top: 50%;
    left: 50%;
    width: min(34rem, 78vw);
    aspect-ratio: 1;
    border: 1px dashed rgba(241, 228, 197, 0.12);
    border-radius: 50%;
    transform: translate(-50%, -50%);
}

.ta-season-dialog__center-kicker,
.ta-season-dialog__center-image {
    position: relative;
    z-index: 1;
    display: block;
}

.ta-season-dialog__center-kicker,
.ta-season-dialog__center-meta {
    font-family: var(--mono);
    font-weight: 760;
    line-height: 1.25;
    text-transform: uppercase;
}

.ta-season-dialog__center-kicker {
    color: var(--thread-red);
    font-size: clamp(0.58rem, 0.85vw, 0.72rem);
    letter-spacing: 0.2em;
}

.ta-season-dialog__center-image {
    width: min(42rem, 74vw);
    height: auto;
    mix-blend-mode: screen;
    object-fit: contain;
    filter:
        drop-shadow(0 -0.08rem 0 rgba(255, 248, 226, 0.2))
        drop-shadow(0 0.7rem 0.6rem rgba(0, 0, 0, 0.82));
}

.ta-season-dialog__center-title {
    font-family: var(--display-serif);
    font-size: clamp(3.2rem, 8vw, 7.8rem);
    font-weight: 950;
    letter-spacing: -0.065em;
    line-height: 0.82;
    text-shadow:
        0 -1px 0 #fff2cd,
        0 0.08em 0 #6c5a36,
        0 0.15em 0.12em rgba(0, 0, 0, 0.72);
}

.ta-season-dialog__center-meta {
    color: var(--ink-soft);
    font-size: clamp(0.52rem, 0.75vw, 0.65rem);
    letter-spacing: 0.13em;
}

.ta-season-dialog__provenance {
    position: absolute;
    right: auto;
    bottom: max(0.75rem, env(safe-area-inset-bottom));
    left: max(0.75rem, env(safe-area-inset-left));
    z-index: 28;
    width: min(44rem, calc(100% - 1.5rem));
    max-height: 4.4rem;
    overflow: hidden;
    padding: 0.58rem 0.72rem;
    border: 1px solid rgba(241, 228, 197, 0.14);
    border-radius: 0.35rem;
    background: rgba(14, 16, 13, 0.74);
    box-shadow: 0 0.55rem 1.4rem rgba(0, 0, 0, 0.34);
    backdrop-filter: blur(0.65rem);
    pointer-events: none;
}

@media (max-width: 900px) {
    .battle-ledger {
        --battle-card-width: min(38rem, calc(100vw - 3rem));
    }
}

@media (max-width: 760px) {
    .season-ledger {
        --season-card-width: min(17rem, calc(100vw - 3rem));
        margin-left: calc(100% - 50vw - var(--page-half));
        padding-inline: var(--season-edge-gutter);
        scroll-padding-inline: var(--season-edge-gutter);
    }

    .ta-ledger__header {
        grid-template-columns: minmax(0, 1fr);
    }

    .ta-ledger__header > p {
        grid-column: 1;
        width: 100%;
        max-width: 100%;
    }

    .playing-history {
        overflow-x: clip;
    }

    .playing-season::after {
        left: 50%;
        width: 100%;
        max-width: 100%;
        overflow: hidden;
    }

    .ta-season-dialog__provenance {
        max-height: 3.6rem;
        font-size: 0.48rem;
    }
}

@media (max-width: 560px) {
    .battle-ledger {
        --battle-card-width: calc(100vw - 1.5rem);
        --battle-edge-gutter: 0.75rem;
    }

    .ta-season-dialog__centerpiece {
        width: calc(100vw - 2rem);
        min-height: 17rem;
        padding-inline: 1rem;
    }

    .ta-season-dialog__center-title {
        font-size: clamp(3rem, 17vw, 4.6rem);
    }

    .ta-season-dialog__provenance {
        right: max(0.75rem, env(safe-area-inset-right));
        width: auto;
        max-height: 2.9rem;
        white-space: nowrap;
        text-overflow: ellipsis;
    }
}

/* --------------------------------------------------------------------------
   Exterior badge sashes

   The record label is a separate embroidered wrapper laid over the lower rim;
   it is no longer clipped into, or mistaken for part of, the circular field.
   -------------------------------------------------------------------------- */

.ta-map-patch,
.ta-map-patch[data-match~="horus"],
.ta-map-patch[data-match~="azizi"] {
    width: 31rem;
    height: 36.5rem;
    min-height: 0;
    aspect-ratio: auto;
    display: block;
    padding: 0;
    overflow: visible;
    border: 0;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
}

.ta-map-patch::before,
.ta-map-patch::after {
    content: none;
}

.ta-map-patch__disc {
    position: absolute;
    top: 0;
    left: 0;
    z-index: 1;
    width: 31rem;
    aspect-ratio: 1;
    overflow: hidden;
    border: 0.58rem solid #922f29;
    border-radius: 50%;
    background:
        radial-gradient(circle at 50% 40%, rgba(166, 62, 50, 0.48) 0 18%, transparent 18.4%),
        repeating-linear-gradient(96deg, rgba(255, 255, 255, 0.035) 0 1px, transparent 1px 4px),
        repeating-linear-gradient(4deg, transparent 0 5px, rgba(0, 0, 0, 0.08) 5px 6px),
        #22231d;
    box-shadow:
        0 0 0 0.16rem #f2dfac,
        0 0 0 0.52rem #ad8b45,
        0 0 0 0.78rem #332817,
        0 0.2rem 0 rgba(255, 255, 255, 0.09) inset,
        0 -0.45rem 0 rgba(0, 0, 0, 0.32) inset,
        0 1.35rem 2.4rem rgba(0, 0, 0, 0.58);
    isolation: isolate;
}

.ta-map-patch__disc::before,
.ta-map-patch__disc::after {
    position: absolute;
    content: "";
    pointer-events: none;
}

.ta-map-patch__disc::before {
    inset: 0.62rem;
    z-index: 3;
    border: 1px dashed rgba(241, 228, 197, 0.52);
    border-radius: 50%;
}

.ta-map-patch__disc::after {
    inset: 0;
    z-index: 2;
    border-radius: 50%;
    background:
        linear-gradient(116deg, transparent 20%, rgba(255, 255, 255, 0.1) 37%, transparent 50%),
        radial-gradient(circle at 50% 40%, transparent 0 25%, rgba(0, 0, 0, 0.18) 68%);
    opacity: 0.34;
}

.ta-map-patch__disc .ta-map-patch__art {
    width: 100%;
    height: 100%;
    min-height: 0;
    padding: 2.8rem 3rem 6rem;
    overflow: hidden;
    border: 0;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
}

.ta-map-patch__disc .ta-map-patch__route {
    width: 100%;
    height: 20rem;
    max-height: none;
    padding: 0;
}

.ta-map-patch__details {
    position: absolute;
    top: 23.15rem;
    left: 50%;
    z-index: 6;
    width: 29rem;
    min-height: 10.75rem;
    display: block;
    padding: 0.8rem 1.05rem 0.68rem;
    overflow: visible;
    border: 0.2rem solid #96352f;
    border-radius: 0.88rem 0.66rem 0.82rem 0.62rem;
    background:
        repeating-linear-gradient(101deg, rgba(255, 255, 255, 0.18) 0 1px, rgba(74, 56, 30, 0.045) 1px 4px),
        #e4d4aa;
    box-shadow:
        0 0 0 1px #fff1c9,
        0 0 0 0.3rem #7f2724,
        0 0 0 0.42rem #d1a754,
        0 0.8rem 1.2rem rgba(0, 0, 0, 0.54);
    transform: translateX(-50%) rotate(-0.7deg);
    isolation: isolate;
}

.ta-map-patch:nth-child(even) .ta-map-patch__details {
    transform: translateX(-50%) rotate(0.65deg);
}

.ta-map-patch__details::before,
.ta-map-patch__details::after,
.route-plate__label::before,
.route-plate__label::after {
    position: absolute;
    top: 1.25rem;
    z-index: -1;
    width: 2.6rem;
    height: 5.3rem;
    border: 0.16rem solid #d2aa59;
    background:
        repeating-linear-gradient(104deg, rgba(255, 255, 255, 0.08) 0 1px, transparent 1px 4px),
        #74231f;
    box-shadow: 0 0.5rem 0.8rem rgba(0, 0, 0, 0.42);
    content: "";
}

.ta-map-patch__details::before,
.route-plate__label::before {
    left: -1.72rem;
    clip-path: polygon(0 12%, 100% 0, 82% 50%, 100% 100%, 0 88%);
}

.ta-map-patch__details::after,
.route-plate__label::after {
    right: -1.72rem;
    clip-path: polygon(0 0, 100% 12%, 100% 88%, 0 100%, 18% 50%);
}

.ta-map-patch__title-row {
    gap: 0.65rem;
    padding-bottom: 0.5rem;
    border-bottom: 1px dashed rgba(87, 60, 29, 0.42);
}

.ta-map-patch__name {
    margin: 0;
    color: #1b1913;
    font-family: var(--display-serif);
    font-size: 1.18rem;
    letter-spacing: 0.055em;
    -webkit-text-stroke: 0.012em #5d4930;
    text-shadow: 0 -1px 0 #fff3d0, 0 1.4px 0 rgba(105, 79, 39, 0.46);
}

.ta-map-patch__timings {
    grid-template-columns: repeat(auto-fit, minmax(8.5rem, 1fr));
    gap: 0 0.85rem;
    margin: 0;
    padding-top: 0.55rem;
}

.ta-map-patch__timing {
    padding: 0.12rem 0;
    border: 0;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
}

.ta-map-patch__timing + .ta-map-patch__timing {
    padding-left: 0.85rem;
    border-left: 1px dashed rgba(91, 61, 28, 0.36);
}

.ta-map-patch__timing::after {
    content: none;
}

.ta-map-patch__time {
    color: #17150f;
    font-size: 1.38rem;
    -webkit-text-stroke: 0.018em #60462a;
    text-shadow: 0 -1px 0 #fff4d2, 0 1.5px 0 rgba(99, 69, 32, 0.5);
}

.ta-map-patch__meta {
    gap: 0.3rem;
    margin-top: 0.42rem;
    padding-top: 0.4rem;
    border-top: 1px dashed rgba(87, 60, 29, 0.3);
}

.ta-map-patch__sources {
    gap: 0.18rem 0.55rem;
    margin-top: 0.32rem;
}

.route-plate__badge {
    overflow: visible;
}

.route-plate__rim {
    grid-template-rows: minmax(0, 1fr);
    padding: clamp(1.15rem, 2vw, 1.7rem);
}

.route-plate__route {
    height: 100%;
    padding: 0.5rem;
}

.route-plate__label {
    position: absolute;
    bottom: -7%;
    left: 50%;
    z-index: 6;
    width: min(90%, 19rem);
    transform: translateX(-50%) rotate(-0.75deg);
    isolation: isolate;
}

.route-plate[data-route-side="right"] .route-plate__label {
    transform: translateX(-50%) rotate(0.75deg);
}

.route-plate__label::before,
.route-plate__label::after {
    top: 0.42rem;
    width: 1.75rem;
    height: 2.65rem;
}

.route-plate__label::before {
    left: -1.05rem;
}

.route-plate__label::after {
    right: -1.05rem;
}

/* --------------------------------------------------------------------------
   Playing history: stacked driver-jacket backpatches

   Each chapter is a complete textile panel. Later seasons stack over earlier
   ones as the page moves, while mobile keeps a straightforward reading order.
   -------------------------------------------------------------------------- */

.playing-history {
    overflow: visible;
    background:
        linear-gradient(90deg, transparent, rgba(202, 167, 94, 0.055) 50%, transparent),
        repeating-linear-gradient(0deg, transparent 0 7rem, rgba(241, 228, 197, 0.018) 7rem calc(7rem + 1px));
}

.playing-history::before,
.playing-history__timeline::before {
    content: none;
}

.playing-history__header {
    position: relative;
    z-index: 8;
    padding-bottom: clamp(2rem, 4vw, 3.5rem);
}

.playing-history__introduction {
    margin: 0;
}

.playing-history__timeline {
    display: grid;
    gap: clamp(4rem, 9vh, 8rem);
    padding-block: clamp(2rem, 5vw, 4rem) clamp(4rem, 10vw, 8rem);
}

.playing-season,
.playing-season--photos-left,
.playing-season--photos-right {
    --jacket-red: color-mix(in srgb, var(--thread-red-dark) 74%, #17150f);
    position: relative;
    z-index: calc(2 + var(--history-order));
    min-height: min(50rem, calc(100svh - 7.5rem));
    display: grid;
    grid-template-columns: repeat(12, minmax(0, 1fr));
    grid-template-rows: 1fr;
    gap: clamp(1.25rem, 2.5vw, 2.6rem);
    align-items: center;
    padding: clamp(5.5rem, 8vw, 7.6rem) clamp(1.25rem, 3.5vw, 3.5rem) clamp(2rem, 4vw, 3.5rem);
    overflow: hidden;
    border: 0.62rem solid #343328;
    border-radius: 3rem 3rem 1.1rem 1.1rem;
    background:
        linear-gradient(116deg, transparent 23%, rgba(255, 255, 255, 0.045) 38%, transparent 53%),
        repeating-linear-gradient(97deg, rgba(255, 255, 255, 0.026) 0 1px, transparent 1px 5px),
        repeating-linear-gradient(7deg, transparent 0 5px, rgba(0, 0, 0, 0.1) 5px 6px),
        #24261f;
    box-shadow:
        0 0 0 2px var(--thread-bone),
        0 0 0 6px var(--jacket-red),
        0 0 0 9px #171813,
        0 1.8rem 3rem rgba(0, 0, 0, 0.6);
    isolation: isolate;
}

.playing-season::before {
    position: absolute;
    inset: 1rem;
    z-index: 5;
    width: auto;
    height: auto;
    border: 1px dashed rgba(241, 228, 197, 0.44);
    border-radius: 2rem 2rem 0.58rem 0.58rem;
    background: transparent;
    content: "";
    transform: none;
    pointer-events: none;
}

.playing-season::after {
    position: absolute;
    top: -0.7rem;
    left: 50%;
    z-index: 6;
    width: clamp(8rem, 16vw, 13rem);
    height: clamp(2.8rem, 5vw, 4.5rem);
    max-width: none;
    border: 0.42rem solid var(--jacket-red);
    border-radius: 0 0 50% 50%;
    background: #11130f;
    box-shadow: 0 0 0 2px var(--thread-bone), 0 0 0 5px #27271f;
    content: "";
    transform: translateX(-50%);
    pointer-events: none;
}

.playing-season[data-season="3"] {
    --jacket-red: #6a2422;
}

.playing-season[data-season="4"] {
    --jacket-red: #3e6472;
}

.playing-season[data-season="5"] {
    --jacket-red: #9a5a20;
}

.playing-season[data-season="6"] {
    --jacket-red: #684946;
}

.playing-season__season-mark {
    position: absolute;
    top: 5%;
    left: -7%;
    z-index: -1;
    width: min(66%, 48rem);
    height: auto;
    opacity: 0.075;
    filter: grayscale(1) contrast(1.25) brightness(1.3);
    transform: rotate(-7deg);
    pointer-events: none;
}

.playing-season__route-mark {
    position: absolute;
    right: -5%;
    bottom: -8%;
    z-index: -1;
    width: min(64%, 45rem);
    height: 82%;
    overflow: visible;
    opacity: 0.16;
    filter: drop-shadow(0 0.55rem 0.38rem rgba(0, 0, 0, 0.65));
    transform: rotate(7deg);
    pointer-events: none;
}

.playing-season__route-mark path {
    fill: none;
    stroke-linecap: round;
    stroke-linejoin: round;
    vector-effect: non-scaling-stroke;
}

.playing-season__route-mark-shadow {
    stroke: #070806;
    stroke-width: 12;
}

.playing-season__route-mark-thread {
    stroke: var(--thread-gold);
    stroke-width: 5;
    stroke-dasharray: 1 0.035;
}

.playing-season__marker {
    position: absolute;
    top: 1rem;
    left: 50%;
    z-index: 8;
    width: clamp(7.2rem, 12vw, 10rem);
    min-height: 4.25rem;
    display: grid;
    grid-template-columns: auto auto;
    gap: 0.28rem 0.62rem;
    place-content: center;
    justify-items: center;
    margin: 0;
    padding: 0.55rem 0.8rem;
    border: 0.22rem solid var(--jacket-red);
    border-radius: 0.6rem 0.46rem 0.72rem 0.4rem;
    background:
        repeating-linear-gradient(100deg, rgba(255, 255, 255, 0.1) 0 1px, transparent 1px 4px),
        #d9c99e;
    color: #1b1913;
    box-shadow: 0 0 0 1px #fff1ca, 0 0 0 4px #302d21, 0 0.7rem 1rem rgba(0, 0, 0, 0.48);
    transform: translateX(-50%);
}

.playing-season__marker::before {
    content: none;
}

.playing-season:nth-child(even) .playing-season__marker::before {
    content: none;
}

.playing-season__marker-progress,
.playing-season__date {
    color: #645737;
}

.playing-season__marker-season {
    width: 2.2rem;
    height: 2.2rem;
    grid-row: 1 / 3;
    color: #752822;
    border-color: rgba(94, 55, 32, 0.48);
    background: rgba(255, 244, 211, 0.35);
}

.playing-season__summary,
.playing-season--photos-left .playing-season__summary {
    position: relative;
    z-index: 2;
    grid-column: 1 / 6;
    grid-row: 1;
    align-self: center;
    padding: clamp(1.35rem, 2.5vw, 2.2rem);
    border: 0.22rem solid #8b3029;
    border-radius: 0.82rem 0.56rem 0.74rem 0.5rem;
    background:
        repeating-linear-gradient(101deg, rgba(255, 255, 255, 0.2) 0 1px, rgba(76, 56, 28, 0.05) 1px 4px),
        #ded0aa;
    box-shadow:
        0 0 0 1px #fff1c8,
        0 0 0 0.34rem #6d2521,
        0 0.85rem 1.4rem rgba(0, 0, 0, 0.5);
    transform: rotate(-1deg);
}

.playing-season:nth-child(even) .playing-season__summary {
    transform: rotate(0.9deg);
}

.playing-season__summary h4,
.playing-season__snapshot,
.playing-season__note,
.playing-season__focus-label,
.playing-season__focus-copy,
.playing-season__fact dt,
.playing-season__fact dd,
.playing-season__source,
.playing-season__source time {
    color: #30281a;
}

.playing-season__summary h4 {
    margin-bottom: 1.15rem;
    color: #812b25;
}

.playing-season__focus {
    margin-top: 1rem;
    border-top-color: rgba(83, 60, 30, 0.35);
}

.playing-season__focus-label {
    color: #8b3029;
}

.playing-season__focus-title {
    color: #17150f;
    font-size: clamp(2.5rem, 4.2vw, 4.8rem);
    text-shadow: 0 -1px 0 #fff0c5, 0 0.06em 0 rgba(96, 71, 35, 0.52);
}

.playing-season__focus-copy {
    max-width: 38ch;
    font-size: clamp(0.76rem, 1vw, 0.9rem);
}

.playing-season__facts {
    border-top-color: rgba(83, 60, 30, 0.3);
}

.playing-season__fact {
    border-left-color: rgba(83, 60, 30, 0.3);
}

.playing-season__source {
    position: relative;
    width: calc(100% + 2.25rem);
    margin: 1.1rem -1.1rem -1.35rem auto;
    justify-content: flex-end;
    padding: 0.65rem 1rem;
    border-top: 1px dashed rgba(83, 60, 30, 0.34);
    background: rgba(119, 45, 37, 0.11);
}

.playing-season__photos,
.playing-season--photos-left .playing-season__photos {
    position: relative;
    z-index: 2;
    grid-column: 6 / 13;
    grid-row: 1;
    align-self: center;
}

.playing-season__photo-slot:nth-child(1) {
    transform: rotate(-2.2deg);
}

.playing-season__photo-slot:nth-child(2) {
    transform: rotate(2.4deg);
}

.playing-season__photo-slot:nth-child(3) {
    transform: rotate(-0.8deg);
}

.playing-season__photo-frame {
    border-color: #292920;
    border-radius: 1.1rem 0.72rem 1rem 0.64rem;
    box-shadow:
        0 0 0 1px var(--thread-bone),
        0 0 0 4px var(--jacket-red),
        0 1.2rem 1.8rem rgba(0, 0, 0, 0.58);
}

@media (min-width: 761px) and (min-height: 640px) {
    .playing-season {
        position: sticky;
        top: calc(5.2rem + var(--history-order) * 0.72rem);
    }

    .playing-season + .playing-season {
        margin-top: 18svh;
    }
}

@media (max-width: 760px) {
    .ta-map-patch,
    .ta-map-patch[data-match~="horus"],
    .ta-map-patch[data-match~="azizi"] {
        width: 25rem;
        height: 30.6rem;
    }

    .ta-map-patch__disc {
        width: 25rem;
    }

    .ta-map-patch__disc .ta-map-patch__art {
        padding: 2.35rem 2.4rem 5.4rem;
    }

    .ta-map-patch__disc .ta-map-patch__route {
        height: 15.2rem;
    }

    .ta-map-patch__details {
        top: 18.4rem;
        width: 23.8rem;
        min-height: 10.4rem;
        padding: 0.68rem 0.82rem 0.58rem;
    }

    .ta-map-patch__name {
        font-size: 0.98rem;
    }

    .ta-map-patch__time {
        font-size: 1.14rem;
    }

    .route-plate__label {
        bottom: -6%;
        width: 94%;
    }

    .playing-history {
        overflow-x: clip;
    }

    .playing-history__timeline {
        grid-column: 1 / 7;
        gap: 2.5rem;
        padding-inline: 0.85rem;
    }

    .playing-season,
    .playing-season--photos-left,
    .playing-season--photos-right {
        min-height: 0;
        grid-template-columns: minmax(0, 1fr);
        grid-template-rows: auto auto;
        gap: 2rem;
        padding: 6.2rem 1rem 1.5rem;
        border-width: 0.42rem;
        border-radius: 2.1rem 2.1rem 0.9rem 0.9rem;
    }

    .playing-season__summary,
    .playing-season--photos-left .playing-season__summary {
        grid-column: 1;
        grid-row: 1;
        padding: 1.2rem;
        transform: none;
    }

    .playing-season:nth-child(even) .playing-season__summary {
        transform: none;
    }

    .playing-season__photos,
    .playing-season--photos-left .playing-season__photos {
        grid-column: 1;
        grid-row: 2;
    }

    .playing-season__season-mark {
        top: 4%;
        left: 3%;
        width: 94%;
        transform: rotate(-3deg);
    }

    .playing-season__route-mark {
        right: -24%;
        bottom: 12%;
        width: 105%;
        height: 58%;
    }

    .playing-season__source {
        width: calc(100% + 1rem);
        margin-right: -0.5rem;
        margin-bottom: -0.9rem;
    }
}

@media (max-width: 980px) {
    .site-nav {
        grid-template-columns: repeat(5, minmax(0, 1fr));
    }

    .site-nav a {
        padding-inline: 0.22rem;
        font-size: clamp(0.5rem, 1.65vw, 0.625rem);
    }
}

@media (max-width: 420px) {
    .ta-map-patch,
    .ta-map-patch[data-match~="horus"],
    .ta-map-patch[data-match~="azizi"] {
        width: 22.5rem;
        height: 28.5rem;
    }

    .ta-map-patch__disc {
        width: 22.5rem;
    }

    .ta-map-patch__disc .ta-map-patch__route {
        height: 13.2rem;
    }

    .ta-map-patch__details {
        top: 16.25rem;
        width: 21.5rem;
    }

    .ta-map-patch__details::before,
    .ta-map-patch__details::after {
        width: 1.8rem;
    }

    .ta-map-patch__details::before {
        left: -1rem;
    }

    .ta-map-patch__details::after {
        right: -1rem;
    }

    .playing-season__facts {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    .playing-season__fact dt {
        font-size: 0.52rem;
    }
}

@media (prefers-reduced-motion: reduce) {
    .playing-season {
        position: relative;
        top: auto;
    }
}

@media (prefers-reduced-motion: no-preference) {
    .playing-season__route-mark-thread {
        animation: history-route-shimmer 9s linear infinite;
    }

    @keyframes history-route-shimmer {
        from {
            stroke-dashoffset: 0;
        }
        to {
            stroke-dashoffset: -1;
        }
    }

    .js .playing-season.scroll-reveal .playing-season__marker,
    .js .playing-season.scroll-reveal.is-visible .playing-season__marker {
        transform: translateX(-50%);
    }
}