/* ============================================================
   STUDIO ON PAPER — home page v2 ("taking it back")
   Layout is authored in vw so the collage keeps the mockup's
   proportions at any desktop width. Mobile re-flows at the end.
   ============================================================ */

/* ---------- FONTS ---------- */
@font-face {
  font-family: 'Clandy';
  src: url('fonts/Clandy-Regular.woff2') format('woff2'), url('fonts/Clandy-Regular.woff') format('woff');
  font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Clandy';
  src: url('fonts/Clandy-Italic.woff2') format('woff2'), url('fonts/Clandy-Italic.woff') format('woff');
  font-style: italic; font-display: swap;
}
@font-face {
  font-family: 'Bosceh';
  src: url('Bosceh.woff2') format('woff2'), url('Bosceh.woff') format('woff');
  font-display: swap;
}

/* Belkin — the light display sans from the mockup (body, eyebrow, captions) */
@font-face { font-family: 'Belkin'; src: url('fonts/Belkin-Light.woff') format('woff');     font-weight: 300; font-display: swap; }
@font-face { font-family: 'Belkin'; src: url('fonts/Belkin-Regular.woff') format('woff');   font-weight: 400; font-display: swap; }
@font-face { font-family: 'Belkin'; src: url('fonts/Belkin-Medium.woff') format('woff');    font-weight: 500; font-display: swap; }
@font-face { font-family: 'Belkin'; src: url('fonts/Belkin-SemiBold.woff') format('woff');  font-weight: 600; font-display: swap; }
@font-face { font-family: 'Belkin'; src: url('fonts/Belkin-Bold.woff') format('woff');      font-weight: 700; font-display: swap; }
@font-face { font-family: 'Belkin'; src: url('fonts/Belkin-ExtraBold.woff') format('woff'); font-weight: 800; font-display: swap; }

/* ---------- TOKENS ---------- */
:root {
  --bg: #060606;
  --bg-deep: #000000;
  --cream: #F3EBE4;
  --cream-dim: rgba(243, 235, 228, 0.62);
  --lilac: #BEABF8;
  --pink: #E5407A;
  --red: #C0202F;
  --line: rgba(243, 235, 228, 0.22);

  --font-black: 'Clandy', 'Old English Text MT', serif;         /* blackletter */
  --font-arc: 'Bosceh', Georgia, serif;                          /* condensed display serif */
  --font-sans: 'Belkin', 'Jost', system-ui, sans-serif;          /* light display sans */

  --ease-out-expo: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-out-quart: cubic-bezier(0.25, 1, 0.5, 1);

  --nav-h: 3.8rem;

  /* ONE art pixel, shared by every pixel illustration (hearts, dagger) so a
     pixel is the same physical size in all of them. Art grids: heart 15x13,
     dagger 32x32 (its SVG is 320x320 on a 10-unit grid). */
  --pixel: clamp(2px, 0.2vw, 3px);
  /* The hearts are a deliberate EXCEPTION — they read better smaller than the
     sparkles. Everything else stays on --pixel. */
  --pixel-heart: clamp(1.4px, 0.135vw, 2px);
}

/* ---------- RESET ---------- */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: auto; }
html, body { overflow-x: clip; }
body {
  background: var(--bg);
  color: var(--cream);
  font-family: var(--font-sans);
  font-weight: 300;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  cursor: none;
}
img { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
::selection { background: var(--pink); color: var(--bg); }

/* ============================================================
   PRELOADER — the galloping pixel horse (kept as-is from v1)
   ============================================================ */
.preloader {
  --px: 3.5px;                     /* one art pixel, shared by horse + bar + digits */
  position: fixed; inset: 0; z-index: 9999;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  background: var(--bg);
  transition: opacity 0.7s var(--ease-out-quart), visibility 0.7s;
}
.preloader.is-done { opacity: 0; visibility: hidden; pointer-events: none; }
.preloader-horse {
  --frame: calc(var(--px) * 64);   /* the sprite is 64 art px square */
  width: var(--frame); height: var(--frame);
  background-image: url('horse-gallop.svg');
  background-repeat: no-repeat;
  background-size: calc(var(--frame) * 12) var(--frame);
  background-position: 0 0;
  animation: gallop 0.78s steps(12) infinite;
}
@keyframes gallop { to { background-position: calc(var(--frame) * -12) 0; } }
.preloader-bar {
  position: relative;
  width: calc(var(--px) * 64); height: calc(var(--px) * 9);
  margin-top: calc(var(--px) * 4);
  background: url('progress-bar.svg') no-repeat center / 100% 100%;
  image-rendering: pixelated;
}
.preloader-bar-fill {
  position: absolute; left: calc(var(--px) * 2); top: calc(var(--px) * 2);
  height: calc(var(--px) * 5); width: 0; background: var(--cream);
}
.preloader-count { margin-top: calc(var(--px) * 4); color: var(--cream); line-height: 0; }
.preloader-count svg { height: calc(var(--px) * 5); width: auto; display: block; }

/* ============================================================
   CURSOR
   ============================================================ */
.cursor-dot, .cursor-ring {
  position: fixed; top: 0; left: 0; pointer-events: none; z-index: 10000;
  border-radius: 50%; transform: translate(-50%, -50%); will-change: transform;
}
.cursor-dot { width: 7px; height: 7px; background: var(--cream); transition: width .3s, height .3s, background .3s; }
.cursor-ring { width: 34px; height: 34px; border: 1px solid var(--cream-dim); opacity: .55; transition: width .3s, height .3s, opacity .3s; }
body:has(a:hover) .cursor-dot, body:has(button:hover) .cursor-dot { width: 14px; height: 14px; background: var(--pink); }
body:has(a:hover) .cursor-ring, body:has(button:hover) .cursor-ring { width: 52px; height: 52px; opacity: .25; }

/* ============================================================
   GRAIN
   ============================================================ */
.grain {
  position: fixed; inset: -25%; width: 150%; height: 150%;
  pointer-events: none; z-index: 60;
  opacity: 0.09;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='260' height='260'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  background-size: 260px 260px;
  animation: grain 0.9s steps(5) infinite;
}
@keyframes grain {
  0%   { transform: translate3d(0, 0, 0); }
  20%  { transform: translate3d(-3%, 2%, 0); }
  40%  { transform: translate3d(2%, -3%, 0); }
  60%  { transform: translate3d(-1%, 3%, 0); }
  80%  { transform: translate3d(3%, 1%, 0); }
  100% { transform: translate3d(0, 0, 0); }
}

/* ============================================================
   NAV
   ============================================================ */
.nav {
  position: fixed; top: 0; left: 0; right: 0; z-index: 100;
  height: var(--nav-h);
  display: flex; align-items: center; justify-content: space-between;
  padding: 0 2.2vw;
  border-bottom: 1px solid var(--line);
  background: linear-gradient(to bottom, rgba(6,6,6,0.65), rgba(6,6,6,0));
}
.nav-logo img { height: 1.9rem; width: auto; filter: invert(1) brightness(0.95); }
.nav-links { display: flex; gap: 2.6vw; }
.nav-link {
  font-family: var(--font-black);
  font-size: clamp(1.05rem, 1.35vw, 1.5rem);
  color: var(--cream);
  opacity: .9;
  transition: opacity .25s, color .25s;
}
.nav-link:hover { opacity: 1; color: var(--pink); }
.nav-link.is-current { opacity: 1; }
.nav-menu-btn {
  display: none; width: 40px; height: 40px; background: none; border: 0; cursor: none;
  flex-direction: column; justify-content: center; gap: 6px; align-items: center;
}
.nav-menu-btn span { display: block; width: 22px; height: 1px; background: var(--cream); transition: transform .3s; }
.nav-menu-btn.active span:first-child { transform: translateY(3.5px) rotate(45deg); }
.nav-menu-btn.active span:last-child  { transform: translateY(-3.5px) rotate(-45deg); }
.mobile-menu {
  position: fixed; inset: 0; z-index: 90; background: var(--bg);
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2rem;
  opacity: 0; visibility: hidden; transition: opacity .4s, visibility .4s;
}
.mobile-menu.active { opacity: 1; visibility: visible; }
.mobile-link { font-family: var(--font-black); font-size: 2.4rem; color: var(--cream); }

/* ============================================================
   HP BAR — pixel hearts (fixed, left)
   ============================================================ */
.hp {
  position: fixed; left: 1.9vw; top: calc(var(--nav-h) + 1.2rem); z-index: 80;
  display: flex; flex-direction: column; gap: 0.5vw;
}
.hp svg {
  width: calc(var(--pixel-heart) * 15); height: calc(var(--pixel-heart) * 13);
  display: block; overflow: visible;
  shape-rendering: crispEdges;
}
.hp .heart-outline { fill: var(--cream); }
.hp .heart-fill    { fill: var(--red); }
.hp svg.is-full .heart-fill { animation: heart-pop .5s var(--ease-out-expo); transform-origin: 50% 50%; transform-box: fill-box; }
@keyframes heart-pop { 0% { transform: scale(1); } 35% { transform: scale(1.25); } 100% { transform: scale(1); } }

/* ============================================================
   DAGGER — pixel dagger, fixed bottom right (also back-to-top)
   ============================================================ */
.dagger {
  position: fixed; right: 2.6vw; bottom: 3vw; z-index: 80;
  width: calc(var(--pixel) * 32); height: calc(var(--pixel) * 32);
  display: block;
  transition: transform .4s var(--ease-out-expo), opacity .4s;
  opacity: .92;
}
.dagger img { width: 100%; height: 100%; image-rendering: pixelated; }
.dagger:hover { transform: translateY(-6px) rotate(-8deg); opacity: 1; }

/* ============================================================
   THE STAGE
   ============================================================ */
.stage {
  position: relative;
  height: 111vw;
  overflow: visible;
}
.layer { position: absolute; will-change: transform; }
.stage img.layer { pointer-events: none; user-select: none; -webkit-user-drag: none; }

/* faint checkerboard across the whole stage — squares ~1.9vw like the mockup */
.checker {
  inset: 0; z-index: 1;
  --sq: 1.9vw;
  background: repeating-conic-gradient(var(--cream) 0 25%, transparent 0 50%) 0 0 / calc(var(--sq) * 2) calc(var(--sq) * 2);
  /* Opacity is set by RELATIVE contrast, not by eye: in the mockup the light
     squares lift the page by about 45%, and on this near-black page that is
     only ~0.012 — a value that looks far too low on paper but is right here. */
  opacity: 0.012;
  /* A soft-edged BLOCK, the way the mockup places the checkerboard, rather
     than a blob: roughly 12-66vw across and 8-102vw down. */
  -webkit-mask-image:
    linear-gradient(to right, transparent 6vw, #000 18vw, #000 56vw, transparent 70vw),
    linear-gradient(to bottom, transparent 2vw, #000 14vw, #000 90vw, transparent 106vw);
          mask-image:
    linear-gradient(to right, transparent 6vw, #000 18vw, #000 56vw, transparent 70vw),
    linear-gradient(to bottom, transparent 2vw, #000 14vw, #000 90vw, transparent 106vw);
  -webkit-mask-composite: source-in;
          mask-composite: intersect;
  pointer-events: none;
}

.curtain { left: -4vw; top: -4vw; width: 58vw; z-index: 2; }
/* Built from "elements/judith full.png" by .claude/bake-judith.js: that plate
   is a greyscale HALFTONE, so the layer is a flat red tint whose ALPHA comes
   from luminance — dots opaque, gaps transparent, shading from dot density.
   No cutout means no edges. Re-run the script to change tint or strength. */
.judith  { right: 4vw; top: -8vw; width: 66vw; z-index: 3; }

/* logo */
.logo-wrap { left: 33vw; top: 15.5vw; width: 34vw; z-index: 8; }
.logo-canvas { display: block; width: 100%; height: auto; }
.logo-fallback { width: 100%; filter: invert(1) brightness(0.96); }
.logo-wrap.is-canvas .logo-fallback { display: none; }
.logo-wrap:not(.is-canvas) .logo-canvas { display: none; }

/* sparkles: monochrome SVGs recoloured via mask */
.spark {
  display: block; background: var(--cream); z-index: 9; pointer-events: none;
  width: calc(var(--pixel) * 32); height: calc(var(--pixel) * 32);   /* all sparkles: 32x32 art grid */
  -webkit-mask-image: var(--sprite); mask-image: var(--sprite);
  -webkit-mask-position: center;      mask-position: center;
  -webkit-mask-size: contain;         mask-size: contain;
  -webkit-mask-repeat: no-repeat;     mask-repeat: no-repeat;
  animation: spark 3.2s steps(1) infinite;
}
.spark--a { --sprite: url('elements/sparkle%201.svg'); --sprite2: url('elements/sparkle2.svg'); left: 26.5vw; top: 13vw; }
.spark--b { --sprite: url('elements/sparkle2.svg');    --sprite2: url('elements/sparkle3.svg'); left: 29.5vw; top: 19.5vw; animation-delay: -1.1s; }
.spark--c { --sprite: url('elements/sparkle%201.svg'); --sprite2: url('elements/sparkle3.svg'); left: 67vw; top: 31vw; transform: rotate(180deg); animation-delay: -2s; }
.spark--d { --sprite: url('elements/sparkle3.svg');    --sprite2: url('elements/sparkle2.svg'); left: 72.5vw; top: 36.5vw; animation-delay: -0.5s; }
/* mask-image is a discrete property, so it snaps between the two frames. */
@keyframes spark {
  0%   { -webkit-mask-image: var(--sprite);  mask-image: var(--sprite); }
  72%  { -webkit-mask-image: var(--sprite2); mask-image: var(--sprite2); }
  86%  { -webkit-mask-image: var(--sprite);  mask-image: var(--sprite); }
  100% { -webkit-mask-image: var(--sprite);  mask-image: var(--sprite); }
}

/* tagline */
.tagline {
  left: 0; right: 0; top: 50.6vw; z-index: 8;
  text-align: center;
  font-family: var(--font-black);
  font-size: clamp(1rem, 1.55vw, 1.8rem);
  color: var(--cream);
  pointer-events: none;
}

/* flowers */
.kukka { z-index: 6; opacity: 0.92; filter: contrast(1.15); }
.kukka--l   { left: 1.8vw;  top: 45vw;   width: 9.6vw; }
.kukka--r   { left: 87.4vw; top: 44.6vw; width: 9.6vw; }

/* arc text */
.arc { left: 11vw; top: 56.5vw; width: 46vw; height: auto; z-index: 4; overflow: visible; }
.arc-text {
  font-family: var(--font-black);   /* the mockup sets the arc in the blackletter */
  font-size: 118px;
  fill: var(--cream);
  letter-spacing: 0.01em;
}

/* cursor trail */
.trail { left: 0; right: 0; top: 64vw; height: 48vw; z-index: 5; pointer-events: none; }
.trail-img {
  position: absolute; left: 0; top: 0;
  width: 4vw; height: auto;
  transform-origin: 50% 50%;
  box-shadow: 0 1vw 2.2vw rgba(0,0,0,0.45);
  opacity: 0;
}

.diana { left: 12.5vw; top: 66.9vw; width: 34vw; z-index: 7; }

/* vertical captions */
.caption {
  z-index: 8; pointer-events: none;
  font-family: var(--font-sans); font-weight: 300;
  font-size: clamp(0.62rem, 0.82vw, 0.95rem);
  letter-spacing: 0.02em;
  color: var(--cream-dim);
  white-space: nowrap;
}
.caption span { display: block; writing-mode: vertical-rl; }
.caption--judith { right: 2.3vw; top: 58vw; }
.caption--diana  { left: 3.2vw; top: 88vw; }
.caption--diana span { transform: rotate(180deg); }

/* ============================================================
   MANIFESTO
   ============================================================ */
.manifesto {
  position: relative;
  padding: 4vw 10vw 12vw;
}
.manifesto-rule {
  position: absolute; left: 2.3vw; top: 20vw; width: 1px; height: 22vw;
  background: var(--cream-dim);
  transform-origin: top; transform: scaleY(0);
}
.manifesto-inner { max-width: 42vw; }
.manifesto-title {
  font-family: var(--font-black);
  font-weight: normal;
  font-size: clamp(2rem, 3.4vw, 3.9rem);
  line-height: 1.02;
  color: var(--lilac);
}
.manifesto-eyebrow {
  margin-top: 1.4vw;
  padding-left: 0.5vw;
  font-family: var(--font-sans); font-weight: 300;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  font-size: clamp(0.9rem, 1.15vw, 1.3rem);
  color: var(--cream-dim);
}
.manifesto-body { margin-top: 1.6vw; }
.manifesto-body p {
  font-size: clamp(1.05rem, 1.6vw, 1.85rem);
  line-height: 1.42;
  color: var(--cream);
}
.manifesto-body p + p { margin-top: 1.3em; }

.reveal { opacity: 0; transform: translateY(24px); transition: opacity .9s var(--ease-out-quart), transform .9s var(--ease-out-quart); }
.reveal.is-in { opacity: 1; transform: none; }
.reveal:nth-child(2) { transition-delay: .1s; }
.reveal:nth-child(3) { transition-delay: .2s; }

/* ============================================================
   SELECTED WORKS + FOOTER — PLACEHOLDERS (to be designed)
   ============================================================ */
.placeholder-tag {
  display: inline-block; margin-left: .6em; padding: .15em .55em;
  border: 1px dashed var(--cream-dim); border-radius: 2px;
  font-family: var(--font-sans); font-size: .68rem; letter-spacing: .12em; text-transform: uppercase;
  color: var(--cream-dim); vertical-align: middle;
}
.works { padding: 4vw 10vw 10vw; border-top: 1px solid var(--line); }
.works-head { display: flex; align-items: baseline; gap: .6vw; margin-bottom: 2.5vw; }
.works-title { font-family: var(--font-black); font-weight: normal; font-size: clamp(1.8rem, 2.8vw, 3.2rem); color: var(--cream); }
.works-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(14vw, 1fr)); gap: 1.6vw; }
.works-item { display: block; position: relative; opacity: .85; transition: opacity .3s, transform .5s var(--ease-out-expo); }
.works-item:hover { opacity: 1; transform: translateY(-4px); }
.works-item img { width: 100%; aspect-ratio: 3 / 4; object-fit: cover; }
.works-item span { display: block; margin-top: .6em; font-size: .85rem; color: var(--cream-dim); letter-spacing: .04em; }

.footer {
  border-top: 1px solid var(--line);
  padding: 4vw 10vw 5vw;
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 2vw;
}
.footer-mark { height: 2.6rem; width: auto; filter: invert(1) brightness(.95); }
.footer-links { display: flex; gap: 2vw; font-family: var(--font-black); font-size: 1.15rem; }
.footer-links a:hover { color: var(--pink); }
.footer-copy { width: 100%; font-size: .8rem; color: var(--cream-dim); letter-spacing: .04em; }

/* ============================================================
   MOBILE / TOUCH
   ============================================================ */
@media (hover: none), (pointer: coarse) {
  body { cursor: auto; }
  .cursor-dot, .cursor-ring { display: none; }
  .trail { display: none; }
}

@media (max-width: 820px) {
  :root { --nav-h: 3.4rem; }
  .nav-links { display: none; }
  .nav-menu-btn { display: flex; }
  .grain { opacity: .08; }

  .hp { left: 3.5vw; top: calc(var(--nav-h) + 1rem); gap: 1.4vw; }
  .preloader { --px: 2.5px; }
  .dagger { right: 4vw; bottom: 4vw; }

  .stage { height: 232vw; }
  .curtain { left: -20vw; top: -6vw; width: 120vw; }
  .judith  { right: -30vw; top: 4vw; width: 120vw; opacity: .85; }
  .checker { --sq: 4vw; -webkit-mask-image: radial-gradient(ellipse 80vw 90vw at 40vw 140vw, #000 0%, transparent 100%); mask-image: radial-gradient(ellipse 80vw 90vw at 40vw 140vw, #000 0%, transparent 100%); }

  .logo-wrap { left: 12vw; top: 30vw; width: 76vw; }
  .spark--a { left: 4vw; top: 22vw; }
  .spark--b { left: 17vw; top: 31vw; }
  .spark--c { left: 74vw; top: 66vw; }
  .spark--d { left: 86vw; top: 76vw; }
  .tagline { top: 84vw; font-size: 1.1rem; padding: 0 8vw; }

  .kukka--l { left: 2vw; top: 72vw; width: 22vw; }
  .kukka--r { left: 76vw; top: 100vw; width: 22vw; }
  .arc { left: -4vw; top: 100vw; width: 108vw; }
  .diana { left: 12vw; top: 120vw; width: 70vw; }
  .caption { font-size: .62rem; }
  .caption--judith { right: 3vw; top: 128vw; }
  .caption--diana  { left: 3.5vw; top: 165vw; }

  .manifesto { padding: 10vw 8vw 16vw; }
  .manifesto-rule { display: none; }
  .manifesto-inner { max-width: none; }
  .manifesto-title { font-size: 2.1rem; }
  .manifesto-eyebrow { margin-top: 1.2rem; font-size: .85rem; }
  .manifesto-body { margin-top: 1.2rem; }
  .manifesto-body p { font-size: 1.05rem; }

  .works { padding: 10vw 8vw; }
  .works-grid { grid-template-columns: repeat(2, 1fr); gap: 4vw; }
  .footer { padding: 10vw 8vw; }
}

@media (prefers-reduced-motion: reduce) {
  .preloader-horse, .grain { animation: none; }
  .spark { animation: none; }
  .reveal { transition: none; opacity: 1; transform: none; }
}