/* =========================================================================
   CURIO TALE — Cinematic Design System
   01  Fonts
   02  Tokens
   03  Reset
   04  Grid
   05  Typography
   06  Reveal primitives
   07  Film grain
   08  Loader
   09  Navigation
   10  Custom cursor
   11  Page transition
   12  Media primitives
   13  Buttons & links
   ========================================================================= */

/* 01 — FONTS ------------------------------------------------------------ */
/*
   The display face is Archivo (variable, wght 100–900 + wdth 62–125).
   Self-host for production: drop the woff2 files into /assets/fonts and the
   declarations below take over. Until then the <link> in the document head
   pulls the same family and the stack degrades to a tight system grotesque.
*/
@font-face {
  font-family: 'Archivo Local';
  src: url('../fonts/archivo-variable.woff2') format('woff2-variations');
  font-weight: 100 900;
  font-stretch: 62% 125%;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Archivo Local';
  src: url('../fonts/archivo-variable-italic.woff2') format('woff2-variations');
  font-weight: 100 900;
  font-stretch: 62% 125%;
  font-style: italic;
  font-display: swap;
}

/* 02 — TOKENS ----------------------------------------------------------- */
:root {
  /* Surface. The UI is black, white and gray. Colour comes from the film. */
  --black:        #000000;
  --ink:          #050505;
  --ink-raised:   #0B0B0B;
  --ink-line:     #1C1C1C;
  --paper:        #FFFFFF;

  --fg:           #FFFFFF;
  --fg-dim:       #9A9A9A;
  --fg-faint:     #5E5E5E;
  --fg-ghost:     #2E2E2E;

  /* Used with extreme restraint — focus rings and the loader bar only. */
  --brass:        #C9A46A;

  --bg:           var(--black);
  --rule:         rgba(255, 255, 255, 0.14);
  --rule-soft:    rgba(255, 255, 255, 0.07);

  /* Type */
  --font-display: 'Archivo Local', 'Archivo', 'Helvetica Neue', Helvetica,
                  'DejaVu Sans Condensed', 'Liberation Sans', Arial, sans-serif;
  --font-mono:    ui-monospace, 'SF Mono', 'DejaVu Sans Mono', 'Liberation Mono', monospace;

  /* Scale — every display size is fluid and viewport-anchored. */
  --t-colossal: clamp(4rem,   19vw,   19rem);
  --t-mega:     clamp(3.25rem, 13.5vw, 13rem);
  --t-display:  clamp(2.75rem, 8.6vw,  8.5rem);
  --t-title:    clamp(2rem,   5.2vw,   4.75rem);
  --t-sub:      clamp(1.5rem, 3.2vw,   2.75rem);
  --t-lead:     clamp(1.15rem, 2.05vw, 1.875rem);
  --t-body:     clamp(0.9375rem, 1.05vw, 1.0625rem);
  --t-small:    clamp(0.8125rem, 0.9vw, 0.9375rem);
  --t-meta:     clamp(0.625rem, 0.7vw, 0.8125rem);

  --ls-display: -0.035em;
  --ls-title:   -0.028em;
  --ls-meta:     0.2em;

  --lh-display: 0.86;
  --lh-title:   0.94;
  --lh-body:    1.62;

  /* Grid */
  --cols:       12;
  --gutter:     clamp(0.875rem, 1.35vw, 1.75rem);
  --margin:     clamp(1.25rem, 3.3vw, 4rem);

  /* Rhythm — scenes need room to breathe. */
  --scene:      clamp(7rem, 15vw, 16rem);
  --scene-sm:   clamp(4rem, 8vw, 8rem);
  --scene-xs:   clamp(2rem, 4vw, 4rem);

  /* Motion */
  --ease-out:   cubic-bezier(0.16, 1, 0.3, 1);
  --ease-inout: cubic-bezier(0.76, 0, 0.24, 1);
  --ease-film:  cubic-bezier(0.25, 0.8, 0.25, 1);
  --d-reveal:   1.15s;
  --d-image:    1.35s;
  --d-page:     0.9s;

  --nav-h:      clamp(4.25rem, 6vw, 5.5rem);

  color-scheme: dark;
}

/* An inverted scene — used for the rare paper-white chapter. */
.invert {
  --bg:        var(--paper);
  --fg:        var(--ink);
  --fg-dim:    #6A6A6A;
  --fg-faint:  #9A9A9A;
  --fg-ghost:  #D6D6D6;
  --rule:      rgba(0, 0, 0, 0.16);
  --rule-soft: rgba(0, 0, 0, 0.08);
  background: var(--bg);
  color: var(--fg);
}

/* 03 — RESET ------------------------------------------------------------ */
*, *::before, *::after { box-sizing: border-box; }

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: auto;
}

body {
  margin: 0;
  background: var(--black);
  color: var(--fg);
  font-family: var(--font-display);
  font-size: var(--t-body);
  line-height: var(--lh-body);
  font-weight: 400;
  font-synthesis-weight: none;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  overflow-x: clip;
}

body.is-locked { overflow: hidden; }

h1, h2, h3, h4, h5, h6, p, figure, blockquote, ul, ol, dl, dd {
  margin: 0;
  padding: 0;
}
ul, ol { list-style: none; }

img, video, svg { display: block; max-width: 100%; }
img, video { height: auto; }

a {
  color: inherit;
  text-decoration: none;
}

button, input, select, textarea {
  font: inherit;
  color: inherit;
  background: none;
  border: 0;
  margin: 0;
  border-radius: 0;
  -webkit-appearance: none;
  appearance: none;
}
button { cursor: pointer; }

::selection { background: var(--paper); color: var(--black); }
.invert ::selection { background: var(--ink); color: var(--paper); }

:focus-visible {
  outline: 1px solid var(--brass);
  outline-offset: 4px;
}

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

/* 04 — GRID ------------------------------------------------------------- */
.grid {
  display: grid;
  grid-template-columns: repeat(var(--cols), minmax(0, 1fr));
  column-gap: var(--gutter);
  padding-inline: var(--margin);
}

.wrap { padding-inline: var(--margin); }

/* Edge to edge, no margin at all. */
.bleed { padding-inline: 0; }

/* Column span helpers — desktop.
   These set grid-column-END only, so a .sN start can be combined with a .cN
   span on the same element without the shorthand resetting the other edge. */
.c1{grid-column-end:span 1}.c2{grid-column-end:span 2}.c3{grid-column-end:span 3}
.c4{grid-column-end:span 4}.c5{grid-column-end:span 5}.c6{grid-column-end:span 6}
.c7{grid-column-end:span 7}.c8{grid-column-end:span 8}.c9{grid-column-end:span 9}
.c10{grid-column-end:span 10}.c11{grid-column-end:span 11}.c12{grid-column-end:span 12}

.s1{grid-column-start:1}.s2{grid-column-start:2}.s3{grid-column-start:3}
.s4{grid-column-start:4}.s5{grid-column-start:5}.s6{grid-column-start:6}
.s7{grid-column-start:7}.s8{grid-column-start:8}.s9{grid-column-start:9}
.s10{grid-column-start:10}.s11{grid-column-start:11}

.scene   { padding-block: var(--scene); }
.scene-sm{ padding-block: var(--scene-sm); }

/* Two full scenes back to back would stack 32rem of black between related
   blocks. Consecutive scenes share the smaller rhythm instead. */
.scene + .scene,
.scene + .scene-sm,
.scene-sm + .scene { padding-top: var(--scene-sm); }
.scene-t { padding-top: var(--scene); }
.scene-b { padding-bottom: var(--scene); }

.rule {
  border: 0;
  border-top: 1px solid var(--rule-soft);
  height: 0;
}

@media (max-width: 860px) {
  :root { --cols: 4; }
  .c1,.c2,.c3,.c4,.c5,.c6,.c7,.c8,.c9,.c10,.c11,.c12 { grid-column-end: span 4; }
  .s1,.s2,.s3,.s4,.s5,.s6,.s7,.s8,.s9,.s10,.s11 { grid-column-start: 1; }
}

/* 05 — TYPOGRAPHY ------------------------------------------------------- */
.display,
.title,
.mega,
.colossal {
  font-weight: 500;
  font-stretch: 92%;
  letter-spacing: var(--ls-display);
  line-height: var(--lh-display);
  text-transform: uppercase;
  text-wrap: balance;
}

.colossal { font-size: var(--t-colossal); line-height: 0.8; letter-spacing: -0.045em; }
.mega     { font-size: var(--t-mega); }
.display  { font-size: var(--t-display); }
.title    { font-size: var(--t-title); line-height: var(--lh-title); letter-spacing: var(--ls-title); }

.sub {
  font-size: var(--t-sub);
  font-weight: 400;
  line-height: 1.14;
  letter-spacing: -0.02em;
  text-wrap: balance;
}

.lead {
  font-size: var(--t-lead);
  font-weight: 400;
  line-height: 1.34;
  letter-spacing: -0.014em;
  text-wrap: pretty;
}

.body   { font-size: var(--t-body);  line-height: var(--lh-body); color: var(--fg-dim); }
.body p + p { margin-top: 1.35em; }
.body strong { color: var(--fg); font-weight: 500; }

.small  { font-size: var(--t-small); line-height: 1.5; color: var(--fg-dim); }

/* Production notes. Every small label on the site uses this. */
.meta {
  font-size: var(--t-meta);
  font-weight: 500;
  line-height: 1.3;
  letter-spacing: var(--ls-meta);
  text-transform: uppercase;
  color: var(--fg-dim);
}
.meta--faint { color: var(--fg-faint); }
.meta--bright{ color: var(--fg); }

/* Editorial number. */
.numeral {
  font-size: var(--t-meta);
  font-weight: 500;
  letter-spacing: 0.16em;
  font-variant-numeric: tabular-nums;
  color: var(--fg-faint);
}
.numeral--large {
  font-size: clamp(2.5rem, 7vw, 7rem);
  letter-spacing: -0.04em;
  line-height: 0.8;
  color: var(--fg-ghost);
}

.dim   { color: var(--fg-dim); }
.faint { color: var(--fg-faint); }
.ghost { color: var(--fg-ghost); }

/* A section marker: 01 / SELECTED WORK */
.marker {
  display: flex;
  align-items: baseline;
  gap: 0.85em;
}
.marker__n { color: var(--fg-faint); font-variant-numeric: tabular-nums; }
.marker__slash { color: var(--fg-ghost); }

/* 06 — REVEAL PRIMITIVES ------------------------------------------------ */
/*
   Nothing is hidden until JS confirms it can animate. Without JS, or with
   reduced motion, every element is simply visible.
*/
.js-motion [data-reveal] { will-change: transform, opacity, clip-path; }

/* Text — masked line rise */
.js-motion [data-reveal="text"] .line { display: block; overflow: hidden; }
.js-motion [data-reveal="text"] .line > span {
  display: block;
  transform: translate3d(0, 106%, 0);
  transition: transform var(--d-reveal) var(--ease-out) var(--rd, 0s);
}
.js-motion [data-reveal="text"].is-in .line > span { transform: translate3d(0, 0, 0); }

/* Fade rise */
.js-motion [data-reveal="fade"] {
  opacity: 0;
  transform: translate3d(0, 1.4rem, 0);
  transition:
    opacity 1s var(--ease-out) var(--rd, 0s),
    transform 1s var(--ease-out) var(--rd, 0s);
}
.js-motion [data-reveal="fade"].is-in { opacity: 1; transform: none; }

/* Image — clip-path wipe with a counter-scale so the frame never feels flat */
.js-motion [data-reveal="image"] {
  clip-path: inset(0 100% 0 0);
  transition: clip-path var(--d-image) var(--ease-inout) var(--rd, 0s);
}
.js-motion [data-reveal="image"] > * {
  transform: scale(1.14);
  transition: transform calc(var(--d-image) + 0.5s) var(--ease-inout) var(--rd, 0s);
}
.js-motion [data-reveal="image"].is-in { clip-path: inset(0 0% 0 0); }
.js-motion [data-reveal="image"].is-in > * { transform: scale(1); }

/* Image — vertical curtain, alternated so galleries never repeat a gesture */
.js-motion [data-reveal="curtain"] {
  clip-path: inset(100% 0 0 0);
  transition: clip-path var(--d-image) var(--ease-inout) var(--rd, 0s);
}
.js-motion [data-reveal="curtain"] > * {
  transform: scale(1.14);
  transition: transform calc(var(--d-image) + 0.5s) var(--ease-inout) var(--rd, 0s);
}
.js-motion [data-reveal="curtain"].is-in { clip-path: inset(0 0 0 0); }
.js-motion [data-reveal="curtain"].is-in > * { transform: scale(1); }

/* A hairline that draws itself */
.js-motion [data-reveal="rule"] {
  transform: scaleX(0);
  transform-origin: 0 50%;
  transition: transform 1.2s var(--ease-inout) var(--rd, 0s);
}
.js-motion [data-reveal="rule"].is-in { transform: scaleX(1); }

/* 07 — FILM GRAIN ------------------------------------------------------- */
.grain {
  position: fixed;
  inset: -120%;
  z-index: 300;
  pointer-events: none;
  opacity: 0.038;
  background-image: var(--grain-src);
  background-size: 220px 220px;
  animation: grain-shift 900ms steps(4) infinite;
  mix-blend-mode: overlay;
  contain: strict;
}
@keyframes grain-shift {
  0%   { transform: translate3d(0, 0, 0); }
  25%  { transform: translate3d(-3%, 2%, 0); }
  50%  { transform: translate3d(2%, -3%, 0); }
  75%  { transform: translate3d(-2%, -2%, 0); }
  100% { transform: translate3d(0, 0, 0); }
}

/* A slow vignette keeps the eye centred on the frame. */
.vignette {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    radial-gradient(120% 90% at 50% 45%, transparent 42%, rgba(0,0,0,0.55) 100%);
}

/* 08 — LOADER ----------------------------------------------------------- */
/* With JavaScript disabled there is nothing to dismiss the loader or the
   cursor, so neither is ever shown. The site is fully readable without them. */
.no-js .loader,
.no-js .cursor,
.no-js .curtain { display: none !important; }

.loader {
  position: fixed;
  inset: 0;
  z-index: 400;
  background: var(--black);
  display: grid;
  place-items: center;
  transition: opacity 0.7s var(--ease-out), visibility 0.7s;
}
.loader[hidden] { display: grid; }
.loader.is-done {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}
.loader__inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1.6rem;
}
.loader__mark {
  font-size: var(--t-meta);
  letter-spacing: 0.42em;
  text-indent: 0.42em;
  text-transform: uppercase;
  color: var(--fg);
  opacity: 0;
  animation: loader-in 1.1s var(--ease-out) 0.12s forwards;
}
@keyframes loader-in { to { opacity: 1; } }

.loader__bar {
  width: min(40vw, 260px);
  height: 1px;
  background: var(--fg-ghost);
  position: relative;
  overflow: hidden;
}
.loader__bar i {
  position: absolute;
  inset: 0 auto 0 0;
  width: 0%;
  background: var(--brass);
  transition: width 0.35s var(--ease-out);
}
.loader__pct {
  font-size: var(--t-meta);
  letter-spacing: 0.2em;
  color: var(--fg-faint);
  font-variant-numeric: tabular-nums;
}

/* 09 — NAVIGATION ------------------------------------------------------- */
.nav {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: 200;
  height: var(--nav-h);
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-inline: var(--margin);
  mix-blend-mode: difference;
  transition: transform 0.6s var(--ease-out), opacity 0.4s linear;
}
.nav.is-hidden { transform: translate3d(0, -100%, 0); }
.nav.is-over-menu { mix-blend-mode: normal; }

.nav__brand {
  display: flex;
  align-items: center;
  gap: 0.7rem;
  color: #fff;
}
.nav__mark { width: 1.6rem; height: 1.6rem; flex: none; }
.nav__wordmark {
  font-size: var(--t-meta);
  font-weight: 500;
  letter-spacing: 0.34em;
  text-indent: 0.34em;
  text-transform: uppercase;
  white-space: nowrap;
}

.nav__links {
  display: flex;
  align-items: center;
  gap: clamp(1.4rem, 2.6vw, 2.75rem);
}
.nav__link {
  position: relative;
  font-size: var(--t-meta);
  font-weight: 500;
  letter-spacing: var(--ls-meta);
  text-transform: uppercase;
  color: #fff;
  padding-block: 0.4rem;
}
.nav__link::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 1px;
  background: currentColor;
  transform: scaleX(0);
  transform-origin: 100% 50%;
  transition: transform 0.55s var(--ease-out);
}
.nav__link:hover::after,
.nav__link[aria-current="page"]::after {
  transform: scaleX(1);
  transform-origin: 0 50%;
}

.nav__toggle {
  display: none;
  align-items: center;
  gap: 0.6rem;
  font-size: var(--t-meta);
  letter-spacing: var(--ls-meta);
  text-transform: uppercase;
  color: #fff;
}
.nav__toggle i {
  display: block;
  width: 1.4rem;
  height: 1px;
  background: currentColor;
  transition: transform 0.5s var(--ease-inout);
}
.nav__toggle span { display: grid; gap: 5px; }
.is-menu-open .nav__toggle i:first-child { transform: translateY(3px) rotate(45deg); }
.is-menu-open .nav__toggle i:last-child  { transform: translateY(-3px) rotate(-45deg); }

@media (max-width: 860px) {
  .nav__links { display: none; }
  .nav__toggle { display: flex; }
}

/* Fullscreen menu */
.menu {
  position: fixed;
  inset: 0;
  z-index: 190;
  background: var(--black);
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: var(--nav-h) var(--margin) var(--scene-xs);
  clip-path: inset(0 0 100% 0);
  transition: clip-path 0.85s var(--ease-inout);
  visibility: hidden;
}
.menu.is-open {
  clip-path: inset(0 0 0 0);
  visibility: visible;
}
.menu__list { display: grid; }
.menu__item { overflow: hidden; }
.menu__link {
  display: flex;
  align-items: baseline;
  gap: clamp(1rem, 3vw, 3rem);
  padding-block: clamp(0.35rem, 1vw, 0.8rem);
  transform: translate3d(0, 110%, 0);
  transition: transform 0.9s var(--ease-out) var(--md, 0s);
}
.menu.is-open .menu__link { transform: translate3d(0, 0, 0); }
.menu__n {
  font-size: var(--t-meta);
  letter-spacing: 0.16em;
  color: var(--fg-faint);
  font-variant-numeric: tabular-nums;
  flex: none;
}
.menu__label {
  font-size: clamp(2.75rem, 11vw, 8rem);
  font-weight: 500;
  line-height: 0.94;
  letter-spacing: -0.035em;
  text-transform: uppercase;
  transition: opacity 0.4s var(--ease-out);
}
.menu__list:hover .menu__label { opacity: 0.32; }
.menu__list .menu__link:hover .menu__label { opacity: 1; }

.menu__foot {
  margin-top: clamp(2.5rem, 6vw, 5rem);
  display: flex;
  flex-wrap: wrap;
  gap: 1.2rem 3rem;
  justify-content: space-between;
  align-items: end;
  opacity: 0;
  transition: opacity 0.6s var(--ease-out) 0.45s;
}
.menu.is-open .menu__foot { opacity: 1; }

/* 10 — CUSTOM CURSOR ---------------------------------------------------- */
.cursor {
  position: fixed;
  top: 0; left: 0;
  z-index: 350;
  pointer-events: none;
  mix-blend-mode: difference;
  will-change: transform;
  opacity: 0;
  transition: opacity 0.35s linear;
}
.cursor.is-live { opacity: 1; }
.cursor__dot {
  position: absolute;
  top: 0; left: 0;
  width: 7px; height: 7px;
  margin: -3.5px 0 0 -3.5px;
  border-radius: 50%;
  background: #fff;
  transition: transform 0.4s var(--ease-out), opacity 0.3s linear;
}
.cursor__ring {
  position: absolute;
  top: 0; left: 0;
  width: 84px; height: 84px;
  margin: -42px 0 0 -42px;
  border-radius: 50%;
  background: #fff;
  color: #000;
  display: grid;
  place-items: center;
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  transform: scale(0);
  transition: transform 0.5s var(--ease-out);
}
.cursor__ring span {
  opacity: 0;
  transition: opacity 0.25s linear;
}
.cursor.is-active .cursor__dot { transform: scale(0); }
.cursor.is-active .cursor__ring { transform: scale(1); }
.cursor.is-active .cursor__ring span { opacity: 1; transition-delay: 0.1s; }

@media (hover: none), (pointer: coarse) {
  .cursor { display: none; }
}

/* 11 — PAGE TRANSITION -------------------------------------------------- */
.curtain {
  position: fixed;
  inset: 0;
  z-index: 250;
  background: var(--black);
  pointer-events: none;
  transform: translate3d(0, 100%, 0);
}
.curtain.is-covering {
  transform: translate3d(0, 0, 0);
  transition: transform var(--d-page) var(--ease-inout);
}
.curtain.is-clearing {
  transform: translate3d(0, -100%, 0);
  transition: transform var(--d-page) var(--ease-inout);
}
.curtain__label {
  position: absolute;
  left: var(--margin);
  bottom: clamp(2rem, 5vw, 4rem);
  font-size: var(--t-meta);
  letter-spacing: var(--ls-meta);
  text-transform: uppercase;
  color: var(--fg-faint);
  opacity: 0;
  transition: opacity 0.4s linear;
}
.curtain.is-covering .curtain__label { opacity: 1; }

/* 12 — MEDIA PRIMITIVES ------------------------------------------------- */
.frame {
  position: relative;
  overflow: hidden;
  background: var(--ink-raised);
}
.frame > img,
.frame > video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.frame--21x9  { aspect-ratio: 21 / 9; }
.frame--16x9  { aspect-ratio: 16 / 9; }
.frame--3x2   { aspect-ratio: 3 / 2; }
.frame--4x3   { aspect-ratio: 4 / 3; }
.frame--1x1   { aspect-ratio: 1 / 1; }
.frame--4x5   { aspect-ratio: 4 / 5; }
.frame--2x3   { aspect-ratio: 2 / 3; }
.frame--9x16  { aspect-ratio: 9 / 16; }
/* Ratio comes from the parent (the gallery decides the rhythm). */
.frame--fill  { width: 100%; }

.frame__cap {
  margin-top: 0.9rem;
  font-size: var(--t-meta);
  letter-spacing: var(--ls-meta);
  text-transform: uppercase;
  color: var(--fg-faint);
}

/* Parallax carrier — the inner element drifts against the scroll. */
.parallax { will-change: transform; }

/* 13 — BUTTONS & LINKS -------------------------------------------------- */
.action {
  display: inline-flex;
  align-items: center;
  gap: 0.9em;
  font-size: var(--t-meta);
  font-weight: 500;
  letter-spacing: var(--ls-meta);
  text-transform: uppercase;
  color: var(--fg);
  padding-block: 0.75rem;
  position: relative;
}
.action::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 1px;
  background: currentColor;
  opacity: 0.35;
  transform-origin: 0 50%;
  transition: transform 0.6s var(--ease-out), opacity 0.4s linear;
}
.action:hover::after { opacity: 1; transform: scaleX(1); }
.action__arrow {
  display: inline-block;
  transition: transform 0.55s var(--ease-out);
}
.action:hover .action__arrow { transform: translateX(0.4em); }

.action--large {
  font-size: clamp(1.05rem, 2vw, 1.6rem);
  letter-spacing: -0.01em;
  text-transform: none;
  padding-block: 1.1rem;
}

/* Magnetic wrapper — JS moves this, CSS eases it back. */
.magnet { display: inline-block; will-change: transform; }

/* Underline that wipes in from the left on hover */
.ulink {
  position: relative;
  display: inline-block;
  padding-bottom: 0.12em;
}
.ulink::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 1px;
  background: currentColor;
  transform: scaleX(0);
  transform-origin: 100% 50%;
  transition: transform 0.5s var(--ease-out);
}
.ulink:hover::after { transform: scaleX(1); transform-origin: 0 50%; }

/* Skip link */
.skip {
  position: absolute;
  top: 0; left: 0;
  z-index: 500;
  padding: 0.9rem 1.2rem;
  background: #fff;
  color: #000;
  font-size: var(--t-meta);
  letter-spacing: var(--ls-meta);
  text-transform: uppercase;
  transform: translateY(-120%);
}
.skip:focus { transform: none; }

/* ----------------------------------------------------------------------
   Reduced motion — the composition stands without a single animation.
   ---------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }
  .js-motion [data-reveal] {
    opacity: 1 !important;
    transform: none !important;
    clip-path: none !important;
  }
  .js-motion [data-reveal] > * { transform: none !important; }
  .js-motion [data-reveal="text"] .line > span { transform: none !important; }
  .grain { animation: none; }
  .cursor { display: none; }
}