/*
 * Template "Poster Film" (Save the Date): a cinema "segera tayang" one-sheet.
 * Colors from the chosen variant: --inv-primary (poster base, dark sections), --inv-accent (title foil,
 * numbers), --inv-background (paper of the premiere section), --inv-text (ink), --inv-shade (teal lift in
 * the photo's shadows), --inv-glow (warm grade on the highlights), --inv-mark (labels on paper).
 * Fonts: Bebas Neue (title, numbers), Oswald (billing, labels), Cormorant Garamond (italic lines).
 */

:root {
    --inv-primary: #15110d; --inv-accent: #d9ad4f; --inv-background: #f3ead9; --inv-text: #1d1712;
    --inv-shade: #0e3940; --inv-glow: #e0893a; --inv-mark: #8f2a1e;
    --pf-title: 'Bebas Neue', 'Oswald', Impact, 'Arial Narrow', sans-serif;
    --pf-cond: 'Oswald', 'Arial Narrow', sans-serif;
    --pf-serif: 'Cormorant Garamond', Georgia, serif;
    --pf-foil: linear-gradient(180deg,
        color-mix(in srgb, var(--inv-accent) 45%, #fff7e4) 0%,
        var(--inv-accent) 46%,
        color-mix(in srgb, var(--inv-accent) 78%, #4a2c00) 100%);
    --pf-chalk: #f2eee6;
    --pf-board: color-mix(in srgb, var(--inv-primary) 30%, #171615);
    --pf-grain: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
    --pf-gutter: 1.25rem;
}

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

html { background: var(--inv-primary); overflow-x: clip; }
body {
    margin: 0;
    min-height: 100vh;
    overflow-x: hidden;
    background:
        radial-gradient(50rem 32rem at 50% 0, color-mix(in srgb, var(--inv-accent) 14%, transparent), transparent 70%),
        color-mix(in srgb, var(--inv-primary) 82%, #000);
    color: var(--inv-text);
    font-family: var(--pf-cond);
    font-weight: 300;
    font-size: 15px;
    line-height: 1.6;
    -webkit-font-smoothing: antialiased;
}

.pf-preview {
    position: sticky; top: 0; z-index: 60; padding: .5rem 1rem; text-align: center;
    background: #fff4d6; color: #6b4e00; font-family: system-ui, sans-serif; font-size: .8125rem;
}

.pf {
    position: relative;
    max-width: 30rem; margin: 0 auto;
    background: var(--inv-primary);
    box-shadow: 0 0 90px rgb(0 0 0 / .45);
}

/* shared label: condensed capitals with thin rules either side */
.pf-label {
    display: flex; align-items: center; justify-content: center; gap: .8rem;
    margin: 0;
    font-family: var(--pf-cond); font-weight: 500; font-size: .72rem; line-height: 1.2;
    letter-spacing: .36em; text-transform: uppercase;
    color: var(--inv-mark);
}
.pf-label::before, .pf-label::after { content: ''; width: 1.8rem; height: 1px; background: currentColor; opacity: .55; }
.pf-label--small { font-size: .64rem; }
.pf-label--light { color: var(--inv-accent); }

/* ===================== 1. the poster ===================== */
.pf-poster {
    position: relative; isolation: isolate; overflow: hidden;
    display: flex; flex-direction: column; justify-content: space-between;
    min-height: 100vh; min-height: 100svh;
    background: var(--inv-primary);
    color: #fff;
}

.pf-art { position: absolute; inset: 0; z-index: -1; overflow: hidden; }
.pf-art > * { position: absolute; inset: 0; }
.pf-art__img {
    display: block; width: 100%; height: 100%; object-fit: cover; object-position: 50% 40%;
    filter: contrast(1.12) saturate(1.08) brightness(.95);
}
/* colour grade: lift the shadows towards teal, warm the highlights */
.pf-art__grade { background: var(--inv-shade); mix-blend-mode: lighten; opacity: .62; }
.pf-art__warm {
    background: radial-gradient(90% 60% at 72% 28%, var(--inv-glow), transparent 75%);
    mix-blend-mode: soft-light; opacity: .85;
}
/* vignette, a dark head for the header line, and the base the title sits on */
.pf-art__shade {
    background:
        linear-gradient(180deg,
            color-mix(in srgb, var(--inv-primary) 78%, transparent) 0%,
            transparent 24%,
            transparent 46%,
            color-mix(in srgb, var(--inv-primary) 62%, transparent) 64%,
            color-mix(in srgb, var(--inv-primary) 94%, transparent) 82%,
            var(--inv-primary) 100%),
        radial-gradient(130% 85% at 50% 42%, transparent 52%, rgb(0 0 0 / .6) 100%);
}
.pf-art__grain { background: var(--pf-grain); mix-blend-mode: overlay; opacity: .16; }

/* no photo: film-noir light falling through blinds, initials as the key art */
.pf-poster--empty .pf-art {
    background:
        radial-gradient(70% 50% at 62% 30%, color-mix(in srgb, var(--inv-accent) 38%, var(--inv-primary)), transparent 72%),
        radial-gradient(60% 40% at 20% 75%, color-mix(in srgb, var(--inv-shade) 80%, transparent), transparent 70%),
        var(--inv-primary);
}
.pf-art__blinds {
    background: repeating-linear-gradient(-26deg, color-mix(in srgb, var(--inv-glow) 30%, transparent) 0 18px, transparent 18px 44px);
    -webkit-mask: radial-gradient(60% 45% at 66% 32%, #000, transparent 75%);
    mask: radial-gradient(60% 45% at 66% 32%, #000, transparent 75%);
    opacity: .55;
}
.pf-art__initials {
    display: flex; align-items: center; justify-content: center; inset: 0 0 26% 0 !important;
    font-family: var(--pf-title); font-size: min(15rem, 52vw); line-height: 1; letter-spacing: .02em;
    color: transparent;
    -webkit-text-stroke: 1.5px color-mix(in srgb, var(--inv-accent) 70%, transparent);
}
.pf-art__initials i {
    font-family: var(--pf-serif); font-style: italic; font-size: .4em; margin: 0 .08em;
    -webkit-text-stroke: 0; color: color-mix(in srgb, var(--inv-accent) 80%, transparent);
}

/* header line + guest */
.pf-poster__top { padding: calc(1.15rem + env(safe-area-inset-top)) var(--pf-gutter) 0; text-align: center; }
.pf-kicker {
    display: flex; align-items: center; justify-content: center; gap: .9rem;
    margin: 0;
    font-family: var(--pf-cond); font-weight: 400; font-size: .74rem; line-height: 1.3;
    letter-spacing: .42em; text-transform: uppercase; color: rgb(255 255 255 / .9);
}
.pf-kicker span { padding-left: .42em; }
.pf-kicker::before, .pf-kicker::after { content: ''; flex: 0 1 2.4rem; height: 1px; background: color-mix(in srgb, var(--inv-accent) 80%, transparent); }

.pf-guest { margin: .9rem auto 0; max-width: 22rem; }
.pf-guest__label {
    display: block; font-family: var(--pf-cond); font-weight: 400; font-size: .6rem;
    letter-spacing: .3em; text-transform: uppercase; color: var(--inv-accent);
}
.pf-guest__name {
    display: block; margin-top: .15rem;
    font-family: var(--pf-serif); font-style: italic; font-weight: 600; font-size: 1.22rem; line-height: 1.2;
    color: #fff; text-shadow: 0 1px 12px rgb(0 0 0 / .5); text-wrap: balance;
}

/* title, billing, release */
.pf-poster__bottom { padding: 0 var(--pf-gutter) calc(1.1rem + env(safe-area-inset-bottom)); text-align: center; }

.pf-title {
    margin: 0;
    font-family: var(--pf-title); font-weight: 400; line-height: .88; letter-spacing: .03em; text-transform: uppercase;
    font-size: min(var(--pf-cap, 6.2rem), calc((min(100vw, 30rem) - 2.5rem) / (var(--pf-len, 12) * .41)));
    filter: drop-shadow(0 4px 22px rgb(0 0 0 / .55));
    overflow-wrap: anywhere;
}
.pf-title__name {
    background: var(--pf-foil); -webkit-background-clip: text; background-clip: text; color: transparent;
    padding-top: .06em;
}
.pf-title__amp {
    font-family: var(--pf-serif); font-style: italic; font-weight: 500; text-transform: none; letter-spacing: 0;
    color: #fff; font-size: .5em;
}
.pf-title--line { display: flex; align-items: baseline; justify-content: center; gap: .16em; white-space: nowrap; }
.pf-title--stack { --pf-cap: 5.4rem; }
.pf-title--stack .pf-title__name, .pf-title--stack .pf-title__amp { display: block; }
.pf-title--stack .pf-title__amp { margin: .05em 0 .02em; line-height: 1; }

.pf-billing {
    margin: .85rem auto 0; max-width: 21rem;
    font-family: var(--pf-cond); font-weight: 300; font-size: .62rem; line-height: 1.2;
    letter-spacing: .03em; text-transform: uppercase; text-wrap: balance;
    color: rgb(255 255 255 / .72);
}
.pf-billing b { font-weight: 400; font-size: 1.36em; letter-spacing: .05em; color: rgb(255 255 255 / .95); }
.pf-billing small { font-size: .9em; }

.pf-release {
    display: grid; grid-template-columns: 2.1rem 1fr 2.1rem; align-items: center; gap: .6rem;
    margin: .85rem auto 0; max-width: 21rem;
    padding-top: .75rem;
    border-top: 1px solid rgb(255 255 255 / .18);
}
.pf-release__text { margin: 0; }
.pf-release__text span {
    display: block; font-family: var(--pf-cond); font-weight: 400; font-size: .64rem;
    letter-spacing: .44em; padding-left: .44em; text-transform: uppercase; color: var(--inv-accent);
}
.pf-release__text strong {
    display: block; font-family: var(--pf-title); font-weight: 400; font-size: 1.95rem; line-height: 1.05;
    letter-spacing: .06em; color: #fff;
}
.pf-rating {
    display: grid; place-items: center; width: 2.1rem; height: 2.1rem;
    border: 1.5px solid rgb(255 255 255 / .8); border-radius: 3px;
    font-family: var(--pf-cond); font-weight: 500; font-size: .8rem; letter-spacing: .04em; color: #fff;
}
.pf-rating--ghost { border-color: color-mix(in srgb, var(--inv-accent) 70%, transparent); color: var(--inv-accent); font-family: var(--pf-title); font-size: 1.05rem; font-weight: 400; }

/* entrance: letterbox bars open, one sweep of projector light, the key art settles */
.pf-bar, .pf-beam { display: none; }
html.inv-anim .pf-bar {
    display: block; position: absolute; left: 0; right: 0; z-index: 6; height: 50.5%;
    background: #050403;
    animation: pf-bar 1.15s cubic-bezier(.7, 0, .2, 1) .2s both;
}
html.inv-anim .pf-bar--top { top: 0; transform-origin: 50% 0; }
html.inv-anim .pf-bar--bottom { bottom: 0; transform-origin: 50% 100%; }
@keyframes pf-bar { from { transform: scaleY(1); } to { transform: scaleY(0); } }

html.inv-anim .pf-beam {
    display: block; position: absolute; inset: -10% -30%; z-index: 5; pointer-events: none;
    background: linear-gradient(100deg, transparent 38%, rgb(255 238 205 / .08) 44%, rgb(255 238 205 / .34) 50%, rgb(255 238 205 / .08) 56%, transparent 62%);
    mix-blend-mode: screen;
    animation: pf-beam 1.25s cubic-bezier(.4, 0, .3, 1) .75s both;
}
@keyframes pf-beam { from { transform: translateX(-70%); opacity: 1; } 85% { opacity: 1; } to { transform: translateX(70%); opacity: 0; } }

html.inv-anim .pf-art { animation: pf-settle 2.3s cubic-bezier(.2, .7, .2, 1) both; }
@keyframes pf-settle { from { transform: scale(1.07); filter: brightness(.6); } to { transform: none; filter: none; } }

/* ===================== 2. premiere: the slate ===================== */
.pf-premiere {
    position: relative; isolation: isolate;
    padding: 3.4rem var(--pf-gutter) 3.6rem;
    background:
        radial-gradient(30rem 18rem at 50% 0, color-mix(in srgb, var(--inv-accent) 22%, transparent), transparent 70%),
        var(--inv-background);
    text-align: center;
}
.pf-premiere::before {
    content: ''; position: absolute; inset: 0; z-index: -1; pointer-events: none;
    background: var(--pf-grain); mix-blend-mode: multiply; opacity: .1;
}
.pf-premiere__city {
    margin: 1.2rem 0 0; font-family: var(--pf-title); font-size: 2.4rem; letter-spacing: .06em; color: var(--inv-text);
}

.pf-slate {
    position: relative; max-width: 21.5rem; margin: 1.6rem auto 0;
    rotate: -1.5deg;
    filter: drop-shadow(0 18px 22px rgb(0 0 0 / .28)) drop-shadow(0 2px 3px rgb(0 0 0 / .2));
    text-align: left;
}
.pf-slate__sticks { position: relative; height: 3.1rem; }
.pf-slate__clap, .pf-slate__base {
    position: absolute; left: 0; right: 0; height: 1.45rem; border-radius: 3px 3px 0 0;
    background:
        repeating-linear-gradient(-58deg, var(--pf-chalk) 0 15px, var(--pf-board) 15px 30px);
    box-shadow: inset 0 0 0 1px rgb(0 0 0 / .35);
}
.pf-slate__base { bottom: 0; border-radius: 0; background: repeating-linear-gradient(58deg, var(--pf-chalk) 0 15px, var(--pf-board) 15px 30px); }
.pf-slate__clap { bottom: 1.5rem; transform-origin: 4px 100%; }
/* a hinge dot on the left */
.pf-slate__clap::after {
    content: ''; position: absolute; left: 3px; bottom: -.45rem; width: .6rem; height: .6rem; border-radius: 50%;
    background: radial-gradient(circle at 35% 35%, #fff, #8d8d8d 70%);
}
/* the clapstick snaps shut once when the slate scrolls in */
html.inv-anim .pf-slate .pf-slate__clap { transform: rotate(-17deg); transition: transform .32s cubic-bezier(.7, 0, .9, .5) .75s; }
html.inv-anim .pf-slate.is-revealed .pf-slate__clap { transform: none; }

.pf-slate__board {
    position: relative; overflow: hidden;
    padding: .35rem 1rem .5rem;
    border-radius: 0 0 6px 6px;
    background:
        radial-gradient(14rem 6rem at 25% 30%, rgb(255 255 255 / .07), transparent 70%),
        radial-gradient(12rem 7rem at 80% 85%, rgb(255 255 255 / .05), transparent 70%),
        var(--pf-board);
    color: var(--pf-chalk);
}
.pf-slate__board::before {
    content: ''; position: absolute; inset: 0; pointer-events: none;
    background: var(--pf-grain); mix-blend-mode: screen; opacity: .08;
}
.pf-slate__row, .pf-slate__grid > div { position: relative; padding: .55rem 0 .5rem; }
.pf-slate__row + .pf-slate__grid, .pf-slate__grid + .pf-slate__row { border-top: 1px solid rgb(242 238 230 / .32); }
.pf-slate__key {
    display: block; font-family: var(--pf-cond); font-weight: 400; font-size: .58rem; line-height: 1.2;
    letter-spacing: .3em; text-transform: uppercase; color: rgb(242 238 230 / .62);
}
.pf-slate__val {
    display: block; margin-top: .1rem;
    font-family: var(--pf-cond); font-weight: 400; font-size: 1.12rem; line-height: 1.25;
    letter-spacing: .07em; text-transform: uppercase; overflow-wrap: anywhere;
}
.pf-slate__row--prod .pf-slate__val { color: var(--inv-accent); }
.pf-slate__grid { display: grid; grid-template-columns: 1.15fr 1fr 1fr; }
.pf-slate__grid > div + div { padding-left: .8rem; border-left: 1px solid rgb(242 238 230 / .32); }
.pf-slate__grid > div:first-child { padding-right: .6rem; }
.pf-slate__big {
    display: block; margin-top: .15rem;
    font-family: var(--pf-title); font-weight: 400; font-size: 2.35rem; line-height: 1; letter-spacing: .03em;
}
.pf-slate__big--word { font-size: 1.75rem; line-height: 1.34; }

.pf-synopsis { max-width: 22rem; margin: 2.3rem auto 0; }
.pf-synopsis p {
    margin: .7rem 0 0;
    font-family: var(--pf-serif); font-style: italic; font-weight: 500; font-size: 1.32rem; line-height: 1.4;
    color: var(--inv-text); text-wrap: balance;
}

/* ===================== 3. countdown: a strip of film ===================== */
.pf-countdown {
    position: relative; isolation: isolate; overflow: hidden;
    padding: 3.4rem 0 3.2rem;
    background: var(--inv-primary);
    color: #fff; text-align: center;
}
/* the projector's beam falling from the booth at the top, a faint haze in it */
.pf-countdown::before {
    content: ''; position: absolute; inset: 0; z-index: -2;
    background:
        radial-gradient(30rem 11rem at 50% 52%, color-mix(in srgb, var(--inv-shade) 70%, transparent), transparent 72%),
        radial-gradient(22rem 12rem at 50% 0, color-mix(in srgb, var(--inv-accent) 16%, transparent), transparent 70%),
        var(--inv-primary);
}
.pf-countdown__cone {
    position: absolute; left: 50%; top: -2rem; z-index: -1; width: 160%; height: 115%; translate: -50% 0; pointer-events: none;
    background: conic-gradient(from 160deg at 50% 0, transparent 0deg, rgb(255 240 214 / .06) 10deg, rgb(255 240 214 / .19) 20deg, rgb(255 240 214 / .06) 30deg, transparent 40deg);
    -webkit-mask: linear-gradient(180deg, #000 30%, transparent 95%);
    mask: linear-gradient(180deg, #000 30%, transparent 95%);
}
.pf-countdown::after {
    content: ''; position: absolute; inset: 0; z-index: -1; pointer-events: none;
    background: var(--pf-grain); mix-blend-mode: overlay; opacity: .12;
}
.pf-countdown__inner { padding: 0 var(--pf-gutter); }
.pf-heading {
    margin: .55rem 0 0;
    font-family: var(--pf-title); font-weight: 400; font-size: 2.7rem; line-height: 1; letter-spacing: .05em;
    color: #fff;
}

.pf-film { margin-top: 1.7rem; }
.pf-film .inv-countdown {
    position: relative;
    gap: .45rem;
    margin: 0 calc(var(--pf-gutter) * -1 - 1rem);
    padding: 1.55rem calc(var(--pf-gutter) + 1rem);
    background: #0b0a09;
    rotate: -2.5deg;
    box-shadow: 0 16px 34px rgb(0 0 0 / .45);
}
/* sprocket holes along both edges */
.pf-film .inv-countdown::before, .pf-film .inv-countdown::after {
    content: ''; position: absolute; left: 0; right: 0; height: 10px;
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='10'%3E%3Crect x='5' y='1' width='10' height='8' rx='2' fill='%23efe7d6'/%3E%3C/svg%3E") 0 0 / 20px 10px repeat-x;
    opacity: .85;
}
.pf-film .inv-countdown::before { top: .35rem; }
.pf-film .inv-countdown::after { bottom: .35rem; }
.pf-film .inv-countdown__item {
    flex: 1; min-width: 0; padding: .75rem 0 .6rem; border-radius: 3px;
    background:
        radial-gradient(90% 70% at 50% 20%, color-mix(in srgb, var(--inv-accent) 22%, transparent), transparent 75%),
        linear-gradient(170deg, color-mix(in srgb, var(--inv-primary) 60%, #2b2622), #141210);
    box-shadow: inset 0 0 0 1px rgb(255 255 255 / .08);
}
.pf-film .inv-countdown__value {
    font-family: var(--pf-title); font-weight: 400; font-size: 2.45rem; line-height: 1; letter-spacing: .03em;
    background: var(--pf-foil); -webkit-background-clip: text; background-clip: text; color: transparent;
}
.pf-film .inv-countdown__label {
    margin-top: .2rem; font-family: var(--pf-cond); font-weight: 400; font-size: .6rem;
    letter-spacing: .26em; padding-left: .26em; text-transform: uppercase; opacity: 1; color: rgb(255 255 255 / .72);
}
.pf-film .inv-countdown__done { margin: 0; font-family: var(--pf-serif); font-style: italic; font-size: 1.2rem; }
.pf-film .inv-countdown__actions { gap: .5rem; margin-top: 2rem; }
.pf-film .inv-button {
    border-radius: 2px; padding: .65rem 1rem;
    font-family: var(--pf-cond); font-weight: 400; font-size: .68rem; letter-spacing: .2em; text-transform: uppercase;
}
.pf-film .inv-button--outline {
    color: #fff; background: rgb(0 0 0 / .25);
    box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--inv-accent) 75%, transparent);
}

/* ===================== 4. end credits ===================== */
.pf-credits {
    position: relative; isolation: isolate; overflow: hidden;
    padding: 0 var(--pf-gutter) 3.2rem;
    background: var(--inv-primary);
    color: #fff; text-align: center;
}
/* the key art once more, fading into the dark like the last shot before the credits */
.pf-credits__bg {
    position: absolute; left: 0; top: 0; z-index: -1; width: 100%; height: 72%; object-fit: cover; object-position: 50% 30%;
    opacity: .42; filter: contrast(1.1) saturate(.9) sepia(.15);
    -webkit-mask: linear-gradient(180deg, transparent 0%, transparent 6%, #000 30%, rgb(0 0 0 / .55) 58%, transparent 100%);
    mask: linear-gradient(180deg, transparent 0%, transparent 6%, #000 30%, rgb(0 0 0 / .55) 58%, transparent 100%);
}
.pf-credits__inner { padding-top: 4.2rem; }
.pf-credits__message {
    max-width: 22rem; margin: 0 auto;
    font-family: var(--pf-serif); font-style: italic; font-weight: 500; font-size: 1.5rem; line-height: 1.35;
    text-wrap: balance; text-shadow: 0 2px 14px rgb(0 0 0 / .5);
}

.pf-roll { display: grid; gap: .85rem; max-width: 22rem; margin: 2.4rem auto 0; }
.pf-roll > div { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; align-items: baseline; }
.pf-roll dt {
    text-align: right; font-family: var(--pf-cond); font-weight: 300; font-size: .64rem; line-height: 1.5;
    letter-spacing: .24em; text-transform: uppercase; color: var(--inv-accent);
}
.pf-roll dd {
    margin: 0; text-align: left; font-family: var(--pf-cond); font-weight: 400; font-size: .92rem; line-height: 1.35;
    letter-spacing: .08em; text-transform: uppercase; overflow-wrap: anywhere;
}

.pf-credits__end {
    display: flex; align-items: center; justify-content: center; gap: 1rem;
    margin: 2.6rem 0 0;
    font-family: var(--pf-title); font-size: 1.5rem; letter-spacing: .5em; line-height: 1;
}
.pf-credits__end span { padding-left: .5em; background: var(--pf-foil); -webkit-background-clip: text; background-clip: text; color: transparent; }
.pf-credits__end::before, .pf-credits__end::after { content: ''; width: 2.4rem; height: 1px; background: color-mix(in srgb, var(--inv-accent) 70%, transparent); }
.pf-credits__sign {
    margin: .9rem 0 0; font-family: var(--pf-title); font-size: 1.05rem; letter-spacing: .3em; color: rgb(255 255 255 / .55);
}
.pf-credits__sign i { font-family: var(--pf-serif); font-size: 1.1em; letter-spacing: 0; }

/* ===================== small and short screens ===================== */
@media (max-height: 700px) {
    .pf-title { --pf-cap: 4.6rem; }
    .pf-title--stack { --pf-cap: 3.9rem; }
    .pf-billing { margin-top: .6rem; font-size: .58rem; }
    .pf-release { margin-top: .6rem; padding-top: .55rem; }
    .pf-release__text strong { font-size: 1.7rem; }
    .pf-guest { margin-top: .6rem; }
}
@media (max-height: 590px) {
    .pf-title { --pf-cap: 3.9rem; }
    .pf-title--stack { --pf-cap: 3.2rem; }
    .pf-poster__top { padding-top: .8rem; }
    .pf-guest__name { font-size: 1.08rem; }
    .pf-release__text strong { font-size: 1.5rem; }
    .pf-rating { width: 1.8rem; height: 1.8rem; font-size: .7rem; }
    .pf-release { grid-template-columns: 1.8rem 1fr 1.8rem; }
}
@media (max-width: 359px) {
    :root { --pf-gutter: 1rem; }
    .pf-slate__big { font-size: 2rem; }
    .pf-slate__big--word { font-size: 1.5rem; line-height: 1.34; }
}

/* the credit line continues the dark end credits */
.inv-branding { max-width: 30rem; margin: 0 auto; font-family: var(--pf-cond); }