/* ============================================================
   THE LAST LIGHT OF ROME · Turner, Rome from Mount Aventine (1836)
   ============================================================ */

/* ---- Fonts (ABC Arizona, served locally) ---- */
@font-face { font-family:"Arizona Serif"; src:url("/fonts/ArizonaSerif-Light.otf") format("opentype"); font-weight:300; font-style:normal; font-display:swap; }
@font-face { font-family:"Arizona Serif"; src:url("/fonts/ArizonaSerif-Regular.otf") format("opentype"); font-weight:400; font-style:normal; font-display:swap; }
@font-face { font-family:"Arizona Serif"; src:url("/fonts/ArizonaSerif-Medium.otf") format("opentype"); font-weight:500; font-style:normal; font-display:swap; }
@font-face { font-family:"Arizona Serif"; src:url("/fonts/ArizonaSerif-Italic.otf") format("opentype"); font-weight:400; font-style:italic; font-display:swap; }
@font-face { font-family:"Arizona Flare"; src:url("/fonts/ArizonaFlare-Light.otf") format("opentype"); font-weight:300; font-style:normal; font-display:swap; }
@font-face { font-family:"Arizona Flare"; src:url("/fonts/ArizonaFlare-Regular.otf") format("opentype"); font-weight:400; font-style:normal; font-display:swap; }
@font-face { font-family:"Arizona Sans"; src:url("/fonts/ArizonaSans-Light.otf") format("opentype"); font-weight:300; font-style:normal; font-display:swap; }
@font-face { font-family:"Arizona Sans"; src:url("/fonts/ArizonaSans-Regular.otf") format("opentype"); font-weight:400; font-style:normal; font-display:swap; }
@font-face { font-family:"Arizona Sans"; src:url("/fonts/ArizonaSans-Medium.otf") format("opentype"); font-weight:500; font-style:normal; font-display:swap; }

:root{
  --ink:#1c1407;
  --night:#080604;
  --parchment:#f3ead7;
  --parchment-2:#ece0c8;
  --gold:#c9a05a;
  --gold-deep:#9d7430;
  --rose:#b9663f;
  --muted:rgba(243,234,215,.62);
  --serif:"Arizona Serif", Georgia, serif;
  --flare:"Arizona Flare","Arizona Serif", Georgia, serif;
  --sans:"Arizona Sans", system-ui, sans-serif;
  --ease:cubic-bezier(.22,.61,.36,1);
}

*{ box-sizing:border-box; margin:0; padding:0; }
html{ scroll-behavior:auto; overflow:hidden; }   /* lock scroll until entered */
html.entered{ overflow:visible; }                /* normal viewport scroll once entered */
body{
  background:var(--night);
  color:var(--parchment);
  font-family:var(--sans);
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
img{ display:block; max-width:100%; }
em{ font-style:italic; }

/* ============================================================
   ENTER SPLASH
   ============================================================ */
.enter{
  position:fixed; inset:0; z-index:100;
  background:
    radial-gradient(135% 110% at 28% 22%, rgba(255,252,243,.96), transparent 58%),
    radial-gradient(120% 120% at 78% 30%, rgba(244,206,118,.62), transparent 60%),
    radial-gradient(140% 130% at 64% 88%, rgba(214,150,86,.42), transparent 62%),
    linear-gradient(155deg, #fbf4e2 0%, #f6dfa6 46%, #eecb84 100%);
  display:flex; align-items:center; justify-content:center;
  text-align:center; padding:6vw;
  transition:opacity 1.4s var(--ease), visibility 1.4s;
}
.enter.is-hidden{ opacity:0; visibility:hidden; pointer-events:none; }
.enter__inner{ max-width:860px; animation:enterRise 2.6s var(--ease) both; }
.enter__quote{ margin:0 0 3.4rem; }
.enter__quoteText{
  font-family:var(--serif); font-style:italic; font-weight:300;
  font-size:clamp(2rem,5.4vw,4rem); line-height:1.22;
  color:#3a2a12; margin:0 0 1.6rem;
}
.enter__em{ color:#7a4f17; }
.enter__quoteCite{
  font-family:var(--sans); font-style:normal; font-size:.78rem;
  letter-spacing:.24em; text-transform:uppercase; color:rgba(122,79,23,.78);
}
@keyframes enterRise{
  from{ opacity:0; transform:translateY(14px); filter:blur(6px); }
  to{ opacity:1; transform:none; filter:none; }
}
.enter__eyebrow{
  font-size:.78rem; letter-spacing:.34em; text-transform:uppercase;
  color:var(--gold); margin-bottom:2.4rem; font-weight:400;
}
.enter__title{
  font-family:var(--flare); font-weight:300; line-height:.98;
  font-size:clamp(3rem,9vw,7rem); letter-spacing:-.01em;
  color:var(--parchment); margin-bottom:1.8rem;
}
.enter__sub{
  font-family:var(--serif); font-style:italic; font-size:clamp(1.05rem,2.2vw,1.5rem);
  color:var(--muted); margin-bottom:3rem;
}
.enter__actions{ display:flex; gap:1rem; justify-content:center; flex-wrap:wrap; }
.enter__actions .btn{ animation:enterRise 2.6s var(--ease) .9s both; }
.enter__hint{ margin-top:2.6rem; font-size:.74rem; letter-spacing:.22em; text-transform:uppercase; color:rgba(243,234,215,.4); }

/* ---- Buttons ---- */
.btn{
  font-family:var(--sans); font-size:.82rem; letter-spacing:.18em; text-transform:uppercase;
  padding:1.05em 2.2em; border-radius:999px; cursor:pointer; border:1px solid var(--gold);
  transition:all .5s var(--ease); background:transparent; color:var(--parchment);
  text-decoration:none;
}
.btn--solid{ background:var(--gold); color:var(--night); border-color:var(--gold); }
.btn--solid:hover{ background:transparent; color:var(--gold); }
.btn--ghost:hover{ background:rgba(201,160,90,.12); }
.btn--lg{ padding:1.2em 2.8em; font-size:.9rem; }
/* minimal text button — no box */
.btn--text{
  background:transparent; border:none; border-radius:0;
  color:#3a2a12; padding:.4em .2em; letter-spacing:.26em; position:relative;
}
.btn--text::after{
  content:""; position:absolute; left:.2em; right:.2em; bottom:.1em;
  height:1px; background:rgba(58,42,18,.45);
  transform:scaleX(0); transform-origin:left; transition:transform .5s var(--ease);
}
.btn--text:hover{ color:#7a4f17; background:transparent; }
.btn--text:hover::after{ transform:scaleX(1); }

/* ============================================================
   FIXED PAINTING STAGE
   ============================================================ */
.stage{
  position:fixed; inset:0; z-index:0;
  background-image:url("/images/canvas.png");
  background-repeat:no-repeat;
  background-color:#0c0a06;
  will-change:background-position,background-size;
}
.stage__dim{
  position:fixed; inset:0; z-index:1; pointer-events:none;
  background:radial-gradient(120% 100% at 60% 30%, rgba(8,6,4,.25), rgba(8,6,4,.92));
  /* opacity set by JS */
}
.stage__vignette{
  position:fixed; inset:0; z-index:1; pointer-events:none;
  box-shadow:inset 0 0 24vw 6vw rgba(8,6,4,.55);
}

/* ============================================================
   CHROME
   ============================================================ */
.chrome{
  position:fixed; top:0; left:0; right:0; z-index:40;
  display:flex; justify-content:space-between; align-items:center;
  padding:1.5rem 2.2rem;
}
.chrome__lot{ font-size:.72rem; letter-spacing:.26em; text-transform:uppercase; color:#fff; }
.chrome__title{ display:inline-block; margin-top:.35em; font-size:.92rem; font-style:italic; letter-spacing:.18em; }

.progress{ position:fixed; top:0; left:0; right:0; height:2px; z-index:41; background:rgba(255,255,255,.08);
  opacity:0; pointer-events:none; transition:opacity .8s var(--ease); }
body.entered .progress{ opacity:1; }
.progress span{ display:block; height:100%; width:0; background:linear-gradient(90deg,var(--gold-deep),var(--gold)); }

/* ---- Step navigator (bottom-centre pill) ---- */
.nav{
  position:fixed; left:50%; bottom:2.2rem; transform:translateX(-50%);
  z-index:42; display:flex; align-items:center; gap:.5rem;
  padding:.42rem; border-radius:999px;
  background:rgba(8,6,4,.4);
  border:1px solid rgba(243,234,215,.26);
  backdrop-filter:blur(12px); -webkit-backdrop-filter:blur(12px);
  box-shadow:0 14px 40px -16px rgba(8,6,4,.7);
  opacity:0; pointer-events:none; transition:opacity .8s var(--ease);
}
body.entered .nav{ opacity:1; pointer-events:auto; }
.nav__btn{
  width:44px; height:44px; border-radius:50%; flex:none;
  display:flex; align-items:center; justify-content:center;
  background:transparent; border:1px solid rgba(243,234,215,.34);
  color:var(--parchment); font-size:1.35rem; line-height:1; cursor:pointer;
  transition:background .4s var(--ease), border-color .4s var(--ease), color .4s var(--ease), opacity .3s;
}
.nav__btn:hover{ background:rgba(243,234,215,.12); border-color:var(--gold); color:var(--gold); }
.nav__btn:disabled{ opacity:.28; cursor:default; }
.nav__count{ font-family:var(--sans); font-size:.82rem; letter-spacing:.14em; color:var(--parchment); min-width:3.6rem; text-align:center; }

/* ============================================================
   ACT I · NARRATIVE
   ============================================================ */
.narrative{ position:relative; z-index:2; }
/* taller scenes => more scroll distance per passage => slower, calmer journey.
   Keep in sync with SCENE_SPAN in script.js (150vh === 1.5). */
.scene{ height:150vh; position:relative; }

.cap{
  position:fixed; inset:0; z-index:3;
  display:flex; flex-direction:column; justify-content:center; align-items:center;
  padding:8vw; opacity:0; pointer-events:none;
  transition:opacity .15s linear;
}
.cap--center{ align-items:center; text-align:center; }
.cap--left{ align-items:flex-start; text-align:left; }
.cap--right{ align-items:flex-end; text-align:right; }
/* The nav pill is fixed at bottom:2.2rem and is ~3.6rem tall (~5.8rem of reach).
   On short/landscape viewports a pure-vh offset drops the CTA onto it, so floor
   the gap with max() to always clear the nav regardless of viewport height. */
.cap--bottom{ justify-content:flex-end; padding-bottom:max(11vh, 8.5rem); }
.cap--bottom::before{ content:""; position:absolute; inset:auto 0 0 0; height:42vh; z-index:-1;
  background:linear-gradient(to top, rgba(8,6,4,.7), transparent); pointer-events:none; }
/* ---- The caption lives inside a compact beige "modal" card, so the eye
   stays on the area being zoomed into rather than on full-bleed text. ---- */
.cap__card{
  max-width:27rem; text-align:left;
  background:rgba(244,236,220,.75);
  backdrop-filter:blur(6px);
  -webkit-backdrop-filter:blur(6px);
  border:1px solid rgba(157,116,48,.18);
  border-radius:12px;
  padding:2.1rem 2.3rem 2.2rem;
  box-shadow:0 34px 80px -28px rgba(8,6,4,.75), 0 2px 10px rgba(8,6,4,.22);
}
.cap--center .cap__card{ text-align:center; }
.cap__card > *{ max-width:100%; }
/* final step: no card box — just the gold View Lot button over the painting */
.cap--bottom .cap__card{
  background:none; backdrop-filter:none; -webkit-backdrop-filter:none;
  border:none; border-radius:0; box-shadow:none; padding:0;
}
.cap--bottom .cap__cta{ margin-top:0; }

.cap__eyebrow{ font-size:.7rem; letter-spacing:.22em; text-transform:uppercase; color:var(--rose); font-weight:500; margin-bottom:1rem; }
.cap__title{ font-family:var(--flare); font-weight:300; font-size:clamp(1.7rem,3.2vw,2.4rem); line-height:1.04; letter-spacing:-.01em; color:var(--ink); }
.cap__line{ font-family:var(--serif); font-style:italic; color:rgba(28,20,7,.66); margin-top:.7rem; font-size:.94rem; }
.cap__big{ font-family:var(--flare); font-weight:300; font-size:clamp(1.45rem,2.5vw,2rem); line-height:1.1; letter-spacing:-.01em; color:var(--ink); }
.cap__big--reveal{ color:var(--ink); }
.cap__body{ font-family:var(--serif); font-weight:300; font-size:clamp(.92rem,1.1vw,1.02rem); line-height:1.6; color:rgba(28,20,7,.8); margin-top:1rem; }
.cap__scrollcue{ margin-top:1.6rem; font-size:.66rem; letter-spacing:.22em; text-transform:uppercase; color:rgba(28,20,7,.5); }
.cap__scrollcue span{ display:inline-block; margin-left:.4rem; animation:bob 1.8s infinite var(--ease); }
@keyframes bob{ 0%,100%{ transform:translateY(0);} 50%{ transform:translateY(6px);} }
.cap__cta{ display:inline-block; margin-top:1.7rem; }
/* "Learn more" toggle — only used on phones, where the body text is clamped */
.cap__more{ display:none; }

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width:860px){
  /* On phones the card sits at the bottom, clear of the step navigator, so it
     never covers the part of the painting it is describing. It stays compact —
     chapter, title, one line of body — until "Learn more" expands it. */
  .cap{
    justify-content:flex-end; align-items:stretch; text-align:left;
    padding:0 4vw calc(6.4rem + env(safe-area-inset-bottom, 0px));
  }
  .cap--center, .cap--left, .cap--right{ align-items:stretch; text-align:left; }
  .cap--bottom{ padding-bottom:calc(6.4rem + env(safe-area-inset-bottom, 0px)); }
  .cap--bottom::before{ display:none; }

  .cap__card{ max-width:none; width:100%; padding:1.35rem 1.4rem; }
  .cap--center .cap__card{ text-align:left; }
  .cap__eyebrow{ margin-bottom:.7rem; }
  .cap__title{ font-size:1.85rem; }
  .cap__big{ font-size:1.5rem; }

  /* One line of body, ellipsised, until the card is expanded. */
  .cap__body{
    margin-top:.6rem;
    display:-webkit-box; -webkit-box-orient:vertical; -webkit-line-clamp:1; overflow:hidden;
  }
  .cap__card.is-expanded .cap__body{ display:block; overflow:visible; }

  .cap__more{
    display:inline-block; margin-top:.9rem; padding:.1rem 0;
    font-family:var(--sans); font-size:.7rem; letter-spacing:.18em; text-transform:uppercase;
    color:var(--rose); background:none; border:none; cursor:pointer;
    border-bottom:1px solid rgba(157,116,48,.45);
  }

  /* Centre the View Lot button in its card, even though the card text is left-aligned */
  .cap__cta{ display:block; width:-moz-fit-content; width:fit-content; margin-left:auto; margin-right:auto; }

  .nav{ bottom:1.4rem; }
}

@media (prefers-reduced-motion:reduce){
  .cap__scrollcue span{ animation:none; }
}