/* The public letters page: a hand of paper letters fanned out on a desk, one of them open in the middle.
   Every selector starts with .letter-deck or .letters-page, so nothing here reaches the rest of the site.
   The motion (position, tilt, fade) is driven by letter-deck.js through inline transform and opacity; this file is the
   look: paper, ink, shadows and the layout. It uses the tokens of theme.css (--letter, --ink, --terracotta, ...). */

/* ---------- Page header ---------- */

.letters-page {
    padding-bottom: 12px;
}

.letters-page__intro {
    max-width: 40rem;
    margin: 14px auto 4px;
    text-align: center;
}

.letters-page__title {
    margin: 0 0 10px;
    font-family: var(--font-serif);
    font-size: clamp(26px, 5.4vw, 40px);
    font-weight: 700;
    line-height: 1.15;
    color: var(--ink);
}

.letters-page__lede {
    margin: 0;
    font-family: var(--font-serif);
    font-size: clamp(15px, 2.4vw, 18.5px);
    line-height: 1.55;
    color: var(--ink-soft);
    text-wrap: balance;
}

/* On a phone the heading is kept small, so the first letter starts as high on the screen as it can. */
@media (max-width: 599px) {
    .letters-page__intro {
        margin-top: 8px;
    }

    .letters-page__title {
        margin-bottom: 6px;
    }

    .letters-page__lede {
        line-height: 1.5;
    }
}

.letters-page__noscript {
    max-width: 36rem;
    margin: 24px auto;
    padding: 14px 18px;
    border: 1px solid var(--hairline);
    border-radius: var(--radius);
    background: var(--card);
    text-align: center;
}

.letters-page__cta {
    margin: 18px 0 0;
    text-align: center;
}

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

.letter-deck {
    /* The page wrapper (.site-wrap) pads its content by 20px; the deck takes that back, so on a phone the fan
       can use the whole screen width. */
    --deck-bleed: 20px;
    /* A sheet is 560 x 720 on a desktop, never wider than the screen minus 12px on each side. */
    --sheet-w: min(560px, calc(100vw - 24px));
    --sheet-h: clamp(480px, calc(100vh - 240px), 720px);
    --stage-top: 22px;
    --stage-bottom: 40px;
    /* One ruled line of the paper is also one line of text, so the words sit on the rules. */
    --line: 28px;
    --text-size: 17px;
    --pad-x: 44px;
    --rule: rgba(150, 118, 74, 0.2);

    position: relative;
    margin: 0 calc(var(--deck-bleed) * -1);
}

@supports (height: 100svh) {
    .letter-deck {
        --sheet-h: clamp(480px, calc(100svh - 240px), 720px);
    }
}

/* A phone: a little smaller type, closer to the edges, and a sheet that leaves room for the buttons under it
   once the visitor has scrolled the heading away. */
@media (max-width: 599px) {
    .letter-deck {
        --line: 26px;
        --text-size: 16px;
        --pad-x: 24px;
        --stage-top: 14px;
        --stage-bottom: 30px;
        --sheet-h: clamp(440px, calc(100vh - 180px), 720px);
    }
}

@media (max-width: 599px) {
    @supports (height: 100svh) {
        .letter-deck {
            --sheet-h: clamp(440px, calc(100svh - 180px), 720px);
        }
    }
}

.letter-deck[hidden],
.letter-deck [hidden] {
    display: none;
}

/* The stage keeps the fan inside the screen (a tilted sheet near the edge must not make the page scroll sideways).
   overflow-x: hidden is the fallback for browsers that do not know "clip"; the stage has room above and below. */
.letter-deck__stage {
    position: relative;
    height: calc(var(--sheet-h) + var(--stage-top) + var(--stage-bottom));
    overflow-x: hidden;
    overflow-x: clip;
    /* The browser keeps vertical scrolling and pinch zoom; sideways swipes come to the script. */
    touch-action: pan-y pinch-zoom;
    -webkit-tap-highlight-color: transparent;
}

.letter-deck__sr {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
    border: 0;
}

/* ---------- One sheet ---------- */

.letter-deck__sheet {
    --paper: #fffbf2;
    --paper-rgb: 255, 251, 242;

    position: absolute;
    top: var(--stage-top);
    left: 50%;
    box-sizing: border-box;
    width: var(--sheet-w);
    height: var(--sheet-h);
    margin-left: calc(var(--sheet-w) / -2);
    /* The sheets fan out from the bottom, like cards held in a hand. */
    transform-origin: 50% 100%;
}

/* A few kinds of paper, picked from the letter id (data-tint), so neighbours are not copies of each other. */
.letter-deck__sheet[data-tint="1"] { --paper: #fdf3dd; --paper-rgb: 253, 243, 221; }
.letter-deck__sheet[data-tint="2"] { --paper: #fbf6e8; --paper-rgb: 251, 246, 232; }
.letter-deck__sheet[data-tint="3"] { --paper: #fff4ea; --paper-rgb: 255, 244, 234; }
.letter-deck__sheet[data-tint="4"] { --paper: #f9f4e1; --paper-rgb: 249, 244, 225; }

.letter-deck__sheet.is-peek {
    cursor: pointer;
    -webkit-user-select: none;
    user-select: none;
}

/* The bigger shadow of a sheet that is lifted off the pile while it moves. */
.letter-deck__lift {
    position: absolute;
    inset: 0;
    border-radius: 4px;
    box-shadow: 0 38px 60px -22px rgba(70, 42, 12, 0.5), 0 14px 24px -12px rgba(70, 42, 12, 0.34);
    opacity: 0;
    pointer-events: none;
}

/* A little darkness over the letters that are not in the middle. */
.letter-deck__shade {
    position: absolute;
    inset: 0;
    z-index: 3;
    border-radius: 4px;
    background: #6b3f12;
    opacity: 0;
    pointer-events: none;
}

.letter-deck__paper {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    border-radius: 3px 3px 4px 4px;
    background-color: var(--paper);
    /* Paper fibres (a tiny inline SVG noise), a bright spot from the lamp and an older, warmer corner. */
    background-image:
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n' x='0' y='0'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='2' seed='7' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .45 0 0 0 0 .32 0 0 0 0 .18 0 0 0 .13 -.012'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23n)'/%3E%3C/svg%3E"),
        radial-gradient(120% 70% at 18% 0%, rgba(255, 255, 255, 0.6), rgba(255, 255, 255, 0) 62%),
        radial-gradient(90% 60% at 100% 100%, rgba(196, 150, 84, 0.13), rgba(196, 150, 84, 0) 70%);
    box-shadow:
        0 0 0 1px rgba(120, 90, 50, 0.13),
        0 1px 1px rgba(91, 60, 30, 0.1),
        0 5px 10px -4px rgba(91, 60, 30, 0.22),
        0 22px 34px -22px rgba(91, 60, 30, 0.5);
}

/* The creases of a letter that was folded in three, and a bright edge at the top. It lies over the text, very faintly. */
.letter-deck__paper::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 2;
    pointer-events: none;
    background:
        linear-gradient(to bottom,
            rgba(255, 255, 255, 0) calc(33.33% - 5px),
            rgba(110, 76, 36, 0.04) calc(33.33% - 1px),
            rgba(255, 255, 255, 0.4) 33.33%,
            rgba(255, 255, 255, 0) calc(33.33% + 6px)),
        linear-gradient(to bottom,
            rgba(255, 255, 255, 0) calc(66.66% - 5px),
            rgba(110, 76, 36, 0.04) calc(66.66% - 1px),
            rgba(255, 255, 255, 0.4) 66.66%,
            rgba(255, 255, 255, 0) calc(66.66% + 6px)),
        linear-gradient(to bottom, rgba(255, 255, 255, 0.7), rgba(255, 255, 255, 0) 3px);
}

/* The part that holds the words. Ruled lines are its background and scroll along with the text, so a short
   letter keeps its lines down to the bottom of the sheet instead of ending in empty paper. */
.letter-deck__body {
    position: relative;
    flex: 1 1 auto;
    min-height: 0;
}

.letter-deck__scroll {
    position: absolute;
    inset: 0;
    box-sizing: border-box;
    padding: var(--line) var(--pad-x) calc(var(--line) * 1.5);
    overflow-x: hidden;
    overflow-y: auto;
    background-image: repeating-linear-gradient(to bottom,
        transparent 0,
        transparent calc(var(--line) - 1px),
        var(--rule) calc(var(--line) - 1px),
        var(--rule) var(--line));
    background-attachment: local;
    scrollbar-width: thin;
    scrollbar-color: rgba(120, 88, 48, 0.4) transparent;
    /* Same as the stage: a sideways swipe on the text belongs to the deck, an up-down swipe scrolls the text. */
    touch-action: pan-y pinch-zoom;
}

.letter-deck__scroll::-webkit-scrollbar {
    width: 8px;
}

.letter-deck__scroll::-webkit-scrollbar-thumb {
    border: 2px solid transparent;
    border-radius: 999px;
    background: rgba(120, 88, 48, 0.4);
    background-clip: padding-box;
}

.letter-deck__scroll:focus-visible {
    outline: 3px solid var(--focus);
    outline-offset: -3px;
}

/* A soft fade of the text into the paper while there is more to read below, and a small hint that disappears
   after the first scroll. Both are switched by letter-deck.js (classes has-more and is-scrolled on the body). */
.letter-deck__fade {
    position: absolute;
    right: 0;
    bottom: 0;
    left: 0;
    height: 76px;
    background: linear-gradient(to bottom, rgba(var(--paper-rgb), 0), rgba(var(--paper-rgb), 0.96) 82%);
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.25s ease;
}

.letter-deck__hint {
    position: absolute;
    bottom: 12px;
    left: 50%;
    display: inline-flex;
    align-items: center;
    gap: 7px;
    margin: 0;
    padding: 3px 12px 3px 10px;
    border: 1px solid var(--hairline);
    border-radius: 999px;
    background: rgba(255, 253, 247, 0.94);
    color: var(--teal-deep);
    font-family: var(--font-sans);
    font-size: 12.5px;
    font-weight: 700;
    line-height: 1.5;
    white-space: nowrap;
    opacity: 0;
    transform: translateX(-50%);
    pointer-events: none;
    transition: opacity 0.25s ease;
}

.letter-deck__hint::before {
    content: "";
    width: 7px;
    height: 7px;
    margin-top: -4px;
    border-right: 2px solid currentColor;
    border-bottom: 2px solid currentColor;
    transform: rotate(45deg);
}

.letter-deck__body.has-more .letter-deck__fade {
    opacity: 1;
}

.letter-deck__body.has-more:not(.is-scrolled) .letter-deck__hint {
    opacity: 1;
}

/* A seal of red wax in the corner where a letter would be closed. The words flow round it. */
.letter-deck__seal {
    float: inline-end;
    width: 46px;
    height: 46px;
    margin-block: 0 8px;
    margin-inline: 14px 0;
    shape-outside: circle(50%);
    border-radius: 49% 52% 47% 51% / 52% 48% 53% 47%;
    background:
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12.5 20.2s-6.7-4.2-8.9-8.6C2 8.4 3.9 5.5 6.8 5.5c1.9 0 3.2 1 5.7 3.3 2.5-2.3 3.8-3.3 5.7-3.3 2.9 0 4.8 2.9 3.2 6.1-2.2 4.4-8.9 8.6-8.9 8.6z' fill='%23ffd9c4' fill-opacity='.38'/%3E%3Cpath d='M11.6 19.4s-6.7-4.2-8.9-8.6C1.1 7.6 3 4.7 5.9 4.7c1.9 0 3.2 1 5.7 3.3 2.5-2.3 3.8-3.3 5.7-3.3 2.9 0 4.8 2.9 3.2 6.1-2.2 4.4-8.9 8.6-8.9 8.6z' fill='%238a3412' fill-opacity='.55'/%3E%3C/svg%3E") center / 62% no-repeat,
        radial-gradient(circle at 34% 28%, rgba(255, 255, 255, 0.4) 0, rgba(255, 255, 255, 0) 26%),
        radial-gradient(circle at 50% 50%, rgba(0, 0, 0, 0) 56%, rgba(70, 20, 4, 0.22) 59%, rgba(0, 0, 0, 0) 64%),
        radial-gradient(circle at 50% 56%, #c9623a 0, var(--terracotta) 58%, #8c3a1b 100%);
    box-shadow:
        inset 0 -3px 5px rgba(80, 25, 5, 0.38),
        inset 0 2px 3px rgba(255, 205, 175, 0.4),
        0 3px 5px -2px rgba(80, 40, 10, 0.5);
    transform: rotate(-9deg);
}

.letter-deck__text {
    margin: 0;
    color: var(--ink);
    font-family: var(--font-serif);
    font-size: var(--text-size);
    line-height: var(--line);
}

/* One empty line between paragraphs, like on paper: the next paragraph still sits on a ruled line. */
.letter-deck__text p {
    margin: 0 0 var(--line);
    white-space: pre-line;
    overflow-wrap: anywhere;
    hyphens: auto;
    hyphenate-limit-chars: 8 4 4;
    text-wrap: pretty;
}

.letter-deck__text p:first-child {
    font-size: 1.05em;
}

/* The signature: handwriting where the font has the letters, otherwise a quiet italic. */
.letter-deck__sign {
    margin: 0;
    color: var(--teal-deep);
    font-family: var(--font-hand);
    font-size: calc(var(--text-size) * 1.75);
    font-weight: 600;
    line-height: calc(var(--line) * 2);
    text-align: end;
    overflow-wrap: anywhere;
}

.letter-deck__sign--plain {
    font-family: var(--font-serif);
    font-size: calc(var(--text-size) * 1.15);
    font-style: italic;
    font-weight: 400;
}

.letter-deck__sign--anonymous {
    color: var(--ink-soft);
    font-family: var(--font-sans);
    font-size: calc(var(--text-size) * 0.9);
    font-style: italic;
    font-weight: 400;
}

/* ---------- The line at the bottom of a sheet ---------- */

.letter-deck__foot {
    position: relative;
    z-index: 1;
    flex: none;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 2px 14px;
    padding: 8px var(--pad-x) 10px;
    border-top: 1px dashed rgba(150, 118, 74, 0.45);
    background: linear-gradient(to bottom, rgba(var(--paper-rgb), 0.9), rgba(214, 180, 128, 0.12));
    color: var(--ink-soft);
    font-family: var(--font-sans);
    font-size: 13.5px;
    line-height: 1.4;
}

.letter-deck__dates {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0 8px;
    margin: 0;
}

/* Each date stays one piece of text, also when a page in a right-to-left language shows digits. */
.letter-deck__written,
.letter-deck__opened {
    unicode-bidi: isolate;
}

.letter-deck__to {
    display: inline-block;
    color: var(--gold);
    font-weight: 700;
}

.letter-deck.is-rtl .letter-deck__to {
    transform: scaleX(-1);
}

.letter-deck__tools {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0 8px;
}

.letter-deck__lang {
    display: inline-block;
    padding: 1px 8px;
    border: 1px solid var(--hairline);
    border-radius: 999px;
    background: var(--tint-warm);
    color: var(--ink-soft);
    font-size: 11.5px;
    font-weight: 700;
    letter-spacing: 0.06em;
    line-height: 1.5;
}

.letter-deck__link {
    min-height: 34px;
    padding: 0 6px;
    border: 0;
    background: none;
    color: var(--teal-deep);
    font: inherit;
    font-weight: 700;
    text-decoration: underline;
    text-decoration-thickness: 1px;
    text-underline-offset: 0.2em;
    cursor: pointer;
}

.letter-deck__link:hover {
    color: var(--terracotta-deep);
}

.letter-deck__ask {
    display: inline-flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 2px 8px;
}

.letter-deck__mini {
    min-width: 46px;
    min-height: 34px;
    padding: 0 14px;
    border: 1px solid var(--teal);
    border-radius: 999px;
    background: var(--card);
    color: var(--teal-deep);
    font: inherit;
    font-weight: 700;
    cursor: pointer;
}

.letter-deck__mini:hover {
    background: var(--tint-cool);
}

.letter-deck__mini--yes {
    border-color: var(--terracotta);
    background: var(--terracotta);
    color: var(--on-accent);
}

.letter-deck__mini--yes:hover {
    border-color: var(--terracotta-deep);
    background: var(--terracotta-deep);
}

.letter-deck__mini[disabled] {
    opacity: 0.55;
    cursor: default;
}

.letter-deck__note {
    margin: 0;
    padding: 6px 0;
    font-weight: 700;
}

.letter-deck__note--error {
    color: #9a2b1f;
}

/* ---------- Buttons under (or beside) the deck ---------- */

.letter-deck__controls {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 22px;
    margin-top: -6px;
}

.letter-deck:not(.is-ready) .letter-deck__controls {
    visibility: hidden;
}

.letter-deck__count {
    min-width: 6em;
    margin: 0;
    color: var(--ink-soft);
    font-family: var(--font-sans);
    font-size: 15px;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    text-align: center;
}

.letter-deck__arrow {
    display: inline-flex;
    flex: none;
    align-items: center;
    justify-content: center;
    width: 56px;
    height: 56px;
    padding: 0;
    border: 1px solid var(--hairline);
    border-radius: 50%;
    background: var(--card);
    color: var(--teal-deep);
    box-shadow: var(--shadow-soft);
    cursor: pointer;
    touch-action: manipulation;
    transition: background-color 0.15s ease, transform 0.12s ease, opacity 0.15s ease;
}

.letter-deck__arrow:hover {
    background: var(--tint-cool);
}

.letter-deck__arrow:active {
    transform: scale(0.93);
}

/* "Next" is the main button, in the colour of the site's other main buttons. */
.letter-deck__arrow--next {
    border-color: var(--terracotta);
    background: var(--terracotta);
    color: var(--on-accent);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.35), 0 3px 0 var(--terracotta-deep), 0 12px 22px -14px rgba(154, 69, 36, 0.8);
}

.letter-deck__arrow--next:hover {
    border-color: var(--terracotta-deep);
    background: var(--terracotta-deep);
}

.letter-deck__arrow[aria-disabled="true"] {
    opacity: 0.38;
    cursor: default;
}

.letter-deck__arrow[aria-disabled="true"]:active {
    transform: none;
}

.letter-deck.is-rtl .letter-deck__arrow svg {
    transform: scaleX(-1);
}

/* On a wide screen the round buttons stand beside the fan, so the sheet can use the height of the screen. */
@media (min-width: 1180px) {
    .letter-deck__arrow {
        position: absolute;
        top: calc(var(--stage-top) + var(--sheet-h) / 2 - 28px);
    }

    .letter-deck__arrow--prev {
        inset-inline-start: calc(50% - 540px);
    }

    .letter-deck__arrow--next {
        inset-inline-end: calc(50% - 540px);
    }

    .letter-deck__controls {
        margin-top: -14px;
    }
}

/* ---------- Nothing to read yet ---------- */

.letter-deck__empty {
    box-sizing: border-box;
    width: min(460px, calc(100vw - 40px));
    margin: 36px auto 24px;
    padding: 36px 32px 34px;
    border-radius: 4px;
    background-color: var(--letter);
    background-image: repeating-linear-gradient(to bottom, transparent 0, transparent 27px, var(--rule) 27px, var(--rule) 28px);
    box-shadow: 0 0 0 1px rgba(120, 90, 50, 0.13), 0 5px 10px -4px rgba(91, 60, 30, 0.22), 0 22px 34px -22px rgba(91, 60, 30, 0.5);
    text-align: center;
    transform: rotate(-1.2deg);
}

.letter-deck__empty[hidden] {
    display: none;
}

.letter-deck__empty-text {
    margin: 0 0 24px;
    font-family: var(--font-serif);
    font-size: 19px;
    line-height: 28px;
}

/* ---------- Small screens and calm motion ---------- */

@media (max-width: 599px) {
    .letter-deck__foot {
        padding-top: 6px;
        padding-bottom: 8px;
        font-size: 13px;
    }

    .letter-deck__controls {
        gap: 18px;
        margin-top: -10px;
    }

    .letter-deck__seal {
        width: 40px;
        height: 40px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .letter-deck__arrow,
    .letter-deck__fade,
    .letter-deck__hint {
        transition: none;
    }
}

/* The honest line under the deck: the first letters were written by the team (added by the site, not by the deck's author). */
.letters-page__note {
    max-width: 38rem;
    margin: 22px auto 0;
    color: var(--ink-soft);
    font-size: 0.9rem;
    line-height: 1.55;
    text-align: center;
}