:root {
    color-scheme: dark;
    --fabric-sumi: #050911;
    --fabric-indigo: #071226;
    --fabric-indigo-raised: #0d1e3b;
    --fabric-indigo-light: #142a4b;
    --fabric-label: #e8dfca;
    --fabric-label-shadow: #b6aa92;
    --thread-bone: #f1e8d6;
    --thread-silver: #bac8d3;
    --thread-blue: #6ed5f5;
    --thread-blue-deep: #237ca4;
    --thread-red: #d75b59;
    --thread-gold: #d7b365;
    --thread-gold-deep: #7b5a24;
    --ink: var(--fabric-sumi);
    --ink-soft: var(--fabric-indigo);
    --text: var(--thread-bone);
    --muted: #b7c2c8;
    --quiet: #7f929d;
    --blue: var(--thread-blue);
    --blue-dim: var(--thread-blue-deep);
    --gold: var(--thread-gold);
    --gold-deep: var(--thread-gold-deep);
    --line: rgba(186, 200, 211, 0.14);
    --line-strong: rgba(186, 200, 211, 0.3);
    --line-blue: rgba(110, 213, 245, 0.34);
    --seam: rgba(224, 234, 238, 0.32);
    --patch-shadow: 0 1.2rem 2.6rem rgba(0, 3, 10, 0.52), 0 0.18rem 0.28rem rgba(0, 0, 0, 0.72);
    --font-sans: "Arial Narrow", "Helvetica Neue", Helvetica, Arial, sans-serif;
    --font-display: Impact, Haettenschweiler, "Arial Narrow Bold", "Helvetica Neue", sans-serif;
    --font-serif: "Iowan Old Style", "Baskerville", "Times New Roman", serif;
    --font-mono: "SFMono-Regular", "Roboto Mono", Consolas, monospace;
    --font-ja: "Hiragino Kaku Gothic ProN", "Yu Gothic", "YuGothic", Meiryo, sans-serif;
    --font-zh: "PingFang TC", "Noto Sans TC", "Microsoft JhengHei", sans-serif;
    --font-sea: "Noto Sans", "Noto Sans Thai", "Noto Sans Lao", "Noto Sans Myanmar", "Noto Sans Khmer", Arial, sans-serif;
    --content: 1400px;
    --gutter: clamp(1.25rem, 4vw, 4.75rem);
    --header-height: 4.7rem;
    --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
    --ease-stitch: steps(32, end);
}

@view-transition {
    navigation: auto;
}

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

html {
    background: var(--fabric-sumi);
    scroll-padding-top: calc(var(--header-height) + 1rem);
}

body {
    min-width: 20rem;
    min-height: 100vh;
    margin: 0;
    overflow-x: hidden;
    position: relative;
    background:
        radial-gradient(circle at 50% -12rem, rgba(45, 100, 161, 0.22), transparent 42rem),
        repeating-linear-gradient(0deg, rgba(255, 255, 255, 0.012) 0 1px, transparent 1px 4px),
        repeating-linear-gradient(90deg, rgba(0, 0, 0, 0.08) 0 1px, transparent 1px 5px),
        var(--fabric-sumi);
    color: var(--text);
    font-family: var(--font-sans);
    font-size: 1rem;
    font-feature-settings: "kern" 1, "tnum" 1;
    line-height: 1.55;
    text-rendering: optimizeLegibility;
}

body::before {
    position: fixed;
    inset: 0;
    z-index: 0;
    background:
        repeating-linear-gradient(118deg, transparent 0 3px, rgba(166, 193, 211, 0.025) 3px 4px),
        repeating-linear-gradient(28deg, transparent 0 5px, rgba(0, 0, 0, 0.06) 5px 6px);
    content: "";
    opacity: 0.8;
    pointer-events: none;
}

html[data-locale="ja"] body {
    font-family: var(--font-ja);
    line-break: strict;
}

html[data-locale="zh-Hant"] body {
    font-family: var(--font-zh);
    line-break: strict;
}

html[data-locale="th"] body,
html[data-locale="vi"] body,
html[data-locale="my"] body,
html[data-locale="km"] body,
html[data-locale="lo"] body,
html[data-locale="fil"] body,
html[data-locale="tet"] body,
html[data-locale="id"] body,
html[data-locale="ms"] body {
    font-family: var(--font-sea);
}

[data-locale]:not([data-locale="ja"]) .locale-copy--ja,
[data-locale="ja"] .locale-copy--en {
    display: none !important;
}

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

a {
    color: inherit;
    text-decoration-thickness: 1px;
    text-underline-offset: 0.24em;
}

a:focus-visible,
summary:focus-visible {
    outline: 2px dashed var(--thread-bone);
    outline-offset: 4px;
}

p,
h1,
h2,
h3,
dl,
dd,
figure {
    margin: 0;
}

.skip-link {
    position: fixed;
    top: 0.7rem;
    left: 0.7rem;
    z-index: 100;
    padding: 0.62rem 0.8rem;
    border: 2px dashed var(--thread-bone);
    border-radius: 0.28rem;
    background: var(--fabric-indigo-raised);
    color: var(--text);
    font-family: var(--font-mono);
    font-size: 0.68rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    transform: translateY(calc(-100% - 1rem));
}

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

.site-header {
    position: sticky;
    top: 0;
    z-index: 30;
    min-height: var(--header-height);
    border-bottom: 0.28rem solid #02050b;
    background:
        repeating-linear-gradient(90deg, rgba(255, 255, 255, 0.025) 0 1px, transparent 1px 5px),
        rgba(6, 15, 31, 0.97);
    box-shadow: 0 0.25rem 0 rgba(110, 213, 245, 0.13), 0 0.8rem 1.8rem rgba(0, 0, 0, 0.26);
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
}

.site-header::after {
    position: absolute;
    right: 0;
    bottom: -0.17rem;
    width: 100%;
    height: 1px;
    background: repeating-linear-gradient(90deg, var(--thread-gold) 0 0.32rem, transparent 0.32rem 0.68rem);
    content: "";
}

.site-header__inner {
    width: min(calc(100% - (var(--gutter) * 2)), var(--content));
    min-height: var(--header-height);
    margin-inline: auto;
    display: grid;
    grid-template-columns: minmax(9rem, 1fr) auto minmax(9rem, 1fr);
    align-items: center;
    gap: 1.35rem;
}

.wordmark {
    width: max-content;
    display: flex;
    align-items: baseline;
    gap: 0.58rem;
    padding: 0.42rem 0.65rem 0.4rem;
    border: 1px solid rgba(241, 232, 214, 0.35);
    border-radius: 0.28rem;
    background: #0a1830;
    box-shadow: inset 0 0 0 2px #050b18, inset 0 0 0 3px rgba(110, 213, 245, 0.18), 0 0.25rem 0.55rem rgba(0, 0, 0, 0.45);
    text-decoration: none;
}

.wordmark > span {
    color: var(--thread-bone);
    font-family: var(--font-display);
    font-size: 0.92rem;
    font-weight: 900;
    letter-spacing: 0.16em;
    text-shadow: 0 1px 0 #000, 0 0 0.3rem rgba(110, 213, 245, 0.22);
}

.wordmark small {
    color: var(--thread-blue);
    font-family: var(--font-mono);
    font-size: 0.625rem;
    font-weight: 700;
    letter-spacing: 0.13em;
}

.section-code {
    display: flex;
    align-items: center;
    gap: 0.65rem;
    color: var(--muted);
    font-family: var(--font-mono);
    font-size: 0.62rem;
    font-weight: 700;
    letter-spacing: 0.16em;
}

.section-code::before,
.section-code::after {
    width: 1.5rem;
    height: 1px;
    border-top: 1px dashed var(--seam);
    background: transparent;
    content: "";
}

.section-code span:first-child {
    color: var(--gold);
}

.utility-nav {
    min-width: 0;
    justify-self: end;
    display: flex;
    align-items: center;
    gap: 0.85rem;
    font-family: var(--font-mono);
    font-size: 0.6rem;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
}

.utility-nav a {
    color: var(--muted);
    text-decoration: none;
    transition: color 180ms ease, text-shadow 180ms ease;
}

.utility-nav a:hover {
    color: var(--thread-bone);
    text-shadow: 0 0 0.55rem rgba(110, 213, 245, 0.48);
}

.utility-nav__rule {
    width: 1.9rem;
    height: 1px;
    background: var(--line-strong);
}

.language-menu {
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: 0.68rem;
    white-space: nowrap;
}

.language-menu > a[aria-current="page"] {
    color: var(--text);
    text-decoration: underline;
    text-decoration-color: var(--gold);
    text-underline-offset: 0.34rem;
}

.language-picker {
    position: relative;
}

.language-picker summary {
    min-width: 8.5rem;
    padding: 0.15rem 1.15rem 0.15rem 0;
    display: grid;
    grid-template-columns: auto auto;
    align-items: baseline;
    gap: 0.7rem;
    color: var(--muted);
    cursor: pointer;
    list-style: none;
    user-select: none;
}

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

.language-picker summary::after {
    position: absolute;
    top: 0.2rem;
    right: 0;
    color: var(--gold);
    content: "+";
    font-size: 0.85rem;
    line-height: 1;
}

.language-picker[open] summary::after {
    content: "−";
}

.language-picker__label {
    font-size: 0.625rem;
    letter-spacing: 0.13em;
}

.language-picker summary strong {
    color: var(--text);
    font-size: 0.625rem;
    font-weight: 700;
}

.language-picker__panel {
    position: absolute;
    top: calc(100% + 1.45rem);
    right: 0;
    z-index: 40;
    width: min(23rem, calc(100vw - (var(--gutter) * 2)));
    padding: 1.2rem;
    border: 2px solid #020610;
    border-radius: 0.42rem;
    outline: 1px dashed rgba(241, 232, 214, 0.4);
    outline-offset: -0.48rem;
    background:
        repeating-linear-gradient(90deg, rgba(255, 255, 255, 0.025) 0 1px, transparent 1px 4px),
        var(--fabric-indigo-raised);
    box-shadow: var(--patch-shadow);
    white-space: normal;
}

.language-picker__note {
    padding-bottom: 0.7rem;
    border-bottom: 1px solid var(--line);
    color: var(--quiet);
    font-size: 0.625rem;
    letter-spacing: 0.1em;
    overflow-wrap: anywhere;
}

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

.language-picker__link {
    min-width: 0;
    min-height: 2.75rem;
    padding: 0.65rem 0.35rem;
    display: flex;
    align-items: center;
    border-bottom: 1px solid var(--line);
    color: var(--muted);
    overflow-wrap: anywhere;
}

.language-picker__link:nth-child(odd) {
    border-right: 1px solid var(--line);
}

.language-picker__link:nth-child(even) {
    padding-left: 0.8rem;
}

.language-picker__link[aria-current="page"] {
    color: var(--thread-gold);
    text-shadow: 0 1px 0 #000;
}

main,
.site-footer {
    position: relative;
    z-index: 1;
}

.course-field {
    position: fixed;
    top: var(--header-height);
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 0;
    overflow: hidden;
    contain: strict;
    opacity: 0.64;
    pointer-events: none;
    user-select: none;
}

.course-field__edge {
    position: absolute;
    top: 0;
    bottom: 0;
    width: clamp(24rem, 39vw, 43rem);
    overflow: hidden;
}

.course-field__edge--left {
    left: 0;
    -webkit-mask-image: linear-gradient(90deg, #000 0%, rgba(0, 0, 0, 0.82) 42%, transparent 100%);
    mask-image: linear-gradient(90deg, #000 0%, rgba(0, 0, 0, 0.82) 42%, transparent 100%);
}

.course-field__edge--right {
    right: 0;
    -webkit-mask-image: linear-gradient(270deg, #000 0%, rgba(0, 0, 0, 0.82) 42%, transparent 100%);
    mask-image: linear-gradient(270deg, #000 0%, rgba(0, 0, 0, 0.82) 42%, transparent 100%);
}

.course-field__slot {
    position: absolute;
    top: 50%;
    width: clamp(24rem, 41vw, 45rem);
    aspect-ratio: 4 / 3;
    opacity: var(--course-stitch-opacity, 1);
    will-change: opacity;
}

.course-field__edge--left .course-field__slot {
    left: 0;
    transform: translate3d(-35%, -55%, 0) rotate(-2.4deg) scale(1.02);
}

.course-field__edge--right .course-field__slot {
    right: 0;
    transform: translate3d(35%, -43%, 0) rotate(2.8deg) scale(1.08);
}

.course-field__canvas {
    display: block;
    width: 100%;
    height: 100%;
    overflow: visible;
    filter:
        drop-shadow(0 0.24rem 0.12rem rgba(0, 0, 0, 0.9))
        drop-shadow(0 0 0.5rem rgba(71, 174, 218, 0.12));
}

.course-field__line {
    fill: none;
    stroke-linecap: round;
    stroke-linejoin: round;
    vector-effect: non-scaling-stroke;
}

.course-field__line--bed {
    stroke: rgba(0, 2, 8, 0.74);
    stroke-width: 9;
    stroke-dasharray: 1;
    stroke-dashoffset: var(--course-stitch-offset, 0);
}

.course-field__line--progress {
    stroke: rgba(52, 157, 202, 0.78);
    stroke-width: 3.8;
    stroke-dasharray: 1;
    stroke-dashoffset: var(--course-stitch-offset, 0);
    filter: drop-shadow(0 -0.5px 0 rgba(196, 236, 248, 0.42));
}

.course-field__edge--right .course-field__line--progress {
    stroke: rgba(206, 164, 77, 0.76);
}

.course-field__marker-geometry {
    visibility: hidden;
    fill: none;
    stroke: none;
    pointer-events: none;
}

.course-field__marker {
    opacity: 0.88;
    transform-box: fill-box;
    transform-origin: center;
}

.course-field__marker[hidden] {
    display: none;
}

.course-field__marker-triangle {
    fill: var(--thread-silver);
    stroke: var(--ink);
    stroke-width: 1;
    stroke-linejoin: round;
    scale: 1.55 0.48;
    transform-origin: center;
    vector-effect: non-scaling-stroke;
}

.course-field__edge--right .course-field__marker-triangle {
    fill: var(--thread-gold);
}

.hero {
    position: relative;
    width: min(calc(100% - (var(--gutter) * 2)), var(--content));
    min-height: calc(100svh - var(--header-height));
    margin-inline: auto;
    padding: clamp(2.1rem, 4.5vh, 3.8rem) 0 clamp(3rem, 6vh, 5rem);
    display: grid;
    grid-template-columns: repeat(12, minmax(0, 1fr));
    grid-template-rows: auto minmax(34rem, 1fr) auto;
    column-gap: clamp(0.75rem, 1.8vw, 1.8rem);
    isolation: isolate;
}

.hero::before {
    position: absolute;
    top: clamp(5.9rem, 11vh, 8.4rem);
    right: 0;
    left: 0;
    height: 0;
    border-top: 1px dashed rgba(241, 232, 214, 0.28);
    background: transparent;
    content: "";
    pointer-events: none;
}

.hero::after {
    position: absolute;
    right: 0;
    bottom: 0;
    left: 0;
    height: 0.62rem;
    border-top: 0.18rem solid #02050a;
    border-bottom: 1px dashed rgba(215, 179, 101, 0.48);
    background: repeating-linear-gradient(135deg, rgba(215, 179, 101, 0.32) 0 2px, transparent 2px 6px);
    content: "";
    pointer-events: none;
}

.hero__diagram {
    --route-offset: 0;
    --route-marker-opacity: 0.9;
    --route-shift: 0px;
    position: absolute;
    top: clamp(7.2rem, 13vh, 9.5rem);
    right: auto;
    bottom: auto;
    left: 0;
    z-index: 2;
    width: clamp(24rem, 40vw, 34rem);
    aspect-ratio: 1;
    overflow: hidden;
    border: 0.32rem solid #02050c;
    border-radius: 2rem 2rem 42% 42% / 2rem 2rem 18% 18%;
    outline: 1px dashed rgba(241, 232, 214, 0.26);
    outline-offset: -0.75rem;
    background:
        radial-gradient(circle at 50% 48%, rgba(26, 77, 125, 0.28), transparent 54%),
        repeating-linear-gradient(0deg, rgba(255, 255, 255, 0.015) 0 1px, transparent 1px 4px),
        repeating-linear-gradient(90deg, rgba(0, 0, 0, 0.09) 0 1px, transparent 1px 5px),
        rgba(8, 23, 48, 0.72);
    box-shadow: inset 0 0 4rem rgba(0, 0, 0, 0.42), var(--patch-shadow);
    pointer-events: none;
}

.hero__diagram::before {
    position: absolute;
    inset: 0;
    background:
        linear-gradient(90deg, transparent calc(25% - 0.5px), rgba(110, 213, 245, 0.055) 25%, transparent calc(25% + 0.5px)),
        linear-gradient(90deg, transparent calc(75% - 0.5px), rgba(110, 213, 245, 0.055) 75%, transparent calc(75% + 0.5px)),
        linear-gradient(0deg, transparent calc(50% - 0.5px), rgba(110, 213, 245, 0.055) 50%, transparent calc(50% + 0.5px));
    content: "";
    border-radius: inherit;
}

.hero__diagram::after {
    position: absolute;
    top: 0.92rem;
    right: 0.92rem;
    width: 4.6rem;
    height: 1.45rem;
    border: 1px solid #02050c;
    border-radius: 0.18rem;
    background:
        repeating-linear-gradient(135deg, rgba(241, 232, 214, 0.2) 0 1px, transparent 1px 3px),
        var(--thread-blue-deep);
    box-shadow: inset 0 0 0 1px rgba(241, 232, 214, 0.18), 0 0.18rem 0.35rem rgba(0, 0, 0, 0.55);
    content: "";
}

.hero__route-canvas {
    position: absolute;
    inset: 2.8rem 0 2.25rem;
    width: 100%;
    height: calc(100% - 5.05rem);
    overflow: visible;
    opacity: 0.98;
    scale: 1.16;
    filter:
        drop-shadow(0 0.24rem 0.12rem rgba(0, 0, 0, 0.95))
        drop-shadow(0 0 0.58rem rgba(66, 177, 222, 0.2));
    transform: translate3d(0, var(--route-shift), 0);
}

.hero__route-bed,
.hero__route-underlay,
.hero__route-line,
.hero__route-mask-line,
.hero__route-highlight,
.hero__route-stitches {
    fill: none;
    stroke-linecap: round;
    stroke-linejoin: round;
    vector-effect: non-scaling-stroke;
}

.hero__route-bed {
    stroke: rgba(0, 2, 8, 0.9);
    stroke-width: 13;
}

.hero__route-underlay {
    stroke: #1f567f;
    stroke-width: 8.4;
    filter: drop-shadow(0 -1px 0 rgba(186, 224, 238, 0.25));
}

.hero__route-threadwork {
    opacity: var(--route-stitch-opacity, 1);
}

.hero__route-line {
    stroke-dasharray: none;
    stroke-dashoffset: 0;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.hero__route-line--primary {
    stroke: #65c5e4;
    stroke-width: 6.1;
    stroke-dasharray: none;
    filter: drop-shadow(0 1.6px 0 #0a4568) drop-shadow(0 0.18rem 0.1rem rgba(0, 0, 0, 0.72));
}

.hero__route-mask-line {
    stroke: #fff;
    stroke-width: 14;
    stroke-dasharray: 1;
    stroke-dashoffset: var(--route-stitch-offset, 0);
}

.hero__route-highlight {
    stroke: rgba(237, 249, 248, 0.74);
    stroke-width: 0.92;
    stroke-dasharray: none;
    stroke-dashoffset: 0;
    transform: translate(-0.45px, -0.45px);
}

.hero__route-stitches {
    stroke: rgba(3, 24, 45, 0.84);
    stroke-width: 1.8;
    stroke-dasharray: none;
    stroke-dashoffset: 0;
    transform: translate(0.55px, 0.55px);
}

.hero__route-cross-stitches line {
    stroke: rgba(3, 28, 49, 0.88);
    stroke-width: 0.82;
    stroke-linecap: round;
    vector-effect: non-scaling-stroke;
}

.hero__route-cross-stitches line:nth-child(3n) {
    stroke: rgba(230, 247, 249, 0.46);
    stroke-width: 0.62;
}

.hero__route-marker {
    opacity: var(--route-marker-opacity);
}

.hero__route-marker[hidden] {
    display: none;
}

.hero__route-marker-triangle {
    fill: var(--thread-bone);
    stroke: #02050a;
    stroke-width: 0.85;
    stroke-linejoin: round;
    filter: drop-shadow(0 1px 0 #02050a);
    vector-effect: non-scaling-stroke;
}

.hero__diagram-meta {
    position: absolute;
    z-index: 2;
    color: var(--quiet);
    font-family: var(--font-mono);
    font-size: clamp(0.625rem, 0.65vw, 0.68rem);
    font-weight: 700;
    letter-spacing: 0.13em;
    line-height: 1.45;
    text-transform: uppercase;
}

.hero__diagram-meta--top {
    top: 0.85rem;
    left: 0.95rem;
}

.hero__diagram-meta--bottom {
    right: 0.95rem;
    bottom: 0.75rem;
    text-align: right;
}

.hero__diagram-meta--bottom span {
    padding-left: 0.6rem;
    color: var(--gold);
}

html.js .hero__diagram .hero__route-canvas,
html.js .hero__diagram .hero__diagram-meta {
    opacity: 1;
    transform: none;
    transition: none;
}

html.js .hero__diagram .hero__route-line,
html.js .hero__diagram .hero__route-mask-line {
    stroke-dashoffset: var(--route-stitch-offset, 0);
    transition: none;
}

.hero__route-flow {
    display: none;
}

html.js .hero__diagram.is-route-static .hero__route-canvas,
html.js .hero__diagram.is-route-static .hero__diagram-meta {
    opacity: 1 !important;
    transform: none !important;
}

html.js .hero__diagram.is-route-static .hero__route-line {
    stroke-dashoffset: 0 !important;
}

html.js .hero__diagram.is-route-static .hero__route-mask-line {
    stroke-dashoffset: 0 !important;
}

html.js .hero__diagram.is-route-static .hero__route-marker {
    display: none;
}

.hero__index {
    grid-column: 1 / span 3;
    grid-row: 1;
    align-self: start;
    display: flex;
    align-items: baseline;
    gap: 0.65rem;
    color: var(--muted);
    font-family: var(--font-mono);
    font-size: 0.625rem;
    font-weight: 700;
    letter-spacing: 0.16em;
}

.hero__index::after {
    width: clamp(2rem, 7vw, 6rem);
    height: 0;
    margin-left: 0.4rem;
    border-top: 1px dashed var(--seam);
    background: transparent;
    content: "";
}

.hero__index strong {
    color: var(--gold);
    font-size: 0.9rem;
    font-weight: 500;
}

.hero__utility-patches {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 0.5rem;
}

.hero__utility-patches span {
    min-height: 1.75rem;
    padding: 0.34rem 0.64rem;
    display: inline-flex;
    align-items: center;
    border: 0.16rem solid #02050b;
    border-radius: 0.26rem;
    outline: 1px dashed rgba(241, 232, 214, 0.42);
    outline-offset: -0.34rem;
    background:
        repeating-linear-gradient(110deg, rgba(255, 255, 255, 0.04) 0 1px, transparent 1px 3px),
        var(--fabric-indigo-raised);
    box-shadow: 0 0.24rem 0.38rem rgba(0, 0, 0, 0.55);
    color: var(--thread-bone);
    font-family: var(--font-mono);
    font-size: 0.54rem;
    font-weight: 800;
    letter-spacing: 0.11em;
    line-height: 1;
    text-shadow: 0 1px 0 #000;
}

.hero__utility-patches span:nth-child(2) {
    background:
        repeating-linear-gradient(110deg, rgba(255, 255, 255, 0.05) 0 1px, transparent 1px 3px),
        #702627;
}

.hero__utility-patches span:last-child {
    color: #201608;
    background:
        repeating-linear-gradient(110deg, rgba(255, 255, 255, 0.13) 0 1px, transparent 1px 3px),
        var(--thread-gold);
}

.hero__title {
    grid-column: 6 / -1;
    grid-row: 2;
    align-self: center;
    min-width: 0;
    z-index: 4;
    padding: clamp(1.4rem, 3vw, 2.4rem);
    border: 0.28rem solid #02050b;
    border-radius: 0.7rem;
    outline: 1px dashed rgba(241, 232, 214, 0.32);
    outline-offset: -0.72rem;
    background:
        linear-gradient(90deg, rgba(5, 12, 26, 0.96), rgba(8, 20, 40, 0.83) 64%, rgba(8, 20, 40, 0.46)),
        repeating-linear-gradient(0deg, rgba(255, 255, 255, 0.025) 0 1px, transparent 1px 4px);
    box-shadow: var(--patch-shadow);
}

.eyebrow {
    color: var(--thread-blue);
    font-family: var(--font-mono);
    font-size: clamp(0.625rem, 0.68vw, 0.68rem);
    font-weight: 700;
    letter-spacing: 0.17em;
    line-height: 1.5;
    text-transform: uppercase;
}

.hero h1 {
    margin-top: clamp(1.25rem, 2.5vh, 2rem);
    line-height: 0.84;
}

.hero__title-code {
    position: relative;
    width: max-content;
    display: block;
    color: var(--thread-bone);
    font-family: var(--font-display);
    font-size: clamp(5.2rem, 11.6vw, 10.8rem);
    font-weight: 900;
    letter-spacing: -0.035em;
    paint-order: stroke fill;
    -webkit-text-stroke: 1px rgba(255, 255, 255, 0.14);
    text-shadow:
        0 1px 0 #a59c89,
        0 2px 0 #6e6659,
        0 5px 0 #071124,
        0 8px 1rem rgba(0, 0, 0, 0.56);
}

.hero__title-code::after {
    position: absolute;
    right: -0.58rem;
    bottom: 0.07em;
    width: 0.5rem;
    height: 0.5rem;
    border: 2px solid var(--thread-red);
    border-radius: 50%;
    box-shadow: inset 0 0 0 2px #090e18, 0 0.15rem 0.2rem rgba(0, 0, 0, 0.68);
    content: "";
}

.hero__title-name {
    width: max-content;
    max-width: 100%;
    margin: clamp(0.85rem, 1.5vw, 1.25rem) 0 0 clamp(3.2rem, 9vw, 8.2rem);
    display: block;
    color: var(--thread-gold);
    font-family: var(--font-sans);
    font-size: clamp(1.35rem, 2.4vw, 2.45rem);
    font-weight: 800;
    letter-spacing: 0.035em;
    line-height: 1;
    paint-order: stroke fill;
    -webkit-text-stroke: 0.035em #5f4318;
    text-shadow:
        0 -1px 0 rgba(255, 239, 184, 0.54),
        0 1px 0 #8e692d,
        0 2px 0 #4b3414,
        1px 3px 0 #111827,
        -1px 3px 0 #111827,
        0 0.28rem 0.4rem rgba(0, 0, 0, 0.76);
    text-transform: uppercase;
}

html[data-locale="ja"] .hero__title-name {
    font-family: var(--font-ja);
    letter-spacing: 0.015em;
}

.hero__utility-patches {
    justify-content: flex-start;
    margin-top: 1.45rem;
}

.hero__summary {
    grid-column: 6 / -1;
    grid-row: 3;
    align-self: end;
    position: relative;
    padding: 1.3rem 0 0 clamp(1.2rem, 2.5vw, 2.5rem);
    border-top: 1px dashed var(--seam);
    border-left: 1px dashed rgba(110, 213, 245, 0.28);
}

.hero__summary::before {
    position: absolute;
    top: -0.28rem;
    left: -0.28rem;
    width: 0.5rem;
    height: 0.5rem;
    border: 2px solid #02050b;
    border-radius: 50%;
    background: var(--thread-gold);
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.25);
    content: "";
}

.hero__lede {
    max-width: 40rem;
    color: #d5dfe3;
    font-family: var(--font-sans);
    font-size: clamp(1rem, 1.35vw, 1.25rem);
    font-weight: 600;
    line-height: 1.5;
}

html[data-locale="ja"] .hero__lede {
    font-family: var(--font-ja);
    line-height: 1.8;
}

.hero__facts {
    margin-top: clamp(1.4rem, 3vh, 2.4rem);
    display: grid;
    grid-template-columns: 1.25fr 0.72fr 1fr;
    border-top: 1px dashed var(--seam);
    border-bottom: 1px dashed var(--seam);
}

.hero__facts > div {
    min-width: 0;
    padding: 0.75rem 0.85rem;
    border-left: 1px dashed var(--seam);
}

.hero__facts > div:first-child {
    padding-left: 0;
    border-left: 0;
}

.hero__facts dt,
.record-entry__data dt {
    color: var(--quiet);
    font-family: var(--font-mono);
    font-size: 0.625rem;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
}

.hero__facts dd {
    margin-top: 0.32rem;
    color: var(--text);
    font-family: var(--font-mono);
    font-size: clamp(0.67rem, 0.8vw, 0.78rem);
    font-weight: 700;
    letter-spacing: 0.02em;
}

.hero__jump {
    grid-column: 1 / span 3;
    grid-row: 3;
    align-self: end;
    width: max-content;
    padding-top: 0.75rem;
    display: flex;
    align-items: center;
    gap: 0.9rem;
    padding: 0.65rem 0.8rem;
    border: 1px dashed rgba(241, 232, 214, 0.38);
    border-radius: 0.24rem;
    background: rgba(9, 25, 48, 0.72);
    color: var(--muted);
    font-family: var(--font-mono);
    font-size: 0.625rem;
    font-weight: 700;
    letter-spacing: 0.13em;
    text-decoration: none;
    text-transform: uppercase;
    transition: color 180ms ease;
}

.hero__jump span:last-child {
    color: var(--gold);
    font-size: 0.9rem;
    transform: translateY(0);
    transition: transform 240ms var(--ease-out);
}

.hero__jump:hover {
    color: var(--text);
}

.hero__jump:hover span:last-child {
    transform: translateY(0.18rem);
}

.archive-section {
    position: relative;
    width: min(calc(100% - (var(--gutter) * 2)), var(--content));
    margin: clamp(2rem, 5vw, 5rem) auto;
    padding: clamp(5.3rem, 8vw, 8rem) clamp(1.2rem, 4vw, 4.5rem);
    display: grid;
    grid-template-columns: repeat(12, minmax(0, 1fr));
    column-gap: clamp(0.75rem, 1.8vw, 1.8rem);
    overflow: hidden;
    border: 0.3rem solid #02050a;
    border-radius: 0.9rem;
    outline: 1px dashed rgba(241, 232, 214, 0.22);
    outline-offset: -0.76rem;
    background:
        radial-gradient(circle at 82% 8%, rgba(57, 111, 167, 0.13), transparent 29rem),
        repeating-linear-gradient(0deg, rgba(255, 255, 255, 0.014) 0 1px, transparent 1px 4px),
        repeating-linear-gradient(90deg, rgba(0, 0, 0, 0.075) 0 1px, transparent 1px 5px),
        rgba(7, 18, 38, 0.94);
    box-shadow: inset 0 0 5rem rgba(0, 0, 0, 0.3), var(--patch-shadow);
}

.archive-section::after {
    position: absolute;
    top: 0;
    right: 1.15rem;
    left: 1.15rem;
    width: auto;
    height: 0.48rem;
    border-bottom: 1px dashed rgba(215, 179, 101, 0.56);
    background: repeating-linear-gradient(135deg, rgba(215, 179, 101, 0.34) 0 2px, transparent 2px 6px);
    content: "";
}

.section-number {
    grid-column: 1 / span 1;
    align-self: start;
    width: 2.9rem;
    min-height: 2.35rem;
    padding: 0.72rem 0.55rem 0.55rem;
    border: 0.14rem solid #02050a;
    border-radius: 0.28rem;
    outline: 1px dashed rgba(241, 232, 214, 0.4);
    outline-offset: -0.3rem;
    background: var(--thread-gold);
    box-shadow: 0 0.3rem 0.5rem rgba(0, 0, 0, 0.46);
    color: #181105;
    font-family: var(--font-mono);
    font-size: 0.66rem;
    font-weight: 700;
    letter-spacing: 0.15em;
    line-height: 1;
    text-align: center;
}

.section-number::before {
    content: none;
}

.section-heading {
    grid-column: 3 / span 6;
    min-width: 0;
}

.section-heading h2 {
    margin-top: 1.05rem;
    color: var(--thread-bone);
    font-family: var(--font-sans);
    font-size: clamp(2.5rem, 5vw, 4.8rem);
    font-weight: 850;
    letter-spacing: -0.035em;
    line-height: 0.94;
    paint-order: stroke fill;
    -webkit-text-stroke: 0.028em rgba(27, 38, 48, 0.88);
    text-shadow:
        0 -1px 0 rgba(255, 255, 255, 0.42),
        0 1px 0 #a9a798,
        0 2px 0 #656b6c,
        1px 3px 0 #111a26,
        -1px 3px 0 #111a26,
        0 0.34rem 0.5rem rgba(0, 0, 0, 0.68);
    text-wrap: balance;
}

html[data-locale="ja"] .section-heading h2 {
    font-family: var(--font-ja);
    letter-spacing: 0.012em;
}

.section-heading__copy {
    max-width: 39rem;
    margin-top: 1.65rem;
    color: #bcc9d0;
    font-size: clamp(0.9rem, 1.05vw, 1rem);
    line-height: 1.8;
}

.coverage-strip {
    grid-column: 9 / -1;
    align-self: end;
    min-width: 0;
    padding: 0.95rem 1rem;
    display: grid;
    grid-template-columns: auto minmax(1.5rem, 1fr) auto;
    align-items: center;
    gap: 0.72rem;
    border: 0.18rem solid #02050a;
    border-radius: 0.34rem;
    outline: 1px dashed rgba(241, 232, 214, 0.34);
    outline-offset: -0.42rem;
    background: var(--fabric-indigo-raised);
    box-shadow: 0 0.32rem 0.55rem rgba(0, 0, 0, 0.48);
    color: var(--text);
    font-family: var(--font-mono);
    font-size: 0.6rem;
    font-weight: 700;
    letter-spacing: 0.09em;
}

.coverage-strip__line {
    position: relative;
    height: 1px;
    height: 0.24rem;
    border-radius: 999px;
    background: repeating-linear-gradient(90deg, var(--thread-blue) 0 0.35rem, #0b506f 0.35rem 0.52rem);
    box-shadow: 0 1px 0 #02050a, 0 -1px 0 rgba(224, 247, 252, 0.42);
}

.coverage-strip__line::before,
.coverage-strip__line::after {
    position: absolute;
    top: -0.19rem;
    width: 0.58rem;
    height: 0.58rem;
    border: 0.14rem solid #02050a;
    border-radius: 50%;
    background: var(--thread-blue);
    content: "";
}

.coverage-strip__line::before {
    left: 0;
}

.coverage-strip__line::after {
    right: 0;
}

.coverage-strip strong {
    grid-column: 1 / -1;
    padding-top: 0.75rem;
    border-top: 1px dashed var(--seam);
    color: var(--thread-gold);
    font-size: 0.625rem;
    letter-spacing: 0.15em;
}

.record-ledger {
    grid-column: 2 / -1;
    margin-top: clamp(4.5rem, 8vw, 7.2rem);
    position: relative;
    border: 0;
}

.record-ledger::before {
    position: absolute;
    top: 0.75rem;
    bottom: 0.75rem;
    left: calc((100% / 11) - 0.72rem);
    width: 1px;
    border-left: 1px dashed rgba(215, 179, 101, 0.35);
    content: "";
    pointer-events: none;
}

.record-entry {
    position: relative;
    min-height: clamp(17rem, 27vw, 24rem);
    margin-top: 1.25rem;
    padding: clamp(2rem, 4vw, 3.4rem) clamp(1rem, 2.5vw, 2.4rem);
    display: grid;
    grid-template-columns: minmax(3rem, 0.65fr) minmax(15rem, 3.1fr) minmax(20rem, 4fr);
    gap: clamp(1rem, 2.6vw, 3rem);
    overflow: hidden;
    border: 0.28rem solid #02050a;
    border-radius: 0.56rem;
    outline: 1px dashed rgba(241, 232, 214, 0.36);
    outline-offset: -0.68rem;
    background:
        linear-gradient(115deg, rgba(255, 255, 255, 0.035), transparent 36%),
        repeating-linear-gradient(0deg, rgba(255, 255, 255, 0.018) 0 1px, transparent 1px 4px),
        #0b1930;
    box-shadow: var(--patch-shadow);
}

.record-entry + .record-entry {
    margin-top: 1.5rem;
}

.record-entry::after {
    position: absolute;
    right: 0;
    bottom: 0;
    color: rgba(110, 213, 245, 0.035);
    font-family: var(--font-display);
    font-size: clamp(5rem, 14vw, 13rem);
    font-weight: 900;
    letter-spacing: -0.07em;
    line-height: 0.72;
    pointer-events: none;
    transform-origin: right bottom;
    transition:
        color 520ms ease,
        transform 820ms var(--ease-out);
}

.record-entry:first-child::after {
    content: "OCM";
}

.record-entry:last-child::after {
    content: "TA";
}

.record-entry__number {
    position: relative;
    z-index: 1;
    color: var(--gold);
    font-family: var(--font-mono);
    font-size: 0.62rem;
    font-weight: 700;
    letter-spacing: 0.14em;
}

.record-entry__number::after {
    width: 0.45rem;
    height: 0.45rem;
    margin-top: 1rem;
    display: block;
    border: 2px solid #02050a;
    border-radius: 50%;
    background: currentColor;
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.25), 0 0.15rem 0.2rem rgba(0, 0, 0, 0.5);
    content: "";
    transform-origin: center;
    transition:
        background-color 320ms ease,
        transform 620ms var(--ease-out);
}

.record-entry__header,
.record-entry__data {
    position: relative;
    z-index: 1;
}

.record-entry__type {
    color: var(--blue);
    font-family: var(--font-mono);
    font-size: 0.625rem;
    font-weight: 700;
    letter-spacing: 0.16em;
}

.record-entry__header h3 {
    max-width: 24rem;
    margin-top: 0.75rem;
    color: var(--text);
    font-family: var(--font-sans);
    font-size: clamp(1.9rem, 3.25vw, 3.3rem);
    font-weight: 800;
    letter-spacing: -0.025em;
    line-height: 1.02;
    paint-order: stroke fill;
    -webkit-text-stroke: 0.025em rgba(22, 33, 43, 0.9);
    text-shadow:
        0 -1px 0 rgba(255, 255, 255, 0.34),
        0 1px 0 #8d9492,
        0 2px 0 #4e5960,
        1px 3px 0 #07101e,
        -1px 3px 0 #07101e,
        0 0.28rem 0.38rem rgba(0, 0, 0, 0.72);
    transform-origin: left center;
    transition:
        color 360ms ease,
        transform 620ms var(--ease-out);
}

html[data-locale="ja"] .record-entry__header h3 {
    font-family: var(--font-ja);
    letter-spacing: 0.008em;
}

.record-entry__header > p:not(.record-entry__type) {
    max-width: 25rem;
    margin-top: 0.95rem;
    color: var(--muted);
    font-size: 0.85rem;
    line-height: 1.7;
}

.record-entry__data {
    align-self: start;
    padding: 0.62rem 0.9rem;
    border: 1px dashed rgba(110, 213, 245, 0.4);
    background: rgba(2, 7, 16, 0.34);
}

.record-entry:first-child .record-entry__data {
    border-color: rgba(215, 179, 101, 0.42);
}

.record-entry__data > div {
    padding: 0.76rem 0;
    display: grid;
    grid-template-columns: minmax(7rem, 0.82fr) minmax(0, 1.65fr);
    gap: 1rem;
    border-bottom: 1px dotted var(--line-strong);
}

.record-entry__data dd {
    color: #d2d4cf;
    font-size: 0.76rem;
    line-height: 1.6;
}

.record-entry--ocm {
    padding-bottom: clamp(2.4rem, 5vw, 4.4rem);
}

.record-entry--ocm::before {
    position: absolute;
    inset: 0;
    z-index: 0;
    background:
        radial-gradient(circle at 76% 10%, rgba(224, 181, 73, 0.13), transparent 30%),
        linear-gradient(135deg, transparent 0 54%, rgba(215, 179, 101, 0.045) 54% 54.35%, transparent 54.35%);
    content: "";
    pointer-events: none;
}

.record-entry--ocm .record-entry__header {
    grid-column: 2 / -1;
}

.ocm-showcase {
    position: relative;
    z-index: 1;
    grid-column: 2 / -1;
    display: grid;
    gap: clamp(1.4rem, 3vw, 2.6rem);
}

.ocm-garage {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    align-items: end;
    gap: clamp(0.8rem, 1.8vw, 1.45rem);
}

.ocm-car-card {
    position: relative;
    min-width: 0;
    margin: 0;
    padding: clamp(0.75rem, 1.4vw, 1.15rem) clamp(0.65rem, 1.25vw, 1rem) 0.8rem;
    overflow: hidden;
    border: 0.2rem solid #02050a;
    border-radius: 0.42rem;
    outline: 1px dashed rgba(241, 232, 214, 0.32);
    outline-offset: -0.48rem;
    background:
        linear-gradient(180deg, rgba(223, 185, 91, 0.14), transparent 46%),
        repeating-linear-gradient(90deg, rgba(255, 255, 255, 0.025) 0 1px, transparent 1px 4px),
        #09152a;
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.08),
        inset 0 -1.25rem 2rem rgba(1, 5, 12, 0.62),
        0 0.8rem 1.35rem rgba(0, 0, 0, 0.34);
    isolation: isolate;
}

.ocm-car-card::before {
    position: absolute;
    right: -14%;
    bottom: 2.3rem;
    left: -14%;
    z-index: -1;
    height: 37%;
    border-radius: 50%;
    background: radial-gradient(ellipse, rgba(215, 179, 101, 0.2), rgba(8, 16, 28, 0) 66%);
    content: "";
    filter: blur(0.4rem);
}

.ocm-car-card:nth-child(2) {
    transform: translateY(clamp(0.5rem, 1.4vw, 1.1rem));
}

.ocm-car-card__image {
    position: relative;
    aspect-ratio: 16 / 9;
    display: grid;
    place-items: center;
}

.ocm-car-card__image::after {
    position: absolute;
    right: 6%;
    bottom: 2%;
    left: 6%;
    height: 12%;
    border-radius: 50%;
    background: rgba(0, 0, 0, 0.55);
    content: "";
    filter: blur(0.55rem);
    transform: translateY(45%);
}

.ocm-car-card img {
    position: relative;
    z-index: 1;
    width: 116%;
    max-width: none;
    height: 100%;
    object-fit: contain;
    filter: saturate(0.9) contrast(1.12) drop-shadow(0 0.65rem 0.35rem rgba(0, 0, 0, 0.68));
    transform-origin: 50% 72%;
    transition:
        filter 420ms ease,
        transform 650ms var(--ease-out);
}

.ocm-car-card figcaption {
    position: relative;
    z-index: 2;
    margin-top: 0.55rem;
    padding-top: 0.65rem;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 0.35rem 0.75rem;
    border-top: 1px dashed rgba(215, 179, 101, 0.44);
    color: var(--muted);
    font-family: var(--font-mono);
    font-size: 0.55rem;
    letter-spacing: 0.1em;
    text-transform: uppercase;
}

.ocm-car-card figcaption > span:first-child {
    color: var(--thread-gold);
    font-weight: 700;
}

.ocm-tally {
    position: relative;
    min-height: clamp(10rem, 17vw, 14rem);
    padding: clamp(1.1rem, 2.8vw, 2rem);
    display: grid;
    grid-template-columns: minmax(13rem, 0.95fr) minmax(13rem, 1.15fr) auto;
    align-items: center;
    gap: clamp(1rem, 2.4vw, 2.25rem);
    overflow: hidden;
    border: 0.22rem solid #02050a;
    border-radius: 0.42rem;
    outline: 1px dashed rgba(77, 52, 12, 0.7);
    outline-offset: -0.52rem;
    background:
        repeating-linear-gradient(0deg, rgba(83, 55, 5, 0.07) 0 1px, transparent 1px 4px),
        linear-gradient(108deg, #d6bd73, #f4dc91 36%, #a97a25 78%, #eccb71);
    box-shadow:
        inset 0 1px 0 rgba(255, 249, 209, 0.7),
        inset 0 -0.35rem 0.75rem rgba(77, 45, 0, 0.35),
        var(--patch-shadow);
    color: #17130c;
}

.ocm-tally::before,
.ocm-tally::after {
    position: absolute;
    width: 9rem;
    height: 9rem;
    border: 1px solid rgba(79, 50, 8, 0.27);
    border-radius: 44% 56% 48% 52%;
    content: "";
    pointer-events: none;
    transform: rotate(32deg);
}

.ocm-tally::before {
    top: -5.5rem;
    left: -2rem;
}

.ocm-tally::after {
    right: -2rem;
    bottom: -5.5rem;
}

.ocm-tally__plate {
    position: relative;
    aspect-ratio: 416 / 136;
    display: grid;
    place-items: center;
    overflow: hidden;
    border: clamp(0.18rem, 0.35vw, 0.28rem) solid #4d310b;
    border-radius: 999px;
    outline: 1px solid rgba(255, 243, 164, 0.9);
    outline-offset: -0.55rem;
    background:
        radial-gradient(circle at 27% 50%, rgba(255, 247, 177, 0.74), transparent 22%),
        radial-gradient(circle at 73% 50%, rgba(73, 40, 1, 0.42), transparent 28%),
        repeating-linear-gradient(110deg, rgba(255, 249, 194, 0.18) 0 2px, transparent 2px 5px),
        linear-gradient(180deg, #f5d656, #9c6710 52%, #eebd30);
    box-shadow:
        inset 0 0 0 0.22rem rgba(144, 90, 11, 0.64),
        inset 0 0 1.2rem rgba(56, 31, 0, 0.66),
        0 0.65rem 0.9rem rgba(63, 38, 0, 0.35);
}

.ocm-tally__plate::before,
.ocm-tally__plate::after {
    position: absolute;
    top: 50%;
    width: 34%;
    height: 46%;
    border-block: 0.18rem double rgba(79, 48, 5, 0.82);
    content: "";
    transform: translateY(-50%) skewX(-18deg);
}

.ocm-tally__plate::before {
    left: 5%;
}

.ocm-tally__plate::after {
    right: 5%;
    transform: translateY(-50%) skewX(18deg);
}

.ocm-tally__plate > span {
    position: relative;
    z-index: 2;
    color: #241502;
    font-family: var(--font-display);
    font-size: clamp(1.7rem, 4vw, 3.7rem);
    font-weight: 900;
    letter-spacing: 0.08em;
    line-height: 1;
    paint-order: stroke fill;
    -webkit-text-stroke: 0.035em #f9de73;
    text-shadow:
        0 1px 0 #fff2a4,
        0 2px 0 #88570b,
        0 0.28rem 0.4rem rgba(45, 25, 0, 0.45);
}

.ocm-tally__plate i {
    position: absolute;
    top: 16%;
    bottom: 16%;
    width: 0.18rem;
    border-radius: 999px;
    background: #62400a;
    box-shadow:
        0.35rem 0 #e8bd43,
        -0.35rem 0 #e8bd43;
    transform: rotate(34deg);
}

.ocm-tally__plate i:first-of-type {
    left: 18%;
}

.ocm-tally__plate i:last-of-type {
    right: 18%;
    transform: rotate(-34deg);
}

.ocm-tally__copy {
    position: relative;
    z-index: 1;
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    gap: 0.25rem 1rem;
}

.ocm-tally__copy p {
    font-family: var(--font-mono);
    font-size: clamp(0.68rem, 1vw, 0.82rem);
    font-weight: 800;
    letter-spacing: 0.14em;
    text-transform: uppercase;
}

.ocm-tally__copy strong {
    grid-row: 1 / span 2;
    grid-column: 2;
    font-family: var(--font-mono);
    font-size: clamp(2.8rem, 5vw, 4.8rem);
    font-weight: 900;
    letter-spacing: 0;
    line-height: 0.82;
    text-shadow: 0 2px 0 rgba(255, 242, 163, 0.75), 0 0.4rem 0.35rem rgba(85, 50, 0, 0.3);
}

.ocm-tally__copy small {
    max-width: 24rem;
    color: rgba(31, 23, 12, 0.75);
    font-size: 0.69rem;
    font-weight: 700;
    line-height: 1.55;
}

.ocm-tally > a {
    position: relative;
    z-index: 1;
    padding: 0.72rem 0.85rem;
    border: 1px solid rgba(62, 39, 6, 0.55);
    background: rgba(255, 242, 170, 0.28);
    color: #241706;
    font-family: var(--font-mono);
    font-size: 0.55rem;
    font-weight: 800;
    letter-spacing: 0.11em;
    line-height: 1.45;
    text-align: center;
    text-decoration: none;
}

@media (hover: hover) and (pointer: fine) {
    .ocm-car-card:is(:hover, :focus-within) img {
        filter: saturate(1.05) contrast(1.16) drop-shadow(0 0.8rem 0.45rem rgba(0, 0, 0, 0.72));
        transform: translateY(-0.2rem) scale(1.045);
    }

    .ocm-tally > a:is(:hover, :focus-visible) {
        background: rgba(255, 247, 198, 0.62);
        outline: 0.16rem solid #241706;
        outline-offset: 0.2rem;
    }
}

/* Fictional garage examples. Every value is labeled as sample data in the DOM. */
.ocm-spec-list {
    min-width: 0;
    display: grid;
    gap: clamp(1rem, 2.3vw, 1.8rem);
}

.ocm-spec-card {
    position: relative;
    min-width: 0;
    display: grid;
    grid-template-columns: minmax(17rem, 0.88fr) minmax(0, 1.32fr);
    overflow: hidden;
    border: 0.24rem solid #02050a;
    border-radius: 0.55rem;
    outline: 1px dashed rgba(241, 232, 214, 0.34);
    outline-offset: -0.62rem;
    background:
        linear-gradient(115deg, rgba(223, 185, 91, 0.085), transparent 35%),
        repeating-linear-gradient(90deg, rgba(255, 255, 255, 0.018) 0 1px, transparent 1px 4px),
        #08162b;
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.07),
        0 0.85rem 1.45rem rgba(0, 0, 0, 0.36);
    isolation: isolate;
}

.ocm-spec-card:nth-child(even) {
    background:
        linear-gradient(245deg, rgba(110, 213, 245, 0.085), transparent 38%),
        repeating-linear-gradient(90deg, rgba(255, 255, 255, 0.018) 0 1px, transparent 1px 4px),
        #08162b;
}

.ocm-spec-card::after {
    position: absolute;
    right: -1.25rem;
    bottom: -2.8rem;
    z-index: -1;
    color: rgba(215, 179, 101, 0.045);
    content: "SPEC";
    font-family: var(--font-display);
    font-size: clamp(6rem, 11vw, 10rem);
    font-weight: 900;
    line-height: 1;
    pointer-events: none;
}

.ocm-spec-card__visual {
    min-width: 0;
    margin: 0;
    padding: clamp(0.7rem, 1.3vw, 1rem);
    display: grid;
    grid-template-rows: 1fr auto;
    border-right: 1px dashed rgba(215, 179, 101, 0.4);
    background:
        radial-gradient(ellipse at 50% 72%, rgba(215, 179, 101, 0.18), transparent 42%),
        linear-gradient(180deg, rgba(1, 4, 10, 0.15), rgba(1, 5, 12, 0.5));
}

.ocm-spec-card__image {
    position: relative;
    min-height: clamp(12.5rem, 20vw, 18rem);
    display: grid;
    place-items: center;
    overflow: hidden;
}

.ocm-spec-card__image::after {
    position: absolute;
    right: 8%;
    bottom: 8%;
    left: 8%;
    height: 11%;
    border-radius: 50%;
    background: rgba(0, 0, 0, 0.66);
    content: "";
    filter: blur(0.7rem);
    transform: translateY(45%);
}

.ocm-spec-card__index {
    position: absolute;
    top: 0.2rem;
    left: 0.25rem;
    color: rgba(215, 179, 101, 0.12);
    font-family: var(--font-display);
    font-size: clamp(4rem, 8vw, 7rem);
    font-weight: 900;
    line-height: 1;
}

.ocm-spec-card__image img {
    position: relative;
    z-index: 1;
    width: 118%;
    max-width: none;
    height: 100%;
    object-fit: contain;
    filter: saturate(0.92) contrast(1.13) drop-shadow(0 0.72rem 0.35rem rgba(0, 0, 0, 0.72));
    transform-origin: 50% 72%;
    transition:
        filter 420ms ease,
        transform 680ms var(--ease-out);
}

.ocm-spec-card__visual figcaption {
    position: relative;
    z-index: 2;
    min-width: 0;
    padding: 0.72rem 0.4rem 0.18rem;
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    justify-content: space-between;
    gap: 0.35rem 0.8rem;
    border-top: 1px dashed rgba(215, 179, 101, 0.4);
    color: var(--muted);
    font-family: var(--font-mono);
    font-size: 0.55rem;
    letter-spacing: 0.11em;
    text-transform: uppercase;
}

.ocm-spec-card__visual figcaption > span:first-child {
    color: var(--thread-gold);
    font-weight: 800;
}

.ocm-spec-card__panel {
    min-width: 0;
    padding: clamp(1.2rem, 2.5vw, 2.1rem);
    display: grid;
    align-content: center;
    gap: clamp(1rem, 2vw, 1.6rem);
}

.ocm-spec-card__header {
    min-width: 0;
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    justify-content: space-between;
    gap: 0.75rem 1rem;
}

.ocm-spec-card__header p {
    color: var(--thread-gold);
    font-family: var(--font-mono);
    font-size: 0.55rem;
    font-weight: 800;
    letter-spacing: 0.15em;
}

.ocm-spec-card__header h4 {
    margin-top: 0.38rem;
    color: var(--text);
    font-family: var(--font-display);
    font-size: clamp(2rem, 4vw, 3.35rem);
    letter-spacing: -0.025em;
    line-height: 0.9;
    text-shadow:
        0 1px 0 #96968a,
        0 2px 0 #4d5558,
        0 0.25rem 0.32rem rgba(0, 0, 0, 0.7);
}

.ocm-spec-card__status {
    max-width: 13rem;
    padding: 0.55rem 0.65rem;
    border: 1px solid rgba(246, 142, 100, 0.7);
    background: rgba(114, 36, 25, 0.5);
    color: #ffd9c9;
    font-family: var(--font-mono);
    font-size: 0.5rem;
    font-weight: 700;
    letter-spacing: 0.11em;
    line-height: 1.45;
    text-align: center;
    text-transform: uppercase;
}

.ocm-spec-card__badge-rack {
    min-width: 0;
    display: grid;
    grid-template-columns: minmax(9rem, 0.78fr) minmax(14rem, 1.34fr);
    align-items: stretch;
    gap: clamp(0.7rem, 1.5vw, 1rem);
}

.ocm-sample-badge {
    min-width: 0;
    margin: 0;
    padding: clamp(0.62rem, 1.15vw, 0.85rem);
    display: grid;
    grid-template-rows: minmax(0, 1fr) auto;
    gap: 0.55rem;
    overflow: hidden;
    border: 0.18rem solid #03060b;
    border-radius: 0.48rem;
    outline: 1px dashed rgba(241, 232, 214, 0.35);
    outline-offset: -0.43rem;
    background:
        linear-gradient(145deg, rgba(225, 188, 96, 0.11), transparent 48%),
        repeating-linear-gradient(92deg, rgba(255, 255, 255, 0.022) 0 1px, transparent 1px 4px),
        rgba(3, 10, 22, 0.76);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.08),
        inset 0 -0.75rem 1.1rem rgba(0, 0, 0, 0.3);
}

.ocm-sample-badge__frame {
    position: relative;
    min-width: 0;
    aspect-ratio: var(--badge-aspect-ratio, 1);
    display: grid;
    place-items: center;
    overflow: hidden;
    border-bottom: 1px dashed rgba(215, 179, 101, 0.3);
    background: radial-gradient(circle, rgba(110, 213, 245, 0.09), transparent 68%);
}

.ocm-sample-badge--plate .ocm-sample-badge__frame {
    min-height: clamp(7rem, 11vw, 10rem);
}

.ocm-sample-badge__frame img {
    position: relative;
    z-index: 1;
    width: 100%;
    height: 100%;
    object-fit: contain;
    filter:
        saturate(0.96)
        contrast(1.07)
        drop-shadow(0 0.55rem 0.35rem rgba(0, 0, 0, 0.72));
}

.ocm-sample-badge__fallback {
    position: absolute;
    inset: 0.6rem;
    display: grid;
    place-items: center;
    border: 1px dashed rgba(215, 179, 101, 0.38);
    color: var(--quiet);
    font-family: var(--font-mono);
    font-size: 0.48rem;
    font-weight: 700;
    letter-spacing: 0.1em;
    line-height: 1.5;
    text-align: center;
    text-transform: uppercase;
}

.ocm-sample-badge__frame[data-asset-state="ready"] .ocm-sample-badge__fallback {
    display: none;
}

.ocm-sample-badge__frame[data-asset-state="missing"] {
    background:
        repeating-linear-gradient(135deg, rgba(215, 179, 101, 0.035) 0 0.35rem, transparent 0.35rem 0.7rem),
        rgba(3, 10, 22, 0.76);
}

.ocm-sample-badge__caption {
    min-width: 0;
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: end;
    gap: 0.18rem 0.65rem;
}

.ocm-sample-badge__label,
.ocm-sample-badge__detail {
    overflow-wrap: anywhere;
    font-family: var(--font-mono);
    font-size: 0.43rem;
    font-weight: 700;
    letter-spacing: 0.09em;
    line-height: 1.4;
    text-transform: uppercase;
}

.ocm-sample-badge__label {
    color: var(--thread-gold);
}

.ocm-sample-badge__title {
    grid-column: 1;
    color: var(--thread-bone);
    font-family: var(--font-display);
    font-size: clamp(1.45rem, 2.6vw, 2.25rem);
    line-height: 0.9;
}

.ocm-sample-badge__detail {
    grid-column: 1;
    color: var(--quiet);
}

.ocm-sample-badge__source {
    grid-column: 2;
    grid-row: 1 / span 3;
    align-self: end;
    display: inline-flex;
    gap: 0.25rem;
    color: var(--muted);
    font-family: var(--font-mono);
    font-size: 0.42rem;
    font-weight: 800;
    letter-spacing: 0.06em;
    line-height: 1.35;
    text-align: right;
    text-decoration: none;
    text-transform: uppercase;
}

.ocm-sample-badge__source:is(:hover, :focus-visible) {
    color: var(--thread-gold);
}

.ocm-spec-grid {
    min-width: 0;
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    border-block: 1px dashed rgba(215, 179, 101, 0.38);
}

.ocm-spec-grid > div {
    min-width: 0;
    padding: 0.9rem clamp(0.55rem, 1.2vw, 0.9rem);
    border-left: 1px dotted rgba(183, 194, 200, 0.24);
}

.ocm-spec-grid > div:first-child {
    padding-left: 0;
    border-left: 0;
}

.ocm-spec-grid dt {
    color: var(--muted);
    font-family: var(--font-mono);
    font-size: 0.48rem;
    font-weight: 800;
    letter-spacing: 0.13em;
    line-height: 1.35;
    text-transform: uppercase;
}

.ocm-spec-grid dd {
    min-width: 0;
    margin-top: 0.5rem;
    display: grid;
    gap: 0.22rem;
}

.ocm-spec-grid strong {
    color: var(--thread-bone);
    font-family: var(--font-mono);
    font-size: clamp(1.45rem, 2.7vw, 2.35rem);
    line-height: 0.9;
}

.ocm-spec-grid dd span {
    overflow-wrap: anywhere;
    color: var(--quiet);
    font-family: var(--font-mono);
    font-size: 0.43rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    line-height: 1.35;
}

.ocm-source-panel {
    min-width: 0;
    padding: clamp(0.9rem, 2vw, 1.25rem);
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    gap: 1rem 2rem;
    border: 1px dashed rgba(215, 179, 101, 0.42);
    background: rgba(2, 7, 16, 0.38);
}

.ocm-source-panel > p {
    max-width: 44rem;
    color: var(--muted);
    font-size: 0.68rem;
    line-height: 1.65;
}

.ocm-source-panel > p small {
    margin-top: 0.45rem;
    display: block;
    color: var(--quiet);
    font-family: var(--font-mono);
    font-size: 0.52rem;
    letter-spacing: 0.035em;
    line-height: 1.55;
}

.ocm-source-panel nav {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: 0.45rem;
}

.ocm-source-panel a {
    padding: 0.58rem 0.68rem;
    border: 1px solid rgba(215, 179, 101, 0.38);
    background: rgba(82, 55, 16, 0.36);
    color: var(--thread-gold);
    font-family: var(--font-mono);
    font-size: 0.48rem;
    font-weight: 800;
    letter-spacing: 0.09em;
    line-height: 1.35;
    text-align: center;
    text-decoration: none;
}

@media (hover: hover) and (pointer: fine) {
    .ocm-spec-card:is(:hover, :focus-within) .ocm-spec-card__image img {
        filter: saturate(1.05) contrast(1.17) drop-shadow(0 0.86rem 0.42rem rgba(0, 0, 0, 0.76));
        transform: translateY(-0.2rem) scale(1.035);
    }

    .ocm-source-panel a:is(:hover, :focus-visible) {
        border-color: rgba(246, 214, 129, 0.84);
        background: rgba(129, 89, 27, 0.52);
        color: var(--thread-bone);
    }
}

/* The injected ranking ledger follows the same sewn technical-label system. */
.archive-section .record-entry .ta-records,
.archive-section .record-entry .ta-records__status {
    grid-column: 2 / -1;
    margin-top: clamp(2rem, 4vw, 3.5rem);
}

.archive-section .record-entry .ta-records__status {
    padding: 1rem;
    border: 1px dashed rgba(110, 213, 245, 0.38);
    background: rgba(2, 7, 16, 0.32);
}

.archive-section .record-entry .ta-records__intro {
    padding: 1.2rem 1.1rem;
    border: 1px dashed rgba(110, 213, 245, 0.42);
    background:
        repeating-linear-gradient(90deg, rgba(255, 255, 255, 0.02) 0 1px, transparent 1px 4px),
        rgba(3, 10, 23, 0.48);
}

.archive-section .record-entry .ta-records__summary {
    color: var(--thread-bone);
    font-family: var(--font-sans);
    font-weight: 800;
    letter-spacing: -0.02em;
    paint-order: stroke fill;
    -webkit-text-stroke: 0.022em rgba(18, 30, 40, 0.9);
    text-shadow:
        0 -1px 0 rgba(255, 255, 255, 0.34),
        0 1px 0 #878b82,
        0 2px 0 #3f4a50,
        0 0.24rem 0.32rem rgba(0, 0, 0, 0.7);
}

.archive-section .record-entry .ta-records__source,
.archive-section .record-entry .ta-course__source {
    padding: 0.5rem 0.66rem;
    border: 0.14rem solid #02050a;
    border-radius: 0.22rem;
    outline: 1px dashed rgba(241, 232, 214, 0.3);
    outline-offset: -0.3rem;
    background: #132847;
    box-shadow: 0 0.2rem 0.3rem rgba(0, 0, 0, 0.42);
    color: var(--thread-gold);
}

.archive-section .record-entry .ta-records__caveat {
    margin-block: 1.25rem clamp(2rem, 4vw, 3.5rem);
    padding: 1rem 1.2rem;
    border: 0.2rem solid #02050a;
    border-radius: 0.22rem;
    outline: 1px dashed rgba(15, 25, 36, 0.46);
    outline-offset: -0.42rem;
    background:
        repeating-linear-gradient(0deg, rgba(10, 18, 25, 0.04) 0 1px, transparent 1px 4px),
        var(--fabric-label);
    box-shadow: 0 0.3rem 0.48rem rgba(0, 0, 0, 0.5);
}

.archive-section .record-entry .ta-records__caveat strong,
.archive-section .record-entry .ta-records__caveat p,
.archive-section .record-entry .ta-records__caveat small {
    color: #15202a;
}

.archive-section .record-entry .ta-records__caveat strong {
    font-weight: 900;
}

.archive-section .record-entry .ta-records__courses {
    gap: clamp(1.2rem, 3vw, 2.1rem);
}

.archive-section .record-entry .ta-course {
    padding: 1rem;
    border: 1px dashed rgba(241, 232, 214, 0.27);
    background: rgba(3, 10, 23, 0.32);
}

.archive-section .record-entry .ta-course__header {
    padding-bottom: 0.9rem;
}

.archive-section .record-entry .ta-course__header h4 {
    font-family: var(--font-sans);
    font-weight: 800;
    letter-spacing: -0.015em;
    paint-order: stroke fill;
    -webkit-text-stroke: 0.018em rgba(17, 29, 39, 0.88);
    text-shadow:
        0 -1px 0 rgba(255, 255, 255, 0.28),
        0 1px 0 #7c8585,
        0 2px 0 #27343d,
        0 0.2rem 0.28rem rgba(0, 0, 0, 0.72);
}

.archive-section .record-entry .ta-course__rows {
    border-top: 1px dashed rgba(110, 213, 245, 0.36);
}

.archive-section .record-entry .ta-record {
    padding: 0.86rem 0.65rem;
    border-bottom: 1px dotted rgba(186, 200, 211, 0.25);
}

.archive-section .record-entry .ta-record::before {
    width: 0.22rem;
    border-radius: 999px;
    background: var(--thread-blue);
}

.archive-section .record-entry .ta-record:hover,
.archive-section .record-entry .ta-record:focus-visible {
    border-bottom-color: rgba(110, 213, 245, 0.48);
    background: rgba(53, 135, 175, 0.12);
}

.archive-section .record-entry .ta-record__fact strong {
    color: #dbe4e5;
}

.archive-section .record-entry .ta-record__grade strong {
    border: 0.14rem solid #02050a;
    border-radius: 0.18rem;
    outline: 1px dashed rgba(110, 213, 245, 0.4);
    outline-offset: -0.25rem;
    background: #102643;
    color: var(--thread-blue);
}

.archive-section .record-entry .ta-records__source:focus-visible,
.archive-section .record-entry .ta-course__source:focus-visible,
.archive-section .record-entry .ta-record:focus-visible {
    outline: 2px dashed var(--thread-bone);
    outline-offset: 3px;
}

.archive-standard {
    position: relative;
    width: min(calc(100% - (var(--gutter) * 2)), var(--content));
    margin: 0 auto clamp(6rem, 10vw, 9.5rem);
    padding: clamp(2rem, 4vw, 3.8rem) 0;
    display: grid;
    grid-template-columns: minmax(7rem, 1fr) minmax(0, 4fr);
    gap: clamp(1.5rem, 4vw, 5rem);
    border-top: 1px solid var(--gold);
    border-bottom: 1px solid var(--line-strong);
    color: var(--text);
}

.archive-standard::before {
    position: absolute;
    top: -0.32rem;
    left: 0;
    width: min(14vw, 10rem);
    height: 0.32rem;
    background: var(--gold);
    content: "";
}

.archive-standard::after {
    position: absolute;
    top: clamp(2rem, 4vw, 3.8rem);
    right: 0;
    width: clamp(3.7rem, 8vw, 7rem);
    aspect-ratio: 1;
    border: 1px solid var(--gold-deep);
    content: "";
    transform: rotate(45deg);
}

.archive-standard__index {
    padding-top: 0.35rem;
    color: var(--gold);
    font-family: var(--font-mono);
    font-size: 0.625rem;
    font-weight: 800;
    letter-spacing: 0.15em;
}

.archive-standard > div {
    position: relative;
    z-index: 1;
    max-width: 54rem;
}

.archive-standard h2 {
    font-family: var(--font-serif);
    font-size: clamp(2rem, 3.9vw, 3.8rem);
    font-weight: 400;
    letter-spacing: -0.04em;
    line-height: 1;
    -webkit-text-stroke: 0.018em rgba(20, 31, 40, 0.84);
    text-shadow:
        0 -1px 0 rgba(255, 255, 255, 0.3),
        0 1px 0 #7f8580,
        0 2px 0 #303b42,
        0 0.28rem 0.38rem rgba(0, 0, 0, 0.68);
}

html[data-locale="ja"] .archive-standard h2 {
    font-family: "Yu Mincho", "YuMincho", "Hiragino Mincho ProN", serif;
    letter-spacing: 0.01em;
}

.archive-standard div > p {
    max-width: 48rem;
    margin-top: 1.25rem;
    color: var(--muted);
    font-size: 0.87rem;
    line-height: 1.8;
}

.site-footer {
    width: min(calc(100% - (var(--gutter) * 2)), var(--content));
    min-height: 8rem;
    margin-inline: auto;
    margin-bottom: 2rem;
    padding: 1.35rem 1.5rem;
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
    gap: 2rem;
    border: 0.2rem solid #02050a;
    border-radius: 0.38rem;
    outline: 1px dashed rgba(241, 232, 214, 0.25);
    outline-offset: -0.48rem;
    background:
        repeating-linear-gradient(90deg, rgba(255, 255, 255, 0.02) 0 1px, transparent 1px 4px),
        #09162b;
    box-shadow: var(--patch-shadow);
    color: var(--quiet);
    font-family: var(--font-mono);
    font-size: 0.625rem;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
}

.site-footer p:nth-child(2) {
    text-align: center;
}

.site-footer a {
    justify-self: end;
    color: var(--muted);
    text-decoration: none;
    transition: color 180ms ease;
}

.site-footer a:hover {
    color: var(--text);
}

.site-footer__map-credit {
    display: block;
    margin-top: 0.45rem;
    font-size: 0.55rem;
    font-weight: 500;
    letter-spacing: 0.07em;
    text-transform: none;
}

.site-footer__map-credit a {
    justify-self: auto;
    color: var(--quiet);
    text-decoration: underline;
    text-decoration-color: rgba(138, 184, 207, 0.45);
    text-underline-offset: 0.18em;
}

html.js:not(.reduced-motion) [data-reveal] {
    opacity: 0;
    transform: translate3d(var(--reveal-x, 0), 1.1rem, 0);
    transition:
        opacity 660ms var(--ease-out),
        transform 660ms var(--ease-out);
}

html.js:not(.reduced-motion) [data-reveal].is-visible {
    opacity: 1;
    transform: translate3d(0, 0, 0);
}

html.js:not(.reduced-motion) .section-heading[data-reveal] {
    --reveal-x: -0.7rem;
}

html.js:not(.reduced-motion) .coverage-strip[data-reveal] {
    --reveal-x: 0.7rem;
}

html.js:not(.reduced-motion) .record-entry[data-reveal] .record-entry__number,
html.js:not(.reduced-motion) .record-entry[data-reveal] .record-entry__header,
html.js:not(.reduced-motion) .record-entry[data-reveal] .record-entry__data,
html.js:not(.reduced-motion) .record-entry[data-reveal] .ocm-showcase {
    opacity: 0;
    transform: translate3d(0, 0.55rem, 0);
    transition:
        opacity 500ms var(--ease-out),
        transform 500ms var(--ease-out);
}

html.js:not(.reduced-motion) .record-entry[data-reveal].is-visible .record-entry__number,
html.js:not(.reduced-motion) .record-entry[data-reveal].is-visible .record-entry__header,
html.js:not(.reduced-motion) .record-entry[data-reveal].is-visible .record-entry__data,
html.js:not(.reduced-motion) .record-entry[data-reveal].is-visible .ocm-showcase {
    opacity: 1;
    transform: translate3d(0, 0, 0);
}

html.js:not(.reduced-motion) .record-entry[data-reveal].is-visible .record-entry__header {
    transition-delay: 65ms;
}

html.js:not(.reduced-motion) .record-entry[data-reveal].is-visible .record-entry__data {
    transition-delay: 130ms;
}

html.js:not(.reduced-motion) .record-entry[data-reveal].is-visible .ocm-showcase {
    transition-delay: 180ms;
}

html.js:not(.reduced-motion) .hero [data-reveal] {
    opacity: 1;
    transform: none;
    transition: none;
}

@media (prefers-reduced-motion: no-preference) {
    .record-entry:is(:hover, :focus-within)::after {
        color: rgba(138, 184, 207, 0.075);
        transform: translate3d(-0.5rem, -0.1rem, 0) scale(1.035);
    }

    .record-entry:first-child:is(:hover, :focus-within)::after {
        color: rgba(202, 163, 85, 0.08);
    }

    .record-entry:is(:hover, :focus-within) .record-entry__number::after {
        background: currentColor;
        transform: rotate(135deg) scale(1.18);
    }

    .record-entry:is(:hover, :focus-within) .record-entry__header h3 {
        color: color-mix(in srgb, var(--blue) 24%, var(--text));
        transform: translate3d(0.18rem, -0.08rem, 0);
    }

    .record-entry:first-child:is(:hover, :focus-within) .record-entry__header h3 {
        color: color-mix(in srgb, var(--gold) 26%, var(--text));
    }

}

@media (max-width: 68rem) {
    .course-field {
        opacity: 0.62;
    }

    .course-field__edge {
        width: clamp(22rem, 43vw, 32rem);
    }

    .course-field__slot {
        width: clamp(23rem, 47vw, 34rem);
    }

    .hero__diagram {
        left: 0;
        width: clamp(23rem, 39vw, 31rem);
    }

    .hero__title {
        grid-column: 6 / -1;
    }

    .hero__summary {
        grid-column: 6 / -1;
    }

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

    .coverage-strip {
        grid-column: 9 / -1;
    }

    .record-ledger {
        grid-column: 1 / -1;
    }

    .record-ledger::before {
        left: calc((100% / 12) - 0.55rem);
    }

    .record-entry {
        grid-template-columns: minmax(2.6rem, 0.5fr) minmax(13rem, 3fr) minmax(18rem, 4fr);
    }

}

@media (max-width: 52rem) {
    :root {
        --header-height: 4rem;
    }

    .course-field {
        opacity: 0.48;
    }

    .course-field__edge {
        width: 54vw;
    }

    .course-field__slot {
        width: clamp(22rem, 70vw, 29rem);
    }

    .course-field__edge--left .course-field__slot {
        transform: translate3d(-57%, -59%, 0) rotate(-3deg) scale(0.92);
    }

    .course-field__edge--right .course-field__slot {
        transform: translate3d(57%, -40%, 0) rotate(3.4deg) scale(0.94);
    }

    .site-header__inner {
        grid-template-columns: 1fr auto;
    }

    .section-code {
        display: none;
    }

    .hero {
        min-height: auto;
        padding-top: clamp(4rem, 10vw, 6rem);
        grid-template-rows: auto minmax(30rem, auto) auto;
    }

    .hero::before {
        top: 7.2rem;
    }

    .hero__diagram {
        top: 8rem;
        bottom: auto;
        left: 0;
        width: min(47vw, 23rem);
    }

    .hero__route-canvas {
        inset-block: 2rem 1.6rem;
        height: calc(100% - 3.6rem);
    }

    .hero__title {
        grid-column: 6 / -1;
        grid-row: 2;
        margin-top: clamp(3.3rem, 9vw, 5rem);
        padding: 1.45rem;
    }

    .hero__title-code {
        font-size: clamp(4.8rem, 15vw, 7.6rem);
    }

    .hero__title-name {
        margin-left: clamp(1.5rem, 4vw, 3.2rem);
        font-size: clamp(1.35rem, 4.3vw, 2.25rem);
    }

    .hero__summary {
        grid-column: 4 / -1;
        grid-row: 3;
        margin-top: clamp(4rem, 10vw, 6rem);
    }

    .hero__jump {
        grid-column: 1 / span 3;
        grid-row: 3;
        margin-bottom: 1rem;
    }

    .archive-section {
        padding: clamp(5.5rem, 15vw, 8rem) clamp(1rem, 4vw, 2.3rem);
    }

    .section-number {
        grid-column: 1 / span 1;
    }

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

    .coverage-strip {
        grid-column: 2 / -1;
        margin-top: 3rem;
    }

    .record-ledger {
        margin-top: 4rem;
    }

    .record-ledger::before {
        left: 2.2rem;
    }

    .record-entry {
        grid-template-columns: 2.2rem minmax(0, 1fr);
    }

    .record-entry__header {
        grid-column: 2;
    }

    .record-entry__data {
        grid-column: 2;
        margin-top: 1rem;
    }

    .ocm-showcase {
        grid-column: 2;
        margin-top: 1rem;
    }

}

@media (max-width: 40rem) {
    :root {
        --gutter: 1.2rem;
    }

    .course-field {
        opacity: 0.37;
    }

    .course-field__edge {
        width: 62vw;
    }

    .course-field__slot {
        width: 24rem;
    }

    .wordmark small,
    .utility-nav__rule,
    .utility-nav > .back-home {
        display: none;
    }

    .site-header__inner {
        gap: 0.7rem;
    }

    .utility-nav {
        max-width: calc(100vw - (var(--gutter) * 2) - 4.6rem);
        gap: 0.6rem;
        font-size: 0.625rem;
    }

    .language-picker summary {
        min-width: 0;
        grid-template-columns: 1fr;
        gap: 0;
    }

    .language-picker__label {
        display: none;
    }

    .language-picker__panel {
        top: calc(100% + 1.35rem);
        width: min(18rem, calc(100vw - (var(--gutter) * 2)));
    }

    .hero {
        min-height: auto;
        padding: 2rem 0 3.5rem;
        display: grid;
        grid-template-columns: 1fr;
        grid-template-rows: auto auto auto auto auto;
    }

    .hero::before {
        top: 5.7rem;
    }

    .hero__index {
        grid-column: 1;
        grid-row: 1;
        display: flex;
    }

    .hero__title {
        grid-column: 1;
        grid-row: 3;
        margin-top: -1rem;
        padding: 1.25rem;
    }

    .hero__title-code {
        font-size: clamp(4.2rem, 22vw, 6.25rem);
    }

    .hero__title-name {
        max-width: calc(100vw - (var(--gutter) * 2) - 2rem);
        margin-left: 1.4rem;
        font-size: clamp(1.7rem, 8vw, 2.45rem);
    }

    .hero__diagram {
        position: relative;
        inset: auto;
        grid-column: 1;
        grid-row: 2;
        width: min(92vw, 25rem);
        height: auto;
        margin: 1.5rem auto 0;
        opacity: 1;
    }

    .hero__route-canvas {
        inset: 1.65rem -0.25rem 0.65rem 0;
        width: calc(100% + 0.25rem);
        height: calc(100% - 2.3rem);
    }

    .hero__diagram-meta--top {
        top: 1.35rem;
        right: 5.8rem;
        left: 1.25rem;
        display: block;
        font-size: 0.52rem;
        letter-spacing: 0.09em;
    }

    .hero__diagram-meta--bottom {
        right: 1.15rem;
        bottom: 0.88rem;
        font-size: 0.625rem;
    }

    .hero__diagram-meta--bottom span {
        padding-left: 0.35rem;
    }

    .hero__summary {
        grid-column: 1;
        grid-row: 4;
        margin-top: 2.8rem;
        padding-left: 1rem;
    }

    .hero__lede {
        font-size: 1.02rem;
    }

    .hero__facts {
        grid-template-columns: 1fr;
    }

    .hero__facts > div,
    .hero__facts > div:first-child {
        padding: 0.68rem 0;
        display: grid;
        grid-template-columns: 7.1rem minmax(0, 1fr);
        align-items: baseline;
        gap: 0.7rem;
        border-top: 1px solid var(--line);
        border-left: 0;
    }

    .hero__facts > div:first-child {
        border-top: 0;
    }

    .hero__facts dd {
        margin-top: 0;
    }

    .hero__jump {
        grid-column: 1;
        grid-row: 5;
        margin-top: 2.25rem;
        margin-bottom: 0;
    }

    .archive-section {
        width: calc(100% - (var(--gutter) * 1.2));
        margin-block: 2.2rem;
        padding: 4.8rem 1rem 4rem;
        display: block;
    }

    .section-number {
        margin-bottom: 1.8rem;
    }

    .section-heading h2 {
        font-size: clamp(2.3rem, 12vw, 3.45rem);
    }

    .coverage-strip,
    .record-ledger {
        margin-top: 3rem;
    }

    .record-ledger::before {
        left: 1.8rem;
    }

    .record-entry {
        min-height: auto;
        padding: 2.35rem 1rem;
        grid-template-columns: 1.8rem minmax(0, 1fr);
        gap: 0.75rem;
    }

    .record-entry__header h3 {
        font-size: clamp(1.8rem, 8.5vw, 2.5rem);
    }

    .record-entry__data > div {
        grid-template-columns: 6.2rem minmax(0, 1fr);
        gap: 0.65rem;
    }

    .ocm-showcase {
        grid-column: 2;
        min-width: 0;
    }

    .archive-standard {
        padding: 2rem 0;
        grid-template-columns: 1fr;
        gap: 1.3rem;
    }

    .archive-standard::after {
        top: 2rem;
        width: 3.5rem;
    }

    .archive-standard > div {
        padding-right: 2.2rem;
    }

    .site-footer {
        padding: 2rem 0 2.5rem;
        grid-template-columns: 1fr auto;
        gap: 0.8rem;
    }

    .site-footer p:nth-child(2) {
        grid-column: 1 / -1;
        grid-row: 2;
        text-align: left;
    }

    .site-footer a {
        grid-column: 2;
        grid-row: 1;
    }
}

@media (max-width: 22rem) {
    .hero__diagram-meta--bottom {
        display: none;
    }
}

@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;
    }

    .course-field {
        opacity: 0.44;
    }

    .course-field__slot {
        filter: none !important;
    }

    .course-field__line--progress {
        stroke-dashoffset: 0 !important;
    }

    .course-field__marker {
        display: none;
    }

    [data-reveal],
    .record-entry__number,
    .record-entry__header,
    .record-entry__data,
    .hero__route-canvas,
    .hero__diagram-meta {
        opacity: 1 !important;
        transform: none !important;
    }

    .hero__route-line,
    .hero__route-mask-line {
        stroke-dashoffset: 0 !important;
    }

    .hero__route-marker {
        display: none;
    }

}

/* Section travel, reversible reveals and the HORUS driving-film shelf. */
html {
    scroll-behavior: smooth;
}

#achievements,
#videos {
    scroll-margin-top: calc(var(--header-height) + 1rem);
}

.utility-nav__chapters {
    display: flex;
    align-items: center;
    gap: 0.85rem;
}

.utility-nav__chapters a {
    position: relative;
    min-height: 2rem;
    display: inline-flex;
    align-items: center;
}

.utility-nav__chapters a::after {
    position: absolute;
    right: 100%;
    bottom: 0;
    left: 0;
    height: 1px;
    background: var(--gold);
    content: "";
    transition: right 260ms var(--ease-out);
}

.utility-nav__chapters a:hover::after,
.utility-nav__chapters a:focus-visible::after,
.utility-nav__chapters a[aria-current="location"]::after {
    right: 0;
}

.utility-nav__chapters a[aria-current="location"] {
    color: var(--text);
}

.archive-section--videos {
    min-height: 100svh;
    background:
        radial-gradient(circle at 82% 15%, rgba(215, 179, 101, 0.09), transparent 28rem),
        repeating-linear-gradient(0deg, rgba(255, 255, 255, 0.014) 0 1px, transparent 1px 4px),
        repeating-linear-gradient(90deg, rgba(0, 0, 0, 0.075) 0 1px, transparent 1px 5px),
        var(--fabric-indigo);
}

.archive-section--videos .section-heading {
    grid-column: 3 / span 8;
}

.video-channel-link {
    width: max-content;
    max-width: 100%;
    display: inline-flex;
    gap: 0.55rem;
    margin-top: 1.5rem;
    padding: 0.62rem 0.82rem;
    border: 0.16rem solid #02050a;
    border-radius: 0.28rem;
    outline: 1px dashed rgba(241, 232, 214, 0.36);
    outline-offset: -0.34rem;
    background: #702627;
    box-shadow: 0 0.28rem 0.45rem rgba(0, 0, 0, 0.46);
    color: var(--thread-bone);
    font-family: var(--font-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(--text);
}

.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.62rem 0.62rem 1.15rem;
    border: 0.25rem solid #02050a;
    border-radius: 0.5rem;
    outline: 1px dashed rgba(241, 232, 214, 0.32);
    outline-offset: -0.58rem;
    background:
        repeating-linear-gradient(120deg, rgba(255, 255, 255, 0.025) 0 1px, transparent 1px 4px),
        var(--fabric-indigo-raised);
    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: 1px solid rgba(241, 232, 214, 0.18);
    border-radius: 0.18rem;
    background: #000;
}

.drive-film__media::after {
    position: absolute;
    inset: 0;
    border: 0.34rem solid rgba(4, 9, 18, 0.58);
    box-shadow: inset 0 0 2rem rgba(0, 0, 0, 0.28);
    content: "";
    pointer-events: none;
}

.drive-film iframe {
    width: 100%;
    height: 100%;
    display: block;
    border: 0;
}

.drive-film__meta {
    margin-top: 1.15rem;
    padding-inline: 0.48rem;
    color: var(--muted);
    font-family: var(--font-mono);
    font-size: 0.6rem;
    font-weight: 700;
    letter-spacing: 0.12em;
}

.drive-film h3 {
    margin: 0.45rem 0.48rem 0;
    font-family: var(--font-sans);
    font-size: clamp(1.65rem, 3vw, 2.65rem);
    font-weight: 850;
    line-height: 1;
    paint-order: stroke fill;
    -webkit-text-stroke: 0.025em rgba(19, 31, 41, 0.92);
    text-shadow:
        0 -1px 0 rgba(255, 255, 255, 0.34),
        0 1px 0 #8d928a,
        0 2px 0 #3d4850,
        1px 3px 0 #07101d,
        -1px 3px 0 #07101d,
        0 0.28rem 0.38rem rgba(0, 0, 0, 0.72);
}

html[data-locale="ja"] :is(
    .hero__title-name,
    .section-heading h2,
    .record-entry__header h3,
    .ta-records__summary,
    .ta-course__header h4,
    .drive-film h3
) {
    font-family: var(--font-ja);
    letter-spacing: 0.008em;
    -webkit-text-stroke-width: 0.018em;
}

html[data-locale="zh-Hant"] :is(
    .hero__title-name,
    .section-heading h2,
    .record-entry__header h3,
    .ta-records__summary,
    .ta-course__header h4,
    .drive-film h3
) {
    font-family: var(--font-zh);
    letter-spacing: 0.012em;
    -webkit-text-stroke-width: 0.016em;
}

html[data-locale="th"] :is(
    .hero__title-name,
    .section-heading h2,
    .record-entry__header h3,
    .ta-records__summary,
    .ta-course__header h4,
    .drive-film h3
),
html[data-locale="vi"] :is(
    .hero__title-name,
    .section-heading h2,
    .record-entry__header h3,
    .ta-records__summary,
    .ta-course__header h4,
    .drive-film h3
),
html[data-locale="my"] :is(
    .hero__title-name,
    .section-heading h2,
    .record-entry__header h3,
    .ta-records__summary,
    .ta-course__header h4,
    .drive-film h3
),
html[data-locale="km"] :is(
    .hero__title-name,
    .section-heading h2,
    .record-entry__header h3,
    .ta-records__summary,
    .ta-course__header h4,
    .drive-film h3
),
html[data-locale="fil"] :is(
    .hero__title-name,
    .section-heading h2,
    .record-entry__header h3,
    .ta-records__summary,
    .ta-course__header h4,
    .drive-film h3
),
html[data-locale="lo"] :is(
    .hero__title-name,
    .section-heading h2,
    .record-entry__header h3,
    .ta-records__summary,
    .ta-course__header h4,
    .drive-film h3
),
html[data-locale="tet"] :is(
    .hero__title-name,
    .section-heading h2,
    .record-entry__header h3,
    .ta-records__summary,
    .ta-course__header h4,
    .drive-film h3
),
html[data-locale="id"] :is(
    .hero__title-name,
    .section-heading h2,
    .record-entry__header h3,
    .ta-records__summary,
    .ta-course__header h4,
    .drive-film h3
),
html[data-locale="ms"] :is(
    .hero__title-name,
    .section-heading h2,
    .record-entry__header h3,
    .ta-records__summary,
    .ta-course__header h4,
    .drive-film h3
) {
    font-family: var(--font-sea);
    letter-spacing: 0.005em;
    -webkit-text-stroke-width: 0.01em;
}

.drive-film > a {
    width: max-content;
    display: inline-flex;
    gap: 0.4rem;
    margin: 0.95rem 0.48rem 0;
    color: var(--quiet);
    font-family: var(--font-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(--gold);
}

.hero__diagram {
    translate: none;
}

html.js:not(.reduced-motion) [data-reveal]:focus-within {
    opacity: 1;
    transform: translate3d(0, 0, 0);
}

@media (max-width: 66rem) {
    .section-code,
    .utility-nav > .back-home,
    .utility-nav__rule {
        display: none;
    }

    .site-header__inner {
        grid-template-columns: 1fr auto;
    }

    .utility-nav {
        grid-column: 2;
    }
}

@media (max-width: 52rem) {
    .record-entry--ocm .ocm-showcase {
        grid-column: 1 / -1;
    }

    .ocm-spec-card {
        grid-template-columns: minmax(0, 1fr);
    }

    .ocm-spec-card__visual {
        border-right: 0;
        border-bottom: 1px dashed rgba(215, 179, 101, 0.4);
    }

    .ocm-spec-card__image {
        min-height: clamp(13rem, 54vw, 20rem);
    }

    .ocm-spec-card__image img {
        width: 112%;
    }

    .ocm-source-panel {
        grid-template-columns: minmax(0, 1fr);
    }

    .ocm-source-panel nav {
        justify-content: flex-start;
    }
}

@media (max-width: 48rem) {
    body {
        padding-bottom: 4.6rem;
    }

    .utility-nav__chapters {
        position: fixed;
        right: 0.75rem;
        bottom: max(0.75rem, env(safe-area-inset-bottom));
        left: 0.75rem;
        z-index: 80;
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 0;
        padding: 0.34rem;
        border: 0.2rem solid #02050a;
        border-radius: 0.38rem;
        outline: 1px dashed rgba(241, 232, 214, 0.28);
        outline-offset: -0.42rem;
        background:
            repeating-linear-gradient(90deg, rgba(255, 255, 255, 0.022) 0 1px, transparent 1px 4px),
            rgba(8, 21, 42, 0.97);
        box-shadow: var(--patch-shadow);
        backdrop-filter: blur(12px);
    }

    .utility-nav__chapters a {
        min-height: 2.75rem;
        justify-content: center;
        border-right: 1px dashed rgba(241, 232, 214, 0.22);
        font-size: 0.6rem;
        text-align: center;
    }

    .utility-nav__chapters a:last-child {
        border-right: 0;
    }

    .utility-nav__chapters a::after {
        right: 50%;
        bottom: 0.15rem;
        left: 50%;
    }

    .utility-nav__chapters a:is(:hover, :focus-visible, [aria-current="location"])::after {
        right: 22%;
        left: 22%;
    }

    .archive-section--videos .section-heading,
    .drive-films {
        grid-column: 2 / -1;
    }

    .drive-films {
        grid-template-columns: 1fr;
    }

    .drive-film:nth-child(2) {
        margin-top: 0;
    }

    .ocm-spec-card__panel {
        padding: 1.15rem 0.9rem;
    }

    .ocm-spec-card__badge-rack {
        grid-template-columns: minmax(0, 1fr);
    }

    .ocm-sample-badge--aura .ocm-sample-badge__frame {
        max-height: 14rem;
    }

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

    .ocm-spec-grid > div:nth-child(3) {
        padding-left: 0;
        border-left: 0;
        border-top: 1px dotted rgba(183, 194, 200, 0.24);
    }

    .ocm-spec-grid > div:nth-child(4) {
        border-top: 1px dotted rgba(183, 194, 200, 0.24);
    }

    .ocm-source-panel nav {
        display: grid;
        grid-template-columns: minmax(0, 1fr);
    }
}

@media (prefers-reduced-motion: reduce) {
    [data-parallax] {
        translate: none !important;
        will-change: auto;
    }
}