/* Homepage: "The Spread". Readings dealt as cards on Empress-green cloth. */

@font-face {
    font-family: 'Gloock';
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url('/fonts/Gloock-400-normal-latin.woff2') format('woff2');
}

@font-face {
    font-family: 'Sorts Mill Goudy';
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url('/fonts/SortsMillGoudy-400-normal-latin.woff2') format('woff2');
}

@font-face {
    font-family: 'Sorts Mill Goudy';
    font-style: italic;
    font-weight: 400;
    font-display: swap;
    src: url('/fonts/SortsMillGoudy-400-italic-latin.woff2') format('woff2');
}

/* Moon position for the wordmark eclipse, animatable because it is registered. */
@property --mx {
    syntax: '<percentage>';
    inherits: true;
    initial-value: 140%;
}

@property --my {
    syntax: '<percentage>';
    inherits: true;
    initial-value: 90%;
}

:root {
    --cloth: #0f3e2d;
    --cloth-lit: #18533e;
    --cloth-deep: #0a271d;
    --weave: url('/images/home/cloth-weave.png');
    --gold: #e9b73a;
    --gold-dim: #b8943a;
    --on-cloth: #f1ead6;
    --on-cloth-soft: #b9cdb9;
    --stock: #f1ead6;
    --stock-shade: #e4dbc1;
    --ink: #14110d;
    --ink-soft: #4a4336;
    --red: #b8322a;
    --red-deep: #96261f;

    --display: 'Gloock', 'Iowan Old Style', 'Palatino Linotype', Georgia, serif;
    --text: 'Sorts Mill Goudy', 'Iowan Old Style', 'Palatino Linotype', Georgia, serif;

    --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
    --cw: min(60vw, 244px);
    --fan-turn: 4deg;
    --fan-drop: 0.5rem;
    --gutter: clamp(1.25rem, 5vw, 4rem);
    --measure: 34rem;
}

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

html {
    -webkit-text-size-adjust: 100%;
    scrollbar-color: var(--gold-dim) var(--cloth-deep);
    scrollbar-width: thin;
}

body {
    margin: 0;
    background: var(--weave) var(--cloth);
    color: var(--on-cloth);
    font-family: var(--text);
    font-size: 1.1875rem;
    line-height: 1.55;
    overflow-x: clip;
    caret-color: var(--gold);
}

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

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

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

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

h1,
h2,
h3,
p,
ul,
ol,
figure {
    margin: 0;
}

ul,
ol {
    padding: 0;
    list-style: none;
}

h2 {
    font-family: var(--display);
    font-weight: 400;
    font-size: clamp(2rem, 6.4vw, 3.25rem);
    line-height: 1.04;
    letter-spacing: -0.01em;
    text-wrap: balance;
    color: var(--gold);
}

.skip {
    position: absolute;
    left: 1rem;
    top: -4rem;
    z-index: 10;
    padding: 0.5rem 0.9rem;
    background: var(--stock);
    color: var(--ink);
}

.skip:focus {
    top: 1rem;
}

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

.top {
    padding: 0.5rem var(--gutter) 0;
}

.top nav {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 0.35rem clamp(0.85rem, 4vw, 2.4rem);
}

@media (min-width: 40rem) {
    .top a,
    .foot__links a {
        font-size: 0.8125rem;
        letter-spacing: 0.16em;
    }
}

.top a,
.foot__links a {
    font-size: 0.75rem;
    letter-spacing: 0.13em;
    text-transform: uppercase;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    min-height: 2.75rem;
    color: var(--on-cloth-soft);
    transition: color 0.2s ease;
}

.top a:hover,
.foot__links a:hover {
    color: var(--gold);
}

/* ---------- The table: wordmark and spread ---------- */

.table {
    position: relative;
    padding: clamp(1rem, 3.5vh, 2.5rem) 0 clamp(2.5rem, 7vh, 4.5rem);
    text-align: center;
    overflow-x: clip;
    background: var(--weave), radial-gradient(120% 60% at 50% 55%, var(--cloth-lit) 0%, rgba(24, 83, 62, 0) 70%);
}

.wordmark {
    --mr: 0.92em;
    position: relative;
    display: inline-block;
    font-family: var(--display);
    font-weight: 400;
    font-size: clamp(3.3rem, 15.5vw, 6rem);
    line-height: 0.94;
    letter-spacing: 0.005em;
    text-transform: uppercase;
    color: var(--gold);
}

.wordmark__shade,
.wordmark__moon {
    position: absolute;
    pointer-events: none;
}

/* The same letters, eclipsed: only shown inside the moon's disc. */
.wordmark__shade {
    inset: 0;
    color: var(--cloth-deep);
    -webkit-text-stroke: 1px var(--gold-dim);
    clip-path: circle(var(--mr) at var(--mx) var(--my));
}

.wordmark__moon {
    left: var(--mx);
    top: var(--my);
    width: calc(var(--mr) * 2);
    height: calc(var(--mr) * 2);
    translate: -50% -50%;
    border-radius: 50%;
    background: rgba(5, 24, 17, 0.55);
    border: 1px solid rgba(233, 183, 58, 0.3);
    opacity: 0;
}

.dealing .wordmark {
    animation: transit 2.8s cubic-bezier(0.5, 0.05, 0.25, 1) 0.2s both;
}

.dealing .wordmark__moon {
    animation: moon-fade 2.8s linear 0.2s both;
}

@keyframes transit {
    from {
        --mx: -22%;
        --my: 8%;
    }

    to {
        --mx: 124%;
        --my: 92%;
    }
}

@keyframes moon-fade {
    0%,
    100% {
        opacity: 0;
    }

    14%,
    84% {
        opacity: 1;
    }
}

@media (min-width: 62rem) {
    /* On a wide table the cards overlap like a hand-fanned spread, so seven read across. */
    :root {
        --cw: 228px;
        --fan-turn: 2.6deg;
        --fan-drop: 0.4rem;
        --fan-room: 5.2rem;
    }

    .spread__track {
        gap: 0;
    }

    .card + .card {
        margin-left: -2.9rem;
    }

    .spread__bar {
        margin-top: -3.5rem;
    }

    .wordmark__br {
        display: none;
    }

    .wordmark {
        --mr: 0.78em;
    }

    @keyframes transit {
        from {
            --mx: -12%;
            --my: 20%;
        }

        to {
            --mx: 112%;
            --my: 80%;
        }
    }
}

.lede {
    max-width: 24rem;
    margin: clamp(0.7rem, 2vh, 1.2rem) auto 0;
    padding: 0 var(--gutter);
    font-size: clamp(1.1875rem, 2.4vw, 1.4rem);
    line-height: 1.35;
    text-wrap: balance;
}

@media (min-width: 40rem) {
    .lede {
        max-width: none;
    }
}

/* ---------- The spread ---------- */

.spread {
    position: relative;
    margin-top: clamp(0.4rem, 1.5vh, 1rem);
}

.spread__track {
    position: relative;
    display: flex;
    gap: clamp(0.9rem, 2.2vw, 1.5rem);
    padding: 2.2rem calc(50% - var(--cw) / 2) var(--fan-room, 3.4rem);
    overflow-x: auto;
    overscroll-behavior-x: contain;
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
    cursor: grab;
}

.spread__track::-webkit-scrollbar {
    display: none;
}

.spread__track.is-dragging {
    cursor: grabbing;
    scroll-snap-type: none;
}

.card {
    --d: 0;
    --ad: 0;
    flex: none;
    width: var(--cw);
    scroll-snap-align: center;
    transform-origin: 50% 130%;
    transform: translateY(calc(var(--ad) * var(--ad) * var(--fan-drop))) rotate(calc(var(--d) * var(--fan-turn)));
}

.card__link {
    display: block;
    perspective: 60rem;
    color: var(--ink);
    text-decoration: none;
    border-radius: 0.7rem;
    transition: transform 0.45s var(--ease-out);
    -webkit-user-drag: none;
    user-select: none;
}

.card.is-center .card__link {
    transform: translateY(-0.6rem) scale(1.035);
}

.card__flip {
    position: relative;
    display: block;
    aspect-ratio: 5 / 7;
    transform-style: preserve-3d;
}

.card__face,
.card__back {
    position: absolute;
    inset: 0;
    border-radius: 0.7rem;
    backface-visibility: hidden;
    box-shadow: 0 1px 0 rgba(0, 0, 0, 0.3), 0 1.1rem 1.5rem -0.6rem rgba(3, 12, 9, 0.7);
    transition: box-shadow 0.45s var(--ease-out);
}

.card.is-center .card__face {
    box-shadow: 0 1px 0 rgba(0, 0, 0, 0.3), 0 2rem 2.2rem -0.9rem rgba(3, 12, 9, 0.8);
}

.card__face {
    display: flex;
    flex-direction: column;
    padding: 0.55rem 0.7rem 0.6rem;
    background: var(--stock);
    text-align: center;
}

/* Printed inner rule. */
.card__face::after {
    content: '';
    position: absolute;
    inset: 0.3rem;
    border: 1px solid var(--ink);
    border-radius: 0.45rem;
    pointer-events: none;
}

.card__num {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.15rem 0.35rem 0.4rem;
    font-family: var(--display);
    font-size: 0.875rem;
    line-height: 1;
    font-variant-numeric: lining-nums;
}

.card__num::before,
.card__num::after {
    content: '';
    flex: 1;
    height: 1px;
    background: var(--ink);
}

.card__art {
    display: block;
    margin: 0 0.35rem;
    aspect-ratio: 4 / 3;
    border: 1px solid var(--ink);
    background: var(--cloth-deep);
    overflow: hidden;
}

.card__art img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    -webkit-user-drag: none;
}

.card__title {
    display: flex;
    flex: 1;
    align-items: center;
    justify-content: center;
    margin: 0.5rem 0.35rem 0;
    padding: 0.1rem 0.15rem;
    border: 12px solid transparent;
    border-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 60 60' fill='none' stroke='%2314110d'%3E%3Cpath stroke-width='1.7' d='M13 1.5H47A11.5 11.5 0 0 0 58.5 13V47A11.5 11.5 0 0 0 47 58.5H13A11.5 11.5 0 0 0 1.5 47V13A11.5 11.5 0 0 0 13 1.5Z'/%3E%3Cpath stroke-width='.9' d='M15 6.5H45A8.5 8.5 0 0 0 53.5 15V45A8.5 8.5 0 0 0 45 53.5H15A8.5 8.5 0 0 0 6.5 45V15A8.5 8.5 0 0 0 15 6.5Z'/%3E%3Cg fill='%2314110d' stroke='none'%3E%3Ccircle cx='4.6' cy='4.6' r='1.9'/%3E%3Ccircle cx='55.4' cy='4.6' r='1.9'/%3E%3Ccircle cx='4.6' cy='55.4' r='1.9'/%3E%3Ccircle cx='55.4' cy='55.4' r='1.9'/%3E%3C/g%3E%3C/svg%3E") 20 / 12px stretch;
    font-family: var(--display);
    font-size: clamp(0.9rem, 3.9vw, 1rem);
    line-height: 1.1;
    letter-spacing: 0.055em;
    text-transform: uppercase;
    text-wrap: balance;
}

.card__price {
    padding: 0.3rem 0 0.2rem;
    font-size: 0.9375rem;
    font-style: italic;
    line-height: 1.2;
    color: var(--ink-soft);
    font-variant-numeric: lining-nums;
}

/* Card back: gold lattice on dark cloth with an eclipse at the centre. */
.card__back,
.draw__card {
    background-color: var(--cloth-deep);
    background-image:
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 64'%3E%3Ccircle cx='32' cy='32' r='20' fill='%230c231c' stroke='%23e9b73a' stroke-width='1.5'/%3E%3Ccircle cx='32' cy='32' r='12.5' fill='none' stroke='%23e9b73a' stroke-width='1.5'/%3E%3Ccircle cx='36.5' cy='29.5' r='11' fill='%230c231c'/%3E%3C/svg%3E"),
        repeating-linear-gradient(45deg, rgba(233, 183, 58, 0.32) 0 1px, transparent 1px 0.7rem),
        repeating-linear-gradient(-45deg, rgba(233, 183, 58, 0.32) 0 1px, transparent 1px 0.7rem);
    background-size: 42% auto, auto, auto;
    background-position: center, center, center;
    background-repeat: no-repeat, repeat, repeat;
    border: 0.3rem solid var(--cloth-deep);
    outline: 1px solid var(--gold-dim);
    outline-offset: -0.5rem;
}

.card__back {
    transform: rotateY(180deg);
}

@media (hover: hover) {
    .card:hover {
        z-index: 30 !important;
    }

    .card__link:hover {
        transform: translateY(-0.7rem);
    }

    .card.is-center .card__link:hover {
        transform: translateY(-1.1rem) scale(1.035);
    }
}

/* The deal: cards arrive from the deck face down, then turn over. */
.dealing .card--deal .card__flip {
    animation: deal 0.95s var(--ease-out) calc(0.25s + var(--k, 0) * 0.11s) backwards;
}

@keyframes deal {
    from {
        transform: translate3d(75vw, 1.5rem, 0) rotate(18deg) rotateY(180deg);
    }

    55% {
        transform: translate3d(0, 0, 0) rotate(0deg) rotateY(180deg);
    }

    to {
        transform: translate3d(0, 0, 0) rotate(0deg) rotateY(0deg);
    }
}

.spread__bar {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: clamp(0.8rem, 3vw, 1.4rem);
    margin-top: -1.9rem;
    padding: 0 var(--gutter);
}

.spread__nav {
    display: grid;
    flex: none;
    width: 2.75rem;
    height: 2.75rem;
    place-items: center;
    padding: 0;
    border: 1px solid var(--gold-dim);
    border-radius: 50%;
    background: var(--cloth-deep);
    color: var(--gold);
    cursor: pointer;
    transition: background-color 0.2s ease, color 0.2s ease, opacity 0.2s ease;
}

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

.spread__nav[disabled] {
    opacity: 0.35;
    cursor: default;
    background: var(--cloth-deep);
    color: var(--gold);
}

.spread__hint {
    font-size: 1rem;
    font-style: italic;
    line-height: 1.25;
    color: var(--on-cloth-soft);
}

.table__more {
    margin-top: 1.3rem;
}

/* The one action. */
.action {
    display: inline-block;
    padding: 0.85rem 1.7rem 0.8rem;
    background: var(--red);
    color: var(--stock);
    font-family: var(--display);
    font-size: 1.0625rem;
    letter-spacing: 0.04em;
    line-height: 1.1;
    text-decoration: none;
    border-radius: 2px;
    box-shadow: inset 0 0 0 1px var(--red), inset 0 0 0 2px rgba(241, 234, 214, 0.55), 0 0.6rem 1rem -0.5rem rgba(3, 12, 9, 0.8);
    transition: background-color 0.2s ease, transform 0.3s var(--ease-out);
}

.action:hover {
    background: var(--red-deep);
    transform: translateY(-2px);
}

.action:active {
    transform: translateY(0);
}

/* ---------- One reading singled out ---------- */

.feature {
    display: grid;
    gap: clamp(2rem, 6vw, 4rem);
    justify-items: center;
    max-width: 62rem;
    margin: 0 auto;
    padding: clamp(3rem, 8vw, 6rem) var(--gutter) 0;
}

.feature__card {
    width: min(64vw, 260px);
    rotate: -3deg;
    transform: none;
}

.feature__words {
    justify-self: stretch;
}

.feature__words h2 {
    margin-bottom: 1.2rem;
}

.feature__words p {
    max-width: var(--measure);
}

.feature__words p + p {
    margin-top: 1rem;
}

.feature__links {
    display: grid;
    gap: 0.5rem;
    margin-top: 1.6rem;
}

.feature__links a {
    font-family: var(--display);
    font-size: 1.1875rem;
    line-height: 1.3;
    color: var(--gold);
}

.feature__links a:hover {
    color: var(--on-cloth);
}

@media (min-width: 52rem) {
    .feature {
        grid-template-columns: auto minmax(0, 1fr);
        align-items: center;
        justify-items: start;
    }
}

/* ---------- What arrives ---------- */

.letter {
    display: grid;
    gap: clamp(2.5rem, 6vw, 4rem);
    padding: clamp(4rem, 10vw, 7.5rem) var(--gutter) clamp(4.5rem, 11vw, 8rem);
    max-width: 78rem;
    margin: 0 auto;
}

.letter__words h2 {
    margin-bottom: 1.4rem;
}

.letter__words p {
    max-width: var(--measure);
}

.letter__words p + p {
    margin-top: 1rem;
}

.letter__words .golden {
    margin-top: 1.9rem;
    font-family: var(--display);
    font-size: clamp(1.4rem, 4.2vw, 1.75rem);
    line-height: 1.15;
    color: var(--gold);
}

.sheets {
    position: relative;
    max-width: 30rem;
    margin: 0 auto;
}

.sheet {
    position: relative;
    background: var(--stock);
    color: var(--ink);
    box-shadow: 0 1px 0 rgba(0, 0, 0, 0.3), 0 1.4rem 2rem -0.9rem rgba(3, 12, 9, 0.75);
}

.sheet--cover {
    width: 58%;
    margin: 0 0 0 3%;
    rotate: -3.5deg;
    color: var(--stock);
    background: var(--ink);
}

.sheet--cover img {
    width: 100%;
    height: auto;
}

.sheet__plate {
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    padding: 1rem 0.8rem 2.4rem;
    text-align: center;
    background: linear-gradient(to bottom, rgba(8, 7, 6, 0.88) 30%, rgba(8, 7, 6, 0));
}

.sheet__plate strong {
    display: block;
    font-family: var(--display);
    font-weight: 400;
    font-size: clamp(1.15rem, 4.6vw, 1.4rem);
    line-height: 1;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--gold);
}

.sheet__plate span {
    display: block;
    margin-top: 0.35rem;
    font-size: 0.8125rem;
    font-style: italic;
    line-height: 1.25;
}

.sheet--letter {
    z-index: 2;
    width: 90%;
    margin: -24% 0 0 auto;
    padding: clamp(1.4rem, 6vw, 2.2rem) clamp(1.3rem, 6vw, 2.1rem) clamp(1.6rem, 6vw, 2.4rem);
    font-size: 1.0625rem;
    line-height: 1.5;
}

.sheet--letter p + p {
    margin-top: 0.8em;
}

.sheet__sign {
    margin-top: 1.4em;
    font-style: italic;
}

.sheet--keep {
    z-index: 1;
    width: 74%;
    margin: -7% 0 0 2%;
    padding: 2.6rem 1.4rem 1.6rem;
    rotate: 2.5deg;
    background: var(--stock-shade);
    font-size: 0.9375rem;
    line-height: 1.4;
}

.sheet--keep h3 {
    font-family: var(--display);
    font-weight: 400;
    font-size: 1.2rem;
    line-height: 1.1;
    margin-bottom: 0.7rem;
}

.sheet--keep ol {
    counter-reset: keep;
    display: grid;
    gap: 0.45rem;
}

.sheet--keep li {
    counter-increment: keep;
    display: grid;
    grid-template-columns: 1.5rem 1fr;
}

.sheet--keep li::before {
    content: counter(keep, upper-roman);
    font-family: var(--display);
    font-size: 0.8125rem;
    line-height: 1.75;
}

.sheet--keep .sheet__say {
    margin-top: 0.9rem;
    padding-top: 0.8rem;
    border-top: 1px solid var(--ink);
    font-style: italic;
}

.sheets__note {
    margin-top: 2.2rem;
    text-align: center;
    font-size: 1rem;
    font-style: italic;
    color: var(--on-cloth-soft);
}

/* From tablet up the three sheets lie in a row, tucked slightly under the letter. */
@media (min-width: 56rem) {
    .sheets {
        display: grid;
        grid-template-columns: repeat(13, 1fr);
        align-items: center;
        max-width: 52rem;
    }

    .sheet--cover,
    .sheet--letter,
    .sheet--keep {
        grid-row: 1;
        width: auto;
        margin: 0;
    }

    .sheet--cover {
        grid-column: 1 / 5;
        margin-right: -9%;
        rotate: -5deg;
        translate: 0 -6%;
    }

    .sheet--letter {
        grid-column: 5 / 10;
        padding: 1.9rem 1.7rem 2.1rem;
        font-size: 0.9375rem;
    }

    .sheet--keep {
        grid-column: 10 / 14;
        margin-left: -9%;
        padding: 1.5rem 1.1rem 1.4rem 2rem;
        rotate: 4deg;
        translate: 0 8%;
        font-size: 0.875rem;
    }

    .sheet--keep h3 {
        font-size: 1.0625rem;
    }

    .sheets__note {
        grid-column: 1 / -1;
        grid-row: 2;
        margin-top: 3.4rem;
    }
}

@media (min-width: 82rem) {
    .letter {
        grid-template-columns: minmax(0, 1fr) minmax(0, 2fr);
        align-items: center;
        max-width: 86rem;
    }

    .sheets {
        max-width: none;
        margin: 0;
    }
}

/* ---------- The whole deck ---------- */

.deck {
    background: var(--weave) var(--cloth-deep);
    padding: clamp(4rem, 10vw, 7rem) var(--gutter);
}

.deck__inner {
    max-width: 74rem;
    margin: 0 auto;
}

.deck__intro {
    margin-top: 0.9rem;
    color: var(--on-cloth-soft);
}

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

.deck__families {
    margin-top: clamp(2rem, 5vw, 3.2rem);
    columns: 2;
    column-gap: 1.4rem;
    font-size: 1.0625rem;
}

.family {
    break-inside: avoid;
    padding-bottom: 1.9rem;
}

@media (min-width: 48rem) {
    .deck__families {
        columns: 21rem 3;
        column-gap: clamp(2rem, 5vw, 4rem);
        font-size: inherit;
    }

    .family {
        padding-bottom: 2.1rem;
    }
}

.family h3 {
    padding-bottom: 0.5rem;
    margin-bottom: 0.55rem;
    border-bottom: 1px solid rgba(233, 183, 58, 0.4);
    font-family: var(--display);
    font-weight: 400;
    font-size: 1.25rem;
    line-height: 1.15;
    color: var(--gold);
}

.family a {
    display: block;
    padding: 0.28rem 0;
    line-height: 1.3;
    text-decoration: none;
    transition: color 0.15s ease, transform 0.3s var(--ease-out);
}

.family a:hover {
    color: var(--gold);
    transform: translateX(0.4rem);
}

/* ---------- Angelique, journal ---------- */

.angelique {
    padding: clamp(4.5rem, 11vw, 8rem) var(--gutter);
}

.note {
    max-width: 38rem;
    margin: 0 auto;
    padding: clamp(1.8rem, 6vw, 3rem) clamp(1.5rem, 6vw, 3.2rem) clamp(2rem, 6vw, 3rem);
    rotate: -0.8deg;
    background: var(--stock);
    color: var(--ink);
    box-shadow: 0 1px 0 rgba(0, 0, 0, 0.3), 0 1.6rem 2.2rem -1rem rgba(3, 12, 9, 0.75);
}

.note h2 {
    margin-bottom: 1rem;
    color: var(--ink);
}

.note p + p {
    margin-top: 1rem;
}

.note a {
    color: var(--ink);
}

.note a:focus-visible,
#eeGdprNotice :focus-visible {
    outline-color: var(--ink);
}

.journal {
    padding: 0 var(--gutter) clamp(4.5rem, 11vw, 8rem);
    max-width: 50rem;
    margin: 0 auto;
}

.journal ul {
    margin-top: 1.5rem;
    border-top: 1px solid rgba(233, 183, 58, 0.4);
}

.journal li {
    padding: 1.1rem 0 1.2rem;
    border-bottom: 1px solid rgba(233, 183, 58, 0.4);
}

.journal li a {
    font-family: var(--display);
    font-size: 1.3rem;
    line-height: 1.3;
    text-decoration: none;
}

.journal li a:hover {
    color: var(--gold);
}

.journal li p {
    margin-top: 0.35rem;
    max-width: var(--measure);
    color: var(--on-cloth-soft);
}

.journal__more {
    margin-top: 1.3rem;
}

/* ---------- Close ---------- */

.close {
    padding: clamp(4rem, 10vw, 7rem) var(--gutter) clamp(4.5rem, 11vw, 7.5rem);
    text-align: center;
    background: var(--weave), radial-gradient(closest-side, var(--cloth-lit) 0%, rgba(24, 83, 62, 0) 100%);
}

.close h2 {
    max-width: 16em;
    margin: 0 auto;
}

.close__line {
    margin-top: 0.9rem;
}

.close__actions {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2.4rem;
    margin-top: 2.2rem;
}

.draw {
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    gap: 1rem;
    text-decoration: none;
    font-style: italic;
}

.draw__card {
    display: block;
    width: 6.5rem;
    aspect-ratio: 2 / 3;
    border-radius: 0.5rem;
    border-width: 0.22rem;
    outline-offset: -0.38rem;
    rotate: -6deg;
    box-shadow: 0 1px 0 rgba(0, 0, 0, 0.3), 0 1.1rem 1.5rem -0.6rem rgba(3, 12, 9, 0.75);
    transition: rotate 0.5s var(--ease-out), translate 0.5s var(--ease-out);
}

.draw:hover .draw__card {
    rotate: 0deg;
    translate: 0 -0.5rem;
}

.draw span:last-child {
    text-decoration: underline;
    text-decoration-thickness: 1px;
    text-underline-offset: 0.2em;
}

.close__etsy {
    margin-top: 2.6rem;
    font-size: 1rem;
    color: var(--on-cloth-soft);
}

/* ---------- Foot ---------- */

.foot {
    padding: 2.2rem var(--gutter) 2.6rem;
    border-top: 1px solid rgba(233, 183, 58, 0.4);
    background: var(--weave) var(--cloth-deep);
    text-align: center;
}

.foot__links {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 0.3rem 1.8rem;
}

.foot__legal {
    margin-top: 1.2rem;
    font-size: 0.9375rem;
    color: var(--on-cloth-soft);
}

@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation: none !important;
        transition: none !important;
        scroll-behavior: auto !important;
    }
}

/* Privacy notice (shared partial) in this page's palette. */
:root {
    --gdpr-bg: var(--stock);
    --gdpr-text: var(--ink);
    --gdpr-border: var(--ink);
    --gdpr-link: var(--ink);
    --gdpr-muted: var(--ink-soft);
    --gdpr-button-bg: var(--ink);
    --gdpr-button-text: var(--stock);
    --gdpr-font: var(--text);
}

@media (max-width: 40rem) {
    #eeGdprNotice:not([hidden]) {
        display: flex;
        align-items: center;
        gap: 0.75rem;
        left: 0 !important;
        bottom: 0 !important;
        width: 100% !important;
        max-width: none !important;
        padding: 0.5rem 0.9rem !important;
        border-width: 1px 0 0 !important;
        border-radius: 0 !important;
        font-size: 0.75rem !important;
        line-height: 1.3 !important;
    }

    #eeGdprNotice > button {
        display: none;
    }

    #eeGdprNotice > div:last-of-type {
        flex: none;
        margin-top: 0 !important;
    }
}