/* SKYLANDS - the film's page, built to the Skylands brand book (rev 3,
   brand/Skylands_Brand_Book_rev3.pdf; kit in brand/skylands-kit). Loaded AFTER
   screen.css: the studio's chrome (header, glass, nav, player, end line, pause)
   stays; everything inside the page wears the film.

   Book rules kept here: Monolith black, 60-75% near-black; one register leads a
   layout (Day here: amber is the light, never the ground); Flare Cyan only as a
   single hairline; Michroma for titles (caps, wide, never sentences), Marcellus
   for the carved line, Archivo for reading, IBM Plex Mono for metadata; the
   master wordmark, flat, no glow; glyphs are the ground, never the message.
   The studio's gold logo stays top-left (Mohamed's call). */

.sk {
  --sky-monolith: #0E0C0B; --sky-beacon: #EEEAE0; --sky-ida: #DB9A1F; --sky-haze: #F2D89A;
  --sky-basalt: #2A2B29; --sky-weathered: #85867F; --sky-limestone: #B9B8AF;
  --sky-display: "Michroma", sans-serif; --sky-carved: "Marcellus", serif;
  --sky-body: "Archivo", system-ui, sans-serif; --sky-mono: "IBM Plex Mono", ui-monospace, monospace;
  background: var(--sky-monolith); color: var(--sky-beacon);
}
.brand-gold { aspect-ratio: 544 / 1315; }
.brand-gold img { display: block; width: 100%; height: 100%; object-fit: contain; }
.sk .nav-rule { display: none; }
.sk .nav a { font-family: var(--sky-mono); transition: color .6s var(--ease); }
.sk .nav a[aria-current="page"] { color: var(--sky-beacon); }
.sk .glass::before { background: linear-gradient(to bottom, rgba(14, 12, 11, .82), rgba(14, 12, 11, 0)); }
.sk[data-tone="paper"] .nav a { color: rgba(14, 12, 11, .72); }
.sk[data-tone="paper"] .nav a[aria-current="page"] { color: var(--sky-monolith); }
.sk[data-tone="paper"] .glass::before { background: linear-gradient(to bottom, rgba(238, 234, 224, .9), rgba(238, 234, 224, 0)); }

/* ---- type, as the book sets it --------------------------------------------- */
.sk-kicker { margin: 0; font-family: var(--sky-mono); font-size: 12px; letter-spacing: .16em; text-transform: uppercase; color: var(--sky-limestone); }
.sk-title { margin: 0; font-family: var(--sky-display); font-weight: 400; text-transform: uppercase; letter-spacing: .2em; padding-left: .2em;
  font-size: clamp(26px, 4vw, 54px); line-height: 1.15; text-align: center; }
.sk-carved { margin: 0; font-family: var(--sky-carved); text-transform: uppercase; letter-spacing: .12em; padding-left: .12em;
  font-size: clamp(17px, 2vw, 26px); line-height: 1.35; color: var(--sky-limestone); }
.sk-logline { margin: 0 auto; max-width: 46ch; font-family: var(--sky-body); font-stretch: 125%; font-weight: 300;
  font-size: clamp(18px, 1.85vw, 27px); line-height: 1.42; }
.sk-body { margin: 0 auto; max-width: 58ch; font-family: var(--sky-body); color: var(--sky-limestone); font-size: clamp(16px, 1.15vw, 19px); line-height: 1.6; }
.sk-body + .sk-body { margin-top: 1em; }
/* the hairline: the book's Flare line, in amber - no cyan on this page (Mohamed's override
   of the book, which makes a cyan hairline the one element every register shares) */
.sk-flare { display: block; height: 1px; width: min(560px, 70%); margin: 24px auto; background: var(--sky-ida);
  transform: scaleX(var(--f, 0)); }
.sk-btn { display: inline-block; margin-top: 28px; padding: 15px 30px; border: 0; cursor: pointer; text-decoration: none;
  background: var(--sky-ida); color: var(--sky-monolith);              /* book: text on Ida Amber is Monolith (8.0:1) */
  font-family: var(--sky-body); font-stretch: 125%; font-weight: 600; font-size: 13px; letter-spacing: .16em; text-transform: uppercase; }
.sk-btn:hover { background: var(--sky-haze); }
.sk-btn:active { transform: translateY(1px); }
.sk-btn:focus-visible { outline: 2px solid var(--sky-beacon); outline-offset: 4px; }
.sk-center { position: relative; z-index: 3; text-align: center; width: min(1100px, calc(100% - 32px)); margin: 0 auto; }

/* Aksymerian inline: each glyph holds its letter's place until it is read - it
   snaps, it never fades */
.sk-word { white-space: nowrap; }
.sk-ch { position: relative; display: inline-block; }
.sk-ch .lt { visibility: hidden; }
.sk-ch svg { position: absolute; left: 50%; top: 52%; width: .9em; height: .9em; transform: translate(-50%, -50%); fill: currentColor; }
.sk-ch.read .lt { visibility: visible; }
.sk-ch.read svg { display: none; }

/* ---- THE WALL: one canvas over whatever stands behind it --------------------- */
.sk-wall { position: relative; overflow: hidden; background: #070605; }
.sk-wall > .sk-media { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.sk-wall > canvas { position: absolute; inset: 0; width: 100%; height: 100%; }

/* ---- 1. the opening: the teaser, then the wall builds in around it ----------- */
.sk-open { height: 320vh; }
/* The walls' stages are the LARGE viewport (browser bars hidden): it never changes as you scroll, so
   nothing rebuilds and no strip goes black. Sized to the small one (svh), a sideways iPhone - where the
   bars take ~110 of 390 px - showed the wall in the top 72% with black below once the bars hid. Text is
   kept clear of the bars with (100lvh - 100svh) offsets. svh first: browsers without lvh keep it. */
.sk-stick { position: sticky; top: 0; height: 100svh; height: 100lvh; overflow: hidden; }
.sk-open .sk-wall { position: absolute; inset: 0; }
#openVideo { opacity: 0; transition: opacity 1.2s var(--ease); }
#openVideo.on { opacity: 1; }
.sk-shade { position: absolute; inset: 0; z-index: 2; pointer-events: none; opacity: var(--shade, 1);
  background: linear-gradient(to top, rgba(14, 12, 11, .92), rgba(14, 12, 11, 0) 55%); }
/* text over the moving wall sits on its own layer, so the canvas never repaints it */
.sk-card { position: absolute; inset: auto 0 9vh; bottom: calc(9vh + 100lvh - 100svh); z-index: 3; text-align: center; padding: 0 16px;
  opacity: var(--card, 1); transform: translate3d(0, var(--cardy, 0), 0); will-change: opacity, transform; }
.sk-wordmark { width: min(860px, 80vw); margin: 18px auto 0; color: var(--sky-beacon); line-height: 0; }
.sk-wordmark svg { display: block; width: 100%; height: auto; }
.sk-card .sk-flare { --f: 1; }
.sk-log { position: absolute; left: 16px; right: 16px; top: var(--logtop, 68%); z-index: 3; text-align: center; pointer-events: none;   /* text only: invisible at the top, it lay over the Watch button and took its clicks */
  opacity: var(--log, 0); will-change: opacity;
  text-shadow: 0 2px 18px rgba(8, 6, 5, .95), 0 0 4px rgba(8, 6, 5, .8); }
.sk-fade { position: absolute; inset: auto 0 0; height: 18vh; z-index: 2; pointer-events: none; background: linear-gradient(transparent, var(--sky-monolith)); }

/* ---- 2. the story ------------------------------------------------------------ */
.sk-story { padding: clamp(110px, 16vh, 180px) 0 clamp(110px, 18vh, 200px); }   /* room before the walk's wall */
.sk-story .sk-title { padding-top: 0; }
.sk-mural { height: 92vh; margin-top: clamp(56px, 9vh, 96px); }
.sk-mural::before, .sk-mural::after { content: ""; position: absolute; left: 0; right: 0; height: 14%; z-index: 2; pointer-events: none; }
.sk-mural::before { top: 0; background: linear-gradient(var(--sky-monolith), transparent); }
.sk-mural::after { bottom: 0; background: linear-gradient(transparent, var(--sky-monolith)); }

/* ---- 3. your name, cut in stone ------------------------------------------------ */
.sk-name { position: relative; padding: clamp(120px, 18vh, 200px) 0 clamp(40px, 6vh, 60px); overflow: hidden; }
/* the glyph rain, dim, behind the section: the script falling through the dark */
.sk-rain { position: absolute; inset: 0; width: 100%; height: 100%; z-index: -1; opacity: .5; pointer-events: none;
  -webkit-mask-image: radial-gradient(ellipse 34% 30% at 50% 30%, transparent 35%, #000 100%), linear-gradient(transparent, #000 22%, #000 70%, transparent); -webkit-mask-composite: source-in;
  mask-image: radial-gradient(ellipse 34% 30% at 50% 30%, transparent 35%, #000 100%), linear-gradient(transparent, #000 22%, #000 70%, transparent); mask-composite: intersect; }   /* clear of the title, soft top and bottom */
.sk-name > .sk-center:last-child { margin-top: clamp(28px, 4vh, 44px); }
.sk-name-field { display: grid; justify-items: center; gap: 10px; margin: 34px auto 0; width: min(540px, 100%); }
.sk-name-field input { width: 100%; padding: 12px 4px; border: 0; border-bottom: 1px solid var(--sky-weathered); border-radius: 0; background: none; outline: none;
  font-family: var(--sky-display); font-size: clamp(18px, 2vw, 24px); letter-spacing: .2em; text-transform: uppercase; text-align: center; color: var(--sky-beacon); }
.sk-name-field input:focus { border-bottom-color: var(--sky-ida); }
.sk-name-field input::placeholder { color: rgba(185, 184, 175, .45); letter-spacing: .14em; font-size: .8em; }
.sk-band { height: clamp(220px, 30vw, 380px); margin-top: clamp(40px, 6vh, 64px);
  -webkit-mask-image: linear-gradient(transparent, #000 22%, #000 78%, transparent); mask-image: linear-gradient(transparent, #000 22%, #000 78%, transparent); }
.sk-band > canvas.sk-slab { z-index: 1; }

/* ---- 4. the storyboard maze, on paper (book: print & paper - light ground, Monolith ink) */
.sk-board { position: relative; max-width: 1400px; margin: 0 auto; padding: 140vh var(--pad) 26vh; }   /* room to turn white before the title; after the last panel, just enough for the close to cut in */
/* the page's paper: one fixed layer under everything, faded in by scroll as the storyboard
   comes up and out as it goes - the whole screen turns, there is no edge */
.sk-paper { position: fixed; inset: 0; z-index: -1; background: #EEEAE0; opacity: var(--paper, 0); pointer-events: none; }
.sk-board .sk-title { color: var(--sky-monolith); margin-bottom: clamp(40px, 7vh, 72px); opacity: var(--paper, 0); }
.sk-maze-board { position: relative; }                      /* height set by skylands.js */
.sk-panel { position: absolute; margin: 0; }
.sk-panel img { width: 100%; height: 100%; object-fit: cover; display: block;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent), linear-gradient(transparent, #000 8%, #000 92%, transparent);
  -webkit-mask-composite: source-in;
  mask-image: linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent), linear-gradient(transparent, #000 8%, #000 92%, transparent);
  mask-composite: intersect; }
.sk-panel { opacity: 0; transform: translateY(26px); transition: opacity 1s var(--ease), transform 1s var(--ease); transition-delay: var(--d, 0ms); }
.sk-panel.in { opacity: 1; transform: none; }
.sk-ink { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; pointer-events: none; z-index: -1; }
.sk-ink path { fill: none; stroke: #2A241A; stroke-opacity: .72; stroke-width: 1.5; stroke-linejoin: round; stroke-linecap: round;
  vector-effect: non-scaling-stroke; stroke-dasharray: 1; stroke-dashoffset: 0; }
@supports (animation-timeline: view()) {
  .sk-board { view-timeline: --board block; }
  .sk-ink path { animation: inkdraw linear both; animation-timeline: --board; animation-range: cover 0% cover 100%; stroke-dashoffset: 1; }
  .sk-panel { transition: none; transform: none; opacity: 1; animation: panel-in linear both; animation-timeline: --board; }
}
@keyframes panel-in {
  from { opacity: 0; transform: translateY(14px) scale(.985); clip-path: inset(0 0 100% 0); }
  to   { opacity: 1; transform: none; clip-path: inset(0); }
}

/* ---- 5. the close ------------------------------------------------------------------ */
.sk-partners { display: grid; align-content: center; justify-items: center; text-align: center; gap: 0;
  padding: clamp(90px, 13vh, 130px) 16px clamp(96px, 14vh, 130px); }
.sk-maze { width: min(26vw, 30svh, 280px); height: auto; margin-bottom: clamp(28px, 5svh, 56px); }
.sk-partners-text { margin: 0; max-width: 30ch; font-family: var(--sky-body); font-weight: 300; font-size: clamp(20px, min(2.6vw, 3.6svh), 34px); line-height: 1.35; }
.sk-foot { position: absolute; left: 0; right: 0; bottom: 0; padding: 0 var(--pad) clamp(24px, 4svh, 44px); }
.sk-foot .end-line a, .sk-foot .end-line span { font-family: var(--sky-mono); }

/* ---- the glitch: ELEMENTS glitch, the page never shakes ------------------------ */
.sk-glitching { animation: sk-jit .32s steps(1, end); text-shadow: -2px 0 rgba(219, 154, 31, .9), 2px 0 rgba(141, 69, 0, .85); }
@keyframes sk-jit { 0% { transform: translate3d(0, 0, 0); } 20% { transform: translate3d(-3px, 0, 0) skewX(-4deg); } 40% { transform: translate3d(2px, 0, 0); }
  60% { transform: translate3d(-1px, 0, 0) skewX(3deg); } 80% { transform: translate3d(1px, 0, 0); } 100% { transform: none; } }
.sk-gch { display: inline-block; width: .72em; height: .86em; vertical-align: -.1em; fill: currentColor; }
/* the Necromancer: the page cuts to black and HE is there - two cuts in under a
   second (WCAG 2.3.1 allows three a second), a darkening, never a white flash */
.sk-necro { position: fixed; inset: 0; z-index: 90; pointer-events: none; opacity: 0;
  background: var(--sky-monolith) url(../assets/skylands/brand/necro.webp) center / cover no-repeat; }
.sk-necro.on { animation: sk-necro .78s steps(1, end) forwards; }
@keyframes sk-necro {
  0%   { opacity: 0; }
  4%   { opacity: .95; transform: scale(1.06); clip-path: inset(0); }
  16%  { opacity: .95; transform: scale(1.06) translate3d(-18px, 0, 0); clip-path: inset(22% 0 38% 0); }
  22%  { opacity: .9; transform: scale(1.06); clip-path: inset(0); }
  34%  { opacity: 0; }
  52%  { opacity: .85; transform: scale(1.03); clip-path: inset(0); }
  70%  { opacity: .85; transform: scale(1.03) translate3d(10px, 0, 0); clip-path: inset(48% 0 12% 0); }
  76%  { opacity: 0; }
  100% { opacity: 0; }
}
.sk .motion-pause { font-family: var(--sky-mono); transition: color .6s var(--ease); }
.sk[data-tone="paper"] .motion-pause { color: var(--sky-monolith); text-shadow: none; }
.sk .mp-i i { background: var(--sky-ida); }
.sk .motion-pause[aria-pressed="true"] .mp-i i:first-child { border-left-color: var(--sky-ida); background: none; }

@media (max-width: 767px) {
  .sk-open { height: 260vh; }
  .sk-card { bottom: 7vh; bottom: calc(7vh + 100lvh - 100svh); }
  .sk-mural { height: 70vh; }
}
@media (prefers-reduced-motion: reduce) {
  /* no pinned build: the teaser screen, then the logline below it on the page */
  .sk-open { height: auto; } .sk-stick { position: relative; height: auto; }
  .sk-open .sk-wall { position: relative; height: 100svh; }
  .sk-shade { bottom: auto; height: 100svh; }
  .sk-card { inset: auto 0 auto 0; top: 91svh; transform: translateY(-100%); }
  .sk-log { position: relative; top: auto; left: auto; right: auto; opacity: 1; padding: 64px 16px 24px; }
  .sk-fade { display: none; }
  .sk-necro, .sk-blink { display: none; }
  .sk-vf { animation: none !important; }
  .sk-glitching { animation: none; text-shadow: none; }
  .sk-ink path { animation: none; stroke-dashoffset: 0; }
  .sk-panel { opacity: 1; transform: none; transition: none; animation: none; clip-path: none; }
}

/* ---- 3. the walk along the wall ------------------------------------------------------- */
.sk-walk { position: relative; }                                  /* height set by skylands.js */
.sk-walk-stick { position: sticky; top: 0; height: 100svh; height: 100lvh; overflow: hidden; }
.sk-walk-light { position: absolute; inset: 0; width: 100%; height: 100%; }   /* 1/8 size, scaled up soft */
.sk-walk-track { position: absolute; top: 0; left: 0; height: 100%; will-change: transform; }
.sk-walk-track > .sk-wall { position: absolute; inset: 0; background: none; overflow: visible; }
.sk-walk-shot { position: absolute; overflow: hidden; background: #070605; }
.sk-walk-shot img, .sk-walk-shot video { position: absolute; inset: -6% -10%; width: 120%; height: 112%; object-fit: cover; max-width: none; }   /* the site-wide img cap would undo the overhang that hides the edge as it drifts */
.sk-walk-shot.vid { background: #000; }
.sk-walk-shot.vid video { inset: 0; width: 100%; height: 100%; filter: saturate(1.15) contrast(1.05); }
.sk-walk-tag { position: absolute; z-index: 3; transform: translateX(-50%); font-family: var(--sky-mono); font-size: 11px; letter-spacing: .18em;
  text-transform: uppercase; color: var(--sky-limestone); text-shadow: 0 1px 10px rgba(8, 6, 5, .95); white-space: nowrap; }
.sk-walk::before, .sk-walk::after { content: ""; position: absolute; left: 0; right: 0; height: 12vh; z-index: 4; pointer-events: none; }
.sk-walk::before { top: 0; background: linear-gradient(var(--sky-monolith), transparent); }
.sk-walk::after { bottom: 0; background: linear-gradient(transparent, var(--sky-monolith)); }

/* ---- the close: not a section you scroll to. It flickers into place over the storyboard when the
   page runs out (skylands.js, THE END), and that is the end; scrolling back up sends it away. ---- */
.sk-partners { position: fixed; inset: 0; z-index: 40; overflow: hidden; isolation: isolate; background: var(--sky-monolith);
  visibility: hidden; opacity: 0; pointer-events: none; }
.sk-partners.on { visibility: visible; opacity: 1; pointer-events: auto; }
.sk-pattern { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: -1; opacity: .3; pointer-events: none;
  -webkit-mask-image: radial-gradient(ellipse 60% 55% at 50% 42%, #000 30%, transparent 100%); mask-image: radial-gradient(ellipse 60% 55% at 50% 42%, #000 30%, transparent 100%); }

/* ---- the glitch's tear: the glyph stream, through the element that glitches ------------- */
.sk-tear { position: fixed; z-index: 85; pointer-events: none; opacity: 0; mix-blend-mode: screen; overflow: hidden; }
.sk-tear canvas { position: absolute; inset: 0; width: 100%; height: 100%; }
.sk-tear.on { opacity: .9; }

/* ---- the card -------------------------------------------------------------------------- */
.sk-cardui { position: fixed; inset: 0; z-index: 120; display: grid; grid-template-rows: auto minmax(0, 1fr) auto; justify-items: center; gap: 18px;
  padding: clamp(18px, 3vh, 34px) 16px clamp(18px, 3vh, 30px); background: rgba(14, 12, 11, .96); }
.sk-cardui[hidden] { display: none; }
.sk-cardui-x { position: absolute; top: 18px; right: clamp(16px, 3vw, 40px); padding: 10px 0; border: 0; background: none; cursor: pointer;
  font-family: var(--sky-mono); font-size: 12px; letter-spacing: .16em; text-transform: uppercase; color: var(--sky-beacon); }
.sk-cardui-x:focus-visible { outline: 1px solid var(--sky-ida); outline-offset: 4px; }
.sk-cardui-stage { min-height: 0; width: 100%; display: grid; place-items: center; }
.sk-cardui-stage canvas { max-width: min(100%, 980px); max-height: 100%; width: auto; height: auto; box-shadow: 0 30px 80px rgba(0, 0, 0, .6); }
.sk-cardui-ctl { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 18px 28px; }
.sk-chips { display: flex; gap: 4px; }
.sk-chips button { padding: 10px 14px; border: 1px solid rgba(185, 184, 175, .25); background: none; cursor: pointer; color: var(--sky-limestone);
  font-family: var(--sky-mono); font-size: 11px; letter-spacing: .14em; text-transform: uppercase; }
.sk-chips button[aria-checked="true"] { border-color: var(--sky-ida); color: var(--sky-beacon); }
.sk-toggle { display: flex; align-items: center; gap: 8px; cursor: pointer; font-family: var(--sky-mono); font-size: 11px; letter-spacing: .14em; text-transform: uppercase; color: var(--sky-limestone); }
.sk-toggle input { accent-color: var(--sky-ida); width: 16px; height: 16px; }
.sk-cardui-go { display: flex; gap: 10px; }
.sk-cardui-go .sk-btn { margin-top: 0; }
.sk-btn-line { background: none; color: var(--sky-beacon); box-shadow: inset 0 0 0 1px rgba(238, 234, 224, .4); }
.sk-btn-line:hover { background: rgba(238, 234, 224, .08); }

@media (max-width: 767px) {
  .sk-cardui-ctl { gap: 12px 16px; }
}
@media (prefers-reduced-motion: reduce) {
  .sk-walk-track { transform: none !important; position: relative; }
  .sk-tear { display: none; }
}

.sk-designs button { min-width: 72px; }
@media (max-width: 767px) {
  .sk-board { padding-bottom: 24vh; }
  .sk-designs { flex-wrap: wrap; justify-content: center; }
  .sk-designs button { min-width: 0; padding: 9px 10px; }
}

/* ---- the glitches, mixed: a picture flickers (overexposed amber / a dark drop / a split), the screen
   blinks (dark, amber, or HIS ghost), a band tears, or HE comes in one of four looks. Two pulses at
   most per glitch (WCAG 2.3.1: under three a second). ------------------------------------------ */
.sk-vf { animation: .5s steps(1, end) both; }
.sk-vf.vf-hot { animation-name: vf-hot; }
.sk-vf.vf-dark { animation-name: vf-dark; }
.sk-vf.vf-split { animation-name: vf-split; }
@keyframes vf-hot { 0% { filter: brightness(1.8) sepia(.9) saturate(2.4) hue-rotate(-12deg); transform: translate3d(-8px, 0, 0); }
  18% { opacity: .15; filter: none; transform: none; } 30% { opacity: 1; filter: brightness(1.5) sepia(1) saturate(3); clip-path: inset(18% 0 52% 0); }
  46% { clip-path: none; filter: none; transform: translate3d(6px, 0, 0); } 60%, 100% { transform: none; filter: none; } }
@keyframes vf-dark { 0% { filter: brightness(.18) contrast(1.8); } 16% { filter: none; } 28% { filter: brightness(.3); transform: translate3d(5px, 0, 0); }
  40%, 100% { filter: none; transform: none; } }
@keyframes vf-split { 0% { filter: drop-shadow(-7px 0 0 rgba(219, 154, 31, .85)) drop-shadow(7px 0 0 rgba(141, 69, 0, .85)); transform: skewX(-3deg); }
  22% { filter: none; transform: none; opacity: .4; } 34% { opacity: 1; clip-path: inset(40% 0 20% 0); transform: translate3d(-12px, 0, 0); }
  48% { clip-path: none; transform: none; filter: grayscale(1) brightness(1.4); } 62%, 100% { filter: none; } }
.sk-blink { position: fixed; inset: 0; z-index: 88; pointer-events: none; opacity: 0; background: var(--sky-monolith); }
.sk-blink.on { animation: sk-blink .5s steps(1, end) forwards; }
.sk-blink.b-amber { background: #8D4500; mix-blend-mode: multiply; }
.sk-blink.b-ghost { background: var(--sky-monolith) url(../assets/skylands/brand/necro.webp) center / cover no-repeat; filter: sepia(1) saturate(2) brightness(.45); }
@keyframes sk-blink { 0% { opacity: 0; } 6% { opacity: .92; } 20% { opacity: 0; } 44% { opacity: .7; } 56%, 100% { opacity: 0; } }
.sk-necro.n-amber { filter: sepia(1) saturate(2.6) hue-rotate(-14deg) brightness(.85); }
.sk-necro.n-pale { filter: grayscale(1) brightness(1.45) contrast(.85); }
.sk-necro.n-dark { filter: brightness(.55) contrast(1.4); }
.sc-vol { --sc-accent: var(--sky-ida); }   /* Skylands: no cyan */


/* the lit wall (WebGL): one canvas per wall; the walk's is screen-sized in the pinned stage, above the
   track, the captions in their own layer above it */
.sk-glwall { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
.sk-walk-tags { position: absolute; top: 0; left: 0; height: 100%; pointer-events: none; will-change: transform; }

/* a picture never ends in a hard line: wherever its edge shows, it falls into the dark */
.sk-walk-shot::after { content: ""; position: absolute; inset: 0; pointer-events: none; box-shadow: inset 0 0 18px 5px rgba(0, 0, 0, .85); }
/* a video window has no edge: past its opening it fades into the breathing light behind the wall */
.sk-walk-shot.vid { background: none;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 22%, #000 78%, transparent), linear-gradient(transparent, #000 22%, #000 78%, transparent);
  -webkit-mask-composite: source-in; mask-image: linear-gradient(90deg, transparent, #000 22%, #000 78%, transparent), linear-gradient(transparent, #000 22%, #000 78%, transparent);
  mask-composite: intersect; }
.sk-walk-shot.vid::after { display: none; }

/* ---- the loader: Monolith, the master wordmark (flat), one amber line of light, mono metadata ---- */
.sk-loader { position: fixed; inset: 0; z-index: 400; display: grid; place-content: center; justify-items: center; gap: 30px; padding: 0 16px;
  background: var(--sky-monolith); transition: opacity .9s ease, visibility 0s .9s; animation: skLoaderBail 0s 20s forwards; }
.sk-loader.is-done { opacity: 0; visibility: hidden; }
@keyframes skLoaderBail { to { opacity: 0; visibility: hidden; } }
.sk-loader-mark { display: block; width: min(64vw, 380px); aspect-ratio: 3037.84 / 109.2; background: var(--sky-beacon);
  -webkit-mask: url("../assets/skylands/brand/wordmark.svg") center / contain no-repeat; mask: url("../assets/skylands/brand/wordmark.svg") center / contain no-repeat; }
.sk-loader-track { display: block; width: min(64vw, 380px); height: 1px; background: rgba(238, 234, 224, .12); overflow: hidden; }
.sk-loader-fill { display: block; width: 100%; height: 100%; background: var(--sky-ida); transform: scaleX(0); transform-origin: left center; box-shadow: 0 0 10px rgba(219, 154, 31, .55); }
.sk-loader-pct { font: 400 11px/1 var(--sky-mono); letter-spacing: .32em; text-transform: uppercase; color: var(--sky-weathered); white-space: pre; font-variant-numeric: tabular-nums; }
.sk-walk-shot { -webkit-mask-size: 100% 100%; mask-size: 100% 100%; -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; }

/* ---- the screening, in the film's colours (the studio player re-dressed; same markup, same script) ----
   Monolith ground, Ida amber for every mark of light (play, pause, progress, knob, focus), Beacon and
   Limestone type, Basalt rules; Michroma for the title, IBM Plex Mono for every label and number. */
.sk .screening { --cyan: var(--sky-ida); --orange: var(--sky-ida); --matte: var(--sky-monolith); --graphite: var(--sky-basalt);
  --paper: var(--sky-beacon); --ink-2: var(--sky-limestone); --ink-3: var(--sky-weathered); background: var(--sky-monolith); }
.sk .screening .sc-pic { background: #000; }
.sk .screening .ol, .sk .sc-close, .sk .sc-word, .sk .sc-time, .sk .sc-tip { font-family: var(--sky-mono); }
.sk .sc-cap .name { font-family: var(--sky-display); font-weight: 400; font-size: 15px; letter-spacing: .28em; text-transform: uppercase; color: var(--sky-beacon); }
.sk .sc-toggle:focus-visible, .sk .sc-word:focus-visible, .sk .sc-close:focus-visible, .sk .sc-big:focus-visible { outline: 1px solid var(--sky-ida); outline-offset: 3px; }
.sk .sc-volr::-webkit-slider-thumb { background: var(--sky-beacon); }

/* ---- a phone held sideways: the title card fits a 390 px tall screen ---- */
@media (pointer: coarse) and (max-height: 500px) and (orientation: landscape) {
  .sk-card { bottom: 4vh; bottom: calc(4vh + 100lvh - 100svh); }
  .sk-kicker { font-size: 10px; }
  .sk-wordmark { width: min(520px, 58vw); margin-top: 8px; }
  .sk-card .sk-flare { margin: 12px auto; }
  .sk-carved { font-size: 14px; }
  .sk-btn { margin-top: 14px; padding: 11px 22px; font-size: 11px; }
  .sk-logline { font-size: 16px; max-width: 60ch; }
}