/* María Delgado — portfolio v3
   Light gallery grey, strong black grotesk, print marks. Hovers slip out of register in cyan and magenta. Structure after AYSA. */

:root {
  --bg: #f2f2f0;
  --card: #e8e8e5;
  --ink: #111111;
  --grey: #63635c;
  /* Misregistration: cyan and magenta echoes slip out of register on hover */
  --mis-off: 0 0 0 rgba(0, 183, 235, 0), 0 0 0 rgba(230, 0, 126, 0);
  --mis-small: -1px 0 0 rgba(0, 183, 235, 0.55), 1px 0 0 rgba(230, 0, 126, 0.55);
  --mis: -2px 0.5px 0 rgba(0, 183, 235, 0.55), 2px -0.5px 0 rgba(230, 0, 126, 0.55);
  --mis-big: -3px 1px 0 rgba(0, 183, 235, 0.55), 3px -1px 0 rgba(230, 0, 126, 0.55);

  --font: "Inter Tight", "Helvetica Neue", Arial, sans-serif;
  --m: clamp(16px, 2.2vw, 32px);
  --gap: 16px;

  --ease-out: cubic-bezier(0.23, 1, 0.32, 1);
  --ease-in-out: cubic-bezier(0.77, 0, 0.175, 1);
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; scroll-behavior: smooth; }
body {
  margin: 0; background: var(--bg); color: var(--ink);
  font-family: var(--font); font-size: 16px; line-height: 1.5; font-weight: 400;
  -webkit-font-smoothing: antialiased; overflow-x: clip;
}
img { display: block; max-width: 100%; height: auto; }
h1, h2, h3, p, ul { margin: 0; padding: 0; }
ul { list-style: none; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; padding: 0; }
:focus-visible { outline: 2px solid var(--ink); outline-offset: 3px; }
::selection { background: var(--ink); color: var(--bg); }
.menu a, .see, .skills__list li, .project__back a, .next__name, .contact__big, .foot__links a { text-shadow: var(--mis-off); }

/* ---------- header ---------- */
.bar {
  position: fixed; inset: 0 0 auto; z-index: 30;
  display: flex; justify-content: space-between; align-items: center;
  padding: 18px var(--m); background: var(--bg);
}
.logo svg { width: 74px; height: 24px; display: block; overflow: visible; }
.logo__reg { fill: none; stroke: var(--ink); stroke-width: 2; transform-box: fill-box; transform-origin: center; transition: transform 700ms var(--ease-out); }
.logo__bar { transform-box: fill-box; transform-origin: left center; transition: transform 500ms var(--ease-out); }
@media (hover: hover) and (pointer: fine) {
  .logo:hover .logo__reg { transform: rotate(90deg); }
  .logo:hover .logo__bar { transform: scaleX(0.85); }
}
/* Language switch sits on the left, beside the logo; the menu stays on the right */
.bar__end { display: contents; }
.lang { order: 1; margin: 0 auto 0 clamp(20px, 2.6vw, 36px); }
.menu-btn { order: 2; }
.lang { display: flex; gap: 2px; font-size: 14px; font-weight: 500; }
.lang a { padding: 6px 4px; color: #a3a39b; text-shadow: var(--mis-off); transition: color 200ms ease, text-shadow 400ms var(--ease-out); }
.lang a[aria-current="true"] { color: var(--ink); }
.lang a + a::before { content: "/"; color: #a3a39b; margin-right: 6px; }
@media (hover: hover) and (pointer: fine) { .lang a:not([aria-current="true"]):hover { color: var(--ink); text-shadow: var(--mis-small); } }
.menu-btn { font-size: 14px; font-weight: 500; text-transform: uppercase; letter-spacing: 0.02em; padding: 6px 0; }

/* ---------- full-screen menu ---------- */
.menu {
  position: fixed; inset: 0; z-index: 25; background: var(--bg);
  display: flex; align-items: flex-start; padding: 84px var(--m) var(--m);
}
.menu[hidden] { display: none; }
.menu li { overflow: hidden; }
.menu a {
  display: inline-block; font-size: clamp(56px, 9vw, 140px); font-weight: 500;
  line-height: 0.98; letter-spacing: -0.04em; text-transform: uppercase;
  padding-right: 0.14em; /* room for the last letter and its misregistration, the li clips */
  transition: text-shadow 400ms var(--ease-out);
}
@media (hover: hover) and (pointer: fine) { .menu a:hover { text-shadow: var(--mis-big); } }

/* ---------- hero: the name, the window, the project it shows ---------- */
.hero { position: sticky; top: 0; z-index: 0; min-height: 100svh; padding: 96px var(--m) 28px; overflow: hidden; display: grid; place-items: center; }
.tagline {
  position: absolute; left: 50%; bottom: 28px; transform: translateX(-50%);
  width: min(560px, calc(100% - 2 * var(--m))); text-align: center;
  font-size: 13px; font-weight: 500; line-height: 1.35; text-transform: uppercase; letter-spacing: 0.02em; color: var(--grey);
}
.mark { display: grid; justify-items: center; gap: 18px; }
.mark__name { font-size: clamp(64px, 10vw, 170px); line-height: 1; font-weight: 800; }
.mark__name { position: relative; z-index: 2; }
/* Desktop: a trail of work follows the pointer instead of the window */
.trail { position: absolute; inset: 0; z-index: 1; pointer-events: none; display: none; }
.trail img { position: absolute; top: 0; left: 0; width: clamp(180px, 15vw, 240px); aspect-ratio: 4 / 3; object-fit: cover; opacity: 0; transform: translate3d(var(--x), var(--y), 0) scale(0.9); transition: opacity 500ms ease, transform 600ms var(--ease-out); }
.trail img.is-on { opacity: 1; transform: translate3d(var(--x), var(--y), 0) scale(1); transition: opacity 180ms ease, transform 450ms var(--ease-out); }
@media (hover: hover) and (pointer: fine) {
  .trail { display: block; }
  .window, .now { display: none; }
  .mark__name { font-size: clamp(90px, 15vw, 260px); }
}
/* Everything after the hero slides over it */
.works, .skills, .contact, .foot { position: relative; z-index: 1; background: var(--bg); }
.mark__name { font-family: "Bricolage Grotesque", var(--font); font-weight: 800; letter-spacing: -0.05em; font-size: clamp(72px, 11.5vw, 190px); }
.window { position: relative; width: clamp(150px, 16vw, 260px); aspect-ratio: 4 / 3; overflow: hidden; background: var(--card); }
.window img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; }
.window img.is-on { opacity: 1; }
.now { height: 1.4em; overflow: hidden; font-size: 13px; font-weight: 500; text-transform: uppercase; letter-spacing: 0.02em; }
.now span { display: block; }

/* Print marks in the hero: thin, small, out of the way */
.print { position: absolute; inset: 72px var(--m) 20px; pointer-events: none; z-index: 1; }
.crop { position: absolute; width: 26px; height: 26px; fill: none; stroke: #a3a39b; stroke-width: 1; }
.crop--tl { top: 0; left: 0; }
.crop--tr { top: 0; right: 0; transform: scaleX(-1); }
.crop--bl { bottom: 0; left: 0; transform: scaleY(-1); }
.crop--br { bottom: 0; right: 0; transform: scale(-1, -1); }

/* The name is printed like offset: four plates that land one after another, black last */
.plates { display: inline-grid; isolation: isolate; }
.plate { grid-area: 1 / 1; white-space: nowrap; mix-blend-mode: multiply; transition: transform 1100ms var(--ease-out), opacity 500ms ease, translate 500ms var(--ease-out); transition-delay: var(--pd, 0ms); }
.plate--c { color: #00b7eb; --fx: -40px; --fy: 14px; --pd: 0ms; }
.plate--m { color: #e6007e; --fx: 34px; --fy: -18px; --pd: 500ms; }
.plate--y { color: #ffd400; --fx: -18px; --fy: -26px; --pd: 1000ms; }
.plate--k { color: #111; --fx: 22px; --fy: 24px; --pd: 1500ms; }
.js:not(.is-printed) .plate { opacity: 0; transform: translate(var(--fx), var(--fy)); transition-duration: 0ms; }
@media (hover: hover) and (pointer: fine) {
  .is-loaded .mark__name:hover .plate--c { translate: -4px 1px; transition-delay: 0ms; }
  .is-loaded .mark__name:hover .plate--m { translate: 4px -1px; transition-delay: 0ms; }
}

/* Colour bar in the corner of the cover, like a print control strip */
.sheet-bar { display: inline-flex; }
.sheet-bar i { width: 10px; height: 6px; background: var(--c); }
.sheet-bar--hero { position: absolute; top: 9px; right: 44px; margin: 0; }
.tagline.slug { width: min(780px, calc(100% - 2 * var(--m))); bottom: 46px; display: grid; gap: 10px; justify-items: center; }
.slug__lead { font-size: 15px; font-weight: 500; text-transform: none; letter-spacing: 0; color: var(--ink); max-width: 48ch; }
.slug__line { display: flex; flex-wrap: wrap; justify-content: center; gap: 4px 14px; font-size: 12px; letter-spacing: 0.04em; }
.slug__line span + span::before { content: "·"; margin-right: 14px; color: #a3a39b; }

/* Selected works as colour proofs: white paper, crop marks, the picture untouched */
.tile { position: relative; padding: 18px; background: #fff; }
.tile > .crop { position: absolute; width: 18px; height: 18px; fill: none; stroke: #a3a39b; stroke-width: 1; }
.tile__no { color: var(--grey); margin-right: 6px; }
.tile__name { text-shadow: var(--mis-off); transition: text-shadow 400ms var(--ease-out); }
@media (hover: hover) and (pointer: fine) { .tile:hover .tile__name { text-shadow: var(--mis-small); } }

/* The trail of work arrives a touch out of register, then snaps in */
.trail img.is-on { animation: snap-in 650ms var(--ease-out) both; }
@keyframes snap-in { from { filter: drop-shadow(-7px 2px 0 rgba(0, 183, 235, 0.7)) drop-shadow(7px -2px 0 rgba(230, 0, 126, 0.7)); } to { filter: drop-shadow(0 0 0 rgba(0, 183, 235, 0)) drop-shadow(0 0 0 rgba(230, 0, 126, 0)); } }

/* ---------- section heads ---------- */
.head { display: flex; justify-content: space-between; align-items: baseline; gap: 24px; margin-bottom: 20px; }
.head h2 { font-size: clamp(32px, 3.4vw, 52px); font-weight: 500; line-height: 1; letter-spacing: -0.035em; text-transform: uppercase; }
.see { font-size: 14px; font-weight: 500; text-transform: uppercase; border-bottom: 1.5px solid currentColor; padding-bottom: 2px; transition: text-shadow 400ms var(--ease-out); } /* taste-skill-ignore: link underline */
@media (hover: hover) and (pointer: fine) { .see:hover { text-shadow: var(--mis-small); } }

/* ---------- works ---------- */
.works { padding: clamp(80px, 10vw, 160px) var(--m) 0; }
.grid { display: grid; grid-template-columns: 1fr 1fr; gap: 48px var(--gap); }
.tile { display: block; }
.tile__img { overflow: hidden; aspect-ratio: 1 / 1.08; background: var(--card); }
.tile__img img { width: 100%; height: 100%; object-fit: cover; transition: transform 900ms var(--ease-out); }
.tile__name { margin-top: 12px; font-size: 14px; font-weight: 500; text-transform: uppercase; }
.tile__name::after { content: " →"; display: inline-block; opacity: 0; transform: translateX(-6px); transition: opacity 250ms ease, transform 350ms var(--ease-out); }
.tile__type { font-size: 14px; font-weight: 500; text-transform: uppercase; color: var(--grey); }
@media (hover: hover) and (pointer: fine) {
  .tile:hover .tile__img img { transform: scale(1.04); }
  .tile:hover .tile__name::after { opacity: 1; transform: none; }
}

/* ---------- skills & tools: a print job ticket ---------- */
.skills { padding: clamp(100px, 12vw, 200px) var(--m) 0; }
.ticket-wrap { position: relative; padding: 28px; margin-top: clamp(16px, 2vw, 32px); }
.ticket-wrap .crop { position: absolute; width: 26px; height: 26px; fill: none; stroke: #a3a39b; stroke-width: 1; }
.ticket { background: #fff; padding: clamp(20px, 3.4vw, 48px); display: grid; gap: clamp(20px, 2.4vw, 32px); }
.ticket__top { display: flex; justify-content: space-between; align-items: baseline; gap: 16px; flex-wrap: wrap; padding-bottom: 14px; border-bottom: 2px solid var(--ink); } /* taste-skill-ignore: ticket rule */
.ticket__top h3 { font-size: clamp(32px, 4vw, 64px); font-weight: 800; line-height: 0.95; letter-spacing: -0.055em; text-transform: uppercase; }
.ticket__top p, .field, .ticket__foot { font-size: 13px; font-weight: 500; text-transform: uppercase; color: var(--grey); }
.ticket__grid { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(28px, 4vw, 64px); }
.field { margin-bottom: 10px; }
.field--gap { margin-top: 28px; }
.checks, .inks { display: grid; gap: 8px; }
.checks li, .inks li, .finish-line { font-size: clamp(18px, 1.6vw, 24px); font-weight: 500; letter-spacing: -0.02em; }
.checks li { display: flex; align-items: center; gap: 12px; }
.box { width: 18px; height: 18px; border: 1.5px solid var(--ink); position: relative; flex: none; } /* taste-skill-ignore: checkbox */
.box::before, .box::after { content: ""; position: absolute; left: 50%; top: 50%; width: 22px; height: 1.5px; background: var(--ink); transform: translate(-50%, -50%) rotate(45deg) scaleX(0); transition: transform 300ms var(--ease-out); }
.box::after { transform: translate(-50%, -50%) rotate(-45deg) scaleX(0); }
.checks li.on .box::before { transform: translate(-50%, -50%) rotate(45deg) scaleX(1); }
.checks li.on .box::after { transform: translate(-50%, -50%) rotate(-45deg) scaleX(1); transition-delay: 120ms; }
.inks li { display: grid; grid-template-columns: 28px 1fr; align-items: center; gap: 12px; }
.chip { width: 28px; height: 28px; display: grid; place-items: center; font-size: 12px; font-weight: 800; color: #fff; background: var(--p); }
.ticket__foot { display: flex; justify-content: space-between; align-items: end; gap: 16px; flex-wrap: wrap; padding-top: 14px; border-top: 1px solid #d6d6d1; } /* taste-skill-ignore: ticket rule */
.sign { min-width: min(220px, 55%); border-bottom: 1px solid var(--ink); padding-bottom: 2px; color: var(--ink); font-size: 22px; font-style: italic; text-transform: none; letter-spacing: -0.02em; } /* taste-skill-ignore: signature line */
.js .sign { clip-path: inset(0 100% 0 0); transition: clip-path 900ms var(--ease-in-out); }
.js .ticket.is-signed .sign { clip-path: inset(0 0 -4px 0); }

/* ---------- about ---------- */
.about { display: grid; grid-template-columns: 4fr 8fr; gap: clamp(24px, 4vw, 64px); padding: clamp(100px, 12vw, 200px) var(--m) 0; align-items: start; }
.about__photo { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; object-position: center 20%; }
.about__lead { font-size: clamp(28px, 3vw, 46px); font-weight: 500; line-height: 1.08; letter-spacing: -0.03em; max-width: 22ch; }
.cv { margin-top: clamp(32px, 4vw, 56px); }
.cv li { display: grid; grid-template-columns: 2fr 1fr 11ch; gap: 16px; padding: 10px 0; font-size: 14px; font-weight: 500; text-transform: uppercase; }
.cv li + li { border-top: 1px solid #d6d6d1; } /* taste-skill-ignore: CV table rows */
.cv li span:nth-child(2) { color: var(--grey); }
.cv li span:last-child { text-align: right; font-variant-numeric: tabular-nums; }

/* ---------- about page ---------- */
.about-page { padding-top: clamp(110px, 12vw, 180px); }
.about-page .about { padding-top: 0; }
.about-page h1 { font-size: clamp(56px, 9vw, 150px); font-weight: 800; line-height: 0.9; letter-spacing: -0.06em; text-transform: uppercase; padding: 0 var(--m); margin-bottom: clamp(40px, 6vw, 96px); }

/* ---------- works page ---------- */
.works-page { padding-top: clamp(110px, 12vw, 180px); }
.works-page h1 { font-size: clamp(56px, 9vw, 150px); font-weight: 800; line-height: 0.9; letter-spacing: -0.06em; text-transform: uppercase; padding: 0 var(--m); }
.count { font-size: 0.22em; font-weight: 500; letter-spacing: 0; vertical-align: top; margin-left: 0.2em; color: var(--grey); }
.tools { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 16px; padding: clamp(28px, 4vw, 56px) var(--m) 24px; }
.filters, .views { display: flex; flex-wrap: wrap; gap: 4px 20px; }
.tools button { font-size: 14px; font-weight: 500; text-transform: uppercase; color: var(--grey); padding: 6px 0; position: relative; transition: color 200ms ease; }
.tools button::after { content: ""; position: absolute; left: 0; right: 0; bottom: 2px; height: 1.5px; background: currentColor; transform: scaleX(0); transform-origin: left; transition: transform 350ms var(--ease-out); } /* taste-skill-ignore: active underline */
.tools button[aria-pressed="true"] { color: var(--ink); }
.tools button[aria-pressed="true"]::after { transform: scaleX(1); }
@media (hover: hover) and (pointer: fine) { .tools button:hover { color: var(--ink); } }

.index { padding: 0 var(--m); }
.index[data-view="grid"] { display: grid; grid-template-columns: repeat(3, 1fr); gap: 40px var(--gap); }
.work { display: block; transition: opacity 400ms ease, transform 500ms var(--ease-out); }
.work.is-out { display: none; }
.work.is-entering { opacity: 0; transform: translateY(16px); }
.work__img { overflow: hidden; aspect-ratio: 4 / 5; background: var(--card); }
.work__img img { width: 100%; height: 100%; object-fit: cover; transition: transform 900ms var(--ease-out); }
.work__name { margin-top: 12px; font-size: 14px; font-weight: 500; text-transform: uppercase; }
.work__type, .work__year { font-size: 14px; font-weight: 500; text-transform: uppercase; color: var(--grey); }
@media (hover: hover) and (pointer: fine) { .index[data-view="grid"] .work:hover .work__img img { transform: scale(1.04); } }

/* List view: one row per project, the picture follows the pointer */
.index[data-view="list"] .work {
  display: grid; grid-template-columns: 1.2fr 1.6fr auto; align-items: baseline; gap: 16px;
  padding: 14px 0; border-top: 1px solid #d6d6d1; /* taste-skill-ignore: list rows */
}
.index[data-view="list"] .work:last-child { border-bottom: 1px solid #d6d6d1; } /* taste-skill-ignore: list rows */
.index[data-view="list"] .work.is-out { display: none; }
.index[data-view="list"] .work__img { display: none; }
.index[data-view="list"] .work__name { margin: 0; font-size: clamp(28px, 3.6vw, 56px); font-weight: 500; letter-spacing: -0.04em; line-height: 1.05; text-transform: none; }
.index[data-view="list"] .work__year { text-align: right; font-variant-numeric: tabular-nums; }
@media (hover: hover) and (pointer: fine) {
  .index[data-view="list"]:hover .work { opacity: 0.35; }
  .index[data-view="list"] .work:hover { opacity: 1; }
}
.peek { position: fixed; top: 0; left: 0; z-index: 15; width: clamp(200px, 18vw, 300px); aspect-ratio: 4 / 5; pointer-events: none; overflow: hidden; opacity: 0; transform: translate3d(var(--px, -999px), var(--py, -999px), 0) scale(0.92); transition: opacity 250ms ease, transform 500ms var(--ease-out); }
.peek.is-on { opacity: 1; transform: translate3d(var(--px), var(--py), 0) scale(1); }
.peek img { width: 100%; height: 100%; object-fit: cover; }

/* ---------- about page: the portrait printed in four plates ---------- */
.me { display: grid; grid-template-columns: 5fr 7fr; gap: clamp(32px, 6vw, 96px); align-items: center; padding: 0 var(--m); }
.press { position: relative; aspect-ratio: 4 / 5; background: #fff; overflow: hidden; }
.press img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: center 20%; transition: opacity 400ms ease; }
.press__plates { position: absolute; inset: 0; }
.press__plates canvas { position: absolute; inset: 0; width: 100%; height: 100%; mix-blend-mode: multiply; transition: opacity 500ms ease, transform 1100ms var(--ease-out); }
.press.is-ready img { opacity: 0; }
.press canvas.is-off { opacity: 0 !important; }
.press canvas.is-waiting { opacity: 0; transform: translate(var(--fx, 0), var(--fy, 0)); transition-duration: 0ms; }
.press__keys { display: flex; align-items: center; gap: 8px; margin-top: 14px; }
.key {
  width: 40px; height: 40px; display: grid; place-items: center; font-size: 14px; font-weight: 800;
  background: var(--p); color: #fff; transition: transform 140ms var(--ease-out), opacity 250ms ease, background-color 250ms ease, color 250ms ease;
}
.key[data-plate="y"] { color: #111; }
.key[aria-pressed="false"] { background: transparent; color: var(--ink); box-shadow: inset 0 0 0 1.5px var(--p); } /* taste-skill-ignore: ink key outline */
.key:active { transform: scale(0.94); }
.press__again { margin-left: 10px; font-size: 14px; font-weight: 500; text-transform: uppercase; border-bottom: 1.5px solid currentColor; text-shadow: var(--mis-off); transition: text-shadow 400ms var(--ease-out); } /* taste-skill-ignore: text button underline */
@media (hover: hover) and (pointer: fine) {
  .press__again:hover { text-shadow: var(--mis-small); }
  .press:hover canvas[data-plate="c"] { transform: translate(-4px, 2px); }
  .press:hover canvas[data-plate="m"] { transform: translate(4px, -2px); }
  .press:hover canvas[data-plate="y"] { transform: translate(2px, 3px); }
}
.me__more { margin-top: 20px; max-width: 46ch; color: var(--grey); font-size: 17px; }
.play { display: inline-flex; align-items: center; gap: 12px; margin-top: 32px; font-size: 14px; font-weight: 500; text-transform: uppercase; }
.play svg { width: 40px; height: 40px; fill: none; stroke: currentColor; stroke-width: 1.6; transition: transform 600ms var(--ease-out); }
.play span { text-shadow: var(--mis-off); transition: text-shadow 400ms var(--ease-out); }
@media (hover: hover) and (pointer: fine) { .play:hover svg { transform: rotate(90deg); } .play:hover span { text-shadow: var(--mis-small); } }

.me__links { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 24px; }
.pill-btn { display: inline-flex; align-items: center; gap: 6px; min-height: 44px; padding: 0 18px; background: var(--card); font-size: 14px; font-weight: 500; text-transform: uppercase; transition: transform 140ms var(--ease-out), background-color 200ms ease; }
.pill-btn:active { transform: scale(0.97); }
.pill-btn--ink { background: var(--ink); color: #fff; }
.pill-btn.is-soon { opacity: 0.55; cursor: not-allowed; }
.pill-btn.is-soon span { text-transform: none; font-weight: 400; }
@media (hover: hover) and (pointer: fine) { .pill-btn:not(.is-soon):hover { background: #dcdcd7; } }

/* ---------- about page: the route (work and studies in one run) ---------- */
.route { padding: clamp(110px, 13vw, 200px) var(--m) 0; }
.route__head { display: flex; justify-content: space-between; align-items: baseline; flex-wrap: wrap; gap: 16px; margin-bottom: clamp(28px, 4vw, 56px); }
.route__head h2 { font-size: clamp(32px, 3.4vw, 52px); font-weight: 500; line-height: 1; letter-spacing: -0.035em; text-transform: uppercase; }
.route__legend { display: flex; gap: 22px; font-size: 13px; font-weight: 500; text-transform: uppercase; color: var(--grey); }
.route__legend > span { display: inline-flex; align-items: center; gap: 8px; }
.route__list { --x: calc(9rem + 24px + 13px); position: relative; list-style: none; margin: 0; padding: 0; }
.route__list::before, .route__list::after { content: ""; position: absolute; left: var(--x); top: 10px; bottom: 10px; width: 2px; } /* taste-skill-ignore: route line */
.route__list::before { background: #d6d6d1; }
.route__list::after { background: var(--ink); transform: scaleY(var(--progress, 1)); transform-origin: top; }
.stop { position: relative; z-index: 1; display: grid; grid-template-columns: 9rem 28px 1fr; column-gap: 24px; padding: 0 0 clamp(36px, 4.5vw, 64px); }
.stop__years { font-size: clamp(20px, 1.9vw, 28px); font-weight: 500; letter-spacing: -0.02em; font-variant-numeric: tabular-nums; line-height: 1.1; }
.stop__mark { justify-self: center; margin-top: 4px; }
.stop__mark--work { display: block; width: 22px; height: 22px; background: var(--p); outline: 4px solid var(--bg); }
.stop__mark--study { width: 28px; height: 28px; fill: var(--bg); stroke: var(--ink); stroke-width: 1.8; overflow: visible; background: var(--bg); }
.stop__mark--small { width: 16px; height: 16px; background: none; }
.stop__mark--next { display: block; width: 22px; height: 22px; background: var(--bg); box-shadow: inset 0 0 0 2px var(--ink); } /* taste-skill-ignore: open marker */
.route__legend .stop__mark--work { width: 12px; height: 12px; margin: 0; outline: 0; }
.stop__kind { font-size: 13px; font-weight: 500; text-transform: uppercase; color: var(--grey); }
.stop__title { font-size: clamp(24px, 2.4vw, 36px); font-weight: 500; line-height: 1.1; letter-spacing: -0.03em; margin-top: 2px; }
.stop__place { margin-top: 4px; color: var(--grey); }
.stop__points { list-style: none; margin: 12px 0 0; padding: 0; display: grid; gap: 4px; max-width: 60ch; }
.stop__points li::before { content: "— "; color: var(--grey); }
.stop--study .stop__title { font-size: clamp(20px, 1.8vw, 26px); }
.stop--next .stop__title a { text-shadow: var(--mis-off); transition: text-shadow 400ms var(--ease-out); }
@media (hover: hover) and (pointer: fine) { .stop--next .stop__title a:hover { text-shadow: var(--mis-big); } }
.route__list .stop:last-child { padding-bottom: 0; }

/* ---------- screening sheet (video dialog) ---------- */
.screening { border: 0; padding: 0; background: transparent; width: min(1100px, 94vw); max-height: 96svh; overflow: hidden; overscroll-behavior: contain; }
/* While the film is open the page behind stays put */
html.is-screening, html.is-screening body { overflow: hidden; }
.screening:focus { outline: none; }
/* The dialog sits above the custom pointer, so it brings the normal arrow back */
html.has-cursor .screening, html.has-cursor .screening * { cursor: auto !important; }
html.has-cursor .screening button { cursor: pointer !important; }
html.is-screening .cursor { opacity: 0; }
.screening::backdrop { background: rgba(242, 242, 240, 0.92); }
.screening__sheet { position: relative; padding: 28px; }
.screening__paper { background: #fff; padding: clamp(16px, 2.4vw, 32px); display: grid; gap: 16px; }
.screening__top { display: flex; justify-content: space-between; align-items: baseline; gap: 16px; flex-wrap: wrap; padding-bottom: 12px; border-bottom: 2px solid var(--ink); font-size: 13px; font-weight: 500; text-transform: uppercase; color: var(--grey); } /* taste-skill-ignore: ticket rule */
.screening__title { font-size: clamp(28px, 3vw, 44px); font-weight: 800; line-height: 0.95; letter-spacing: -0.055em; color: var(--ink); }
.screening__close { display: inline-flex; align-items: center; gap: 8px; min-height: 40px; padding: 0 16px; background: var(--ink); color: #fff !important; font-size: 14px; font-weight: 500; text-transform: uppercase; text-shadow: var(--mis-off); transition: text-shadow 400ms var(--ease-out); }
@media (hover: hover) and (pointer: fine) { .screening__close:hover { text-shadow: var(--mis-small); } }
.screening video { width: 100%; display: block; background: #000; aspect-ratio: 16 / 9; max-height: calc(96svh - 230px); object-fit: contain; }
.ticket__foot > span:first-child, .screening__foot > span:first-child { white-space: nowrap; }
.screening__foot { display: flex; gap: 16px; justify-content: space-between; align-items: end; padding-top: 12px; border-top: 1px solid #d6d6d1; font-size: 13px; font-weight: 500; text-transform: uppercase; color: var(--grey); } /* taste-skill-ignore: ticket rule */
.screening[open] .screening__paper { animation: sheet-in 600ms var(--ease-out); }
.screening[open] .sign { animation: sign-in 900ms var(--ease-in-out) 500ms both; }
@keyframes sheet-in { from { opacity: 0; transform: translateY(24px) scale(0.98); } }
@keyframes sign-in { from { clip-path: inset(0 100% 0 0); } to { clip-path: inset(0 0 -4px 0); } }

/* ---------- project page ---------- */
.project { padding-top: clamp(100px, 10vw, 150px); }
.project__head { padding: 0 var(--m); }
.project__back { display: flex; justify-content: space-between; font-size: 14px; font-weight: 500; text-transform: uppercase; color: var(--grey); margin-bottom: clamp(24px, 4vw, 56px); }
.project__back a { color: var(--ink); transition: text-shadow 400ms var(--ease-out); }
@media (hover: hover) and (pointer: fine) { .project__back a:hover { text-shadow: var(--mis-small); } }
.project h1 { font-size: clamp(64px, 12vw, 210px); font-weight: 800; line-height: 0.86; letter-spacing: -0.065em; text-transform: uppercase; }
.project__kind { margin-top: 10px; font-size: clamp(20px, 2vw, 28px); font-weight: 500; letter-spacing: -0.02em; color: var(--grey); }
.project__meta { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; margin: clamp(32px, 5vw, 72px) 0 0; padding: 14px 0; border-top: 1px solid #d6d6d1; } /* taste-skill-ignore: spec row */
.project__meta dt { font-size: 13px; font-weight: 500; text-transform: uppercase; color: var(--grey); }
.project__meta dd { margin: 4px 0 0; font-size: 15px; font-weight: 500; }

.shot { margin: 0; overflow: hidden; background: var(--card); }
.shot img { width: 100%; height: 100%; object-fit: cover; object-position: var(--pos, center); }
.shot--cover { margin: clamp(24px, 3vw, 40px) var(--m) 0; aspect-ratio: 16 / 9; }
.shot--detail img { transform: scale(1.6); transform-origin: var(--pos, center); }
.gallery { display: grid; grid-template-columns: 1fr 1fr; gap: var(--gap); padding: 0 var(--m); }
.shot--half { aspect-ratio: 4 / 5; }
.shot--wide { grid-column: 1 / -1; aspect-ratio: 21 / 9; }

.story { padding: clamp(80px, 10vw, 160px) var(--m); display: grid; gap: clamp(40px, 5vw, 72px); }
.story__row { display: grid; grid-template-columns: 4fr 8fr; gap: 16px; }
.story h2 { font-size: 14px; font-weight: 500; text-transform: uppercase; color: var(--grey); padding-top: 0.5em; }
.story p { font-size: clamp(20px, 1.8vw, 28px); font-weight: 500; line-height: 1.25; letter-spacing: -0.02em; max-width: 42ch; }

.next { position: relative; display: grid; gap: 6px; margin: 0 var(--m); padding: clamp(40px, 6vw, 96px) 0; border-top: 1px solid #d6d6d1; } /* taste-skill-ignore: section divider */
.next__label { font-size: 14px; font-weight: 500; text-transform: uppercase; color: var(--grey); }
.next__name { font-size: clamp(56px, 10vw, 180px); font-weight: 800; line-height: 0.9; letter-spacing: -0.065em; text-transform: uppercase; transition: text-shadow 400ms var(--ease-out); }
.next__name span { display: inline-block; transition: transform 500ms var(--ease-out); }
.next__img { position: absolute; right: 0; top: 50%; width: clamp(160px, 18vw, 280px); aspect-ratio: 4 / 5; overflow: hidden; opacity: 0; transform: translateY(-50%) scale(0.92) rotate(-3deg); transition: opacity 300ms ease, transform 600ms var(--ease-out); pointer-events: none; }
.next__img img { width: 100%; height: 100%; object-fit: cover; }
@media (hover: hover) and (pointer: fine) {
  .next:hover .next__name { text-shadow: var(--mis-big); }
  .next:hover .next__name span { transform: translateX(14px); }
  .next:hover .next__img { opacity: 1; transform: translateY(-50%) scale(1) rotate(0deg); }
}
.project .contact { padding-top: clamp(60px, 8vw, 120px); }

/* ---------- Singularu: concept note, process sheet, captioned pieces, stories ---------- */
.sg-note { display: flex; align-items: center; gap: 10px; margin-top: 18px; font-size: 13px; font-weight: 500; color: var(--grey); }
.sg-note svg { width: 14px; height: 14px; flex: none; fill: none; stroke: currentColor; stroke-width: 1.6; }
.sg-pieces { row-gap: clamp(28px, 3vw, 48px); }
.sg-pieces .shot { aspect-ratio: auto; background: none; overflow: visible; }
.sg-pieces .shot img { display: block; aspect-ratio: 4 / 5; background: var(--card); }
.sg-pieces .shot--wide img { aspect-ratio: 21 / 9; }
.sg-pieces figcaption, .sg-stories__list span { display: block; margin-top: 10px; font-size: 13px; font-weight: 500; letter-spacing: 0.02em; text-transform: uppercase; color: var(--grey); }
.sg-stories { display: grid; gap: clamp(32px, 4vw, 56px); padding: clamp(80px, 10vw, 160px) var(--m) 0; }
.sg-stories p { font-size: clamp(20px, 1.8vw, 28px); font-weight: 500; line-height: 1.25; letter-spacing: -0.02em; max-width: 42ch; }
.sg-stories h2 { font-size: 14px; font-weight: 500; text-transform: uppercase; color: var(--grey); padding-top: 0.5em; }
.sg-stories__list { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--gap); max-width: 1000px; margin: 0 auto; width: 100%; list-style: none; padding: 0; }
.sg-stories__list img { display: block; width: 100%; height: auto; border-radius: 18px; }
/* Singularu case: chapters, statement, three details */
.sg-quote { padding: clamp(80px, 10vw, 160px) var(--m); font-size: clamp(56px, 10vw, 180px); font-weight: 800; line-height: 0.9; letter-spacing: -0.065em; text-transform: uppercase; }
.sg-quote span { color: var(--grey); }
.sg-chapter { display: grid; grid-template-columns: 4fr 8fr; gap: 16px; padding: clamp(80px, 10vw, 160px) var(--m) clamp(28px, 3vw, 48px); }
.sg-chapter h2 { font-size: clamp(32px, 3.4vw, 52px); font-weight: 500; line-height: 1; letter-spacing: -0.035em; text-transform: uppercase; }
.sg-chapter p { font-size: clamp(20px, 1.8vw, 28px); font-weight: 500; line-height: 1.25; letter-spacing: -0.02em; max-width: 42ch; }
.sg-trio { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--gap); padding: 0 var(--m); row-gap: clamp(28px, 3vw, 48px); }
.sg-trio .shot { aspect-ratio: auto; background: none; overflow: visible; }
.sg-trio .shot img { display: block; aspect-ratio: 4 / 5; background: var(--card); }
.sg-trio figcaption, .sg-pieces figcaption { display: block; margin-top: 10px; font-size: 13px; font-weight: 500; letter-spacing: 0.02em; text-transform: uppercase; color: var(--grey); }
.sg-trio figcaption strong { display: block; margin-top: 4px; font-size: clamp(18px, 1.6vw, 24px); font-weight: 500; letter-spacing: -0.02em; text-transform: none; color: var(--ink); }
@media (max-width: 760px) {
  .sg-chapter { grid-template-columns: 1fr; gap: 8px; }
  .sg-trio { grid-template-columns: 1fr; }
}
@media (max-width: 760px) {
  .sg-pieces .shot--wide img { aspect-ratio: 4 / 3; }
  .sg-stories__list { grid-template-columns: repeat(3, 70%); overflow-x: auto; scroll-snap-type: x mandatory; padding-bottom: 8px; }
  .sg-stories__list li { scroll-snap-align: start; }
}

/* KAMAKURA case: logo built on a grid, colour board, looping video */
.kmk-ig { display: block; margin-top: 24px; }
/* Test page only: blocks this case needs that the site does not have yet */
.sg-quote { padding: clamp(80px, 10vw, 160px) var(--m); font-size: clamp(56px, 10vw, 180px); font-weight: 800; line-height: 0.9; letter-spacing: -0.065em; text-transform: uppercase; }
.sg-quote span { color: var(--grey); }
.sg-chapter { display: grid; grid-template-columns: 4fr 8fr; gap: 16px; padding: clamp(80px, 10vw, 160px) var(--m) clamp(28px, 3vw, 48px); }
.sg-chapter h2 { font-size: clamp(32px, 3.4vw, 52px); font-weight: 500; line-height: 1; letter-spacing: -0.035em; text-transform: uppercase; }
.sg-chapter p { font-size: clamp(20px, 1.8vw, 28px); font-weight: 500; line-height: 1.25; letter-spacing: -0.02em; max-width: 42ch; }
.sg-trio { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--gap); padding: 0 var(--m); row-gap: clamp(28px, 3vw, 48px); }
.sg-trio .shot { aspect-ratio: auto; background: none; overflow: visible; }
.sg-trio .shot img { display: block; aspect-ratio: 4 / 5; background: var(--card); }
.sg-trio figcaption, .sg-pieces figcaption { display: block; margin-top: 10px; font-size: 13px; font-weight: 500; letter-spacing: 0.02em; text-transform: uppercase; color: var(--grey); }
.sg-trio figcaption strong { display: block; margin-top: 4px; font-size: clamp(18px, 1.6vw, 24px); font-weight: 500; letter-spacing: -0.02em; text-transform: none; color: var(--ink); }
@media (max-width: 760px) {
  .sg-chapter { grid-template-columns: 1fr; gap: 8px; }
  .sg-trio { grid-template-columns: 1fr; }
}

/* NØRDIQ case: brand block and the palette as a layered winter landscape */
.nq-brand { display: grid; grid-template-columns: 1.414fr 0.686fr; gap: var(--gap); padding: 0 var(--m); }
.nq-brand img { display: block; width: 100%; height: auto; }
.nq-brand figcaption, .nq-land-wrap figcaption { display: block; margin-top: 10px; font-size: 13px; font-weight: 500; letter-spacing: 0.02em; text-transform: uppercase; color: var(--grey); }
.nq-land-wrap { padding: 0 var(--m); }
.nq-land { display: grid; grid-template-rows: 3fr 2fr 1.5fr 1fr 0.6fr; aspect-ratio: 16 / 9; overflow: hidden; }
.nq-band { display: flex; justify-content: space-between; align-items: center; padding: 0 clamp(14px, 2vw, 28px); font-size: clamp(11px, 1vw, 14px); font-weight: 500; letter-spacing: 0.04em; text-transform: uppercase; transform-origin: top; min-height: 0; overflow: hidden; }
.nq-band span:last-child { font-variant-numeric: tabular-nums; }
/* the landscape builds itself band by band, sky first, once it scrolls into view */
.js .nq-land:not(.is-in) .nq-band { transform: scaleY(0); }
.nq-land .nq-band { transition: transform 900ms var(--ease-out); transition-delay: calc(var(--i) * 110ms); }
.nq-land[data-rise] { opacity: 1; translate: none; }
.nq-sq img { aspect-ratio: 1 !important; }
.nq-34 img { aspect-ratio: 3 / 4 !important; }
@media (max-width: 760px) {
  .nq-brand { grid-template-columns: 1fr; }
  .nq-land { aspect-ratio: 3 / 4; }
}

/* JORGE REVILLA case: logo, packaging, flip-through catalogue, laptop, phones, emails */
.jr { --jr-navy: #27324f; --jr-sand: #f3eee8; }
.jr-panel { margin: 0 var(--m); padding: clamp(56px, 9vw, 130px) clamp(24px, 12vw, 220px); background: var(--jr-sand); }
.jr-logo { position: relative; aspect-ratio: 912 / 323; max-width: 640px; margin: 0 auto; }
.jr-ltr, .jr-spain { position: absolute; display: block; }
.jr-ltr { top: 0; height: 40.867%; }
.jr-spain { left: 0; width: 100%; top: 59.133%; height: 40.867%; }
.jr-cap { display: block; margin-top: 12px; font-size: 13px; font-weight: 500; letter-spacing: 0.02em; text-transform: uppercase; color: var(--grey); }
.jr-panel .jr-cap { margin-top: clamp(40px, 6vw, 80px); }
@media (prefers-reduced-motion: no-preference) {
  .jr-ltr { animation: jr-letter 7s cubic-bezier(0.23, 1, 0.32, 1) infinite both; animation-delay: calc(var(--i) * 90ms); }
  .jr-spain { animation: jr-curve 7s cubic-bezier(0.77, 0, 0.175, 1) infinite both; }
}
@keyframes jr-letter { 0%, 6% { opacity: 0; transform: translateY(30%); } 22%, 86% { opacity: 1; transform: none; } 96%, 100% { opacity: 0; transform: none; } }
@keyframes jr-curve { 0%, 24% { clip-path: inset(0 100% 0 0); } 44%, 86% { clip-path: inset(0 0 0 0); opacity: 1; } 96%, 100% { clip-path: inset(0 0 0 0); opacity: 0; } }

/* packaging: three stills and the packaging reel, all the same height */
.jr-pack { display: grid; grid-template-columns: 1fr 1fr 1fr 0.703fr; gap: var(--gap); padding: 0 var(--m); }
.jr-pack figure { margin: 0; }
.jr-pack img, .jr-pack video { display: block; width: 100%; height: auto; aspect-ratio: 4 / 5; object-fit: cover; background: var(--card); }
.jr-pack video { aspect-ratio: 9 / 16; }
.jr-pack figcaption { display: block; margin-top: 10px; font-size: 13px; font-weight: 500; letter-spacing: 0.02em; text-transform: uppercase; color: var(--grey); }

/* catalogue: one PDF page per view, cover and back cover single, the rest spreads */
.jr-book { max-width: 1040px; margin: 0 auto; padding: 0 var(--m); }
.jr-book__stage { position: relative; display: grid; place-items: center; aspect-ratio: 16 / 10; background: var(--card); overflow: hidden; cursor: grab; }
.jr-page { grid-area: 1 / 1; max-width: 88%; max-height: 82%; width: auto; height: auto; object-fit: contain; box-shadow: 0 18px 40px rgba(17, 17, 17, 0.18); animation: jr-turn 500ms var(--ease-out); user-select: none; -webkit-user-drag: none; }
.jr-page[hidden] { display: none; }
@keyframes jr-turn { from { opacity: 0; transform: translateX(var(--from, 24px)); } }
.jr-book__bar { display: flex; justify-content: space-between; align-items: center; gap: 12px; margin-top: 12px; }
.jr-book__bar .jr-cap { margin: 0; }
.jr-book__nav { display: flex; flex: none; white-space: nowrap; align-items: center; gap: 8px; font-size: 14px; font-weight: 500; font-variant-numeric: tabular-nums; }
.jr-book__nav button { min-width: 44px; min-height: 44px; background: var(--ink); color: #fff; font-size: 18px; transition: transform 140ms var(--ease-out); }
.jr-book__nav button:active { transform: scale(0.97); }
.jr-book__nav button:disabled { opacity: 0.3; cursor: default; }

/* laptop */
.jr-laptop { max-width: 1040px; margin: 0 auto; padding: 0 calc(var(--m) + 5%); }
.laptop__screen { position: relative; aspect-ratio: 16 / 10; padding: 2% 2% 2.6%; background: #1b1b1d; border-radius: 16px 16px 0 0; }
.laptop__view, .phone__screen { height: 100%; overflow-y: auto; scrollbar-width: none; background: #fff; overscroll-behavior: contain; }
.laptop__view::-webkit-scrollbar, .phone__screen::-webkit-scrollbar { display: none; }
.laptop__view img { display: block; width: 100%; height: auto; }
.laptop__base { height: clamp(10px, 1.2vw, 16px); margin: 0 -5%; background: linear-gradient(#e2e2e5, #b9b9bd); border-radius: 0 0 14px 14px; }

/* phones: thin titanium frame, slim bezel, dynamic island */
.jr-social { display: flex; justify-content: center; gap: clamp(32px, 7vw, 120px); flex-wrap: wrap; padding: 0 var(--m); }
.jr-social figure { margin: 0; }
.phone { position: relative; width: clamp(236px, 19vw, 280px); aspect-ratio: 9 / 19.5; padding: 5px; background: #0d0d0e; border-radius: 46px; box-shadow: 0 0 0 1.5px #4a4a4f, 0 0 0 3px #1e1e20, 0 40px 70px -30px rgba(17, 17, 17, 0.45); }
.phone::before { content: ""; position: absolute; z-index: 3; top: 15px; left: 50%; width: 30%; height: 22px; transform: translateX(-50%); background: #0d0d0e; border-radius: 12px; }
.phone__screen { position: relative; border-radius: 41px; }
/* Instagram profile */
.ig-head { padding: 50px 14px 10px; font: 12px/1.35 system-ui, -apple-system, sans-serif; color: #111; }
.ig-head__top { display: flex; align-items: center; gap: 12px; }
.ig-head__top img { width: 58px; height: 58px; border-radius: 50%; border: 1px solid #e3e3e3; object-fit: contain; padding: 8px; background: #fff; }
.ig-head b { display: block; font-size: 14px; }
.ig-head p { margin-top: 10px; }
.ig-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 2px; }
.ig-tile { display: block; padding: 0; aspect-ratio: 4 / 5; overflow: hidden; background: #f1f1f1; }
.ig-tile img { width: 100%; height: 100%; object-fit: cover; transition: opacity 200ms ease; }
@media (hover: hover) and (pointer: fine) { .ig-tile:hover img { opacity: 0.85; } }
.ig-view { position: absolute; inset: 0; z-index: 2; display: flex; flex-direction: column; background: #fff; font: 12px/1.35 system-ui, -apple-system, sans-serif; color: #111; animation: ig-in 260ms var(--ease-out); }
.ig-view[hidden] { display: none; }
@keyframes ig-in { from { opacity: 0; transform: translateY(12px); } }
.ig-view__bar { display: flex; align-items: center; justify-content: space-between; padding: 48px 12px 8px; font-weight: 600; font-size: 13px; }
.ig-view__bar button { min-width: 36px; min-height: 36px; font-size: 18px; }
.ig-view__img { position: relative; }
.ig-view__img img { display: block; width: 100%; aspect-ratio: 4 / 5; object-fit: cover; }
.ig-view__img button { position: absolute; top: 50%; width: 32px; height: 32px; margin-top: -16px; border-radius: 50%; background: rgba(255,255,255,.85); font-size: 14px; }
.ig-prev { left: 8px; } .ig-next { right: 8px; }
.ig-view__img button:disabled { display: none; }
.ig-view__act { display: flex; gap: 14px; padding: 10px 12px 4px; font-size: 18px; }
.ig-view__cap { padding: 2px 12px; }
/* reels: the whole video, never cropped */
.phone__screen--reels { background: #000; scroll-snap-type: y mandatory; }
.ig-reel { position: relative; height: 100%; display: grid; place-items: center; scroll-snap-align: start; scroll-snap-stop: always; }
.ig-reel video { width: 100%; height: auto; max-height: 100%; aspect-ratio: 9 / 16; object-fit: contain; display: block; }
.ig-reel__tag { position: absolute; left: 14px; bottom: 26px; font: 600 12px/1 system-ui, -apple-system, sans-serif; color: #fff; text-shadow: 0 1px 3px rgba(0,0,0,.5); }

/* emails */
.jr-mails { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--gap); padding: 0 var(--m); }
.jr-mail__frame { height: clamp(420px, 48vw, 720px); overflow-y: auto; scrollbar-width: thin; background: #fff; border: 1px solid var(--rule); }
.jr-mail__frame img { display: block; width: 100%; height: auto; }
.jr-mail figcaption { display: block; margin-top: 10px; font-size: 13px; font-weight: 500; letter-spacing: 0.02em; text-transform: uppercase; color: var(--grey); }
.jr-mail figcaption span { display: block; text-transform: none; letter-spacing: 0; color: var(--ink); font-size: 15px; margin-top: 2px; }
@media (max-width: 760px) {
  .jr-mails { grid-template-columns: 1fr; }
  .jr-pack { grid-template-columns: 1fr 1fr; }
  .jr-pack .jr-pack__video { grid-column: 1 / -1; max-width: 70%; margin: 0 auto; }
  .jr-book__stage { aspect-ratio: 4 / 3; }
}

/* ST. by BLVDR case: cover, values, logo on its grid, palette and type, poster wall, Laus note */
.st { --st-black: #2d2926; --st-orange: #ff5100; --st-cobalt: #385cad; --st-grey: #d2dce5; }
.st-panel { margin: 0 var(--m); padding: clamp(56px, 9vw, 130px) clamp(24px, 12vw, 220px); background: #fff; }
.st-logo { position: relative; aspect-ratio: 1460.1 / 625.7; max-width: 680px; margin: 0 auto; }
.st-grid { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.st-g { stroke: #b9c3cc; stroke-width: 1; vector-effect: non-scaling-stroke; stroke-dasharray: 1; }
.st-sym, .st-let { position: absolute; top: 15.502%; height: 69.997%; display: block; }
.st-panel figcaption { display: block; margin-top: clamp(40px, 6vw, 80px); font-size: 13px; font-weight: 500; letter-spacing: 0.02em; text-transform: uppercase; color: var(--grey); }
@media (prefers-reduced-motion: no-preference) {
  .st-g { animation: st-draw 8s cubic-bezier(0.77, 0, 0.175, 1) infinite both; animation-delay: calc(var(--i) * 50ms); }
  .st-sym { animation: st-sym 8s cubic-bezier(0.23, 1, 0.32, 1) infinite both; }
  .st-let { animation: st-let 8s cubic-bezier(0.23, 1, 0.32, 1) infinite both; animation-delay: calc(var(--i) * 180ms); }
}
@keyframes st-draw { 0% { stroke-dashoffset: 1; opacity: 1; } 18%, 55% { stroke-dashoffset: 0; opacity: 1; } 68%, 88% { stroke-dashoffset: 0; opacity: 0.25; } 96%, 100% { stroke-dashoffset: 0; opacity: 0; } }
@keyframes st-sym { 0%, 18% { opacity: 0; transform: scale(0.4) rotate(-90deg); } 30%, 88% { opacity: 1; transform: none; } 96%, 100% { opacity: 0; transform: none; } }
@keyframes st-let { 0%, 26% { clip-path: inset(100% 0 0 0); } 38%, 88% { clip-path: inset(0 0 0 0); opacity: 1; } 96%, 100% { clip-path: inset(0 0 0 0); opacity: 0; } }

.st-cover { position: relative; display: grid; place-items: center; margin: clamp(24px, 3vw, 40px) var(--m) 0; aspect-ratio: 16 / 9; overflow: hidden; background: #111; }
.st-cover__bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 30%; filter: grayscale(1) contrast(1.05) brightness(0.45); }
.st-cover__mark { position: relative; display: grid; justify-items: center; gap: clamp(10px, 1.4vw, 20px); width: min(56%, 620px); }
.st-cover__logo { display: flex; align-items: flex-end; gap: 2.5%; width: 100%; }
.st-cover__logo img { height: auto; filter: invert(1); }
.st-cover__logo img:nth-child(1) { width: 33.4%; } .st-cover__logo img:nth-child(2) { width: 25.9%; } .st-cover__logo img:nth-child(3) { width: 29.9%; }
.st-cover__tag { color: #fff; font-family: "Swis721 BT", "Helvetica Neue", Helvetica, Arial, sans-serif; font-weight: 700; font-size: clamp(14px, 2vw, 30px); letter-spacing: 0.02em; text-transform: uppercase; }
.st-values { padding: 0 var(--m) clamp(40px, 6vw, 96px); font-family: "Swis721 BT", "Helvetica Neue", Helvetica, Arial, sans-serif; color: var(--st-black); }
.st-values p { font-size: clamp(34px, 6.4vw, 112px); font-weight: 400; line-height: 0.95; letter-spacing: -0.03em; text-transform: uppercase; }
.st-values span { color: var(--st-orange); }
.st-values--r { text-align: right; } .st-values--c { text-align: center; }
.st-type { display: grid; grid-template-columns: 1fr 1.4fr; grid-template-rows: auto auto; gap: 0 clamp(24px, 4vw, 64px); padding: clamp(28px, 3vw, 48px) var(--m) 0; font-family: "Swis721 BT", "Helvetica Neue", Helvetica, Arial, sans-serif; color: var(--st-black); }
.st-type__big { grid-row: 1 / 3; font-size: clamp(160px, 26vw, 400px); line-height: 0.8; letter-spacing: -0.04em; }
.st-type__big span { display: block; margin-top: 18px; font-family: var(--font); font-size: 13px; font-weight: 500; letter-spacing: 0.02em; text-transform: uppercase; color: var(--grey); line-height: 1.3; }
.st-type__row { display: grid; grid-template-columns: auto 1fr; gap: clamp(16px, 2vw, 32px); align-items: center; padding: 18px 0; border-top: 1px solid var(--rule); }
.st-type__row b { font-size: clamp(72px, 9vw, 150px); line-height: 0.9; letter-spacing: -0.03em; }
.st-type__row p { font-size: clamp(12px, 1vw, 15px); line-height: 1.5; overflow-wrap: anywhere; }
.st-type__row p span { display: block; margin-bottom: 6px; font-family: var(--font); font-size: 13px; font-weight: 500; text-transform: uppercase; color: var(--grey); }
.st-colors { display: grid; grid-template-columns: 2.2fr 1.4fr 1fr 1fr 1fr; gap: var(--gap); padding: 0 var(--m); }
.st-sw { display: flex; flex-direction: column; justify-content: flex-end; gap: 2px; min-height: clamp(170px, 22vw, 320px); padding: 14px; font-size: 12px; font-weight: 500; letter-spacing: 0.03em; text-transform: uppercase; }
.st-sw b { font-size: 15px; letter-spacing: 0; text-transform: none; }
.st-sw span { font-variant-numeric: tabular-nums; }

/* the poster wall: one row that scrolls sideways, posters lift on hover */
.st-wall { display: grid; grid-auto-flow: column; grid-auto-columns: clamp(220px, 24vw, 340px); gap: clamp(16px, 2vw, 28px); overflow-x: auto; padding: 12px var(--m) 24px; scroll-snap-type: x mandatory; scrollbar-width: thin; }
.st-poster { margin: 0; scroll-snap-align: start; }
.st-poster img { display: block; width: 100%; height: auto; box-shadow: 0 14px 30px -12px rgba(17, 17, 17, 0.35); transition: transform 400ms var(--ease-out); }
@media (hover: hover) and (pointer: fine) { .st-poster:hover img { transform: translateY(-8px) rotate(-1deg); } }
.st-poster figcaption { margin-top: 12px; font-size: 13px; font-weight: 500; text-transform: uppercase; }

.st-ropa { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--gap); padding: 0 var(--m); row-gap: clamp(28px, 3vw, 48px); }
.st-ropa .shot { aspect-ratio: auto; background: none; overflow: visible; }
.st-ropa .shot img { display: block; aspect-ratio: 4 / 5; object-fit: cover; background: var(--card); }
.st-ropa figcaption, .st-vid figcaption { display: block; margin-top: 10px; font-size: 13px; font-weight: 500; letter-spacing: 0.02em; text-transform: uppercase; color: var(--grey); }
.st-vid { margin: clamp(28px, 3vw, 48px) var(--m) 0; }
.st-vid video { display: block; width: 100%; height: auto; aspect-ratio: 16 / 9; background: #000; }

.st-laus { display: grid; grid-template-columns: auto 1fr; gap: clamp(20px, 4vw, 64px); align-items: center; margin: 0 var(--m); padding: clamp(28px, 4vw, 56px); background: var(--st-black); color: #fff; }
.st-laus__medal { display: grid; place-items: center; width: clamp(96px, 11vw, 150px); aspect-ratio: 1; border-radius: 50%; background: radial-gradient(circle at 35% 30%, #f4f4f4, #a9adb3 55%, #7d8188); color: var(--st-black); font-size: clamp(13px, 1.2vw, 16px); font-weight: 800; letter-spacing: 0.06em; text-transform: uppercase; text-align: center; line-height: 1.1; }
.st-laus p { font-size: clamp(20px, 1.8vw, 28px); font-weight: 500; line-height: 1.25; letter-spacing: -0.02em; max-width: 44ch; }
.st-laus .see { display: inline-block; margin-top: 18px; font-size: 14px; color: #fff; }
@media (max-width: 760px) {
  .st-colors { grid-template-columns: 1fr 1fr; }
  .st-colors .st-sw:first-child { grid-column: 1 / -1; }
  .st-type { grid-template-columns: 1fr; }
  .st-type__big { grid-row: auto; }
  .st-cover { aspect-ratio: 4 / 5; }
  .st-cover__mark { width: 78%; }
  .st-ropa { grid-template-columns: 1fr 1fr; }
  .st-laus { grid-template-columns: 1fr; }
}

/* maría case: printed name with plate keys, print-shop glossary, logo construction, process strip, live site */
.ma { --c: #00b7eb; --mg: #e6007e; --y: #ffd400; --k: #111; }
.ma-sheet { position: relative; margin: clamp(24px, 3vw, 40px) var(--m) 0; padding: clamp(60px, 10vw, 150px) 26px; background: #fff; display: grid; justify-items: center; gap: 28px; }
.ma-sheet .crop { position: absolute; width: 26px; height: 26px; fill: none; stroke: #a3a39b; stroke-width: 1; }
.ma-plates { display: inline-grid; isolation: isolate; font-family: "Bricolage Grotesque", "Inter Tight", sans-serif; font-variation-settings: "opsz" 96; font-weight: 800; font-size: clamp(90px, 17vw, 260px); line-height: 1; letter-spacing: -0.05em; }
.ma-plate { grid-area: 1 / 1; white-space: nowrap; mix-blend-mode: multiply; transition: opacity 300ms ease; }
.ma-plate--c { color: var(--c); --fx: -40px; --fy: 14px; --d: 0ms; } .ma-plate--m { color: var(--mg); --fx: 34px; --fy: -18px; --d: 500ms; }
.ma-plate--y { color: var(--y); --fx: -18px; --fy: -26px; --d: 1000ms; } .ma-plate--k { color: var(--k); --fx: 22px; --fy: 24px; --d: 1500ms; }
.ma-plate.is-off { opacity: 0; }
@media (prefers-reduced-motion: no-preference) { .ma-sheet.is-run .ma-plate { animation: ma-land 1100ms cubic-bezier(0.23, 1, 0.32, 1) both; animation-delay: var(--d); } }
@keyframes ma-land { from { opacity: 0; transform: translate(var(--fx), var(--fy)); } }
.ma-keys { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; }
.ma-keys button { min-width: 44px; min-height: 44px; padding: 0 14px; background: var(--card); font-size: 14px; font-weight: 500; text-transform: uppercase; transition: transform 140ms var(--ease-out), opacity 200ms ease; }
.ma-keys button:active { transform: scale(0.97); }
.ma-keys button[aria-pressed="false"] { opacity: 0.4; }
.ma-keys button i { display: inline-block; width: 10px; height: 10px; margin-right: 6px; vertical-align: -1px; }
.ma-keys .ma-again { background: var(--ink); color: #fff; }

.ma-gloss { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--gap); padding: 0 var(--m); }
.ma-gloss figure { margin: 0; }
.ma-tile { display: grid; place-items: center; aspect-ratio: 1; background: #fff; }
.ma-tile svg { width: 46%; height: auto; overflow: visible; }
.ma-gloss figcaption { margin-top: 10px; font-size: 13px; font-weight: 500; letter-spacing: 0.02em; text-transform: uppercase; color: var(--grey); }
.ma-gloss figcaption b { display: block; color: var(--ink); text-transform: none; letter-spacing: -0.01em; font-size: 16px; margin-bottom: 2px; }
.ma-mis { font-size: clamp(40px, 5vw, 76px); font-weight: 800; letter-spacing: -0.05em; text-transform: uppercase; text-shadow: -3px 1px 0 rgba(0,183,235,.55), 3px -1px 0 rgba(230,0,126,.55); }

.ma-build { margin: 0 var(--m); padding: clamp(40px, 7vw, 100px) clamp(16px, 6vw, 100px); background: #fff; }
.ma-build svg { display: block; width: 100%; max-width: 860px; height: auto; margin: 0 auto; overflow: visible; }
.ma-build .ma-reg { fill: none; stroke: #111; stroke-width: 2; }
.ma-build .ma-grid line { stroke: #dcdcd6; stroke-width: 0.15; }
.ma-build .ma-dim { stroke: #e6007e; stroke-width: 0.25; fill: none; }
.ma-build text { font: 500 1.6px/1 "Inter Tight", sans-serif; fill: #e6007e; letter-spacing: 0.02em; }

.ma-type { display: grid; grid-template-columns: 1.2fr 1fr; gap: var(--gap); padding: 0 var(--m); }
.ma-type > div { background: #fff; padding: clamp(24px, 3vw, 44px); display: grid; align-content: space-between; gap: 24px; min-height: clamp(260px, 30vw, 420px); }
.ma-type__name { font-family: "Bricolage Grotesque", sans-serif; font-variation-settings: "opsz" 96; font-weight: 800; font-size: clamp(90px, 13vw, 210px); line-height: 0.9; letter-spacing: -0.05em; }
.ma-type__aa { font-size: clamp(90px, 12vw, 190px); line-height: 0.9; letter-spacing: -0.04em; }
.ma-type__aa span { font-weight: 400; } .ma-type__aa span + span { font-weight: 500; } .ma-type__aa span + span + span { font-weight: 800; }
.ma-type p { font-size: 13px; font-weight: 500; text-transform: uppercase; color: var(--grey); }
.ma-type p b { display: block; color: var(--ink); font-size: 16px; text-transform: none; }

.ma-colors { display: grid; grid-template-columns: 2fr 1.4fr 1fr 1fr 1fr 1fr; gap: var(--gap); padding: 0 var(--m); }
.ma-sw { display: flex; flex-direction: column; justify-content: flex-end; min-height: clamp(160px, 20vw, 300px); padding: 14px; font-size: 12px; font-weight: 500; letter-spacing: 0.03em; text-transform: uppercase; }
.ma-sw b { font-size: 15px; letter-spacing: 0; text-transform: none; }

.ma-strip { display: grid; grid-auto-flow: column; grid-auto-columns: clamp(280px, 34vw, 520px); gap: var(--gap); overflow-x: auto; padding: 4px var(--m) 20px; scroll-snap-type: x mandatory; scrollbar-width: thin; }
.ma-step { margin: 0; scroll-snap-align: start; }
.ma-step img { display: block; width: 100%; height: auto; aspect-ratio: 16 / 10; object-fit: cover; object-position: top; border: 1px solid var(--rule); }
.ma-step figcaption { margin-top: 10px; font-size: 14px; line-height: 1.35; color: var(--grey); }
.ma-step figcaption b { display: block; color: var(--ink); font-size: 13px; font-weight: 500; text-transform: uppercase; letter-spacing: 0.02em; }

.ma-live { display: grid; grid-template-columns: 1fr auto; gap: clamp(24px, 4vw, 64px); align-items: end; padding: 0 calc(var(--m) + 4%); }
.ma-live > div:first-child { width: 100%; min-width: 0; }
.ma-live .laptop__screen { padding: 2% 2% 2.6%; }
.ma-frame { position: relative; width: 100%; height: 100%; overflow: hidden; background: #f2f2f0; }
.ma-frame iframe { position: absolute; top: 0; left: 0; border: 0; transform-origin: 0 0; }
.ma-live .phone { width: clamp(200px, 16vw, 240px); }
.ma-live .phone__screen { overflow: hidden; }
.ma-hint { display: block; margin-top: 12px; font-size: 13px; color: var(--grey); }
@media (max-width: 760px) {
  .ma-gloss { grid-template-columns: 1fr 1fr; }
  .ma-type { grid-template-columns: 1fr; }
  .ma-colors { grid-template-columns: 1fr 1fr; }
  .ma-live { grid-template-columns: 1fr; justify-items: center; }
}

/* Facts row and figure captions: quieter, all project pages */
.project__meta dd { font-size: 14px; font-weight: 400; font-style: italic; color: #3d3d38; }
.project figcaption, .project .jr-cap { font-size: 11px; letter-spacing: 0.08em; }
.project .ma-step figcaption { font-size: 14px; letter-spacing: 0; }
/* a how-to line under a chapter text */
.sg-chapter .jr-hint { margin-top: 12px; font-size: 16px; font-weight: 400; font-style: italic; letter-spacing: 0; color: var(--grey); }

/* JORGE REVILLA, round 2 */
/* Brand: a short text with polaroids scattered on the right */
.jr-brand { display: grid; grid-template-columns: 4fr 8fr; gap: 16px; align-items: center; padding: clamp(80px, 10vw, 160px) var(--m) 0; }
.jr-brand h2 { font-size: clamp(32px, 3.4vw, 52px); font-weight: 500; line-height: 1; letter-spacing: -0.035em; text-transform: uppercase; }
.jr-brand p { margin-top: 18px; font-size: clamp(20px, 1.8vw, 28px); font-weight: 500; line-height: 1.25; letter-spacing: -0.02em; max-width: 30ch; }
.jr-polas { display: grid; grid-template-columns: repeat(4, 1fr); gap: clamp(8px, 1.4vw, 20px); padding: 24px 0; }
.jr-pola { margin: 0; padding: 8px 8px 0; background: #fff; box-shadow: 0 1px 2px rgba(17, 17, 17, 0.08), 0 18px 34px -18px rgba(17, 17, 17, 0.35); transform: rotate(var(--r)) translateY(var(--y)); }
.jr-pola:nth-child(1) { --r: -4deg; --y: 6%; }
.jr-pola:nth-child(2) { --r: 2.5deg; --y: -8%; }
.jr-pola:nth-child(3) { --r: -1.5deg; --y: 10%; }
.jr-pola:nth-child(4) { --r: 4deg; --y: -4%; }
.jr-pola img { display: block; width: 100%; aspect-ratio: 1; object-fit: cover; }
.project .jr-pola figcaption { margin: 0; padding: 8px 2px 10px; font-size: 11px; font-weight: 500; letter-spacing: 0.08em; text-transform: uppercase; color: var(--grey); }
@media (hover: hover) and (pointer: fine) {
  .jr-pola { transition: transform 500ms var(--ease-out); }
  .jr-pola:hover { transform: rotate(0deg) translateY(var(--y)) scale(1.04); z-index: 1; }
}

/* packaging: four tiles, all the same 4:5 frame, the video cropped to match */
.jr-pack { grid-template-columns: repeat(4, 1fr); }
.jr-pack video { aspect-ratio: 4 / 5; }

/* catalogue: smaller */
.jr-book { max-width: 820px; }

/* social: one slim phone, the three moments listed beside it */
.jr-social { align-items: center; gap: clamp(32px, 8vw, 140px); }
.jr-steps { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; counter-reset: s; }
.jr-steps li { counter-increment: s; display: flex; align-items: baseline; gap: 12px; font-size: clamp(22px, 2.2vw, 34px); font-weight: 500; letter-spacing: -0.03em; text-transform: uppercase; color: #c4c4be; transition: color 400ms ease; }
.jr-steps li::before { content: "0" counter(s); font-size: 12px; letter-spacing: 0.06em; }
.jr-steps li.is-on { color: var(--ink); }
.jr .phone { width: clamp(220px, 16vw, 250px); padding: 3px; background: #19191b; border-radius: 40px; box-shadow: 0 0 0 1px #9c9ca2, 0 30px 60px -32px rgba(17, 17, 17, 0.4); }
.jr .phone::before { top: 10px; width: 28%; height: 19px; border-radius: 10px; }
.jr .phone__screen { border-radius: 37px; overflow: hidden; }
.ig { position: relative; background: #fff; font: 11px/1.35 system-ui, -apple-system, sans-serif; color: #111; }
.ig-feed { transition: transform 1600ms cubic-bezier(0.45, 0, 0.2, 1); }
.ig .ig-head { padding: 44px 12px 10px; font-size: 11px; }
.ig-avatar { display: grid; place-items: center; flex: none; width: 56px; height: 56px; border-radius: 50%; padding: 2px; background: conic-gradient(from 200deg, #f9ce34, #ee2a7b, #6228d7, #f9ce34); }
.ig-avatar img { width: 100%; height: 100%; padding: 9px 6px; border: 2px solid #fff; border-radius: 50%; background: #fff; object-fit: contain; }
.ig-avatar--s { width: 26px; height: 26px; padding: 1.5px; }
.ig-avatar--s img { padding: 3px 2px; border-width: 1.5px; }
.ig .ig-head b { font-size: 13px; }
.ig .ig-grid { gap: 1.5px; }
.ig .ig-tile { display: block; aspect-ratio: 4 / 5; overflow: hidden; background: #f1f1f1; }
/* post view slides in over the feed; its photo swipes to the next post */
.ig-post, .ig-stories { position: absolute; inset: 0; z-index: 2; opacity: 0; visibility: hidden; transition: opacity 350ms ease, transform 450ms var(--ease-out), visibility 0s 450ms; }
.ig-post { display: flex; flex-direction: column; background: #fff; transform: translateY(14px); }
.ig.is-post .ig-post, .ig.is-stories .ig-stories { opacity: 1; visibility: visible; transform: none; transition: opacity 350ms ease, transform 450ms var(--ease-out); }
.ig-post__bar { display: flex; justify-content: space-between; align-items: center; padding: 42px 12px 6px; font-size: 12px; }
.ig-post__bar span { width: 20px; font-size: 18px; line-height: 1; }
.ig-post__who { display: flex; align-items: center; gap: 8px; padding: 6px 10px; font-size: 11px; }
.ig-post__img { position: relative; aspect-ratio: 4 / 5; overflow: hidden; }
.ig-post__img img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform 600ms var(--ease-out); }
.ig-post__img img + img { transform: translateX(100%); }
.ig-post.is-next .ig-post__img img:first-child { transform: translateX(-100%); }
.ig-post.is-next .ig-post__img img + img { transform: none; }
.ig-post__act { display: flex; gap: 12px; padding: 8px 10px 2px; font-size: 16px; }
.ig-post__cap { padding: 2px 10px; }
/* stories: progress bars, the reel playing, one after another */
.ig-stories { background: #000; transform: scale(0.94); }
.ig-stories video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; transition: opacity 250ms ease; }
.ig-stories video.is-on { opacity: 1; }
.ig-stories__bars { position: absolute; z-index: 2; top: 36px; left: 10px; right: 10px; display: flex; gap: 3px; }
.ig-stories__bars i { flex: 1; height: 2px; border-radius: 2px; background: rgba(255, 255, 255, 0.35); overflow: hidden; }
.ig-stories__bars b { display: block; width: 0; height: 100%; background: #fff; }
.ig-stories__who { position: absolute; z-index: 2; top: 46px; left: 10px; display: flex; align-items: center; gap: 8px; color: #fff; font-size: 11px; text-shadow: 0 1px 3px rgba(0, 0, 0, 0.4); }
/* the "finger" that taps */
.ig-tap { position: absolute; z-index: 5; width: 34px; height: 34px; margin: -17px 0 0 -17px; border-radius: 50%; background: rgba(255, 255, 255, 0.55); box-shadow: 0 0 0 1px rgba(17, 17, 17, 0.15); opacity: 0; pointer-events: none; }
.ig-tap.is-on { animation: ig-tap 700ms var(--ease-out); }
@keyframes ig-tap { 0% { opacity: 0; transform: scale(1.6); } 35% { opacity: 1; transform: scale(0.8); } 100% { opacity: 0; transform: scale(1.2); } }

/* emails: fixed frames showing the top of each one, no inner scroll */
.jr-mails { display: block; padding: 0 var(--m); }
.jr-mails__track { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--gap); }
.jr-mail { margin: 0; }
.jr-mail__frame { position: relative; height: clamp(460px, 52vw, 780px); overflow: hidden; background: #fff; border: 1px solid #e2e2de; }
.jr-mail__frame::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 90px; background: linear-gradient(rgba(255, 255, 255, 0), #fff); }
.jr-mails__nav { display: none; }

@media (max-width: 760px) {
  .jr-brand { grid-template-columns: 1fr; }
  .jr-polas { grid-template-columns: 1fr 1fr; gap: 18px 14px; padding: 8px 6px 0; }
  .jr-pack { grid-template-columns: 1fr 1fr; }
  .jr-pack .jr-pack__video { grid-column: auto; max-width: none; margin: 0; }
  .jr-social { flex-direction: column; gap: 24px; }
  .jr-steps { display: flex; gap: 18px; }
  .jr-steps li { font-size: 18px; }
  .jr-mails__track { display: flex; gap: 0; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; }
  .jr-mails__track::-webkit-scrollbar { display: none; }
  .jr-mail { flex: 0 0 100%; scroll-snap-align: start; padding: 0 2px; }
  .jr-mail__frame { height: min(150vw, 1000px); }
  .jr-mails__nav { display: flex; justify-content: flex-end; align-items: center; gap: 8px; margin-top: 12px; font-size: 14px; font-weight: 500; font-variant-numeric: tabular-nums; }
  .jr-mails__nav button { min-width: 44px; min-height: 44px; background: var(--ink); color: #fff; font-size: 18px; }
  .jr-mails__nav button:disabled { opacity: 0.3; cursor: default; }
}
.jr .sg-chapter h2 { padding-right: 24px; }
@media (max-width: 760px) { .jr .jr-mail__frame { height: min(175vw, 1100px); } }

/* round 3: lighter running text, so it reads apart from the titles (all project pages) */
.project .story p, .project .sg-chapter p { font-size: clamp(18px, 1.45vw, 22px); font-weight: 400; line-height: 1.45; letter-spacing: -0.01em; max-width: 50ch; }
.project .sg-chapter .jr-hint { font-size: 15px; }
/* JR chapters: the text sits under its title */
.jr .sg-chapter { grid-template-columns: 1fr; gap: 14px; }
/* Brand: more air between the text and the polaroids */
.jr-brand { column-gap: clamp(48px, 8vw, 140px); }
.jr-brand p { font-size: clamp(18px, 1.45vw, 22px); font-weight: 400; line-height: 1.45; letter-spacing: -0.01em; }
/* Catalogue: text on the left, a pile of A4 sheets on the right */
.jr-cat { display: grid; grid-template-columns: 5fr 7fr; gap: clamp(40px, 6vw, 120px); align-items: center; padding: clamp(80px, 10vw, 160px) var(--m) 0; }
.jr-cat h2 { font-size: clamp(32px, 3.4vw, 52px); font-weight: 500; line-height: 1; letter-spacing: -0.035em; text-transform: uppercase; }
.jr-cat p { margin-top: 14px; font-size: clamp(18px, 1.45vw, 22px); line-height: 1.45; letter-spacing: -0.01em; max-width: 40ch; }
.jr-cat .jr-hint { font-size: 15px; font-style: italic; color: var(--grey); letter-spacing: 0; }
.jr-cat .jr-book__nav { margin-top: 28px; }
.jr-pile { position: relative; justify-self: center; width: min(100%, 420px); aspect-ratio: 900 / 1272; perspective: 1600px; outline-offset: 8px; cursor: grab; }
.jr-sheet { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; background: #fff; box-shadow: 0 1px 2px rgba(17, 17, 17, 0.1), 0 22px 40px -24px rgba(17, 17, 17, 0.45); transform-origin: 0 50%; transition: transform 700ms var(--ease-out), opacity 500ms ease; user-select: none; -webkit-user-drag: none; }
.jr-sheet[data-d="x"] { opacity: 0; visibility: hidden; transition: none; }
.jr-sheet[data-d="0"] { z-index: 3; transform: none; }
.jr-sheet[data-d="1"] { z-index: 2; transform: translate(10px, 8px) rotate(2deg); }
.jr-sheet[data-d="2"] { z-index: 1; transform: translate(-8px, 14px) rotate(-2.5deg); }
.jr-sheet[data-d="out"] { z-index: 4; opacity: 0; transform: rotateY(-80deg) translateX(-12%); transition: transform 800ms cubic-bezier(0.45, 0, 0.2, 1), opacity 500ms ease 300ms; }
.jr-sheet.is-back { animation: jr-sheet-back 700ms var(--ease-out); }
@keyframes jr-sheet-back { from { opacity: 0; transform: rotateY(-80deg) translateX(-12%); } }
@media (max-width: 760px) {
  .jr-cat { grid-template-columns: 1fr; }
  .jr-pile { width: min(78%, 340px); }
}

.jr .shot--cover { aspect-ratio: 5 / 2; }
@media (max-width: 760px) { .jr .shot--cover { aspect-ratio: 4 / 5; } }

/* NØRDIQ round 2: colour collage, editorial, boxes and keys, social posts over a blurred photo */
.nq-collage { display: grid; grid-template-columns: repeat(5, 1fr); grid-auto-rows: clamp(170px, 16vw, 250px); }
.nq-collage > * { position: relative; overflow: hidden; }
.nq-collage img { display: block; width: 100%; height: 100%; object-fit: cover; }
.nq-sw { display: flex; flex-direction: column; justify-content: flex-end; padding: clamp(12px, 1.6vw, 22px); font-size: 12px; font-weight: 500; letter-spacing: 0.04em; text-transform: uppercase; }
.nq-sw span { font: 400 12px/1.3 ui-monospace, "SF Mono", Menlo, monospace; letter-spacing: 0.02em; opacity: 0.85; }
.nq-sw--2 { grid-column: span 2; }
.nq-wide { margin: 0; padding: 0 var(--m); }
.nq-wide img { display: block; width: 100%; height: auto; }
.nq-trio { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--gap); padding: 0 var(--m); }
.nq-trio figure, .nq-wide figure { margin: 0; }
.nq-trio img { display: block; width: 100%; aspect-ratio: 4 / 5; object-fit: cover; background: var(--card); }
.nq-trio figcaption, .nq-wide figcaption, .nq-social-wrap figcaption { display: block; margin-top: 10px; font-size: 11px; font-weight: 500; letter-spacing: 0.08em; text-transform: uppercase; color: var(--grey); }
.nq-gap { margin-top: var(--gap); }
.nq-cover { aspect-ratio: 5 / 2; }
.nq-rooms img { aspect-ratio: 1; }
.nq-social-wrap { margin: 0 var(--m); }
.nq-social { position: relative; overflow: hidden; padding: clamp(48px, 7vw, 110px) clamp(16px, 4vw, 64px); background: #1d2533; }
.nq-social__bg { position: absolute; inset: -60px; background-size: cover; background-position: center; filter: blur(22px) brightness(0.55); }
.nq-posts { position: relative; display: flex; justify-content: center; align-items: center; gap: clamp(10px, 1.6vw, 22px); }
.nq-post { flex: 1 1 0; max-width: 250px; background: #fff; border-radius: 10px; overflow: hidden; box-shadow: 0 24px 50px -24px rgba(0, 0, 0, 0.6); }
.nq-post--story { max-width: 230px; }
.nq-post__bar { display: flex; align-items: center; gap: 6px; padding: 7px 9px; font: 600 10px/1 system-ui, -apple-system, sans-serif; color: #111; }
.nq-post__bar i { display: grid; place-items: center; width: 16px; height: 16px; border-radius: 50%; background: #233a5c; color: #f0ede8; font: 400 10px/1 system-ui, sans-serif; font-style: normal; }
.nq-post__bar b { margin-left: auto; letter-spacing: 1px; color: #bbb; font-weight: 600; }
.nq-post img { display: block; width: 100%; aspect-ratio: 4 / 5; object-fit: cover; }
.nq-post--story img { aspect-ratio: 9 / 16; }
@media (max-width: 760px) {
  .nq-collage { grid-template-columns: 1fr 1fr; grid-auto-rows: 130px; }
  .nq-cover { aspect-ratio: 4 / 5; }
  .nq-trio { grid-template-columns: 1fr 1fr; }
  .nq-trio figure:nth-child(3) { grid-column: 1 / -1; }
  .nq-rooms figure:nth-child(3) img { aspect-ratio: 2 / 1; }
  .nq-trio figure:nth-child(3) img { aspect-ratio: 6 / 5; }
  .nq-social-wrap { margin: 0; }
  .nq-social { padding: 40px 0; }
  .nq-posts { justify-content: flex-start; overflow-x: auto; scroll-snap-type: x mandatory; padding: 0 16px; scrollbar-width: none; }
  .nq-posts::-webkit-scrollbar { display: none; }
  .nq-post { flex: 0 0 62%; max-width: none; scroll-snap-align: center; }
  .nq-post--story { flex-basis: 56%; }
}

/* NØRDIQ: the place as a sideways carousel */
.nq-car { margin: 0; padding: 0 0 0 var(--m); }
.nq-car__track { display: flex; gap: var(--gap); overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; padding-right: var(--m); }
.nq-car__track::-webkit-scrollbar { display: none; }
.nq-car__track img { flex: 0 0 clamp(250px, 30vw, 440px); width: clamp(250px, 30vw, 440px); aspect-ratio: 4 / 5; object-fit: cover; scroll-snap-align: start; background: var(--card); }
.nq-car__bar { display: flex; justify-content: space-between; align-items: center; gap: 12px; margin-top: 12px; padding-right: var(--m); }
.nq-car__bar figcaption { font-size: 11px; font-weight: 500; letter-spacing: 0.08em; text-transform: uppercase; color: var(--grey); }
.nq-car__nav { display: flex; gap: 8px; }
.nq-car__nav button { min-width: 44px; min-height: 44px; background: var(--ink); color: #fff; font-size: 18px; }
.nq-car__nav button:disabled { opacity: 0.3; cursor: default; }
.sg-chapter .nq-hint { margin-top: 12px; font-size: 15px; font-weight: 400; font-style: italic; letter-spacing: 0; color: var(--grey); }
@media (max-width: 760px) { .nq-car__track img { flex-basis: 78vw; width: 78vw; } }

/* ST. round 2: colour cover with the logo small at the bottom, posters with arrows, the feed over a blurred photo */
.st-cover { place-items: end center; }
.st-cover__bg { filter: none; }
.st-cover__mark { z-index: 1; width: min(26%, 300px); margin-bottom: clamp(24px, 4vw, 56px); gap: clamp(6px, 0.8vw, 12px); }
.st-cover__tag { font-size: clamp(10px, 1vw, 15px); }
button, .jr-book__stage { touch-action: manipulation; }
.st-wall { scrollbar-width: none; }
.st-wall::-webkit-scrollbar { display: none; }
.st-wall__bar { display: flex; justify-content: flex-end; padding: 0 var(--m); }
.st-wall__bar button { min-width: 44px; min-height: 44px; margin-left: 8px; background: var(--ink); color: #fff; font-size: 18px; }
.st-wall__bar button:disabled { opacity: 0.3; cursor: default; }
.st-feedwrap { margin: 0 var(--m); }
.st-feedwrap figcaption { display: block; margin-top: 14px; font-size: 11px; font-weight: 500; letter-spacing: 0.08em; text-transform: uppercase; color: var(--grey); }
.st-feed { position: relative; overflow: hidden; padding: clamp(40px, 7vw, 110px) 16px; background: #2d2926; }
.st-feed__bg { position: absolute; inset: -60px; background-size: cover; background-position: center; filter: blur(26px) brightness(0.5); transform: scale(1.05); }
.st-feed__ui { position: relative; width: min(560px, 100%); margin: 0 auto; color: #fff; font: 13px/1.4 system-ui, -apple-system, sans-serif; }
.st-feed__head { display: flex; align-items: center; gap: clamp(16px, 3vw, 28px); }
.st-feed__avatar { display: grid; place-items: center; flex: none; width: clamp(72px, 12vw, 104px); aspect-ratio: 1; border-radius: 50%; background: #fff; box-shadow: 0 0 0 3px #ff5100; }
.st-feed__avatar img { width: 46%; height: auto; }
.st-feed__name b { display: block; font-size: clamp(16px, 2vw, 20px); font-weight: 600; }
.st-feed__stats { display: flex; gap: clamp(14px, 3vw, 32px); margin-top: 8px; font-size: 12px; opacity: 0.85; }
.st-feed__stats b { display: block; font-size: 16px; font-weight: 600; }
.st-feed__bio { margin-top: 16px; opacity: 0.9; }
.st-feed__btns { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 16px; }
.st-feed__btns span { display: grid; place-items: center; min-height: 34px; border-radius: 9px; font-weight: 600; background: rgba(255, 255, 255, 0.14); }
.st-feed__btns span:first-child { background: #ff5100; color: #2d2926; }
.st-feed__hl { display: flex; gap: clamp(14px, 3.4vw, 26px); margin: 22px 0 0; padding: 0; list-style: none; font-size: 11px; text-align: center; }
.st-feed__hl img { display: block; width: clamp(54px, 9vw, 66px); aspect-ratio: 1; margin-bottom: 6px; border-radius: 50%; object-fit: cover; box-shadow: 0 0 0 2px #ff5100, 0 0 0 4px rgba(255, 255, 255, 0.15); }
.st-feed__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 3px; margin-top: 24px; }
.st-tile { position: relative; aspect-ratio: 4 / 5; overflow: hidden; background: #3a3633; }
.st-tile img, .st-tile video { display: block; width: 100%; height: 100%; object-fit: cover; }
.st-tile svg { position: absolute; top: 8px; right: 8px; width: 16px; height: 16px; fill: none; stroke: #fff; stroke-width: 2; filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.4)); }
@media (max-width: 760px) {
  .st-cover__mark { width: 52%; }
  .st-feedwrap { margin: 0; }
  .st-feed { padding: 36px 14px; }
}

/* a white cover gets a hairline so it does not melt into the paper */
.work__img--line img { outline: 1px solid #cfcfc8; outline-offset: -1px; }

/* maría round 2: the construction drawing builds itself; the launch film */
@media (prefers-reduced-motion: no-preference) {
  .ma-build.is-in .ma-grid line { animation: ma-fade 9s ease infinite both; }
  .ma-build.is-in .ma-reg circle, .ma-build.is-in .ma-reg path { stroke-dasharray: 1; animation: ma-draw 9s cubic-bezier(0.77, 0, 0.175, 1) infinite both; }
  .ma-build.is-in .ma-ink { transform-box: fill-box; transform-origin: 50% 100%; animation: ma-ink 9s cubic-bezier(0.23, 1, 0.32, 1) infinite both; animation-delay: calc(var(--i) * 220ms); }
  .ma-build.is-in .ma-dim, .ma-build.is-in text { animation: ma-dims 9s ease infinite both; }
}
@keyframes ma-fade { 0% { opacity: 0; } 8%, 88% { opacity: 1; } 96%, 100% { opacity: 0; } }
@keyframes ma-draw { 0%, 6% { stroke-dashoffset: 1; opacity: 1; } 26%, 88% { stroke-dashoffset: 0; opacity: 1; } 96%, 100% { stroke-dashoffset: 0; opacity: 0; } }
@keyframes ma-ink { 0%, 28% { transform: scaleY(0); opacity: 0; } 36%, 88% { transform: none; opacity: 1; } 96%, 100% { transform: none; opacity: 0; } }
@keyframes ma-dims { 0%, 50% { opacity: 0; } 60%, 88% { opacity: 1; } 96%, 100% { opacity: 0; } }

.ma-promo { position: relative; margin: 0 var(--m); aspect-ratio: 16 / 9; overflow: hidden; background: #e9e9e5; }
.ma-promo .crop { position: absolute; z-index: 3; width: 22px; height: 22px; fill: none; stroke: #111; stroke-width: 1; }
.ma-promo .crop--tl { top: 14px; left: 14px; } .ma-promo .crop--tr { top: 14px; right: 14px; transform: scaleX(-1); }
.ma-promo .crop--bl { bottom: 14px; left: 14px; transform: scaleY(-1); } .ma-promo .crop--br { bottom: 14px; right: 14px; transform: scale(-1); }
.ma-sc { position: absolute; inset: 0; display: grid; place-items: center; opacity: 0; transition: opacity 700ms ease; }
.ma-sc.is-on { opacity: 1; }
.ma-sc__card { text-align: center; }
.ma-sc__card .ma-name { display: block; font-family: "Bricolage Grotesque", "Inter Tight", sans-serif; font-weight: 800; font-size: clamp(56px, 11vw, 170px); line-height: 0.9; letter-spacing: -0.05em; text-shadow: var(--mis-big); }
.ma-sc__card p { margin-top: clamp(10px, 1.6vw, 22px); font-size: clamp(12px, 1.3vw, 18px); font-weight: 500; letter-spacing: 0.06em; text-transform: uppercase; }
.ma-sc__card p span { color: var(--grey); }
.ma-sc__bar { display: inline-flex; margin-top: 16px; } .ma-sc__bar i { width: 18px; height: 12px; }
.ma-sc .laptop { width: min(66%, 900px); }
.ma-sc .laptop__screen { overflow: hidden; }
.ma-scroll { position: relative; height: 100%; overflow: hidden; background: #f2f2f0; }
.ma-scroll img { display: block; width: 100%; height: auto; transform: translateY(0); }
.ma-sc .phone { width: clamp(150px, 18%, 230px); }
.ma-sc .phone__screen { overflow: hidden; }
.ma-sc__tag { position: absolute; left: clamp(44px, 4.4vw, 64px); bottom: clamp(18px, 2.6vw, 38px); font-size: clamp(11px, 1vw, 14px); font-weight: 500; letter-spacing: 0.06em; text-transform: uppercase; }
.ma-sc__tag b { color: var(--grey); font-weight: 500; margin-right: 8px; }
.ma-promo__bar { position: absolute; z-index: 3; right: clamp(44px, 4.4vw, 64px); bottom: clamp(18px, 2.6vw, 38px); display: flex; gap: 3px; }
.ma-promo__bar i { width: 14px; height: 4px; background: #c9c9c3; }
.ma-promo__bar i.is-on { background: #111; }
@media (max-width: 760px) {
  .ma-promo { margin: 0; aspect-ratio: 4 / 5; }
  .ma-sc .laptop { width: 88%; }
  .ma-sc .phone { width: 46%; }
}

/* SINGULARU round 2: «Can you feel it?» */
.sg2-trio { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--gap); padding: 0 var(--m); }
.sg2-trio figure, .sg2-duo figure, .sg2-web { margin: 0; }
.sg2-trio img, .sg2-trio video { display: block; width: 100%; aspect-ratio: 4 / 5; object-fit: cover; background: var(--card); }
.sg2-duo { display: grid; grid-template-columns: 1fr 1fr; gap: var(--gap); padding: 0 var(--m); }
.sg2-duo img { display: block; width: 100%; aspect-ratio: 4 / 5; object-fit: cover; background: var(--card); }
.sg2-duo--flyer img { aspect-ratio: auto; object-fit: contain; background: #ece9e6; padding: clamp(16px, 4vw, 56px); }
.sg2-trio figcaption, .sg2-duo figcaption, .sg2-web figcaption { display: block; margin-top: 10px; font-size: 11px; font-weight: 500; letter-spacing: 0.08em; text-transform: uppercase; color: var(--grey); }
.sg2-phase { padding: clamp(56px, 7vw, 100px) var(--m) clamp(20px, 2.4vw, 32px); display: grid; grid-template-columns: 4fr 8fr; gap: 16px; }
.sg2-phase h3 { font-size: clamp(20px, 1.8vw, 26px); font-weight: 500; letter-spacing: -0.02em; }
.sg2-phase p { font-size: clamp(16px, 1.25vw, 19px); line-height: 1.45; color: var(--grey); max-width: 52ch; }
.sg2-web { max-width: 1040px; margin: 0 auto; padding: 0 calc(var(--m) + 5%); }
.sg2-web .laptop__screen { overflow: hidden; }
.sg2-web .laptop__screen img { display: block; width: 100%; height: 100%; object-fit: cover; }
.sg2-web a { display: block; }
.sg-chapter .sg2-hint { margin-top: 12px; font-size: 15px; font-weight: 400; font-style: italic; letter-spacing: 0; color: var(--grey); }
@media (max-width: 760px) {
  .sg2-trio { grid-template-columns: 1fr 1fr; }
  .sg2-trio figure:first-child { grid-column: 1 / -1; }
  .sg2-trio figure:first-child img, .sg2-trio figure:first-child video { aspect-ratio: 1; }
  .sg2-phase { grid-template-columns: 1fr; gap: 8px; }
}

/* ---------- pointer: the registration mark (desktop only) ---------- */
html.has-cursor, html.has-cursor * { cursor: none !important; }
.cursor { position: fixed; top: 0; left: 0; z-index: 100; width: 28px; height: 28px; margin: -14px 0 0 -14px; pointer-events: none; opacity: 0; mix-blend-mode: difference; will-change: transform; }
.cursor.is-on { opacity: 1; }
.cursor svg { width: 100%; height: 100%; fill: none; stroke: #fff; stroke-width: 1.6; overflow: visible; transition: transform 450ms var(--ease-out); }
.cursor.is-hover svg { transform: scale(1.6) rotate(45deg); }
.cursor.is-down svg { transform: scale(0.8); }

/* ---------- contact + footer ---------- */
.contact { padding: clamp(120px, 14vw, 240px) var(--m) 0; }
.contact__big {
  display: block; font-size: clamp(56px, 13.5vw, 260px); font-weight: 800;
  line-height: 0.85; letter-spacing: -0.065em; text-transform: uppercase; white-space: nowrap;
  position: relative; z-index: 1; padding-bottom: 0.16em; /* room for the tail of ¿, above the footer */
  transition: text-shadow 400ms var(--ease-out);
}
@media (hover: hover) and (pointer: fine) { .contact__big:hover { text-shadow: var(--mis-big); } }
/* Touch screens have no hover: keep the misregistration printed on the big words */
@media (hover: none) {
  .contact__big, .menu a, .next__name { text-shadow: var(--mis-big); }
}

.foot { display: flex; justify-content: space-between; align-items: baseline; flex-wrap: wrap; gap: 12px 24px; padding: 28px var(--m); font-size: 14px; font-weight: 500; text-transform: uppercase; }
.foot__links { display: flex; flex-wrap: wrap; gap: 24px; }
.foot__links a { transition: text-shadow 400ms var(--ease-out); }
@media (hover: hover) and (pointer: fine) { .foot__links a:hover { text-shadow: var(--mis-small); } }

/* ---------- motion ----------
   Functional motion always runs (Windows often reports reduced motion unasked).
   Intrusive motion — the changing window, the shapes following the pointer — is gated in main.js. */
.js .mark > :not(.mark__name), .js .tagline { opacity: 0; translate: 0 16px; transition: opacity 800ms ease, translate 1000ms var(--ease-out); transition-delay: calc(var(--i, 0) * 120ms + 150ms); }
.js.is-loaded .mark > :not(.mark__name), .js.is-loaded .tagline { opacity: 1; translate: 0 0; }

.js [data-rise] { opacity: 0; translate: 0 24px; transition: opacity 800ms ease, translate 1000ms var(--ease-out); transition-delay: var(--d, 0ms); }
.js [data-rise].is-in { opacity: 1; translate: 0 0; }
.js .tile .tile__img { clip-path: inset(100% 0 0 0); transition: clip-path 1200ms var(--ease-in-out); transition-delay: var(--d, 0ms); }
.js .tile.is-in .tile__img { clip-path: inset(0 0 0 0); }

.js .contact__big { filter: blur(18px); opacity: 0.4; transition: filter 1200ms var(--ease-out), opacity 1200ms ease, text-shadow 400ms var(--ease-out); }
.js .contact__big.is-in { filter: blur(0); opacity: 1; }

.menu li a { transition: text-shadow 400ms var(--ease-out), transform 700ms var(--ease-out); }
.menu:not(.is-open) li a { transform: translateY(110%); }
.menu.is-open li:nth-child(2) a { transition-delay: 60ms; }
.menu.is-open li:nth-child(3) a { transition-delay: 120ms; }
.menu.is-open li:nth-child(4) a { transition-delay: 180ms; }

.window img { transition: opacity 400ms ease; }
.js .print > * { opacity: 0; transition: opacity 700ms ease 300ms; }
.js .crop path { stroke-dasharray: 15; stroke-dashoffset: 15; transition: stroke-dashoffset 800ms var(--ease-out) 300ms; }
.js.is-loaded .print > * { opacity: 1; }
.js.is-loaded .crop path { stroke-dashoffset: 0; }
.now span { transition: transform 450ms var(--ease-out), opacity 300ms ease; }
.now.is-swapping span { transform: translateY(-100%); opacity: 0; transition-duration: 220ms; }

/* Safety net: the first screen can never stay hidden. */
.js .mark > :not(.mark__name), .js .tagline, .js .print > * { animation: failsafe-show 1ms 4s forwards; }
.js .plate { animation: failsafe-plate 1ms 4.5s forwards; }
@keyframes failsafe-plate { to { opacity: 1; transform: none; } }
.js .crop path { animation: failsafe-draw 1ms 4s forwards; }
@keyframes failsafe-draw { to { stroke-dashoffset: 0; } }
@keyframes failsafe-show { to { opacity: 1; translate: 0 0; scale: 1; } } /* leaves transform free for the pointer spring */

@media (prefers-reduced-motion: reduce) {
  .js [data-rise] { translate: 0 8px; }
  .js .contact__big { filter: none; }
}

/* ---------- tablet and phone ---------- */
@media (max-width: 900px) {
  .index[data-view="grid"] { grid-template-columns: 1fr 1fr; }
  .about { grid-template-columns: 1fr; }
  .me { grid-template-columns: 1fr; }
  .me__photo { max-width: 460px; }
  .about__photo { width: min(320px, 70%); }
}
@media (max-width: 600px) {
  .hero { padding-top: 84px; }
  .mark__name { font-size: 22vw; }
  .print { inset: 64px 12px 12px; }
  .window { width: 52vw; }
  .grid { grid-template-columns: 1fr; gap: 36px; }
  .ticket__grid { grid-template-columns: 1fr; }
  .ticket-wrap { padding: 20px; }
  .index[data-view="grid"] { grid-template-columns: 1fr; gap: 32px; }
  .index[data-view="list"] .work { grid-template-columns: 1fr auto; }
  .index[data-view="list"] .work__type { grid-row: 2; }
  .index[data-view="list"] .work__year { grid-row: 1; grid-column: 2; }
  .project__meta { grid-template-columns: 1fr 1fr; }
  .shot--cover { aspect-ratio: 4 / 5; }
  .gallery { grid-template-columns: 1fr; }
  .shot--wide { aspect-ratio: 4 / 3; }
  .story__row { grid-template-columns: 1fr; gap: 8px; }
  .next__img { display: none; }
  .route__list { --x: 13px; }
  .stop { grid-template-columns: 28px 1fr; column-gap: 16px; }
  .stop__years { grid-column: 2; grid-row: 1; font-size: 18px; }
  .stop__mark { grid-column: 1; grid-row: 1; }
  .stop__body { grid-column: 2; grid-row: 2; }
  .screening__sheet { padding: 14px; }
  .cv li { grid-template-columns: 1fr auto; }
  .cv li span:nth-child(2) { grid-row: 2; }
  .cv li span:last-child { grid-row: 1; grid-column: 2; }
  .contact__big { font-size: 15vw; }
  .foot { flex-direction: column; }
  .foot__links { width: 100%; flex-wrap: nowrap; justify-content: space-between; gap: 8px; font-size: 12px; }
  .sign { font-size: 18px; }
}