/* The time machine.
 *
 * Hand-written, like _ours.css, _place.css and _folkcard.css.
 *
 * Jack, 27 September 2026: "maybe it could be almost like a time machine - so the eras
 * are what they see initially then when they click they get transported to that era
 * and it tells them the story of it."
 *
 * One screen and one decision. The film of whichever age you are on plays behind, the
 * year stands at the size of a headline, and the eight ages are a dial down the middle
 * of it. Choosing one winds the year back from now to then and the age opens.
 *
 * Nothing scrolls. There is no list, nothing is counted, and the page holds eight
 * doors and a number.
 */

.hs-machine {
    --face: "Lora", Georgia, serif;
    --sans: "Jost", system-ui, sans-serif;
    --cream: #F1EDE4;
    --ox-lit: #682114;
    --night: #2B301D;

    position: relative;
    min-height: 100svh;
    margin-top: calc(-1 * var(--bar, 76px));
    display: grid;
    place-items: center;
    overflow: hidden;
    background: var(--night);
    color: var(--cream);
    padding: calc(var(--bar, 76px) + 3.5vh) clamp(20px, 5vw, 56px) 5vh;
}

.hs-machine img,
.hs-machine video { display: block; max-width: 100%; }

/* ---------------------------------------------------------------- the films */

/* Every age's still is mounted, so moving along the dial changes what is behind you
   with no wait at all; only the one being looked at carries a playing film. */
.hs-machine .mb { position: absolute; inset: 0; z-index: 0; }

.hs-machine .mb-f {
    position: absolute;
    inset: 0;
    opacity: 0;
    transition: opacity .7s ease;
}

.hs-machine .mb-f.on { opacity: 1; }

.hs-machine .mb-f img,
.hs-machine .mb-f video {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.hs-machine .mb-f video { z-index: 1; }

.hs-machine .mb-scrim {
    position: absolute;
    inset: 0;
    z-index: 1;
    pointer-events: none;
    background:
        radial-gradient(ellipse 74% 70% at 50% 50%, rgba(8, 8, 7, .74) 0%, rgba(8, 8, 7, .46) 56%, rgba(8, 8, 7, .3) 100%),
        linear-gradient(180deg, rgba(8, 8, 7, .5) 0%, rgba(8, 8, 7, 0) 30%, rgba(8, 8, 7, 0) 62%, rgba(8, 8, 7, .62) 100%);
}

/* ---------------------------------------------------------------- the panel */

.hs-machine .mw {
    position: relative;
    z-index: 3;
    width: 100%;
    max-width: 46rem;
    text-align: center;
    transition: opacity .5s ease, transform .5s ease;
}

.hs-machine .mh-k {
    font: 500 11px/1 var(--sans);
    letter-spacing: .34em;
    text-transform: uppercase;
    color: var(--ox-lit);
    margin: 0 0 12px;
}

.hs-machine .mh-say {
    margin: 0 auto;
    max-width: 26rem;
    font: 400 18px/1.55 var(--face);
    color: rgba(241, 237, 228, .84);
}

/* ---- the year: the dial's own read-out ---- */

.hs-machine .my {
    margin: clamp(12px, 2.2vh, 28px) 0 clamp(14px, 2.6vh, 30px);
    display: flex;
    align-items: baseline;
    justify-content: center;
    gap: 12px;
}

.hs-machine .my s {
    text-decoration: none;
    font: 500 12px/1 var(--sans);
    letter-spacing: .28em;
    color: rgba(241, 237, 228, .5);
}

.hs-machine .my b {
    /* min() against the window's height as well as its width: the year is the
       biggest thing here and the first thing that has to give on a short screen. */
    font: 200 min(min(clamp(64px, 12vw, 150px), 17vh), 28px + (min(clamp(64px, 12vw, 150px), 17vh) - 28px) * 0.6)/.82 var(--sans);
    letter-spacing: -.055em;
    color: var(--cream);
    font-variant-numeric: tabular-nums;
    /* the digits must not jump about as the number winds */
    font-feature-settings: "tnum" 1;
}

/* ---- the eight doors ---- */

.hs-machine .ml {
    list-style: none;
    margin: 0 auto;
    padding: 0;
    max-width: 34rem;
    border-top: 1px solid rgba(241, 237, 228, .18);
}

.hs-machine .ml li { border-bottom: 1px solid rgba(241, 237, 228, .18); }

.hs-machine .ml button {
    width: 100%;
    display: grid;
    grid-template-columns: 7.5rem 1fr;
    gap: 18px;
    align-items: baseline;
    padding: clamp(8px, 1.15vh, 14px) 10px;
    border: 0;
    background: none;
    color: inherit;
    cursor: pointer;
    text-align: left;
    transition: background .2s ease, padding .2s ease;
}

.hs-machine .ml-y {
    font: 500 12px/1.4 var(--sans);
    letter-spacing: .14em;
    color: rgba(241, 237, 228, .5);
    font-variant-numeric: tabular-nums;
    transition: color .2s ease;
}

.hs-machine .ml-n {
    font: 500 min(clamp(19px, 2.1vw, 24px), 28px + (clamp(19px, 2.1vw, 24px) - 28px) * 0.6)/1.2 var(--face);
    transition: color .2s ease;
}

.hs-machine .ml li.on button { background: rgba(241, 237, 228, .09); padding-left: 18px; }
.hs-machine .ml li.on .ml-y { color: var(--ox-lit); }
.hs-machine .ml li.on .ml-n { color: #fff; }

.hs-machine .ml button:focus-visible { outline: 2px solid var(--ox-lit); outline-offset: -2px; }

/* the one line about the age you are on */
.hs-machine .mo {
    margin: clamp(14px, 2.4vh, 26px) auto 0;
    max-width: 30rem;
    min-height: 3.2em;
    font: 400 17px/1.6 var(--face);
    color: rgba(241, 237, 228, .8);
}

/* ---------------------------------------------------------------- travelling */

/* While it is going: the doors get out of the way and the year is the only thing left,
   which is the whole of the effect. */
.hs-machine.is-going .mw { opacity: 0; transform: scale(.98); pointer-events: none; }

.hs-machine .mg {
    position: absolute;
    inset: 0;
    z-index: 4;
    display: grid;
    place-content: center;
    justify-items: center;
    gap: 10px;
    text-align: center;
    animation: mg-in .5s ease both;
}

.hs-machine .mg-k {
    margin: 0;
    font: 500 11px/1 var(--sans);
    letter-spacing: .34em;
    text-transform: uppercase;
    color: var(--ox-lit);
}

.hs-machine .mg-n {
    margin: 0;
    font: 500 min(clamp(26px, 3.4vw, 44px), 28px + (clamp(26px, 3.4vw, 44px) - 28px) * 0.6)/1.1 var(--face);
    color: var(--cream);
}

@keyframes mg-in {
    from { opacity: 0; transform: translateY(14px); }
    to   { opacity: 1; transform: none; }
}

/* The year keeps going while everything else leaves, so it is drawn again on top. */
.hs-machine.is-going .my {
    position: absolute;
    inset: auto 0 auto 0;
    top: 50%;
    z-index: 5;
    transform: translateY(-50%);
    opacity: 1;
    margin: 0;
}

.hs-machine.is-going .mg { transform: translateY(24vh); }

/* ------------------------------------------------------------------ narrower */

@media (max-width: 720px) {
    .hs-machine .ml button { grid-template-columns: 1fr; gap: 2px; padding: 11px 10px; }
    .hs-machine .my b { font-size: min(clamp(60px, 22vw, 110px), 28px + (clamp(60px, 22vw, 110px) - 28px) * 0.6); }
    .hs-machine .mo { min-height: 0; }
}

@media (prefers-reduced-motion: reduce) {
    .hs-machine .mb-f,
    .hs-machine .mw,
    .hs-machine .ml button { transition: none; }
    .hs-machine .mg { animation: none; }
}

/* The machine stands on a dark photograph: its kicker and the lit age took the dark ox (#682114) and could not be
   read. The light ox here, as the sheet had it before 12 October (the site walk, 14 October 2026). */
.hs-machine{--ox-lit:#f04e26}