/* the cover type (Carson 10/31: "i like the very bottom", Laredo Thin headlines over IBM Plex Mono Light): the Thin cut was made from the
   Laredo file (strokes inset 13 units); Regular stays loaded for the rest of the site */
@font-face { font-family: 'Laredo Thin'; src: url('../fonts/Laredo-Thin.woff2') format('woff2'); font-weight: normal; font-style: normal; font-display: swap; }
@font-face { font-family: 'Laredo Light'; src: url('../fonts/Laredo-Light.woff2') format('woff2'); font-weight: normal; font-style: normal; font-display: swap; }
body.cover { --font-display: 'Laredo Thin', 'Laredo', serif; --font-body: 'IBM Plex Mono', monospace; --font-cond: 'IBM Plex Mono', monospace; font-family: var(--font-body); font-weight: 300; }
body.cover .eyebrow { font-family: var(--font-body); font-weight: 400; letter-spacing: .22em; }
/* ---------- the film: plays once, then rests on its last frame ---------- */
.cfilm { position: relative; height: 100vh; height: 100dvh; min-height: 560px; background: var(--ink); overflow: hidden; }
.cfilm video, .cfilm img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.cfilm-shade { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(32,31,28,.28) 0%, rgba(32,31,28,0) 35%, rgba(32,31,28,0) 60%, rgba(32,31,28,.55) 100%); pointer-events: none; }
.cfilm-cap { position: absolute; left: clamp(4.5rem, 8vw, 7rem); bottom: clamp(2.2rem, 6vh, 4rem); color: var(--chalk); max-width: 46rem; }
.cfilm-cap .eyebrow { color: var(--khaki); margin-bottom: .9rem; }
.cfilm-cap h1 { font-family: var(--font-display); font-weight: 400; font-size: clamp(1.5rem, 3.2vw, 2.6rem); letter-spacing: .08em; text-transform: uppercase; line-height: 1.25; }
.cfilm-cap p { margin-top: 1rem; font-size: .98rem; opacity: .85; max-width: 32rem; }
.cfilm-paused { position: absolute; right: clamp(1.6rem, 4vw, 3rem); bottom: 2rem; color: var(--chalk); font-family: var(--font-cond); font-size: .66rem; letter-spacing: .22em; text-transform: uppercase; opacity: 0; transition: opacity .8s ease; background: none; border: 0; cursor: pointer; }
.cfilm.is-paused .cfilm-paused { opacity: .7; }

/* ---------- the close: a hand-drawn ring around the ask ---------- */
.cclose { position: relative; padding: clamp(5rem, 14vh, 9rem) clamp(4.5rem, 8vw, 7rem) clamp(4rem, 10vh, 7rem); text-align: center; }
.cclose .eyebrow { margin-bottom: 1.4rem; }
.cclose-ring { position: relative; display: inline-block; padding: 2.4rem 3.6rem; text-decoration: none; color: var(--ink); }
.cclose-ring h2 { font-family: var(--font-display); font-weight: 400; font-size: clamp(1.6rem, 4vw, 3rem); letter-spacing: .14em; text-transform: uppercase; line-height: 1.15; }
.cclose-ring svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; pointer-events: none; }
.cclose-ring svg path { fill: none; stroke: var(--leather); stroke-width: 1.4; stroke-linecap: round; stroke-dasharray: 1400; stroke-dashoffset: 1400; transition: stroke-dashoffset 2.2s cubic-bezier(.16, 1, .3, 1); }
.cclose-ring svg path.p2 { stroke-width: .9; opacity: .5; transition-delay: .3s; }
.cclose-ring.in svg path { stroke-dashoffset: 0; }
.cclose p { margin-top: 1.6rem; color: var(--ink); opacity: .8; }
.cclose-links { margin-top: 3rem; display: flex; flex-wrap: wrap; justify-content: center; gap: 1.6rem 2.2rem; font-family: var(--font-cond); font-weight: 400; font-size: .7rem; letter-spacing: .2em; text-transform: uppercase; }
.cclose-links a { color: var(--ink); text-decoration: none; opacity: .75; } .cclose-links a:hover { opacity: 1; }

/* 10/31 (late): over the film every word is chalk, the eyebrow included (Carson: "since cover is a dark image we should use all lighter of our text") */
.cfilm-cap .eyebrow, .cfilm-cap p, .cfilm-cap h1, .cfilm-paused { color: var(--chalk) !important; }
.cfilm-cap, .cfilm-paused { display: none !important; }
.visually-hidden { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
/* 11/1 the home page in the shell: the film runs under the rail (the page is full width inside the stage) */
body.ls.cover main#main { padding: 0; }
.cfilm { margin: 0; }
.cclose { text-align: center; }

/* phones and tablets held upright: the same film, framed on the house (Carson 11/1: a different frame of the same video, the push in) */
@media (max-aspect-ratio: 4/5) { #cfilm video, .cfilm video, .cfilm img { object-position: 38% 55%; } }

.cclose-legal { margin-top: 1.6rem; font-family: var(--font-cond); font-size: .62rem; letter-spacing: .2em; text-transform: uppercase; opacity: .55; }
@media (max-width: 760px) { .cclose-legal .pg-credit { display: block; margin-top: .5rem; } }
@media (max-width: 760px) { .cclose-legal .pg-dot { display: none; } }
.cclose-legal a { color: inherit; text-decoration: none; border-bottom: 1px solid currentColor; padding-bottom: 1px; }
/* 11/1 20:09 Carson: the social row on the home page close too */
.cclose-social { display: flex; flex-wrap: wrap; justify-content: center; gap: 1.2rem; margin-top: 1.6rem; }
.cclose-social a { display: inline-block; width: 18px; height: 18px; opacity: .85; } .cclose-social a:hover { opacity: 1; }
.cclose-social svg { width: 18px; height: 18px; display: block; fill: currentColor; }
.cclose-social svg { fill: none !important; stroke: currentColor; }