/* ==========================================================================
   Lysskjul Varanger Resort & Casino — style.css
   Design system "Silver & Safelight" (BRIEF §2).
   No inline styles anywhere (CSP style-src 'self'); dynamic values via JS
   element.style.setProperty() only.

   Breakpoints (mobile-first, min-width): 480 / 768 / 1024 / 1200 / 1440.

   Contrast (WCAG 2.x, measured):
     charcoal  on paper 16.57 · silver 14.18 · silver-2 10.98
     char-dim  on paper  5.56 · silver  5.21 · silver-2  4.64 · frame 5.70
     safelight on paper  5.48 · silver  4.69          (text + focus on light)
     paper     on charcoal 16.57 · charcoal-2 14.88
     paper .72 on charcoal  9.02 · charcoal-2  8.29   (muted text on dark)
     safe-lt   on charcoal  5.49 · charcoal-2  4.93   (accent + focus on dark)
     lichen    on charcoal  6.64 · charcoal-2  5.97   (secondary marks, dark only)
     sepia     on paper  4.57                         (quotes on paper only)
     paper     on safelight 5.48                      (licensing chip)
   Not allowed as text: lichen on light (2.49), sepia on silver (3.91),
   safelight on charcoal (3.02) — dark surfaces switch --accent to safe-lt.
   ========================================================================== */


/* 1. Fonts — self-hosted, fonts/ (OFL, see fonts/OFL.txt) ----------------- */

@font-face {
  font-family: 'Archivo';
  font-style: normal;
  font-display: swap;
  font-weight: 100 900;
  font-stretch: 62% 125%;
  src: url('../fonts/archivo-latin-ext.woff2') format('woff2-variations'),
       url('../fonts/archivo-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Archivo';
  font-style: normal;
  font-display: swap;
  font-weight: 100 900;
  font-stretch: 62% 125%;
  src: url('../fonts/archivo-latin.woff2') format('woff2-variations'),
       url('../fonts/archivo-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Raleway';
  font-style: normal;
  font-display: swap;
  font-weight: 100 900;
  src: url('../fonts/raleway-cyrillic.woff2') format('woff2-variations'),
       url('../fonts/raleway-cyrillic.woff2') format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
@font-face {
  font-family: 'Raleway';
  font-style: normal;
  font-display: swap;
  font-weight: 100 900;
  src: url('../fonts/raleway-latin-ext.woff2') format('woff2-variations'),
       url('../fonts/raleway-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Raleway';
  font-style: normal;
  font-display: swap;
  font-weight: 100 900;
  src: url('../fonts/raleway-latin.woff2') format('woff2-variations'),
       url('../fonts/raleway-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}


/* Metric-matched fallbacks (local Arial, width ratios measured against the
   real faces) so text wraps the same before and after the webfonts swap in:
   no layout shift from font-display: swap. Line heights are unitless, so
   only the advance width needs matching. */
@font-face { font-family: 'Archivo H1 Fallback'; src: local('Arial Bold'), local('Arial-BoldMT'); font-weight: 100 900; size-adjust: 87.1%; }
@font-face { font-family: 'Archivo H2 Fallback'; src: local('Arial Bold'), local('Arial-BoldMT'); font-weight: 100 900; size-adjust: 96.1%; }
@font-face { font-family: 'Archivo Fallback'; src: local('Arial'), local('ArialMT'); font-weight: 100 599; size-adjust: 100%; }
@font-face { font-family: 'Archivo Fallback'; src: local('Arial Bold'), local('Arial-BoldMT'); font-weight: 600 900; size-adjust: 98.3%; }
@font-face { font-family: 'Raleway Fallback'; src: local('Arial'), local('ArialMT'); font-weight: 100 449; size-adjust: 103.9%; }
@font-face { font-family: 'Raleway Fallback'; src: local('Arial'), local('ArialMT'); font-weight: 450 549; size-adjust: 105.4%; }
@font-face { font-family: 'Raleway Fallback'; src: local('Arial Bold'), local('Arial-BoldMT'); font-weight: 550 900; size-adjust: 99.4%; }


/* 2. Tokens ---------------------------------------------------------------- */

:root {
  /* Palette §2.1 */
  --c-paper:      #F6F6F4;
  --c-silver:     #E4E5E2;
  --c-silver-2:   #C9CBC8;
  --c-charcoal:   #171717;
  --c-charcoal-2: #212121;
  --c-char-dim:   rgba(23,23,23,.66);
  --c-safelight:  #B23A2F;
  --c-safe-lt:    #D9705F;
  --c-sepia:      #8A6A4B;
  --c-lichen:     #9AA08C;
  --c-line:       rgba(23,23,23,.14);
  --c-line-dark:  rgba(246,246,244,.16);
  --c-frame:      #FCFCFA;   /* print border; caption char-dim on it = 5.70:1 */
  --c-paper-dim:  rgba(246,246,244,.72);

  /* Surface variables — swapped by .section--silver / .section--dark */
  --bg:       var(--c-paper);
  --text:     var(--c-charcoal);
  --text-dim: var(--c-char-dim);
  --accent:   var(--c-safelight);
  --line:     var(--c-line);
  --card:     var(--c-silver);
  --grain-opacity: .045;
  --grain: var(--grain-fine);

  /* Type §2.2 */
  --ff-head: 'Archivo', 'Archivo Fallback', Arial, sans-serif;
  --ff-h1:   'Archivo', 'Archivo H1 Fallback', Arial, sans-serif;
  --ff-h2:   'Archivo', 'Archivo H2 Fallback', Arial, sans-serif;
  --ff-body: 'Raleway', 'Raleway Fallback', Arial, sans-serif;
  --fs-h1:   clamp(2.9rem, 7vw, 6.4rem);
  --fs-h2:   clamp(2rem, 4.2vw, 3.6rem);
  --fs-h3:   clamp(1.3rem, 2.1vw, 1.7rem);
  --fs-body: clamp(1rem, 1.05vw, 1.1rem);
  --fs-lead: clamp(1.1rem, 1.35vw, 1.3rem);
  --fs-small: .875rem;

  /* Grid §2.4 */
  --container: 1320px;
  --gutter:    clamp(1.25rem, 5vw, 3.5rem);
  --measure:   62ch;
  --section-y: clamp(4.5rem, 9vw, 9rem);
  --gap:       clamp(1rem, 2.4vw, 2rem);
  --header-h:  4.5rem;

  /* Signature details §2.3 */
  --mark-len:   14px;   /* corner mark length; +4px on hover */
  --mark-w:     1px;
  --mark-inset: 8px;
  --frame-pad:  clamp(.45rem, .9vw, .7rem);
  --frame-foot: clamp(1.9rem, 3vw, 2.4rem);
  --ease:       cubic-bezier(.2, .7, .2, 1);
  --dur:        .28s;

  /* Six-blade iris (same geometry as the logo) — used as a CSS mask for
     the active nav marker, back-to-top and rhythm markers. data: is allowed
     by img-src. */
  --iris-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'%3E%3Cpath transform='translate(9.01 10.60) scale(.86) translate(-9.01 -10.60)' d='M16.00 8.80 L9.76 12.40 L2.03 16.87 A14 14 0 0 1 8.26 4.33 Z'/%3E%3Cpath transform='translate(7.83 19.35) scale(.86) translate(-7.83 -19.35)' d='M9.76 12.40 L9.76 19.60 L9.76 28.53 A14 14 0 0 1 2.03 16.87 Z'/%3E%3Cpath transform='translate(14.81 24.75) scale(.86) translate(-14.81 -24.75)' d='M9.76 19.60 L16.00 23.20 L23.74 27.67 A14 14 0 0 1 9.76 28.53 Z'/%3E%3Cpath transform='translate(22.99 21.40) scale(.86) translate(-22.99 -21.40)' d='M16.00 23.20 L22.24 19.60 L29.97 15.13 A14 14 0 0 1 23.74 27.67 Z'/%3E%3Cpath transform='translate(24.17 12.65) scale(.86) translate(-24.17 -12.65)' d='M22.24 19.60 L22.24 12.40 L22.24 3.47 A14 14 0 0 1 29.97 15.13 Z'/%3E%3Cpath transform='translate(17.18 7.25) scale(.86) translate(-17.18 -7.25)' d='M22.24 12.40 L16.00 8.80 L8.26 4.33 A14 14 0 0 1 22.24 3.47 Z'/%3E%3C/svg%3E");

  /* Grain §2.3 — feTurbulence, 400×400 tile. Fine on light, coarse on dark. */
  --grain-fine:   url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='400' height='400'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .5 0 0 0 0 .5 0 0 0 0 .5 0 0 0 1.4 -.2'/%3E%3C/filter%3E%3Crect width='400' height='400' filter='url(%23g)'/%3E%3C/svg%3E");
  --grain-coarse: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='400' height='400'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.55' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .85 0 0 0 0 .85 0 0 0 0 .85 0 0 0 1.6 -.3'/%3E%3C/filter%3E%3Crect width='400' height='400' filter='url(%23g)'/%3E%3C/svg%3E");
}


/* 3. Base §2.5 ------------------------------------------------------------- */

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

html {
  scrollbar-gutter: stable;
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--header-h) + 1rem);
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

body {
  display: flex;
  flex-direction: column;
  margin: 0;
  min-height: 100vh;
  background: var(--bg);
  color: var(--text);
  font-family: var(--ff-body);
  font-size: var(--fs-body);
  font-weight: 400;
  line-height: 1.7;
  font-variant-numeric: lining-nums;  /* Raleway defaults to old-style figures */
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

body > main { flex: 1 0 auto; }

img, svg, picture, video { display: block; max-width: 100%; }
img { height: auto; }
button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; }
table { border-collapse: collapse; }
[hidden] { display: none !important; }

::selection { background: var(--c-charcoal); color: var(--c-paper); }

a {
  color: inherit;
  text-decoration-line: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: .22em;
  text-decoration-color: var(--line);
  transition: text-decoration-color var(--dur) var(--ease);
}
a:hover { text-decoration-color: currentColor; }

:focus { outline: none; }
:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
}

.skip-link {
  position: absolute;
  z-index: 1000;
  left: 1rem;
  top: -100px;
  padding: .75rem 1rem;
  background: var(--c-charcoal);
  color: var(--c-paper);
  font-weight: 600;
  text-decoration: none;
}
.skip-link:focus { top: 1rem; }

.visually-hidden {
  position: absolute !important;
  width: 1px; height: 1px;
  margin: -1px; padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}


/* 4. Typography §2.2 ------------------------------------------------------- */

h1, h2, h3, h4 {
  margin: 0 0 .5em;
  font-family: var(--ff-head);
  font-weight: 700;
  letter-spacing: -.02em;
  line-height: 1.02;
  text-wrap: balance;
}
h1, .h1 {
  font-family: var(--ff-h1);
  font-size: var(--fs-h1);
  font-weight: 800;
  font-stretch: 82%;           /* narrower width axis for H1 */
}
h2, .h2 { font-family: var(--ff-h2); font-size: var(--fs-h2); font-weight: 800; font-stretch: 92%; }
h3, .h3 { font-size: var(--fs-h3); line-height: 1.15; letter-spacing: -.01em; }
h4 { font-size: 1.05rem; line-height: 1.3; letter-spacing: 0; }

p { margin: 0 0 1.1em; }
p:last-child { margin-bottom: 0; }
strong, b { font-weight: 600; }

.lead {
  font-size: var(--fs-lead);
  font-weight: 500;
  line-height: 1.6;
}

.text-col { max-width: var(--measure); }

.eyebrow {
  display: block;
  margin: 0 0 1.25rem;
  font-family: var(--ff-body);
  font-size: .72rem;
  font-weight: 600;
  letter-spacing: .24em;
  line-height: 1.4;
  text-transform: uppercase;
  color: var(--accent);
}

/* Contact-sheet caption: under gallery frames and cards */
.caption {
  font-family: var(--ff-head);
  font-size: .7rem;
  font-weight: 500;
  font-stretch: 100%;
  letter-spacing: .1em;
  line-height: 1.4;
  text-transform: uppercase;
  color: var(--text-dim);
}
.frame .caption { color: var(--c-char-dim); }   /* frame is always light */
.caption__no { font-variant-numeric: tabular-nums lining-nums; margin-right: .6em; }

.num, table, .counter { font-variant-numeric: tabular-nums lining-nums; }

.small, small { font-size: var(--fs-small); line-height: 1.6; }
.muted { color: var(--text-dim); }

blockquote {
  margin: 0;
  padding-left: 1.25rem;
  border-left: 1px solid var(--c-sepia);
  font-weight: 500;
}
.section:not(.section--dark) blockquote { color: var(--c-sepia); } /* paper only: 4.57:1 */

.disclaimer {           /* "Artist's impressions…" line */
  margin-top: 1.5rem;
  font-size: .8rem;
  line-height: 1.5;
  color: var(--text-dim);
}


/* 5. Layout §2.4 ----------------------------------------------------------- */

.container {
  width: 100%;
  max-width: var(--container);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

.grid {
  display: grid;
  gap: var(--gap);
  grid-template-columns: repeat(12, minmax(0, 1fr));
}
.grid > * { grid-column: 1 / -1; min-width: 0; }
@media (min-width: 1024px) {
  .grid > .span-4 { grid-column: span 4; }
  .grid > .span-5 { grid-column: span 5; }
  .grid > .span-6 { grid-column: span 6; }
  .grid > .span-7 { grid-column: span 7; }
  .grid > .start-6 { grid-column: 6 / -1; }
  .grid > .start-7 { grid-column: 7 / -1; }
  .grid > .start-8 { grid-column: 8 / -1; }
  .grid > .start-9 { grid-column: 9 / -1; }
}

.stack > * + * { margin-top: var(--gap); }


/* 6. Sections: surfaces, grain, safelight glow §2.1, §2.3 ------------------ */
/* Rhythm: paper → silver → charcoal. Dark: Hides, Darkroom, casino, CTA, footer. */

.section {
  position: relative;
  isolation: isolate;
  padding-block: var(--section-y);
  background: var(--bg);
  color: var(--text);
}

.section--silver {
  --bg:   var(--c-silver);
  --card: var(--c-paper);
}

.section--dark,
.site-footer {
  --bg:       var(--c-charcoal);
  --text:     var(--c-paper);
  --text-dim: var(--c-paper-dim);
  --accent:   var(--c-safe-lt);
  --line:     var(--c-line-dark);
  --card:     var(--c-charcoal-2);
  --grain-opacity: .07;
  --grain: var(--grain-coarse);
}

/* The only textures on the site: silver grain (light) / coarser grain (dark) */
.section::before,
.site-footer::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background-image: var(--grain);
  background-size: 400px 400px;
  opacity: var(--grain-opacity);
}

/* The Darkroom: soft safelight glow in one corner, alpha ≤ .12 */
.section--darkroom {
  background:
    radial-gradient(ellipse 70% 60% at 100% 0%, rgba(178,58,47,.12), rgba(178,58,47,0) 70%),
    var(--bg);
}

.section__head { max-width: var(--measure); margin-bottom: clamp(2rem, 4vw, 3.5rem); }
.section__head h2 { margin-bottom: .45em; }


/* 7. Buttons §2.3 ---------------------------------------------------------- */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .6em;
  min-height: 3rem;
  padding: .8rem 1.5rem;
  border: 1px solid var(--c-charcoal);
  border-radius: 0;
  background: var(--c-charcoal);
  color: var(--c-paper);
  font-family: var(--ff-body);
  font-size: .95rem;
  font-weight: 600;
  letter-spacing: .02em;
  line-height: 1.2;
  text-decoration: none;
  transition: border-color var(--dur) var(--ease);
}
.btn:hover { border-color: var(--c-safelight); }          /* fill stays, thin red edge */
.btn:focus-visible { outline-color: var(--accent); }

/* On charcoal surfaces the charcoal button needs a visible edge */
.section--dark .btn--primary { border-color: var(--c-line-dark); }
.section--dark .btn--primary:hover { border-color: var(--c-safe-lt); }

.btn--secondary {                                     /* text with a 1px underline */
  min-height: 3rem;
  padding: .8rem 0;
  border: 0;
  background: none;
  color: var(--text);
  text-decoration-line: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: .35em;
  text-decoration-color: currentColor;
}
.btn--secondary:hover { text-decoration-thickness: 2px; }

.btn-row { display: flex; flex-wrap: wrap; align-items: center; gap: 1rem 1.75rem; }


/* 8. Print frame §2.3 ------------------------------------------------------ */
/* Thin white border, wider bottom margin carrying the contact-sheet caption. */

.frame {
  margin: 0;
  padding: var(--frame-pad) var(--frame-pad) 0;
  background: var(--c-frame);
  border: 1px solid var(--c-line);
  border-radius: 0;
}
.section--dark .frame { border-color: transparent; }
.frame img { width: 100%; height: auto; }
.frame__media { overflow: hidden; background: var(--c-silver-2); }
.frame__caption {
  display: flex;
  align-items: center;
  min-height: var(--frame-foot);
  padding-block: .35rem;
  transition: transform var(--dur) var(--ease);
}

/* Fixed aspect ratios (CLS) */
.ratio-16x9 { aspect-ratio: 16 / 9; }
.ratio-21x9 { aspect-ratio: 21 / 9; }
.ratio-3x2  { aspect-ratio: 3 / 2; }
.ratio-4x3  { aspect-ratio: 4 / 3; }
.ratio-4x5  { aspect-ratio: 4 / 5; }
.ratio-1x1  { aspect-ratio: 1 / 1; }
[class*="ratio-"] > img { width: 100%; height: 100%; object-fit: cover; }


/* 9. Cards with viewfinder corner marks §2.3 ------------------------------- */

.card {
  position: relative;
  padding: clamp(1.25rem, 2.4vw, 2rem);
  background: var(--card);
  color: var(--text);
}
.card::before {
  content: "";
  position: absolute;
  inset: var(--mark-inset);
  pointer-events: none;
  --m: var(--mark-len);
  --mc: var(--text-dim);
  background:
    linear-gradient(var(--mc), var(--mc)) top left     / var(--m) var(--mark-w) no-repeat,
    linear-gradient(var(--mc), var(--mc)) top left     / var(--mark-w) var(--m) no-repeat,
    linear-gradient(var(--mc), var(--mc)) top right    / var(--m) var(--mark-w) no-repeat,
    linear-gradient(var(--mc), var(--mc)) top right    / var(--mark-w) var(--m) no-repeat,
    linear-gradient(var(--mc), var(--mc)) bottom left  / var(--m) var(--mark-w) no-repeat,
    linear-gradient(var(--mc), var(--mc)) bottom left  / var(--mark-w) var(--m) no-repeat,
    linear-gradient(var(--mc), var(--mc)) bottom right / var(--m) var(--mark-w) no-repeat,
    linear-gradient(var(--mc), var(--mc)) bottom right / var(--mark-w) var(--m) no-repeat;
  transition: background-size var(--dur) var(--ease);
}
/* Hover: marks lengthen by 4px, caption moves 2px.
   No scale, no shadow. */
.card:hover::before { background-size:
    calc(var(--mark-len) + 4px) var(--mark-w), var(--mark-w) calc(var(--mark-len) + 4px),
    calc(var(--mark-len) + 4px) var(--mark-w), var(--mark-w) calc(var(--mark-len) + 4px),
    calc(var(--mark-len) + 4px) var(--mark-w), var(--mark-w) calc(var(--mark-len) + 4px),
    calc(var(--mark-len) + 4px) var(--mark-w), var(--mark-w) calc(var(--mark-len) + 4px); }
.card:hover .frame__caption,
.card:hover .card__caption { transform: translateX(2px); }

.card--media { padding: 0; background: none; }
.card--media::before { inset: calc(var(--mark-inset) * -1); }
.card__caption { margin-top: .75rem; transition: transform var(--dur) var(--ease); }
.card__body { margin-top: 1rem; }
.card__title { margin-bottom: .4em; }


/* 10. Chips ---------------------------------------------------------------- */

.chip {
  display: inline-flex;
  align-items: center;
  gap: .45em;
  padding: .3rem .65rem;
  border: 1px solid var(--line);
  font-family: var(--ff-head);
  font-size: .68rem;
  font-weight: 500;
  letter-spacing: .1em;
  line-height: 1.3;
  text-transform: uppercase;
  color: var(--text);
  white-space: nowrap;
}
.chip--planned { color: var(--text-dim); }
.chip--licensing {                     /* "Subject to licensing" — safelight allowed */
  border-color: var(--c-safelight);
  background: var(--c-safelight);
  color: var(--c-paper);               /* 5.48:1 */
}


/* 11. Iris marker (logo geometry) ------------------------------------------ */

.iris {
  display: inline-block;
  flex: none;
  width: .7em;
  height: .7em;
  background: currentColor;
  -webkit-mask: var(--iris-mask) center / contain no-repeat;
          mask: var(--iris-mask) center / contain no-repeat;
}
.iris--accent { background: var(--accent); }   /* active state only */


/* 12. Logo ----------------------------------------------------------------- */

.logo {
  display: inline-flex;
  align-items: center;
  gap: .7rem;
  color: inherit;
  text-decoration: none;
}
.logo__mark { width: 2rem; height: 2rem; flex: none; }
.logo__petals { fill: currentColor; }
.logo__petal--safe { fill: var(--c-safelight); }
.logo__letter { fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: square; }
.logo__word {
  font-family: var(--ff-head);
  font-weight: 700;
  font-size: 1rem;
  letter-spacing: .2em;
  text-transform: uppercase;
}


/* 13. Header §3.1 ---------------------------------------------------------- */
/* Default (inner pages, and home after 80px): paper .94 + blur, charcoal text.
   Home over the hero: transparent, light text, charcoal gradient from the top.
   JS adds .is-scrolled (IntersectionObserver sentinel, stage 6). */

.site-header {
  position: sticky;
  top: 0;
  z-index: 50;
  color: var(--c-charcoal);
  background: rgba(246,246,244,.94);
  -webkit-backdrop-filter: blur(10px);
          backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--c-line);
  transition: background-color var(--dur) var(--ease), color var(--dur) var(--ease), border-color var(--dur) var(--ease);
}

.site-header--over-hero {
  position: fixed;
  inset: 0 0 auto;
}
.site-header--over-hero:not(.is-scrolled) {
  --accent: var(--c-safe-lt);
  --line:   var(--c-line-dark);
  color: var(--c-paper);
  background: linear-gradient(to bottom, rgba(23,23,23,.66), rgba(23,23,23,.28) 60%, rgba(23,23,23,0)) border-box no-repeat;
  -webkit-backdrop-filter: none;
          backdrop-filter: none;
  border-bottom-color: transparent;
}
.site-header--over-hero:not(.is-scrolled) .btn--primary { border-color: var(--c-line-dark); }
.site-header--over-hero:not(.is-scrolled) .btn--primary:hover { border-color: var(--c-safe-lt); }

.site-header__inner {
  display: flex;
  align-items: center;
  gap: 1rem;
  min-height: var(--header-h);
}

.site-nav { display: none; margin-left: auto; }
.site-nav__list {
  display: flex;
  align-items: center;
  gap: clamp(1rem, 1.5vw, 1.6rem);
  margin: 0;
  padding: 0;
  list-style: none;
}
.site-nav__link {
  display: inline-flex;
  align-items: center;
  gap: .4em;
  padding-block: .5rem;
  font-size: .92rem;
  font-weight: 500;
  letter-spacing: .01em;
  text-decoration: none;
}
.site-nav .site-nav__link:hover { text-decoration: underline; text-decoration-color: currentColor; }

/* Active item: a small iris before the text (space reserved — no shift) */
.site-nav__iris {
  width: .7em;
  height: .7em;
  background: var(--accent);
  opacity: 0;
  transform: scale(.4) rotate(-60deg);
  transition: opacity var(--dur) var(--ease), transform .5s var(--ease);
}
.site-nav__link.is-active .site-nav__iris,
.site-nav__link[aria-current] .site-nav__iris { opacity: 1; transform: none; }

.site-header__cta { display: none; margin-left: auto; min-height: 2.75rem; padding: .6rem 1.15rem; font-size: .88rem; }

.nav-toggle {
  display: inline-flex;
  align-items: center;
  gap: .65rem;
  min-height: 2.75rem;
  margin-left: auto;
  padding: .4rem .2rem;
  font-size: .78rem;
  font-weight: 600;
  letter-spacing: .16em;
  text-transform: uppercase;
  text-decoration: none;
}
.nav-toggle__icon {
  width: 22px;
  height: 9px;
  border-top: 1.5px solid currentColor;
  border-bottom: 1.5px solid currentColor;
}

@media (min-width: 768px) {
  .site-header__cta { display: inline-flex; }
  .nav-toggle { margin-left: .5rem; }
}
@media (min-width: 1200px) {
  .site-nav { display: block; }
  .site-header__cta { margin-left: clamp(1rem, 2vw, 2rem); }
  .nav-toggle { display: none; }
}


/* 13b. Nav sheet < 1200px: drops from the top, black, a large contact sheet.
   .nav-sheet.is-open + aria-expanded on .nav-toggle + html.is-scroll-locked;
   Esc, backdrop click, inert and focus return are wired in stage 6.
   Without JS the toggle is a plain link to the footer navigation. */

html.is-scroll-locked { overflow: hidden; }

.nav-sheet {
  position: fixed;
  inset: 0;
  z-index: 100;
  visibility: hidden;
  pointer-events: none;
  transition: visibility 0s linear .45s;
}
.nav-sheet.is-open {
  visibility: visible;
  pointer-events: auto;
  transition-delay: 0s;
}

.nav-sheet__backdrop {
  position: absolute;
  inset: 0;
  background: rgba(23,23,23,.55);
  opacity: 0;
  transition: opacity .45s var(--ease);
}
.nav-sheet.is-open .nav-sheet__backdrop { opacity: 1; }

.nav-sheet__panel {
  --bg:       var(--c-charcoal);
  --text:     var(--c-paper);
  --text-dim: var(--c-paper-dim);
  --accent:   var(--c-safe-lt);
  --line:     var(--c-line-dark);
  position: relative;
  isolation: isolate;
  max-height: 100vh;
  max-height: 100dvh;
  overflow-y: auto;
  overscroll-behavior: contain;
  padding-bottom: clamp(1.5rem, 4vw, 2.5rem);
  background: var(--bg);
  color: var(--text);
  transform: translateY(-100%);
  transition: transform .45s var(--ease);
}
.nav-sheet.is-open .nav-sheet__panel { transform: none; }
.nav-sheet__panel::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background-image: var(--grain-coarse);
  background-size: 400px 400px;
  opacity: .07;
}

.nav-sheet__top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  min-height: var(--header-h);
}
.nav-sheet__close {
  display: inline-flex;
  align-items: center;
  gap: .6rem;
  min-height: 2.75rem;
  padding: .45rem .9rem;
  border: 1px solid var(--c-line-dark);
  border-radius: 0;
  background: none;
  font-size: .78rem;
  font-weight: 600;
  letter-spacing: .16em;
  text-transform: uppercase;
}
.nav-sheet__close:hover { border-color: var(--c-paper-dim); }
.nav-sheet__close-icon { position: relative; width: 14px; height: 14px; }
.nav-sheet__close-icon::before,
.nav-sheet__close-icon::after {
  content: "";
  position: absolute;
  left: calc(50% - .75px);
  top: -2px;
  width: 1.5px;
  height: 18px;
  background: currentColor;
  transform: rotate(45deg);
}
.nav-sheet__close-icon::after { transform: rotate(-45deg); }

.nav-sheet__grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: .75rem;
  margin-block: .5rem 0;
  list-style: none;
}
.nav-sheet__item:last-child { grid-column: 1 / -1; }

.nav-sheet__link {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: flex-start;
  aspect-ratio: 3 / 2;
  padding: .7rem .85rem .8rem;
  border: 1px solid var(--c-line-dark);
  background: var(--c-charcoal-2);
  text-decoration: none;
  transition: border-color var(--dur) var(--ease);
}
.nav-sheet__item:last-child .nav-sheet__link { aspect-ratio: auto; min-height: 5.25rem; }
.nav-sheet__link:hover { border-color: var(--c-paper-dim); }
.nav-sheet__link.is-active { border-color: var(--accent); }

.nav-sheet__no { color: var(--text-dim); }
.nav-sheet__label {
  display: inline-flex;
  align-items: center;
  gap: .4em;
  font-family: var(--ff-head);
  font-size: clamp(1.3rem, 4.6vw, 1.9rem);
  font-weight: 700;
  font-stretch: 92%;
  letter-spacing: -.01em;
  line-height: 1.05;
}

.nav-sheet__foot {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .75rem 1.5rem;
  margin-top: 1.25rem;
}
.nav-sheet__note { margin: 0; color: var(--text-dim); }

@media (min-width: 768px) {
  .nav-sheet__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1rem; }
}
@media (min-width: 1200px) {
  .nav-sheet { display: none; }
}


/* 14. Footer §3.2 — 4 columns / 2 / accordion on phones ------------------- */

.site-footer {
  position: relative;
  isolation: isolate;
  padding-block: clamp(3.5rem, 6vw, 5.5rem) 2rem;
  background: var(--bg);
  color: var(--text);
}
.site-footer a { text-decoration-color: var(--c-line-dark); }
.site-footer a:hover { text-decoration-color: currentColor; }
.site-footer .btn--primary,
.nav-sheet__panel .btn--primary { border-color: var(--c-line-dark); }
.site-footer .btn--primary:hover,
.nav-sheet__panel .btn--primary:hover { border-color: var(--c-safe-lt); }

.site-footer__grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 0;
}

.logo--footer .logo__mark { width: 2.4rem; height: 2.4rem; }
.site-footer__pitch {
  max-width: 20.9em;
  margin-top: 1.25rem;
  font-weight: 500;
  line-height: 1.55;
}
.site-footer__region { max-width: 40ch; color: var(--text-dim); }
.site-footer__col--brand { padding-bottom: 2rem; }

.site-footer__title {
  margin: 0;
  font-family: var(--ff-body);
  font-size: .72rem;
  font-weight: 600;
  letter-spacing: .24em;
  line-height: 1.4;
  text-transform: uppercase;
  color: var(--text-dim);
}
.site-footer__toggle {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  min-height: 3.25rem;
  padding: 0;
  border: 0;
  background: none;
  font: inherit;
  letter-spacing: inherit;
  text-transform: inherit;
  color: inherit;
  text-align: left;
}
.site-footer__chev {
  width: 8px;
  height: 8px;
  margin-right: 4px;
  border-right: 1.5px solid currentColor;
  border-bottom: 1.5px solid currentColor;
  transform: translateY(-2px) rotate(45deg);
  transition: transform var(--dur) var(--ease);
}
.site-footer__toggle[aria-expanded="true"] .site-footer__chev { transform: translateY(2px) rotate(-135deg); }

.site-footer__col:not(.site-footer__col--brand) { border-top: 1px solid var(--line); }
.site-footer__body { padding-bottom: 1.5rem; }

.site-footer__list {
  display: grid;
  gap: .5rem;
  margin: 0;
  padding: 0;
  list-style: none;
  font-size: .95rem;
}
.site-footer__list a,
.site-footer__mail a { text-decoration-color: transparent; }
.site-footer__list a:hover,
.site-footer__mail a:hover,
.site-footer__list a[aria-current] { text-decoration-color: currentColor; }

.site-footer__cta { margin-block: .25rem .5rem; }
.site-footer__mail {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: .35rem 1rem;
  margin: 1.25rem 0 0;
}
.site-footer__mail dt { color: var(--text-dim); }
.site-footer__mail dd { margin: 0; overflow-wrap: anywhere; }

/* Accordion: phones only, only once JS has taken over (no JS → all open).
   State = aria-expanded on .site-footer__toggle; stored in localStorage
   "lysskjul-footer-accordion" after interaction (stage 6). */
@media (max-width: 767.98px) {
  .js .site-footer__title:has(> [aria-expanded="false"]) + .site-footer__body { display: none; }
}

@media (min-width: 768px) {
  .site-footer__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 2.75rem 2.5rem; }
  .site-footer__col:not(.site-footer__col--brand) { border-top: 0; }
  .site-footer__col--brand { padding-bottom: 0; }
  .site-footer__title { margin-bottom: 1.1rem; }
  .site-footer__toggle { min-height: 0; pointer-events: none; cursor: default; }
  .site-footer__chev { display: none; }
  .site-footer__body { padding-bottom: 0; }
}
@media (min-width: 1024px) {
  .site-footer__grid { grid-template-columns: minmax(0, 1.35fr) minmax(0, .9fr) minmax(0, 1fr) minmax(0, 1.25fr); }
}

.site-footer__bottom {
  display: grid;
  gap: .7rem;
  margin-top: clamp(2.5rem, 5vw, 4rem);
  padding-top: 1.5rem;
  /* rule spans the content box only, not the container gutters */
  background: linear-gradient(var(--line), var(--line)) center top / calc(100% - 2 * var(--gutter)) 1px no-repeat;
  color: var(--text-dim);
}
.site-footer__bottom p { margin: 0; }
.site-footer__gaming { display: flex; align-items: flex-start; gap: .75rem; max-width: 80ch; }

.badge-18 {
  flex: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 2.4rem;
  height: 1.6rem;
  padding-inline: .4rem;
  border: 1px solid currentColor;
  color: var(--text);
  font-family: var(--ff-head);
  font-size: .75rem;
  font-weight: 700;
  letter-spacing: .04em;
  line-height: 1;
  font-variant-numeric: lining-nums;
}

.footer__owner {
  margin-top: .5rem !important;
  font-size: .8rem;
  line-height: 1.6;
}


/* 15. Home ------------------------------------------------------------------ */

/* S1. Hero — three frames, iris transition through --iris on .hero.
   JS (stage 6) moves .is-active / .is-leaving and animates --iris 0 → 150%.
   Without JS: frame 1 only. Reduced motion: frames swap, no iris. */

@property --iris {
  syntax: '<percentage>';
  inherits: true;
  initial-value: 150%;
}

.hero {
  --bg:       var(--c-charcoal);
  --text:     var(--c-paper);
  --text-dim: var(--c-paper-dim);
  --accent:   var(--c-safe-lt);
  --line:     var(--c-line-dark);
  position: relative;
  isolation: isolate;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  min-height: 100vh;
  min-height: 100svh;
  overflow: hidden;
  background: var(--bg);
  color: var(--text);
  transition: --iris .9s cubic-bezier(.6, 0, .2, 1);
}

.hero__slides { position: absolute; inset: 0; z-index: -2; }
.hero__slide {
  position: absolute;
  inset: 0;
  opacity: 0;
}
.hero__slide.is-active {
  z-index: 2;
  opacity: 1;
  clip-path: circle(var(--iris, 150%) at 50% 50%);
}
.hero__slide.is-leaving { z-index: 1; opacity: 1; }
/* Frames 2–3 are not rendered (so their lazy images do not load) until the page
   has loaded and JS marks the hero ready; without JS only frame 1 is shown. */
.hero:not(.is-ready) .hero__slide:not(.is-active) { display: none; }
.hero__slide picture,
.hero__img { width: 100%; height: 100%; }
.hero__img { object-fit: cover; }

/* Shade keeps the headline legible over any frame */
.hero::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background:
    linear-gradient(to top, rgba(23,23,23,.88) 0%, rgba(23,23,23,.62) 38%, rgba(23,23,23,.18) 68%, rgba(23,23,23,0) 85%);
}
@media (min-width: 1024px) {
  .hero::after {
    background:
      linear-gradient(to right, rgba(23,23,23,.84) 0%, rgba(23,23,23,.62) 38%, rgba(23,23,23,.18) 62%, rgba(23,23,23,0) 78%),
      linear-gradient(to top, rgba(23,23,23,.7) 0%, rgba(23,23,23,.2) 45%, rgba(23,23,23,0) 70%);
  }
}

.hero__content { padding-top: calc(var(--header-h) + 2rem); }
.hero__title { max-width: 8.23em;   /* = 15.5ch of Archivo; em keeps wrapping identical under the fallback */ margin-bottom: .32em; }
.hero__lead {
  max-width: 50ch;
  margin-bottom: 1.6rem;
  font-size: var(--fs-lead);
  font-weight: 500;
  line-height: 1.55;
}
.hero .btn--primary { border-color: var(--c-line-dark); }
.hero .btn--primary:hover { border-color: var(--c-safe-lt); }
.hero__disclaimer { margin-top: 1.1rem; }

.hero__controls {
  display: flex;
  align-items: center;
  gap: 1rem;
  min-height: 2.75rem;
  padding-block: .5rem clamp(1rem, 3vw, 2rem);
  visibility: hidden;            /* space reserved: no shift when JS arrives */
}
.js .hero__controls { visibility: visible; }

.hero__dots { display: flex; gap: .25rem; }
.hero__dot {
  position: relative;
  width: 2.75rem;
  height: 2.75rem;
  padding: 0;
  border: 0;
  background: none;
}
.hero__dot::before {
  content: "";
  position: absolute;
  left: .5rem;
  right: .5rem;
  top: calc(50% - 1px);
  height: 2px;
  background: var(--c-paper-dim);
  opacity: .5;
  transition: opacity var(--dur) var(--ease);
}
.hero__dot:hover::before { opacity: .85; }
.hero__dot[aria-current="true"]::before { background: var(--c-paper); opacity: 1; }

.hero__pause {                   /* created by JS (stage 6) */
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  min-height: 2.75rem;
  padding: 0 .75rem;
  border: 1px solid var(--c-line-dark);
  background: none;
  font-size: .72rem;
  font-weight: 600;
  letter-spacing: .16em;
  text-transform: uppercase;
}

/* Phones with short screens (390×664): keep H1, buttons and the disclaimer
   in the first screen. */
@media (max-width: 767.98px) {
  .hero__content { padding-top: calc(var(--header-h) + 1rem); }
  .hero__title { font-size: clamp(2.3rem, 10.5vw, 2.9rem); max-width: none; }
  .hero__lead { font-size: 1rem; margin-bottom: 1.2rem; }
  .hero__actions { gap: .5rem 1.5rem; }
  .hero__disclaimer { margin-top: .6rem; font-size: .75rem; }
  .hero__controls { padding-block: .25rem .75rem; }
}
@media (max-width: 767.98px) and (max-height: 700px) {
  .hero__title { font-size: 2.3rem; }
  .hero .eyebrow { margin-bottom: .75rem; }
  .hero__lead { font-size: .95rem; line-height: 1.5; }
}


/* S2. The idea */

.idea__grid { align-items: end; }
.idea__detail { margin-top: 1rem; }
.idea__wide { margin-top: clamp(2.5rem, 5vw, 4rem); }

.figures {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--gap);
  margin: clamp(2.5rem, 5vw, 4rem) 0 0;
  padding: 0;
  list-style: none;
}
.figures__item {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: .6rem;
}
.figures__num {
  font-family: var(--ff-head);
  font-size: clamp(2.5rem, 5vw, 4rem);
  font-weight: 800;
  font-stretch: 85%;
  letter-spacing: -.02em;
  line-height: 1;
  font-variant-numeric: tabular-nums lining-nums;
}
.figures__unit { margin-left: .12em; font-size: .45em; font-weight: 700; letter-spacing: 0; }
.figures__label { font-weight: 500; line-height: 1.35; }
@media (min-width: 1024px) {
  .figures { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}


/* S3. The Hides */

.hides__wide { margin-bottom: var(--gap); }
.hides__row {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--gap);
}
.hides__row > :last-child { grid-column: 1 / -1; }
@media (min-width: 768px) {
  /* widths in proportion to 4:5, 4:5, 4:3 so the three frames line up */
  .hides__row { grid-template-columns: .8fr .8fr 1.333fr; }
  .hides__row > :last-child { grid-column: auto; }
  /* frame padding skews pure ratios: give the three images one height */
  .hides__row .frame__media { aspect-ratio: auto; height: clamp(15rem, 25vw, 22rem); }
}
.hides__body { margin-top: clamp(3rem, 6vw, 5rem); row-gap: 2.5rem; }
.hides__rules-title { margin-bottom: 1rem; }

.rules { margin: 0; padding: 0; list-style: none; }
.rules__item {
  display: grid;
  grid-template-columns: 2.25rem minmax(0, 1fr);
  gap: .75rem;
  padding-block: .9rem;
  border-top: 1px solid var(--line);
  line-height: 1.55;
}
.rules__item:last-child { border-bottom: 1px solid var(--line); }
.rules__no { padding-top: .3em; }
.rules strong { display: block; font-weight: 600; }

.season { margin-top: clamp(3.5rem, 7vw, 6rem); }
.season__head {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: 1rem 2rem;
  margin-bottom: 1.5rem;
}
.season__title { margin: 0; }
.season__chips { display: none; flex-wrap: wrap; gap: .5rem; }
.js .season__chips { display: flex; }
.season__chip {
  min-height: 2.75rem;
  padding: .5rem 1.1rem;
  border: 1px solid var(--line);
  border-radius: 0;
  background: none;
  font-family: var(--ff-head);
  font-size: .75rem;
  font-weight: 500;
  letter-spacing: .1em;
  text-transform: uppercase;
  transition: border-color var(--dur) var(--ease), background-color var(--dur) var(--ease);
}
.season__chip:hover { border-color: var(--text-dim); }
.season__chip[aria-pressed="true"] {
  border-color: var(--accent);
  background: var(--text);
  color: var(--bg);
}

.season__table { width: 100%; font-size: .95rem; line-height: 1.55; }
.season__table th,
.season__table td {
  padding: .85rem 1.25rem .85rem 0;
  border-bottom: 1px solid var(--line);
  text-align: left;
  vertical-align: top;
}
.season__table thead th {
  padding-block: 0 .75rem;
  font-family: var(--ff-head);
  font-size: .7rem;
  font-weight: 500;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--text-dim);
}
.season__table tbody th[scope="row"] { width: 22%; font-weight: 600; }
.season__table td:nth-child(2) { width: 30%; color: var(--text-dim); }
.season__label th {
  padding-top: 1.75rem !important;
  font-family: var(--ff-head);
  font-size: .72rem;
  font-weight: 600;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--accent);
}

@media (max-width: 767.98px) {
  .season__table thead {
    position: absolute;
    width: 1px; height: 1px;
    overflow: hidden;
    clip-path: inset(50%);
  }
  .season__table tr { display: block; padding-block: .9rem; border-bottom: 1px solid var(--line); }
  .season__table th,
  .season__table td { display: block; width: auto !important; padding: 0; border: 0; }
  .season__table td:nth-child(2) { margin-block: .15rem .35rem; font-size: .85rem; }
  .season__label { border-bottom: 0 !important; padding-bottom: 0 !important; }
}

.hides__honest {
  max-width: 19em;
  margin-top: clamp(2.5rem, 5vw, 4rem);
  font-family: var(--ff-head);
  font-size: var(--fs-h3);
  font-weight: 700;
  letter-spacing: -.01em;
  line-height: 1.2;
}


/* S4. The Darkroom */

.darkroom__media {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--gap);
}
.darkroom__wide { grid-column: 1 / -1; }
@media (min-width: 1024px) {
  /* 21:9 beside two 4:5 frames, equal heights */
  .darkroom__media { grid-template-columns: 2.333fr .8fr .8fr; }
  .darkroom__wide { grid-column: auto; }
  .darkroom__media .frame__media { aspect-ratio: auto; height: clamp(17rem, 24vw, 22rem); }
}
.darkroom__body { margin-top: clamp(3rem, 6vw, 5rem); row-gap: 2.5rem; }

.points { margin: 0; padding: 0; list-style: none; }
.points__item { padding-block: 1.1rem; border-top: 1px solid var(--line); }
.points__item:last-child { border-bottom: 1px solid var(--line); }
.points__title { margin-bottom: .35em; font-size: 1.15rem; }
.points__item p { color: var(--text-dim); }


/* S5. Rooms — filmstrip (tablist) + panel.
   No JS: the strip is hidden and all six panels are shown one under another. */

.film {
  display: grid;
  gap: clamp(1.5rem, 3vw, 3rem);
  align-items: start;
}

.film__strip {
  --perf: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='16'%3E%3Crect x='7' y='4' width='10' height='8' rx='2' fill='%23F6F6F4' fill-opacity='.85'/%3E%3C/svg%3E");
  --perf-v: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='24'%3E%3Crect x='4' y='7' width='8' height='10' rx='2' fill='%23F6F6F4' fill-opacity='.85'/%3E%3C/svg%3E");
  position: relative;
  display: none;
  gap: 10px;
  padding: 22px 12px;
  background: var(--c-charcoal);
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
}
.film__strip::-webkit-scrollbar { display: none; }
.js .film__strip { display: flex; }

/* perforation, top and bottom (phones/tablets) */
.film__strip::before,
.film__strip::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  height: 16px;
  background: var(--perf) 0 0 / 24px 16px repeat-x;
  pointer-events: none;
}
.film__strip::before { top: 3px; }
.film__strip::after  { bottom: 3px; }

.film__frame {
  position: relative;
  flex: 0 0 min(44vw, 220px);
  scroll-snap-align: start;
  padding: 0;
  border: 0;
  background: #000;
  color: var(--c-paper);
  text-align: left;
  opacity: .55;
  transition: opacity var(--dur) var(--ease);
}
.film__frame img { width: 100%; aspect-ratio: 3 / 2; object-fit: cover; }
.film__label { display: block; padding: .45rem .15rem .1rem; color: var(--c-paper); background: var(--c-charcoal); }
.film__label .caption__no { color: var(--c-paper-dim); }
.film__frame:hover { opacity: .85; }
.film__frame[aria-selected="true"] { opacity: 1; }
.film__frame[aria-selected="true"]::after {   /* the red mark: active state */
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: -7px;
  height: 3px;
  background: var(--c-safelight);
}
.film__frame:focus-visible { outline-offset: 2px; }

@media (min-width: 1024px) {
  .film { grid-template-columns: 240px minmax(0, 1fr); }
  .film__strip {
    position: sticky;
    top: calc(var(--header-h) + 1.5rem);
    flex-direction: column;
    padding: 12px 26px;
    overflow: visible;
  }
  .film__strip::before,
  .film__strip::after {
    top: 0;
    bottom: 0;
    left: auto;
    right: auto;
    width: 16px;
    height: auto;
    background: var(--perf-v) 0 0 / 16px 24px repeat-y;
  }
  .film__strip::before { left: 5px; }
  .film__strip::after  { right: 5px; }
  .film__frame { flex: none; }
  .film__frame[aria-selected="true"]::after { left: -4px; right: auto; top: 0; bottom: 0; width: 3px; height: auto; }
}

.film__panels { min-width: 0; }
.film__panel + .film__panel { margin-top: clamp(3rem, 6vw, 5rem); }
.js .film__panel { animation: film-in .45s var(--ease); }
@keyframes film-in { from { opacity: 0; } to { opacity: 1; } }
.film__panel:focus-visible { outline-offset: 6px; }

.film__panel { display: grid; gap: clamp(1.5rem, 3vw, 2.5rem); }
@media (min-width: 1200px) {
  .film__panel { grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); align-items: start; }
}
.film__title { margin-bottom: .6rem; }
.film__chips {
  display: flex;
  flex-wrap: wrap;
  gap: .5rem;
  margin: 0 0 1.25rem;
  padding: 0;
  list-style: none;
}
.film__thumbs {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: .6rem;
  margin: 1.5rem 0;
  padding: 0;
  list-style: none;
}
.film__thumb {
  display: block;
  padding: 4px;
  background: var(--c-frame);
  border: 1px solid var(--c-line);
  cursor: zoom-in;
}
.film__thumb img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; }
.film__thumb:hover { border-color: var(--c-char-dim); }


/* S6. Dining */

.split {
  display: grid;
  gap: clamp(1.5rem, 3vw, 3rem);
  align-items: center;
  margin-bottom: clamp(3rem, 6vw, 5rem);
}
.split__text { max-width: 52ch; }
@media (min-width: 1024px) {
  .split { grid-template-columns: 7fr 5fr; }
  .split--reverse { grid-template-columns: minmax(0, 1fr) minmax(0, 26rem); gap: clamp(2rem, 6vw, 6rem); }
  .split--reverse .split__media { order: 2; }
}
@media (min-width: 768px) and (max-width: 1023.98px) {
  .split__media--narrow { max-width: 70%; }
}

.dishes {
  display: grid;
  gap: var(--gap);
  margin: 0 0 clamp(3rem, 6vw, 5rem);
  padding: 0;
  list-style: none;
}
@media (min-width: 600px) {
  .dishes { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

.early { display: grid; gap: clamp(1.5rem, 3vw, 3rem); align-items: center; }
@media (min-width: 768px) {
  .early { grid-template-columns: 4fr 6fr; padding: clamp(1.5rem, 3vw, 3rem); }
}
.early__text { max-width: 52ch; }


/* S7. The entertainment and gaming lounge */

.casino__head h2 { margin-bottom: .55em; }
.casino__body { margin-top: clamp(3rem, 6vw, 5rem); row-gap: 2.5rem; }
.casino__list { margin: 0; padding: 0; list-style: none; }
.casino__list li {
  display: flex;
  align-items: flex-start;
  gap: .9rem;
  padding-block: .85rem;
  border-top: 1px solid var(--line);
  line-height: 1.55;
}
.casino__list li:last-child { border-bottom: 1px solid var(--line); }
.casino__mark {
  flex: none;
  width: 2.4rem;
  height: 1px;
  margin-top: .8em;
  background: var(--text-dim);
}

.strip { margin-top: clamp(3.5rem, 7vw, 6rem); }
.strip__head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 1rem;
  margin-bottom: 1rem;
}
.strip__title { margin: 0; }
.strip__nav { display: none; gap: .5rem; }
.js .strip__nav { display: flex; }
.strip__prev,
.strip__next {
  width: 2.75rem;
  height: 2.75rem;
  padding: 0;
  border: 1px solid var(--line);
  border-radius: 0;
  background: none;
  font-size: 1.4rem;
  line-height: 1;
  transition: border-color var(--dur) var(--ease), opacity var(--dur) var(--ease);
}
.strip__prev:hover:not(:disabled),
.strip__next:hover:not(:disabled) { border-color: var(--text-dim); }
.strip__prev:disabled,
.strip__next:disabled { opacity: .35; cursor: default; }

.strip__track {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: minmax(230px, 72%);
  gap: var(--gap);
  margin: 0;
  padding: 12px;                     /* room for the corner marks */
  list-style: none;
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scroll-snap-type: x mandatory;
  scroll-padding-inline: 12px;
  scrollbar-width: thin;
  scrollbar-color: var(--c-line-dark) transparent;
}
.strip__item { scroll-snap-align: start; }
.strip .card--media::before { inset: -8px; }
@media (min-width: 768px)  { .strip__track { grid-auto-columns: calc((100% - 2 * var(--gap)) / 2.35); } }
@media (min-width: 1200px) { .strip__track { grid-auto-columns: calc((100% - 3 * var(--gap)) / 4); } }

.casino__help {
  display: flex;
  align-items: flex-start;
  gap: .75rem;
  max-width: 72ch;
  margin-top: clamp(2.5rem, 5vw, 3.5rem);
  color: var(--text-dim);
}

/* S8. Heat and ice */

.spa__layout { display: grid; grid-template-columns: minmax(0, 1fr); gap: clamp(2rem, 4vw, 3.5rem); }
.spa__head { display: grid; gap: 1.25rem; align-content: start; }
.spa__intro { max-width: var(--measure); }
@media (min-width: 768px) and (max-width: 1023.98px) {
  .spa__head { grid-template-columns: 1fr 1fr; gap: var(--gap); align-items: end; }
}
@media (min-width: 1024px) {
  .spa__layout { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); grid-template-rows: auto 1fr; column-gap: clamp(2.5rem, 5vw, 5rem); }
  .spa__head, .rhythm { grid-column: 1; }
  .spa__layout .strip { grid-column: 2; grid-row: 1 / span 2; margin-top: 0; }
  .rhythm { align-self: start; }
}

.rhythm {
  display: grid;
  gap: 0;
  margin: 0;
  padding: 0;
  list-style: none;
}
.rhythm__step {
  display: grid;
  grid-template-columns: 2.25rem 4.5rem minmax(0, 1fr);
  align-items: baseline;
  gap: .75rem;
  padding-block: 1rem;
  border-top: 1px solid var(--line);
}
.rhythm__step:last-child { border-bottom: 1px solid var(--line); }
.rhythm__iris { width: 1.35rem; height: 1.35rem; align-self: center; color: var(--c-charcoal); }
.rhythm__step:nth-child(2) .rhythm__iris { transform: rotate(20deg) scale(.82); }
.rhythm__step:nth-child(3) .rhythm__iris { transform: rotate(40deg) scale(.64); }
.rhythm__word {
  font-family: var(--ff-head);
  font-size: 1.15rem;
  font-weight: 700;
}
.rhythm__text { color: var(--text-dim); line-height: 1.5; }

/* Strip that becomes a 2×2 grid from 768px (spa) */
@media (min-width: 768px) {
  .strip--grid .strip__nav { display: none; }
  .strip--grid .strip__track {
    grid-auto-flow: row;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    grid-auto-columns: auto;
    overflow: visible;
  }
}


/* S9. Gatherings */

.events__wide { margin-bottom: clamp(2.5rem, 5vw, 4rem); }
.events__head { row-gap: 1rem; align-items: end; }
.events__cards {
  display: grid;
  gap: calc(var(--gap) + 12px);
  margin: clamp(2.5rem, 5vw, 4rem) 0 0;
  padding: 12px;
  list-style: none;
}
@media (min-width: 768px) { .events__cards { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.events__cards .card--media::before { inset: -8px; }
.events__foot { margin-top: clamp(3rem, 6vw, 5rem); row-gap: 2.5rem; align-items: end; }
.events__note { margin-top: .75rem; }
.events__cta .btn { margin-top: .5rem; }

.table-scroll {
  max-width: 100%;
  overflow-x: auto;
  overscroll-behavior-x: contain;
}
.table-scroll:focus-visible { outline-offset: 4px; }

.capacity {
  width: 100%;
  min-width: 34rem;
  font-variant-numeric: tabular-nums lining-nums;
}
.capacity th,
.capacity td {
  padding: .8rem 1rem .8rem 0;
  border-bottom: 1px solid var(--line);
  text-align: right;
  white-space: nowrap;
}
.capacity th:first-child { text-align: left; font-weight: 600; }
.capacity thead th {
  padding-top: 0;
  font-family: var(--ff-head);
  font-size: .7rem;
  font-weight: 500;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--text-dim);
}
.capacity td { font-family: var(--ff-head); font-size: 1.05rem; font-weight: 600; }


/* S10. Varanger */

.varanger__head { row-gap: 1rem; align-items: end; }
.region {
  display: grid;
  gap: calc(var(--gap) + 12px);
  margin: clamp(2.5rem, 5vw, 4rem) 0 0;
  padding: 12px;
  list-style: none;
}
.region .card--media::before { inset: -8px; }
@media (min-width: 768px)  { .region { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1200px) { .region { grid-template-columns: repeat(4, minmax(0, 1fr)); } }

.varanger__map { margin-top: clamp(3rem, 6vw, 5rem); row-gap: 2.5rem; align-items: start; }
.varanger__travel h3 + p { margin-bottom: 2rem; }
.varanger__travel p { color: var(--text-dim); }

.map { margin: 0; }
.map__media { position: relative; }
.map__media img { width: 100%; height: auto; }

/* No JS: the labels are a plain list under the map.
   JS (MapLabels, stage 6) adds .is-placed and sets --x / --y from data-x / data-y. */
.map__labels {
  display: flex;
  flex-wrap: wrap;
  gap: .4rem;
  margin: .6rem 0 0;
  padding: 0;
  list-style: none;
}
.map__label {
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  max-width: 13rem;
  padding: .25rem .5rem;
  background: rgba(23,23,23,.82);
  color: var(--c-paper);
  font-family: var(--ff-head);
  font-size: .68rem;
  font-weight: 500;
  letter-spacing: .08em;
  line-height: 1.3;
  text-transform: uppercase;
}
.map__pin {
  flex: none;
  width: .7rem;
  height: .7rem;
  border: 2px solid var(--c-paper);
  border-radius: 50%;
}
.map.is-placed .map__labels { position: absolute; inset: 0; margin: 0; display: block; pointer-events: none; }
.map.is-placed .map__label {
  position: absolute;
  left: var(--x, 50%);
  top: var(--y, 50%);
  transform: translate(-50%, -50%);
  white-space: nowrap;
}
.map.is-placed .map__label--project {
  flex-direction: row-reverse;
  white-space: normal;
  width: max-content;
  max-width: min(13rem, 60vw);
  transform: translate(calc(-100% + .85rem), -50%);
}


/* S11. Contact sheet. Loupe layer is created by JS on first hover (stage 6). */

.sheet {
  position: relative;
  overflow: hidden;          /* the loupe and its ring never push past the sheet (no page overflow) */
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(.4rem, 1.4vw, 1.1rem);
  margin: 0;
  padding: clamp(.5rem, 1.6vw, 1.25rem);
  background: var(--c-charcoal);
  list-style: none;
}
.sheet__frame {
  display: block;
  height: 100%;
  padding: clamp(.25rem, .6vw, .45rem) clamp(.25rem, .6vw, .45rem) 0;
  background: var(--c-frame);
  text-decoration: none;
  cursor: zoom-in;
}
.sheet__media { display: block; aspect-ratio: 1 / 1; overflow: hidden; background: var(--c-silver-2); }
.sheet__media img { width: 100%; height: 100%; object-fit: cover; }
.sheet__caption {
  display: block;
  padding: .45rem .1rem .55rem;
  color: var(--c-char-dim);
  transition: transform var(--dur) var(--ease);
}
.sheet__frame:hover .sheet__caption { transform: translateX(2px); }
.sheet__frame:focus-visible { outline-offset: 2px; outline-color: var(--c-safe-lt); }
@media (max-width: 599.98px) {
  .sheet__caption { font-size: .62rem; letter-spacing: .06em; }
  .sheet__caption .caption__no { display: block; margin: 0 0 .1rem; }
}


/* S12. FAQ */

.faq__head { margin-bottom: 1.5rem; }
.faq__list { border-top: 1px solid var(--line); }
.faq__item { border-bottom: 1px solid var(--line); }
.faq__q { margin: 0; font-size: 1.1rem; line-height: 1.35; letter-spacing: -.005em; }
.faq__toggle {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
  width: 100%;
  min-height: 3.5rem;
  padding: 1.1rem 0;
  border: 0;
  background: none;
  font: inherit;
  letter-spacing: inherit;
  text-align: left;
}
.faq__chev {
  flex: none;
  width: 9px;
  height: 9px;
  margin-right: 4px;
  border-right: 1.5px solid currentColor;
  border-bottom: 1.5px solid currentColor;
  transform: translateY(-3px) rotate(45deg);
  transition: transform var(--dur) var(--ease);
}
.faq__toggle[aria-expanded="true"] .faq__chev { transform: translateY(2px) rotate(-135deg); }
.faq__a { max-width: var(--measure); padding-bottom: 1.25rem; color: var(--text-dim); }
.faq__a p { margin-bottom: .75em; }
.faq__note { font-size: var(--fs-small); font-style: italic; }
.js .faq__q:has(> [aria-expanded="false"]) + .faq__a { display: none; }


/* S12. CTA band */

.cta {
  display: flex;
  align-items: center;
  min-height: clamp(26rem, 42vw, 34rem);
  overflow: hidden;
}
.cta__bg { position: absolute; inset: 0; z-index: -2; }
.cta__bg img { width: 100%; height: 100%; object-fit: cover; }
.cta::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(to right, rgba(23,23,23,.86) 0%, rgba(23,23,23,.6) 45%, rgba(23,23,23,.15) 80%);
}
.cta__title { max-width: 9.33em; }
.cta__note { margin-bottom: 1.75rem; color: var(--text-dim); font-size: var(--fs-lead); }

/* 16. Contact page and interest list form (§5, form-action 'none'):
   no action attribute, button type="button", mailto built by JS (stage 6). */

.contact {
  display: grid;
  gap: clamp(2.5rem, 5vw, 4rem);
  align-items: start;
}
@media (min-width: 1024px) {
  .contact { grid-template-columns: minmax(0, 7fr) minmax(0, 4fr); column-gap: clamp(3rem, 6vw, 6rem); }
}
.contact__form { max-width: 40rem; }
.contact__title { font-family: var(--ff-head); font-size: clamp(1.6rem, 2.8vw, 2.2rem); font-stretch: 100%; margin-bottom: 1.5rem; }

.form { display: grid; gap: 1.35rem; }
.form__field { display: grid; gap: .45rem; }
.form__label {
  font-family: var(--ff-head);
  font-size: .72rem;
  font-weight: 600;
  letter-spacing: .12em;
  text-transform: uppercase;
}
.form__input {
  width: 100%;
  min-height: 3.1rem;
  padding: .7rem .9rem;
  border: 1px solid var(--c-silver-2);
  border-bottom-color: var(--c-char-dim);
  border-radius: 0;
  background: #fff;
  color: var(--c-charcoal);
  font-size: 1rem;
  line-height: 1.4;
  transition: border-color var(--dur) var(--ease);
}
.form__input:hover { border-color: var(--c-char-dim); }
.form__input:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; border-color: var(--c-charcoal); }
.form__select {
  appearance: none;
  padding-right: 2.5rem;
  background:
    linear-gradient(45deg, transparent 50%, var(--c-charcoal) 50%) calc(100% - 1.15rem) 55% / 6px 6px no-repeat,
    linear-gradient(-45deg, transparent 50%, var(--c-charcoal) 50%) calc(100% - .8rem) 55% / 6px 6px no-repeat,
    #fff;
}

.form__field--check {
  grid-template-columns: 1.4rem minmax(0, 1fr);
  align-items: start;
  gap: .75rem;
  font-size: .92rem;
  line-height: 1.55;
}
.form__check {
  width: 1.25rem;
  height: 1.25rem;
  margin: .15rem 0 0;
  accent-color: var(--c-charcoal);
}

.form__actions { display: flex; flex-wrap: wrap; align-items: center; gap: .75rem 1.5rem; margin-top: .25rem; }
.form__hint { max-width: 34ch; margin: 0; color: var(--text-dim); }

/* JS adds .is-invalid on fields and fills .form__error / .form__status */
.form__field.is-invalid .form__input { border: 2px solid var(--c-charcoal); }   /* no red: safelight is reserved (§2.3) */
.form__error { margin: 0; font-size: .85rem; font-weight: 600; color: var(--c-charcoal); }
.form__error::before { content: "— "; }
.form__status:empty { display: none; }
.form__status { margin: 0; font-weight: 500; }

.form__noscript,
.form__direct { margin-top: 1.5rem; }
.form__fine { margin-top: .5rem; color: var(--text-dim); }

.contact__aside { padding: clamp(1.5rem, 3vw, 2.25rem); }
.contact__aside-title { margin-bottom: 1.25rem; }
.contact__desks {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: .5rem 1rem;
  margin: 0 0 2rem;
  font-size: .95rem;
}
.contact__desks dt { color: var(--text-dim); }
.contact__desks dd { margin: 0; overflow-wrap: anywhere; }
.contact__where { margin-bottom: .4rem; font-size: 1.05rem; }


/* 17. Inner pages: page head, breadcrumb, prose (legal text — stage 9) ----- */

.page-head { padding-block: clamp(3rem, 7vw, 6rem) clamp(1.75rem, 3.5vw, 2.75rem); }
.page-head__title { font-size: clamp(2.4rem, 5.5vw, 4.6rem); margin-bottom: 0; }
.page-head .lead { max-width: var(--measure); margin-top: 1.25rem; }
.page-head__actions { margin-top: 2rem; }

.page-body {
  padding-block: clamp(2rem, 4vw, 3.5rem) var(--section-y);
  border-top: 1px solid var(--c-line);
}
.page-body:has(.prose:empty) { padding-block: 0; border-top: 0; }

.breadcrumb { margin-bottom: clamp(1.75rem, 3.5vw, 2.75rem); }
.breadcrumb__list {
  display: flex;
  flex-wrap: wrap;
  gap: .4rem .6rem;
  margin: 0;
  padding: 0;
  list-style: none;
  font-family: var(--ff-head);
  font-size: .7rem;
  font-weight: 500;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--text-dim);
}
.breadcrumb__list li + li::before { content: "/"; margin-right: .6rem; }
.breadcrumb__list a { text-decoration-color: transparent; }
.breadcrumb__list a:hover { text-decoration-color: currentColor; }

.prose { max-width: var(--measure); }
.prose h2 { font-family: var(--ff-head); font-size: clamp(1.45rem, 2.6vw, 2rem); font-stretch: 100%; margin: 2.4em 0 .6em; }
.prose h2:first-child { margin-top: 0; }
.prose h3 { margin: 1.8em 0 .5em; }
.prose ul, .prose ol { margin: 0 0 1.1em; padding-left: 1.25em; }
.prose li + li { margin-top: .35em; }
.prose strong { font-weight: 600; }
.prose a { text-decoration-color: var(--c-char-dim); }
.prose a:hover { text-decoration-color: currentColor; }
.prose code {
  padding: .05em .3em;
  background: var(--c-silver);
  font-family: ui-monospace, Menlo, Consolas, monospace;
  font-size: .86em;
  overflow-wrap: anywhere;
}
.prose__updated { margin-bottom: 1rem; color: var(--text-dim); }
.prose .lead { margin-bottom: 2rem; }
.prose__toc {
  margin: 0 0 2.5rem;
  padding: 1.25rem 1.5rem;
  border-left: 2px solid var(--c-charcoal);
  background: var(--c-silver);
}
.prose__toc ol { margin: 0; padding-left: 1.4em; columns: 2 14rem; column-gap: 2rem; font-size: .92rem; }
.prose__toc li { break-inside: avoid; }
.prose__toc li + li { margin-top: .25em; }
.prose__toc a { text-decoration-color: transparent; }
.prose__toc a:hover { text-decoration-color: currentColor; }
.prose__address { padding-left: 1rem; border-left: 1px solid var(--c-line); font-weight: 500; }
.prose__dl {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: .45rem 1.25rem;
  margin: 0 0 1.1em;
}
.prose__dl dt { color: var(--text-dim); }
.prose__dl dd { margin: 0; overflow-wrap: anywhere; }
@media (max-width: 479.98px) {
  .prose__dl { grid-template-columns: minmax(0, 1fr); gap: .1rem; }
  .prose__dl dd { margin-bottom: .6rem; }
}
.prose .table-scroll { margin: 0 0 1.25em; }
.prose__item { padding: 1.25rem 1.5rem; border-left: 2px solid var(--c-charcoal); background: var(--c-silver); }
.prose__table { width: 100%; min-width: 40rem; font-size: .9rem; line-height: 1.55; }
.prose__table th,
.prose__table td {
  padding: .75rem 1rem .75rem 0;
  border-bottom: 1px solid var(--c-line);
  text-align: left;
  vertical-align: top;
}
.prose__table thead th {
  font-family: var(--ff-head);
  font-size: .7rem;
  font-weight: 500;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--text-dim);
}
.prose h2[id] { scroll-margin-top: calc(var(--header-h) + 1rem); }


/* 17b. Elements created by JS (stage 6) ------------------------------------ */

/* IntersectionObserver sentinels: header at 80px, back-to-top after one screen */
.js-sentinel {
  position: absolute;
  left: 0;
  width: 1px;
  height: 1px;
  pointer-events: none;
  visibility: hidden;
}
.js-sentinel--header { top: 80px; }
.js-sentinel--far { top: 100vh; }

/* Contact-sheet loupe: CSS mask over a second, larger copy of the frame */
.sheet__loupe {
  position: absolute;
  left: 0;
  top: 0;
  z-index: 3;
  width: var(--ls, 190px);
  height: var(--ls, 190px);
  background-color: var(--c-charcoal);
  background-repeat: no-repeat;
  -webkit-mask: radial-gradient(circle closest-side, #000 94%, transparent 100%);
          mask: radial-gradient(circle closest-side, #000 94%, transparent 100%);
  pointer-events: none;
  opacity: 0;
  transform: translate(calc(var(--lx, 0px) - 50%), calc(var(--ly, 0px) - 50%));
  transition: opacity .15s linear;
}
.sheet.is-loupe .sheet__loupe { opacity: 1; }
.sheet::after {                       /* thin ring around the lens (the mask clips borders) */
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  z-index: 4;
  width: var(--ls, 190px);
  height: var(--ls, 190px);
  border: 1px solid rgba(246,246,244,.85);
  border-radius: 50%;
  pointer-events: none;
  opacity: 0;
  transform: translate(calc(var(--lx, 0px) - 50%), calc(var(--ly, 0px) - 50%));
  transition: opacity .15s linear;
}
.sheet.is-loupe::after { opacity: 1; }
.sheet.is-loupe .sheet__media { cursor: zoom-in; }

/* Lightbox */
.lightbox {
  position: fixed;
  inset: 0;
  z-index: 200;
  display: grid;
  grid-template-rows: auto minmax(0, 1fr);
  padding: clamp(.75rem, 2vw, 1.5rem);
  background: rgba(14,14,14,.96);
  color: var(--c-paper);
  opacity: 0;
  transition: opacity .25s var(--ease);
  --accent: var(--c-safe-lt);
  --text-dim: var(--c-paper-dim);
}
.lightbox.is-open { opacity: 1; }
.lightbox__top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  min-height: 3rem;
}
.lightbox__count { margin: 0; color: var(--c-paper-dim); }
.lightbox__close,
.lightbox__nav {
  min-width: 2.9rem;
  min-height: 2.9rem;
  padding: .4rem .9rem;
  border: 1px solid var(--c-line-dark);
  border-radius: 0;
  background: rgba(23,23,23,.6);
  color: var(--c-paper);
  font-size: .78rem;
  font-weight: 600;
  letter-spacing: .16em;
  text-transform: uppercase;
}
.lightbox__close:hover,
.lightbox__nav:hover { border-color: var(--c-paper-dim); }
.lightbox__stage {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-height: 0;
  margin: 0;
  touch-action: pan-y;
}
.lightbox__img {
  max-width: 100%;
  max-height: calc(100% - 3rem);
  width: auto;
  height: auto;
  object-fit: contain;
  border: clamp(.35rem, .8vw, .6rem) solid var(--c-frame);
  background: var(--c-frame);
}
.lightbox__caption { margin-top: .9rem; color: var(--c-paper-dim); text-align: center; }
.lightbox__nav {
  position: absolute;
  top: 50%;
  padding: 0;
  font-size: 1.5rem;
  letter-spacing: 0;
  transform: translateY(-50%);
}
.lightbox__prev { left: clamp(.5rem, 2vw, 1.5rem); }
.lightbox__next { right: clamp(.5rem, 2vw, 1.5rem); }
@media (max-width: 767.98px) {
  .lightbox__nav { top: auto; bottom: 1rem; transform: none; }
}

/* Back to top — the iris */
.to-top {
  position: fixed;
  right: clamp(1rem, 3vw, 2rem);
  bottom: clamp(1rem, 3vw, 2rem);
  z-index: 40;
  display: grid;
  place-items: center;
  width: 3rem;
  height: 3rem;
  padding: 0;
  border: 1px solid var(--c-line-dark);
  border-radius: 0;
  background: var(--c-charcoal);
  color: var(--c-paper);
  opacity: 0;
  visibility: hidden;
  transform: translateY(8px);
  transition: opacity var(--dur) var(--ease), transform var(--dur) var(--ease), visibility 0s linear var(--dur), border-color var(--dur) var(--ease);
}
.to-top.is-visible { opacity: 1; visibility: visible; transform: none; transition-delay: 0s; }
.to-top:hover { border-color: var(--c-safe-lt); }
.to-top:focus-visible { outline-color: var(--c-safe-lt); }
.to-top__iris { width: 1.35rem; height: 1.35rem; transition: transform .5s var(--ease); }
.to-top:hover .to-top__iris { transform: rotate(60deg); }

/* Footer accordion toggles on wide screens read as plain headings */
.site-footer__toggle:disabled { opacity: 1; cursor: default; }


/* 18. Reveal — the Reveal module (stage 6) adds html.js-reveal when
   IntersectionObserver is available, then .is-revealed per element.
   First screen excluded. ----------------------------------------------------- */

.js-reveal .reveal { opacity: 0; transform: translateY(14px); transition: opacity .7s var(--ease), transform .7s var(--ease); }
.js-reveal .reveal.is-revealed { opacity: 1; transform: none; }


/* 19. Reduced motion §2.5 -------------------------------------------------- */
/* Also disables: hero iris transition (slides just swap), gallery loupe
   (not shown), filmstrip motion — component rules repeat this at stages 4–6. */

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
    scroll-behavior: auto !important;
  }
  .js-reveal .reveal { opacity: 1; transform: none; }
}