/* ==========================================================================
   Light Zone Photography - foundations
   --------------------------------------------------------------------------
   Design tokens, reset, typography, layout primitives, buttons, the 3D scroll primitives, the custom cursor and the shared utilities. Everything here is used by every page, so nothing page-specific belongs in this file.

   Loaded by: every page
   ========================================================================== */
/* 1. TOKENS ============================================================== */

:root {
  /* Surfaces — a near-black that still has a colour temperature */
  --ink-950: #050508;
  --ink-900: #08080c;
  --ink-850: #0c0c12;
  --ink-800: #101018;
  --ink-700: #16161f;
  --ink-600: #1e1e29;

  /* Ink */
  --text: #ece8e2;
  --text-dim: #a8a29a;
  --text-faint: #6d6862;

  /* Brand: warm key light + cool rim */
  --gold-100: #fbeed6;
  --gold: #e0b072;
  --gold-deep: #b8863f;
  --rim: #7fd4e8;

  /* Per-page accent — category pages override this one variable */
  --accent: var(--gold);

  --line: rgba(255, 255, 255, 0.09);
  --line-soft: rgba(255, 255, 255, 0.05);
  --line-strong: rgba(255, 255, 255, 0.16);

  /* Type */
  --font-display: "Cormorant Garamond", "Iowan Old Style", Georgia, serif;
  --font-sans: "Inter", "Segoe UI", system-ui, -apple-system, sans-serif;

  /* Height is in the clamp on purpose: three lines of display type at 11vw
     overflow a short laptop viewport, so it also yields to available height. */
  /* The header logo drives the header height, which in turn drives how far
     the hero has to start down the page. Keeping it in one token means those
     three can never drift out of step. */
  --logo-h: clamp(2.0rem, 4.5vw, 5.5rem);
  --header-h: calc(var(--logo-h) + 3.5rem);

  --fs-display: clamp(3.2rem, min(11vw, 16vh), 10.5rem);
  --fs-h1: clamp(2.6rem, 7.2vw, 6.4rem);
  --fs-h2: clamp(2.1rem, 4.6vw, 4.2rem);
  --fs-h3: clamp(1.5rem, 2.4vw, 2.2rem);
  --fs-lead: clamp(1.05rem, 1.35vw, 1.3rem);
  --fs-body: 1rem;
  --fs-small: 0.875rem;
  --fs-micro: 0.72rem;

  /* Space & rhythm */
  --gutter: clamp(1.25rem, 5vw, 5rem);
  --shell: 1520px;
  --section-y: clamp(5.5rem, 13vh, 11rem);
  --radius: 2px;
  --radius-lg: 4px;

  /* Motion */
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --dur: 0.8s;

  /* 3D */
  --depth: 1400px;

  --shadow-lift: 0 40px 80px -30px rgba(0, 0, 0, 0.9);
  --shadow-deep: 0 60px 120px -40px rgba(0, 0, 0, 1);
}

/* 2. RESET & BASE ======================================================== */

*,
*::before,
*::after { box-sizing: border-box; }

* { margin: 0; padding: 0; }

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  /* the browser's own scroll-into-view must clear the fixed header */
  scroll-padding-top: 6rem;
}

body {
  background: var(--ink-900);
  color: var(--text);
  font-family: var(--font-sans);
  font-size: var(--fs-body);
  font-weight: 300;
  line-height: 1.65;
  letter-spacing: 0.006em;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
  text-rendering: optimizeLegibility;
}

/* A faint, fixed light-fall behind everything — the "lights zone" ground. */
body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background:
    radial-gradient(120vw 90vh at 50% -20%, rgba(224, 176, 114, 0.10), transparent 60%),
    radial-gradient(70vw 70vh at 100% 10%, rgba(127, 212, 232, 0.05), transparent 60%);
}

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

/* No blanket background here: it would paint a box behind any transparent
   artwork, the logo included. Photo containers set their own placeholder
   colour instead (.frame, .catcard__media). */
img { height: auto; }

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

button,
input,
textarea,
select { font: inherit; color: inherit; }

ul, ol { list-style: none; }

::selection { background: var(--accent); color: var(--ink-950); }

:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
  border-radius: var(--radius);
}

.skip-link {
  position: absolute;
  top: -100%;
  left: var(--gutter);
  z-index: 999;
  padding: 0.85rem 1.4rem;
  background: var(--accent);
  color: var(--ink-950);
  font-size: var(--fs-small);
  font-weight: 600;
}
.skip-link:focus { top: 1rem; }

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

/* 3. TYPOGRAPHY ========================================================== */

h1, h2, h3, h4 {
  font-family: var(--font-display);
  font-weight: 300;
  line-height: 1.02;
  letter-spacing: -0.018em;
  text-wrap: balance;
}

.display {
  font-size: var(--fs-display);
  line-height: 0.88;
  letter-spacing: -0.04em;
}

h1, .h1 { font-size: var(--fs-h1); }
h2, .h2 { font-size: var(--fs-h2); }
h3, .h3 { font-size: var(--fs-h3); line-height: 1.15; }

/* Italic serif fragments carry the "editorial" feel */
.accented {
  font-style: italic;
  color: var(--accent);
  font-weight: 300;
}

.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 0.7rem;
  font-family: var(--font-sans);
  font-size: var(--fs-micro);
  font-weight: 500;
  letter-spacing: 0.34em;
  text-transform: uppercase;
  color: var(--accent);
}
.eyebrow::before {
  content: "";
  width: 2.4rem;
  height: 1px;
  background: currentColor;
  opacity: 0.55;
}
.eyebrow--center::after {
  content: "";
  width: 2.4rem;
  height: 1px;
  background: currentColor;
  opacity: 0.55;
}

.lead {
  font-size: var(--fs-lead);
  line-height: 1.72;
  color: var(--text-dim);
  max-width: 62ch;
  font-weight: 300;
}

.prose p { color: var(--text-dim); max-width: 68ch; }
.prose p + p { margin-top: 1.35rem; }

.measure { max-width: 46rem; }
.measure-sm { max-width: 34rem; }

/* 4. LAYOUT ============================================================== */

.shell {
  width: 100%;
  max-width: var(--shell);
  margin-inline: auto;
  padding-inline: var(--gutter);
  position: relative;
  z-index: 1;
}

.section { padding-block: var(--section-y); position: relative; }
.section--tight { padding-block: clamp(3.5rem, 8vh, 6rem); }
.section--flush-top { padding-top: 0; }

.section-head {
  display: grid;
  gap: 1.4rem;
  margin-bottom: clamp(2.75rem, 6vw, 5rem);
}
.section-head--split {
  grid-template-columns: minmax(0, 1fr) minmax(0, 0.85fr);
  align-items: end;
  gap: clamp(1.5rem, 4vw, 4rem);
}
.section-head--center {
  justify-items: center;
  text-align: center;
}

.rule {
  height: 1px;
  background: linear-gradient(90deg, var(--line-strong), transparent);
  border: 0;
}

.grid { display: grid; gap: clamp(1rem, 2vw, 1.75rem); }
.grid-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.grid-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.grid-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }

/* 5. BUTTONS ============================================================= */

.btn {
  --btn-bg: transparent;
  --btn-fg: var(--text);
  --btn-line: var(--line-strong);
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.75rem;
  padding: 1.05rem 2.1rem;
  background: var(--btn-bg);
  color: var(--btn-fg);
  border: 1px solid var(--btn-line);
  border-radius: var(--radius);
  font-size: var(--fs-small);
  font-weight: 500;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  cursor: pointer;
  overflow: hidden;
  isolation: isolate;
  transform-style: preserve-3d;
  transition:
    color 0.5s var(--ease-out),
    border-color 0.5s var(--ease-out),
    transform 0.5s var(--ease-out);
}

/* The fill rises from the floor of the button */
.btn::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: var(--accent);
  transform: translateY(101%);
  transition: transform 0.6s var(--ease-out);
}

.btn:hover,
.btn:focus-visible {
  color: var(--ink-950);
  border-color: var(--accent);
  transform: translateZ(18px);
}
.btn:hover::after,
.btn:focus-visible::after { transform: translateY(0); }

.btn--solid {
  --btn-bg: var(--accent);
  --btn-fg: var(--ink-950);
  --btn-line: var(--accent);
  font-weight: 600;
}
.btn--solid::after { background: var(--gold-100); }

.btn--ghost { --btn-line: var(--line); }

.btn__arrow { transition: transform 0.5s var(--ease-out); }
.btn:hover .btn__arrow { transform: translateX(5px); }

/* Understated text link with a wipe underline */
.link-underline {
  position: relative;
  display: inline-block;
  padding-bottom: 3px;
  font-size: var(--fs-small);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--text);
}
.link-underline::after {
  content: "";
  position: absolute;
  left: 0; bottom: 0;
  width: 100%; height: 1px;
  background: var(--accent);
  transform: scaleX(0);
  transform-origin: right;
  transition: transform 0.55s var(--ease-out);
}
.link-underline:hover::after,
.link-underline:focus-visible::after {
  transform: scaleX(1);
  transform-origin: left;
}


/* --- Custom cursor (pointer devices only) ------------------------------ */
.cursor,
.cursor-dot {
  position: fixed;
  top: 0; left: 0;
  z-index: 400;
  pointer-events: none;
  border-radius: 50%;
  mix-blend-mode: difference;
  opacity: 0;
  transition: opacity 0.3s;
}
.cursor {
  width: 38px; height: 38px;
  margin: -19px 0 0 -19px;
  border: 1px solid rgba(255, 255, 255, 0.6);
  transition: opacity 0.3s, width 0.35s var(--ease-out), height 0.35s var(--ease-out),
              margin 0.35s var(--ease-out), background-color 0.35s;
}
.cursor-dot {
  width: 4px; height: 4px;
  margin: -2px 0 0 -2px;
  background: #fff;
}
body[data-cursor="on"] .cursor,
body[data-cursor="on"] .cursor-dot { opacity: 1; }
body[data-cursor="on"][data-cursor-state="hover"] .cursor {
  width: 76px; height: 76px;
  margin: -38px 0 0 -38px;
  background: rgba(255, 255, 255, 0.14);
}


/* 8. 3D PRIMITIVES ======================================================= */

/* Every scroll-revealed element enters by rotating up out of the page. */
.reveal {
  opacity: 0;
  transform: perspective(var(--depth)) translate3d(0, 46px, -60px) rotateX(9deg);
  transition:
    opacity 1s var(--ease-out),
    transform 1.15s var(--ease-out);
  will-change: transform, opacity;
}
.reveal.is-in { opacity: 1; transform: none; }

.reveal--left  { transform: perspective(var(--depth)) translate3d(-40px, 0, -70px) rotateY(10deg); }
.reveal--right { transform: perspective(var(--depth)) translate3d(40px, 0, -70px) rotateY(-10deg); }
.reveal--scale { transform: perspective(var(--depth)) scale(0.94) translateZ(-80px); }

/* Stagger children by index (set --i in markup or by JS) */
.stagger > * { transition-delay: calc(var(--i, 0) * 90ms); }

/* Parallax layer — JS writes --py */
.parallax { transform: translate3d(0, var(--py, 0px), 0); will-change: transform; }

/* --- Tilt card: the core interactive 3D object ------------------------- */
.tilt {
  perspective: var(--depth);
  perspective-origin: center;
}
.tilt__inner {
  position: relative;
  transform-style: preserve-3d;
  transform: rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg)) scale(var(--tilt-scale, 1));
  transition: transform 0.7s var(--ease-out);
  will-change: transform;
}
.tilt:hover .tilt__inner { transition-duration: 0.15s; }

/* Layers inside a tilt card float at different depths */
.tilt__layer { transform: translateZ(var(--z, 0px)); }

/* A moving specular highlight sells the third dimension */
.tilt__glare {
  position: absolute;
  inset: 0;
  z-index: 3;
  pointer-events: none;
  border-radius: inherit;
  opacity: 0;
  background: radial-gradient(
    30rem circle at var(--mx, 50%) var(--my, 50%),
    rgba(255, 255, 255, 0.22),
    transparent 55%
  );
  transition: opacity 0.5s var(--ease-out);
}
.tilt:hover .tilt__glare { opacity: 1; }


/* 12b. UTILITIES ========================================================= */

.actions { display: flex; flex-wrap: wrap; gap: 1rem; align-items: center; }
.actions--center { justify-content: center; }

.stack { display: grid; gap: 1.5rem; align-content: start; }
.stack--sm { gap: 0.9rem; }
.stack--lg { gap: 2.5rem; }

.center { text-align: center; justify-items: center; }
.mt-l { margin-top: clamp(2rem, 4vw, 3.5rem); }
.mt-m { margin-top: clamp(1.25rem, 2.5vw, 2rem); }
.dim { color: var(--text-dim); }
.faint { color: var(--text-faint); }
.nowrap { white-space: nowrap; }

/* Full-bleed strip that ignores the shell's gutters */
.bleed { margin-inline: calc(var(--gutter) * -1); }

/* Pill row of small facts */
.tags { display: flex; flex-wrap: wrap; gap: 0.5rem; }
.tag {
  padding: 0.4rem 0.9rem;
  border: 1px solid var(--line);
  border-radius: 100px;
  font-size: var(--fs-micro);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--text-dim);
  transition: border-color 0.4s, color 0.4s;
}
a.tag:hover { border-color: var(--accent); color: var(--accent); }


/* --- Responsive: global rhythm ----------------------------------------- */

@media (max-width: 760px) {
  :root { --section-y: clamp(4rem, 10vh, 6rem); }

  .grid-2,
  .grid-3,
  .grid-4 { grid-template-columns: 1fr; }

  .section-head--split { grid-template-columns: 1fr; align-items: start; }

  .cursor, .cursor-dot { display: none; }
}

@media (max-width: 1024px) {
  .grid-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* --- Reduced motion ----------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }

  *,
  *::before,
  *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }

  /* Nothing may be left invisible once the transitions are gone. */
  .reveal { opacity: 1 !important; transform: none !important; }

  .cursor, .cursor-dot { display: none; }
}

/* --- Print --------------------------------------------------------------- */

@media print {
  body::before,
  .header, .drawer, .intro, .cursor, .cursor-dot,
  .viewer, .hero__stage, .footer__wordmark { display: none !important; }
  body { background: #fff; color: #000; }
  .reveal { opacity: 1 !important; transform: none !important; }
  a[href^="http"]::after { content: " (" attr(href) ")"; font-size: 0.8em; }
}