/* ============================================================================
   16 — HUMMINGBIRD  ·  Wildlife Photographer Atelier
   National Geographic / hand-press editorial · paper + sky · light theme only
   ============================================================================ */
:root{
  /* Paper palette — warm cream */
  --paper:        #fdfaf3;
  --paper-2:      #f6efe1;
  --paper-soft:   #ece2cf;
  --paper-edge:   #d9cdb2;

  /* Sky palette — puresky cloud-light, warm dawn */
  --sky-hi:       #eaf3f8;
  --sky-mid:      #d8e9f0;
  --sky-warm:     #f3e9d4;

  /* Ink */
  --ink:          #1a1916;
  --ink-soft:     #2a2823;
  --ink-mute:     #6b6750;
  --ink-faint:    #98947b;

  /* Subject palette */
  --forest:       #2f5a3d;     /* forest accent — pull-quotes, kicker rules */
  --forest-deep:  #1f4029;
  --jewel:        #3a7d5f;     /* iridescent hummingbird throat */
  --jewel-deep:   #245a44;
  --petal:        #d97a7a;     /* hibiscus petal pink */
  --petal-deep:   #b85b5b;
  --olive-shadow: #6b6750;

  /* Lines, hairline rules — like printed page rules */
  --rule:         rgba(26, 25, 22, 0.16);
  --rule-soft:    rgba(26, 25, 22, 0.08);
  --rule-warm:    rgba(184, 91, 91, 0.32);

  /* Type */
  --serif:        'Fraunces', 'EB Garamond', Georgia, serif;
  --sans:         'Inter', -apple-system, BlinkMacSystemFont, system-ui, sans-serif;

  /* Motion */
  --ease-paper:   cubic-bezier(0.22, 0.61, 0.36, 1);
  --ease-bird:    cubic-bezier(0.58, 1, 0, 0);
  --ease-out:     cubic-bezier(0.16, 1, 0.3, 1);
}

/* ----- Reset + base ------------------------------------------------------- */
*{box-sizing:border-box; margin:0; padding:0}
html, body{ width:100%; height:100% }
html{
  /* Sky-cream gradient — top-left bright sky bleeding into bottom warm paper */
  background:
    radial-gradient(120% 80% at 18% 8%,  rgba(234, 243, 248, 0.95) 0%, transparent 40%),
    radial-gradient(140% 110% at 92% 0%, rgba(216, 233, 240, 0.6)  0%, transparent 50%),
    radial-gradient(100% 100% at 50% 100%, var(--paper-2) 0%, var(--paper) 100%);
  color:var(--ink);
  font-family:var(--serif);
  scroll-behavior:smooth;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}
body{
  overflow:hidden;
  font-size:calc(15px * var(--res-scale-text, 1));
  line-height:1.55;
  background:transparent;
}
body.is-loading{ overflow:hidden }
::selection{ background:var(--petal); color:var(--paper) }

button, a{ font-family:inherit; color:inherit }
button{ background:none; border:0; cursor:pointer }
a{ text-decoration:none; color:inherit }

/* ----- WebGL backdrop — z:0 above the html gradient --------------------- */
#fxCanvas{
  position:fixed; inset:0;
  width:100%; height:100%;
  z-index:0;
  display:block;
  background:transparent;
  pointer-events:none;
}

/* ----- Paper grain — fine warm noise on top of canvas, mix-blend multiply */
.paper-grain{
  position:fixed; inset:0; z-index:2;
  pointer-events:none;
  opacity:0.34;
  mix-blend-mode:multiply;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='200' height='200'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 0.42 0 0 0 0 0.39 0 0 0 0 0.32 0 0 0 0.55 0'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>");
}

/* ----- Sky tint — soft cream wash over edges (vignette but warm) -------- */
.sky-tint{
  position:fixed; inset:0; z-index:1;
  pointer-events:none;
  background:
    radial-gradient(140% 100% at 50% 50%, transparent 38%, rgba(253, 250, 243, 0.55) 78%, rgba(217, 206, 178, 0.4) 100%),
    linear-gradient(180deg, transparent 0%, transparent 70%, rgba(243, 233, 212, 0.42) 100%);
}

/* ----- Contact-sheet corner marks — REMOVED (was HUD chrome).
        Magazine spreads do not bracket the page like a viewfinder. */
.contact-marks{ display:none !important }

/* ============================================================================
   MASTHEAD — magazine page header, fixed top
   ============================================================================ */
.masthead{
  position:fixed; top:38px; left:64px; right:64px;
  z-index:50;
  display:flex; align-items:center; justify-content:space-between; gap:24px;
  pointer-events:auto;
}
.masthead__brand{ display:flex; align-items:center; gap:14px; color:var(--ink) }
.masthead__mark{ width:36px; height:36px; color:var(--forest); flex:0 0 auto }
.masthead__words{ display:flex; flex-direction:column; line-height:1 }
.masthead__title{
  font:500 italic 22px/1 var(--serif);
  letter-spacing:-0.005em;
  color:var(--ink);
}
.masthead__sub{
  margin-top:5px;
  font:500 9.5px/1 var(--sans);
  letter-spacing:0.32em;
  text-transform:uppercase;
  color:var(--ink-mute);
}
.masthead__nav{ display:flex; align-items:center; gap:28px }
.masthead__nav a{
  font:500 10.5px/1 var(--sans);
  letter-spacing:0.28em;
  text-transform:uppercase;
  color:var(--ink-mute);
  position:relative;
  padding:6px 0;
  transition:color 0.4s var(--ease-paper);
}
.masthead__nav a::after{
  content:""; position:absolute; left:0; right:0; bottom:0;
  height:1px; background:var(--forest); transform:scaleX(0);
  transform-origin:right; transition:transform 0.5s var(--ease-paper);
}
.masthead__nav a:hover{ color:var(--forest) }
.masthead__nav a:hover::after{ transform:scaleX(1); transform-origin:left }
.masthead__nav a.is-active{ color:var(--ink) }
.masthead__nav a.is-active::after{ transform:scaleX(1); background:var(--ink) }

/* ============================================================================
   COLOPHON — bottom rail, page-bottom meta
   ============================================================================ */
.colophon{
  position:fixed; bottom:36px; left:64px; right:64px;
  z-index:5;
  display:flex; align-items:center; gap:20px;
  font:500 9.5px/1 var(--sans);
  letter-spacing:0.28em;
  text-transform:uppercase;
  color:var(--ink-mute);
  pointer-events:none;
}
.colophon em{ font-style:italic; color:var(--ink); font-family:var(--serif); font-size:13px; letter-spacing:0; text-transform:none; padding:0 4px }
.colophon__line{ flex:1; height:1px; background:var(--rule) }
.colophon__right span{ color:var(--forest); font-weight:600 }

/* ============================================================================
   SECTION RAIL — left edge ordinal index
   ============================================================================ */
.section-rail{
  position:fixed; top:50%; left:34px; transform:translateY(-50%);
  z-index:5; pointer-events:none;
}
.section-rail ol{ list-style:none; display:flex; flex-direction:column; gap:14px }
.section-rail li{
  display:flex; align-items:center; gap:10px;
  font:500 10px/1 var(--sans); letter-spacing:0.22em; text-transform:uppercase;
  color:var(--ink-faint);
  transition:color 0.5s var(--ease-paper), opacity 0.5s var(--ease-paper);
  opacity:0.55;
}
.section-rail__no{ font:italic 500 12px/1 var(--serif); letter-spacing:0; min-width:18px; text-transform:none }
.section-rail li.is-active{ color:var(--ink); opacity:1 }
.section-rail li.is-active .section-rail__no{ color:var(--forest) }

/* ============================================================================
   SCROLL CUE — italic serif "Turn page →" magazine text, no chrome
   ============================================================================ */
.scroll-cue{
  position:fixed; bottom:80px; right:64px;
  z-index:5; pointer-events:none;
  display:flex; align-items:baseline; gap:8px;
  font:italic 400 14px/1 var(--serif);
  color:var(--ink-mute);
  letter-spacing:0;
  transition:opacity 0.6s var(--ease-paper);
}
.scroll-cue.is-hidden{ opacity:0 }
.scroll-cue__arrow{
  font-style:italic;
  color:var(--forest);
  font-size:16px;
  display:inline-block;
  animation:cueArrow 1.8s var(--ease-paper) infinite;
  transform-origin:left center;
}
@keyframes cueArrow{
  0%, 100%{ transform:translateX(0) }
  50%     { transform:translateX(4px) }
}

/* ============================================================================
   DECK + SCENES — vertical scroll, snap, magazine spreads
   ============================================================================ */
.deck{
  position:relative; z-index:5;
  height:100svh;
  overflow-y:scroll;
  scroll-snap-type:y mandatory;
  scrollbar-width:none;
  /* perspective for the magazine page-turn between scenes */
  perspective: 2200px;
  perspective-origin: 50% 42%;
}
.deck::-webkit-scrollbar{ display:none }

.scene{
  scroll-snap-align:start;
  min-height:100svh;
  display:flex; align-items:center;
  padding: clamp(120px, 14vh, 180px) clamp(80px, 8vw, 140px);
  position:relative;
  transform-style: preserve-3d;
  transform-origin: left center;
  backface-visibility: hidden;
  will-change: transform, opacity, filter;
}
.scene__inner{
  width:100%; max-width:1280px; margin:0 auto;
  position:relative; z-index:1;
}

/* Hero — left text column, right caption (canvas shows through middle/right) */
.scene--hero .hero{
  display:grid; grid-template-columns:1.05fr 0.95fr;
  gap:clamp(40px, 6vw, 100px);
  align-items:center;
}
.hero__left{ max-width:560px }
.hero__right{
  display:flex; justify-content:flex-end; align-items:flex-end;
  align-self:end;
  padding-bottom:40px;
}

.two-col{
  display:grid; grid-template-columns:1.15fr 0.85fr;
  gap:clamp(48px, 6vw, 100px);
  align-items:start;
}
.center-col{
  display:flex; flex-direction:column; align-items:center; text-align:center;
  gap:24px; max-width:700px; margin:0 auto;
}

/* Scene cream-wash — gives text legibility against the bird/sky canvas */
.scene--hero::before{
  content:""; position:absolute; inset:0; z-index:0; pointer-events:none;
  background:linear-gradient(95deg,
    rgba(253, 250, 243, 0.92) 0%,
    rgba(253, 250, 243, 0.78) 26%,
    rgba(253, 250, 243, 0.32) 52%,
    rgba(253, 250, 243, 0.05) 78%,
    transparent 100%);
}
.scene--series::before, .scene--shoot::before, .scene--prints::before, .scene--commission::before, .scene--reach::before{
  content:""; position:absolute; inset:0; z-index:0; pointer-events:none;
  background:linear-gradient(180deg,
    rgba(253, 250, 243, 0.74) 0%,
    rgba(253, 250, 243, 0.86) 36%,
    rgba(253, 250, 243, 0.92) 100%);
}

/* ============================================================================
   TYPOGRAPHY
   ============================================================================ */

/* Kicker — section eyebrow with hairline rule */
.kicker{
  display:inline-flex; align-items:center; gap:14px;
  font:500 10px/1 var(--sans);
  letter-spacing:0.34em;
  text-transform:uppercase;
  color:var(--forest);
  margin-bottom:clamp(22px, 2.4vw, 38px);
}
.kicker__rule{
  display:inline-block; width:32px; height:1px;
  background:var(--forest);
  opacity:0.7;
}

/* Display headlines — Fraunces italic, oversized */
.display{
  font-family:var(--serif);
  color:var(--ink);
  font-weight:300;
  font-style:italic;
  letter-spacing:-0.022em;
  line-height:0.96;
  font-size:clamp(74px, 11.5vw, 178px);
  margin-bottom:clamp(24px, 3vw, 44px);
  position:relative;
}
.display .display__pre{
  display:block;
  font-style:normal;
  font-weight:300;
  font-size:0.32em;
  letter-spacing:0.04em;
  color:var(--ink-mute);
  margin-bottom:0.2em;
  text-transform:none;
}
.display .display__main{
  display:block;
  font-style:italic;
  font-weight:500;
}
.display--md{ font-size:clamp(52px, 7.6vw, 116px); margin-bottom:clamp(20px, 2.4vw, 36px) }
.display--lg{ font-size:clamp(64px, 9.2vw, 138px) }
.display.center, .display--md.center{ text-align:center }

/* Lede + copy */
.lede{
  font-family:var(--serif);
  font-weight:300;
  font-size:clamp(17px, 1.45vw, 21px);
  line-height:1.62;
  color:var(--ink-soft);
  max-width:540px;
  margin-bottom:clamp(28px, 3vw, 44px);
}
/* Magazine drop cap — first letter big italic serif on lede paragraphs */
.lede::first-letter{
  font-family:var(--serif);
  font-style:italic;
  font-weight:500;
  font-size:3.6em;
  line-height:0.86;
  float:left;
  padding:0.06em 0.12em 0 0;
  color:var(--forest);
  letter-spacing:-0.02em;
}
.copy{
  font-family:var(--serif);
  font-weight:300;
  font-size:clamp(15.5px, 1.15vw, 17px);
  line-height:1.7;
  color:var(--ink-soft);
  max-width:580px;
  margin-bottom:clamp(28px, 3vw, 40px);
}
.copy--narrow{ max-width:520px }
.copy--center{ margin-left:auto; margin-right:auto; text-align:center }

/* ============================================================================
   REVEAL ANIMATION — paper rises into place
   ============================================================================ */
[data-reveal]{
  opacity:0;
  transform:translateY(14px);
  transition:opacity 1.1s var(--ease-bird) var(--rd, 0ms), transform 1.1s var(--ease-bird) var(--rd, 0ms);
  will-change:opacity, transform;
}
[data-reveal].is-visible{
  opacity:1;
  transform:translateY(0);
}

/* ============================================================================
   LETTER-BY-LETTER REVEAL — Fraunces italic, GSAP-driven
   ============================================================================ */
[data-letter-reveal]{
  display:inline-block;
  /* override generic reveal for letter-reveal targets */
  opacity:1 !important;
  transform:none !important;
}
.letter{
  display:inline-block;
  opacity:0;
  transform:translateY(0.42em) rotateX(-55deg);
  transform-origin:50% 100%;
  will-change:opacity, transform;
  backface-visibility:hidden;
}
.letter--space{
  width:0.28em;
  display:inline-block;
}

/* ============================================================================
   SCENE 01 · HERO META PILLS
   ============================================================================ */
.hero__meta{
  display:flex; flex-wrap:wrap; gap:10px;
  margin-top:18px;
}
.meta-pill{
  display:inline-flex; flex-direction:column;
  padding:9px 14px;
  background:rgba(253, 250, 243, 0.78);
  border:1px solid var(--rule);
  border-radius:2px;
  backdrop-filter:blur(4px);
}
.meta-pill__lab{
  font:500 8.5px/1 var(--sans);
  letter-spacing:0.3em;
  text-transform:uppercase;
  color:var(--ink-mute);
  margin-bottom:4px;
}
.meta-pill__val{
  font:italic 500 14px/1 var(--serif);
  color:var(--ink);
  letter-spacing:0;
}

.hero__caption{
  max-width:280px;
  text-align:right;
  padding-right:8px;
  border-right:1px solid var(--ink);
  padding:6px 14px 6px 0;
}
.caption__no{
  font:500 9.5px/1 var(--sans);
  letter-spacing:0.34em;
  text-transform:uppercase;
  color:var(--ink-mute);
  margin-bottom:8px;
}
.caption__txt{
  font:italic 500 14px/1.45 var(--serif);
  color:var(--ink);
}

/* ============================================================================
   SCENE 02 · SERIES GRID
   ============================================================================ */
.series-grid{
  margin-top:clamp(28px, 3vw, 48px);
  display:grid;
  grid-template-columns:repeat(3, 1fr);
  gap:clamp(20px, 2vw, 32px) clamp(28px, 3vw, 48px);
}
.series-card{
  position:relative;
  padding:30px 28px 32px;
  background:rgba(253, 250, 243, 0.7);
  border:1px solid var(--rule);
  border-top:1px solid var(--ink);
  transition:transform 0.55s var(--ease-paper), background 0.55s var(--ease-paper), border-color 0.55s var(--ease-paper);
  cursor:pointer;
}
.series-card:hover{
  transform:translateY(-3px);
  background:rgba(253, 250, 243, 0.94);
  border-color:var(--forest);
  border-top-color:var(--forest);
}
.series-card__no{
  position:absolute; top:18px; right:22px;
  font:italic 500 13px/1 var(--serif);
  color:var(--forest);
  letter-spacing:0;
}
.series-card__name{
  font:italic 500 26px/1.18 var(--serif);
  color:var(--ink);
  margin-bottom:10px;
  letter-spacing:-0.005em;
}
.series-card__sub{
  font:300 13.5px/1.5 var(--serif);
  color:var(--ink-soft);
  margin-bottom:14px;
}
.series-card__count{
  font:500 9.5px/1 var(--sans);
  letter-spacing:0.32em;
  text-transform:uppercase;
  color:var(--ink-mute);
  padding-top:14px;
  border-top:1px solid var(--rule-soft);
}

/* ============================================================================
   SCENE 03 · SHOOT
   ============================================================================ */
.shoot-spec{
  display:grid;
  grid-template-columns:repeat(2, 1fr);
  gap:14px 32px;
  max-width:540px;
  margin-top:14px;
  padding:24px 0;
  border-top:1px solid var(--rule);
  border-bottom:1px solid var(--rule);
}
.shoot-spec > div{
  display:flex; flex-direction:column; gap:4px;
}
.shoot-spec dt{
  font:500 9.5px/1 var(--sans);
  letter-spacing:0.3em;
  text-transform:uppercase;
  color:var(--ink-mute);
}
.shoot-spec dd{
  font:italic 500 16px/1.3 var(--serif);
  color:var(--ink);
  letter-spacing:-0.005em;
}

/* Pull-quote pillar — thin vertical rule + italic serif + oversize quote glyph */
.shoot-aside{
  position:relative;
  padding:36px 40px 32px 48px;
  background:transparent;
  border-left:1px solid var(--petal);
}
.shoot-aside::before{
  /* Open-quote glyph — oversized magazine typographic flourish */
  content:'\201C';
  position:absolute;
  top:8px; left:30px;
  font:italic 500 96px/1 var(--serif);
  color:var(--petal);
  opacity:0.22;
  pointer-events:none;
}
.shoot-aside__quote{
  font:italic 300 22px/1.42 var(--serif);
  color:var(--ink);
  margin-bottom:16px;
  letter-spacing:-0.008em;
}
.shoot-aside__attr{
  font:500 10px/1 var(--sans);
  letter-spacing:0.3em;
  text-transform:uppercase;
  color:var(--ink-mute);
}

/* ============================================================================
   SCENE 04 · PRINTS
   ============================================================================ */
.prints-grid{
  margin-top:clamp(28px, 3vw, 48px);
  display:grid;
  grid-template-columns:repeat(3, 1fr);
  gap:clamp(20px, 2vw, 36px);
}
.print-card{
  position:relative;
  padding:28px 28px 30px;
  background:rgba(253, 250, 243, 0.78);
  border:1px solid var(--rule);
  display:flex; flex-direction:column;
  transition:transform 0.55s var(--ease-paper), border-color 0.55s var(--ease-paper), background 0.55s var(--ease-paper);
}
.print-card:hover{
  transform:translateY(-4px);
  background:rgba(253, 250, 243, 0.96);
  border-color:var(--ink-mute);
}
.print-card--feat{
  background:rgba(243, 233, 212, 0.7);
  border-color:var(--forest);
}
.print-card--feat:hover{ border-color:var(--forest-deep) }

.print-card__head{
  display:flex; align-items:center; gap:12px;
  margin-bottom:14px;
  padding-bottom:14px;
  border-bottom:1px solid var(--rule);
  position:relative;
}
.print-card__no{
  font:italic 500 14px/1 var(--serif);
  color:var(--forest);
}
.print-card__head h3{
  font:italic 500 22px/1 var(--serif);
  color:var(--ink);
  letter-spacing:-0.005em;
  flex:1;
}
.print-card__pill{
  font:500 8px/1 var(--sans);
  letter-spacing:0.3em;
  text-transform:uppercase;
  color:var(--paper);
  background:var(--forest);
  padding:5px 8px;
}
.print-card__size{
  font:500 9.5px/1 var(--sans);
  letter-spacing:0.3em;
  text-transform:uppercase;
  color:var(--ink-mute);
  margin-bottom:14px;
}
.print-card__price{
  display:flex; align-items:baseline; gap:8px;
  margin-bottom:18px;
}
.print-card__price span{
  font:italic 500 36px/1 var(--serif);
  color:var(--ink);
  letter-spacing:-0.012em;
}
.print-card__price small{
  font:300 12px/1 var(--serif);
  color:var(--ink-mute);
  font-style:italic;
}
.print-card__list{
  list-style:none;
  margin:0 0 22px;
  display:flex; flex-direction:column; gap:6px;
  flex:1;
}
.print-card__list li{
  font:300 13px/1.5 var(--serif);
  color:var(--ink-soft);
}
.print-card__btn{
  margin-top:auto;
  padding:13px 18px;
  font:500 10.5px/1 var(--sans);
  letter-spacing:0.3em;
  text-transform:uppercase;
  color:var(--ink);
  background:transparent;
  border:1px solid var(--ink);
  transition:background 0.4s var(--ease-paper), color 0.4s var(--ease-paper);
}
.print-card__btn:hover{ background:var(--ink); color:var(--paper) }
.print-card__btn--feat{
  background:var(--forest); color:var(--paper); border-color:var(--forest);
}
.print-card__btn--feat:hover{ background:var(--forest-deep); border-color:var(--forest-deep) }

/* ============================================================================
   SCENE 05 · COMMISSION LIST
   ============================================================================ */
.commission-list{
  list-style:none;
  margin-top:clamp(28px, 3vw, 48px);
  display:flex; flex-direction:column;
}
.commission-row{
  display:grid;
  grid-template-columns:60px 220px 1fr 180px;
  align-items:start;
  gap:32px;
  padding:28px 0;
  border-top:1px solid var(--rule);
  cursor:pointer;
  transition:background 0.4s var(--ease-paper), padding-left 0.4s var(--ease-paper);
}
.commission-row:last-child{ border-bottom:1px solid var(--rule) }
.commission-row:hover{
  background:rgba(243, 233, 212, 0.4);
  padding-left:14px;
}
.commission-row__no{
  font:italic 500 22px/1 var(--serif);
  color:var(--forest);
}
.commission-row__name{
  font:italic 500 24px/1.1 var(--serif);
  color:var(--ink);
  letter-spacing:-0.005em;
}
.commission-row__desc{
  font:300 14.5px/1.5 var(--serif);
  color:var(--ink-soft);
}
.commission-row__price{
  font:italic 500 18px/1 var(--serif);
  color:var(--ink);
  text-align:right;
  letter-spacing:0;
}

/* ============================================================================
   SCENE 06 · REACH
   ============================================================================ */
.reach-btns{
  display:flex; flex-wrap:wrap; gap:14px; justify-content:center;
  margin-top:14px;
}
.reach-btn{
  display:inline-flex; align-items:center; gap:10px;
  padding:15px 26px;
  font:500 11px/1 var(--sans);
  letter-spacing:0.3em;
  text-transform:uppercase;
  color:var(--ink);
  border:1px solid var(--ink);
  transition:background 0.4s var(--ease-paper), color 0.4s var(--ease-paper), transform 0.4s var(--ease-paper);
}
.reach-btn:hover{
  background:var(--ink); color:var(--paper);
  transform:translateY(-2px);
}
.reach-btn--primary{
  background:var(--forest); color:var(--paper); border-color:var(--forest);
  font:italic 500 16px/1 var(--serif);
  letter-spacing:0;
  text-transform:none;
  padding:16px 28px;
}
.reach-btn--primary:hover{ background:var(--forest-deep); border-color:var(--forest-deep) }

.signoff{
  margin-top:64px;
  padding-top:32px;
  border-top:1px solid var(--rule);
  display:flex; align-items:center; gap:18px;
  width:100%;
  font:500 10px/1 var(--sans);
  letter-spacing:0.3em;
  text-transform:uppercase;
  color:var(--ink-mute);
}
.signoff__rule{ flex:1; height:1px; background:var(--rule) }

/* ============================================================================
   GATE — paper card with hand-drawn bird
   ============================================================================ */
.gate{
  position:fixed; inset:0; z-index:1000;
  display:flex; align-items:center; justify-content:center;
  background:
    radial-gradient(140% 90% at 50% 50%, rgba(253, 250, 243, 0.92) 0%, rgba(253, 250, 243, 0.99) 70%);
  backdrop-filter:blur(20px);
  transition:opacity 0.9s var(--ease-paper), visibility 0.9s var(--ease-paper);
}
.gate.is-open{ opacity:0; visibility:hidden; pointer-events:none }
.gate__paper{
  position:relative;
  width:min(440px, 88vw);
  padding:48px 44px 40px;
  background:var(--paper);
  border:1px solid var(--rule);
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.8) inset,
    0 18px 60px -20px rgba(26, 25, 22, 0.18),
    0 4px 14px -6px rgba(26, 25, 22, 0.1);
  text-align:center;
}
.gate__paper::before{
  content:""; position:absolute; inset:8px;
  border:1px solid var(--rule-soft);
  pointer-events:none;
}
.gate__series{
  font:500 9.5px/1 var(--sans);
  letter-spacing:0.32em;
  text-transform:uppercase;
  color:var(--forest);
  margin-bottom:24px;
}
.gate__bird{
  width:88px; height:88px;
  color:var(--ink);
  margin:0 auto 20px;
  display:block;
}
.gate__wing{
  transform-origin:30px 28px;
  animation:gateWingFlap 0.18s var(--ease-paper) infinite alternate;
}
@keyframes gateWingFlap{
  from{ transform:rotate(-22deg) scaleY(0.9) }
  to{   transform:rotate( 18deg) scaleY(1.1) }
}
.gate__title{
  font:italic 500 38px/1 var(--serif);
  color:var(--ink);
  letter-spacing:-0.012em;
  margin-bottom:6px;
}
.gate__sub{
  font:300 13px/1.4 var(--serif);
  color:var(--ink-soft);
  margin-bottom:28px;
}
.gate__loading{
  display:flex; align-items:center; justify-content:center; gap:8px;
  font:500 10px/1 var(--sans);
  letter-spacing:0.32em;
  text-transform:uppercase;
  color:var(--ink-mute);
  margin-bottom:14px;
}
.gate__dots{ display:inline-flex; gap:3px }
.gate__dots i{
  display:inline-block; width:3px; height:3px; border-radius:50%;
  background:var(--ink-mute);
  animation:gateDot 1.2s ease-in-out infinite;
}
.gate__dots i:nth-child(2){ animation-delay:0.18s }
.gate__dots i:nth-child(3){ animation-delay:0.36s }
@keyframes gateDot{
  0%, 100%{ opacity:0.2; transform:translateY(0) }
  50%     { opacity:1;   transform:translateY(-3px) }
}
.gate__bar{
  position:relative;
  width:100%; height:2px;
  background:var(--rule);
  margin-bottom:18px;
  overflow:hidden;
}
.gate__fill{
  position:absolute; left:0; top:0; bottom:0;
  width:0%;
  background:var(--forest);
  transition:width 0.5s var(--ease-paper);
}
.gate__caption{
  font:italic 300 12.5px/1.5 var(--serif);
  color:var(--ink-mute);
  margin-bottom:24px;
}
.gate__btn{
  width:100%;
  padding:14px 18px;
  font:500 11px/1 var(--sans);
  letter-spacing:0.3em;
  text-transform:uppercase;
  color:var(--paper);
  background:var(--ink);
  border:1px solid var(--ink);
  transition:background 0.4s var(--ease-paper), opacity 0.4s var(--ease-paper);
  cursor:pointer;
}
.gate__btn:disabled{ opacity:0.35; cursor:wait }
.gate__btn:not(:disabled):hover{ background:var(--forest); border-color:var(--forest) }

/* ============================================================================
   RESPONSIVE
   ============================================================================ */
@media (max-width: 980px){
  .masthead{ left:24px; right:24px; top:24px; flex-direction:column; align-items:flex-start; gap:16px }
  .masthead__nav{ gap:18px; flex-wrap:wrap }
  .colophon{ left:24px; right:24px; bottom:24px; font-size:8.5px }
  .scroll-cue{ right:24px; bottom:60px }
  .section-rail{ display:none }
  .contact-marks{ inset:18px }
  .scene{ padding: 120px 24px 96px }
  .scene--hero .hero{ grid-template-columns:1fr; gap:32px }
  .hero__right{ justify-content:flex-start; padding-bottom:0 }
  .hero__caption{ text-align:left; border-right:0; border-left:1px solid var(--ink); padding:6px 0 6px 14px }
  .two-col{ grid-template-columns:1fr; gap:36px }
  .series-grid{ grid-template-columns:1fr; gap:14px }
  .prints-grid{ grid-template-columns:1fr; gap:18px }
  .commission-row{ grid-template-columns:40px 1fr; grid-auto-flow:row; gap:8px 14px }
  .commission-row__price{ grid-column:2; text-align:left }
  .commission-row__desc{ grid-column:2 }
  .commission-row__name{ grid-column:2 }
  .shoot-spec{ grid-template-columns:1fr }
}

@media (prefers-reduced-motion: reduce){
  *,
  *::before,
  *::after{
    animation-duration:0.01ms !important;
    animation-iteration-count:1 !important;
    transition-duration:0.01ms !important;
    scroll-behavior:auto !important;
  }
}