/* Hafid Ayllón — fashion site
   Layout: gallery-white room, edge-to-edge type, images at full strength.
   One accent (rosa mexicano) for the cursor, selection and the active state only. */

@font-face { font-family: "Season"; src: url("/assets/fonts/season.woff2") format("woff2"); font-weight: 300 550; font-display: swap; }
@font-face { font-family: "HA Mono"; src: url("/assets/fonts/mono.woff2") format("woff2"); font-weight: 300 900; font-display: swap; }

:root {
  --paper: #f1f1ee;
  --ink: #0b0b0b;
  --mute: #8b8a85;
  --line: rgba(11, 11, 11, .14);
  --rosa: #e4007c;
  --display: "Season", "Helvetica Neue", Arial, sans-serif;
  --mono: "HA Mono", ui-monospace, "SF Mono", Menlo, monospace;
  --g: clamp(16px, 2.2vw, 32px);         /* side gutter */
  --hd: 56px;                             /* header height */
  --ease: cubic-bezier(.76, 0, .24, 1);
  --ease-out: cubic-bezier(.16, 1, .3, 1);
  color-scheme: light;
}
.dark { --paper: #0b0b0b; --ink: #ecebe7; --mute: #77756f; --line: rgba(236, 235, 231, .16); color-scheme: dark; }

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0; background: var(--paper); color: var(--ink);
  font: 300 17px/1.55 var(--display); font-variation-settings: "SERF" 0;
  -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility;
  overflow-x: clip;
}
::selection { background: var(--rosa); color: #fff; }
img, video { display: block; max-width: 100%; height: auto; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; }
p { margin: 0; }
[hidden] { display: none !important; }
h1, h2 { margin: 0; font-weight: 300; }
:focus-visible { outline: 1px solid var(--rosa); outline-offset: 3px; }

.mono { font: 400 11px/1.45 var(--mono); letter-spacing: .04em; text-transform: uppercase; }
.skip { position: absolute; left: -999px; top: 8px; z-index: 100; background: var(--ink); color: var(--paper); padding: 8px 12px; }
.skip:focus { left: 8px; }

/* ---------- morphing type ---------- */
[data-morph] .wd { display: inline-block; white-space: nowrap; }
[data-morph] .ch {
  display: inline-block;
  font-variation-settings: "wght" var(--w, 300), "SERF" var(--sf, 0), "ital" var(--it, 0);
  transition: font-variation-settings .5s var(--ease-out);
}
.morph-all [data-morph] .ch, a:hover > [data-morph] .ch, a:focus-visible > [data-morph] .ch,
a:hover > span > [data-morph] .ch { --sf: 100; --it: 11; }

/* ---------- header ---------- */
.hd {
  position: fixed; inset: 0 0 auto; z-index: 50; height: var(--hd);
  padding: env(safe-area-inset-top, 0px) var(--g) 0;
  display: flex; align-items: center; justify-content: space-between; gap: 20px;
  color: #fff; mix-blend-mode: difference;
}
.hd-name { font: 400 12px/1 var(--mono); letter-spacing: .22em; text-transform: uppercase; }
.hd-nav { display: flex; gap: clamp(14px, 2.2vw, 34px); font: 400 11px/1 var(--mono); letter-spacing: .06em; text-transform: uppercase; }
.hd-nav a { position: relative; padding-block: 6px; }
.hd-nav a::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 1px; background: currentColor; transform: scaleX(0); transform-origin: right; transition: transform .45s var(--ease); }
.hd-nav a:hover::after, .hd-nav a[aria-current]::after { transform: scaleX(1); transform-origin: left; }
.hd-menu { display: none; font: 400 11px/1 var(--mono); letter-spacing: .06em; text-transform: uppercase; }
.hd-note { color: #fff; }

.menu { position: fixed; inset: 0; z-index: 49; background: var(--ink); color: var(--paper); padding: calc(var(--hd) + 24px) var(--g) 32px; display: flex; flex-direction: column; justify-content: space-between; }
.menu nav { display: grid; gap: 4px; }
.menu nav a { font: 300 clamp(40px, 11vw, 64px)/1.05 var(--display); opacity: 0; transform: translateY(40%); transition: opacity .5s, transform .7s var(--ease-out); }
.menu.open nav a { opacity: 1; transform: none; }
.menu.open nav a:nth-child(2) { transition-delay: .04s } .menu.open nav a:nth-child(3) { transition-delay: .08s }
.menu.open nav a:nth-child(4) { transition-delay: .12s } .menu.open nav a:nth-child(5) { transition-delay: .16s }
.menu.open nav a:nth-child(6) { transition-delay: .2s } .menu.open nav a:nth-child(7) { transition-delay: .24s }

/* ---------- intro (home, once per session) ---------- */
.intro { display: none; }
.js .intro.run { display: grid; place-items: center; position: fixed; inset: 0; z-index: 60; background: var(--paper); }
.intro-frames { position: relative; width: min(30vw, 260px); aspect-ratio: 4 / 5; }
.intro-frames img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; }
.intro-frames img.on { opacity: 1; }
.intro-count { position: absolute; left: var(--g); bottom: calc(var(--g) + env(safe-area-inset-bottom, 0px)); font-variant-numeric: tabular-nums; }
.intro.out { clip-path: inset(0 0 100% 0); transition: clip-path 1s var(--ease); }

/* ---------- home ---------- */
.hero { padding: calc(var(--hd) + 2vh) var(--g) 0; }
.mega { font: 300 20.3vw/.86 var(--display); letter-spacing: -.035em; white-space: nowrap; text-align: center; }
.mega [data-morph] { display: inline-block; transform-origin: 0 50%; }
.hero-grid { display: grid; grid-template-columns: 1fr 1.15fr 1fr; gap: var(--g); align-items: end; padding-block: clamp(20px, 3vw, 44px) 0; }
.hero-grid > * { min-width: 0; }
.hero-meta { align-self: start; }
.hero-img { display: block; position: relative; aspect-ratio: 4 / 5; overflow: hidden; }
.hs { position: absolute; inset: 0; display: block; clip-path: inset(100% 0 0 0); transition: clip-path 1.3s var(--ease); z-index: 1; }
.hs.on { clip-path: inset(0 0 0 0); z-index: 2; }
.hs.out { clip-path: inset(0 0 0 0); z-index: 1; }
.hs img { width: 100%; height: 100%; object-fit: contain; object-position: 50% 100%; transform: scale(1.12); transition: transform 2.4s var(--ease-out); }
.hs.on img, .hs.out img { transform: none; }
.js .hero-img { animation: hero-in 1.4s var(--ease) .25s both; }
.js .hero-img .hs.on:first-child img { animation: hero-zoom 2.2s var(--ease-out) .25s both; }
@keyframes hero-in { from { clip-path: inset(100% 0 0 0); } to { clip-path: inset(0); } }
@keyframes hero-zoom { from { transform: scale(1.25); } }
.hero-cap { display: flex; flex-direction: column; gap: 4px; align-items: flex-end; text-align: right; }
.hero-cap span { color: var(--mute); }

.sec-h { display: flex; justify-content: space-between; padding: 0 var(--g) 14px; border-bottom: 1px solid var(--line); }
.index { padding-top: clamp(80px, 12vw, 180px); }
.idx { list-style: none; margin: 0; padding: 0; }
.idx li { border-bottom: 1px solid var(--line); }
.idx a {
  display: grid; grid-template-columns: 70px 1fr minmax(160px, 22%); align-items: center; gap: var(--g);
  padding: clamp(10px, 1.4vw, 18px) var(--g); transition: opacity .4s, color .4s;
}
.idx-t { font: 300 clamp(44px, 7.6vw, 128px)/.95 var(--display); letter-spacing: -.03em; }
.idx-k { color: var(--mute); text-align: right; }
.idx-thumb { display: none; }
.idx:hover a:not(:hover) { opacity: .22; }
.idx a:hover .idx-n { color: var(--rosa); }
.index-sm .idx-t { font-size: clamp(34px, 4.6vw, 72px); }

.pv { position: fixed; left: 0; top: 0; z-index: 40; width: clamp(200px, 19vw, 300px); pointer-events: none; opacity: 0; scale: .85; transition: opacity .35s, scale .45s var(--ease-out); will-change: transform; }
.pv img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; }
.pv.on { opacity: 1; scale: 1; }
.dark .pv img { outline: 1px solid rgba(236, 235, 231, .35); outline-offset: -1px; }

.strip { margin-top: clamp(80px, 10vw, 160px); overflow: hidden; }
.strip-track { display: flex; gap: 12px; width: max-content; animation: strip 70s linear infinite; }
.strip:hover .strip-track { animation-play-state: paused; }
.strip a { width: clamp(150px, 16vw, 260px); flex: none; overflow: hidden; }
.strip img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; filter: grayscale(1); transition: filter .6s, transform 1s var(--ease-out); }
.strip a:hover img { filter: none; transform: scale(1.04); }
@keyframes strip { to { transform: translateX(-50%); } }

/* ---------- reveal ---------- */
.js [data-reveal] { clip-path: inset(0 0 100% 0); transition: clip-path 1.2s var(--ease); }
.js [data-reveal] img { transform: scale(1.18); transition: transform 1.6s var(--ease-out); }
.js [data-reveal].in { clip-path: inset(0 0 0 0); }
.js [data-reveal].in img { transform: none; }

/* ---------- story ---------- */
.st-head, .pg-head { padding: calc(var(--hd) + clamp(32px, 6vw, 90px)) var(--g) clamp(40px, 6vw, 80px); display: grid; gap: clamp(18px, 2.4vw, 30px); }
.st-eyebrow { display: flex; gap: 24px; color: var(--mute); }
.st-eyebrow a:hover { color: var(--ink); }
.mega2 { font: 300 clamp(64px, 13vw, 230px)/.86 var(--display); letter-spacing: -.035em; margin-left: -.04em; }
.mega3 { font: 300 clamp(40px, 6vw, 96px)/.95 var(--display); letter-spacing: -.03em; }
.st-meta { display: flex; flex-wrap: wrap; gap: 8px 28px; }
.st-text { font-size: clamp(18px, 1.6vw, 23px); line-height: 1.45; max-width: 36ch; }
.st-text a { border-bottom: 1px solid currentColor; }
.st-cred { color: var(--mute); max-width: 70ch; }
.quote { font-variation-settings: "SERF" 100, "ital" 11; max-width: 30ch; }

.rail { position: relative; }
.rail-track { display: flex; padding: 0 var(--g); align-items: flex-start; }
.fr { margin: 0; flex: none; position: relative; }
.fr-btn { display: block; width: 100%; overflow: hidden; cursor: zoom-in; }
.fr img { width: 100%; height: 100%; object-fit: cover; }
.fr figcaption { color: var(--mute); padding-top: 8px; }
.rail-ui { display: none; }

.rail-track { flex-direction: column; gap: 32px; }
.fr { width: 100%; }
.fr-card { display: none; }
.h-rail .rail-track { flex-direction: row; gap: clamp(10px, 1.4vw, 20px); will-change: transform; align-items: center; }
.h-rail .rail-sticky { position: sticky; top: 0; height: 100vh; height: 100svh; overflow: hidden; display: flex; flex-direction: column; justify-content: center; }
.h-rail .fr { height: calc(100svh - var(--hd) - 120px); width: calc((100svh - var(--hd) - 120px) * var(--r)); }
.h-rail .fr-card { display: block; }
.h-rail .fr-btn { height: 100%; }
.h-rail .fr img { transition: opacity .6s; }
.h-rail .fr figcaption { position: absolute; top: 100%; left: 0; }
.h-rail .rail-ui { display: flex; align-items: center; gap: 20px; position: absolute; left: var(--g); right: var(--g); bottom: calc(22px + env(safe-area-inset-bottom, 0px)); }
.rail-ctr { font-variant-numeric: tabular-nums; min-width: 70px; }
.rail-ctr b { font-weight: 400; color: var(--rosa); }
.rail-bar { flex: 1; height: 1px; background: var(--line); position: relative; }
.rail-bar i { position: absolute; inset: 0; background: var(--ink); transform-origin: left; transform: scaleX(var(--p, 0)); }

.fr-card div { height: 100%; display: flex; flex-direction: column; justify-content: space-between; padding: 24px; border: 1px solid var(--line); }
.card-t { font: 300 clamp(40px, 5vw, 80px)/.95 var(--display); letter-spacing: -.03em; font-variation-settings: "SERF" 100; }
.book .rail-sticky { padding-top: var(--hd); }

.next { padding: clamp(100px, 14vw, 220px) var(--g) clamp(60px, 8vw, 120px); display: grid; gap: 18px; border-top: 1px solid var(--line); margin-top: clamp(60px, 8vw, 120px); }
.next a { display: grid; gap: 18px; }
.next-t { font: 300 clamp(56px, 11vw, 190px)/.88 var(--display); letter-spacing: -.035em; margin-left: -.04em; }
.next .mono { color: var(--mute); }

/* ---------- grids ---------- */
.grid { display: grid; gap: clamp(10px, 1.4vw, 20px); padding: 0 var(--g); }
.grid figure { margin: 0; overflow: hidden; }
.grid img { width: 100%; height: 100%; object-fit: cover; transition: transform 1.2s var(--ease-out); }
.grid .fr-btn:hover img { transform: scale(1.035); }
/* justified rows: every frame keeps its own crop */
.grid { display: flex; flex-wrap: wrap; }
.grid figure { flex: var(--r) 1 calc(var(--r) * var(--row, 300px)); aspect-ratio: var(--r); }
.grid-beauty { --row: 360px; }
.grid-cp { --row: 380px; }
.grid-pj { --row: 300px; }
.grid::after { content: ""; flex: 10 1 0; }

.cp, .pj { padding-block: clamp(60px, 9vw, 140px) 0; display: grid; gap: clamp(24px, 3vw, 44px); }
.cp-h, .pj-h { padding: 0 var(--g); display: grid; grid-template-columns: 70px 1fr minmax(240px, 30%); gap: var(--g); align-items: end; }
.pj-h { grid-template-columns: 1fr minmax(240px, 34%); }
.cp-h p, .pj-h p { max-width: 42ch; }
.pj-prints { padding-bottom: 40px; }
.pj-prints .pj-h { align-items: start; }
.pj-prints .pj-h p.mono a { border-bottom: 1px solid currentColor; }

.mv-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: clamp(10px, 1.4vw, 20px); padding: 0 var(--g); }
.mv { margin: 0; display: grid; gap: 8px; }
.mv video { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; background: #ddd; }
.mv figcaption { display: flex; gap: 16px; }
.mv figcaption span { color: var(--rosa); }

/* ---------- about / contact ---------- */
.about-grid { display: grid; grid-template-columns: 1.4fr 1fr; gap: clamp(32px, 6vw, 120px); padding-top: clamp(24px, 4vw, 60px); }
.about-grid > * { min-width: 0; }
.about-text { display: grid; gap: 1.1em; max-width: 60ch; }
.lede { font-size: clamp(24px, 2.4vw, 36px); line-height: 1.25; font-variation-settings: "SERF" 100; }
.facts { margin: 0; display: grid; align-content: start; border-top: 1px solid var(--line); }
.facts div { display: grid; grid-template-columns: 140px 1fr; gap: 16px; padding: 14px 0; border-bottom: 1px solid var(--line); }
.facts dt { color: var(--mute); }
.facts dd { margin: 0; }
.facts a { border-bottom: 1px solid currentColor; }
.contact { min-height: 80svh; align-content: center; }
.contact-mail { font: 300 clamp(36px, 8.4vw, 150px)/1 var(--display); letter-spacing: -.035em; overflow-wrap: anywhere; }
.contact .facts { max-width: 640px; margin-top: 30px; }

/* ---------- footer ---------- */
.ft { padding: clamp(100px, 14vw, 220px) var(--g) calc(28px + env(safe-area-inset-bottom, 0px)); display: grid; gap: clamp(20px, 3vw, 36px); border-top: 1px solid var(--line); margin-top: clamp(80px, 10vw, 160px); }
.ft-label { color: var(--mute); }
.ft-mail { font: 300 clamp(34px, 7.4vw, 132px)/1 var(--display); letter-spacing: -.035em; overflow-wrap: anywhere; }
.ft-row { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 10px 28px; color: var(--mute); }
.ft-row a:hover { color: var(--ink); }
.book .ft, .book .cursor { display: none; }

/* ---------- lightbox ---------- */
.lb { position: fixed; inset: 0; z-index: 70; background: var(--paper); display: flex; align-items: center; justify-content: center; padding: calc(var(--hd) + 10px) var(--g) 60px; }
.lb img { width: auto; height: auto; max-width: 100%; max-height: calc(100svh - var(--hd) - 80px); object-fit: contain; animation: lbin .7s var(--ease-out); }
@keyframes lbin { from { opacity: 0; transform: scale(.97); } }
.lb-x { position: absolute; top: calc(18px + env(safe-area-inset-top, 0px)); right: var(--g); z-index: 2; }
.lb-ctr { position: absolute; left: var(--g); bottom: calc(22px + env(safe-area-inset-bottom, 0px)); font-variant-numeric: tabular-nums; }
.lb-prev, .lb-next { position: absolute; top: 0; bottom: 0; width: 50%; }
.lb-prev { left: 0; cursor: w-resize; } .lb-next { right: 0; cursor: e-resize; }

/* ---------- cursor ---------- */
.cursor { position: fixed; left: 0; top: 0; z-index: 80; pointer-events: none; display: none; mix-blend-mode: difference; }
@media (pointer: fine) { .js .cursor { display: block; } }
.cursor span {
  position: absolute; left: 0; top: 0; translate: -50% -50%; width: 10px; height: 10px; border-radius: 99px; background: #fff;
  display: grid; place-items: center; overflow: hidden; color: #000; font: 500 10px/1 var(--mono); letter-spacing: .08em; text-transform: uppercase;
  transition: width .45s var(--ease-out), height .45s var(--ease-out);
}
.cursor.big { mix-blend-mode: normal; }
.cursor.big span { width: 74px; height: 74px; background: var(--ink); color: var(--paper); }
.cursor.hide span { width: 0; height: 0; }

/* ---------- page transitions (cross-document view transitions) ---------- */
@view-transition { navigation: auto; }
::view-transition-old(root) { animation: vt-out .6s var(--ease) both; }
::view-transition-new(root) { animation: vt-in .8s var(--ease) both; }
::view-transition-group(*) { animation-duration: .8s; animation-timing-function: var(--ease); }
@keyframes vt-out { to { opacity: 0; transform: translateY(-4vh); } }
@keyframes vt-in { from { clip-path: inset(100% 0 0 0); } to { clip-path: inset(0); } }

/* ---------- small screens ---------- */
@media (max-width: 899px) {
  .hd-nav { display: none; }
  .hd-menu { display: block; }
  .hero-grid { grid-template-columns: 1fr 1fr; }
  .hero-img { grid-column: 1 / -1; order: -1; }
  .hero-cap { align-items: flex-end; }
  .idx a { grid-template-columns: 1fr 64px; gap: 6px 14px; }
  .idx-n { display: none; }
  .idx-t { font-size: clamp(36px, 11vw, 64px); }
  .idx-k { grid-column: 1; text-align: left; }
  .idx-thumb { display: block; grid-column: 2; grid-row: 1 / span 2; width: 64px; aspect-ratio: 4 / 5; object-fit: cover; }
  .idx:hover a:not(:hover) { opacity: 1; }
  .cp-h, .pj-h { grid-template-columns: 1fr; gap: 12px; }
  .grid { --row: 160px !important; }
  .mv-grid { grid-template-columns: 1fr; }
  .about-grid { grid-template-columns: 1fr; }
  .facts div { grid-template-columns: 110px 1fr; }
  .pv { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
  .js [data-reveal] { clip-path: none; }
  .js [data-reveal] img { transform: none; }
  @view-transition { navigation: none; }
}
.contact ~ .ft, body.contact .ft { display: none; }

.cp-brief { display: grid; gap: 12px; }
.cp-cred { color: var(--mute); }
.cp-cred a { color: var(--ink); text-transform: none; }
.cp-cred a:hover { color: var(--rosa); }

.film { margin: 0 var(--g) clamp(10px, 1.4vw, 20px); display: grid; gap: 8px; }
.film-play { position: relative; display: block; width: 100%; aspect-ratio: 16 / 9; background: #000; overflow: hidden; cursor: pointer; }
.film-play img, .film-play iframe { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; border: 0; }
.film-btn { position: absolute; left: 50%; top: 50%; translate: -50% -50%; display: grid; place-items: center; width: 96px; height: 96px; border-radius: 99px; background: var(--paper); color: var(--ink); transition: scale .5s var(--ease-out); }
.film-play:hover .film-btn { scale: 1.12; }
@media (pointer: fine) { .film-btn { opacity: 0; } .film-play:focus-visible .film-btn { opacity: 1; } }
.film figcaption { display: flex; gap: 16px; }
.film figcaption span { color: var(--rosa); }
.film figcaption a { margin-left: auto; color: var(--mute); }
.film figcaption a:hover { color: var(--ink); }

/* story pager: previous / all / next */
.pager { display: grid; grid-template-columns: 1fr auto 1fr; gap: var(--g); align-items: end; padding: clamp(28px, 4vw, 48px) var(--g); margin-top: clamp(40px, 6vw, 90px); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.pager a { display: grid; gap: 8px; }
.pager span { color: var(--mute); transition: color .3s; }
.pager b { font: 300 clamp(22px, 2.6vw, 40px)/1 var(--display); letter-spacing: -.02em; text-transform: none; transition: font-variation-settings .5s var(--ease-out); }
.pager a:hover span { color: var(--ink); }
.pager a:hover b { font-variation-settings: "SERF" 100, "ital" 11; }
.pager-all { text-align: center; justify-items: center; }
.pager-all b { font: 400 11px/1 var(--mono); letter-spacing: .04em; color: var(--mute); }
.pager-next { text-align: right; justify-items: end; }
.pager + .next { margin-top: 0; border-top: 0; }
@media (max-width: 599px) {
  .pager { grid-template-columns: 1fr 1fr; }
  .pager-all { grid-column: 1 / -1; order: 3; padding-top: 12px; border-top: 1px solid var(--line); }
  .pager-prev b, .pager-next b { font-size: 24px; }
}

.fr-clip video { width: 100%; height: 100%; object-fit: cover; background: #111; }
.fr-clip figcaption span { color: var(--rosa); }

.hero-cap .hero-n { font-weight: 400; color: var(--ink); font-variant-numeric: tabular-nums; }
.hero-bar { display: block; width: 120px; height: 1px; background: var(--line); margin-top: 6px; position: relative; }
.hero-bar i { position: absolute; inset: 0; background: var(--ink); transform-origin: left; transform: scaleX(0); }
.hero-bar.run i { transform: scaleX(1); transition: transform var(--hero-t, 4.5s) linear; }