@font-face {
    font-family: 'Sofia Sans';
    src: url('../fonts/sofiasans/SofiaSans-Regular.ttf') format('truetype');
    font-weight: 400;
    font-display: swap;
}

@font-face {
    font-family: 'Covered By Your Grace';
    src: url('../fonts/coveredbyyourgrace/CoveredByYourGrace.ttf') format('truetype');
    font-weight: 400;
    font-display: swap;
}
@font-face {
    font-family: 'Permanent Marker';
    src: url('../fonts/permanentmarker/PermanentMarker-Regular.ttf') format('truetype');
    font-weight: 400;
    font-display: swap;
}
@font-face {
    font-family: 'Sofia Sans';
    src: url('../fonts/sofiasans/SofiaSans-Bold.ttf') format('truetype');
    font-weight: 700;
    font-display: swap;
}
@font-face {
    font-family: 'Sofia Sans';
    src: url('../fonts/sofiasans/SofiaSans-ExtraBold.ttf') format('truetype');
    font-weight: 800;
    font-display: swap;
}

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

html {
    background-color: #0f1017;
}

body {
    width: 100vw;
    height: 100dvh;
    overflow: hidden;

    font-family: "Sofia Sans", sans-serif;
    -webkit-font-smoothing: antialiased;
    -webkit-user-select: none;
    user-select: none;
}

body::before {
    content: "";
    position: fixed;
    inset: 0;
    background-color: #0f1017;
    background-image: url('../images/programme/frontpage-background.jpg');
    background-repeat: no-repeat;
    background-position: center center;
    background-size: cover;
    z-index: -1;
}

#af-mount {
    position: fixed;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
}

#flipbook {
    margin: 0 auto;
}

.af-frame {
    position: relative;
    transition: transform 900ms cubic-bezier(0.5, 0.02, 0.25, 1);
}

.af-stack {
    position: absolute;
    top: 5px;
    bottom: 5px;
    width: 13px;
    background-color: #e6dfce;
    cursor: pointer;
    background-image:
        linear-gradient(to bottom,
            rgba(50, 38, 24, 0.14) 0%,
            rgba(50, 38, 24, 0) 18%,
            rgba(50, 38, 24, 0) 82%,
            rgba(50, 38, 24, 0.16) 100%),
        repeating-linear-gradient(to right,
            rgba(110, 92, 64, 0.18) 0, rgba(110, 92, 64, 0.18) 1px,
            rgba(110, 92, 64, 0) 1px, rgba(110, 92, 64, 0) 7px),
        repeating-linear-gradient(to right,
            rgba(255, 255, 255, 0.5) 0, rgba(255, 255, 255, 0.5) 1px,
            rgba(120, 100, 72, 0.18) 1px, rgba(120, 100, 72, 0.18) 2px);
}

.af-stack::after {
    content: "";
    position: absolute;
}

.af-stack-left {
    right: calc(100% - 6px);
    border-radius: 3px 0 0 3px;

    opacity: 0;
    pointer-events: none;
    transition: opacity 320ms ease;
}

.af-stack-left::after {
    inset: -7px 0 -7px -16px;
}

.af-stack-right::after {
    inset: -7px -16px -7px 0;
}

.af-stack-right {
    left: calc(100% - 6px);
    border-radius: 0 3px 3px 0;
}

.af-frame.af-open .af-stack-left {
    opacity: 1;
    pointer-events: auto;
}

.af-desktop #flipbook {
    filter: drop-shadow(0 26px 55px rgba(0, 0, 0, 0.6));
}

.af-page {

    position: relative;
    overflow: hidden;

    font-size: clamp(10px, 1.42vh, 16px);
    font-family: "Sofia Sans", sans-serif;

    --pp-ink: #241f1a;
    --pp-ink-soft: rgba(36, 31, 26, 0.62);
    --pp-rule: rgba(36, 31, 26, 0.22);
    --pp-red: #bf2c26;
    --pp-red-deep: #9a2317;

    --tk-paper: #f6f1e4;
    --tk-red: #bf2c26;
    --tk-mono: ui-monospace, "SF Mono", SFMono-Regular, Menlo, Consolas, monospace;
    --tk-notch: 0.42em;
    --tk-notch-gap: 1.5em;
    color: var(--pp-ink);
}

.af-page {
    position: relative;
    flex: 1 1 50%;
    min-width: 0;

    --paper-mottle:
        radial-gradient(120% 90% at 30% 15%, rgba(255, 255, 255, 0.6), rgba(255, 255, 255, 0) 55%),
        radial-gradient(110% 90% at 75% 95%, rgba(150, 128, 94, 0.12), rgba(150, 128, 94, 0) 55%);
    --paper-edges:
        linear-gradient(to bottom, rgba(120, 100, 72, 0.16), rgba(120, 100, 72, 0) 18px),
        linear-gradient(to top, rgba(120, 100, 72, 0.16), rgba(120, 100, 72, 0) 18px);
    background-color: #efeadd;
    background-image: var(--paper-edges), var(--paper-mottle);
    overflow: hidden;

    mask-size: 100% 100%;
    mask-repeat: no-repeat;
    -webkit-mask-size: 100% 100%;
    -webkit-mask-repeat: no-repeat;
}

.af-left {
    border-radius: 3px 0 0 3px;
    background-image:
        linear-gradient(to right, rgba(255, 255, 255, 0.6), rgba(255, 255, 255, 0) 14px),
        var(--paper-edges),
        var(--paper-mottle);

    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100' preserveAspectRatio='none'%3E%3Cpath d='M0.4,0.45C14,0.62,30,0.4,48,0.6C62,0.72,72,0.55,82,0.7C90,0.85,96,1.0,100,1.15L100,98.85C96,99.0,90,99.15,82,99.3C72,99.45,62,99.28,48,99.4C30,99.6,14,99.38,0.4,99.55C0.1,70,0.75,40,0.4,0.45Z' fill='%23fff'/%3E%3C/svg%3E");
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100' preserveAspectRatio='none'%3E%3Cpath d='M0.4,0.45C14,0.62,30,0.4,48,0.6C62,0.72,72,0.55,82,0.7C90,0.85,96,1.0,100,1.15L100,98.85C96,99.0,90,99.15,82,99.3C72,99.45,62,99.28,48,99.4C30,99.6,14,99.38,0.4,99.55C0.1,70,0.75,40,0.4,0.45Z' fill='%23fff'/%3E%3C/svg%3E");
}

.af-right {
    border-radius: 0 3px 3px 0;
    background-image:
        linear-gradient(to left, rgba(255, 255, 255, 0.6), rgba(255, 255, 255, 0) 14px),
        var(--paper-edges),
        var(--paper-mottle);

    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100' preserveAspectRatio='none'%3E%3Cpath d='M0,1.15C6,1.0,12,0.85,20,0.7C34,0.5,50,0.75,66,0.55C80,0.4,92,0.68,99.6,0.5C99.9,35,99.3,65,99.6,99.5C92,99.32,80,99.6,66,99.45C50,99.25,34,99.5,20,99.3C12,99.15,6,99.0,0,98.85Z' fill='%23fff'/%3E%3C/svg%3E");
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100' preserveAspectRatio='none'%3E%3Cpath d='M0,1.15C6,1.0,12,0.85,20,0.7C34,0.5,50,0.75,66,0.55C80,0.4,92,0.68,99.6,0.5C99.9,35,99.3,65,99.6,99.5C92,99.32,80,99.6,66,99.45C50,99.25,34,99.5,20,99.3C12,99.15,6,99.0,0,98.85Z' fill='%23fff'/%3E%3C/svg%3E");
}

.af-page::before {
    content: "";
    position: absolute;
    inset: 0;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='p'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='4' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23p)'/%3E%3C/svg%3E");
    background-size: 160px 160px;
    opacity: 0.32;
    mix-blend-mode: multiply;
    pointer-events: none;
}

.af-page::after {
    content: "";
    position: absolute;
    top: 0;
    bottom: 0;
    width: 9%;
    pointer-events: none;
}

.af-left::after {
    right: 0;
    background: linear-gradient(to right,
        rgba(90, 72, 48, 0) 0%,
        rgba(90, 72, 48, 0.14) 62%,
        rgba(70, 55, 36, 0.42) 100%);
}

.af-right::after {
    left: 0;
    background: linear-gradient(to left,
        rgba(90, 72, 48, 0) 0%,
        rgba(90, 72, 48, 0.14) 62%,
        rgba(70, 55, 36, 0.42) 100%);
}

.af-inner {
    height: 100%;
    display: flex;
    flex-direction: column;
    padding: 3.1em 3em 3.4em;
}

.pp-masthead {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 1.5em;
}

.pp-masthead-title {
    font-size: 0.95em;
    font-weight: 700;
    letter-spacing: 0.16em;
    text-transform: uppercase;
}

.pp-masthead-est {
    font-size: 0.9em;
    font-weight: 700;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--pp-ink-soft);
    text-align: right;
    flex: none;
}

.pp-masthead-rule {
    display: flex;
    align-items: center;
    gap: 1.2em;
    margin-top: 0.55em;
}

.pp-masthead-rule-ink {
    flex: 1 1 auto;
    height: 1px;
    background: var(--pp-ink);
}

.pp-masthead-rule-red {
    flex: none;
    width: 3.6em;
    height: 2px;
    background: var(--pp-red);
}

.af-cover-inner {
    padding-bottom: 3.1em;
}

.pp-cover-logo {
    display: block;
    width: 100%;
    margin-top: 1.9em;
}

.pp-cover-lede {
    position: absolute;
    top: 1.6em;
    left: 3em;

    width: max-content;
    max-width: calc(100% - 6em);
}

.pp-cover-lede::before {
    content: "";
    position: absolute;
    inset: -2.4em -3.6em -2.2em -3.4em;
    background: #efeadd;
    mask-image: radial-gradient(ellipse closest-side at 46% 50%,
        #000 26%,
        rgba(0, 0, 0, 0.88) 52%,
        rgba(0, 0, 0, 0.45) 76%,
        rgba(0, 0, 0, 0) 100%);
    -webkit-mask-image: radial-gradient(ellipse closest-side at 46% 50%,
        #000 26%,
        rgba(0, 0, 0, 0.88) 52%,
        rgba(0, 0, 0, 0.45) 76%,
        rgba(0, 0, 0, 0) 100%);
}

.pp-cover-lede-title {

    position: relative;
    font-size: 2.5em;
    font-weight: 800;
    line-height: 1;
    letter-spacing: 0.01em;
    text-transform: uppercase;
}

.pp-cover-lede-lines {
    position: relative;
    margin-top: 0.7em;
    font-size: 1.15em;
    font-weight: 700;
    line-height: 1.45;
    letter-spacing: 0.12em;
    text-transform: uppercase;
}

.pp-cover-lede-lines em {
    font-style: normal;
    color: var(--pp-red);
}

.pp-cover-photo-wrap {
    position: relative;
    flex: 1 1 auto;
    min-height: 0;
    margin: 1.4em -3em -3.1em;
    overflow: hidden;
}

.pp-cover-photo {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: 50% 50%;
}

.pp-cover-scrim {
    position: absolute;
    inset: 0;
    background: linear-gradient(to top,
        rgba(8, 8, 10, 0.82) 0%,
        rgba(8, 8, 10, 0.45) 34%,
        rgba(8, 8, 10, 0) 62%);
}

.pp-cover-contents {
    position: absolute;
    left: 3em;
    right: 3em;

    bottom: 5.9em;
    color: #ffffff;
}

.pp-cover-contents-title {
    display: inline-block;
    padding-bottom: 0.45em;
    padding-right: 2.5em;
    border-bottom: 1px solid rgba(255, 255, 255, 0.5);
    font-size: 0.9em;
    font-weight: 700;
    letter-spacing: 0.22em;
    text-transform: uppercase;
}

.pp-cover-contents-item {
    display: flex;
    align-items: baseline;
    gap: 1.1em;
    margin-top: 0.85em;
}

.pp-cover-contents-head {
    display: block;
    font-size: 1.05em;
    font-weight: 800;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

.pp-cover-contents-sub {
    display: block;
    margin-top: 0.1em;
    font-size: 0.85em;
    color: rgba(255, 255, 255, 0.75);
}

.pp-cover-bar {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 3.9em;
    display: flex;
    align-items: center;

    justify-content: flex-start;

    padding: 0 3em 0.32em;
    background: rgba(19, 18, 17, 0.72);
    border-top: 1px solid #efeadd;
}

.pp-cover-bar-links {
    display: flex;
    align-items: center;
    gap: 0.7em;
    color: #efeadd;

    font-size: 0.8em;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    white-space: nowrap;
}

.pp-cover-bar-links span:first-child {
    font-weight: 800;
    letter-spacing: 0.18em;
}

.pp-cover-bar-links i {
    font-style: normal;
    color: rgba(239, 234, 221, 0.4);
}

.pp-cover-head {
    display: contents;
}

.pp-cover-tap {
    display: none;
}

@keyframes pp-tap-lift {
    0%, 68%, 100% { transform: translateY(0); }
    34%           { transform: translateY(-0.32em); }
}

.pp-cover-tap-mark {
    animation: pp-tap-lift 2.6s ease-in-out infinite;
}

@media (orientation: portrait) and (max-width: 1024px) {
    .af-page {
        font-size: clamp(10px, 2.9vw, 24px);
    }

    .af-contents,
    .af-flow {
        border-radius: 0;
        mask-image: none;
        -webkit-mask-image: none;
        background-image: var(--paper-edges), var(--paper-mottle);
    }

        .af-page::after {
            display: none;
        }

        .af-cover {

            border-radius: 0;
            mask-image: none;
            -webkit-mask-image: none;

            background-image: var(--paper-edges), var(--paper-mottle);
        }

        .pp-cover-contents,
        .pp-cover-bar {
            display: none;
        }

        .pp-cover-scrim {
            background: linear-gradient(to top,
                rgba(8, 8, 10, 0.62) 0%,
                rgba(8, 8, 10, 0.22) 18%,
                rgba(8, 8, 10, 0) 38%);
        }

        .pp-cover-tap {
            display: flex;
            position: absolute;

            left: 0;
            right: 0;
            bottom: 2.6em;
            flex-direction: column;
            align-items: center;
            gap: 0.7em;
            color: #ffffff;
        }

        .pp-cover-tap-mark {
            width: 2.4em;
            height: auto;
            opacity: 0.85;
        }

        .pp-cover-tap-label {
            font-size: 1.15em;
            font-weight: 800;
            letter-spacing: 0.2em;
            text-transform: uppercase;
        }
}

@media (orientation: landscape) and (max-width: 1366px),
       (orientation: landscape) and (max-height: 700px) {
    .af-page {
        font-size: clamp(11px, min(2vw, 3vh), 26px);
    }

    .af-contents,
    .af-flow {
        border-radius: 0;
        mask-image: none;
        -webkit-mask-image: none;
        background-image: var(--paper-edges), var(--paper-mottle);
    }

        .af-page::after,

        .af-page::before {
            display: none;
        }

        .af-cover {
            left: 0;
            border-radius: 0;
            mask-image: none;
            -webkit-mask-image: none;

            background-color: #efeadd;
            background-image: none;
        }

        .pp-cover-photo-wrap {
            position: absolute;
            inset: 0;
            margin: 0;
            z-index: 0;
        }

        .pp-cover-head {
            position: relative;
            z-index: 1;
            display: flex;
            flex-direction: column;
            align-self: flex-start;
            width: fit-content;
            max-width: 100%;
            padding: 0.75em;
        }

        .pp-cover-head::before {
            content: "";
            position: absolute;
            inset: 0;
            z-index: -1;
            border-radius: 0.3em;
            background: rgba(239, 234, 221, 0.58);
            backdrop-filter: blur(18px) saturate(115%);
            -webkit-backdrop-filter: blur(18px) saturate(115%);
        }

        .af-cover-inner {
            max-width: 64%;
            padding: 2.2em;
        }

        .pp-cover-scrim {
            background: linear-gradient(to top,
                rgba(6, 8, 12, 0.82) 0%,
                rgba(6, 8, 12, 0.52) 22%,
                rgba(6, 8, 12, 0.16) 42%,
                rgba(6, 8, 12, 0) 58%);
        }

        .pp-masthead-title {
            font-size: 0.82em;
        }

        .pp-masthead-est {
            font-size: 0.78em;
        }

        .pp-cover-lede-title,
        .pp-cover-lede-lines {
            color: #ffffff;
        }

        .pp-cover-lede-lines em {
            color: #ef4a3c;
        }

        .pp-cover-lede {
            top: auto;
            bottom: 5.5em;
        }

        .pp-cover-lede::before {
            display: none;
        }

        .pp-cover-logo {
            align-self: flex-start;
            width: 26em;
            max-width: 100%;
            height: auto;
            max-height: 40dvh;
        }

        .pp-cover-contents,
        .pp-cover-bar {
            display: none;
        }

        .pp-cover-tap {
            display: flex;
            position: absolute;
            left: 0;
            right: 0;
            bottom: 1.6em;
            flex-direction: column;
            align-items: center;
            gap: 0.6em;
            color: #ffffff;
            z-index: 1;
        }

        .pp-cover-tap-mark {
            width: 2.2em;
            height: auto;
            opacity: 0.85;
        }

        .pp-cover-tap-label {
            font-size: 1.1em;
            font-weight: 800;
            letter-spacing: 0.2em;
            text-transform: uppercase;
        }
}

.af-contents {

    font-size: calc(min(100dvh - 40px, (100vw - 40px) / 1.62, 728px) / 52);

    --pp-blue: #6b6bff;

    --tk-paper: #f6f1e4;
    --tk-red: #bf2c26;

    --tk-mono: ui-monospace, "SF Mono", SFMono-Regular, Menlo, Consolas, monospace;

    --tk-notch: 0.42em;
    --tk-notch-gap: 1.5em;
}

.af-contents-inner {
    overflow: hidden;
    justify-content: space-between;

    padding-top: 2.3em;
}

.pp-contents-wordmark {
    display: block;
    width: 20em;
    max-width: 64%;
    height: auto;
}

.pp-featured {
    position: relative;
    display: flex;

    flex: none;

    margin-top: 2.7em;
}

.pp-featured-tape {
    position: absolute;
    top: -0.75em;
    left: -1.4em;
    z-index: 2;
    padding: 0.45em 1.6em 0.4em;
    background-color: rgba(212, 184, 132, 0.8);
    background-image: linear-gradient(102deg,
        rgba(255, 255, 255, 0.38) 0%,
        rgba(255, 255, 255, 0.05) 34%,
        rgba(255, 255, 255, 0.28) 62%,
        rgba(255, 255, 255, 0.04) 100%);

    clip-path: polygon(
        2% 0%, 98% 0%,
        100% 22%, 97.5% 45%, 100% 68%, 97.5% 88%, 99% 100%,
        2% 100%, 0% 80%, 2.5% 60%, 0% 40%, 2% 18%);
    box-shadow: 0 1px 2px rgba(12, 10, 8, 0.28);
    transform: rotate(-3.5deg);
    font-size: 0.72em;
    font-weight: 800;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: rgba(126, 27, 18, 0.92);
}

.pp-ticket {
    position: relative;
    flex: 1 1 auto;
    display: flex;
    align-items: stretch;
    color: inherit;
    text-decoration: none;
    transform: rotate(-0.6deg);
    filter:
        drop-shadow(0 2px 4px rgba(46, 34, 20, 0.24))
        drop-shadow(0 13px 22px rgba(46, 34, 20, 0.16));
    transition: transform 220ms ease, filter 220ms ease;
}

.pp-ticket:hover,
.pp-ticket:focus-visible {
    transform: rotate(-0.6deg) translateY(-3px);
    outline: none;
    filter:
        drop-shadow(0 5px 8px rgba(46, 34, 20, 0.26))
        drop-shadow(0 20px 30px rgba(46, 34, 20, 0.2));
}

.pp-ticket-barcode {
    position: relative;
    flex: none;
    display: flex;
    align-items: stretch;
    gap: 0.42em;
    padding: 0.7em 0.6em 0.7em 0.9em;
    border-right: 2px dotted rgba(36, 31, 26, 0.35);
    background-image: radial-gradient(circle var(--tk-notch) at 0 calc(var(--tk-notch-gap) / 2),
        transparent 98%, var(--tk-paper) 100%);
    background-size: 100% var(--tk-notch-gap);
    background-repeat: repeat-y;
}

.pp-ticket-bars {
    flex: none;
    width: 1.6em;
    background-image: repeating-linear-gradient(to bottom,
        #241f1a 0 1px, transparent 1px 3px,
        #241f1a 3px 5px, transparent 5px 6px,
        #241f1a 6px 7px, transparent 7px 10px,
        #241f1a 10px 13px, transparent 13px 15px);
}

.pp-ticket-serial {
    flex: none;
    writing-mode: vertical-rl;
    transform: rotate(180deg);
    align-self: center;
    font-family: var(--tk-mono);
    font-size: 0.52em;
    letter-spacing: 0.06em;
    color: rgba(36, 31, 26, 0.72);
}

.pp-ticket-body {
    position: relative;
    flex: 1 1 auto;
    min-width: 0;
    display: flex;
    flex-direction: column;
    background-color: var(--tk-paper);
}

.pp-ticket-band {
    display: flex;
    align-items: center;
    gap: 0.85em;
    padding: 0.55em 1.1em;
    background: var(--tk-red);
    color: #fff;
}

.pp-ticket-badge {
    flex: none;
    width: 2.6em;
    height: auto;
}

.pp-ticket-band-text {
    flex: 1 1 auto;
    min-width: 0;
}

.pp-ticket-kicker {
    display: block;
    font-size: 0.68em;
    font-weight: 700;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.82);
}

.pp-ticket-title {
    display: block;
    margin-top: 0.06em;
    font-size: 1.8em;
    font-weight: 800;
    line-height: 1;
    letter-spacing: 0.02em;
    text-transform: uppercase;
}

.pp-ticket-season {
    flex: none;
    padding: 0.2em 0.5em;
    border: 1px solid rgba(255, 255, 255, 0.55);
    font-size: 0.82em;
    font-weight: 800;
    letter-spacing: 0.08em;
}

.pp-ticket-season i {
    font-style: normal;
    opacity: 0.6;
}

.pp-ticket-strip {
    padding: 0.42em 1.1em 0.36em;
    background: #241f1a;
    color: rgba(239, 234, 221, 0.9);
    font-size: 0.68em;
    font-weight: 700;
    letter-spacing: 0.18em;
    text-transform: uppercase;
}

.pp-ticket-strip i {
    font-style: normal;
}

.pp-ticket-grid {
    position: relative;
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;

    justify-content: space-evenly;
    gap: 0.95em;
    padding: 0.95em 1.1em;
}

.pp-ticket-grid::before {
    content: "";
    position: absolute;
    inset: 0;
    background-image: repeating-linear-gradient(to right,
        rgba(120, 96, 60, 0.08) 0 1px,
        rgba(120, 96, 60, 0) 1px 7px);
    pointer-events: none;
}

.pp-ticket-headline {
    position: relative;
    display: flex;
    align-items: center;

    flex-wrap: wrap;
    gap: 0.45em 0.7em;
    font-family: var(--tk-mono);
    font-size: 1.2em;
    color: #241f1a;
}

.pp-ticket-headline b,
.pp-ticket-headline span {
    white-space: nowrap;
}

.pp-ticket-headline b {
    padding: 0.12em 0.45em 0.18em;
    background: #241f1a;
    color: var(--tk-paper);
    font-weight: 500;
    text-transform: uppercase;
}

.pp-ticket-fields {
    position: relative;
    display: flex;
    flex-wrap: wrap;
    gap: 0.6em 1.1em;
}

.pp-ticket-field {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 0.14em;
}

.pp-ticket-field i {
    font-style: normal;
    font-size: 0.58em;
    font-weight: 700;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: rgba(36, 31, 26, 0.5);
}

.pp-ticket-field b {
    font-family: var(--tk-mono);
    font-size: 0.85em;
    font-weight: 500;
    letter-spacing: 0.01em;
    color: #241f1a;
}

.pp-ticket-foot {
    padding: 0.5em 1.1em 0.54em;
    border-top: 1px solid rgba(36, 31, 26, 0.16);
    background: rgba(36, 31, 26, 0.06);
    font-size: 0.66em;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: rgba(36, 31, 26, 0.62);
}

.pp-ticket-foot b {
    color: var(--tk-red);
    font-weight: 800;
}

.pp-ticket-stub {
    position: relative;
    flex: none;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    gap: 0.1em;

    width: 25%;
    padding: 0.9em 1em;
    border-left: 2px dotted rgba(255, 255, 255, 0.5);
    color: #fff;
    background-color: transparent;
    background-image: radial-gradient(circle var(--tk-notch) at 100% calc(var(--tk-notch-gap) / 2),
        transparent 98%, var(--tk-red) 100%);
    background-size: 100% var(--tk-notch-gap);
    background-repeat: repeat-y;
    transition: filter 220ms ease;
}

.pp-ticket:hover .pp-ticket-stub {
    filter: brightness(1.1);
}

.pp-ticket-stub-label {
    margin-top: auto;
    font-size: 0.62em;
    font-weight: 700;
    letter-spacing: 0.26em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.78);
}

.pp-ticket-price {
    font-size: 2.6em;
    font-weight: 800;
    line-height: 1;
    letter-spacing: -0.01em;
}

.pp-ticket-cta {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.05em;
    margin-top: auto;
    padding: 0.45em 0.75em 0.5em;
    background: var(--tk-paper);
    color: var(--tk-red);
    font-size: 1.15em;
    font-weight: 800;
    line-height: 1;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    transition: transform 180ms ease;
}

.pp-ticket-cta-line {
    display: flex;
    align-items: center;
    gap: 0.15em;
}

.pp-ticket-cta svg {
    width: 0.8em;
    height: auto;
    transition: transform 180ms ease;
}

.pp-ticket:hover .pp-ticket-cta {
    transform: scale(1.03);
}

.pp-ticket:hover .pp-ticket-cta svg {
    transform: translateX(0.15em);
}

.pp-index {
    flex: 1 1 auto;
    min-height: 0;
    max-height: 11.4em;
    display: flex;
    flex-direction: column;
    margin-top: 2.5em;
    border: 1px solid rgba(36, 31, 26, 0.22);
}

.pp-index-item {
    position: relative;
    flex: 1 1 0;
    max-height: 5.6em;
    display: flex;
    align-items: center;
    gap: 1.1em;
    padding: 0.55em 1.15em 0.55em 1.1em;
    border-top: 1px solid rgba(36, 31, 26, 0.14);
    color: inherit;
    text-decoration: none;
    transition: background-color 180ms ease;
}

.pp-index-item:first-child {
    border-top: 0;
}

.pp-index-item:hover,
.pp-index-item:focus-visible {
    background-color: rgba(36, 31, 26, 0.045);
    outline: none;
}

.pp-index-num {
    flex: none;
    width: 2em;
    font-size: 1.05em;
    font-weight: 700;
    letter-spacing: 0.03em;
    color: rgba(36, 31, 26, 0.4);
}

.pp-index-icon {
    flex: none;
    display: flex;
    width: 2.1em;
    color: var(--pp-ink);
}

.pp-index-icon svg {
    width: 100%;
    height: auto;
}

.pp-index-text {
    flex: 1 1 auto;
    min-width: 0;
}

.pp-index-head {
    display: block;
    font-size: 1.2em;
    font-weight: 800;
    line-height: 1.08;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

.pp-index-sub {
    display: block;
    margin-top: 0.16em;
    font-size: 0.85em;
    color: var(--pp-ink-soft);
}

.pp-index-chev {
    flex: none;
    width: 1.15em;
    height: auto;
    color: var(--pp-red);
}

.pp-page-links {
    flex: none;

    counter-reset: pagelink 2;
    margin-top: 1.4em;
    display: grid;
    grid-template-columns: 1fr 1fr;
    column-gap: 1em;
    row-gap: 0.3em;
}

.pp-page-link {
    display: flex;
    align-items: baseline;
    gap: 1.2em;
    padding: 0.5em 1.3em 0.5em 0;
    color: var(--pp-ink);
    text-decoration: none;
    cursor: pointer;
    transition: color 0.15s ease;
}

.pp-page-link::before {
    counter-increment: pagelink;
    content: counter(pagelink, decimal-leading-zero);
    flex: none;
    min-width: 1.8em;
    font-size: 1em;
    font-weight: 800;
    letter-spacing: 0.04em;
    color: rgba(36, 31, 26, 0.45);
}

.pp-page-link:hover,
.pp-page-link:focus-visible {
    color: var(--pp-red);
    outline: none;
}

.pp-page-link-title {
    display: block;
    font-size: 1em;
    font-weight: 800;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    white-space: nowrap;
}

.pp-page-link-sub {
    display: block;
    margin-top: 0.1em;
    font-size: 0.9em;
    letter-spacing: 0.01em;
    color: var(--pp-ink-soft);
}

.pp-social {
    flex: none;
    display: flex;
    align-items: center;
    gap: 1.1em;
    margin-top: 1.1em;
}

.pp-social-label {
    flex: none;
    font-size: 0.72em;
    font-weight: 700;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: rgba(36, 31, 26, 0.45);
}

.pp-social-links {
    flex: 1 1 auto;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 0.55em;
}

.pp-social-links::before {
    content: "";
    flex: 1 1 auto;
    height: 1px;
    margin-right: 0.5em;
    background: rgba(36, 31, 26, 0.2);
}

.pp-social-link {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 2.05em;
    height: 2.05em;
    border: 1px solid rgba(36, 31, 26, 0.22);
    color: var(--pp-ink);
    transition: background-color 180ms ease, border-color 180ms ease, color 180ms ease;
}

.pp-social-link svg {
    width: 1.05em;
    height: 1.05em;
}

.pp-social-link:hover,
.pp-social-link:focus-visible {
    border-color: var(--pp-ink);
    background: var(--pp-ink);
    color: var(--tk-paper);
    outline: none;
}

.pp-contents-foot {
    display: none;
}

.pp-contents-back {
    display: flex;
    align-items: center;
    gap: 0.5em;
    padding: 0.3em 0.2em;
    border: 0;
    background: none;
    color: var(--pp-ink-soft);
    font-family: inherit;
    font-size: 0.85em;
    font-weight: 800;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    cursor: pointer;
}

.pp-contents-back svg {
    width: 1.05em;
    height: auto;
    color: var(--pp-red);
}

.pp-contents-foot-note {
    font-size: 0.8em;
    font-weight: 700;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: rgba(36, 31, 26, 0.42);
}

@media (orientation: portrait) and (max-width: 1024px) {

    .af-contents {
        font-size: clamp(11px, min(3.6vw, 1.9vh), 22px);
    }

    .af-contents-inner {
        overflow-y: auto;
        overscroll-behavior: contain;
        -webkit-overflow-scrolling: touch;
        padding: 2.3em 1.5em 2.6em;

        justify-content: flex-start;
    }

    .pp-featured {
        display: block;
    }

    .pp-featured,
    .pp-ticket,
    .pp-index,
    .pp-index-item {
        flex: none;
        max-height: none;
    }

    .pp-contents-wordmark {
        width: 15.5em;
        max-width: 76%;
    }

    .pp-featured {
        margin-top: 2em;
    }

    .pp-ticket-barcode {
        display: none;
    }

    .pp-ticket-body {
        mask-image: radial-gradient(circle var(--tk-notch) at 0 calc(var(--tk-notch-gap) / 2),
            transparent 98%, #000 100%);
        mask-size: 100% var(--tk-notch-gap);
        mask-repeat: repeat-y;
        -webkit-mask-image: radial-gradient(circle var(--tk-notch) at 0 calc(var(--tk-notch-gap) / 2),
            transparent 98%, #000 100%);
        -webkit-mask-size: 100% var(--tk-notch-gap);
        -webkit-mask-repeat: repeat-y;
    }

    .pp-ticket-band,
    .pp-ticket-strip,
    .pp-ticket-grid,
    .pp-ticket-foot {
        padding-left: 1.3em;
    }

    .pp-ticket-band {
        gap: 0.7em;
        padding-top: 0.75em;
        padding-bottom: 0.7em;
    }

    .pp-ticket-title {
        font-size: 1.5em;
    }

    .pp-ticket-badge {
        width: 2.2em;
    }

    .pp-ticket-season {
        display: none;
    }

    .pp-ticket-strip i {
        display: none;
    }

    .pp-ticket-grid {
        gap: 0.9em;
        padding-top: 0.9em;
        padding-bottom: 0.9em;
    }

    .pp-ticket-headline {
        flex-direction: column;
        align-items: flex-start;
        gap: 0.42em;
        font-size: 0.95em;
    }

    .pp-ticket-headline b {
        white-space: nowrap;
    }

    .pp-ticket-fields {
        gap: 0.7em 1.2em;
    }

    .pp-ticket-field {
        flex: 1 1 40%;
    }

    .pp-ticket-stub {
        width: 6.2em;
        padding: 0.9em 0.5em;
    }

    .pp-ticket-price {
        font-size: 2.1em;
    }

    .pp-ticket-cta {
        font-size: 0.68em;
        letter-spacing: 0.1em;
    }

    .pp-index {
        margin-top: 1.9em;
    }

    .pp-index-item {
        gap: 0.85em;
        padding: 1em 0.85em 1em 0.8em;
    }

    .pp-index-num {
        width: 1.7em;
        font-size: 0.95em;
    }

    .pp-index-icon {
        width: 1.85em;
    }

    .pp-index-head {
        font-size: 1.15em;
    }

    .pp-index-sub {
        font-size: 0.85em;
    }

    .pp-page-links {
        grid-template-columns: 1fr;
        margin-top: 1.3em;
        row-gap: 0.2em;
    }

    .pp-page-link {
        gap: 0.9em;
        padding: 0.55em 0 0.55em 0.8em;
    }

    .pp-page-link::before {
        min-width: 1.7em;
    }

    .pp-page-link-title {
        font-size: 1.05em;
    }

    .pp-social {
        margin-top: 1.4em;
    }

    .pp-social-link {
        width: 2.4em;
        height: 2.4em;
    }

    .pp-contents-foot {
        display: flex;
        flex: none;
        align-items: center;
        justify-content: space-between;
        gap: 1em;
        margin-top: 1.6em;
        padding-top: 1.1em;
        border-top: 1px solid rgba(36, 31, 26, 0.18);
    }
}

@media (orientation: landscape) and (max-width: 1366px),
       (orientation: landscape) and (max-height: 700px) {

    .af-contents {
        font-size: clamp(11px, min(1.5vw, 2vh), 18px);
    }

    .af-contents-inner {
        overflow-y: auto;
        overscroll-behavior: contain;
        padding: 2em 2.2em 2.4em;
    }

    .pp-index,
    .pp-index-item {
        flex: 0 0 auto;
    }

    .pp-contents-foot {
        display: flex;
        flex: none;
        align-items: center;
        justify-content: space-between;
        gap: 1em;
        margin-top: auto;
        padding-top: 1.1em;
        border-top: 1px solid rgba(36, 31, 26, 0.18);
    }
}

.af-flow {
    --pp-blue: #6b6bff;

    font-size: calc(min(100dvh - 40px, (100vw - 40px) / 1.62, 728px) / 52);
}

.af-flow-inner {
    overflow: hidden;
    padding-top: 2.3em;
}

.pp-flow {
    flex: 1 1 auto;
    min-height: 0;
    margin-top: 1.9em;
    padding-right: 1em;
    overflow-y: auto;
    overscroll-behavior: contain;
}

.pp-flow.is-clipped,
.pp-contents-aside.is-clipped {
    mask-image: linear-gradient(to bottom, #000 92%, rgba(0, 0, 0, 0) 100%);
    -webkit-mask-image: linear-gradient(to bottom, #000 92%, rgba(0, 0, 0, 0) 100%);
}

.pp-flow::-webkit-scrollbar {
    width: 4px;
}

.pp-flow::-webkit-scrollbar-thumb {
    background: rgba(36, 31, 26, 0.3);
    border-radius: 2px;
}

.pp-flow::-webkit-scrollbar-thumb:hover {
    background: rgba(36, 31, 26, 0.5);
}

.pp-flow-empty[hidden],
.pp-flow-section[hidden] {
    display: none;
}

.pp-flow-empty {
    height: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 1.1em;
    padding-bottom: 4em;
    color: rgba(36, 31, 26, 0.38);
    text-align: center;
}

.pp-flow-empty svg {
    width: 4.4em;
    height: auto;
}

.pp-flow-empty span {
    max-width: 14em;
    font-size: 0.92em;
    font-weight: 700;
    letter-spacing: 0.16em;
    line-height: 1.5;
    text-transform: uppercase;
}

.pp-flow-lede {
    margin-bottom: 1.5em;
    padding-bottom: 1.4em;
    border-bottom: 1px solid rgba(36, 31, 26, 0.22);
    font-size: 1em;
    line-height: 1.5;
    color: var(--pp-ink-soft);
}

.pp-post {
    position: relative;
    display: flex;
    align-items: flex-start;
    gap: 1.1em;
    padding: 1.15em 0.6em 1.15em 0;
    border-top: 1px solid rgba(36, 31, 26, 0.14);
    color: inherit;
    text-decoration: none;
    transition: background-color 180ms ease;
}

.pp-post:first-child {
    border-top: 0;
    padding-top: 0;
}

.pp-post:hover,
.pp-post:focus-visible {
    background-color: rgba(36, 31, 26, 0.045);
    outline: none;
}

.pp-post-thumb {
    flex: none;
    width: 6.2em;
    aspect-ratio: 4 / 3;
    overflow: hidden;
    background: rgba(36, 31, 26, 0.08);
}

.pp-post-thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.pp-post-text {
    flex: 1 1 auto;
    min-width: 0;
}

.pp-post-date {
    display: block;
    font-size: 0.72em;
    font-weight: 800;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: var(--pp-red);
}

.pp-post-title {
    display: block;
    margin-top: 0.3em;
    font-size: 1.15em;
    font-weight: 800;
    line-height: 1.15;
    letter-spacing: 0.02em;
    text-transform: uppercase;
}

.pp-post-excerpt {
    display: block;
    margin-top: 0.4em;
    font-size: 0.9em;
    line-height: 1.45;
    color: var(--pp-ink-soft);

    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.pp-post-more {
    display: flex;
    align-items: center;
    gap: 0.35em;
    margin-top: 0.5em;
    font-size: 0.78em;
    font-weight: 800;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--pp-red);
}

.pp-post-more svg {
    width: 0.95em;
    height: auto;
}

.pp-posts-empty {
    font-size: 0.95em;
    line-height: 1.5;
    color: var(--pp-ink-soft);
}

.pp-index-item.is-open {
    background-color: rgba(36, 31, 26, 0.05);
}

.pp-index-item.is-open .pp-index-num {
    color: var(--pp-red);
}

.pp-page-link.is-open,
.pp-page-link.is-open::before {
    color: var(--pp-red);
}

.pp-prose {
    font-size: 0.95em;
    line-height: 1.6;
    color: var(--pp-ink-soft);
}

.pp-prose > :first-child {
    margin-top: 0;
}

.pp-prose p,
.pp-prose ul,
.pp-prose ol {
    margin: 0 0 1em;
}

.pp-prose h2,
.pp-prose h3 {
    margin: 1.9em 0 0.5em;
    color: var(--pp-ink);
    font-weight: 800;
    line-height: 1.2;
    letter-spacing: 0.03em;
    text-transform: uppercase;
}

.pp-prose h2 {
    font-size: 1.15em;

    padding-bottom: 0.4em;
    border-bottom: 1px solid rgba(36, 31, 26, 0.2);
}

.pp-prose h3 {
    margin-top: 1.4em;
    font-size: 1em;
    letter-spacing: 0.06em;
    color: rgba(36, 31, 26, 0.78);
}

.pp-prose ul,
.pp-prose ol {
    padding-left: 1.3em;
}

.pp-prose li {
    margin-bottom: 0.3em;
}

.pp-prose li::marker {
    color: var(--pp-red);
}

.pp-prose strong {
    color: var(--pp-ink);
    font-weight: 800;
}

.pp-prose a {
    color: var(--pp-red);
    text-decoration: underline;
    text-underline-offset: 0.16em;
    text-decoration-thickness: 1px;
}

.pp-prose a:hover {
    color: var(--pp-red-deep);
}

.pp-prose img {
    display: block;
    width: 100%;
    height: auto;
    margin: 1.4em 0;
}

.pp-prose blockquote {
    margin: 1.4em 0;
    padding-left: 1.1em;
    border-left: 2px solid var(--pp-red);
    font-style: italic;
}

.pp-prose hr {
    height: 0;
    margin: 1.8em 0;
    border: 0;
    border-top: 1px solid rgba(36, 31, 26, 0.2);
}

.pp-prose-updated {
    margin-bottom: 1.4em;
    padding-bottom: 1.3em;
    border-bottom: 1px solid rgba(36, 31, 26, 0.22);
    font-size: 0.75em;
    font-weight: 800;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: rgba(36, 31, 26, 0.45);
}

/* Standalone pages that borrow this stylesheet without being the book. The
   body is a fixed, unscrollable stage for the flipbook, so the page scrolls
   inside this layer instead of fighting it. */
.pp-standalone {
    position: fixed;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow-y: auto;
    padding: 24px;
}

.pp-welcome {
    width: min(38em, 100%);
    margin: auto;
    padding: 2.4em 2.6em 2em;

    /* Same paper as a page of the book, without the page. */
    --pp-ink: #241f1a;
    --pp-ink-soft: rgba(36, 31, 26, 0.62);
    --pp-rule: rgba(36, 31, 26, 0.22);
    --pp-red: #bf2c26;
    --pp-red-deep: #9a2317;
    --tk-mono: ui-monospace, "SF Mono", SFMono-Regular, Menlo, Consolas, monospace;
    background-color: #efeadd;
    background-image:
        linear-gradient(to bottom, rgba(120, 100, 72, 0.16), rgba(120, 100, 72, 0) 18px),
        linear-gradient(to top, rgba(120, 100, 72, 0.16), rgba(120, 100, 72, 0) 18px),
        radial-gradient(120% 90% at 30% 15%, rgba(255, 255, 255, 0.6), rgba(255, 255, 255, 0) 55%),
        radial-gradient(110% 90% at 75% 95%, rgba(150, 128, 94, 0.12), rgba(150, 128, 94, 0) 55%);
    border-radius: 3px;
    box-shadow: 0 26px 55px rgba(0, 0, 0, 0.55);
    font-size: clamp(13px, 1.5vh, 17px);
    color: var(--pp-ink);

    /* The body suppresses selection for the page-turn drag. A licence key has
       to be selectable. */
    -webkit-user-select: text;
    user-select: text;
}

.pp-welcome-wordmark {
    display: block;
    width: 13em;
    max-width: 100%;
    height: auto;
}

.pp-welcome-head .pp-masthead-rule {
    margin-top: 0.8em;
}

.pp-welcome-title {
    margin: 1.4em 0 0;
    font-size: 2em;
    font-weight: 800;
    line-height: 1.05;
    letter-spacing: 0.02em;
    text-transform: uppercase;
}

.pp-welcome-lede {
    margin: 0.7em 0 0;
    font-size: 1em;
    line-height: 1.6;
    color: var(--pp-ink-soft, rgba(36, 31, 26, 0.62));
}

.pp-welcome-key {
    margin-top: 1.6em;
    padding: 1.1em 1.2em;
    border: 1px dashed rgba(36, 31, 26, 0.38);
    background-color: rgba(255, 255, 255, 0.35);
}

.pp-welcome-key-label {
    display: block;
    font-size: 0.7em;
    font-weight: 800;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: rgba(36, 31, 26, 0.5);
}

.pp-welcome-key-value {
    display: block;
    margin-top: 0.4em;
    font-family: var(--tk-mono, "Sofia Sans", monospace);
    font-size: 1.35em;
    font-weight: 800;
    letter-spacing: 0.06em;

    /* Breaks between groups on a narrow screen, never mid-group. */
    word-break: normal;
    overflow-wrap: anywhere;
}

.pp-welcome-button {
    display: block;
    margin-top: 1.4em;
    padding: 0.85em 1.2em;
    background-color: var(--pp-red, #bf2c26);
    color: #fff;
    font-size: 1em;
    font-weight: 800;
    letter-spacing: 0.16em;
    text-align: center;
    text-transform: uppercase;
    text-decoration: none;
    transition: background-color 180ms ease;
}

.pp-welcome-button:hover,
.pp-welcome-button:focus-visible {
    background-color: var(--pp-red-deep, #9a2317);
    outline: none;
}

.pp-welcome-button.is-placeholder {
    background-color: rgba(36, 31, 26, 0.35);
    cursor: not-allowed;
}

.pp-welcome-note {
    margin: 1em 0 0;
    font-size: 0.82em;
    line-height: 1.5;
    color: rgba(36, 31, 26, 0.55);
}

.pp-welcome-foot {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: 0.6em 1.2em;
    margin-top: 1.8em;
    padding-top: 1.1em;
    border-top: 1px solid var(--pp-rule, rgba(36, 31, 26, 0.22));
    font-size: 0.85em;
    color: var(--pp-ink-soft, rgba(36, 31, 26, 0.62));
}

.pp-welcome-foot a {
    color: var(--pp-red, #bf2c26);
    text-decoration: underline;
    text-underline-offset: 0.16em;
}

/* The key's own status line on /welcome, and the resend form. */
.pp-welcome-key-value.is-waiting {
    color: rgba(36, 31, 26, 0.3);
}

.pp-welcome-key-status {
    margin: 0.6em 0 0;
    font-size: 0.85em;
    line-height: 1.5;
    color: var(--pp-ink-soft, rgba(36, 31, 26, 0.62));
}

.pp-welcome-key-status a,
.pp-welcome-lede a {
    color: var(--pp-red, #bf2c26);
    text-decoration: underline;
    text-underline-offset: 0.16em;
}

.pp-welcome-form {
    display: grid;
    gap: 0.5em;
    margin-top: 1.4em;
}

.pp-welcome-input {
    width: 100%;
    padding: 0.75em 0.9em;
    border: 1px solid rgba(36, 31, 26, 0.38);
    border-radius: 2px;
    background-color: rgba(255, 255, 255, 0.55);
    color: var(--pp-ink, #241f1a);
    font: inherit;
}

.pp-welcome-input:focus {
    outline: 2px solid var(--pp-red, #bf2c26);
    outline-offset: 1px;
}

.pp-welcome-error {
    margin: 0;
    font-size: 0.85em;
    color: var(--pp-red-deep, #9a2317);
}

button.pp-welcome-button {
    width: 100%;
    border: 0;
    font-family: inherit;
    cursor: pointer;
}

@media (max-width: 480px) {
    .pp-standalone {
        padding: 16px;
    }

    .pp-welcome {
        padding: 1.8em 1.5em 1.5em;
    }
}

.pp-price {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    justify-content: space-between;
    gap: 0.8em 1.2em;
    margin-bottom: 1.6em;
    padding: 1.2em 0;
    border-top: 1px solid var(--pp-rule);
    border-bottom: 1px solid var(--pp-rule);
}

.pp-price-title {
    display: block;
    font-size: 1.15em;
    font-weight: 800;
    line-height: 1.2;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--pp-ink);
}

.pp-price-sub {
    display: block;
    margin-top: 0.2em;
    font-size: 0.85em;
    color: var(--pp-ink-soft);
}

.pp-price-figure {
    text-align: right;
}

.pp-price-amount {
    display: block;
    font-size: 2.6em;
    font-weight: 800;
    line-height: 1;
    letter-spacing: -0.01em;
    color: var(--pp-red);
}

.pp-price-tax {
    display: block;
    margin-top: 0.35em;
    font-size: 0.68em;
    font-weight: 700;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: rgba(36, 31, 26, 0.5);
}

.pp-contact {
    margin-top: 1.6em;
    border-top: 1px solid rgba(36, 31, 26, 0.22);
}

.pp-contact-row {
    display: flex;
    align-items: center;
    gap: 1.1em;
    padding: 1em 0.6em 1em 0;
    border-bottom: 1px solid rgba(36, 31, 26, 0.14);
    color: inherit;
    text-decoration: none;
    transition: background-color 180ms ease;
}

.pp-contact-row:hover,
.pp-contact-row:focus-visible {
    background-color: rgba(36, 31, 26, 0.045);
    outline: none;
}

.pp-contact-icon {
    flex: none;
    display: flex;
    width: 2em;
    color: var(--pp-ink);
}

.pp-contact-icon svg {
    width: 100%;
    height: auto;
}

.pp-contact-label {
    display: block;
    font-size: 0.72em;
    font-weight: 800;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: rgba(36, 31, 26, 0.5);
}

.pp-contact-value {
    display: block;
    margin-top: 0.15em;
    font-size: 1.05em;
    font-weight: 700;
}

.pp-article-back {
    display: inline-flex;
    align-items: center;
    gap: 0.45em;
    margin-bottom: 1.3em;
    color: var(--pp-ink-soft);
    font-size: 0.78em;
    font-weight: 800;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    text-decoration: none;
}

.pp-article-back svg {
    width: 1.05em;
    height: auto;
    color: var(--pp-red);
}

.pp-article-back:hover,
.pp-article-back:focus-visible {
    color: var(--pp-ink);
    outline: none;
}

.pp-article-date {
    font-size: 0.72em;
    font-weight: 800;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: var(--pp-red);
}

.pp-article-title {
    margin-top: 0.3em;
    font-size: 1.7em;
    font-weight: 800;
    line-height: 1.1;
    letter-spacing: 0.01em;
    text-transform: uppercase;
}

.pp-article-byline {
    margin-top: 0.5em;
    padding-bottom: 1.2em;
    border-bottom: 1px solid rgba(36, 31, 26, 0.22);
    font-size: 0.85em;
    color: var(--pp-ink-soft);
}

.pp-article-byline strong {
    color: var(--pp-ink);
    font-weight: 800;
}

.pp-article-hero {
    margin: 1.3em 0;
}

.pp-article-hero img {
    display: block;
    width: 100%;
    height: auto;
}

.pp-article .pp-prose {
    margin-top: 1.3em;
}

[data-article-host].is-loading {
    opacity: 0.4;
    transition: opacity 200ms ease;
}

@media (orientation: portrait) and (max-width: 1024px) {
    .af-flow {
        font-size: clamp(11px, min(3.6vw, 1.9vh), 22px);
    }

    .af-flow-inner {
        padding: 2.3em 1.5em 2.6em;
    }

    .pp-flow {
        margin-top: 1.6em;
        padding-right: 0.4em;
    }

    .pp-post-thumb {
        width: 5.4em;
    }

    .pp-post-title {
        font-size: 1.1em;
    }

    .pp-index-item.is-open {
        background-color: transparent;
    }

    .pp-index-item.is-open .pp-index-num {
        color: rgba(36, 31, 26, 0.4);
    }

    .pp-page-link.is-open,
    .pp-page-link.is-open::before {
        color: inherit;
    }
}

@media (orientation: landscape) and (max-width: 1366px),
       (orientation: landscape) and (max-height: 700px) {
    .af-flow {
        font-size: clamp(11px, min(1.5vw, 2vh), 18px);
    }

    .af-flow-inner {
        padding: 2em 2.2em 2.4em;
    }
}

.pp-feature {
    display: flex;
    align-items: flex-start;
    gap: 1.1em;
    padding: 1.3em 0;
    border-top: 1px solid rgba(36, 31, 26, 0.16);
}

.pp-feature:first-of-type {
    border-top: 0;
}

.pp-feature-num {
    flex: none;
    width: 2em;
    font-size: 1.1em;
    font-weight: 800;
    letter-spacing: 0.03em;
    color: rgba(36, 31, 26, 0.35);
}

.pp-feature-text {
    flex: 1 1 auto;
    min-width: 0;
}

.pp-feature-title {
    font-size: 1.2em;
    font-weight: 800;
    line-height: 1.1;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

.pp-feature-text p {
    margin-top: 0.45em;
    font-size: 0.92em;
    line-height: 1.55;
    color: var(--pp-ink-soft);
}

.pp-feature-stats {
    display: flex;
    gap: 1em;
    margin-top: 1.4em;
    padding: 1.1em 0;
    border-top: 1px solid rgba(36, 31, 26, 0.22);
    border-bottom: 1px solid rgba(36, 31, 26, 0.22);
}

.pp-feature-stat {
    flex: 1 1 0;
    min-width: 0;
}

.pp-feature-stat-num {
    display: block;
    font-size: 1.5em;
    font-weight: 800;
    line-height: 1;
    letter-spacing: -0.01em;
    color: var(--pp-red);
}

.pp-feature-stat-label {
    display: block;
    margin-top: 0.35em;
    font-size: 0.68em;
    font-weight: 700;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: rgba(36, 31, 26, 0.5);
}

.pp-feature-note {
    margin-top: 1.4em;
    padding-top: 1.2em;
    border-top: 1px solid rgba(36, 31, 26, 0.16);
    font-size: 0.85em;
    line-height: 1.5;
    color: var(--pp-ink-soft);
}

.pp-legal-index {
    margin-top: 0.4em;
    border: 1px solid rgba(36, 31, 26, 0.22);
}

.pp-legal-item {
    position: relative;
    display: flex;
    align-items: center;
    gap: 1em;
    padding: 1em 1.1em;
    border-top: 1px solid rgba(36, 31, 26, 0.14);
    color: inherit;
    text-decoration: none;
    transition: background-color 180ms ease;
}

.pp-legal-item:first-child {
    border-top: 0;
}

.pp-legal-item:hover,
.pp-legal-item:focus-visible,
.pp-legal-item.is-open {
    background-color: rgba(36, 31, 26, 0.05);
    outline: none;
}

.pp-legal-num {
    flex: none;
    font-size: 0.95em;
    font-weight: 700;
    color: rgba(36, 31, 26, 0.4);
}

.pp-legal-item.is-open .pp-legal-num {
    color: var(--pp-red);
}

.pp-legal-text {
    flex: 1 1 auto;
    min-width: 0;
}

.pp-legal-title {
    display: block;
    font-size: 1.05em;
    font-weight: 800;
    line-height: 1.1;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

.pp-legal-sub {
    display: block;
    margin-top: 0.15em;
    font-size: 0.82em;
    color: var(--pp-ink-soft);
}

.pp-legal-chev {
    flex: none;
    width: 1.05em;
    height: auto;
    color: var(--pp-red);
}

.pp-post.is-open {
    background-color: rgba(36, 31, 26, 0.06);
}

.pp-post.is-open .pp-post-date {
    color: var(--pp-red-deep);
}

.pp-flow-home {
    display: block;
    max-width: 62%;
    color: inherit;
    text-decoration: none;
    transition: opacity 180ms ease;
}

.pp-flow-home:hover,
.pp-flow-home:focus-visible {
    opacity: 0.62;
    outline: none;
}

.pp-flow-wordmark {
    display: block;
    width: 14em;
    max-width: 100%;
    height: auto;
}

@media (orientation: portrait) and (max-width: 1024px) {
    .pp-flow-wordmark {
        width: 12.5em;
    }
}

.af-contents .pp-masthead,
.af-flow .pp-masthead {

    min-height: 1.5em;
}

.pp-head {
    flex: none;
}

.pp-contents-aside {
    display: none;
}

@media (orientation: landscape) and (max-width: 1366px),
       (orientation: landscape) and (max-height: 700px) {
    .af-contents-inner {
        display: grid;
        grid-template-columns: 1fr 1fr;

        grid-template-rows: auto auto auto 1fr auto auto;
        column-gap: 2.4em;
        align-content: start;
    }

    .af-contents-inner > .pp-head {
        grid-area: 1 / 1 / 2 / 3;
    }

    .pp-featured {
        grid-area: 2 / 1 / 3 / 2;
        align-self: start;
        margin-top: 1.9em;
    }

    .pp-index {
        grid-area: 3 / 1 / 4 / 2;
        align-self: start;
        margin-top: 1.7em;
    }

    .pp-page-links {
        grid-area: 4 / 1 / 5 / 2;
        align-self: start;
        margin-top: 1.3em;

        grid-template-columns: 1fr;
        row-gap: 0;
    }

    .pp-contents-aside {
        grid-area: 2 / 2 / 5 / 3;
        display: block;
        min-height: 0;
        margin-top: 1.9em;
        padding-right: 1em;
        overflow-y: auto;
        overscroll-behavior: contain;
    }

    .pp-social {
        grid-area: 5 / 1 / 6 / 3;
    }

    .af-contents-inner > .pp-contents-foot {
        grid-area: 6 / 1 / 7 / 3;
    }
}

@media (orientation: landscape) and (max-width: 1366px),
       (orientation: landscape) and (max-height: 700px) {
    .pp-ticket-barcode {
        display: none;
    }

    .pp-ticket-body {
        mask-image: radial-gradient(circle var(--tk-notch) at 0 calc(var(--tk-notch-gap) / 2),
            transparent 98%, #000 100%);
        mask-size: 100% var(--tk-notch-gap);
        mask-repeat: repeat-y;
        -webkit-mask-image: radial-gradient(circle var(--tk-notch) at 0 calc(var(--tk-notch-gap) / 2),
            transparent 98%, #000 100%);
        -webkit-mask-size: 100% var(--tk-notch-gap);
        -webkit-mask-repeat: repeat-y;
    }

    .pp-ticket-band,
    .pp-ticket-strip,
    .pp-ticket-grid,
    .pp-ticket-foot {
        padding-left: 1.3em;
    }

    .pp-ticket-band {
        gap: 0.7em;
    }

    .pp-ticket-title {
        font-size: 1.45em;
    }

    .pp-ticket-badge {
        width: 2.2em;
    }

    .pp-ticket-season {
        display: none;
    }

    .pp-ticket-strip i {
        display: none;
    }

    .pp-ticket-headline {
        flex-direction: column;
        align-items: flex-start;
        gap: 0.42em;
        font-size: 0.95em;
    }

    .pp-ticket-headline b {
        white-space: nowrap;
    }

    .pp-ticket-fields {
        gap: 0.6em 1.1em;
        font-size: 0.95em;
    }

    .pp-ticket-field {
        flex: 1 1 40%;
    }

    .pp-ticket-stub {
        padding: 0.9em 0.6em;
    }

    .pp-ticket-price {
        font-size: 2.1em;
    }

    .pp-ticket-cta {
        font-size: 0.95em;
    }
}

.pp-showcase-item {
    padding-top: 1.5em;
    border-top: 1px solid rgba(36, 31, 26, 0.16);
}

.pp-showcase-item:first-child {
    padding-top: 0;
    border-top: 0;
}

.pp-showcase-item + .pp-showcase-item {
    margin-top: 1.5em;
}

.pp-showcase-shot {
    margin-bottom: 0.85em;
    aspect-ratio: 16 / 9;
    overflow: hidden;
    background: rgba(36, 31, 26, 0.08);
}

.pp-showcase-shot img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.pp-showcase-title {
    font-size: 1.15em;
    font-weight: 800;
    line-height: 1.15;
    letter-spacing: 0.03em;
    text-transform: uppercase;
}

.pp-showcase-desc {
    margin-top: 0.45em;
    font-size: 0.9em;
    line-height: 1.5;
    color: var(--pp-ink-soft);
}

.pp-pitch-headline {
    font-family: 'Covered By Your Grace', 'Sofia Sans', sans-serif;

    font-size: 3.5em;
    font-weight: 400;

    line-height: 0.95;
    letter-spacing: 0.005em;
    text-transform: uppercase;

    transform: rotate(-3deg);
    transform-origin: 0 50%;
}

[data-page="intro"] .pp-masthead-rule-ink {
    background: transparent;
}

[data-page="intro"] .pp-pitch-headline {

    margin-top: -0.04em;
}

[data-page="intro"] .pp-flow {
    margin-top: 0.15em;
}

.pp-pitch-headline span {
    display: block;
}

.pp-pitch-red {
    color: var(--pp-red);
}

.pp-pitch-strap {
    display: flex;
    align-items: center;
    gap: 1em;
    margin-top: 0.85em;
}

.pp-pitch-strap-rule {
    flex: 1 1 auto;
    height: 1px;
    background: rgba(36, 31, 26, 0.55);
}

.pp-pitch-strap-text {
    flex: none;
    font-size: 0.95em;
    font-weight: 800;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

.pp-pitch-lede {
    margin-top: 0.75em;
    font-size: 1em;
    line-height: 1.45;
    text-align: center;
    color: var(--pp-ink-soft);
}

.pp-pitch-lede-strong {
    margin-top: 0.7em;
    font-weight: 700;
    color: var(--pp-ink);
}

.pp-pitch-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    margin-top: 0.95em;
}

.pp-pitch-cell {
    padding: 0 0.9em;
    border-left: 1px solid rgba(36, 31, 26, 0.16);
    text-align: center;
}

.pp-pitch-cell:first-child {
    border-left: 0;
}

.pp-pitch-icon {
    display: flex;
    justify-content: center;
}

.pp-pitch-icon svg {
    width: 3.4em;
    height: auto;
}

.pp-pitch-icon-red { color: var(--pp-red); }
.pp-pitch-icon-ink { color: #1f2a44; }
.pp-pitch-icon-blue { color: #2f5da8; }
.pp-pitch-icon-gold { color: #c08a24; }

.pp-pitch-cell-title {
    margin-top: 0.7em;
    font-size: 0.95em;
    font-weight: 800;
    line-height: 1.15;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

.pp-pitch-cell-desc {
    margin-top: 0.42em;
    font-size: 0.82em;
    line-height: 1.4;
    color: var(--pp-ink-soft);
}

.pp-pitch-cta {
    position: relative;
    display: flex;
    align-items: stretch;
    margin-top: 0.45em;
    padding: 0.75em;
}

.pp-pitch-cta::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 1;
    pointer-events: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 400 120' preserveAspectRatio='none'%3E%3Cpath d='M4.5,6.5 C90,3.4 210,8.2 396,4.6 C398.4,40 396.2,84 397.5,114.5 C260,117.8 120,112.6 5.2,116.2 C2.6,80 6.4,42 3.4,5.2' fill='none' stroke='%23bf2c26' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round' vector-effect='non-scaling-stroke'/%3E%3C/svg%3E");
    background-size: 100% 100%;
    background-repeat: no-repeat;
}

.pp-pitch-cta-text {
    flex: 1 1 auto;
    min-width: 0;
    padding: 0.75em 1.1em 0.8em;
}

.pp-pitch-cta-title {
    font-size: 1em;
    font-weight: 800;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--pp-red);
}

.pp-pitch-cta-text p {
    margin-top: 0.4em;
    font-size: 0.85em;
    line-height: 1.45;
    color: var(--pp-ink-soft);
}

.pp-pitch-cta-panel {
    flex: none;
    width: 7.6em;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.05em;
    padding: 0.7em;
    background: var(--pp-red);
    color: var(--tk-paper);
    font-size: 0.95em;
    font-weight: 800;
    line-height: 1;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    text-decoration: none;
    transition: filter 220ms ease;
}

.pp-pitch-cta-panel {
    position: relative;
    isolation: isolate;
}

.pp-pitch-cta-panel::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='4' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)'/%3E%3C/svg%3E");
    background-size: 160px 160px;
    opacity: 0.28;
    mix-blend-mode: multiply;
    pointer-events: none;
}

.pp-pitch-cta-panel:hover,
.pp-pitch-cta-panel:focus-visible {
    filter: brightness(1.1);
    outline: none;
}

.pp-pitch-sign {
    display: flex;
    align-items: flex-end;
    margin-top: 0.35em;
}

.pp-pitch-sign-text {
    flex: 1 1 auto;
    text-align: right;
    font-size: 0.86em;
    font-weight: 700;
    font-style: italic;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--pp-ink);
}

.pp-pitch-sign-arrow {
    flex: none;
    display: flex;
    margin-right: 2.35em;
    margin-bottom: 0.2em;
    color: var(--pp-ink);
}

.pp-pitch-sign-arrow svg {
    width: 4.4em;
    height: auto;
}

@media (orientation: landscape) and (max-width: 1366px),
       (orientation: landscape) and (max-height: 700px) {
    .pp-pitch-headline {
        font-size: 2em;
    }

    .pp-pitch-strap-text {
        font-size: 0.85em;
    }

    .pp-pitch-lede {
        font-size: 0.92em;
    }

    .pp-pitch-grid {
        grid-template-columns: repeat(2, 1fr);
        row-gap: 1.3em;
    }

    .pp-pitch-cell:nth-child(odd) {
        border-left: 0;
    }

    .pp-pitch-cta-panel {
        width: 8em;
        font-size: 1em;
    }

    .pp-pitch-sign-text {
        font-size: 0.8em;
    }
}

/* Early access dialogue -----------------------------------------------------
   Sits above the book (which is a fixed, unscrollable stage), so the card
   scrolls inside itself rather than scrolling the page behind it. */
.pp-modal {
    position: fixed;
    inset: 0;
    z-index: 50;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 24px;
}

.pp-modal[hidden] {
    display: none;
}

.pp-modal-backdrop {
    position: absolute;
    inset: 0;
    background-color: rgba(12, 10, 8, 0.62);
}

.pp-modal-card {
    position: relative;
    width: min(34em, 100%);
    max-height: calc(100dvh - 48px);
    overflow-y: auto;
    padding: 2em 2.2em 1.8em;

    --pp-ink: #241f1a;
    --pp-ink-soft: rgba(36, 31, 26, 0.62);
    --pp-rule: rgba(36, 31, 26, 0.22);
    --pp-red: #bf2c26;
    --pp-red-deep: #9a2317;
    background-color: #efeadd;
    background-image:
        linear-gradient(to bottom, rgba(120, 100, 72, 0.16), rgba(120, 100, 72, 0) 18px),
        linear-gradient(to top, rgba(120, 100, 72, 0.16), rgba(120, 100, 72, 0) 18px),
        radial-gradient(120% 90% at 30% 15%, rgba(255, 255, 255, 0.6), rgba(255, 255, 255, 0) 55%),
        radial-gradient(110% 90% at 75% 95%, rgba(150, 128, 94, 0.12), rgba(150, 128, 94, 0) 55%);
    border-radius: 3px;
    box-shadow: 0 26px 55px rgba(0, 0, 0, 0.55);
    font-size: clamp(13px, 1.5vh, 16px);
    color: var(--pp-ink);

    -webkit-user-select: text;
    user-select: text;
    animation: pp-modal-in 220ms cubic-bezier(0.2, 0.7, 0.3, 1);
}

@keyframes pp-modal-in {
    from { opacity: 0; transform: translateY(10px) scale(0.985); }
    to   { opacity: 1; transform: none; }
}

@media (prefers-reduced-motion: reduce) {
    .pp-modal-card { animation: none; }
}

.pp-modal-close {
    position: absolute;
    top: 0.7em;
    right: 0.7em;
    width: 2em;
    height: 2em;
    padding: 0.4em;
    border: 0;
    background: none;
    color: rgba(36, 31, 26, 0.5);
    cursor: pointer;
    transition: color 150ms ease;
}

.pp-modal-close:hover,
.pp-modal-close:focus-visible {
    color: var(--pp-red);
    outline: none;
}

.pp-modal-close svg {
    display: block;
    width: 100%;
    height: 100%;
}

.pp-modal-kicker {
    display: block;
    font-size: 0.7em;
    font-weight: 800;
    letter-spacing: 0.24em;
    text-transform: uppercase;
    color: var(--pp-red);
}

.pp-modal-title {
    margin: 0.3em 0 0;
    font-size: 1.9em;
    font-weight: 800;
    line-height: 1.05;
    letter-spacing: 0.02em;
    text-transform: uppercase;
}

.pp-modal-head .pp-masthead-rule {
    margin-top: 0.7em;
}

.pp-modal-lede {
    margin: 1.1em 0 0;
    font-size: 1em;
    line-height: 1.6;
    color: var(--pp-ink-soft);
}

.pp-modal-points {
    margin: 1.1em 0 0;
    padding-left: 1.2em;
    font-size: 0.95em;
    line-height: 1.55;
    color: var(--pp-ink-soft);
}

.pp-modal-points li {
    margin-bottom: 0.55em;
}

.pp-modal-points li::marker {
    color: var(--pp-red);
}

.pp-modal-points strong {
    color: var(--pp-ink);
    font-weight: 800;
}

.pp-modal-lede strong {
    color: var(--pp-ink);
    font-weight: 800;
}

.pp-modal-block {
    margin-top: 1.2em;
    padding-top: 1.1em;
    border-top: 1px solid var(--pp-rule);
}

.pp-modal-subtitle {
    margin: 0;
    font-size: 0.78em;
    font-weight: 800;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--pp-red);
}

.pp-modal-block p {
    margin: 0.5em 0 0;
    font-size: 0.95em;
    line-height: 1.55;
    color: var(--pp-ink-soft);
}

.pp-modal-actions {
    display: flex;
    align-items: center;
    gap: 1em;
    margin-top: 1.4em;
    padding-top: 1.3em;
    border-top: 1px solid var(--pp-rule);
}

.pp-modal-buy {
    flex: 1 1 auto;
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 1em;
    padding: 0.9em 1.2em;
    border: 0;
    background-color: var(--pp-red);
    color: #fff;
    font-family: inherit;
    cursor: pointer;
    transition: background-color 180ms ease;
}

.pp-modal-buy:hover,
.pp-modal-buy:focus-visible {
    background-color: var(--pp-red-deep);
    outline: none;
}

/* Not on sale yet: the button says when, and cannot be pressed. */
.pp-modal-buy:disabled,
.pp-modal-buy:disabled:hover {
    justify-content: center;
    background-color: rgba(36, 31, 26, 0.35);
    cursor: not-allowed;
}

.pp-modal-buy-label {
    font-size: 1em;
    font-weight: 800;
    letter-spacing: 0.16em;
    text-transform: uppercase;
}

.pp-modal-buy-price {
    font-size: 1.35em;
    font-weight: 800;
    letter-spacing: -0.01em;
}

.pp-modal-cancel {
    flex: none;
    padding: 0.9em 0.2em;
    border: 0;
    background: none;
    color: var(--pp-ink-soft);
    font-family: inherit;
    font-size: 0.9em;
    font-weight: 700;
    cursor: pointer;
    transition: color 150ms ease;
}

.pp-modal-cancel:hover,
.pp-modal-cancel:focus-visible {
    color: var(--pp-ink);
    outline: none;
}

.pp-modal-note {
    margin: 1.1em 0 0;
    font-size: 0.8em;
    line-height: 1.5;
    color: rgba(36, 31, 26, 0.55);
}

@media (max-width: 480px) {
    .pp-modal {
        padding: 14px;
    }

    .pp-modal-card {
        padding: 1.7em 1.4em 1.4em;
    }

    .pp-modal-actions {
        flex-direction: column;
        align-items: stretch;
        gap: 0.4em;
    }
}

/* The price elements start empty and hidden, and some of them carry a display
   rule of their own, which would otherwise beat the hidden attribute. */
[hidden] {
    display: none !important;
}

/* The cover's contents list links straight to each post. Anchors would
   otherwise arrive blue and underlined on top of the cover photo. */
a.pp-cover-contents-item {
    color: inherit;
    text-decoration: none;
    transition: opacity 150ms ease;
}

a.pp-cover-contents-item:hover,
a.pp-cover-contents-item:focus-visible {
    opacity: 0.75;
    outline: none;
}

a.pp-cover-contents-item:hover .pp-cover-contents-head,
a.pp-cover-contents-item:focus-visible .pp-cover-contents-head {
    text-decoration: underline;
    text-underline-offset: 0.2em;
    text-decoration-thickness: 1px;
}