/* My Red Thread, the slide show (lab/show). The room, the lit wall, the type that builds on it. */
@font-face { font-family: "Newsreader"; src: url("fonts/Newsreader-latin-variable.woff2") format("woff2"); font-weight: 400 600; font-style: normal; font-display: swap; }
@font-face { font-family: "Newsreader"; src: url("fonts/Newsreader-italic-latin-variable.woff2") format("woff2"); font-weight: 400 600; font-style: italic; font-display: swap; }
@font-face { font-family: "Cabinet Grotesk"; src: url("fonts/CabinetGrotesk-Variable.woff2") format("woff2"); font-weight: 100 900; font-style: normal; font-display: swap; }

.rt-show {
  --room: #0B0B0D; --red: #E2382C; --ink: #FFF6E6; --ink-s: #FAF1E3;
  --serif: "Newsreader", "Iowan Old Style", Georgia, serif;
  --sans: "Cabinet Grotesk", "Helvetica Neue", Arial, sans-serif;
  --mono: ui-monospace, "SF Mono", Menlo, monospace;
  position: fixed; inset: 0; background: var(--room); color: var(--ink); color-scheme: dark;
  font: 16px/1.4 var(--sans); -webkit-font-smoothing: antialiased; overflow: hidden; overscroll-behavior: none;
}
.rt-show *, .rt-show *::before, .rt-show *::after { box-sizing: border-box; }
.rt-show button { font: inherit; }
.rt-sr { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.rt-stage { position: absolute; inset: 0; overflow: hidden; touch-action: none; user-select: none; -webkit-user-select: none; -webkit-tap-highlight-color: transparent; background: var(--room); }
.rt-plate { position: absolute; pointer-events: none; }
/* the projector (the live site's GL layer): plate, picture, beam and dust in one canvas under everything */
.rt-gl-canvas { position: absolute; left: 0; top: 0; z-index: 0; pointer-events: none; }
.rt-gl .rt-plate { display: none; }
/* the source pictures stay rendered (WebKit pauses muted films it considers invisible) but sit under the opaque canvas */
.rt-stage.rt-gl { isolation: isolate; }
.rt-gl .rt-wall:not(.rt-wtext) { z-index: -1; mix-blend-mode: normal; }
/* without WebGL: the picture at full light over the plate, no floor */
.rt-stage:not(.rt-gl) .rt-wall:not(.rt-wtext) { mix-blend-mode: normal; }
.rt-floor, .rt-shades, .rt-warm { display: none; }
/* the falloff behind the text lines: a multiply layer, white except around them */
.rt-fall { position: absolute; z-index: 2; left: var(--wl); top: var(--wt); width: var(--ww); height: var(--wh); pointer-events: none; mix-blend-mode: multiply; }
.rt-top { position: absolute; z-index: 6; left: 0; right: 0; top: 0; padding: 14px 16px; font-size: 15px; font-weight: 600; letter-spacing: -.01em; color: #EDEEEA; pointer-events: none; }
.rt-brand-sub { margin-left: 6px; font-weight: 450; color: #A7ACB1; }

/* ---------- the wall: the lit rectangle plus a small margin that carries the soft edge ---------- */
.rt-wall {
  position: absolute; z-index: 2; left: var(--wl); top: var(--wt); width: var(--ww); height: var(--wh); --m: var(--wm, 10px);
  overflow: hidden; background: #000; cursor: pointer; margin: 0;
  transform: perspective(1100px) rotateX(-1.1deg);
  /* projected light: the wall's light multiplies onto the lit plaster of the plate, so the plaster grain,
     the hot centre and the warm cast come through everywhere, and nothing is darker than plaster in shadow */
  mix-blend-mode: multiply;
  -webkit-mask-image: linear-gradient(to right, transparent 0, #000 var(--m), #000 calc(100% - var(--m)), transparent 100%), linear-gradient(to bottom, transparent 0, #000 var(--m), #000 calc(100% - var(--m)), transparent 100%);
  -webkit-mask-composite: source-in;
  mask-image: linear-gradient(to right, transparent 0, #000 var(--m), #000 calc(100% - var(--m)), transparent 100%), linear-gradient(to bottom, transparent 0, #000 var(--m), #000 calc(100% - var(--m)), transparent 100%);
  mask-composite: intersect;
}
.rt-pics, .rt-veil, .rt-layers { position: absolute; inset: 0; }
/* the type: light added on top of the projected picture */
/* the type: full ink, normal blend, with a soft shadow on the glyphs themselves (no sheet under the text) */
.rt-wall.rt-wtext { mix-blend-mode: normal; background: transparent; z-index: 3; text-shadow: 0 1px 2px rgba(0,0,0,.5), 0 0 14px rgba(0,0,0,.35); }
.rt-slsh { position: absolute; inset: 0; visibility: hidden; pointer-events: none; }
.rt-pics { z-index: 1; }
.rt-pic { position: absolute; inset: 0; overflow: hidden; visibility: hidden; background: #000; }
.rt-push { position: absolute; inset: 0; transform-origin: 50% 50%; }
.rt-poster, .rt-video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; filter: saturate(.92) contrast(.96) sepia(.06); }
.rt-video { opacity: 0; }
.rt-video.on { opacity: 1; }
.rt-veil { display: none; }
.rt-layers { z-index: 3; left: var(--m); top: var(--m); width: var(--rw); height: var(--rh); right: auto; bottom: auto; }
.rt-vig, .rt-hot, .rt-warm, .rt-grain { position: absolute; inset: 0; pointer-events: none; }
.rt-vig { z-index: 4; background: radial-gradient(ellipse 80% 76% at 50% 46%, rgba(0,0,0,0) 60%, rgba(0,0,0,.14) 88%, rgba(0,0,0,.26) 100%); }
.rt-hot { z-index: 4; mix-blend-mode: screen; background: radial-gradient(ellipse 55% 50% at 50% 44%, rgba(255,236,204,.08), rgba(255,236,204,0) 72%); }
.rt-warm { z-index: 4; mix-blend-mode: multiply; background: #FFEBD2; opacity: .25; }
.rt-grain { z-index: 4; mix-blend-mode: overlay; opacity: .1; background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='220' height='220'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 .5 0 0 0 0 .5 0 0 0 0 .5 0 0 0 .9 0'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>"); }
.rt-flicker .rt-hot { animation: rt-idle 6.5s steps(1) infinite; }
@keyframes rt-idle { 0%, 100% { opacity: 1; } 22% { opacity: .82; } 23% { opacity: 1; } 61% { opacity: .9; } 62% { opacity: 1; } 83% { opacity: .78; } 84% { opacity: 1; } }

/* the light floor: white in the margin (the plate shows as it is), the shadow level of the plaster inside the lit rectangle */
/* the light falls off softly toward the edges of the rectangle: no hard card edge */
.rt-vig::after { content: ""; position: absolute; inset: var(--m); box-shadow: inset 0 0 calc(var(--rw) * .03) calc(var(--rw) * .004) #000; }
.rt-floor { position: absolute; left: 0; top: 0; width: 100%; height: 100%; z-index: 9; pointer-events: none; mix-blend-mode: screen; }

/* the first-time hint */
.rt-hint { position: absolute; z-index: 5; left: calc(var(--m) + var(--rw) * .08); bottom: calc(var(--m) + var(--rh) * .035); font: 500 11px/1 var(--mono); letter-spacing: .14em; text-transform: uppercase; color: rgba(255,246,230,.62); pointer-events: none; }

/* ---------- the page thread ---------- */
.rt-thread { position: absolute; z-index: 4; left: 0; top: 0; width: 100%; height: 100%; pointer-events: none; overflow: visible; }
.rt-thread path { fill: none; stroke-linecap: round; }
.rt-thread .base { stroke: rgba(226, 56, 44, .32); stroke-width: 1.4; }
.rt-thread .done { stroke: var(--red); stroke-width: 1.8; stroke-dasharray: 1 1; }
.rt-thread .travel { stroke: var(--red); opacity: 0; }
.rt-knots, .rt-peg { position: absolute; z-index: 5; left: 0; top: 0; pointer-events: none; }
.rt-knot { position: absolute; width: 6px; height: 6px; margin: -3px 0 0 -3px; border-radius: 50%; background: #2A0F0D; border: 1.3px solid rgba(226, 56, 44, .7); }
.rt-knot.on { background: var(--red); border-color: var(--red); }
.rt-peg { width: 11px; height: 11px; margin: -5.5px 0 0 -5.5px; border-radius: 50%; background: var(--red); }

/* ---------- the projector's controls (in place from the first frame) ---------- */
.rt-counter { position: absolute; z-index: 6; left: var(--cnt-x); top: var(--cnt-y); transform: translate(-50%, -50%); font: 500 calc(10px * var(--ps, 1))/1 var(--mono); letter-spacing: .12em; color: rgba(237,238,234,.86); font-variant-numeric: tabular-nums; pointer-events: none; white-space: nowrap; }
/* the controls sit on the projector's front face and scale with it; the hit area reaches a little past the key */
.rt-nav { position: absolute; z-index: 6; --bw: calc(30px * var(--ps, 1)); --bh: calc(20px * var(--ps, 1)); width: var(--bw); height: var(--bh); margin: calc(var(--bh) / -2) 0 0 calc(var(--bw) / -2); padding: 0; border: 0; border-radius: calc(4px * var(--ps, 1)); cursor: pointer; font-size: calc(13px * var(--ps, 1)); line-height: 1; color: #1A1A1A; background: linear-gradient(#D9D7D0, #A9A8A2); box-shadow: 0 1px 0 rgba(255,255,255,.45) inset, 0 2px 5px rgba(0,0,0,.55); touch-action: manipulation; }
.rt-nav::before { content: ''; position: absolute; inset: -8px -5px; }
.rt-nav:active { transform: translateY(1px); }
.rt-nav:focus-visible { outline: 2px solid #EDEEEA; outline-offset: 3px; }
.rt-nav[aria-disabled="true"] { opacity: .45; }
.rt-prev { left: var(--prev-x); top: var(--prev-y); }
.rt-next { left: var(--next-x); top: var(--next-y); }
.rt-play { left: var(--play-x); top: var(--play-y); font-size: calc(8px * var(--ps, 1)); letter-spacing: -.06em; }

/* ---------- a slide: the layers on the lit rectangle ---------- */
.rt-slide { position: absolute; inset: 0; visibility: hidden; font-family: var(--serif); color: var(--ink); }
.rt-title { position: absolute; left: 8%; right: 8%; bottom: 10%; transform-origin: 0 100%; }
.rt-twin { pointer-events: none; }
.rt-hdr { position: absolute; left: 8%; right: 8%; top: 5%; font-size: calc(var(--u) * 17.5); line-height: 1.25; font-weight: 430; color: var(--ink-s); visibility: hidden; text-shadow: 0 0 14px rgba(0,0,0,.6); }
.rt-hnum { opacity: .5; margin-right: .62em; font-variant-numeric: tabular-nums; }
.rt-block { position: absolute; left: 8%; width: 84%; }
.rt-wide .rt-block.rt-front, .rt-wide .rt-block.rt-back, .rt-wide .rt-title, .rt-wide .rt-hdr { right: auto; width: min(84%, calc(var(--u0) * 470)); }
.rt-wide .rt-title { width: min(84%, calc(var(--u0) * 560)); }
.rt-back { bottom: 5%; }
.rt-chap { left: 8%; }
.rt-threadcol { left: calc(11% - 26px); padding-left: 26px; width: calc(80% + 26px); height: 82%; overflow: hidden; padding-top: 4px; -webkit-mask-image: linear-gradient(to bottom, transparent 0, #000 7%, #000 93%, transparent 100%); mask-image: linear-gradient(to bottom, transparent 0, #000 7%, #000 93%, transparent 100%); }

.rt-col { position: relative; }
.rt-deco { position: absolute; z-index: 1; left: 0; top: 0; width: 100%; height: 100%; overflow: visible; pointer-events: none; }

.rt-row { position: relative; margin: .5em 0 0; padding: 0; font-weight: 400; line-height: 1.32; }
.rt-row-M { line-height: 1.2; }
.rt-row-L { line-height: 0; margin-top: .3em; }
.rt-row:first-of-type, .rt-block > .rt-row:first-child, .rt-title > .rt-row:first-child { margin-top: 0; }
.rt-title .rt-row { margin-top: 0; }
.rt-vis { display: inline; }
.rt-run { text-shadow: 0 0 18px rgba(0,0,0,.55), 0 0 4px rgba(0,0,0,.45); }
.rt-S { line-height: 1.32; font-weight: 430; color: var(--ink-s); }
.rt-M { line-height: 1.2; font-weight: 420; letter-spacing: -.006em; }
.rt-L { line-height: 1.02; font-weight: 520; letter-spacing: -.016em; }
.rt-label { font-family: var(--mono); font-weight: 600; color: var(--ink); letter-spacing: .14em; text-transform: uppercase; line-height: 1.4; }
.rt-small { line-height: 1.4; }
.rt-w { display: inline-block; white-space: nowrap; transform-origin: 0 80%; }
.rt-ch { display: inline-block; white-space: pre; }
.rt-it { font-style: italic; }
.rt-bl { display: inline-block; width: 0; height: 0; vertical-align: baseline; }
.rt-who { font-size: .4em; opacity: .6; font-weight: 430; letter-spacing: 0; }
.rt-gt { font-size: 1.15em; }
.rt-num { display: inline-block; font-variant-numeric: tabular-nums lining-nums; }
.rt-arrow { display: inline-block; width: 1.1em; height: .5em; margin: 0 .12em; vertical-align: .16em; }
.rt-arrow svg { width: 100%; height: 100%; overflow: visible; }
.rt-swapbox { display: inline-block; position: relative; white-space: nowrap; vertical-align: baseline; }
.rt-swapnew { position: absolute; left: 0; top: 0; white-space: nowrap; }
.rt-echo { position: absolute; pointer-events: none; white-space: nowrap; line-height: 1.2; font-weight: 420; color: var(--ink); opacity: 0; }
.rt-slide[data-id="tarmac"] .rt-front .rt-L .rt-ch { color: #FFE9CC; }

/* the back: the picture steps forward, the text sits low on a soft dark rise */
.rt-shade { position: absolute; left: 0; right: 0; bottom: 0; opacity: 0; pointer-events: none; --solid: 25%; background: linear-gradient(to bottom, rgba(0,0,0,0) 0%, rgba(0,0,0,.9) var(--solid), rgba(0,0,0,.94) 100%); }
.rt-pshade { position: absolute; opacity: 0; pointer-events: none; background: radial-gradient(closest-side, rgba(0,0,0,.97) 62%, rgba(0,0,0,0) 100%); }
.rt-fshade { position: absolute; left: 0; right: 0; top: 0; opacity: 0; pointer-events: none; --solid: 80%; background: linear-gradient(to bottom, rgba(6,5,4,.95) 0%, rgba(6,5,4,.9) var(--solid), rgba(6,5,4,0) 100%); }
.rt-tshade { position: absolute; left: 0; right: 0; bottom: 0; opacity: 0; pointer-events: none; background: linear-gradient(to top, rgba(6,5,4,.9) 0%, rgba(6,5,4,.75) 55%, rgba(6,5,4,0) 100%); }
.rt-note { position: absolute; left: 8%; right: 8%; top: 5%; font-family: var(--serif); font-size: calc(var(--u0) * 16.5); line-height: 1.35; font-weight: 430; color: var(--ink-s, #D9D9D4); opacity: 0; text-shadow: 0 0 14px rgba(0,0,0,.7); pointer-events: none; }
.rt-form .rt-fopen { display: inline-block; border-radius: 0; letter-spacing: 0; margin: .5em 0 .1em; padding: 0; border: 0; background: none; color: var(--ink-s); font: 430 calc(var(--u) * 19.5)/1.3 var(--serif); text-decoration: underline; text-decoration-color: rgba(237,238,234,.5); text-decoration-thickness: 1px; text-underline-offset: .2em; cursor: pointer; }
.rt-form .rt-fopen:hover { text-decoration-color: rgba(237,238,234,.9); }
.rt-form .rt-fopen:focus-visible { outline: 2px solid #EDEEEA; outline-offset: 3px; }
.rt-fpanel[hidden] { display: none; }
.rt-shade-dark { display: none; }
.rt-back .rt-row { margin-top: .42em; }
.rt-back .rt-label + .rt-sp, .rt-back .rt-label { }
.rt-link { color: var(--ink); text-decoration: underline; text-decoration-color: rgba(226,56,44,.85); text-decoration-thickness: 1.5px; text-underline-offset: .18em; cursor: pointer; pointer-events: auto; user-select: text; -webkit-user-select: text; }
.rt-link:focus-visible { outline: 2px solid #EDEEEA; outline-offset: 3px; border-radius: 2px; }
.rt-select { user-select: text; -webkit-user-select: text; }
.rt-photo { position: absolute; right: 8%; margin: 0; width: 25%; opacity: 0; visibility: hidden; z-index: 2; }
.rt-photo img { display: block; width: 100%; aspect-ratio: 1; object-fit: cover; border: 3px solid #EFE6D6; box-shadow: 0 6px 18px rgba(0,0,0,.5); }
.rt-photocap { position: absolute; right: 0; width: 170%; text-align: right; margin-top: .35em; }
.rt-photocap .rt-row { margin: 0; display: inline-block; padding: .08em .45em .12em; }

/* the message form (15) */
.rt-form { margin: .2em 0 .2em; opacity: 0; visibility: hidden; font-family: var(--serif); pointer-events: auto; cursor: auto; }
.rt-flead { display: block; font-size: calc(var(--u) * 19.5); line-height: 1.3; color: var(--ink-s); margin: 0 0 .35em; }
.rt-form textarea, .rt-form input { display: block; width: 100%; font: 16px/1.35 var(--serif); color: var(--ink); background: rgba(255,246,230,.07); border: 1px solid rgba(255,246,230,.34); border-radius: 3px; padding: 7px 9px; resize: none; user-select: text; -webkit-user-select: text; }
.rt-form textarea { height: calc(var(--u) * 78); min-height: 58px; }
.rt-form textarea:focus, .rt-form input:focus { outline: none; border-color: var(--red); background: rgba(255,246,230,.1); }
.rt-form ::placeholder { color: rgba(255,246,230,.5); }
.rt-frow { display: flex; gap: 8px; margin-top: 7px; }
.rt-frow input { flex: 1 1 0; min-width: 0; }
.rt-fsend { align-items: center; }
.rt-form button { flex: 0 0 auto; font: 500 14px/1 var(--sans); letter-spacing: .02em; color: #1A1A1A; background: linear-gradient(#E9E6DE, #BDBBB4); border: 0; border-radius: 4px; padding: 9px 16px; cursor: pointer; }
.rt-form button:disabled { opacity: .6; }
.rt-form button:focus-visible { outline: 2px solid #EDEEEA; outline-offset: 2px; }
.rt-fstatus { font-size: 14px; line-height: 1.25; color: var(--ink-s); }
.rt-hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

.rt-reduced .rt-hint { transition: opacity .2s; }
@media (prefers-reduced-motion: reduce) { .rt-flicker .rt-hot { animation: none; } }
.rt-wtext .rt-form, .rt-wtext .rt-form * { text-shadow: none; }
/* dark ink: a line over a light picture is the slide's print blocking light; a soft light halo instead of the shadow */
.rt-ink-dark, .rt-ink-dark * { color: rgba(46,36,27,.84) !important; text-shadow: 0 0 16px rgba(255,246,232,.5), 0 0 3px rgba(255,246,232,.35) !important; }
.rt-fall-up { mix-blend-mode: screen; }

/* a back over a picture full of its own words (13 the manifesto): the text sits on a soft paper veil, feathered, no edge */
.rt-back.rt-paper { background: rgba(246,239,228,.88); box-shadow: 0 0 36px 30px rgba(246,239,228,.88); border-radius: 10px; }

.rt-play svg { display: block; margin: auto; width: 1.15em; height: 1.15em; }