/* ==========================================================================
   adolfo izquierdo caballero
   Gallery-grey editorial system, per design.md (Vita Architecture reference).
   Serif: Cormorant Garamond (Hatton substitute) · Sans: DM Sans (Circular Std substitute).
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Tokens
   -------------------------------------------------------------------------- */
:root {
  /* colours */
  --blue: #5e8cff;
  --beige: #d2cabd;
  --celadon: #dfe6e0;
  --sage: #5d7b61;
  --ink: #000000;
  --white: #ffffff;
  --studio: #eeeeee;
  --paper: #fafafa;
  --linen: #f8f8f8;
  --stone: #c6c6c6;
  --silver: #b8b8b8;

  /* type families */
  --serif: 'Cormorant Garamond', 'Editorial New', Canela, Georgia, 'Times New Roman', serif;
  --sans: 'DM Sans', 'Söhne', Inter, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto,
    'Helvetica Neue', Arial, sans-serif;

  /* type scale (rem at 16px root; system scales by swapping root size) */
  --text-credits: 0.75rem;
  --text-meta: 0.8125rem;
  --text-body: 1rem;
  --text-label: 1.25rem;
  --text-arrow: 1.25rem;
  --text-fact-title: 1.5rem;
  --text-heading-sm: 2.5rem;
  --text-heading: 2.96875rem;
  --text-heading-lg: 3.4375rem;
  --text-quote: 2.5rem;
  --text-bio-title: 2.8125rem;
  --text-testimony: 2.8125rem;
  --text-fact-number: 7.8125rem;
  --text-display: 9.9375rem;

  --track-sans: -0.01em;
  --track-serif: -0.0182em;
  --track-stamp: -0.04em;

  /* layout */
  --header-h: 7.8125rem;
  --header-h-m: 5.625rem;
  --gutter: 3.125rem;
  --gutter-m: 1.6875rem;
  --sp-5: 0.3125rem;
  --sp-10: 0.625rem;
  --sp-15: 0.9375rem;
  --sp-20: 1.25rem;
  --sp-27: 1.6875rem;
  --sp-40: 2.5rem;
  --sp-50: 3.125rem;
  --sp-55: 3.4375rem;
  --sp-65: 4.0625rem;
  --sp-90: 5.625rem;
  --sp-110: 6.875rem;
  --sp-125: 7.8125rem;
  --sp-140: 8.75rem;
  --sp-200: 12.5rem;
  --sp-207: 12.9375rem;

  /* widths */
  --w-project-text: 28.75rem;
  --w-project-desc: 16.875rem;
  --w-testimony: 43.75rem;
  --w-facts: 66.25rem;
  --w-bio-para: 26.875rem;

  /* motion */
  --ease-out: cubic-bezier(0.19, 1, 0.22, 1);
  --ease-inout: cubic-bezier(0.76, 0, 0.24, 1);

  --curtain-bg: var(--white);
}

/* root size tiers: the whole system scales by swapping the rem unit */
@media (min-width: 1280px) and (max-width: 1439px) { html { font-size: 14px; } }
@media (min-width: 1024px) and (max-width: 1279px) { html { font-size: 11px; } }
@media (max-width: 1023px) { html { font-size: 16px; } }

/* --------------------------------------------------------------------------
   2. Reset & base
   -------------------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  margin: 0;
  background: var(--white);
  color: var(--ink);
  font-family: var(--sans);
  font-size: var(--text-body);
  font-weight: 400;
  line-height: 1.4;
  letter-spacing: var(--track-sans);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

h1, h2, h3, h4, p, figure, blockquote, ul, ol { margin: 0; padding: 0; }
ul, ol { list-style: none; }
img { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; }
svg { display: block; }
figure { margin: 0; }
address { font-style: normal; }

::selection { background: var(--blue); color: var(--white); }

:focus-visible { outline: 1px solid var(--ink); outline-offset: 4px; }
a:focus-visible, button:focus-visible { outline: 1px solid var(--blue); outline-offset: 4px; }

main { display: block; }

.skip-link {
  position: absolute; left: -9999px; top: 0; z-index: 200;
  background: var(--ink); color: var(--white); padding: 0.75rem 1.25rem;
  font-size: var(--text-meta); text-transform: uppercase;
}
.skip-link:focus { left: 0; }

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

/* --------------------------------------------------------------------------
   3. Shared type utilities
   -------------------------------------------------------------------------- */
.serif { font-family: var(--serif); font-weight: 400; }
.serif-light { font-family: var(--serif); font-weight: 300; }

.label {
  font-size: var(--text-label);
  line-height: 3.35;
  text-transform: uppercase;
  letter-spacing: var(--track-sans);
  color: var(--ink);
}
.label a:hover { color: var(--blue); }

.meta { font-size: var(--text-meta); line-height: 1.4; }

/* hatton heading sizes */
.h-sm { font-family: var(--serif); font-weight: 400; font-size: var(--text-heading-sm); line-height: 1.05; }
.h-md {
  font-family: var(--serif); font-weight: 400; font-size: var(--text-heading);
  line-height: 1.32; letter-spacing: var(--track-serif);
}
.h-lg {
  font-family: var(--serif); font-weight: 400; font-size: var(--text-heading-lg);
  line-height: 1.09; letter-spacing: var(--track-serif);
}
.h-quote { font-family: var(--serif); font-weight: 300; font-size: var(--text-quote); line-height: 1.125; }
.h-bio { font-family: var(--serif); font-weight: 300; font-size: var(--text-bio-title); line-height: 1.06; }
.h-testimony { font-family: var(--serif); font-weight: 300; font-size: var(--text-testimony); line-height: 1.11; }

.text-blue { color: var(--blue); }

/* --------------------------------------------------------------------------
   4. Arrow link · the only button pattern
   -------------------------------------------------------------------------- */
.arrow-link {
  display: inline-flex; flex-direction: column; align-items: flex-start; gap: 0.9rem;
  font-size: var(--text-arrow); line-height: 1; text-transform: uppercase;
  letter-spacing: var(--track-sans); color: var(--ink);
  cursor: pointer;
}
.arrow-link .arr {
  width: 1.15rem; height: 1.15rem; margin-left: auto;
  transition: transform 0.45s var(--ease-out);
}
.arrow-link .arr path { stroke: currentColor; }
.arrow-link:hover { color: var(--blue); }
.arrow-link:hover .arr { transform: translateX(0.35rem); }
.arrow-link.is-prev .arr { transform: scaleX(-1); margin-left: 0; margin-right: auto; }
.arrow-link.is-prev:hover .arr { transform: scaleX(-1) translateX(0.35rem); }
.arrow-link[aria-disabled='true'] { opacity: 0.35; pointer-events: none; }

/* --------------------------------------------------------------------------
   5. Reveal system (JS adds .in via IntersectionObserver)
   -------------------------------------------------------------------------- */
html.js [data-reveal='fade'] { opacity: 0; transform: translateY(1.5rem); }
html.js [data-reveal='fade'].in {
  opacity: 1; transform: none;
  transition: opacity 1s var(--ease-out) var(--d, 0s), transform 1.1s var(--ease-out) var(--d, 0s);
}
html.js [data-reveal='fade'].done { transition: none; }

html.js .ln { display: block; overflow: hidden; }
html.js .ln-i {
  display: block; transform: translateY(112%);
  transition: transform 1.1s var(--ease-out) var(--d, 0s);
  will-change: transform;
}
html.js [data-reveal].in .ln-i { transform: none; }

html.js .wd { display: inline-block; opacity: 0; transform: translateY(0.6em); }
html.js [data-reveal].in .wd { opacity: 1; transform: none; }
html.js .wd { transition: opacity 0.7s var(--ease-out) var(--d, 0s), transform 0.8s var(--ease-out) var(--d, 0s); }

html.js .maskbox .maskfill {
  position: absolute; inset: 0; z-index: 2; background: var(--mask, var(--paper));
  transform-origin: bottom; transition: transform 1.15s var(--ease-out) var(--d, 0s);
}
html.js .maskbox.in .maskfill { transform: scaleY(0); }
html.js .maskbox img, html.js .maskbox video, html.js .maskbox canvas {
  opacity: 0.001; transition: opacity 0.9s ease var(--d, 0s);
}
html.js .maskbox.in img, html.js .maskbox.in video, html.js .maskbox.in canvas { opacity: 1; }

html.js .rule { transform: scaleX(0); transform-origin: left; }
html.js .in > .rule, html.js .rule.in {
  transform: none; transition: transform 1.15s var(--ease-out) var(--d, 0s);
}

html.js .num-rise { opacity: 0; transform: translateY(-2.5rem); }
html.js .in > .num-rise, html.js .num-rise.in {
  opacity: 1; transform: none;
  transition: opacity 0.8s ease var(--d, 0s), transform 0.95s var(--ease-out) var(--d, 0s);
}

/* --------------------------------------------------------------------------
   6. Stamps (rotating circular text)
   -------------------------------------------------------------------------- */
.stamp { position: absolute; z-index: 3; }
.stamp__rot { display: block; transform: rotate(-216deg); transition: transform 1.1s var(--ease-out) 0.15s; }
.stamp.in .stamp__rot { transform: rotate(0deg); }
.stamp__idle { display: block; animation: stampspin 26s linear infinite; animation-play-state: paused; }
.stamp.in .stamp__idle { animation-play-state: running; }
.stamp:hover .stamp__idle { animation-play-state: paused; }
@keyframes stampspin { to { transform: rotate(360deg); } }
.stamp svg text {
  font-family: var(--sans);
  font-size: 11px;
  letter-spacing: var(--track-stamp);
  text-transform: uppercase;
  fill: var(--ink);
}
.stamp--solid svg circle { fill: var(--ink); }
.stamp--solid svg text { fill: var(--white); }
.stamp--solid .stamp__arrow { stroke: var(--white); }
.stamp--inv { color: var(--white); }
.stamp--inv svg text { fill: var(--white); }
.stamp__arrow { stroke: var(--ink); }
.stamp--solid .stamp__arrow, .stamp--inv .stamp__arrow { stroke: currentColor; fill: none; }

/* --------------------------------------------------------------------------
   7. Image crop boxes
   -------------------------------------------------------------------------- */
.crop { position: relative; overflow: hidden; background: var(--paper); }
.crop img { width: 100%; height: 100%; object-fit: cover; }
.crop--drift img { position: absolute; inset: -8% 0; height: 116%; width: 100%; }

/* --------------------------------------------------------------------------
   8. Nav
   -------------------------------------------------------------------------- */
.nav {
  position: fixed; top: 0; left: 0; right: 0; z-index: 50;
  height: var(--header-h);
  display: flex; align-items: center; justify-content: space-between;
  padding: 0 var(--gutter);
  mix-blend-mode: normal;
  transition: color 0.35s ease;
}
.nav__left { display: flex; align-items: center; gap: 1.6rem; }
.nav__logo { display: block; width: 3.75rem; color: var(--ink); transition: color 0.35s ease; }
.nav__logo svg { width: 100%; height: auto; }
.nav__logo .mono-path { stroke: currentColor; }
.nav--inv, .nav--inv .mute i { color: var(--white); }
.nav--inv .nav__logo { color: var(--white); }

.mute { display: flex; align-items: center; gap: 0.25rem; height: 2rem; }
.mute i {
  display: block; width: 0.375rem; height: 0.25rem; background: currentColor;
  transition: height 0.3s ease, color 0.35s ease, background 0.35s ease;
}
.mute[aria-pressed='false'] i { height: 0.0625rem; }

.nav__links { display: flex; align-items: center; gap: 1.25rem; }
.nav__link {
  position: relative; font-size: var(--text-body); line-height: 1; padding: 0.5rem 0;
}
.nav__link::after {
  content: ''; position: absolute; left: 0; right: 0; bottom: 0.125rem; height: 1px;
  background: currentColor; transform: scaleX(0); transform-origin: left;
  transition: transform 0.5s var(--ease-out);
}
.nav__link:hover::after, .nav__link[aria-current='page']::after { transform: none; }
.nav__link:hover { color: var(--blue); }
.nav__tools { display: flex; align-items: center; gap: 1.5rem; }
.lang-btn { font-size: var(--text-body); line-height: 1; padding: 0.5rem 0; }
.lang-btn:hover { color: var(--blue); }

.menu-btn { display: none; }

/* --------------------------------------------------------------------------
   9. Menu overlay
   -------------------------------------------------------------------------- */
.menu {
  position: fixed; inset: 0; z-index: 60; background: var(--studio);
  display: flex; flex-direction: column; justify-content: space-between;
  padding: var(--header-h-m) var(--gutter-m) var(--sp-40);
  transform: translateY(-101%); visibility: hidden;
  transition: transform 0.85s var(--ease-inout), visibility 0s linear 0.85s;
}
.menu.open { transform: none; visibility: visible; transition: transform 0.85s var(--ease-inout), visibility 0s; }
.menu__top { display: flex; align-items: center; justify-content: space-between; }
.menu__logo { width: 2.75rem; color: var(--ink); }
.menu__logo .mono-path { stroke: currentColor; }
.menu__close { font-size: var(--text-body); text-transform: none; }
.menu__close:hover { color: var(--blue); }
.menu__links { display: flex; flex-direction: column; gap: 0.625rem; margin-top: var(--sp-90); }
.menu__link {
  font-family: var(--serif); font-weight: 400; font-size: 2.75rem; line-height: 1.08;
  letter-spacing: var(--track-serif);
}
.menu__link .ln { display: block; overflow: hidden; }
.menu__link .ln-i {
  display: block; transform: translateY(110%);
  transition: transform 0.85s var(--ease-out) calc(0.06s * var(--i, 0));
}
.menu.open .menu__link .ln-i { transform: none; }
.menu__link:hover { color: var(--blue); }
.menu__foot { display: flex; justify-content: space-between; align-items: flex-end; gap: 1rem; }
.menu__meta { display: flex; flex-direction: column; gap: 0.35rem; font-size: var(--text-meta); }
.menu__meta a:hover { color: var(--blue); }
.menu__socials { display: flex; gap: 1.5rem; font-size: var(--text-meta); }

/* --------------------------------------------------------------------------
   10. Curtain & loader
   -------------------------------------------------------------------------- */
.curtain {
  position: fixed; inset: 0; z-index: 80; background: var(--curtain-bg);
  display: none; align-items: center; justify-content: center;
  transform: translateY(0); transition: transform 0.95s var(--ease-inout);
}
html.js .curtain { display: flex; }
.curtain.lift { transform: translateY(-101%); }
.curtain__inner { display: flex; flex-direction: column; align-items: center; gap: 2.2rem; }
.curtain__mark { width: 4rem; color: var(--ink); }
.curtain__mark .mono-path {
  stroke: currentColor; fill: none;
  stroke-dasharray: 100; stroke-dashoffset: 100;
}
html.quick-load .curtain__mark .mono-path { stroke-dashoffset: 0; }
html.js:not(.quick-load) .curtain__mark .mono-path { animation: draw 1.1s var(--ease-out) forwards; }
html.js:not(.quick-load) .curtain__mark .mono-path:nth-child(1) { animation-delay: 0.05s; }
html.js:not(.quick-load) .curtain__mark .mono-path:nth-child(2) { animation-delay: 0.5s; }
html.js:not(.quick-load) .curtain__mark .mono-path:nth-child(3) { animation-delay: 0.95s; }
@keyframes draw { to { stroke-dashoffset: 0; } }
.curtain__word {
  font-family: var(--serif); font-weight: 300; font-size: 1.05rem; letter-spacing: 0.14em;
  opacity: 0;
}
html.js:not(.quick-load) .curtain__word { animation: fadein 1s ease 1.35s forwards; }
html.quick-load .curtain__word { opacity: 1; }
@keyframes fadein { to { opacity: 1; } }

/* --------------------------------------------------------------------------
   11. Custom cursor
   -------------------------------------------------------------------------- */
.cursor {
  position: fixed; left: 0; top: 0; z-index: 100; pointer-events: none;
  will-change: transform; opacity: 0;
}
.cursor__inner {
  position: relative; width: 5.625rem; height: 5.625rem; margin: -2.8125rem 0 0 -2.8125rem;
  transform: scale(0.001); transition: opacity 0.35s ease, transform 0.5s var(--ease-out);
  opacity: 0;
}
.cursor.on .cursor__inner { transform: none; opacity: 1; }
.cursor__ring { position: absolute; inset: 0; transform: rotate(-360deg); transition: transform 1s var(--ease-out); }
.cursor.on .cursor__ring { transform: rotate(0deg); }
.cursor__ring text {
  font-family: var(--sans); font-size: 8.6px; letter-spacing: 0.06em;
  text-transform: uppercase; fill: var(--ink);
}
.cursor__arrow { position: absolute; inset: 0; margin: auto; width: 1rem; height: 1rem; stroke: var(--ink); }
@media (pointer: coarse), (hover: none) { .cursor { display: none; } }
html.js [data-cursor] { cursor: none; }

/* --------------------------------------------------------------------------
   12. Cookie bar
   -------------------------------------------------------------------------- */
.cookiebar {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 40;
  min-height: 2.5rem; background: var(--studio);
  display: flex; align-items: center; justify-content: space-between; gap: 1.5rem;
  padding: 0.4rem var(--gutter);
  transform: translateY(101%); transition: transform 0.7s var(--ease-inout);
}
.cookiebar.show { transform: none; }
.cookiebar p { font-size: var(--text-meta); }
.cookiebar a { text-decoration: underline; text-underline-offset: 3px; }
.cookiebar button { font-size: var(--text-meta); text-transform: uppercase; white-space: nowrap; }
.cookiebar button:hover { color: var(--blue); }

/* --------------------------------------------------------------------------
   13. Footer CTA
   -------------------------------------------------------------------------- */
.cta {
  position: relative; background: var(--white);
  padding: var(--sp-140) var(--gutter) 4.6875rem;
}
.cta__stage { position: relative; max-width: 74rem; margin: 0 auto; text-align: center; }
.cta__head {
  font-family: var(--serif); font-weight: 400; font-size: var(--text-heading);
  line-height: 1.32; letter-spacing: var(--track-serif);
}
.cta__head a:hover .cta__word { color: var(--ink); }
.cta__head:hover { color: var(--blue); }
.cta__head:hover .text-blue { color: var(--ink); }
.cta__stamp { top: -4.2rem; right: 10%; width: 7.5rem; }
.cta__row {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: center;
  gap: 1rem 2.8rem; margin-top: 5.4rem;
}
.cta__soc { font-size: var(--text-body); }
.cta__soc:hover { color: var(--blue); }
.cta__mono { width: 1.875rem; flex: none; color: var(--ink); }
.cta__mono svg { display: block; }
.cta__mono .mono-path { stroke: currentColor; }
.cta__credits {
  margin-top: 2.6rem; text-align: center;
  font-size: var(--text-credits); color: var(--silver);
}
.cta__credits a { transition: color 0.2s ease; }
.cta__credits a:hover, .cta__credits span:hover { color: var(--ink); }

/* --------------------------------------------------------------------------
   14. Hero showreel (home)
   -------------------------------------------------------------------------- */
.hero {
  position: relative; min-height: 100svh; background: var(--studio);
  display: flex; align-items: center; justify-content: center; overflow: hidden;
}
.hero__title {
  position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);
  opacity: 0.001; font-size: var(--text-heading); white-space: nowrap; pointer-events: none;
}
.reel {
  position: relative; height: 70svh; aspect-ratio: 16 / 9; max-width: 86vw;
  clip-path: circle(var(--reel-r, 0px) at 50% 50%);
  transition: clip-path 1.25s var(--ease-inout);
  will-change: clip-path;
}
.reel.crop { background: transparent; }
.reel canvas, .reel img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.hero.playing .reel { --reel-r: min(35svh, 43vw); }
.hero__mask {
  position: absolute; left: 50vw; top: 50vh; transform: translate(-50%, -50%);
  width: 100%; height: 100%; z-index: 1; cursor: none;
}
.hero.playing .hero__mask { display: none; }
.hero__hint {
  position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);
  font-family: var(--serif); font-weight: 300; font-size: var(--text-heading);
  letter-spacing: var(--track-serif); color: var(--stone);
  pointer-events: none; user-select: none;
}
.hero__hint .ln { display: block; overflow: hidden; }
.hero__hint .ln-i { display: block; transform: translateY(110%); transition: transform 1.1s var(--ease-out) 0.9s; }
.hero.ready .hero__hint .ln-i { transform: none; }
.hero.playing .hero__hint { opacity: 0; transition: opacity 0.5s ease; }
.hero__badge { right: 11%; top: 57%; width: 5.625rem; opacity: 0; pointer-events: none; transition: opacity 0.6s ease 0.35s; }
.hero.ready .hero__badge { opacity: 1; }
.hero.playing .hero__badge { opacity: 0; transition-delay: 0s; }
.hero__close {
  position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%) scale(0.001);
  width: 13vh; height: 13vh; border-radius: 50%; background: var(--white);
  display: flex; align-items: center; justify-content: center; z-index: 4;
  opacity: 0; pointer-events: none; transition: opacity 0.5s ease, transform 0.6s var(--ease-out);
}
.hero.playing .hero__close { opacity: 1; transform: translate(-50%, -50%) scale(1); pointer-events: auto; transition-delay: 0.5s; }
.hero__close span { font-size: var(--text-body); text-transform: uppercase; }
.hero__close:hover span { color: var(--blue); }

/* --------------------------------------------------------------------------
   15. Tagline with inline photos
   -------------------------------------------------------------------------- */
.tagline-band { background: var(--white); padding: var(--sp-207) var(--gutter); }
.tagline {
  max-width: 66rem; margin: 0 auto; text-align: center;
  font-family: var(--serif); font-weight: 400; font-size: var(--text-heading);
  line-height: 1.32; letter-spacing: var(--track-serif);
}
.inline-photo {
  display: inline-block; vertical-align: middle; overflow: hidden;
  width: 5.25rem; height: 3.5rem; margin: 0 0.5rem; border-radius: 0;
  transform: translateY(-0.1em);
}
.inline-photo img { width: 100%; height: 100%; object-fit: cover; }
.inline-photo--portrait { width: 3.3rem; height: 4.6rem; }
.inline-photo .ph-clip {
  display: block; width: 100%; height: 100%;
  clip-path: circle(80% at 50% 50%);
  transition: clip-path 0.75s var(--ease-out) var(--pd, 0s);
}
html.js .tagline .inline-photo .ph-clip { clip-path: circle(0% at 50% 50%); }
html.js .tagline.in .inline-photo .ph-clip { clip-path: circle(80% at 50% 50%); }

/* --------------------------------------------------------------------------
   16. Project roller (collage)
   -------------------------------------------------------------------------- */
.roller { position: relative; min-height: 100svh; background: var(--paper); overflow: hidden; touch-action: pan-y; }
.roller:focus-visible { outline-offset: -4px; }
.roller img { user-select: none; -webkit-user-drag: none; }
.win { position: absolute; z-index: 1; }
.win--snap { transition: transform 0.46s var(--ease-out); }
.win .crop { width: 100%; height: 100%; }
.win--1 { left: -2.5%; top: 7%; width: 51.9rem; height: 18.9rem; }
.win--2 { right: 14%; top: 3%; width: 16.25rem; height: 19rem; }
.win--3 { right: 4%; top: 45%; width: 22rem; height: 14rem; }
.win--4 { left: 19%; bottom: 13%; width: 14.88rem; height: 18.06rem; }
.win--5 { left: 47%; bottom: 17%; width: 11.2rem; height: 13.94rem; }
.win__link { position: absolute; inset: 0; z-index: 2; }
.win__mask {
  position: absolute; inset: 0; z-index: 3; background: var(--paper);
  transform: scaleY(0); transform-origin: bottom; pointer-events: none;
}
.win.rolling .win__mask { animation: winsweep 0.85s var(--ease-inout) both; }
@keyframes winsweep {
  0% { transform: scaleY(0); transform-origin: bottom; }
  48% { transform: scaleY(1); transform-origin: bottom; }
  52% { transform: scaleY(1); transform-origin: top; }
  100% { transform: scaleY(0); transform-origin: top; }
}
.roller__loc {
  position: absolute; left: 2.6%; top: 47%; z-index: 2;
  writing-mode: vertical-rl; transform: rotate(180deg);
  text-transform: uppercase; font-size: var(--text-body); letter-spacing: var(--track-sans);
  transition: opacity 0.4s ease;
}
.roller__loc.out { opacity: 0; }
.roller__titlewrap { position: absolute; left: 40%; top: 36%; z-index: 2; max-width: var(--w-project-text); }
.roller__title {
  font-family: var(--serif); font-weight: 400; font-size: var(--text-heading);
  line-height: 1.32; letter-spacing: var(--track-serif);
}
.roller__title a:hover { color: var(--blue); }
.roller__title .ln { display: block; overflow: hidden; }
.roller__title .ln-i { display: block; transform: translateY(112%); transition: transform 0.9s var(--ease-out) var(--d, 0s); }
.roller__title.in .ln-i { transform: none; }
.roller__desc {
  position: absolute; left: 40%; top: 53.5%; z-index: 2; width: var(--w-project-desc);
  font-size: var(--text-body); line-height: 1.4;
}
.roller__desc .dw { display: inline-block; opacity: 0; transform: translateY(0.5em); transition: opacity 0.6s var(--ease-out) var(--d, 0s), transform 0.7s var(--ease-out) var(--d, 0s); }
.roller__desc.in .dw { opacity: 1; transform: none; }
.roller__nav {
  position: absolute; left: 0; right: 0; bottom: 4.2rem; z-index: 3;
  display: flex; justify-content: space-between; padding: 0 var(--gutter);
}
.roller__counter {
  position: absolute; left: 50%; bottom: 4.6rem; transform: translateX(-50%);
  font-size: var(--text-meta); z-index: 2;
}

/* --------------------------------------------------------------------------
   17. Facts strip
   -------------------------------------------------------------------------- */
.facts { background: var(--white); padding: var(--sp-200) var(--gutter) var(--sp-125); }
.facts__inner { max-width: var(--w-facts); margin: 0 auto; }
.fact { position: relative; height: 12.125rem; display: grid; grid-template-columns: 1fr 2.2fr; align-items: center; gap: 2rem; }
.fact__rule { position: absolute; left: 0; right: 0; height: 1px; background: var(--ink); }
.fact__rule--top { top: 0; }
.fact__rule--bottom { bottom: 0; }
.fact:last-child .fact__rule--bottom { display: none; }
.fact__num {
  font-family: var(--serif); font-weight: 400; font-size: var(--text-fact-number);
  line-height: 1; letter-spacing: var(--track-serif);
  position: relative; top: -0.24em; /* optical centering: Cormorant numerals sit low in the line box */
}
.fact__label { font-size: var(--text-fact-title); line-height: 2.79; }
.facts__more { text-align: left; margin-top: 4.4rem; }

/* --------------------------------------------------------------------------
   18. Journal band (home)
   -------------------------------------------------------------------------- */
.jband { background: var(--studio); padding: var(--sp-50) 0 var(--sp-110); overflow: hidden; }
.jband .label { display: block; text-align: center; }
.jstrip {
  display: flex; align-items: center; gap: 1.25rem;
  height: 19.4rem; width: max-content; margin: 2rem 0 3rem 6vw;
  transition: transform 1.3s var(--ease-out);
}
html.js .jstrip { transform: translateX(14vw); }
html.js .jstrip.in { transform: none; }
.jstrip__img { position: relative; overflow: hidden; height: 100%; }
.jstrip__img img { width: 100%; height: 100%; object-fit: cover; }
.jstrip__img--l { width: 28.75rem; }
.jstrip__img--p { width: 17.5rem; }
.jstrip__img--m { width: 22rem; }
.jband__link {
  display: block; text-align: center;
  font-family: var(--serif); font-weight: 400; font-size: var(--text-heading-lg);
  line-height: 1.09; letter-spacing: var(--track-serif); text-transform: uppercase;
}
.jband__link:hover { color: var(--blue); }
.jband__link .ln { display: block; overflow: hidden; }
.jband__link .ln-i { display: block; transform: translateY(110%); transition: transform 1.1s var(--ease-out) var(--d, 0s); }
.jband__link.in .ln-i { transform: none; }

/* --------------------------------------------------------------------------
   19. Page headers (interior pages)
   -------------------------------------------------------------------------- */
.phead { background: var(--studio); padding: calc(var(--header-h) + var(--sp-90)) var(--gutter) var(--sp-125); }
.phead--tall { min-height: 78svh; display: flex; flex-direction: column; justify-content: flex-end; }
.phead__label { display: block; margin-bottom: var(--sp-40); }
.phead__title {
  font-family: var(--serif); font-weight: 300; font-size: var(--text-heading-lg);
  line-height: 1.09; letter-spacing: var(--track-serif); max-width: 60rem;
}
.phead__note { max-width: var(--w-bio-para); margin-top: var(--sp-40); font-size: var(--text-body); }

.filters { display: flex; gap: 1.75rem; margin-top: var(--sp-65); }
.filter {
  font-size: var(--text-body); text-transform: uppercase; letter-spacing: var(--track-sans);
  color: var(--stone); transition: color 0.25s ease;
}
.filter:hover { color: var(--ink); }
.filter[aria-pressed='true'] { color: var(--blue); }

/* --------------------------------------------------------------------------
   20. Split intro (estudio)
   -------------------------------------------------------------------------- */
.split { background: var(--white); padding: var(--sp-140) var(--gutter) var(--sp-200); }
.split__grid { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-90); }
.split__statement {
  font-family: var(--serif); font-weight: 400; font-size: var(--text-heading);
  line-height: 1.32; letter-spacing: var(--track-serif); max-width: 30rem; margin-top: var(--sp-40);
}
.split__paras { max-width: var(--w-bio-para); display: flex; flex-direction: column; gap: 1.6rem; padding-top: var(--sp-40); }
.split__arch { margin-top: var(--sp-65); color: var(--stone); width: 19rem; }
.arch text { fill: var(--stone); font-family: var(--serif); font-weight: 300; }
.arch .arch-line { stroke: var(--stone); fill: none; }

/* --------------------------------------------------------------------------
   21. Biography blocks
   -------------------------------------------------------------------------- */
.bio { display: grid; grid-template-columns: 1fr 1fr; }
.bio__photo { position: relative; min-height: 44rem; }
.bio__photo .crop { position: absolute; inset: 0; }
.bio--rev .bio__photo { order: 2; }
.bio__block {
  position: relative; padding: var(--sp-125) var(--gutter);
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  text-align: left;
}
.bio__block--blue { background: var(--blue); color: var(--white); }
.bio__block--beige { background: var(--beige); color: var(--ink); }
.bio__title { text-align: center; max-width: 30rem; color: inherit; }
.bio__role {
  margin-top: var(--sp-40); font-size: var(--text-meta); text-transform: uppercase;
  color: inherit; opacity: 0.75;
}
.bio__paras {
  margin-top: var(--sp-40); width: var(--w-bio-para); max-width: 100%;
  display: flex; flex-direction: column; gap: 1.3rem; font-size: var(--text-body);
}
.bio__paras a { text-decoration: underline; text-underline-offset: 3px; }
.bio__stamp { left: 14%; top: -4.4rem; width: 8.1rem; }
.bio__block--blue .stamp svg text { fill: var(--white); }
.bio__block--beige .stamp svg text { fill: var(--ink); }

/* --------------------------------------------------------------------------
   22. Testimonies (karaoke)
   -------------------------------------------------------------------------- */
.testy { background: var(--studio); padding: var(--sp-140) var(--gutter) var(--sp-110); position: relative; }
.testy__counter { font-size: var(--text-meta); text-align: center; display: block; margin-bottom: var(--sp-65); }
.testy__stage { max-width: var(--w-testimony); margin: 0 auto; text-align: center; min-height: 16rem; }
.testy__quote { position: relative; }
.kq { transition: color 0.2s ease; }
.kq.lit { color: var(--blue); }
.testy__attr { margin-top: var(--sp-55); font-size: var(--text-body); }
.testy__player { display: flex; align-items: center; justify-content: center; gap: 1rem; margin-bottom: var(--sp-55); }
.playbtn {
  width: 3.4rem; height: 3.4rem; border: 1px solid var(--ink); border-radius: 50%;
  display: flex; align-items: center; justify-content: center; transition: background 0.3s ease;
}
.playbtn svg { width: 0.9rem; height: 1rem; }
.playbtn:hover { background: var(--white); }
.playbtn .icon-pause { display: none; }
.playbtn.playing .icon-play { display: none; }
.playbtn.playing .icon-pause { display: block; }
.testy__nav {
  display: flex; justify-content: space-between; align-items: flex-end;
  margin-top: var(--sp-90);
}

/* --------------------------------------------------------------------------
   23. Awards list (estudio)
   -------------------------------------------------------------------------- */
.awards { background: var(--white); padding: var(--sp-140) var(--gutter); }
.awards__inner { max-width: 60rem; margin: 0 auto; }
.award { position: relative; display: grid; grid-template-columns: 8rem 1fr auto; gap: 2rem; align-items: baseline; padding: 2.4rem 0; }
.award .rule { position: absolute; left: 0; right: 0; top: 0; height: 1px; background: var(--ink); }
.award:last-child { border-bottom: 1px solid var(--ink); }
.award__year { font-family: var(--serif); font-size: 1.6rem; }
.award__name { font-size: var(--text-body); }
.award__proj { font-size: var(--text-meta); color: var(--silver); }

/* --------------------------------------------------------------------------
   24. Discover band
   -------------------------------------------------------------------------- */
.discover { background: var(--studio); padding: var(--sp-140) var(--gutter); }
.discover__link {
  display: block; text-align: center; font-family: var(--serif); font-weight: 400;
  font-size: var(--text-heading-lg); line-height: 1.09; letter-spacing: var(--track-serif);
}
.discover__link:hover { color: var(--blue); }

/* --------------------------------------------------------------------------
   25. Journal ledger
   -------------------------------------------------------------------------- */
.ledgers { background: var(--white); padding: var(--sp-140) var(--gutter); }
.ledger {
  display: grid; grid-template-columns: repeat(12, 1fr); grid-auto-rows: 5.2rem;
  gap: 1px; background: var(--ink); border: 1px solid var(--ink);
}
.cell { background: var(--white); position: relative; padding: 1.5rem; transition: opacity 0.5s ease; }
.cell.hidden { display: none; }
.cell--flush { padding: 0; }
.c3 { grid-column: span 3; } .c4 { grid-column: span 4; } .c5 { grid-column: span 5; }
.c6 { grid-column: span 6; } .c7 { grid-column: span 7; } .c12 { grid-column: span 12; }
.r2 { grid-row: span 2; } .r3 { grid-row: span 3; } .r4 { grid-row: span 4; }
.cell__row { display: flex; justify-content: space-between; }
.cell__cat, .cell__date { font-size: var(--text-label); line-height: 3.35; text-transform: uppercase; }
.cell__body { font-size: var(--text-body); display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.cell__body b { font-weight: 500; }
.cell__body a { text-decoration: underline; text-underline-offset: 0.18em; }
.cell__body a:hover { color: var(--blue); }
.cell__photo { position: relative; overflow: hidden; }
.cell__photo img { width: 100%; height: 100%; object-fit: cover; }
.cell--photo .crop { position: absolute; inset: 0; }
.cell__link { position: absolute; inset: 0; z-index: 3; }
.cell:hover .cell__body b { color: var(--blue); }

.quoteband { background: var(--white); padding: var(--sp-200) var(--gutter); text-align: center; }
.quoteband blockquote { max-width: 50rem; margin: 0 auto; }
.quoteband__attr { margin-top: var(--sp-40); font-size: var(--text-meta); color: var(--silver); }

/* --------------------------------------------------------------------------
   26. Contact field
   -------------------------------------------------------------------------- */
.cfield { position: relative; background: var(--studio); min-height: 100svh; padding: calc(var(--header-h) + var(--sp-90)) var(--gutter) 0; display: flex; flex-direction: column; }
.cfield__poster {
  display: none; font-family: var(--serif); font-weight: 400; font-size: 18vw; line-height: 1;
  letter-spacing: var(--track-serif); color: var(--stone); text-transform: uppercase;
}
.cfield__stage { flex: 1; display: flex; flex-direction: column; justify-content: center; gap: var(--sp-55); text-align: center; padding-bottom: var(--sp-90); }
.cfield__title { font-family: var(--serif); font-weight: 400; font-size: var(--text-heading); line-height: 1.32; letter-spacing: var(--track-serif); }
.cfield__direct { display: flex; flex-direction: column; gap: 0.7rem; font-size: var(--text-body); }
.cfield__direct a { text-decoration: underline; text-underline-offset: 4px; }
.cfield__direct a:hover { color: var(--blue); }
.offices { display: flex; justify-content: center; gap: var(--sp-125); margin-top: var(--sp-40); }
.office { width: 12.5rem; text-align: left; }
.office h3 { font-size: var(--text-body); font-weight: 500; margin-bottom: 0.8rem; }
.office p, .office a { font-size: var(--text-body); }
.office a:hover { color: var(--blue); }
.cfield__socials { display: flex; justify-content: center; gap: 4rem; padding: var(--sp-90) 0; font-size: var(--text-body); }
.cfield__socials a:hover { color: var(--blue); }
.cfield__photos { display: none; gap: 1px; margin: 0 calc(var(--gutter) * -1); }
.cfield__photos .crop { width: 50%; aspect-ratio: 4 / 3; }

/* --------------------------------------------------------------------------
   27. Project page
   -------------------------------------------------------------------------- */
.proj-hero { position: relative; height: 100svh; overflow: hidden; }
.proj-hero .crop { position: absolute; inset: 0; }
.proj-hero__scrim { position: absolute; inset: 0; background: rgba(0, 0, 0, 0.14); }
.proj-intro { background: var(--white); padding: var(--sp-140) var(--gutter); }
.proj-intro__grid { display: grid; grid-template-columns: 1.4fr 1fr; gap: var(--sp-90); }
.proj-intro__title { font-family: var(--serif); font-weight: 400; font-size: var(--text-heading-lg); line-height: 1.09; letter-spacing: var(--track-serif); max-width: 36rem; }
.proj-intro__loc { display: block; margin-bottom: var(--sp-40); }
.proj-intro__body { display: flex; flex-direction: column; gap: 1.6rem; max-width: var(--w-bio-para); font-size: var(--text-body); padding-top: 0.6rem; }
.proj-meta { display: flex; flex-wrap: wrap; gap: var(--sp-65); margin-top: var(--sp-90); padding-top: var(--sp-40); border-top: 1px solid var(--ink); }
.proj-meta div { min-width: 10rem; }
.proj-meta dt { font-size: var(--text-meta); text-transform: uppercase; color: var(--silver); margin-bottom: 0.5rem; }
.proj-meta dd { margin: 0; font-size: var(--text-body); }
.proj-gallery { background: var(--white); padding: 0 var(--gutter) var(--sp-140); }
.proj-dip { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-20); }
.proj-dip .crop { aspect-ratio: 4 / 3; }
.proj-pair { display: grid; grid-template-columns: 5fr 7fr; gap: var(--sp-20); margin-top: var(--sp-20); }
.proj-pair .crop--a { aspect-ratio: 3 / 4; }
.proj-pair .crop--b { aspect-ratio: 4 / 3; align-self: end; }
.proj-wide { margin-top: var(--sp-20); }
.proj-wide .crop { aspect-ratio: 21 / 9; }
.proj-quote { background: var(--white); padding: var(--sp-200) var(--gutter); text-align: center; }
.proj-quote blockquote { max-width: 50rem; margin: 0 auto; }
.proj-outro { background: var(--studio); padding: var(--sp-140) var(--gutter) var(--sp-110); position: relative; }
.proj-outro__arch { width: 20rem; margin: 0 auto var(--sp-90); color: var(--stone); }
.proj-outro__label { display: block; text-align: center; }
.proj-outro .arrow-link { margin: 0 auto; align-items: center; }
.proj-outro__all { display: flex; justify-content: center; margin-top: var(--sp-90); }
.proj-outro__next { display: block; text-align: center; font-family: var(--serif); font-weight: 300; font-size: var(--text-heading); line-height: 1.32; letter-spacing: var(--track-serif); margin-top: var(--sp-20); }
.proj-outro__next:hover { color: var(--blue); }

/* --------------------------------------------------------------------------
   28. Privacy page
   -------------------------------------------------------------------------- */
.legal { background: var(--white); padding: calc(var(--header-h) + var(--sp-90)) var(--gutter) var(--sp-140); }
.legal__inner { max-width: 46rem; margin: 0 auto; }
.legal h1 { font-family: var(--serif); font-weight: 300; font-size: var(--text-heading-lg); line-height: 1.09; letter-spacing: var(--track-serif); margin: var(--sp-40) 0 var(--sp-65); }
.legal h2 { font-family: var(--serif); font-weight: 400; font-size: 1.9rem; line-height: 1.2; margin: 3rem 0 0.9rem; }
.legal p, .legal li { font-size: var(--text-body); line-height: 1.55; }
.legal p + p { margin-top: 1rem; }
.legal ul { list-style: none; margin-top: 0.9rem; }
.legal li { padding-left: 1.1rem; position: relative; }
.legal li::before { content: '-'; position: absolute; left: 0; }
.legal a { text-decoration: underline; text-underline-offset: 3px; }
.legal a:hover { color: var(--blue); }

/* --------------------------------------------------------------------------
   29. Page transitions state
   -------------------------------------------------------------------------- */
html.leaving .curtain { transform: translateY(0); }
html.leaving .curtain__inner { opacity: 1; }
body[data-page='home'] .curtain { --curtain-bg: var(--white); }
body[data-page='estudio'] .curtain,
body[data-page='journal'] .curtain,
body[data-page='contacto'] .curtain,
body[data-page='proyecto'] .curtain,
body[data-page='privacidad'] .curtain { --curtain-bg: var(--studio); }

/* no-JS fallback: un-gate hand-split lines and stamps */
html:not(.js) .stamp__rot,
html:not(.js) .hero__hint .ln-i,
html:not(.js) .jband__link .ln-i,
html:not(.js) .menu__link .ln-i,
html:not(.js) .roller__title .ln-i { transform: none; }

/* --------------------------------------------------------------------------
   30. Responsive
   -------------------------------------------------------------------------- */
@media (max-width: 1023px) {
  .nav { height: var(--header-h-m); }
  .nav__links { display: none; }
  .menu-btn {
    display: block; font-size: var(--text-body); text-transform: uppercase;
  }
  .nav__tools .lang-btn { font-size: var(--text-meta); }
  .label { font-size: 1rem; }
  .phead { padding-top: calc(var(--header-h-m) + var(--sp-65)); }
  .cfield__poster { display: block; font-size: 15vw; }
  .cfield__photos { display: flex; }
  .cfield__socials { gap: 2rem; flex-wrap: wrap; }
  .offices { flex-direction: column; align-items: center; gap: var(--sp-55); }
  .office { text-align: center; width: auto; }

  /* type overrides */
  .h-quote, .quoteband .h-quote, .proj-quote .h-quote { font-size: 1.875rem; }
  .h-testimony, .testy__quote { font-size: 1.875rem; }
  .h-bio { font-size: 2.5rem; }
  .h-lg, .jband__link, .discover__link, .proj-intro__title, .phead__title { font-size: 2.5rem; }
  .phead__title { line-height: 1.15; }
  .h-md, .tagline, .roller__title, .cta__head, .cfield__title, .proj-outro__next, .hero__hint, .hero__title { font-size: 2.125rem; }
  .fact__num { font-size: 5.625rem; }
  .fact { height: 7.2rem; grid-template-columns: 1fr 1.6fr; }
  .fact__label { font-size: 1.25rem; line-height: 2.2; }
  .facts { padding-top: var(--sp-110); padding-bottom: var(--sp-90); }
  .tagline-band { padding: var(--sp-110) var(--gutter-m); }
  .inline-photo { width: 3.6rem; height: 2.4rem; margin: 0 0.3rem; }
  .inline-photo--portrait { width: 2.3rem; height: 3.2rem; }
  .cta { padding-top: var(--sp-110); }
  .split__grid { grid-template-columns: 1fr; gap: var(--sp-65); }
  .bio { grid-template-columns: minmax(0, 1fr); }
  .bio--rev .bio__photo { order: 0; }
  .bio__paras { width: 100%; }
  .bio__photo { min-height: 62vw; }
  .bio__block { padding: var(--sp-90) var(--gutter-m) var(--sp-110); }
  .award { grid-template-columns: 4.5rem 1fr; row-gap: 0.4rem; }
  .award__proj { grid-column: 2; }
  .roller { min-height: 100svh; padding-bottom: 6rem; }
  .roller__titlewrap { left: var(--gutter-m); top: 14%; max-width: 18rem; }
  .roller__desc { left: var(--gutter-m); top: 42%; width: min(60vw, 15rem); }
  .roller__loc { left: auto; right: 4%; top: 16%; }
  .win--1 { left: -6%; top: 56%; width: 88vw; height: 32vw; }
  .win--2 { right: 6%; top: 4%; width: 30vw; height: 36vw; }
  .win--3 { right: 2%; top: 44%; width: 34vw; height: 23vw; }
  .win--4 { left: 30%; bottom: 9%; width: 30vw; height: 36vw; }
  .win--5 { display: none; }
  .roller__nav { bottom: 1.8rem; }
  .roller__counter { bottom: 2.1rem; }
  .jstrip { height: 12rem; margin-left: 8vw; }
  .jstrip__img--l { width: 17rem; }
  .jstrip__img--p { width: 10.5rem; }
  .jstrip__img--m { width: 13rem; }
  .ledgers { padding: var(--sp-90) var(--gutter-m); }
  .ledger { grid-template-columns: 1fr; grid-auto-rows: auto; }
  .c3, .c4, .c5, .c6, .c7, .c12 { grid-column: span 1; }
  .r2, .r3, .r4 { grid-row: span 1; }
  .cell { min-height: 7rem; }
  .cell--photo { min-height: 78vw; }
  .testy__nav { margin-top: var(--sp-65); }
  .proj-intro__grid { grid-template-columns: 1fr; gap: var(--sp-55); }
  .proj-dip { grid-template-columns: 1fr; }
  .proj-pair { grid-template-columns: 1fr; }
  .proj-pair .crop--a { aspect-ratio: 4 / 5; }
  .proj-meta { gap: var(--sp-40); }
  .cta__row { gap: 0.9rem 1.75rem; margin-top: 3rem; }
  .cta__mono { flex-basis: 100%; display: flex; justify-content: center; }
  .cta__mono svg { width: 1.875rem; height: auto; }
  .cta__stage { max-width: 100%; }
  .cta__stamp { position: static; display: block; width: 6rem; margin: 0 auto 1.75rem; }
  .curtain__mark { width: 3.2rem; }
  .menu__foot { flex-direction: column; align-items: flex-start; gap: 1.25rem; }
  .menu__socials { flex-wrap: wrap; row-gap: 0.6rem; }
}

@media (max-width: 500px) {
  .fact { grid-template-columns: 1fr; align-items: end; height: 8.6rem; padding-bottom: 1rem; gap: 0; }
  .fact__num { top: 0; }
  .fact__label { line-height: 1.6; }
  .facts__more { margin-top: var(--sp-65); }
  .cfield__photos .crop { aspect-ratio: 1 / 1; }
  .cookiebar { flex-direction: column; align-items: flex-start; gap: 0.5rem; }
  .menu__links { margin-top: var(--sp-55); }
  .filters { flex-wrap: wrap; gap: 0.9rem 1.5rem; }
}

/* --------------------------------------------------------------------------
   31. Reduced motion
   -------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 0.001s !important; transition-duration: 0.001s !important; animation-iteration-count: 1 !important; }
  html.js [data-reveal='fade'], html.js .wd { opacity: 1; transform: none; }
  html.js .ln-i { transform: none; }
  html.js .maskbox .maskfill { transform: scaleY(0); }
  html.js .maskbox img, html.js .maskbox video, html.js .maskbox canvas { opacity: 1; }
  html.js .rule { transform: none; }
  html.js .num-rise { opacity: 1; transform: none; }
  html.js .inline-photo .ph-clip, html.js .tagline .inline-photo .ph-clip { clip-path: none; }
  .cursor { display: none; }
  html.js [data-cursor] { cursor: auto; }
}