@import url('https://fonts.googleapis.com/css2?family=Cinzel:wght@500;600;700;800&family=Inter:wght@400;500;600&display=swap');

:root{
  --black:#030303;
  --paper:#e7e0d1;
  --muted:#aaa293;
  --gold:#c99a49;
  --line:rgba(231,224,209,.18);
  --teal:#8fbfc0;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--black);color:var(--paper);font-family:Inter,system-ui,sans-serif}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit}

.intro{
  position:fixed;inset:0;z-index:100;background:#000;
  overflow:hidden;display:grid;place-items:center;
  transition:opacity 1.5s ease,visibility 1.5s ease;
}
.intro.gone{opacity:0;visibility:hidden;pointer-events:none}
.intro-video{
  position:absolute;inset:0;width:100%;height:100%;
  object-fit:cover;object-position:center center;
  display:block;background:#000;
}
.intro-video-shade{
  position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(180deg,rgba(0,0,0,.03),rgba(0,0,0,.10));
}
.intro-begin{
  position:absolute;left:50%;bottom:5.2rem;transform:translateX(-50%);z-index:4;
  background:rgba(0,0,0,.48);border:1px solid rgba(231,224,209,.28);
  padding:.8rem 1.15rem;text-transform:uppercase;
  letter-spacing:.18em;font-size:.62rem;cursor:pointer;
  transition:opacity .35s ease,transform .35s ease;
}
.intro-begin.hidden{opacity:0;pointer-events:none;transform:translateX(-50%) translateY(8px)}
.skip{
  position:absolute;right:2rem;bottom:2rem;z-index:4;
  background:rgba(0,0,0,.28);border:1px solid var(--line);
  padding:.75rem 1rem;text-transform:uppercase;
  letter-spacing:.18em;font-size:.62rem;cursor:pointer;
}
.intro-progress{
  position:absolute;left:0;right:0;bottom:0;height:2px;background:rgba(255,255,255,.06)
}
.intro-progress span{display:block;height:100%;width:0;background:var(--gold);animation:progress 16.62s linear forwards}

@media (max-width:700px){
  .intro-video{object-fit:contain;}
  .intro-begin{bottom:4.5rem;}
  .skip{right:1rem;bottom:1rem;}
}

.site{opacity:0;transition:opacity 1.5s ease}
.site.visible{opacity:1}

 .hero{
  min-height:100svh;position:relative;display:flex;align-items:flex-end;overflow:hidden;
}
.hero-image{
  position:absolute;inset:0;
  background:url('assets/brynhildr-world.png') center center/cover no-repeat;
  animation:worldDrift 28s ease-in-out infinite alternate;
}
.hero-title-overlay{
  position:absolute;
  z-index:3;
  left:9%;
  top:44%;
  width:24%;
  height:auto;
  pointer-events:none;
  filter:drop-shadow(0 2px 8px rgba(0,0,0,.35));
}
.hero-shade{
  position:absolute;inset:0;pointer-events:none;
  background:
    linear-gradient(90deg,rgba(3,3,3,.28) 0%,rgba(3,3,3,.12) 42%,rgba(3,3,3,.02) 75%),
    linear-gradient(0deg,rgba(3,3,3,.58),transparent 55%,rgba(3,3,3,.06));
}
.nav{
  position:absolute;top:0;left:0;right:0;z-index:2;
  padding:1.25rem 4vw;display:flex;align-items:center;justify-content:space-between;
  border-bottom:1px solid var(--line);backdrop-filter:blur(3px);
}
.brand{font-family:Cinzel,serif;letter-spacing:.18em;font-size:.86rem}
.nav nav{display:flex;gap:2.2rem;font-size:.66rem;letter-spacing:.18em;text-transform:uppercase}
.sound{background:none;border:0;font-size:.62rem;letter-spacing:.18em;color:var(--muted);cursor:pointer}
.sound span{color:var(--paper)}
.hero-copy{position:relative;z-index:5;width:min(640px,88vw);padding:0 0 calc(11vh - 12px) 9vw}
.eyebrow{font-size:.67rem;letter-spacing:.34em;color:var(--gold);margin:0 0 1rem}
.hero-copy > .eyebrow{position:absolute;left:calc(9.9rem + 4ch);top:-201px;margin:0;white-space:nowrap;text-shadow:0 2px 10px rgba(0,0,0,.72)}
.hero-copy h1,.manifesto h2,.relic-copy h2,.section-heading h2,.author-copy h2{
  font-family:Cinzel,serif;font-weight:600;
}
/* The title is baked into the landing artwork. Keep the real heading in the layout
   as an invisible spacer so the surrounding copy lands exactly where the title sits. */
.hero-copy h1{font-size:clamp(3.3rem,7vw,7rem);line-height:.9;letter-spacing:.04em;margin:0 0 1.25rem;visibility:hidden}
.hero-copy .hero-text-block{transform:translateY(12px);filter:drop-shadow(0 3px 10px rgba(0,0,0,.58))}
.hero-copy .lede{font-family:Cinzel,serif;font-size:1.35rem;margin:.5rem 0 1.25rem 0;max-width:none;white-space:nowrap;text-shadow:0 2px 18px rgba(0,0,0,.9)}
.body-copy{color:#d0c8ba;line-height:1.8;max-width:590px;margin-left:0;text-shadow:0 2px 18px rgba(0,0,0,.9)}
.discover{
  display:inline-block;margin-top:1.8rem;padding-bottom:.65rem;
  border-bottom:1px solid rgba(201,154,73,.55);
  color:var(--gold);font-size:1rem;letter-spacing:.18em;
  text-shadow:0 2px 12px rgba(0,0,0,.9);
}
.discover span{margin-left:1rem}
.scroll-cue{
  position:absolute;right:2.7vw;bottom:2rem;
  writing-mode:vertical-rl;font-size:.55rem;letter-spacing:.28em;color:var(--muted)
}

section{position:relative}
.manifesto{background:#090806;padding:16vh 7vw}
.manifesto-inner{max-width:960px}
.manifesto h2,.relic-copy h2,.section-heading h2,.author-copy h2{
  font-size:clamp(2rem,4.2vw,4.5rem);line-height:1.13;margin:.4rem 0 1.5rem
}
.manifesto h2 em,.section-heading h2 em{font-style:normal;color:var(--gold)}
.manifesto p:not(.eyebrow),.relic-copy p,.author-copy p{
  max-width:760px;color:#c6bdad;line-height:1.85;font-size:1.02rem
}

.relic-section{
  min-height:92vh;display:grid;grid-template-columns:1.15fr .85fr;background:#050504
}
.relic-visual{
  display:grid;place-items:center;min-height:650px;
  background:radial-gradient(circle at 50% 50%,rgba(90,72,42,.13),transparent 62%);
  overflow:hidden;
}
.relic-visual img{
  width:min(88%,980px);filter:drop-shadow(0 20px 45px rgba(0,0,0,.7));
  transition:transform 1.3s ease
}
.relic-visual:hover img{transform:scale(1.025)}
.relic-copy{display:flex;flex-direction:column;justify-content:center;padding:10vw 7vw 10vw 3vw}
.relic-name{font-family:Cinzel,serif;color:var(--gold)!important;letter-spacing:.2em;margin-top:2rem}
.small{font-size:.76rem!important;color:var(--muted)!important}

.characters{padding:16vh 7vw;background:#0b0a08}
.section-heading{max-width:950px}
.character-grid{
  display:grid;grid-template-columns:repeat(4,1fr);
  margin-top:7vh;border-top:1px solid var(--line)
}
.character-grid article{
  padding:2rem 1.5rem 3rem 0;border-right:1px solid var(--line);margin-right:1.5rem
}
.character-grid article:last-child{border-right:0}
.character-grid span{font-size:.6rem;color:var(--gold);letter-spacing:.15em}
.character-grid h3{font-family:Cinzel,serif;font-size:1rem;letter-spacing:.08em}
.character-grid p{color:var(--muted);font-size:.84rem;line-height:1.75}

.author{
  position:relative;overflow:hidden;padding:14vh 7vw 12vh;background:#090806
}
.author-shell{
  position:relative;z-index:1;max-width:1400px;margin:0 auto;display:grid;grid-template-columns:minmax(0,1.05fr) minmax(360px,.72fr);gap:7vw;align-items:center
}
.author-intro{max-width:760px}
.author-intro h2{margin:.5rem 0 2rem}
.author-intro p:not(.eyebrow):not(.signature){color:var(--muted);font-size:.94rem;line-height:1.9;max-width:720px}
.author-intro .author-lead{font-size:1.08rem!important;color:#e8e2d7!important;line-height:1.75!important}
.author-intro em{color:#e8d39a;font-style:normal}
.author-portrait{justify-self:end;width:min(100%,520px);position:relative}
.author-portrait:after{content:"";position:absolute;inset:4% -4% -4% 4%;border:1px solid rgba(201,162,73,.34);pointer-events:none}
.author-portrait img{display:block;width:100%;height:auto;aspect-ratio:3/4;object-fit:cover;object-position:center 30%;filter:saturate(.86);box-shadow:0 30px 70px rgba(0,0,0,.55)}
.author-history{position:relative;z-index:1;max-width:1400px;margin:11vh auto 0;padding-top:5vh;border-top:1px solid var(--line)}
.history-heading{display:flex;align-items:end;justify-content:space-between;gap:2rem;margin-bottom:3.5rem}
.history-heading h3{font-family:Cinzel,serif;font-weight:400;font-size:clamp(1.4rem,2.3vw,2.2rem);letter-spacing:.04em;margin:0;color:#e8e2d7}
.history-grid{display:grid;grid-template-columns:1.05fr .95fr .8fr;gap:1.5rem;align-items:start}
.history-grid figure{margin:0}
.history-image{overflow:hidden;background:#111;aspect-ratio:16/10;border:1px solid rgba(255,255,255,.08)}
.history-image img{display:block;width:100%;height:100%;object-fit:cover;filter:saturate(.72);transition:transform .7s ease,filter .7s ease}
.history-grid figure:hover .history-image img{transform:scale(1.035);filter:saturate(.95)}
.history-ef111 img{object-position:center 48%}
.history-dive img{object-position:center 50%}
.history-disney{aspect-ratio:4/5}
.history-disney img{object-position:center 42%}
.history-grid figcaption{padding:1rem .15rem 0;display:flex;flex-direction:column;gap:.35rem}
.history-grid figcaption strong{font-size:.62rem;letter-spacing:.16em;color:var(--gold);font-weight:500}
.history-grid figcaption span{font-size:.76rem;line-height:1.5;color:var(--muted)}


/* SCROLL TRANSITIONS
   Sections reveal gently as the visitor moves through the page.
   The cinematic remains untouched. */
.site > section:not(.hero) {
  opacity: 0;
  transform: translateY(22px);
  transition: opacity 900ms ease, transform 900ms cubic-bezier(.2,.7,.2,1);
}
.site > section.revealed {
  opacity: 1;
  transform: none;
}
.site > section.book-intro.revealed,
.site > section.preorder.revealed,
.site > section.spoiler-bar.revealed {
  transition-duration: 800ms;
}
footer a{color:inherit}
@media (prefers-reduced-motion: reduce){
  html{scroll-behavior:auto}
  .site > section:not(.hero){opacity:1;transform:none;transition:none}
}

footer{
  display:flex;justify-content:space-between;padding:2rem 7vw;
  background:#020202;color:#777;font-size:.55rem;letter-spacing:.2em
}

@keyframes artifactIn{
  0%{opacity:0;transform:scale(.965);filter:blur(9px) brightness(.45)}
  18%{opacity:.10}
  48%{opacity:.42;filter:blur(3px) brightness(.72)}
  78%{opacity:.92;filter:blur(0) brightness(1);transform:scale(1)}
  100%{opacity:1;transform:scale(1.005)}
}
@keyframes titleForm{
  0%{opacity:0;transform:scale(.82) translateY(18px);filter:blur(12px) brightness(.4)}
  22%{opacity:.18}
  52%{opacity:.72;transform:scale(.96) translateY(4px);filter:blur(3px) brightness(.8)}
  78%{opacity:1;transform:scale(1.015) translateY(0);filter:blur(0) brightness(1.04)}
  100%{opacity:1;transform:scale(1);filter:blur(0) brightness(1)}
}
@keyframes welcomeIn{to{opacity:1;transform:none}}
@keyframes progress{to{width:100%}}
@keyframes atmosphere{from{transform:scale(1)}to{transform:scale(1.08)}}
@keyframes worldDrift{from{transform:scale(1.03) translateX(-.5%)}to{transform:scale(1.08) translateX(.5%)}}

@media (max-width: 900px){
  .author-shell{grid-template-columns:1fr;gap:3rem}
  .author-portrait{justify-self:start;width:min(100%,560px)}
  .history-grid{grid-template-columns:1fr 1fr}
  .history-grid figure:last-child{grid-column:1 / -1;max-width:420px}
}
@media (max-width: 620px){
  .author{padding:11vh 6vw 10vh}
  .history-heading{display:block}
  .history-heading h3{margin-top:.7rem}
  .history-grid{grid-template-columns:1fr}
  .history-grid figure:last-child{grid-column:auto;max-width:none}
}

@media(max-width:850px){
  .nav nav{display:none}
  .hero-copy{padding:0 9vw calc(12vh - 12px)}
  .hero-copy > .eyebrow{left:calc(9.9rem + 4ch);top:-138px;white-space:nowrap}
  .hero-title-overlay{left:7%;top:46%;width:36.5%;}
  .hero-shade{background:linear-gradient(0deg,rgba(3,3,3,.92),rgba(3,3,3,.18) 75%)}
  .relic-section{grid-template-columns:1fr}
  .relic-copy{padding:5vh 7vw 12vh}
  .relic-visual{min-height:55vh}
  .character-grid{grid-template-columns:1fr 1fr}
  .character-grid article{border-bottom:1px solid var(--line)}
  .character-grid article:nth-child(2){border-right:0}
  
/* SCROLL TRANSITIONS
   Sections reveal gently as the visitor moves through the page.
   The cinematic remains untouched. */
.site > section:not(.hero) {
  opacity: 0;
  transform: translateY(22px);
  transition: opacity 900ms ease, transform 900ms cubic-bezier(.2,.7,.2,1);
}
.site > section.revealed {
  opacity: 1;
  transform: none;
}
.site > section.book-intro.revealed,
.site > section.preorder.revealed,
.site > section.spoiler-bar.revealed {
  transition-duration: 800ms;
}
footer a{color:inherit}
@media (prefers-reduced-motion: reduce){
  html{scroll-behavior:auto}
  .site > section:not(.hero){opacity:1;transform:none;transition:none}
}

footer{flex-direction:column;gap:1rem}
  .scroll-cue{display:none}
}
@media(max-width:520px){
  .artifact{width:94vw}
  .title-art{width:105vw}
  .welcome-stage p{font-size:.58rem;letter-spacing:.28em}
  .hero-title-overlay{left:6%;top:46%;width:62%;}
  .hero-copy h1{font-size:3.2rem}
  .hero-copy > .eyebrow{left:calc(8.9rem + 4ch);top:-108px}
  .character-grid{grid-template-columns:1fr}
  .character-grid article,.character-grid article:nth-child(2){border-right:0}
}


/* =========================================================
   LANDING PAGE MARKETING PASS v1
   Adds the book itself and sharpens the BLUF above the fold.
   ========================================================= */
.book-intro{
  min-height:100vh;
  display:grid;
  grid-template-columns:.78fr 1.22fr;
  grid-template-rows:auto 1fr;
  column-gap:5vw;
  row-gap:2vh;
  align-items:center;
  padding:12vh 9vw 10vh;
  background:#070605;
}
.book-section-heading{
  grid-column:1 / -1;
  text-align:center;
  margin:0 auto 1vh;
  max-width:1100px;
}
.book-section-heading .eyebrow{margin:0 0 .75rem}
.book-section-heading h2{
  font-family:Cinzel,serif;
  font-size:clamp(2rem,4vw,4.1rem);
  line-height:1.08;
  font-weight:600;
  margin:0;
}
.book-section-heading h2 em{font-style:normal;color:var(--gold)}
.book-cover-wrap{display:flex;flex-direction:column;justify-content:center;align-items:center}
.book-cover-note{text-align:center;margin:1rem 0 0;color:var(--muted);font-family:Cinzel,serif;font-size:.62rem;letter-spacing:.18em;text-transform:uppercase}

.book-cover-wrap img{
  display:block;
  width:min(100%,440px);
  max-height:76vh;
  object-fit:contain;
  filter:drop-shadow(0 28px 45px rgba(0,0,0,.72));
  transition:transform 1s ease, filter 1s ease;
}
.book-cover-wrap img:hover{
  transform:translateY(-5px) scale(1.012);
  filter:drop-shadow(0 34px 52px rgba(0,0,0,.78));
}
.book-copy{max-width:760px}
.book-copy p:not(.eyebrow):not(.book-meta){
  color:#c6bdad;
  line-height:1.7;
  font-size:1rem;
  max-width:720px;
  margin:0 0 1.15rem;
}
.book-copy .book-highlight{
  color:var(--gold) !important;
  font-family:Cinzel,serif;
  font-size:1.12rem;
  letter-spacing:.03em;
}
.book-meta{margin-top:1.8rem;color:var(--gold);font-size:.64rem;letter-spacing:.22em}
.book-actions{margin-top:1.7rem;display:flex;align-items:center;gap:2.2rem;flex-wrap:wrap}
@media(max-width:850px){
  .book-intro{grid-template-columns:1fr;grid-template-rows:auto auto auto;gap:5vh;padding:10vh 7vw}
  .book-section-heading{grid-column:1}
  .book-cover-wrap img{width:min(78vw,420px);max-height:none}
  .book-actions{gap:1.4rem}
}


/* =========================================================
   CHARACTER / THREAT ART GALLERY v14
   Built around the supplied before-and-after artwork.
   ========================================================= */
.cast-intro{max-width:1000px}
.section-lede{max-width:760px;margin-top:1.5rem;color:#bdb4a4;line-height:1.8;font-size:1rem}
.cast-grid{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:5.5rem 3rem;
  margin-top:7vh;
}
.cast-card,.villain-card{min-width:0}
.cast-art,.villain-art{
  position:relative;
  overflow:hidden;
  background:#020202;
  border:1px solid rgba(231,224,209,.12);
  box-shadow:0 22px 55px rgba(0,0,0,.28);
}
.cast-art{aspect-ratio:1.25}
.cast-art img,.villain-art img{
  width:100%;height:100%;display:block;object-fit:contain;
  transition:transform 1.2s cubic-bezier(.2,.65,.2,1),filter 1.2s ease;
}
.cast-card:hover .cast-art img,.villain-card:hover .villain-art img{
  transform:scale(1.018);filter:brightness(1.045);
}
.cast-single .cast-art{aspect-ratio:.78}
.cast-copy,.villain-copy{padding:1.25rem .25rem 0 0}
.cast-copy span,.villain-copy span{
  color:var(--gold);font-size:.58rem;letter-spacing:.2em
}
.cast-copy h3,.villain-copy h3{
  font-family:Cinzel,serif;font-size:1.12rem;letter-spacing:.08em;margin:.45rem 0 .55rem
}
.cast-copy h3{color:var(--gold)}
.villain-copy h3{color:var(--gold)}
.cast-copy p{color:#fff}
.cast-copy p,.villain-copy p{margin:0;color:var(--muted);font-size:.86rem;line-height:1.75;max-width:620px}
.villains{
  padding:16vh 7vw 17vh;
  background:#070605;
  border-top:1px solid rgba(231,224,209,.07);
}
.villain-heading{max-width:960px}
.villain-grid{
  display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:2.2rem;margin-top:7vh
}
.villain-art{aspect-ratio:1.15}
.villain-card:nth-child(2) .villain-art{aspect-ratio:1.15}
.villain-card:nth-child(3) .villain-art{aspect-ratio:1.15}
.villain-copy{padding-top:1.2rem}
@media(max-width:850px){
  .cast-grid{grid-template-columns:1fr;gap:5rem}
  .cast-single .cast-art{aspect-ratio:1.05}
  .villain-grid{grid-template-columns:1fr;gap:5rem}
  .villain-art,.villain-card:nth-child(2) .villain-art,.villain-card:nth-child(3) .villain-art{aspect-ratio:1.05}
}
@media(max-width:520px){
  .cast-grid{gap:4rem}
  .cast-art{aspect-ratio:1.12}
  .cast-single .cast-art{aspect-ratio:1.05}
}

/* PRE-ORDER */
.preorder{
  padding:16vh 7vw;
  background:
    radial-gradient(circle at 82% 50%,rgba(151,104,43,.12),transparent 38%),
    #070605;
  border-top:1px solid var(--line);
  border-bottom:1px solid var(--line);
}
.preorder-inner{
  max-width:1180px;margin:0 auto;display:grid;
  grid-template-columns:1.05fr .95fr;gap:8vw;align-items:center;
}
.preorder-copy h2{
  font-family:Cinzel,serif;font-weight:600;font-size:clamp(2.2rem,4.4vw,4.6rem);
  line-height:1.08;margin:.4rem 0 1.5rem;
}
.preorder-copy h2 em{font-style:normal;color:var(--gold)}
.preorder-copy>p:not(.eyebrow){max-width:680px;color:#c6bdad;line-height:1.85;font-size:1.02rem}
.preorder-form{
  padding:2.2rem;border:1px solid rgba(201,154,73,.28);
  background:rgba(255,255,255,.025);box-shadow:0 25px 70px rgba(0,0,0,.28);
}
.preorder-form label{display:block;margin:0 0 .5rem;color:var(--gold);font-size:.62rem;letter-spacing:.25em}
.preorder-form input{
  width:100%;box-sizing:border-box;margin:0 0 1.25rem;padding:1rem 1rem;
  background:#0d0c0a;border:1px solid rgba(255,255,255,.14);color:var(--paper);
  font:inherit;outline:none;transition:border-color .25s ease;
}
.preorder-form input:focus{border-color:rgba(201,154,73,.7)}
.preorder-form input::placeholder{color:#777064}
.preorder-form button{
  width:100%;padding:1rem 1.1rem;border:1px solid rgba(201,154,73,.6);
  background:transparent;color:var(--gold);font-size:.68rem;letter-spacing:.2em;cursor:pointer;
  transition:background .25s ease,color .25s ease;
}
.preorder-form button:hover{background:var(--gold);color:#090806}
.preorder-form button span{margin-left:.7rem}
.form-note{margin:1rem 0 0;color:var(--muted);font-size:.7rem;line-height:1.6}
.form-success{display:none;margin:1rem 0 0;color:var(--gold);font-size:.78rem;line-height:1.6}
.form-success.visible{display:block}
@media(max-width:850px){
  .preorder-inner{grid-template-columns:1fr;gap:4vh}
  .preorder-form{padding:1.5rem}
}


/* Spoiler threshold */
.spoiler-bar {
  background: rgba(10, 10, 10, 0.96);
  border-top: 1px solid rgba(201, 164, 79, 0.35);
  border-bottom: 1px solid rgba(201, 164, 79, 0.35);
  padding: 26px 6vw;
}
.spoiler-inner {
  max-width: 1100px;
  margin: 0 auto;
  display: flex;
  align-items: center;
  gap: 20px;
}
.spoiler-mark {
  color: var(--gold, #c9a44f);
  font-size: 1.5rem;
  line-height: 1;
  flex: 0 0 auto;
}
.spoiler-label {
  margin: 0 0 6px;
  color: var(--gold, #c9a44f);
  font-size: .72rem;
  letter-spacing: .18em;
  font-weight: 700;
}
.spoiler-inner p:last-child {
  margin: 0;
  color: rgba(255,255,255,.78);
  line-height: 1.6;
}
@media (max-width: 700px) {
  .spoiler-bar { padding: 22px 7vw; }
  .spoiler-inner { align-items: flex-start; gap: 14px; }
}


/* Final three cast members: Astrid, Tyrggo, and Elsie share a compact row. */
.cast-final-row{
  grid-column:1 / -1;
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:3rem;
}

@media(max-width:850px){
  .cast-final-row{grid-column:auto;grid-template-columns:1fr;gap:5rem;}
  .cast-final-row .cast-single .cast-art{aspect-ratio:1.05;}
}




/* v49: villain layout, proportional at 700px height */
.villain-grid {
  display: flex;
  align-items: flex-start;
  justify-content: center;
  gap: 34px;
  margin-top: 7vh;
}

.villain-grid > .villain-card {
  flex: 0 0 auto;
  min-width: 0;
}

/* Akemhet and Rhys: 768 / 1142 aspect ratio at 700px high */
.villain-grid > .villain-card:nth-child(1),
.villain-grid > .villain-card:nth-child(3) {
  width: 471px;
}

/* Seraphine: wider source artwork, same 700px height */
.villain-grid > .villain-card:nth-child(2) {
  width: 620px;
}

.villain-grid > .villain-card > .villain-art {
  width: 100%;
  height: 700px;
  aspect-ratio: auto;
  overflow: visible;
  display: flex;
  align-items: center;
  justify-content: center;
}

.villain-grid > .villain-card > .villain-art > img {
  width: 100%;
  height: 700px;
  max-width: none;
  object-fit: contain;
  object-position: center;
  display: block;
}

@media (max-width: 1600px) {
  .villain-grid {
    gap: 24px;
  }

  .villain-grid > .villain-card:nth-child(1),
  .villain-grid > .villain-card:nth-child(3) {
    width: 360px;
  }

  .villain-grid > .villain-card:nth-child(2) {
    width: 475px;
  }

  .villain-grid > .villain-card > .villain-art,
  .villain-grid > .villain-card > .villain-art > img {
    height: 535px;
  }
}

@media (max-width: 1100px) {
  .villain-grid {
    gap: 22px;
  }

  .villain-grid > .villain-card:nth-child(1),
  .villain-grid > .villain-card:nth-child(3) {
    width: 240px;
  }

  .villain-grid > .villain-card:nth-child(2) {
    width: 320px;
  }

  .villain-grid > .villain-card > .villain-art,
  .villain-grid > .villain-card > .villain-art > img {
    height: 370px;
  }
}

@media (max-width: 850px) {
  .villain-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 5rem;
  }

  .villain-grid > .villain-card,
  .villain-grid > .villain-card:nth-child(1),
  .villain-grid > .villain-card:nth-child(2),
  .villain-grid > .villain-card:nth-child(3) {
    width: 100%;
  }

  .villain-grid > .villain-card > .villain-art {
    height: 360px;
  }

  .villain-grid > .villain-card > .villain-art > img {
    width: 100%;
    height: 360px;
  }
}


/* v55: villain artwork test, 600px high with proportional widths */
@media (min-width: 1601px) {
  .villain-grid {
    gap: 34px;
  }

  .villain-grid > .villain-card:nth-child(1),
  .villain-grid > .villain-card:nth-child(3) {
    width: 403px;
  }

  .villain-grid > .villain-card:nth-child(2) {
    width: 747px;
  }

  .villain-grid > .villain-card > .villain-art {
    width: 100%;
    height: 600px;
  }

  .villain-grid > .villain-card > .villain-art > img {
    width: 100%;
    height: 600px;
    max-width: none;
    object-fit: contain;
    object-position: center;
  }
}

@media (max-width: 1600px) and (min-width: 851px) {
  .villain-grid {
    gap: 24px;
  }

  .villain-grid > .villain-card:nth-child(1),
  .villain-grid > .villain-card:nth-child(3) {
    width: 360px;
  }

  .villain-grid > .villain-card:nth-child(2) {
    width: 475px;
  }

  .villain-grid > .villain-card > .villain-art {
    height: 535px;
  }

  .villain-grid > .villain-card > .villain-art > img {
    height: 535px;
    width: 100%;
    max-width: none;
    object-fit: contain;
  }
}

/* v58: Before the Book photos use equal height with natural proportions */
.history-grid{grid-template-columns:repeat(3,1fr);align-items:start}
.history-image{aspect-ratio:768/527}
.history-ef111,.history-dive,.history-disney{aspect-ratio:768/527}


/* Netlify Forms honeypot */
.honeypot-field { position: absolute !important; overflow: hidden !important; clip: rect(0 0 0 0) !important; height: 1px !important; width: 1px !important; margin: -1px !important; padding: 0 !important; border: 0 !important; }