@font-face {
    font-family: "Neue Montreal";
    src: url("fonts/neuemontreal-light.otf") format("opentype");
    font-weight: 300;
    font-display: swap;
}

@font-face {
    font-family: "Neue Montreal";
    src: url("fonts/neuemontreal-regular.otf") format("opentype");
    font-weight: 400;
    font-display: swap;
}

@font-face {
    font-family: "Neue Montreal";
    src: url("fonts/neuemontreal-medium.otf") format("opentype");
    font-weight: 500;
    font-display: swap;
}

@font-face {
    font-family: "Instrument Serif";
    src: url("fonts/InstrumentSerif-Regular.ttf") format("truetype");
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: "Instrument Serif";
    src: url("fonts/InstrumentSerif-Italic.ttf") format("truetype");
    font-weight: 400;
    font-style: italic;
    font-display: swap;
}

@font-face {
    font-family: "Amiri";
    src: url("fonts/Amiri-Regular.ttf") format("truetype");
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}


/* ---------- 1 Base ---------- */

:root {
    /* the dark rooms */
    --ink: #15110d;
    --umber: #1f1912;
    --deep: #0e0b08;
    --bone: #efe8da;
    --stone: #a79f8e;

    /* gold and the logo's orange */
    --gold: #c9973f;
    --gold-soft: #ebcb8b;
    --sun: #ef7203;

    /* type */
    --f: "Neue Montreal", "Helvetica Neue", Arial, sans-serif;
    --display: "Instrument Serif", Georgia, "Times New Roman", serif;
    --arabic: "Amiri", "Geeza Pro", "Times New Roman", serif;

    /* the type scale */
    --t-xl: clamp(60px, min(12.4vw, 21vh), 232px);
    --t-l: clamp(42px, 6.4vw, 116px);
    --t-m: clamp(30px, 4vw, 68px);
    --t-s: clamp(20px, 1.9vw, 30px);

    /* space */
    --margin: clamp(20px, 4.2vw, 68px);
    --gutter: clamp(14px, 2vw, 32px);
    --section: clamp(84px, 10.5vw, 168px);
    --top: 76px;
    --ease: cubic-bezier(0.2, 0.8, 0.2, 1);

    /* the look of the entrance */
    --title: #f3e6bd;
    --glass-edge: rgba(239, 232, 218, 0.22);
    --glass-fill: linear-gradient(135deg, rgba(239, 232, 218, 0.14), rgba(239, 232, 218, 0.03)), rgba(14, 11, 8, 0.5);
    --gold-line: linear-gradient(90deg, transparent, rgba(201, 151, 63, 0.65), rgba(235, 203, 139, 0.95), rgba(201, 151, 63, 0.65), transparent);
}

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

[hidden] {
    display: none !important;
}

html {
    scroll-behavior: smooth;
    -webkit-text-size-adjust: 100%;
    background: var(--ink);
}

body {
    position: relative;
    background: var(--ink);
    color: var(--bone);
    font: 400 17px/1.55 var(--f);
    overflow-x: hidden;
    -webkit-font-smoothing: antialiased;
}

/* a little film grain over everything */
body::after {
    content: "";
    position: fixed;
    z-index: 90;
    inset: 0;
    opacity: 0.07;
    mix-blend-mode: overlay;
    pointer-events: none;
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 1 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

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

a {
    color: inherit;
    text-decoration: none;
}

a:not([href]) {
    cursor: pointer;
}

ul,
ol {
    list-style: none;
}

button {
    font: inherit;
    color: inherit;
}

::selection {
    background: var(--gold);
    color: var(--ink);
}

:focus-visible {
    outline: 2px solid var(--gold);
    outline-offset: 3px;
}

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

/* the rooms */
[data-tone="dark"] {
    --line: rgba(235, 203, 139, 0.2);
    --soft: rgba(239, 232, 218, 0.74);
    --accent: var(--gold-soft);
    background: var(--ink);
    color: var(--bone);
}

/* dusk */
[data-tone="dusk"] {
    --line: rgba(235, 203, 139, 0.2);
    --soft: rgba(239, 232, 218, 0.74);
    --accent: var(--gold-soft);
    background:
        radial-gradient(ellipse 60% 50% at 85% 0%, rgba(235, 203, 139, 0.08), transparent 70%),
        var(--umber);
    color: var(--bone);
}

/* the gold line along every room */
main > section + section {
    border-top: 1px solid transparent;
    border-image: var(--gold-line) 1;
}

/* thin vertical lines */
.has-cols {
    background-image: linear-gradient(90deg, var(--line) 1px, transparent 1px);
    background-size: calc((100% - 2 * var(--margin)) / 6) 100%;
    background-position: var(--margin) 0;
    background-repeat: repeat-x;
}


/* ---------- Type, buttons, links ---------- */

.h-l {
    font: 400 var(--t-l)/0.96 var(--display);
    letter-spacing: -0.025em;
    color: var(--title);
}

.h-l em {
    font-style: italic;
    color: var(--accent);
}

.lede {
    font: 400 clamp(18px, 1.5vw, 22px)/1.55 var(--f);
    color: var(--soft);
}

.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 15px 28px;
    border: 1px solid transparent;
    border-radius: 999px;
    background: var(--sun);
    color: var(--ink);
    font: 500 15px/1 var(--f);
    cursor: pointer;
    transition: transform 0.4s var(--ease), background 0.3s, color 0.3s, border-color 0.3s;
}

.btn:hover {
    background: var(--gold-soft);
    transform: translateY(-2px);
}

.btn-line {
    border-color: currentColor;
    background: transparent;
    color: inherit;
}

.btn-line:hover {
    background: var(--bone);
    border-color: var(--bone);
    color: var(--ink);
}

/* a text link */
.link {
    padding-bottom: 3px;
    background: linear-gradient(currentColor, currentColor) 0 100% / 100% 1px no-repeat;
    font: 500 15px/1.4 var(--f);
    transition: background-size 0.4s var(--ease);
}

.link:hover {
    background-size: 0 1px;
    background-position: 100% 100%;
}

/* the logo's leaning shape */
.frame {
    position: relative;
    aspect-ratio: 136.8 / 152.9;
}

.facet {
    position: absolute;
    inset: 0;
    background: var(--umber);
    clip-path: polygon(53.4% 0, 100% 40%, 10.3% 100%, 0 72.6%);
}

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

.outline {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    transform: translate(5%, 4%);
    overflow: visible;
    pointer-events: none;
}

.outline polygon {
    fill: none;
    stroke: var(--accent);
    stroke-width: 1.2;
    vector-effect: non-scaling-stroke;
}

/* the wall label */
.wall-label {
    display: block;
    max-width: 30ch;
    padding: 13px 18px 14px;
    border: 1px solid var(--glass-edge);
    border-radius: 16px;
    background: var(--glass-fill);
    backdrop-filter: blur(14px) saturate(1.2);
    color: var(--soft);
    font: 400 13px/1.45 var(--f);
    box-shadow: 0 18px 40px rgba(0, 0, 0, 0.4);
}

.wall-label b {
    display: block;
    margin-bottom: 2px;
    font: 400 20px/1.1 var(--display);
    color: var(--gold-soft);
}


/* ---------- 2 Top ---------- */

.menu-check {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}

.top {
    position: fixed;
    z-index: 50;
    top: 0;
    left: 0;
    right: 0;
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: var(--top);
    padding: 0 var(--margin);
    background: transparent;
    border-bottom: 1px solid transparent;
    color: var(--bone);
    transition: background 0.4s, border-color 0.4s, backdrop-filter 0.4s;
}

/* the top bar */
.top.is-solid {
    background: rgba(21, 17, 13, 0.86);
    border-bottom-color: rgba(235, 203, 139, 0.14);
    backdrop-filter: blur(14px);
}

.menu-check:checked ~ .top {
    z-index: 60;
    background: var(--ink);
}

.brand {
    display: flex;
    align-items: center;
    gap: 12px;
}

.brand img {
    height: 36px;
    width: auto;
}

.brand span {
    padding-left: 12px;
    border-left: 1px solid rgba(235, 203, 139, 0.35);
    font: 500 9px/1.3 var(--f);
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.nav {
    display: flex;
    gap: clamp(24px, 3.4vw, 56px);
}

.nav a {
    padding: 6px 0;
    background: linear-gradient(var(--gold-soft), var(--gold-soft)) 0 100% / 0 1px no-repeat;
    font: 500 15px/1 var(--f);
    transition: background-size 0.4s var(--ease), color 0.3s;
}

.nav a:hover,
.nav a[aria-current] {
    background-size: 100% 1px;
    color: var(--gold-soft);
}

.top-actions {
    display: flex;
    align-items: center;
    gap: 10px;
}

.top .btn {
    padding: 13px 22px;
}

.menu-btn {
    display: none;
    padding: 13px 20px;
    border: 1px solid rgba(235, 203, 139, 0.4);
    border-radius: 999px;
    font: 500 15px/1 var(--f);
    cursor: pointer;
}

.menu-btn::after {
    content: "Menu";
}

.menu-check:checked ~ .top .menu-btn::after {
    content: "Close";
}

.menu {
    position: fixed;
    z-index: 55;
    inset: 0;
    display: none;
    flex-direction: column;
    justify-content: center;
    padding: calc(var(--top) + 20px) var(--margin) 40px;
    background: var(--ink);
    color: var(--bone);
}

.menu-check:checked ~ .menu {
    display: flex;
}

.menu a {
    padding: 8px 0;
    border-bottom: 1px solid rgba(235, 203, 139, 0.2);
    font: 400 clamp(40px, 11vw, 84px)/1.1 var(--display);
    letter-spacing: -0.02em;
}

.menu a:hover {
    font-style: italic;
    color: var(--gold-soft);
}


/* ---------- 6 Footer ---------- */

.foot {
    position: relative;
    padding: clamp(72px, 9vw, 140px) var(--margin) 32px;
    border-top: 1px solid transparent;
    border-image: var(--gold-line) 1;
    background: var(--deep);
    color: var(--bone);
}

.foot-word {
    margin-left: -0.04em;
    font: 400 clamp(56px, 11.6vw, 230px)/0.84 var(--display);
    letter-spacing: -0.04em;
    color: var(--gold-soft);
}

.foot-cols {
    display: grid;
    grid-template-columns: repeat(12, minmax(0, 1fr));
    column-gap: var(--gutter);
    row-gap: 40px;
    margin-top: clamp(48px, 6vw, 96px);
    padding-top: 28px;
    border-top: 1px solid rgba(235, 203, 139, 0.2);
}

.foot-brand {
    grid-column: 1 / 5;
    align-self: start;
    justify-self: start;
}

.foot-col {
    grid-column: span 3;
}

.foot-col h3 {
    margin-bottom: 14px;
    font: 500 14px/1.3 var(--f);
    opacity: 0.55;
}

.foot-col a,
.foot-col p {
    display: block;
    padding: 3px 0;
    font: 400 17px/1.4 var(--f);
}

.foot-col a {
    transition: color 0.3s;
}

.foot-col a:hover {
    color: var(--gold-soft);
}

.foot-note {
    grid-column: 1 / -1;
    max-width: 84ch;
    padding-top: 28px;
    font: 400 13px/1.7 var(--f);
    opacity: 0.55;
}

.foot-note a {
    text-decoration: underline;
    text-underline-offset: 3px;
}


/* ---------- 3 Home ---------- */

/* the fixed slider */
.slider {
    --thumb: clamp(40px, 8vh, 72px);
    position: fixed;
    z-index: 40;
    left: calc(var(--margin) / 2 - 8px);
    top: 50%;
    width: 17px;
    height: min(64vh, 560px);
    transform: translateY(-50%);
    cursor: pointer;
    touch-action: none;
}

.slider::before {
    content: "";
    position: absolute;
    left: 8px;
    top: 0;
    bottom: 0;
    width: 1px;
    background: linear-gradient(rgba(235, 203, 139, 0.55), rgba(235, 203, 139, 0.3));
}

.slider i {
    position: absolute;
    left: 7px;
    top: calc((100% - var(--thumb)) * var(--prog, 0));
    width: 3px;
    height: var(--thumb);
    background: var(--gold-soft);
    transition: width 0.3s var(--ease), left 0.3s var(--ease);
}

.slider:hover i {
    left: 6px;
    width: 5px;
}

/* 1 Entrance */

.hero {
    --title: #f3e6bd;
    --fs: min(9.6vw, 17vh);
    --gw: min(58vw, 104vh);
    --gx: 67%;
    position: relative;
}

.hero-pin {
    position: relative;
}

.stage-one {
    position: relative;
    display: flex;
    align-items: center;
    height: 100vh;
    height: 100svh;
    min-height: 680px;
    padding: var(--top) var(--margin) 0 calc(var(--margin) + clamp(28px, 3.6vw, 60px));
    overflow: hidden;
    background: var(--deep);
}

/* the wall behind */
.hero-stage {
    position: absolute;
    z-index: 0;
    inset: 0;
    animation: fadein 1.8s ease backwards;
}

.stage-clip {
    position: absolute;
    inset: 0;
    overflow: hidden;
    background: var(--deep);
}

.stage-clip img {
    width: 100%;
    height: 100%;
    max-width: none;
    object-fit: cover;
    object-position: 50% 40%;
    transform: scale(1.14);
    filter: blur(16px) brightness(0.42) saturate(0.9);
}

/* a warm glow behind the gate */
.stage-one::before {
    content: "";
    position: absolute;
    z-index: 1;
    inset: 0;
    background:
        radial-gradient(ellipse 40% 52% at var(--gx) 78%, rgba(235, 203, 139, 0.24), transparent 72%),
        radial-gradient(ellipse 90% 80% at 55% 50%, transparent 36%, rgba(14, 11, 8, 0.66) 100%),
        linear-gradient(0deg, rgba(14, 11, 8, 0.6) 0%, transparent 28%),
        linear-gradient(90deg, rgba(14, 11, 8, 0.55) 0%, transparent 46%);
    pointer-events: none;
}

/* the dark screen */
.hero-shade {
    position: absolute;
    z-index: 1;
    inset: 0;
    background: var(--ink);
    opacity: 0;
    pointer-events: none;
}

/* a thin ring behind the gate */
.hero-ring {
    position: absolute;
    z-index: 1;
    left: var(--gx);
    bottom: calc(var(--gw) * -0.03);
    width: calc(var(--gw) * 0.92);
    aspect-ratio: 1;
    border: 1px solid rgba(235, 203, 139, 0.34);
    border-radius: 50%;
    background: radial-gradient(circle, rgba(235, 203, 139, 0.1), transparent 62%);
    transform: translateX(-50%);
    pointer-events: none;
    animation: fadein 2s ease 1.1s backwards;
}

/* the name */
.hero-copy {
    position: relative;
    z-index: 5;
}

.hero h1 {
    width: fit-content;
    font-family: var(--display);
    font-size: var(--fs);
    font-weight: 400;
    line-height: 0.92;
    letter-spacing: -0.01em;
    color: var(--title);
}


.hero .line {
    display: block;
    overflow: hidden;
    padding: 0.08em 0 0.24em;
    margin: -0.08em 0 -0.24em;
}

.hero .line > span {
    display: block;
    animation: drop 1.3s cubic-bezier(0.2, 0.8, 0.2, 1) calc(0.35s + var(--i) * 0.22s) backwards;
}

.hero .line:nth-of-type(1) > span {
    --i: 0;
}

.hero .line:nth-of-type(2) > span {
    --i: 1;
}

.hero .line:nth-of-type(3) > span {
    --i: 2;
}

.hero-ar {
    width: fit-content;
    margin-top: clamp(14px, 2.6vh, 28px);
    font: 400 clamp(22px, 2.1vw, 34px)/1.2 var(--arabic);
    color: var(--gold-soft);
    animation: fadein 1.2s ease 2s backwards;
}

.hero-sub {
    max-width: 24em;
    margin-top: clamp(8px, 1.4vh, 14px);
    font: 400 clamp(14px, 1.15vw, 17px)/1.55 var(--f);
    color: var(--soft);
    animation: fadein 1.2s ease 1.9s backwards;
}

/* the sweeping line */
.hero-sweep {
    position: absolute;
    z-index: 4;
    inset: 0;
    width: 100%;
    height: 100%;
    overflow: visible;
    pointer-events: none;
    animation: sweep 2.6s cubic-bezier(0.45, 0, 0.25, 1) 1.2s backwards;
}

.hero-sweep path {
    fill: none;
    stroke: url(#sweep-gold);
    stroke-width: 2;
    stroke-linecap: round;
    vector-effect: non-scaling-stroke;
}

.hero-sweep .glow {
    stroke-width: 9;
    opacity: 0.35;
    filter: blur(7px);
}

/* the gate */
.hero-gate {
    position: absolute;
    z-index: 3;
    left: var(--gx);
    bottom: -1.5%;
    width: var(--gw);
    height: auto;
    max-width: none;
    transform: translateX(-50%);
    transform-origin: 50% 100%;
    filter: drop-shadow(0 26px 50px rgba(0, 0, 0, 0.55));
    -webkit-mask: radial-gradient(closest-side, #000 52%, transparent 100%) 50% 62% / 340% 340% no-repeat;
    mask: radial-gradient(closest-side, #000 52%, transparent 100%) 50% 62% / 340% 340% no-repeat;
    animation: bloom 3s cubic-bezier(0.45, 0, 0.25, 1) 0.7s backwards;
    pointer-events: none;
}

/* two glass labels */
.hero-card {
    position: absolute;
    z-index: 6;
    display: grid;
    gap: 3px;
    padding: 12px 20px 13px 16px;
    border: 1px solid rgba(239, 232, 218, 0.24);
    border-radius: 18px;
    background: linear-gradient(135deg, rgba(239, 232, 218, 0.16), rgba(239, 232, 218, 0.03));
    backdrop-filter: blur(14px) saturate(1.2);
    box-shadow: 0 18px 40px rgba(0, 0, 0, 0.35);
    font: 400 12px/1.3 var(--f);
    color: var(--soft);
    animation: fadeup 1.1s var(--ease) 2.3s backwards;
}

.hero-card b {
    font: 500 clamp(20px, 1.9vw, 28px)/1.1 var(--f);
    color: var(--gold-soft);
}

.hero-card-a {
    left: calc(var(--gx) - var(--gw) * 0.5 - 24px);
    bottom: 20%;
}

.hero-card-b {
    right: calc(var(--margin) + 34px);
    top: 36%;
    animation-delay: 2.5s;
}

/* three numbers across the bottom right */
.hero-stats {
    position: absolute;
    z-index: 6;
    right: calc(var(--margin) + 34px);
    bottom: clamp(22px, 5vh, 48px);
    display: flex;
    padding: 14px clamp(18px, 1.9vw, 28px);
    border: 1px solid rgba(239, 232, 218, 0.2);
    border-radius: 18px;
    background: rgba(14, 11, 8, 0.55);
    backdrop-filter: blur(14px);
    box-shadow: 0 18px 40px rgba(0, 0, 0, 0.35);
    animation: fadeup 1.1s var(--ease) 2.6s backwards;
}

.hero-stats li {
    padding: 0 clamp(14px, 1.7vw, 26px);
    border-left: 1px solid rgba(239, 232, 218, 0.3);
}

.hero-stats li:first-child {
    padding-left: 0;
    border-left: 0;
}

.hero-stats li:last-child {
    padding-right: 0;
}

.hero-stats b {
    display: block;
    font: 500 clamp(24px, 2.4vw, 36px)/1 var(--f);
    color: var(--bone);
}

.hero-stats span {
    display: block;
    margin-top: 6px;
    font: 400 12px/1.3 var(--f);
    color: var(--soft);
}

@keyframes bloom {
    from {
        -webkit-mask-size: 0% 0%;
        mask-size: 0% 0%;
    }
}

/* the drop */
@keyframes drop {
    from {
        transform: translateY(-1.5em);
    }
}

@keyframes fadein {
    from {
        opacity: 0;
    }
}

@keyframes fadeup {
    from {
        opacity: 0;
        transform: translateY(16px);
    }
}

@keyframes sweep {
    from {
        clip-path: inset(0 100% 0 0);
    }
}

/* the drift */
@media (prefers-reduced-motion: no-preference) {
    .hero {
        --y: 0;
    }

    .hero .hero-gate {
        transform: translateX(-50%) translateY(calc(var(--y) * 16vh));
    }

    .hero .hero-ring {
        transform: translateX(-50%) translateY(calc(var(--y) * 10vh));
    }

    .hero .hero-sweep {
        transform: translateY(calc(var(--y) * 6vh));
    }

    .hero .hero-copy {
        transform: translateY(calc(var(--y) * -9vh));
        opacity: calc(1 - var(--y) * 0.7);
    }

    .hero .hero-card {
        transform: translateY(calc(var(--y) * -17vh));
        opacity: calc(1 - var(--y) * 0.8);
    }

    .hero .hero-stats {
        transform: translateY(calc(var(--y) * -7vh));
        opacity: calc(1 - var(--y) * 0.8);
    }

}

/* a round button with turning words */
.scroll-badge {
    display: block;
    margin-top: clamp(16px, 3vh, 30px);
    padding: 6px;
    border-radius: 50%;
    background: rgba(14, 11, 8, 0.6);
    backdrop-filter: blur(6px);
    width: clamp(88px, 7.4vw, 108px);
    aspect-ratio: 1;
    animation: fadein 1s ease 2.6s backwards;
}

.scroll-badge svg {
    width: 100%;
    height: 100%;
    overflow: visible;
}

.scroll-badge text {
    fill: var(--bone);
    font: 500 11px var(--f);
    transform-origin: 60px 60px;
    animation: turn 26s linear infinite;
}

.scroll-badge circle {
    fill: var(--sun);
    transition: transform 0.5s var(--ease);
    transform-origin: 60px 60px;
}

.scroll-badge:hover circle {
    transform: scale(1.14);
}

.scroll-badge path {
    fill: none;
    stroke: var(--ink);
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
}

@keyframes turn {
    to {
        transform: rotate(360deg);
    }
}


/* 2 The museum */

.s-museum {
    display: grid;
    grid-template-columns: repeat(12, minmax(0, 1fr));
    column-gap: var(--gutter);
    row-gap: clamp(28px, 4vw, 56px);
    padding: var(--section) var(--margin);
}

.statement {
    grid-column: 1 / 8;
    grid-row: 1;
    font: 400 var(--t-m)/1.08 var(--display);
    letter-spacing: -0.02em;
    color: var(--title);
}

.statement em {
    font-style: italic;
    color: var(--accent);
}

.museum-photo {
    grid-column: 8 / 13;
    grid-row: 1 / 3;
    align-self: start;
    position: relative;
    margin-right: 3%;
}

.museum-photo .facet img {
    object-position: 50% 60%;
}

.museum-photo .wall-label {
    position: absolute;
    left: -16%;
    bottom: 8%;
    z-index: 2;
}

.museum-text {
    grid-column: 1 / 6;
    grid-row: 2;
    align-self: end;
}

.museum-text p {
    margin-bottom: 22px;
    font: 400 clamp(18px, 1.5vw, 22px)/1.55 var(--f);
    color: var(--soft);
}

.stats {
    grid-column: 1 / -1;
    grid-row: 3;
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    column-gap: var(--gutter);
    margin-top: clamp(20px, 3vw, 40px);
}

.stats div {
    padding-top: 22px;
    border-top: 1px solid var(--line);
}

.stats dt {
    font: 400 clamp(54px, 7vw, 120px)/0.95 var(--display);
    letter-spacing: -0.03em;
    color: var(--title);
}

.stats dd {
    max-width: 24ch;
    margin-top: 12px;
    font: 400 16px/1.45 var(--f);
    color: var(--soft);
}


/* 3 The building */

.s-build {
    display: grid;
    grid-template-columns: repeat(12, minmax(0, 1fr));
    column-gap: var(--gutter);
    padding: var(--section) var(--margin);
}

.build-head {
    grid-column: 1 / 7;
    grid-row: 1;
}

.build-head .lede {
    max-width: 34ch;
    margin-top: 24px;
}

.build-facts {
    display: flex;
    flex-wrap: wrap;
    gap: 12px 48px;
    margin-top: 32px;
}

.build-facts div {
    min-width: 200px;
    padding-top: 14px;
    border-top: 1px solid var(--line);
}

.build-facts dt {
    font: 500 13px/1.3 var(--f);
    color: var(--gold);
}

.build-facts dd {
    font: 400 clamp(20px, 1.8vw, 26px)/1.25 var(--display);
}

/* the one number that matters */
.build-km {
    grid-column: 8 / 13;
    grid-row: 1;
    align-self: end;
}

.km {
    font: 400 clamp(88px, 11vw, 190px)/0.9 var(--display);
    letter-spacing: -0.04em;
    color: var(--gold-soft);
}

.km-note {
    max-width: 24ch;
    margin-top: 10px;
    color: var(--soft);
}

/* the line of sight, small */
.scene {
    position: relative;
    aspect-ratio: 560 / 250;
    max-width: 560px;
    margin-bottom: 8px;
}

.scene img {
    position: absolute;
    display: block;
    height: auto;
}

.scene-pyramids {
    left: 61.43%;
    top: 63.33%;
    width: 37.86%;
    filter: drop-shadow(0 0 22px rgba(235, 203, 139, 0.18));
}

.scene-museum {
    left: 0;
    top: 52.53%;
    width: 60%;
}

.scene-lines {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    overflow: visible;
}

.scene-ground {
    stroke: var(--gold-soft);
    stroke-width: 1;
    opacity: 0.45;
}

.beam {
    fill: none;
    stroke: var(--gold-soft);
    stroke-width: 1.4;
    stroke-dasharray: 1;
    stroke-dashoffset: 1;
}

.beam-dot {
    fill: var(--gold-soft);
    opacity: 0;
    transition: opacity 0.6s 1.8s;
}

.scene.in .beam {
    stroke-dashoffset: 0;
    transition: stroke-dashoffset 2.4s var(--ease);
}

.scene.in .beam:nth-of-type(2) {
    transition-delay: 0.25s;
}

.scene.in .beam:nth-of-type(3) {
    transition-delay: 0.5s;
}

.scene.in .beam-dot {
    opacity: 1;
}

/* below it */
.inspect {
    --s: 1;
    --px: 0.5;
    --py: 0.5;
    --x1: 0.53;
    --y1: 0.56;
    --x2: 0.62;
    --y2: 0.2;
    --x3: 0.2;
    --y3: 0.42;
    position: relative;
    grid-column: 1 / -1;
    grid-row: 2;
    display: grid;
    grid-template-columns: repeat(12, minmax(0, 1fr));
    column-gap: var(--gutter);
    margin-top: clamp(44px, 6vw, 96px);
}

.inspect:has(#pick-gate:checked) {
    --s: 2.1;
    --px: var(--x1);
    --py: var(--y1);
}

.inspect:has(#pick-wall:checked) {
    --s: 2.4;
    --px: var(--x2);
    --py: var(--y2);
}

.inspect:has(#pick-tri:checked) {
    --s: 2.3;
    --px: var(--x3);
    --py: var(--y3);
}

.pick {
    position: absolute;
    width: 1px;
    height: 1px;
    opacity: 0;
    pointer-events: none;
}

.plate {
    position: relative;
    grid-column: 1 / -1;
    grid-row: 1;
    aspect-ratio: 1800 / 753;
    overflow: hidden;
    background: var(--deep);
    box-shadow: 0 40px 90px -40px rgba(0, 0, 0, 0.85);
}


.plate::after {
    content: "";
    position: absolute;
    z-index: 2;
    inset: 14px;
    border: 1px solid rgba(235, 203, 139, 0.35);
    pointer-events: none;
}

.plate-view {
    position: absolute;
    inset: 0;
    transform-origin: 0 0;
    transform:
        translate(
            clamp(calc((1 - var(--s)) * 100%), calc((0.5 - var(--s) * var(--px)) * 100%), 0%),
            clamp(calc((1 - var(--s)) * 100%), calc((0.5 - var(--s) * var(--py)) * 100%), 0%)
        )
        scale(var(--s));
    transition: transform 1.1s var(--ease);
}

.plate-view img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.spot {
    position: absolute;
    left: calc(var(--x) * 100%);
    top: calc(var(--y) * 100%);
    display: grid;
    place-items: center;
    width: 34px;
    height: 34px;
    border: 1px solid var(--gold-soft);
    border-radius: 50%;
    background: rgba(14, 11, 8, 0.72);
    font: 500 13px/1 var(--f);
    color: var(--gold-soft);
    box-shadow: 0 0 0 6px rgba(235, 203, 139, 0.18);
    cursor: pointer;
    transform: translate(-50%, -50%) scale(calc(1 / var(--s)));
    transition: transform 1.1s var(--ease), opacity 0.5s, width 0.6s var(--ease), height 0.6s var(--ease), background 0.4s;
}

.spot:hover {
    background: var(--gold-soft);
    color: var(--ink);
}

.spot-gate {
    --x: var(--x1);
    --y: var(--y1);
}

.spot-wall {
    --x: var(--x2);
    --y: var(--y2);
}

.spot-tri {
    --x: var(--x3);
    --y: var(--y3);
}

/* the chosen detail */
.inspect:has(#pick-all:not(:checked)) .spot {
    opacity: 0;
    pointer-events: none;
}

.inspect:has(#pick-gate:checked) .spot-gate,
.inspect:has(#pick-wall:checked) .spot-wall,
.inspect:has(#pick-tri:checked) .spot-tri {
    opacity: 1;
    width: 96px;
    height: 96px;
    border-width: 2px;
    background: transparent;
    font-size: 0;
    animation: ping 2.6s ease-out infinite;
}

@keyframes ping {
    from {
        box-shadow: 0 0 0 0 rgba(235, 203, 139, 0.5);
    }

    to {
        box-shadow: 0 0 0 30px rgba(235, 203, 139, 0);
    }
}

.plate-hint {
    position: absolute;
    z-index: 3;
    left: 28px;
    bottom: 28px;
    padding: 9px 15px;
    border: 1px solid var(--glass-edge);
    border-radius: 14px;
    background: var(--glass-fill);
    backdrop-filter: blur(14px);
    color: var(--bone);
    font: 500 13px/1.3 var(--f);
    transition: opacity 0.4s;
}

.inspect:has(#pick-all:not(:checked)) .plate-hint {
    opacity: 0;
}

.pull {
    position: absolute;
    z-index: 3;
    right: 28px;
    top: 28px;
    padding: 10px 18px;
    border: 1px solid var(--gold-soft);
    border-radius: 999px;
    background: rgba(14, 11, 8, 0.7);
    font: 500 13px/1 var(--f);
    color: var(--gold-soft);
    cursor: pointer;
    transition: opacity 0.4s, background 0.3s, color 0.3s;
}

.pull:hover {
    background: var(--gold-soft);
    color: var(--ink);
}

.inspect:has(#pick-all:checked) .pull {
    opacity: 0;
    pointer-events: none;
}


.legend {
    grid-column: 1 / 9;
    grid-row: 2;
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: var(--gutter);
    margin-top: 32px;
}

.legend li {
    position: relative;
}

.legend label {
    position: relative;
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    align-content: start;
    column-gap: 14px;
    height: 100%;
    padding-top: 18px;
    border-top: 1px solid var(--line);
    cursor: pointer;
}

.legend label::before {
    content: "";
    position: absolute;
    left: 0;
    top: -1px;
    width: 0;
    height: 2px;
    background: var(--gold-soft);
    transition: width 0.9s var(--ease);
}

.legend b {
    grid-row: 1 / 3;
    font: 400 clamp(56px, 6vw, 96px)/0.8 var(--display);
    color: transparent;
    -webkit-text-stroke: 1px var(--gold-soft);
    transition: color 0.5s;
}

.d-name {
    display: block;
    font: 400 clamp(20px, 1.8vw, 28px)/1.15 var(--display);
}

.d-note {
    display: block;
    margin-top: 8px;
    font: 400 14px/1.5 var(--f);
    color: var(--soft);
    opacity: 0.55;
    transition: opacity 0.5s;
}

.legend label:hover .d-note {
    opacity: 0.9;
}

.legend li:has(.pick:focus-visible) label {
    outline: 2px solid var(--gold-soft);
    outline-offset: 6px;
}

.inspect:has(#pick-gate:checked) .legend li:nth-child(1) label::before,
.inspect:has(#pick-wall:checked) .legend li:nth-child(2) label::before,
.inspect:has(#pick-tri:checked) .legend li:nth-child(3) label::before {
    width: 100%;
}

.inspect:has(#pick-gate:checked) .legend li:nth-child(1) b,
.inspect:has(#pick-wall:checked) .legend li:nth-child(2) b,
.inspect:has(#pick-tri:checked) .legend li:nth-child(3) b {
    color: var(--gold-soft);
}

.inspect:has(#pick-gate:checked) .legend li:nth-child(1) .d-note,
.inspect:has(#pick-wall:checked) .legend li:nth-child(2) .d-note,
.inspect:has(#pick-tri:checked) .legend li:nth-child(3) .d-note {
    opacity: 1;
}

/* the museum from above */
.aerial {
    position: relative;
    z-index: 3;
    grid-column: 9 / 13;
    grid-row: 2;
    justify-self: end;
    width: min(100%, 380px);
    aspect-ratio: 1;
    margin-top: calc(clamp(80px, 13vw, 170px) * -1);
}

.aerial-ring {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    overflow: visible;
    filter: drop-shadow(0 30px 40px rgba(0, 0, 0, 0.5));
}

.aerial-ring circle {
    fill: var(--deep);
    stroke: var(--gold-soft);
    stroke-width: 0.6;
}

.aerial-ring text {
    fill: var(--bone);
    font: 500 8px var(--f);
    transform-origin: 100px 100px;
    animation: turn 50s linear infinite;
}

.aerial img {
    position: absolute;
    inset: 13%;
    width: 74%;
    height: 74%;
    object-fit: cover;
    border-radius: 50%;
}


/* 4 Inside */

.s-inside {
    display: grid;
    grid-template-columns: repeat(12, minmax(0, 1fr));
    column-gap: var(--gutter);
    padding: var(--section) var(--margin);
}

.inside-side {
    position: sticky;
    top: calc(var(--top) + 36px);
    grid-column: 1 / 5;
    align-self: start;
}

.inside-side .lede {
    max-width: 28ch;
    margin-top: 22px;
}

.route {
    margin-top: clamp(28px, 4vw, 56px);
}

.route li:last-child a {
    border-bottom: 1px solid var(--line);
}

.route a {
    display: flex;
    align-items: baseline;
    gap: 16px;
    padding: 14px 0;
    border-top: 1px solid var(--line);
    font: 400 clamp(20px, 1.8vw, 28px)/1.2 var(--display);
    color: var(--soft);
    transition: color 0.3s, padding 0.5s var(--ease);
}

.route a span {
    font: 500 13px/1 var(--f);
    color: var(--accent);
}

.route a:hover,
.route a.on {
    padding-left: 12px;
    color: var(--title);
}

.stops {
    position: relative;
    grid-column: 6 / 13;
    padding-left: clamp(22px, 3vw, 44px);
    border-left: 1px solid var(--line);
}

.stop {
    position: relative;
    margin-bottom: clamp(56px, 8vw, 120px);
    scroll-margin-top: calc(var(--top) + 30px);
}

.stop:last-child {
    margin-bottom: 0;
}

.stop:nth-child(odd) {
    margin-right: 6%;
}

.stop:nth-child(even) {
    margin-left: 12%;
}

/* the gold dot */
.stop::before {
    content: "";
    position: absolute;
    left: calc(-1 * clamp(22px, 3vw, 44px) - 5px);
    top: 12px;
    width: 9px;
    height: 9px;
    border-radius: 50%;
    background: var(--accent);
}

.stop:nth-child(even)::before {
    left: calc(-1 * clamp(22px, 3vw, 44px) - 5px - 12%);
}

.stop-photo {
    overflow: hidden;
    box-shadow: 0 34px 60px -34px rgba(0, 0, 0, 0.6);
}

.stop-photo img {
    width: 100%;
    aspect-ratio: 16 / 10;
    object-fit: cover;
    transition: transform 1.2s var(--ease);
}

.stop:hover .stop-photo img {
    transform: scale(1.03);
}

.stop-text {
    max-width: 34ch;
    margin-top: 20px;
}

.stop-text h3 {
    font: 400 clamp(30px, 3vw, 48px)/1.05 var(--display);
    letter-spacing: -0.02em;
}

.stop-text p {
    margin-top: 8px;
    color: var(--soft);
}


/* 5 Artifacts */

.s-artifacts {
    padding: var(--section) var(--margin);
}

.art-head {
    display: flex;
    flex-wrap: wrap;
    align-items: end;
    justify-content: space-between;
    gap: 24px 40px;
    margin-bottom: clamp(36px, 5vw, 72px);
}

.art-head .h-l {
    max-width: 10em;
}

.vitrines {
    display: flex;
    gap: clamp(8px, 1vw, 16px);
    height: min(80vh, 720px);
    min-height: 520px;
}

.vitrine {
    position: relative;
    flex: 1 1 0;
    min-width: 0;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    overflow: hidden;
    border: 1px solid rgba(235, 203, 139, 0.26);
    border-radius: 999px 999px 0 0;
    color: var(--bone);
    background:
        radial-gradient(ellipse 90% 62% at 50% 8%, rgba(235, 203, 139, 0.42), transparent 72%),
        linear-gradient(var(--umber), var(--deep));
    transition: flex-grow 0.8s var(--ease), border-color 0.4s;
}

.vitrine:hover,
.vitrine:focus-visible {
    flex-grow: 2.6;
    border-color: var(--gold);
}

/* the stone block */
.vitrine::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 26%;
    border-top: 1px solid var(--line);
    background: linear-gradient(var(--umber), var(--deep));
}

.vitrine img {
    position: absolute;
    left: 50%;
    top: 50%;
    width: 72%;
    max-height: 50%;
    object-fit: contain;
    filter: drop-shadow(0 26px 24px rgba(0, 0, 0, 0.65));
    transform: translate(-50%, -50%);
    transition: transform 0.8s var(--ease);
}

.vitrine:hover img {
    transform: translate(-50%, -53%) scale(1.07);
}

.vitrine img.is-long {
    width: 112%;
    max-height: none;
    transform: translate(-50%, -50%) rotate(-38deg);
}

.vitrine:hover img.is-long {
    transform: translate(-50%, -52%) rotate(-38deg) scale(1.06);
}

.vitrine-text {
    position: relative;
    z-index: 2;
    padding: 0 clamp(14px, 1.6vw, 24px) clamp(18px, 2vw, 30px);
}

.vitrine b {
    display: block;
    font: 400 clamp(22px, 2.2vw, 34px)/1.05 var(--display);
}

.vitrine small {
    display: block;
    max-height: 0;
    margin-top: 0;
    overflow: hidden;
    opacity: 0;
    font: 400 15px/1.4 var(--f);
    color: rgba(239, 232, 218, 0.78);
    transition: max-height 0.6s var(--ease), margin 0.6s var(--ease), opacity 0.5s;
}

.vitrine:hover small,
.vitrine:focus-visible small {
    max-height: 5em;
    margin-top: 8px;
    opacity: 1;
}


/* 8 The ages */

.s-ages {
    padding: var(--section) var(--margin);
    background:
        linear-gradient(rgba(14, 11, 8, 0.9), rgba(14, 11, 8, 0.95)),
        url("imgs/photos/relief-wall.jpg") center / cover;
}

.s-ages .h-l {
    max-width: 9em;
}

.s-ages .lede {
    max-width: 40ch;
    margin-top: 22px;
}

.ages {
    display: grid;
    grid-template-columns: repeat(8, minmax(0, 1fr));
    margin-top: clamp(56px, 8vw, 120px);
    padding-top: 44px;
    border-top: 1px solid var(--line);
}

.ages li {
    position: relative;
    padding-right: 10px;
    font: 400 clamp(15px, 1.5vw, 22px)/1.25 var(--display);
    color: var(--soft);
}

.ages li::before {
    content: "";
    position: absolute;
    left: 0;
    top: -49px;
    width: 9px;
    height: 9px;
    border-radius: 50%;
    background: var(--bone);
    opacity: 0.7;
}

.ages small {
    display: block;
    margin-top: 6px;
    font: 500 13px/1.3 var(--f);
    color: var(--gold);
}

.ages .is-here {
    font-size: clamp(22px, 2.4vw, 36px);
    color: var(--gold-soft);
}

.ages .is-here::before {
    top: -56px;
    width: 24px;
    height: 24px;
    background: var(--gold);
    opacity: 1;
    box-shadow: 0 0 0 7px rgba(201, 151, 63, 0.22);
}

.ages-note {
    max-width: 40ch;
    margin-top: 48px;
    font: 400 18px/1.5 var(--f);
    color: var(--soft);
}


/* 9 Visit */

.s-visit {
    padding: var(--section) var(--margin);
}

.visit-grid {
    display: grid;
    grid-template-columns: repeat(12, minmax(0, 1fr));
    gap: var(--gutter);
    margin-top: clamp(32px, 5vw, 72px);
}

.panel {
    --pad: clamp(24px, 3vw, 44px);
    --round: clamp(24px, 2.6vw, 40px);
    padding: var(--pad);
    border: 1px solid var(--line);
    border-radius: var(--round);
    border-color: var(--glass-edge);
    background: var(--glass-fill);
    backdrop-filter: blur(14px) saturate(1.2);
}

.panel h3 {
    margin-bottom: 14px;
    font: 400 clamp(26px, 2.4vw, 36px)/1.1 var(--display);
    color: var(--title);
}

.panel p {
    color: var(--soft);
}

.panel .lead {
    margin-bottom: 10px;
    font: 400 clamp(20px, 1.8vw, 26px)/1.25 var(--display);
    color: var(--bone);
}

.visit-hours {
    grid-column: 1 / 8;
}

/* a ticket */
.visit-tickets {
    --stub: clamp(108px, 9vw, 132px);
    --notch: 16px;
    grid-column: 8 / 13;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    padding-bottom: 0;
    border-color: transparent;
    background: linear-gradient(135deg, #f3e6bd, #c9973f);
    color: var(--ink);
    -webkit-mask:
        radial-gradient(circle at left calc(100% - var(--stub)), transparent calc(var(--notch) - 0.5px), #000 var(--notch)) left / 51% 100% no-repeat,
        radial-gradient(circle at right calc(100% - var(--stub)), transparent calc(var(--notch) - 0.5px), #000 var(--notch)) right / 51% 100% no-repeat;
    mask:
        radial-gradient(circle at left calc(100% - var(--stub)), transparent calc(var(--notch) - 0.5px), #000 var(--notch)) left / 51% 100% no-repeat,
        radial-gradient(circle at right calc(100% - var(--stub)), transparent calc(var(--notch) - 0.5px), #000 var(--notch)) right / 51% 100% no-repeat;
}

/* the stub */
.stub {
    position: relative;
    display: flex;
    align-items: center;
    width: 100%;
    height: var(--stub);
}

.stub::before {
    content: "";
    position: absolute;
    left: calc(var(--pad) * -1 + var(--notch) + 8px);
    right: calc(var(--pad) * -1 + var(--notch) + 8px);
    top: 0;
    border-top: 2px dashed rgba(21, 17, 13, 0.4);
}

.visit-tickets h3,
.visit-tickets .lead {
    color: var(--ink);
}

.visit-tickets p {
    flex: 1;
    margin-bottom: 26px;
    color: rgba(21, 17, 13, 0.78);
}

.visit-tickets .btn {
    background: var(--ink);
    color: var(--gold-soft);
}

.visit-tickets .btn:hover {
    background: var(--bone);
    color: var(--ink);
}

.visit-way {
    grid-column: 1 / 13;
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr) auto;
    align-items: center;
    gap: var(--gutter);
}

.visit-way h3,
.visit-way .lead {
    margin: 0;
}

.status {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 20px;
    padding: 8px 16px;
    border: 1px solid var(--line);
    border-radius: 999px;
    font: 500 14px/1.3 var(--f);
}

.status::before {
    content: "";
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--stone);
}

.status.is-open::before {
    background: #3f8a56;
}

.status.is-closed::before {
    background: var(--sun);
}

.hours {
    width: 100%;
    border-collapse: collapse;
    font: 400 16px/1.4 var(--f);
}

.hours th,
.hours td {
    padding: 14px 12px 14px 0;
    border-bottom: 1px solid var(--line);
    text-align: left;
    vertical-align: top;
}

.hours thead th {
    font: 500 13px/1.3 var(--f);
    color: var(--stone);
}

.hours tbody th {
    font-weight: 500;
}

.hours .is-today th,
.hours .is-today td {
    background: rgba(201, 151, 63, 0.2);
}

.note {
    margin-top: 16px;
    font: 400 14px/1.5 var(--f);
    color: var(--stone);
}


/* ---------- 4 Artifacts page ---------- */

/* the showcase */
.showcase {
    min-height: 100vh;
    min-height: 100svh;
    display: flex;
    flex-direction: column;
    padding: calc(var(--top) + 30px) var(--margin) 56px;
    background-color: var(--ink);
    position: relative;
    isolation: isolate;
}

/* the gold sweep line */
.showcase::after,
.piece-hero::after {
    content: "";
    position: absolute;
    z-index: -1;
    inset: 0;
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 900' preserveAspectRatio='none'%3E%3Cdefs%3E%3ClinearGradient id='g' x1='0' y1='0' x2='1' y2='0'%3E%3Cstop offset='0' stop-color='%237d520c'/%3E%3Cstop offset='.35' stop-color='%23c9973f'/%3E%3Cstop offset='.72' stop-color='%23ebcb8b'/%3E%3Cstop offset='1' stop-color='%23f3e6bd'/%3E%3C/linearGradient%3E%3C/defs%3E%3Cpath d='M -30 905 C 300 905 640 885 900 805 C 1150 728 1330 650 1470 575' fill='none' stroke='url(%23g)' stroke-width='2' vector-effect='non-scaling-stroke'/%3E%3C/svg%3E") no-repeat 0 0 / 100% 100%;
    pointer-events: none;
}

.show-title {
    font: 400 clamp(20px, 1.8vw, 28px)/1.2 var(--display);
    color: var(--gold-soft);
}

.layout {
    flex: 1;
    display: grid;
    grid-template-columns: repeat(12, minmax(0, 1fr));
    column-gap: var(--gutter);
    align-items: center;
}

.pick-list {
    grid-column: 1 / 4;
    display: grid;
    gap: 6px;
}

.pick-list label {
    position: relative;
    display: flex;
    align-items: baseline;
    gap: 16px;
    padding: 14px 0 14px 28px;
    border-bottom: 1px solid var(--line);
    font: 400 clamp(22px, 2.2vw, 34px)/1.1 var(--display);
    color: var(--soft);
    cursor: pointer;
    transition: color 0.3s, padding 0.5s var(--ease);
}

.pick-list label span {
    font: 500 13px/1 var(--f);
    color: var(--gold);
}

/* the gold mark */
.pick-list label::before {
    content: "";
    position: absolute;
    left: 0;
    top: 50%;
    width: 0;
    height: 1px;
    background: var(--gold-soft);
    transition: width 0.5s var(--ease);
}

.pick-list label:hover {
    color: var(--bone);
}

/* the gallery button */
.pick-list .vr-all {
    justify-self: start;
    margin: 20px 0 0 28px;
    padding: 13px 24px;
    color: var(--gold-soft);
    font-size: 14px;
}

#p1:checked ~ .layout label[for="p1"],
#p2:checked ~ .layout label[for="p2"],
#p3:checked ~ .layout label[for="p3"],
#p4:checked ~ .layout label[for="p4"],
#p5:checked ~ .layout label[for="p5"] {
    padding-left: 40px;
    color: var(--gold-soft);
}

#p1:checked ~ .layout label[for="p1"]::before,
#p2:checked ~ .layout label[for="p2"]::before,
#p3:checked ~ .layout label[for="p3"]::before,
#p4:checked ~ .layout label[for="p4"]::before,
#p5:checked ~ .layout label[for="p5"]::before {
    width: 24px;
}

#p1:focus-visible ~ .layout label[for="p1"],
#p2:focus-visible ~ .layout label[for="p2"],
#p3:focus-visible ~ .layout label[for="p3"],
#p4:focus-visible ~ .layout label[for="p4"],
#p5:focus-visible ~ .layout label[for="p5"] {
    outline: 2px solid var(--gold);
    outline-offset: 2px;
}

/* the stage */
.stage {
    grid-column: 4 / 10;
    position: relative;
    width: min(100%, 68vh);
    aspect-ratio: 1;
    justify-self: center;
    background: radial-gradient(circle, rgba(235, 203, 139, 0.2), transparent 62%);
}

.ring {
    position: absolute;
    inset: 7%;
    border: 1px solid rgba(235, 203, 139, 0.7);
    border-radius: 50%;
}

.ring2 {
    inset: -2%;
    border-color: rgba(235, 203, 139, 0.28);
}

/* the name over the object */
.bn {
    position: absolute;
    z-index: 3;
    left: -18%;
    bottom: 2%;
    font: 400 clamp(64px, 8.6vw, 148px)/0.86 var(--display);
    letter-spacing: -0.03em;
    color: var(--bone);
    text-shadow: 0 6px 44px rgba(14, 11, 8, 0.7);
    pointer-events: none;
}

.stage .o {
    position: absolute;
    z-index: 2;
    inset: 0;
    display: grid;
    place-items: center;
}

.stage .o img {
    max-width: 74%;
    max-height: 78%;
    object-fit: contain;
    filter: drop-shadow(0 34px 30px rgba(0, 0, 0, 0.6));
}

.stage .o.is-long img {
    width: 100%;
    max-width: 100%;
    max-height: none;
    transform: rotate(-38deg);
}

.info {
    grid-column: 10 / 13;
    display: grid;
}

.info > div {
    grid-area: 1 / 1;
    align-self: center;
}

.info .lead {
    font: 400 clamp(20px, 1.8vw, 26px)/1.3 var(--display);
}

.facts {
    margin: 24px 0 28px;
    border-top: 1px solid var(--line);
}

.facts div {
    display: flex;
    justify-content: space-between;
    gap: 20px;
    padding: 12px 0;
    border-bottom: 1px solid var(--line);
    font: 400 15px/1.4 var(--f);
}

.facts dt {
    color: var(--soft);
}

.facts dd {
    text-align: right;
}

.stage .o,
.stage .bn,
.info > div {
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.6s var(--ease), visibility 0.6s;
}

#p1:checked ~ .layout .n1,
#p2:checked ~ .layout .n2,
#p3:checked ~ .layout .n3,
#p4:checked ~ .layout .n4,
#p5:checked ~ .layout .n5 {
    opacity: 1;
    visibility: visible;
}

.show-hint {
    margin-top: 24px;
    font: 400 14px/1.4 var(--f);
    color: var(--soft);
}


/* the catalogue */

.catalogue {
    padding: var(--section) var(--margin);
}

.cat-head {
    display: grid;
    grid-template-columns: repeat(12, minmax(0, 1fr));
    column-gap: var(--gutter);
    align-items: end;
    margin-bottom: clamp(32px, 5vw, 64px);
}

.cat-head .h-l {
    grid-column: 1 / 8;
}

.cat-head .lede {
    grid-column: 8 / 13;
}

.cat-cols,
.cat-row {
    display: grid;
    grid-template-columns: 96px minmax(0, 1.5fr) minmax(0, 1.3fr) minmax(0, 1.5fr) 120px;
    align-items: center;
    column-gap: var(--gutter);
}

.cat-cols {
    padding: 0 0 12px;
    border-bottom: 1px solid var(--line);
    font: 500 13px/1.3 var(--f);
    color: var(--stone);
}

.cat-row {
    padding: 18px 0;
    border-bottom: 1px solid var(--line);
    font: 400 16px/1.4 var(--f);
    transition: background 0.4s, padding 0.5s var(--ease);
}

.cat-row:hover {
    padding-left: 14px;
    padding-right: 14px;
    background: rgba(239, 232, 218, 0.06);
}

.cat-thumb {
    display: grid;
    place-items: center;
    width: 84px;
    aspect-ratio: 1;
    border-radius: 50%;
    background: radial-gradient(circle at 50% 30%, #3a2f20, var(--ink));
}

.cat-thumb img {
    width: 76%;
    height: 76%;
    object-fit: contain;
}

.cat-thumb img.is-long {
    width: 100%;
    height: 100%;
    transform: rotate(-38deg);
}

.cat-name b {
    display: block;
    font: 400 clamp(26px, 2.6vw, 40px)/1.05 var(--display);
    color: var(--title);
}

.cat-name span {
    color: var(--stone);
    font-size: 14px;
}

.cat-open {
    justify-self: end;
    font: 500 15px/1 var(--f);
    color: var(--gold-soft);
    transition: transform 0.4s var(--ease);
}

.cat-row:hover .cat-open {
    transform: translateX(-6px);
}


/* how to look closer */

.steps {
    padding: var(--section) var(--margin);
}

.steps .h-l {
    max-width: 10em;
}

.step-list {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    column-gap: var(--gutter);
    margin-top: clamp(40px, 6vw, 88px);
}

.step-list li {
    padding-top: 22px;
    border-top: 1px solid var(--line);
}

.step-list b {
    display: block;
    font: 400 clamp(56px, 7vw, 112px)/0.95 var(--display);
    color: var(--gold-soft);
}

.step-list h3 {
    margin: 14px 0 8px;
    font: 400 clamp(24px, 2.2vw, 34px)/1.1 var(--display);
    color: var(--title);
}

.step-list p {
    max-width: 30ch;
    color: var(--soft);
}


/* the last room */

.closing {
    position: relative;
    display: grid;
    place-items: center;
    min-height: 80vh;
    padding: var(--section) var(--margin);
    overflow: hidden;
    text-align: center;
}

.closing img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.closing::before {
    content: "";
    position: absolute;
    z-index: 1;
    inset: 0;
    background: rgba(14, 11, 8, 0.66);
}

.closing-copy {
    position: relative;
    z-index: 2;
}

.closing .h-l {
    max-width: 9em;
    margin: 0 auto;
}

.closing p {
    max-width: 40ch;
    margin: 22px auto 34px;
}

.closing .btn + .btn {
    margin-left: 10px;
}


/* ---------- 5 Artifact pages ---------- */

.piece-hero {
    position: relative;
    display: grid;
    grid-template-columns: repeat(12, minmax(0, 1fr));
    column-gap: var(--gutter);
    align-items: center;
    min-height: 100vh;
    min-height: 100svh;
    padding: calc(var(--top) + 30px) var(--margin) 60px;

    /* the 3D canvas */
    overflow-x: clip;
    background-color: var(--ink);
    isolation: isolate;
}

/* one still glow behind the model */
.piece-hero::before {
    content: "";
    position: absolute;
    inset: 0;
    background: radial-gradient(circle at 50% 50%, rgba(235, 203, 139, 0.2), transparent 46%);
    pointer-events: none;
}

.crumbs {
    position: absolute;
    left: var(--margin);
    top: calc(var(--top) + 8px);
    z-index: 3;
    font: 400 14px/1 var(--f);
    color: var(--soft);
}

.crumbs a:hover {
    color: var(--gold-soft);
}

.piece-copy {
    position: relative;
    z-index: 3;
    grid-column: 1 / 5;
}

.piece-copy h1 {
    font: 400 var(--t-l)/0.92 var(--display);
    letter-spacing: -0.03em;
}

.piece-copy .of {
    display: block;
    margin-top: 12px;
    font: italic 400 var(--t-s)/1.2 var(--display);
    color: var(--gold-soft);
}

.piece-copy .lead {
    max-width: 28ch;
    margin-top: 22px;
    font: 400 clamp(18px, 1.5vw, 21px)/1.5 var(--f);
    color: var(--soft);
}

.piece-stage {
    position: relative;
    grid-column: 5 / 10;
    aspect-ratio: 1;
}

.piece-stage .ring {
    inset: 3%;
}

.piece-stage .ring2 {
    inset: -5%;
}

.piece-stage model-viewer {
    position: absolute;
    z-index: 3;
    left: -14%;
    top: -14%;
    width: 128%;
    height: 128%;
    background: transparent;
    --poster-color: transparent;
    --progress-bar-height: 0px;
    -webkit-mask-image: radial-gradient(closest-side, #000 76%, transparent 100%);
    mask-image: radial-gradient(closest-side, #000 76%, transparent 100%);
}

.fallback {
    position: absolute;
    z-index: 5;
    left: 0;
    right: 0;
    bottom: -4%;
    text-align: center;
    font: 400 14px/1.5 var(--f);
    color: var(--soft);
}

.hotspot {
    display: grid;
    place-items: center;
    width: 30px;
    height: 30px;
    padding: 0;
    border: 1px solid var(--gold-soft);
    border-radius: 50%;
    background: rgba(14, 11, 8, 0.8);
    color: var(--gold-soft);
    font: 500 12px/1 var(--f);
    cursor: pointer;
    animation: pulse 2.6s infinite;
    --min-hotspot-opacity: 0;
    transition: background 0.3s, color 0.3s;
}

.hotspot:hover,
.hotspot.is-on {
    background: var(--gold);
    color: var(--ink);
}

@keyframes pulse {
    0% {
        box-shadow: 0 0 0 0 rgba(235, 203, 139, 0.55);
    }

    70%,
    100% {
        box-shadow: 0 0 0 16px rgba(235, 203, 139, 0);
    }
}

.ar-button {
    position: absolute;
    left: 50%;
    bottom: 12%;
    padding: 11px 20px;
    border: 0;
    border-radius: 999px;
    background: var(--sun);
    color: var(--ink);
    font: 500 14px/1 var(--f);
    transform: translateX(-50%);
    cursor: pointer;
}

.piece-look {
    position: relative;
    z-index: 3;
    grid-column: 10 / 13;
}

.piece-look h2 {
    margin-bottom: 14px;
    font: 500 15px/1.3 var(--f);
    color: var(--soft);
}

.look-card {
    display: flex;
    align-items: baseline;
    gap: 14px;
    width: 100%;
    margin-bottom: 8px;
    padding: 15px 18px;
    border: 1px solid var(--glass-edge);
    border-radius: 14px;
    background: var(--glass-fill);
    backdrop-filter: blur(14px);
    text-align: left;
    cursor: pointer;
    transition: border-color 0.3s, background 0.3s, transform 0.4s var(--ease);
}

.look-card b {
    font: 500 14px/1 var(--f);
    color: var(--gold);
}

.look-card span {
    font: 400 20px/1.2 var(--display);
}

.look-card:hover {
    transform: translateX(-6px);
}

.look-card.is-on {
    border-color: var(--gold);
    background: rgba(201, 151, 63, 0.16);
}

.piece-note {
    min-height: 7em;
    margin-top: 16px;
    font: 400 16px/1.5 var(--f);
}

.piece-note b {
    display: block;
    margin-bottom: 6px;
    font: 400 26px/1.15 var(--display);
    color: var(--gold-soft);
}

.tools {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px;
    margin-top: 10px;
}

.tool {
    display: grid;
    place-items: center;
    width: 46px;
    height: 46px;
    padding: 0;
    border: 1px solid var(--glass-edge);
    border-radius: 50%;
    background: var(--glass-fill);
    font: 300 22px/1 var(--f);
    cursor: pointer;
    transition: background 0.3s, color 0.3s, transform 0.4s var(--ease);
}

.tool:hover {
    background: var(--bone);
    color: var(--ink);
    transform: translateY(-2px);
}

.tool-text {
    width: auto;
    padding: 0 22px;
    border-radius: 999px;
    font: 500 14px/1 var(--f);
}

.hint {
    margin-top: 14px;
    font: 400 13px/1.4 var(--f);
    color: var(--soft);
    opacity: 0.8;
}

/* the story and the details */
.piece-story {
    display: grid;
    grid-template-columns: repeat(12, minmax(0, 1fr));
    column-gap: var(--gutter);
    row-gap: 40px;
    padding: var(--section) var(--margin);
}

.story-text {
    grid-column: 1 / 8;
}

.story-text .h-l {
    margin-bottom: 30px;
}

.story-text p {
    max-width: 34em;
    margin-bottom: 18px;
    font: 400 clamp(19px, 1.6vw, 23px)/1.6 var(--f);
    color: var(--soft);
}

.story-text .btn {
    margin-top: 10px;
}

.story-spec {
    grid-column: 9 / 13;
    align-self: start;
    padding: clamp(22px, 2.6vw, 38px);
    border: 1px solid var(--glass-edge);
    border-radius: 18px;
    background: var(--glass-fill);
    backdrop-filter: blur(14px) saturate(1.2);
    box-shadow: 0 30px 50px -34px rgba(0, 0, 0, 0.7);
}

.story-spec h3 {
    margin-bottom: 8px;
    font: 400 clamp(26px, 2.4vw, 36px)/1.1 var(--display);
    color: var(--title);
}

.story-spec dl > div {
    padding: 16px 0;
    border-bottom: 1px solid var(--line);
}

.story-spec dl > div:last-child {
    border-bottom: 0;
}

.story-spec dt {
    margin-bottom: 4px;
    font: 500 13px/1.3 var(--f);
    color: var(--gold-soft);
}

.story-spec dd {
    font: 400 18px/1.45 var(--f);
}

/* the other four artifacts */
.piece-more {
    padding: var(--section) var(--margin) clamp(48px, 6vw, 90px);
}

.piece-more .h-l {
    margin-bottom: clamp(32px, 5vw, 64px);
}

.piece-more .vitrines {
    height: min(60vh, 500px);
    min-height: 400px;
}

.credit {
    max-width: 90ch;
    margin-top: clamp(40px, 5vw, 72px);
    font: 400 13px/1.7 var(--f);
    color: var(--stone);
}

.credit a {
    text-decoration: underline;
    text-underline-offset: 3px;
}


/* ---------- 5b Visit page ---------- */

.v-hero {
    position: relative;
    display: grid;
    grid-template-columns: repeat(12, minmax(0, 1fr));
    column-gap: var(--gutter);
    align-items: end;
    min-height: 100vh;
    min-height: min(100svh, 920px);
    padding: calc(var(--top) + 48px) var(--margin) clamp(36px, 5vw, 72px);
    overflow: hidden;
    isolation: isolate;
}

.v-hero > img {
    position: absolute;
    z-index: -2;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: 50% 40%;
}


.v-hero::before {
    content: "";
    position: absolute;
    z-index: -1;
    inset: 0;
    background:
        linear-gradient(0deg, var(--ink) 0%, rgba(21, 17, 13, 0.8) 28%, rgba(21, 17, 13, 0.2) 62%, rgba(14, 11, 8, 0.6) 100%),
        linear-gradient(90deg, rgba(14, 11, 8, 0.62), transparent 60%);
}

.v-copy {
    grid-column: 1 / 9;
}

.v-hero h1 {
    font: 400 clamp(64px, min(14.4vw, 25vh), 250px)/0.9 var(--display);
    letter-spacing: -0.03em;
    color: var(--title);
}

.v-hero h1 em {
    font-style: italic;
    color: var(--accent);
}

.v-hero .line {
    display: block;
    overflow: hidden;
    padding: 0.08em 0 0.24em;
    margin: -0.08em 0 -0.24em;
}

.v-hero .line > span {
    display: block;
    animation: drop 1.3s cubic-bezier(0.2, 0.8, 0.2, 1) calc(0.3s + var(--i) * 0.22s) backwards;
}

.v-hero .line:nth-of-type(1) > span {
    --i: 0;
}

.v-hero .line:nth-of-type(2) > span {
    --i: 1;
}

.v-hero .lede {
    max-width: 28ch;
    margin-top: clamp(20px, 2.6vw, 34px);
    color: var(--bone);
    animation: fadein 1.2s ease 1.3s backwards;
}

.v-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: clamp(20px, 2.4vw, 30px);
    animation: fadeup 1s var(--ease) 1.5s backwards;
}

.v-now {
    grid-column: 9 / 13;
    padding: clamp(22px, 2.4vw, 32px);
    border: 1px solid var(--glass-edge);
    border-radius: clamp(24px, 2.6vw, 40px);
    background: var(--glass-fill);
    backdrop-filter: blur(14px) saturate(1.2);
    animation: fadeup 1s var(--ease) 1.7s backwards;
}

.v-now .status {
    margin-bottom: 18px;
    border-radius: 18px;
}

.v-late {
    font: 400 clamp(26px, 2.4vw, 36px)/1.1 var(--display);
    color: var(--title);
}

.v-small {
    margin-top: 10px;
    font: 400 14px/1.5 var(--f);
    color: var(--soft);
}

.v-hours,
.v-tickets,
.v-way,
.v-begin {
    padding: var(--section) var(--margin);
}

.v-hours .lede,
.v-begin .lede {
    max-width: 46ch;
    margin-top: 22px;
}


/* the hours */

.days {
    display: grid;
    gap: var(--gutter);
    margin-top: clamp(32px, 5vw, 72px);
}

.day {
    --label: clamp(120px, 13vw, 190px);
}

.day-head {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 12px 16px;
    margin-bottom: clamp(20px, 2.4vw, 32px);
}

.day-head h3 {
    margin: 0;
}

.day-head h3 em {
    font-style: italic;
    color: var(--accent);
}

.tag {
    display: none;
    flex: none;
    padding: 7px 14px;
    border-radius: 999px;
    background: var(--gold-soft);
    color: var(--ink);
    font: 500 13px/1 var(--f);
}

.day.is-today {
    border-color: rgba(235, 203, 139, 0.6);
    box-shadow: 0 40px 90px -50px rgba(201, 151, 63, 0.55);
}

.day.is-today .tag {
    display: inline-flex;
}

.axis {
    position: relative;
    height: 18px;
    margin-left: var(--label);
    font: 500 13px/1 var(--f);
    color: var(--stone);
}

.axis li {
    position: absolute;
    top: 0;
    left: calc(var(--h) / 14 * 100%);
    transform: translateX(-50%);
}

.axis li:nth-child(1) {
    --h: 0;
}

.axis li:nth-child(2) {
    --h: 2;
}

.axis li:nth-child(3) {
    --h: 4;
}

.axis li:nth-child(4) {
    --h: 6;
}

.axis li:nth-child(5) {
    --h: 8;
}

.axis li:nth-child(6) {
    --h: 10;
}

.axis li:nth-child(7) {
    --h: 12;
}

.axis li:nth-child(8) {
    --h: 14;
}

.lanes {
    position: relative;
    margin-top: 10px;
    padding-bottom: 34px;
}

/* a thin line every two hours */
.lanes::before {
    content: "";
    position: absolute;
    top: 0;
    bottom: 34px;
    left: var(--label);
    right: 0;
    border-right: 1px solid var(--line);
    background: linear-gradient(90deg, var(--line) 1px, transparent 1px) 0 0 / calc(100% / 7) 100% repeat-x;
}

.lane {
    position: relative;
    display: grid;
    grid-template-columns: var(--label) minmax(0, 1fr);
    align-items: center;
    padding: 8px 0;
}

.lane-name {
    padding-right: 16px;
    font: 500 15px/1.25 var(--f);
    color: var(--soft);
}

.track {
    position: relative;
    height: 44px;
}

.lane-last .track {
    height: 26px;
}

.bar {
    position: absolute;
    top: 0;
    bottom: 0;
    left: calc(var(--a) / 14 * 100%);
    width: calc((var(--b) - var(--a)) / 14 * 100%);
    display: flex;
    align-items: center;
    padding: 0 18px;
    border-radius: 999px;
    font: 500 15px/1 var(--f);
    white-space: nowrap;
    overflow: hidden;
    clip-path: inset(0 0 0 0 round 999px);
    transition: clip-path 1.2s var(--ease) calc(var(--k, 0) * 0.2s + 0.15s);
}

.bar-complex {
    border: 1px solid var(--gold);
    background: rgba(201, 151, 63, 0.16);
    color: var(--gold-soft);
}

.bar-galleries {
    background: linear-gradient(90deg, var(--gold), var(--gold-soft));
    color: var(--ink);
}

/* the last ticket */
.mark {
    position: absolute;
    top: 0;
    bottom: 34px;
    left: calc(var(--label) + (100% - var(--label)) * var(--b) / 14);
    border-left: 2px dashed var(--sun);
    opacity: 0.85;
    pointer-events: none;
    transition: opacity 0.6s ease 1.1s;
}

.pin-text {
    position: absolute;
    top: 50%;
    left: calc(var(--b) / 14 * 100%);
    transform: translate(calc(-100% - 12px), -50%);
    font: 500 14px/1 var(--f);
    color: var(--bone);
    white-space: nowrap;
    transition: opacity 0.6s ease 1.1s;
}

/* the hours of each day */
.day[data-days="other"] .bar-complex {
    --a: 0.5;
    --b: 11;
}

.day[data-days="other"] .bar-galleries {
    --a: 1;
    --b: 10;
    --k: 1;
}

.day[data-days="other"] .pin-text {
    --b: 9;
}

.day[data-days="other"] .mark {
    --b: 9;
}

.day[data-days="late"] .bar-complex {
    --a: 0.5;
    --b: 14;
}

.day[data-days="late"] .bar-galleries {
    --a: 1;
    --b: 13;
    --k: 1;
}

.day[data-days="late"] .pin-text {
    --b: 12;
}

.day[data-days="late"] .mark {
    --b: 12;
}

/* the needle */
.now {
    position: absolute;
    top: -6px;
    bottom: 34px;
    left: calc(var(--label) + (100% - var(--label)) * var(--n, 0) / 14);
    width: 2px;
    margin-left: -1px;
    background: var(--bone);
    box-shadow: 0 0 14px rgba(239, 232, 218, 0.7);
    pointer-events: none;
}

.now b {
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translate(-50%, 100%);
    padding: 5px 10px;
    border-radius: 999px;
    background: var(--bone);
    color: var(--ink);
    font: 500 12px/1 var(--f);
    white-space: nowrap;
}

.v-hours.wait .bar {
    clip-path: inset(0 100% 0 0 round 999px);
}

.v-hours.wait.in .bar {
    clip-path: inset(0 0 0 0 round 999px);
}

.v-hours.wait .mark,
.v-hours.wait .pin-text {
    opacity: 0;
}

.v-hours.wait.in .mark {
    opacity: 0.85;
}

.v-hours.wait.in .pin-text {
    opacity: 1;
}

.v-hours .note {
    margin-top: 28px;
}


/* tickets */

.v-split {
    display: grid;
    grid-template-columns: repeat(12, minmax(0, 1fr));
    gap: var(--gutter);
    align-items: stretch;
    margin-top: clamp(32px, 5vw, 72px);
}

.v-tickets .visit-tickets {
    grid-column: 1 / 7;
    min-height: clamp(340px, 32vw, 460px);
}

.v-facts {
    grid-column: 8 / 13;
    align-self: center;
}

.v-facts li {
    padding: 24px 0;
    border-top: 1px solid var(--line);
}

.v-facts li:last-child {
    border-bottom: 1px solid var(--line);
}

.v-facts h3 {
    margin-bottom: 8px;
    font: 400 clamp(24px, 2.2vw, 34px)/1.1 var(--display);
    color: var(--title);
}

.v-facts p {
    max-width: 36ch;
    color: var(--soft);
}


/* getting here */

.v-way {
    display: grid;
    grid-template-columns: repeat(12, minmax(0, 1fr));
    column-gap: var(--gutter);
    align-items: center;
}

.v-way-text {
    grid-column: 1 / 6;
}

.v-way .lede {
    max-width: 30ch;
    margin-top: 22px;
}

.way-steps {
    margin: clamp(28px, 3.4vw, 48px) 0;
}

.way-steps li {
    display: grid;
    grid-template-columns: clamp(48px, 5vw, 72px) minmax(0, 1fr);
    align-items: center;
    padding: 16px 0;
    border-top: 1px solid var(--line);
}

.way-steps li:last-child {
    border-bottom: 1px solid var(--line);
}

.way-steps b {
    font: 400 clamp(44px, 4.6vw, 68px)/1 var(--display);
    color: var(--gold-soft);
}

.way-steps p {
    font: 400 clamp(17px, 1.4vw, 20px)/1.45 var(--f);
    color: var(--soft);
}

.v-photo {
    --round: clamp(24px, 2.6vw, 40px);
    position: relative;
    grid-column: 7 / 13;
    margin: 0;
}

.v-photo img {
    width: 100%;
    aspect-ratio: 4 / 3;
    object-fit: cover;
    border-radius: var(--round);
    box-shadow: 0 34px 60px -34px rgba(0, 0, 0, 0.6);
}

.v-photo .wall-label {
    position: absolute;
    left: clamp(14px, 2vw, 28px);
    bottom: clamp(14px, 2vw, 28px);
}


/* where to begin */

.begin-list {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: var(--gutter);
    margin-top: clamp(32px, 5vw, 72px);
}

.begin-list li:nth-child(even) {
    margin-top: clamp(24px, 4vw, 64px);
}

.begin-list a {
    display: block;
}

.pic {
    display: block;
    aspect-ratio: 4 / 5;
    overflow: hidden;
    border-radius: clamp(20px, 2vw, 32px);
    box-shadow: 0 34px 60px -34px rgba(0, 0, 0, 0.6);
}

.pic img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 1.2s var(--ease);
}

.begin-list a:hover .pic img {
    transform: scale(1.05);
}

.begin-list h3 {
    margin-top: 18px;
    font: 400 clamp(24px, 2.4vw, 36px)/1.05 var(--display);
    color: var(--title);
    transition: color 0.3s;
}

.begin-list a:hover h3 {
    color: var(--gold-soft);
}

.begin-list p {
    max-width: 26ch;
    margin-top: 6px;
    font-size: 15px;
    color: var(--soft);
}

.v-end {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 22px 28px;
    margin-top: clamp(40px, 5vw, 72px);
}


/* ---------- 5c The end page ---------- */

/* the first screen */
.e-hero {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    gap: clamp(28px, 4.4vh, 52px);
    min-height: 100vh;
    min-height: min(100svh, 960px);
    padding: calc(var(--top) + 36px) var(--margin) clamp(40px, 4.4vw, 68px);
    background:
        radial-gradient(ellipse 70% 46% at 50% 100%, rgba(235, 203, 139, 0.12), transparent 72%),
        var(--ink);
}

.e-head {
    display: grid;
    grid-template-columns: repeat(12, minmax(0, 1fr));
    column-gap: var(--gutter);
    align-items: end;
}

.e-head h1 {
    grid-column: 1 / 9;
    font: 400 clamp(48px, min(7.8vw, 14vh), 136px)/0.92 var(--display);
    letter-spacing: -0.03em;
    color: var(--title);
}

.e-head h1 em {
    font-style: italic;
    color: var(--accent);
}

.e-hero .line {
    display: block;
    overflow: hidden;
    padding: 0.08em 0 0.24em;
    margin: -0.08em 0 -0.24em;
}

.e-hero .line > span {
    display: block;
    animation: drop 1.3s cubic-bezier(0.2, 0.8, 0.2, 1) calc(0.3s + var(--i) * 0.22s) backwards;
}

.e-hero .line:nth-of-type(1) > span {
    --i: 0;
}

.e-hero .line:nth-of-type(2) > span {
    --i: 1;
}

.e-head .lede {
    grid-column: 9 / 13;
    max-width: 26ch;
    animation: fadein 1.2s ease 1.3s backwards;
}

.e-line {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: clamp(10px, 1.4vw, 22px);
}

.e-piece {
    min-width: 0;
}

.e-arch {
    position: relative;
    aspect-ratio: 3 / 4.1;
    overflow: hidden;
    border: 1px solid rgba(235, 203, 139, 0.26);
    border-radius: 999px 999px 0 0;
    background:
        radial-gradient(ellipse 90% 62% at 50% 8%, rgba(235, 203, 139, 0.42), transparent 72%),
        linear-gradient(var(--umber), var(--deep));
    transition: border-color 0.4s, box-shadow 0.6s var(--ease);
}

/* the stone block */
.e-arch::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 22%;
    border-top: 1px solid var(--line);
    background: linear-gradient(var(--umber), var(--deep));
}

.e-arch img {
    position: absolute;
    z-index: 1;
    left: 50%;
    top: 52%;
    width: 70%;
    max-height: 48%;
    object-fit: contain;
    filter: drop-shadow(0 22px 20px rgba(0, 0, 0, 0.65));
    transform: translate(-50%, -50%);
    transition: transform 0.8s var(--ease), opacity 0.6s;
}

.e-arch img.is-long {
    width: 112%;
    max-height: none;
    transform: translate(-50%, -50%) rotate(-38deg);
}

/* the 3D model */
.e-arch model-viewer {
    position: absolute;
    z-index: 1;
    left: 50%;
    top: 52%;
    width: 100%;
    height: 62%;
    --poster-color: transparent;
    --progress-bar-height: 0;
    background: transparent;
    opacity: 0;
    pointer-events: none;
    filter: drop-shadow(0 22px 20px rgba(0, 0, 0, 0.65));
    transform: translate(-50%, -50%);
    transition: transform 0.8s var(--ease), opacity 0.6s;
}

.e-arch model-viewer.is-long {
    width: 112%;
    height: auto;
    aspect-ratio: 1;
    transform: translate(-50%, -50%) rotate(-38deg);
}

.e-arch.is-3d model-viewer {
    opacity: 1;
    pointer-events: auto;
}

.e-arch model-viewer::part(default-ar-button) {
    display: none;
}

.e-arch.is-3d img {
    opacity: 0;
}

.e-piece:hover .e-arch {
    border-color: var(--gold);
    box-shadow: 0 40px 80px -40px rgba(201, 151, 63, 0.55);
}

.e-piece:hover .e-arch img,
.e-piece:hover .e-arch model-viewer {
    transform: translate(-50%, -55%) scale(1.07);
}

.e-piece:hover .e-arch img.is-long,
.e-piece:hover .e-arch model-viewer.is-long {
    transform: translate(-50%, -53%) rotate(-38deg) scale(1.06);
}

.e-label {
    padding-top: 16px;
}

.e-label h2 {
    font: 400 clamp(24px, 2.3vw, 36px)/1.05 var(--display);
    letter-spacing: -0.01em;
    color: var(--title);
}

.e-label p {
    max-width: 24ch;
    margin-top: 8px;
    font: 400 15px/1.45 var(--f);
    color: var(--soft);
}

.e-label small {
    display: block;
    margin-top: 10px;
    font: 500 13px/1.4 var(--f);
    color: var(--stone);
}


/* the visit in brief */
.e-brief {
    display: grid;
    grid-template-columns: repeat(12, minmax(0, 1fr));
    column-gap: var(--gutter);
    row-gap: 48px;
    align-items: center;
    padding: var(--section) var(--margin);
}

.e-brief-text {
    grid-column: 1 / 7;
}

.e-brief-text .lede {
    max-width: 44ch;
    margin-top: 22px;
}

.e-brief-text .h-l + .lede {
    margin-top: clamp(24px, 3vw, 40px);
}

.e-facts {
    grid-column: 8 / 13;
}

.e-facts div {
    display: grid;
    grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.6fr);
    gap: 16px;
    align-items: baseline;
    padding: 18px 0;
    border-top: 1px solid var(--line);
}

.e-facts div:first-child {
    padding-top: 0;
    border-top: 0;
}

.e-facts div:last-child {
    padding-bottom: 0;
}

.e-facts dt {
    font: 500 14px/1.3 var(--f);
    color: var(--stone);
}

.e-facts dd {
    font: 400 clamp(22px, 2vw, 30px)/1.15 var(--display);
    color: var(--title);
}


/* the way out */
.e-exit {
    position: relative;
    display: grid;
    grid-template-columns: repeat(12, minmax(0, 1fr));
    column-gap: var(--gutter);
    align-items: center;
    min-height: min(86vh, 760px);
    padding: var(--section) var(--margin) 0;
    overflow: hidden;
    background:
        radial-gradient(ellipse 46% 60% at 72% 80%, rgba(235, 203, 139, 0.16), transparent 70%),
        var(--ink);
}

.e-exit-text {
    position: relative;
    z-index: 2;
    grid-column: 1 / 7;
    padding-bottom: var(--section);
}

.e-exit-text .lede {
    max-width: 30ch;
    margin: 22px 0 34px;
}

.e-gate {
    position: relative;
    display: block;
    grid-column: 7 / 13;
    align-self: end;
}

.e-ring {
    position: absolute;
    left: 50%;
    bottom: -4%;
    width: 94%;
    aspect-ratio: 1;
    border: 1px solid rgba(235, 203, 139, 0.34);
    border-radius: 50%;
    background: radial-gradient(circle, rgba(235, 203, 139, 0.1), transparent 62%);
    transform: translateX(-50%);
    transition: border-color 0.5s, transform 0.8s var(--ease);
}

.e-gate img {
    position: relative;
    width: 100%;
    height: auto;
    margin-bottom: -1.5%;
    filter: drop-shadow(0 26px 50px rgba(0, 0, 0, 0.55));
    transition: transform 0.8s var(--ease);
}

.e-gate:hover img {
    transform: translateY(-10px);
}

.e-gate:hover .e-ring {
    border-color: var(--gold-soft);
    transform: translateX(-50%) scale(1.03);
}


/* ---------- 5d AR ---------- */

.ar-wrap {
    position: relative;
    display: inline-block;
    margin-top: 10px;
}

.info-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px;
}

.info-actions .ar-wrap,
.tools .ar-wrap {
    margin-top: 0;
}

/* the arrow */
.ar-open {
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.ar-open::after {
    content: "";
    width: 7px;
    height: 7px;
    margin-left: 10px;
    border-right: 1.5px solid currentColor;
    border-bottom: 1.5px solid currentColor;
    transform: translateY(-2px) rotate(45deg);
    transition: transform 0.4s var(--ease);
}

.ar-open[aria-expanded="true"]::after {
    transform: translateY(2px) rotate(-135deg);
}

/* the dropdown */
.ar-pop {
    position: absolute;
    z-index: 30;
    top: calc(100% + 12px);
    left: 0;
    width: min(330px, calc(100vw - 2 * var(--margin)));
    display: grid;
    grid-template-columns: 118px minmax(0, 1fr);
    gap: 18px;
    align-items: center;
    padding: 16px;
    border: 1px solid var(--glass-edge);
    border-radius: 22px;
    background:
        linear-gradient(135deg, rgba(239, 232, 218, 0.14), rgba(239, 232, 218, 0.03)),
        rgba(14, 11, 8, 0.9);
    backdrop-filter: blur(18px) saturate(1.2);
    box-shadow: 0 28px 60px rgba(0, 0, 0, 0.55);
    opacity: 0;
    visibility: hidden;
    transform: translateY(-8px);
    transition: opacity 0.35s var(--ease), transform 0.35s var(--ease), visibility 0.35s;
}

.ar-wrap.is-right .ar-pop {
    right: 0;
    left: auto;
}

.ar-pop.is-open {
    opacity: 1;
    visibility: visible;
    transform: none;
}

.ar-qr {
    display: block;
    width: 100%;
    aspect-ratio: 1;
    padding: 8px;
    border-radius: 14px;
    background: #fff;
    object-fit: contain;
}

.ar-text b {
    display: block;
    font: 400 26px/1.1 var(--display);
    color: var(--gold-soft);
}

.ar-text p {
    margin-top: 8px;
    font: 400 13px/1.45 var(--f);
    color: var(--soft);
}

/* from the QR code */
.from-qr .ar-button {
    animation: pulse 2.6s infinite;
}

/* the AR pill in a niche */
.ar-mini {
    display: none;
    position: absolute;
    z-index: 2;
    left: 50%;
    bottom: 9px;
    padding: 7px 14px;
    border: 1px solid var(--glass-edge);
    border-radius: 999px;
    background: var(--glass-fill);
    backdrop-filter: blur(10px);
    color: var(--gold-soft);
    font: 500 12px/1 var(--f);
    transform: translateX(-50%);
    cursor: pointer;
}

.e-arch.can-ar .ar-mini {
    display: block;
}


/* ---------- 7 Tablet ---------- */

@media (max-width: 1000px) {
    .nav {
        display: none;
    }

    .menu-btn {
        display: block;
    }

    /* the home */
    /* the entrance on a tablet */
    .hero {
        --fs: min(17vw, 11.5vh);
        --gw: min(124vw, 74vh);
        --gx: 50%;
    }

    .stage-one {
        align-items: flex-start;
        padding: calc(var(--top) + 34px) var(--margin) 0;
    }

    .hero-copy {
        position: relative;
        display: flex;
        flex-direction: column;
    }

    /* the Arabic name */
    .hero-ar {
        order: -1;
        margin: 0 0 4px;
    }

    .hero-card,
    .hero-sub {
        display: none;
    }

    .scroll-badge {
        position: absolute;
        z-index: 6;
        left: calc(100% + 12px);
        right: auto;
        top: auto;
        bottom: 6px;
        width: clamp(76px, 12vw, 100px);
        margin: 0;
    }

    .hero-stats {
        left: var(--margin);
        right: var(--margin);
        justify-content: space-between;
        bottom: 22px;
    }

    .hero-stats li {
        padding: 0 10px;
    }

    .statement,
    .museum-text {
        grid-column: 1 / -1;
        grid-row: auto;
    }

    .museum-photo {
        grid-column: 2 / 11;
        grid-row: auto;
        margin: 10px 0 20px;
    }

    .museum-photo .wall-label {
        left: -6%;
    }

    .stats {
        grid-row: auto;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        row-gap: 32px;
    }

    .build-head,
    .build-km {
        grid-column: 1 / -1;
        grid-row: auto;
    }

    .build-km {
        margin-top: 40px;
    }

    .inspect {
        grid-row: auto;
    }

    .plate {
        aspect-ratio: 3 / 2;
    }

    .plate-view img {
        object-position: 30% 50%;
    }

    .inspect {
        --x1: 0.67;
        --y1: 0.56;
        --x2: 0.81;
        --y2: 0.2;
        --x3: 0.14;
        --y3: 0.42;
    }

    .legend {
        grid-template-columns: minmax(0, 1fr);
        row-gap: 18px;
        margin-top: 28px;
    }

    .aerial {
        width: min(100%, 280px);
        margin-top: -90px;
    }

    .s-inside {
        grid-template-columns: minmax(0, 1fr);
        row-gap: 36px;
    }

    .inside-side,
    .stops {
        grid-column: 1 / -1;
    }

    .inside-side {
        position: static;
    }

    /* the row of niches */
    .vitrines,
    .piece-more .vitrines {
        height: auto;
        min-height: 0;
        margin: 0 calc(var(--margin) * -1);
        padding: 0 var(--margin) 12px;
        overflow-x: auto;
        scroll-snap-type: x mandatory;
    }

    .vitrine {
        flex: 0 0 min(62vw, 300px);
        height: min(68vh, 520px);
        scroll-snap-align: center;
    }

    .vitrine:hover,
    .vitrine:focus-visible {
        flex-grow: 0;
    }

    .vitrine small {
        max-height: none;
        margin-top: 8px;
        opacity: 1;
    }

    .ages {
        grid-template-columns: minmax(0, 1fr);
        row-gap: 22px;
        padding: 0 0 0 40px;
        border-top: 0;
        border-left: 1px solid var(--line);
    }

    .ages li::before {
        left: -45px;
        top: 0.4em;
    }

    .ages .is-here::before {
        left: -52px;
        top: 0.15em;
    }

    .visit-hours,
    .visit-tickets,
    .visit-way {
        grid-column: 1 / -1;
    }

    .visit-way {
        grid-template-columns: minmax(0, 1fr);
    }

    /* the artifacts page */
    .layout {
        grid-template-columns: minmax(0, 1fr);
        row-gap: 28px;
        padding-top: 24px;
    }

    .pick-list,
    .stage,
    .info {
        grid-column: 1 / -1;
    }

    .pick-list {
        display: flex;
        flex-wrap: wrap;
        gap: 8px;
    }

    .pick-list label {
        padding: 10px 16px;
        border: 1px solid var(--line);
        border-radius: 999px;
        font-size: 20px;
    }

    .pick-list label span,
    .pick-list label::before {
        display: none;
    }

    .pick-list .vr-all {
        margin: 0;
        padding: 10px 16px;
        font-size: 18px;
    }

    #p1:checked ~ .layout label[for="p1"],
    #p2:checked ~ .layout label[for="p2"],
    #p3:checked ~ .layout label[for="p3"],
    #p4:checked ~ .layout label[for="p4"],
    #p5:checked ~ .layout label[for="p5"] {
        padding-left: 16px;
        border-color: var(--gold);
        background: var(--gold);
        color: var(--ink);
    }

    .stage {
        --bn-size: clamp(48px, 11vw, 96px);
        width: min(100%, 520px);
        margin-bottom: calc(var(--bn-size) * 1.9 + 44px);
    }

    .bn {
        left: 0;
        top: 100%;
        bottom: auto;
        width: max-content;
        max-width: 100%;
        margin-top: 14px;
        font-size: var(--bn-size);
        line-height: 0.95;
    }

    .info {
        max-width: 520px;
        justify-self: center;
        width: 100%;
    }

    .cat-head .h-l,
    .cat-head .lede {
        grid-column: 1 / -1;
    }

    .cat-head .lede {
        margin-top: 18px;
    }

    .cat-cols {
        display: none;
    }

    .cat-row {
        grid-template-columns: 84px minmax(0, 1fr);
        row-gap: 4px;
    }

    .cat-row > span:nth-child(3),
    .cat-row > span:nth-child(4) {
        grid-column: 2;
        font-size: 15px;
        color: var(--soft);
    }

    .cat-thumb {
        grid-row: 1 / 3;
    }

    .cat-open {
        display: none;
    }

    .step-list {
        grid-template-columns: minmax(0, 1fr);
        row-gap: 28px;
    }

    /* the artifact pages */
    .piece-hero {
        min-height: 0;
        row-gap: 30px;
    }

    .piece-copy,
    .piece-look {
        grid-column: 1 / -1;
    }

    .piece-stage {
        grid-column: 2 / 12;
        grid-row: 2;
        margin: 4% 0;
    }

    .piece-look {
        grid-row: 3;
    }

    .showcase::after,
    .piece-hero::after {
        top: auto;
        height: 110px;
    }

    .showcase,
    .piece-hero {
        padding-bottom: 130px;
    }

    .ar-button {
        left: auto;
        right: 14px;
        bottom: 14px;
        transform: none;
    }

    .piece-stage model-viewer {
        -webkit-mask-image: radial-gradient(closest-side, #000 76%, transparent 100%), linear-gradient(#000, #000);
        mask-image: radial-gradient(closest-side, #000 76%, transparent 100%), linear-gradient(#000, #000);
        -webkit-mask-size: 100% 100%, 190px 56px;
        mask-size: 100% 100%, 190px 56px;
        -webkit-mask-position: 0 0, 100% 100%;
        mask-position: 0 0, 100% 100%;
        -webkit-mask-repeat: no-repeat;
        mask-repeat: no-repeat;
    }

    /* the model in its rings */
    .piece-stage model-viewer {
        left: -4%;
        top: -4%;
        width: 108%;
        height: 108%;
    }

    .story-text,
    .story-spec {
        grid-column: 1 / -1;
    }

    .foot-brand {
        grid-column: 1 / -1;
    }

    .foot-col {
        grid-column: span 6;
    }

    /* the visit page */
    .v-copy,
    .v-now {
        grid-column: 1 / -1;
    }

    .v-now {
        margin-top: 36px;
    }

    .day {
        --label: 112px;
    }

    .v-tickets .visit-tickets,
    .v-facts,
    .v-way-text,
    .v-photo {
        grid-column: 1 / -1;
    }

    .v-facts {
        margin-top: 12px;
    }

    .v-photo {
        margin-top: 44px;
    }

    .begin-list {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        row-gap: 40px;
    }

    .begin-list li:nth-child(even) {
        margin-top: 0;
    }

    /* the end page */
    .e-head h1,
    .e-head .lede {
        grid-column: 1 / -1;
    }

    .e-head h1 {
        font-size: clamp(48px, 11vw, 120px);
    }

    .e-head .lede {
        max-width: 34ch;
        margin-top: 22px;
    }

    .e-line {
        grid-template-columns: repeat(6, minmax(0, 1fr));
        row-gap: 40px;
    }

    .e-piece {
        grid-column: span 2;
    }

    .e-piece:nth-child(4) {
        grid-column: 2 / span 2;
    }

    .e-piece:nth-child(5) {
        grid-column: 4 / span 2;
    }

    .e-brief-text,
    .e-facts,
    .e-exit-text {
        grid-column: 1 / -1;
    }

    .e-exit {
        min-height: 0;
    }

    .e-exit-text {
        padding-bottom: 40px;
    }

    .e-gate {
        grid-column: 1 / -1;
        justify-self: center;
        width: min(100%, 560px);
    }

    /* AR */
    .info-actions {
        position: relative;
    }

    .ar-wrap.is-right {
        position: static;
    }

    .ar-wrap.is-right .ar-pop {
        right: auto;
        left: 0;
    }
}


/* ---------- Phone ---------- */

@media (max-width: 700px) {
    body {
        font-size: 16px;
    }

    .brand span,
    .top .btn {
        display: none;
    }

    .foot .brand span {
        display: block;
    }

    .stage-one {
        min-height: 740px;
    }

    .hero .hero-pin {
        min-height: 740px;
    }

    .hero {
        --fs: 21vw;
        --gw: 170vw;
    }

    .stage-one {
        padding-top: calc(var(--top) + 26px);
    }

    .hero-stats li:nth-child(3) {
        display: none;
    }

    .museum-photo {
        grid-column: 1 / -1;
        margin-right: 8%;
    }

    .museum-photo .wall-label {
        left: 0;
    }

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

    .plate {
        aspect-ratio: 4 / 3;
    }

    .plate-view img {
        object-position: 25% 50%;
    }

    .inspect {
        --x1: 0.75;
        --y1: 0.56;
        --x2: 0.91;
        --y2: 0.2;
        --x3: 0.16;
        --y3: 0.42;
    }

    .spot {
        width: 28px;
        height: 28px;
        font-size: 12px;
    }

    .plate-hint {
        left: 16px;
        bottom: 16px;
    }

    .pull {
        right: 16px;
        top: 16px;
    }

    .legend {
        grid-column: 1 / -1;
        grid-row: auto;
    }

    .legend b {
        font-size: 56px;
    }

    .aerial {
        grid-column: 1 / -1;
        grid-row: auto;
        justify-self: center;
        width: min(78vw, 320px);
        margin-top: 36px;
    }

    .stop:nth-child(odd),
    .stop:nth-child(even) {
        margin-right: 0;
        margin-left: 0;
    }

    .stop:nth-child(even)::before {
        left: calc(-1 * clamp(22px, 3vw, 44px) - 5px);
    }

    .vitrine {
        flex-basis: 74vw;
    }

    .hours {
        font-size: 14px;
    }

    .hours th,
    .hours td {
        padding: 12px 6px 12px 0;
    }

    .showcase {
        min-height: 0;
    }

    .stage {
        --bn-size: clamp(44px, 12vw, 64px);
        width: min(100%, 360px);
    }

    .cat-row {
        grid-template-columns: 64px minmax(0, 1fr);
    }

    .cat-thumb {
        width: 60px;
    }

    .closing .btn + .btn {
        margin: 12px 0 0;
    }

    .piece-stage {
        grid-column: 1 / -1;
    }

    .piece-note {
        min-height: 5em;
    }

    .foot-col {
        grid-column: 1 / -1;
    }

    /* the visit page */
    .v-hero h1 {
        font-size: 22vw;
    }

    .day {
        --label: 0px;
    }

    .lane {
        grid-template-columns: minmax(0, 1fr);
        row-gap: 8px;
    }

    .lane-name {
        padding-right: 0;
        font-size: 14px;
    }

    .begin-list {
        gap: 32px 14px;
    }

    .begin-list h3 {
        font-size: 24px;
    }

    .begin-list p {
        font-size: 14px;
    }

    /* the end page */
    .e-head h1 {
        font-size: 14vw;
    }

    .e-line {
        grid-template-columns: minmax(0, 1fr);
        row-gap: 28px;
    }

    .e-piece,
    .e-piece:nth-child(4),
    .e-piece:nth-child(5) {
        display: grid;
        grid-column: auto;
        grid-template-columns: 38% minmax(0, 1fr);
        column-gap: 20px;
        align-items: center;
    }

    .e-label {
        padding-top: 0;
    }

    .e-label h2 {
        font-size: 28px;
    }

    .top .end-home {
        display: inline-flex;
        padding: 11px 18px;
    }

    /* AR */
    .ar-pop {
        grid-template-columns: 100px minmax(0, 1fr);
        gap: 14px;
    }

    .ar-text b {
        font-size: 24px;
    }
}


/* ---------- Short screens (a laptop that is not very tall) ---------- */

@media (max-height: 820px) and (min-width: 1001px) {
    .hero-ar {
        display: none;
    }

    .hero {
        --gw: min(54vw, 98vh);
    }
}

@media (max-height: 740px) and (min-width: 1001px) {
    .hero-sub {
        display: none;
    }
}


/* ---------- Less motion ---------- */

@media (prefers-reduced-motion: reduce) {
    html {
        scroll-behavior: auto;
    }

    *,
    *::before,
    *::after {
        animation: none !important;
        transition-duration: 0.01ms !important;
        transition-delay: 0s !important;
    }
}