/* ============================================================
   PROGNE.CO — MAIN SITE CSS
   Aesthetic: Raw / Textural / Brutalist Found-Art
   ============================================================ */

/* ── RESET & BASE ─────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

:root {
  --ink:      #0a0a0a;
  --paper:    #f0ede6;
  --off:      #e2ddd5;
  --chalk:    #f8f5f0;
  --accent:   #bb0303;
  --accent2:  #1a3a6e;
  --muted:    #7a7368;
  --font-disp: 'Bebas Neue', 'Arial Narrow', sans-serif;
  --font-mono: 'IBM Plex Mono', 'Courier New', monospace;
  --font-goth: 'UnifrakturMaguntia', serif;
  --section-pad: clamp(4rem, 10vw, 9rem);
}

html { scroll-behavior: smooth; }

body {
  font-family: var(--font-mono);
  font-size: 15px;
  line-height: 1.7;
  background: var(--paper);
  color: var(--ink);
  overflow-x: hidden;
  cursor: none;
  -webkit-tap-highlight-color: transparent;
}

a { color: inherit; text-decoration: none; }
ul { list-style: none; }
img, video { max-width: 100%; display: block; }
button { cursor: none; font-family: inherit; background: none; border: none; }
textarea, input, select { font-family: var(--font-mono); }

/* Visible keyboard focus, site-wide. Form fields override this with
   their own accent-underline treatment further down (outline: none
   there is intentional, not a lost focus state). */
a:focus-visible, button:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
}

/* ── GRAIN CANVAS ─────────────────────────────────────────── */
#grain {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 9000;
  mix-blend-mode: multiply;
  opacity: 0.45;
}

/* ── CUSTOM CURSOR ────────────────────────────────────────── */
.cur-dot {
  position: fixed;
  width: 6px;
  height: 6px;
  background: var(--ink);
  border-radius: 50%;
  pointer-events: none;
  z-index: 9999;
  transform: translate(-50%, -50%);
  transition: background 0.2s;
}
.cur-ring {
  position: fixed;
  width: 32px;
  height: 32px;
  border: 1.5px solid var(--ink);
  border-radius: 50%;
  pointer-events: none;
  z-index: 9998;
  transform: translate(-50%, -50%);
  transition: transform 0.12s ease, width 0.2s ease, height 0.2s ease, border-color 0.2s;
}
body.cursor-hover .cur-dot { background: var(--accent); }
body.cursor-hover .cur-ring {
  width: 54px;
  height: 54px;
  border-color: var(--accent);
}
@media (hover: none) {
  .cur-dot, .cur-ring { display: none; }
}

/* ── PRELOADER ────────────────────────────────────────────── */
#preloader {
  position: fixed;
  inset: 0;
  background: var(--ink);
  z-index: 99999;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  transition: opacity 0.6s ease, visibility 0.6s ease;
}
#preloader.done { opacity: 0; visibility: hidden; }

.pre-inner { text-align: center; }

.pre-word {
  font-family: var(--font-disp);
  font-size: clamp(3rem, 15vw, 10rem);
  color: var(--paper);
  letter-spacing: 0.1em;
  display: block;
  position: relative;
  overflow: hidden;
}
.pre-word::after {
  content: attr(data-text);
  position: absolute;
  inset: 0;
  color: var(--accent);
  clip-path: inset(100% 0 0 0);
  animation: pre-reveal 1.8s cubic-bezier(0.77,0,0.175,1) 0.4s forwards;
}
@keyframes pre-reveal {
  to { clip-path: inset(0% 0 0 0); }
}

.pre-bar {
  width: 200px;
  height: 2px;
  background: rgba(240,237,230,0.2);
  margin: 1.5rem auto 0;
  overflow: hidden;
}
.pre-fill {
  height: 100%;
  background: var(--accent);
  width: 0;
  animation: pre-load 2.2s ease forwards 0.6s;
}
@keyframes pre-load { to { width: 100%; } }

/* ── HEADER / NAV ─────────────────────────────────────────── */
#nav-header {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  padding: 1.5rem 2.5rem;
  display: flex;
  justify-content: space-between;
  align-items: center;
  z-index: 1000;
  mix-blend-mode: difference;
}

.logo {
  font-family: var(--font-disp);
  font-size: 1.6rem;
  letter-spacing: 0.15em;
  color: var(--paper);
  transition: color 0.2s;
}
.logo span { color: var(--accent); }

/* Burger */
.burger {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 4px;
  z-index: 1001;
}
.burger span {
  display: block;
  width: 28px;
  height: 2px;
  background: var(--paper);
  transition: transform 0.3s ease, opacity 0.3s ease, width 0.3s ease;
  transform-origin: center;
}
.burger span:last-child { width: 18px; }
.burger:hover span { width: 28px; }

body.nav-open .burger span:nth-child(1) { transform: translateY(8px) rotate(45deg); }
body.nav-open .burger span:nth-child(2) { opacity: 0; transform: scaleX(0); }
body.nav-open .burger span:nth-child(3) { transform: translateY(-8px) rotate(-45deg); width: 28px; }

/* Nav overlay */
.nav-overlay {
  position: fixed;
  inset: 0;
  background: var(--ink);
  z-index: 999;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
  padding: 5rem 3rem 3rem;
  clip-path: circle(0% at calc(100% - 3.5rem) 3.5rem);
  transition: clip-path 0.7s cubic-bezier(0.77, 0, 0.175, 1);
  pointer-events: none;
}
body.nav-open .nav-overlay {
  clip-path: circle(150% at calc(100% - 3.5rem) 3.5rem);
  pointer-events: all;
}

.nav-overlay ul {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
}

.nav-link {
  font-family: var(--font-disp);
  font-size: clamp(3rem, 9vw, 7rem);
  color: rgba(240,237,230,0.35);
  letter-spacing: 0.05em;
  line-height: 1.1;
  display: flex;
  align-items: baseline;
  gap: 1rem;
  transition: color 0.2s ease;
  opacity: 0;
  transform: translateX(-40px);
}
.nav-link::before {
  content: attr(data-label);
  font-family: var(--font-mono);
  font-size: 0.75rem;
  color: var(--muted);
  letter-spacing: 0.1em;
  min-width: 2rem;
}
body.nav-open .nav-link {
  opacity: 1;
  transform: translateX(0);
}
body.nav-open .nav-link:nth-child(1) { transition: opacity 0.4s 0.3s, transform 0.4s 0.3s, color 0.2s; }
body.nav-open .nav-link:nth-child(2) { transition: opacity 0.4s 0.38s, transform 0.4s 0.38s, color 0.2s; }
body.nav-open .nav-link:nth-child(3) { transition: opacity 0.4s 0.46s, transform 0.4s 0.46s, color 0.2s; }
body.nav-open .nav-link:nth-child(4) { transition: opacity 0.4s 0.54s, transform 0.4s 0.54s, color 0.2s; }
body.nav-open .nav-link:nth-child(5) { transition: opacity 0.4s 0.62s, transform 0.4s 0.62s, color 0.2s; }
.nav-link:hover { color: var(--paper); }
.nav-link--cta { color: var(--accent); }
.nav-link--cta:hover { color: var(--paper); }

.nav-footer {
  margin-top: auto;
  display: flex;
  gap: 2rem;
  font-family: var(--font-mono);
  font-size: 0.7rem;
  color: var(--muted);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  opacity: 0;
  transition: opacity 0.4s 0.7s;
}
body.nav-open .nav-footer { opacity: 1; }

/* ── SECTIONS ─────────────────────────────────────────────── */
.section { position: relative; width: 100%; padding: var(--section-pad) 0; }
.section--dark { background: var(--ink); color: var(--paper); }
.container { max-width: 1200px; margin: 0 auto; padding: 0 2.5rem; }

.section-header {
  display: flex;
  align-items: baseline;
  gap: 1.5rem;
  margin-bottom: clamp(3rem, 6vw, 5rem);
  border-bottom: 1px solid currentColor;
  padding-bottom: 1rem;
  opacity: 0.9;
}
.section-num {
  font-family: var(--font-mono);
  font-size: 0.7rem;
  letter-spacing: 0.2em;
  color: var(--accent);
  padding-top: 0.3em;
}
.section-title {
  font-family: var(--font-disp);
  font-size: clamp(2.5rem, 6vw, 5rem);
  letter-spacing: 0.05em;
  line-height: 1;
  font-weight: 400;
}

/* ── HERO ─────────────────────────────────────────────────── */
#hero {
  min-height: 100svh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 0;
  overflow: hidden;
  position: relative;
}

.hero-bg {
  position: absolute;
  inset: 0;
  pointer-events: none;
}

.hero-grid {
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(10,10,10,0.07) 1px, transparent 1px),
    linear-gradient(90deg, rgba(10,10,10,0.07) 1px, transparent 1px);
  background-size: 60px 60px;
}

.hero-content {
  position: relative;
  z-index: 2;
  padding: 8rem 2.5rem 8rem;
  max-width: 1200px;
  margin: 0 auto;
  width: 100%;
}

.hero-eyebrow {
  font-family: var(--font-mono);
  font-size: 0.72rem;
  letter-spacing: 0.2em;
  color: var(--muted);
  text-transform: uppercase;
  margin-bottom: 1.5rem;
}

.hero-title {
  font-family: var(--font-disp);
  font-size: clamp(6rem, 22vw, 18rem);
  line-height: 0.88;
  letter-spacing: -0.01em;
  color: var(--ink);
  display: flex;
  flex-direction: column;
  margin-bottom: 3rem;
  pointer-events: none;
  user-select: none;
  position: relative;
}
.ht-line {
  display: block;
  -webkit-text-stroke: 1.5px var(--ink);
  position: relative;
}
.ht-line--right {
  text-indent: 0.25em;
  color: transparent;
  -webkit-text-stroke: 1.5px var(--ink);
}
.ht-line--right::after {
  content: 'GNE';
  position: absolute;
  left: -2px;
  color: var(--accent);
  -webkit-text-stroke: 0;
  clip-path: inset(0 100% 0 0);
  animation: hero-stroke 1.8s cubic-bezier(0.77,0,0.175,1) 2.4s forwards;
}
@keyframes hero-stroke { to { clip-path: inset(0 0% 0 0); } }

/* ── HERO BIRD ────────────────────────────────────────────── */
.hero-bird {
  position: absolute;
  right: 0;
  top: 50%;
  transform: translateY(-50%);
  height: 70vh;
  width: auto;
  max-width:70%;
  object-fit: contain;
  pointer-events: none;
  z-index: 1;
  opacity: 0.92;
}

.hero-sub {
  display: flex;
  align-items: flex-end;
  gap: 3rem;
  flex-wrap: wrap;
  position: relative;
  z-index: 3;
}
.hero-sub p {
  font-family: var(--font-mono);
  font-size: 0.9rem;
  line-height: 1.7;
  color: var(--muted);
  max-width: 28ch;
}

/* Buttons */
.btn-raw {
  display: inline-block;
  font-family: var(--font-mono);
  font-size: 0.75rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  padding: 0.85rem 2rem;
  border: 1.5px solid var(--ink);
  color: var(--ink);
  background: transparent;
  position: relative;
  overflow: hidden;
  transition: color 0.25s ease;
  white-space: nowrap;
}
.btn-raw::before {
  content: '';
  position: absolute;
  inset: 0;
  background: var(--ink);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.3s cubic-bezier(0.77,0,0.175,1);
  z-index: -1;
}
.btn-raw:hover { color: var(--paper); }
.btn-raw:hover::before { transform: scaleX(1); }

.section--dark .btn-raw {
  border-color: var(--paper);
  color: var(--paper);
}
.section--dark .btn-raw::before { background: var(--paper); }
.section--dark .btn-raw:hover { color: var(--ink); }

.hero-scroll-hint {
  position: absolute;
  bottom: 2.5rem;
  right: 2.5rem;
  font-family: var(--font-mono);
  font-size: 0.65rem;
  letter-spacing: 0.2em;
  color: var(--muted);
  writing-mode: vertical-rl;
  text-transform: lowercase;
  z-index: 2;
  animation: blink 2.5s step-end infinite;
}
@keyframes blink { 50% { opacity: 0.2; } }

/* ── MARQUEE BAR ──────────────────────────────────────────── */
/*
  This is the single scrolling-motion beat on the page (the hero's
  own ticker was removed so this doesn't compete with itself).
  Content is duplicated (10 items = 2× the same 5), so -50% is
  exactly one full copy and the loop is seamless.
*/
.marquee-bar {
  background: var(--accent);
  overflow: hidden;
  padding: 0.8rem 0;
  border-top: 2px solid var(--ink);
  border-bottom: 2px solid var(--ink);
}
.marquee-track {
  display: flex;
  gap: 3rem;
  white-space: nowrap;
  width: max-content;
  animation: marquee-scroll 28s linear infinite;
}
.marquee-track span {
  font-family: var(--font-disp);
  font-size: 1.1rem;
  letter-spacing: 0.2em;
  color: var(--paper);
}

@keyframes marquee-scroll {
  0%   { transform: translateX(0); }
  100% { transform: translateX(-50%); }
}

/* ── WORK GRID ────────────────────────────────────────────── */
.work-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: auto auto;
  gap: 2px;
}
.work-card--wide {
  grid-column: 2 / 4;
}
.work-card {}
.work-card-img {
  aspect-ratio: 4/5;
  position: relative;
  overflow: hidden;
  background: var(--off);
}
.work-card--wide .work-card-img {
  aspect-ratio: 16/7;
}
/* Row 2 (the notebook square + the wide Event Drops card) needs to
   line up exactly. Independent aspect-ratios on a 1-col vs 2-col-span
   item will never produce equal heights by coincidence — a 4:5 image
   at one column's width is taller than a 16:7 image at two columns'
   width. Overriding both to one explicit height (rather than a ratio)
   is what actually guarantees the row — and the caption borders below
   it — sit level. */
.work-card-img--row2 {
  aspect-ratio: unset;
  height: clamp(240px, 27vw, 380px);
}

/* Base ink washes per project type — visible fallback if a photo is
   ever missing, and the tint that keeps every card reading as one
   family even though the photos vary a lot in color. */
.wc-1 { background: #1a1a1a; }
.wc-2 { background: #2a2320; }
.wc-3 { background: #0f1a2e; }
.wc-4 { background: #1f1008; }
.wc-5 { background: #14201c; }

/* Real production photography, when present. Sits above the base
   wash, below the noise/halftone/gradient treatment — the print
   texture reads as applied TO the photo, like ink on a printed
   photo, rather than the photo being a separate element. */
.wc-photo {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: 0;
  filter: contrast(1.06) saturate(0.88);
  transform: scale(1);
  transition: transform 0.7s cubic-bezier(0.16,1,0.3,1);
}
.work-card:hover .wc-photo { transform: scale(1.045); }

/* Fine paper-grain noise, sits just above the base wash */
.work-card-img::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.75' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noise)' opacity='0.25'/%3E%3C/svg%3E");
  background-size: 200px 200px;
  mix-blend-mode: overlay;
  opacity: 0.6;
  z-index: 1;
}

/* Halftone dot screen — the actual texture of a printed film separation.
   This is the placeholder's real content: it reads as "this is a print
   shop" even with zero photography. */
.wc-halftone {
  position: absolute;
  inset: 0;
  background-image: radial-gradient(var(--paper) 1px, transparent 1.7px);
  background-size: 8px 8px;
  opacity: 0.16;
  mix-blend-mode: overlay;
  z-index: 2;
  pointer-events: none;
}

/* Bottom shadow so the label/tag stay legible over any wash */
.work-card-img::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(10,10,10,0.7) 0%, transparent 55%);
  z-index: 3;
}

/* Registration mark — the crosshair-in-circle press operators use to
   align color layers. Sits top-right, like a mark on a print proof. */
.wc-reg {
  position: absolute;
  top: 0.9rem;
  right: 0.9rem;
  color: var(--accent);
  opacity: 0.85;
  z-index: 4;
}
.wc-reg svg { display: block; }

/* Ink spec tag — small, factual, mono. Reads like a real production tag. */
.wc-ink-tag {
  position: absolute;
  top: 0.9rem;
  left: 0.9rem;
  font-family: var(--font-mono);
  font-size: 0.62rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: rgba(240,237,230,0.55);
  z-index: 4;
}

.wc-label {
  position: absolute;
  bottom: 1rem;
  left: 1rem;
  font-family: var(--font-mono);
  font-size: 0.7rem;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: rgba(240,237,230,0.7);
  z-index: 4;
}

.work-card-desc {
  font-family: var(--font-mono);
  font-size: 0.75rem;
  line-height: 1.6;
  color: rgba(240,237,230,0.5);
  padding: 0.75rem 0;
  border-bottom: 1px solid rgba(240,237,230,0.1);
}

.work-card-img { cursor: none; }
.work-card:hover .work-card-img::after {
  background: linear-gradient(to top, rgba(200,56,10,0.6) 0%, transparent 60%);
  transition: background 0.4s ease;
}

/* ── PROCESS ──────────────────────────────────────────────── */
#process .container {
  position: relative;
}

/* Line-art bird mark, quiet background art in the empty right margin.
   Fixed size + contain (was an invalid "background-size: absolute",
   which browsers silently ignore) so it renders predictably at any
   viewport width instead of relying on an oversized 2000px box. */
#process .container::before {
  content: '';
  position: absolute;
  top: -6rem;
  right: -4rem;
  width: 640px;
  height: 640px;
  background-image: url('assets/bird-contour.svg');
  background-repeat: no-repeat;
  background-size: contain;
  background-position: top right;
  opacity: 0.08;
  pointer-events: none;
  z-index: 0;
}

.process-section { padding-bottom: clamp(3rem, 6vw, 5rem); }

.process-intro {
  position: relative;
  z-index: 1;
  font-family: var(--font-mono);
  font-size: 0.85rem;
  color: var(--muted);
  letter-spacing: 0.05em;
  margin-top: -1.5rem;
  margin-bottom: 2.5rem;
}

/* ── PRESS STAGE ──────────────────────────────────────────────
   The pinned unit. Fixed to 100svh so the carousel and the progress
   bar live in the same frame with no overflow below the fold —
   that's what makes the progress bar read as part of the experience
   instead of arriving late. */
.press-stage {
  position: relative;
  height: 100svh;
  min-height: 480px;
  display: flex;
  flex-direction: column;
  background: var(--chalk);
  border-top: 1px solid rgba(10,10,10,0.1);
  border-bottom: 1px solid rgba(10,10,10,0.1);
  overflow: hidden;
}

/* ── PRESS PASS CAROUSEL ──────────────────────────────────── */
/* Baseline: a native horizontal scroll-snap strip. Works with zero
   JS, respects reduced-motion by default, and is what mobile always
   uses. On wide viewports with motion allowed, script.js upgrades
   this into a GSAP scroll-pinned experience — see initPressPass(). */
.press-pass {
  position: relative;
  width: 100%;
  flex: 1 1 auto;
  min-height: 0;
  overflow-x: auto;
  overflow-y: hidden;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}
.press-pass::-webkit-scrollbar { display: none; }

/* Once JS confirms desktop + motion allowed, .press-stage gets
   .is-enhanced and this switches .press-track to a GSAP transform
   instead of native scroll. */
.press-stage.is-enhanced .press-pass {
  overflow: hidden;
}

.press-track {
  display: flex;
  height: 100%;
  width: max-content;
  will-change: transform;
}

.press-panel {
  position: relative;
  flex: 0 0 100vw;
  max-width: 100vw;
  height: 100%;
  scroll-snap-align: start;
  display: flex;
  align-items: center;
  overflow: hidden;
}

.press-ink-wash {
  position: absolute;
  inset: 0;
  mix-blend-mode: multiply;
  opacity: 0.16;
  clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%);
  pointer-events: none;
  z-index: 0;
}
.press-photo {
  position: absolute;
  inset: 0;
  z-index: 0;
  opacity: 0.22;
}
.press-photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: grayscale(0.4);
}
.press-panel--stage1 .press-ink-wash { background: var(--accent2); }
.press-panel--stage2 .press-ink-wash { background: var(--accent); }
.press-panel--stage3 .press-ink-wash { background: var(--ink); }
.press-panel--stage4 .press-ink-wash { background: var(--muted); }

.press-panel-inner {
  position: relative;
  z-index: 1;
  max-width: 640px;
  padding: 3rem clamp(2rem, 6vw, 6rem);
}

.press-meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 2.5rem;
}
.press-tag {
  font-family: var(--font-mono);
  font-size: 0.68rem;
  letter-spacing: 0.15em;
  color: var(--accent);
  text-transform: uppercase;
}
.press-reg { color: var(--muted); opacity: 0.7; }
.press-reg svg { display: block; }

.press-icon {
  color: var(--ink);
  margin-bottom: 1.5rem;
  opacity: 0.85;
}

.press-num {
  display: block;
  font-family: var(--font-goth);
  font-size: 3.25rem;
  line-height: 1;
  color: var(--accent);
  margin-bottom: 0.5rem;
}

.press-panel-inner h3 {
  font-family: var(--font-disp);
  font-size: clamp(2rem, 4vw, 2.75rem);
  letter-spacing: 0.04em;
  font-weight: 400;
  color: var(--ink);
  margin-bottom: 0.9rem;
}

.press-panel-inner p {
  font-family: var(--font-mono);
  font-size: 0.88rem;
  line-height: 1.8;
  color: var(--ink);
  opacity: 0.75;
  max-width: 44ch;
}

/* ── PRESS PROGRESS BAR ───────────────────────────────────── */
.press-progress {
  flex: 0 0 auto;
  max-width: 1200px;
  width: 100%;
  margin: 0 auto;
  padding: 1.25rem 2.5rem;
}
.press-progress-track {
  position: relative;
  height: 2px;
  background: rgba(10,10,10,0.12);
  margin-bottom: 1rem;
}
.press-progress-fill {
  position: absolute;
  left: 0; top: 0; bottom: 0;
  width: 0%;
  background: var(--accent);
  transition: width 0.2s linear;
}
.press-progress-ticks {
  display: flex;
  justify-content: space-between;
}
.press-tick {
  font-family: var(--font-mono);
  font-size: 0.68rem;
  letter-spacing: 0.1em;
  color: var(--muted);
  padding: 0.3rem 0.1rem;
  transition: color 0.2s ease;
}
.press-tick.active { color: var(--accent); }
.press-tick:hover { color: var(--ink); }

@media (max-width: 600px) {
  .press-stage { height: auto; min-height: 0; }
  .press-panel { height: auto; min-height: 66vh; }
  .press-panel-inner { padding: 2.5rem 1.5rem; }
  .press-progress { padding: 1rem 1.5rem; }
}

/* ── STATEMENT ────────────────────────────────────────────── */
.statement-section {
  background: var(--ink) url('assets/photos/birds-sunset.jpg') center 30% / cover no-repeat;
  padding: clamp(5rem, 12vw, 10rem) 2.5rem;
  text-align: center;
  position: relative;
  overflow: hidden;
}
.statement-section::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(10,10,10,0.82) 0%, rgba(10,10,10,0.65) 45%, rgba(10,10,10,0.85) 100%);
  z-index: 1;
}

/* The watermark used to be centered on the whole .statement-section
   box (padding + content). On mobile the quote wraps into many more
   lines than desktop, so the section gets much taller — and "50% of
   the section" drifts away from where the quote actually sits.
   Centering it on .statement-inner instead (sized exactly to the
   blockquote + cite) keeps it tracking the visible text at any
   viewport or line-wrap count. */
.statement-inner {
  position: relative;
  z-index: 3;
}

blockquote {
  position: relative;
  font-family: var(--font-goth);
  font-size: clamp(2rem, 5vw, 4rem);
  line-height: 1.4;
  color: var(--paper);
  margin-bottom: 1.5rem;
}
/* Anchored to the blockquote specifically, not .statement-inner as a
   whole — the cite line below the quote was adding height that
   pulled the combined box's center (and this watermark, when it was
   centered on that combined box) down past the actual quote text. */
blockquote::before {
  content: 'PROGNE';
  position: absolute;
  font-family: var(--font-disp);
  font-size: 30vw;
  color: rgba(240,237,230,0.07);
  top: 50%;
  left: 50%;
  transform: translate(-50%,-50%);
  pointer-events: none;
  white-space: nowrap;
  line-height: 1;
  z-index: -1;
}

cite {
  font-family: var(--font-mono);
  font-size: 0.75rem;
  letter-spacing: 0.15em;
  color: var(--accent);
  font-style: normal;
}

/* ── CONNECT ──────────────────────────────────────────────── */
.connect-grid {
  display: grid;
  grid-template-columns: 1fr 1.4fr;
  gap: 5rem;
  align-items: start;
}

.connect-info p {
  font-family: var(--font-mono);
  font-size: 0.9rem;
  line-height: 1.8;
  color: rgba(240,237,230,0.65);
  margin-bottom: 1rem;
}
.inline-link {
  color: var(--accent);
  text-decoration: none;
  border-bottom: 1px solid rgba(200,56,10,0.4);
  transition: border-color 0.2s;
}
.inline-link:hover { border-color: var(--accent); }

.connect-details {
  margin-top: 2.5rem;
  display: flex;
  flex-direction: column;
  gap: 1rem;
}
.connect-details > div {
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
  padding-bottom: 1rem;
  border-bottom: 1px solid rgba(240,237,230,0.1);
}
.cd-label {
  font-family: var(--font-mono);
  font-size: 0.65rem;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--muted);
}
.cd-val {
  font-family: var(--font-mono);
  font-size: 0.85rem;
  color: var(--paper);
}
.cd-val[href]:hover { color: var(--accent); }

/* Form */
.connect-form {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
}

.field-group {
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
}
.field-group label {
  font-family: var(--font-mono);
  font-size: 0.65rem;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--muted);
}
.field-group input,
.field-group textarea {
  background: transparent;
  border: none;
  border-bottom: 1px solid rgba(240,237,230,0.25);
  color: var(--paper);
  padding: 0.6rem 0;
  font-size: 0.875rem;
  outline: none;
  resize: vertical;
  transition: border-color 0.2s;
  width: 100%;
}
.field-group input::placeholder,
.field-group textarea::placeholder { color: rgba(240,237,230,0.3); }
.field-group input:focus,
.field-group textarea:focus {
  border-bottom-color: var(--accent);
  box-shadow: 0 1px 0 0 var(--accent);
}

.btn-submit {
  align-self: flex-start;
  cursor: none;
}

.form-notice {
  font-family: var(--font-mono);
  font-size: 0.75rem;
  letter-spacing: 0.1em;
  color: var(--accent);
  min-height: 1.2em;
}

/* ── FOOTER ───────────────────────────────────────────────── */
.site-footer {
  background: var(--ink);
  border-top: 1px solid rgba(240,237,230,0.1);
  padding: 2rem 2.5rem;
}
.footer-inner {
  max-width: 1200px;
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 1rem;
}
.footer-logo {
  font-family: var(--font-disp);
  font-size: 1.1rem;
  letter-spacing: 0.2em;
  color: rgba(240,237,230,0.5);
}
.footer-copy {
  font-family: var(--font-mono);
  font-size: 0.7rem;
  letter-spacing: 0.08em;
  color: rgba(240,237,230,0.3);
}
.footer-portal {
  font-family: var(--font-mono);
  font-size: 0.7rem;
  letter-spacing: 0.12em;
  color: var(--accent);
  text-transform: uppercase;
  border-bottom: 1px solid rgba(200,56,10,0.3);
  transition: border-color 0.2s;
}
.footer-portal:hover { border-color: var(--accent); }

/* ── SCROLL ANIMATIONS ────────────────────────────────────── */
.fade-up {
  opacity: 0;
  transform: translateY(40px);
  transition: opacity 0.7s ease, transform 0.7s ease;
}
.fade-up.visible {
  opacity: 1;
  transform: translateY(0);
}

/* ── RESPONSIVE ───────────────────────────────────────────── */
@media (max-width: 900px) {
  .work-grid {
    grid-template-columns: 1fr 1fr;
  }
  .work-card--wide { grid-column: 1 / 3; }
  /* At 2 columns the notebook card re-pairs with Art Editions (not
     the wide card anymore), so the row-2 height override no longer
     applies — each reverts to its own natural ratio. */
  .wc-5.work-card-img--row2 { aspect-ratio: 4/5; height: auto; }
  .work-card--wide .work-card-img--row2 { aspect-ratio: 16/7; height: auto; }
  .connect-grid {
    grid-template-columns: 1fr;
    gap: 3rem;
  }
  /* On tablet, bird shrinks to not crowd the text */
  .hero-bird {
    height: 40vh;
    max-width: 45%;
  }
  /* Process line art gets cramped next to text at this width */
  #process .container::before {
    display: none;
  }
}

@media (max-width: 600px) {
  #nav-header { padding: 1.2rem 1.5rem; }
  .hero-content { padding: 7rem 1.5rem 6rem; }
  .container { padding: 0 1.5rem; }
  /* The base clamp(6rem, 22vw, 18rem) never actually scales on phone
     widths — 22vw is smaller than the 6rem floor on anything under
     ~727px, so it just sits pinned at the floor regardless of screen
     size. That's why PRO/GNE were leaving empty space on the right
     instead of stretching edge to edge. A steeper vw coefficient
     here makes the preferred value actually win on phone widths. */
  /* Dialed back from an earlier attempt that overcorrected — 46vw
     pushed PRO/GNE close to full viewport width with almost no
     breathing room, which read as oversized and cramped rather than
     bold. This aims for roughly 75-80% of the screen width instead
     of edge-to-edge, closer to how it should actually feel next to
     the eyebrow line and body copy. */
  .hero-title { font-size: clamp(4rem, 30vw, 8rem); }
  /* The quote wraps into 4 lines on phone widths instead of 3, so the
     desktop watermark size (30vw) — still centered correctly — only
     reaches the middle two lines and reads as "too low" even though
     it's mathematically centered. Sizing it up so it actually spans
     close to the full 4-line block fixes the perception without
     touching the (correct) centering logic. */
  blockquote::before { font-size: 48vw; }
  /* Step-jump dots (01-04 under the carousel) were ~23px tall — well
     under the 44px minimum touch target, and four of them sit right
     next to each other, so mis-taps are likely on a phone. Label
     stays the same visual size; the actual hit area grows. */
  .press-tick {
    min-width: 44px;
    min-height: 44px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
  }
  .hero-sub { flex-direction: column; align-items: flex-start; gap: 1.5rem; }
  .work-grid { grid-template-columns: 1fr; }
  .work-card--wide { grid-column: 1; }
  .step { grid-template-columns: 50px 1fr; gap: 1rem; }
  .step-divider { padding-left: 50px; }
  .footer-inner { flex-direction: column; align-items: flex-start; }
  .nav-overlay { padding: 5rem 1.5rem 2rem; }
  /* On mobile, hide the bird so it doesn't overlap the large title */
  .hero-bird { display: none; }
}

/* ── BUSINESS PORTAL PLACEHOLDER (local.html) ─────────────────
   Deliberately lightweight — no preloader, no custom cursor, no
   grain canvas. A "coming soon" page should load instantly and get
   out of the way, not put a visitor through the full site's intro
   sequence for two lines of text. */
.placeholder-page {
  cursor: auto;
  background: var(--ink);
  color: var(--paper);
  min-height: 100svh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 2rem;
}
.placeholder-page * { cursor: auto; }

.placeholder-wrap {
  text-align: center;
  max-width: 560px;
}

.placeholder-logo {
  display: inline-block;
  margin-bottom: 3rem;
  font-family: var(--font-disp);
  font-size: 1.6rem;
  letter-spacing: 0.15em;
  color: var(--paper);
}
.placeholder-logo span { color: var(--accent); }

.placeholder-bird {
  height: 64px;
  width: auto;
  margin: 0 auto 2rem;
  opacity: 0.85;
}

.placeholder-page .hero-eyebrow {
  margin-bottom: 1rem;
}

.placeholder-title {
  font-family: var(--font-goth);
  font-size: clamp(2.75rem, 8vw, 5rem);
  line-height: 1.15;
  color: var(--paper);
  margin-bottom: 1.5rem;
}

.placeholder-sub {
  font-family: var(--font-mono);
  font-size: 0.9rem;
  line-height: 1.8;
  color: rgba(240,237,230,0.65);
  max-width: 42ch;
  margin: 0 auto 2.5rem;
}

.placeholder-actions {
  display: flex;
  gap: 1rem;
  justify-content: center;
  flex-wrap: wrap;
}
.placeholder-page .btn-raw {
  border-color: var(--paper);
  color: var(--paper);
}
.placeholder-page .btn-raw::before { background: var(--paper); }
.placeholder-page .btn-raw:hover { color: var(--ink); }
.placeholder-page .btn-raw--ghost {
  border-color: rgba(240,237,230,0.3);
  color: rgba(240,237,230,0.7);
}
.placeholder-page .btn-raw--ghost::before { background: rgba(240,237,230,0.7); }
.placeholder-page .btn-raw--ghost:hover { color: var(--ink); }

@media (max-width: 600px) {
  .placeholder-actions { flex-direction: column; align-items: stretch; }
}