/* ═══════════════════════════════════════════════════════════════════════
   DARK TIDES SUPPLY — Jean Lafitte exhibit  (/legends/jean-lafitte)

   Mobile first. The painted section art (2170 × 725) is the visual
   foundation on desktop, where live buttons sit exactly over the buttons
   painted into it; below 900px the same elements reflow into real layouts
   so no text on a phone is baked into an image.

   Loaded after styles.css, shop.css (the cart drawer) and legends.css
   (the footer); everything here is scoped to .lafitte-page or jl-*.
   ═══════════════════════════════════════════════════════════════════════ */

:root{
  --jl-black:#050606;
  --jl-char:#0b0c0c;
  --jl-gold:#c99a45;
  --jl-gold-hi:#ecc77f;
  --jl-parch:#e6d2a6;
  --jl-bronze:#68451f;
  --jl-crimson:#760f0c;
  --jl-lantern:#e8872e;
  --jl-storm:#1b2833;
  --jl-cream:#efe4cc;
  --jl-mute:#b3a58a;
  --jl-display:'Cinzel', 'Baskerville', 'Times New Roman', serif;
  --jl-body:'Jost', 'Helvetica Neue', Arial, sans-serif;
  --jl-serif:Georgia, 'Times New Roman', serif;
  --jl-pad:clamp(18px, 5vw, 80px);
  /* Worn-gold texture for the display type: fractal noise turned into an
     alpha mask, so the lettering wears unevenly the way the artwork does. */
  --jl-wear:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='260' height='260'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' seed='7'/%3E%3CfeColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 -1.9 1.85'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

html{ scroll-padding-top:calc(var(--bar, 72px) + 8px); }
html.jl-locked{ overflow:hidden; }

body.lafitte-page{
  margin:0;
  background:var(--jl-black);
  color:var(--jl-cream);
  font-family:var(--jl-body);
  overflow-x:hidden;
}
.lafitte-page main{ display:block; overflow-x:clip; }
.lafitte-page img{ display:block; max-width:100%; }
.lafitte-page section{ position:relative; isolation:isolate; }
.lafitte-page section + section{ border-top:1px solid rgba(201,154,69,.28); }

/* ── shared type and controls ─────────────────────────────────────────── */
.jl-eyebrow{
  margin:0 0 .9rem;
  color:var(--jl-gold-hi);
  font:600 .72rem/1.4 var(--jl-display);
  letter-spacing:.3em;
  text-transform:uppercase;
}
.jl-display{
  margin:0;
  font:700 clamp(3.1rem, 13vw, 8.6rem)/.86 var(--jl-display);
  letter-spacing:.01em;
  text-transform:uppercase;
  color:var(--jl-gold-hi);
  background:linear-gradient(176deg, #fff1c9 0%, #f0cb82 30%, #c99a45 58%, #8a5a22 88%, #5a3812 100%);
  -webkit-background-clip:text;
  background-clip:text;
  -webkit-text-fill-color:transparent;
  -webkit-mask-image:var(--jl-wear);
          mask-image:var(--jl-wear);
  -webkit-mask-size:260px 260px;
          mask-size:260px 260px;
  filter:drop-shadow(0 2px 0 #3a1e08) drop-shadow(0 10px 22px rgba(0,0,0,.85));
}
.jl-display--md{ font-size:clamp(2.2rem, 7.2vw, 4.4rem); line-height:.95; }

.jl-h2{
  margin:0;
  color:var(--jl-gold-hi);
  font:600 clamp(1.9rem, 6.4vw, 3.1rem)/1 var(--jl-display);
  letter-spacing:.03em;
  text-transform:uppercase;
  text-shadow:0 2px 0 #3a1e08, 0 8px 22px #000;
}
.jl-h2 span{ display:block; }

.jl-fleur{ display:block; margin:.6rem auto 0; color:var(--jl-gold); font-size:1.3rem; line-height:1; text-align:center; }

.jl-actions{ display:flex; flex-wrap:wrap; justify-content:center; gap:.7rem; }
.jl-actions--left{ justify-content:flex-start; }

.jl-btn{
  display:inline-flex; align-items:center; justify-content:center; gap:.45em;
  min-height:46px;
  padding:.8rem 1.3rem;
  border:1px solid var(--jl-gold);
  border-radius:1px;
  background:linear-gradient(#17140f, #0a0908);
  box-shadow:inset 0 0 0 1px rgba(255,229,166,.07), 0 6px 18px rgba(0,0,0,.45);
  color:#f5e5c3;
  font:600 .76rem/1.1 var(--jl-display);
  letter-spacing:.12em;
  text-transform:uppercase;
  text-decoration:none;
  cursor:pointer;
  transition:transform .2s ease, border-color .2s ease, box-shadow .2s ease, color .2s ease;
}
.jl-btn:hover,.jl-btn:focus-visible{
  transform:translateY(-2px);
  border-color:var(--jl-gold-hi);
  box-shadow:inset 0 0 18px rgba(236,199,127,.12), 0 0 24px rgba(201,154,69,.35);
  color:#fff8e8;
}
.jl-btn:focus-visible{ outline:2px solid var(--jl-gold-hi); outline-offset:3px; }
.jl-btn--red{ border-color:#c4623b; background:linear-gradient(#8f1f14, #4a0906); }
.jl-btn--ink{ border-color:#2a1d10; background:linear-gradient(#1b1611, #0b0907); color:#f0dfb8; }
.jl-btn--lg{ min-height:54px; padding:1rem 1.7rem; font-size:.86rem; }
.jl-btn--frame{
  position:relative; padding:1rem 2rem; min-height:54px;
  box-shadow:inset 0 0 0 4px #0a0908, inset 0 0 0 5px rgba(201,154,69,.55), 0 10px 28px rgba(0,0,0,.6);
}

.jl-grade{
  display:inline-block; margin:0 0 .8rem; padding:.28rem .6rem;
  border:1px solid rgba(201,154,69,.55);
  color:var(--jl-gold-hi);
  font:600 .62rem/1 var(--jl-display); letter-spacing:.18em; text-transform:uppercase;
}
.jl-grade[data-grade="probable"],.jl-grade[data-grade="mixed"]{ border-color:#b9793b; color:#f0b577; }
.jl-grade[data-grade="legend"]{ border-color:#9c3a2b; color:#f1a08f; }

/* Visually hidden, still read and indexed. */
.jl-sr{ position:absolute!important; width:1px; height:1px; margin:-1px; padding:0; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0; }

/* ── reveal on scroll ─────────────────────────────────────────────────── */
.jl-reveal{ opacity:0; transform:translateY(26px); transition:opacity .9s ease, transform .9s cubic-bezier(.22,.61,.36,1); }
.jl-reveal.is-visible{ opacity:1; transform:none; }

/* ══ 1 · HERO ═════════════════════════════════════════════════════════ */
.jl-hero{
  min-height:100svh;
  display:flex; align-items:flex-end;
  overflow:hidden;
  background:var(--jl-black);
}
.jl-hero__pic,.jl-hero__art{ position:absolute; inset:0; width:100%; height:100%; z-index:-3; }
.jl-hero__art{
  object-fit:cover; object-position:50% 18%;
  transform-origin:60% 40%;
  animation:jl-drift 26s ease-in-out infinite alternate;
}
.jl-hero::after{
  content:''; position:absolute; inset:0; z-index:-1; pointer-events:none;
  background:
    linear-gradient(0deg, var(--jl-black) 0%, rgba(5,6,6,.94) 30%, rgba(5,6,6,.45) 55%, rgba(5,6,6,0) 72%),
    linear-gradient(180deg, rgba(5,6,6,.6) 0%, rgba(5,6,6,0) 22%);
}
.jl-hero__fog{ position:absolute; inset:auto -30% 0; height:60%; z-index:-2; pointer-events:none; opacity:.22; }
.jl-hero__fog i{
  position:absolute; inset:0;
  background:radial-gradient(40% 55% at 30% 70%, #b8c7d1 0, transparent 70%), radial-gradient(35% 45% at 75% 80%, #9fb0bb 0, transparent 70%);
  filter:blur(28px);
  animation:jl-fog 38s linear infinite alternate;
}
.jl-hero__fog i + i{ animation-duration:52s; animation-direction:alternate-reverse; opacity:.7; }
.jl-hero__glow{
  position:absolute; inset:0; z-index:-2; pointer-events:none; mix-blend-mode:screen;
  background:radial-gradient(9% 16% at 96% 52%, rgba(232,135,46,.55), transparent 70%), radial-gradient(7% 12% at 3% 60%, rgba(232,135,46,.4), transparent 70%);
  animation:jl-flicker 5.5s ease-in-out infinite;
}
.jl-hero__copy{
  position:relative; z-index:1;
  width:100%;
  padding:0 var(--jl-pad) clamp(58px, 9vh, 92px);
  text-align:center;
  animation:jl-rise 1.1s .15s cubic-bezier(.22,.61,.36,1) both;
}
.jl-hero__subtitle{
  margin:1.1rem 0 1rem;
  color:#f4dcaa;
  font:600 clamp(1.05rem, 4.6vw, 1.8rem)/1.2 var(--jl-display);
  letter-spacing:.14em; text-transform:uppercase;
  text-shadow:0 2px 12px #000;
}
.jl-hero__tags{
  display:flex; flex-wrap:wrap; justify-content:center; gap:.35rem .9rem;
  margin:0 0 1.5rem;
  color:#e2c68b;
  font:500 .64rem/1.3 var(--jl-display); letter-spacing:.16em; text-transform:uppercase;
}
.jl-hero__tags span:not(:last-child)::after{ content:'•'; margin-left:.9rem; color:var(--jl-gold); }
.jl-scroll{
  position:absolute; left:50%; bottom:14px; z-index:1; transform:translateX(-50%);
  display:none; place-items:center; gap:.35rem;
  color:#d9bd87; text-decoration:none;
  font:500 .6rem/1 var(--jl-display); letter-spacing:.22em; text-transform:uppercase;
}
.jl-scroll i{ display:block; width:1px; height:30px; background:linear-gradient(var(--jl-gold), transparent); animation:jl-scroll 2.4s ease-in-out infinite; }

/* ══ Painted-frame sections (legend, timeline, map) ══════════════════ */
.jl-frame{ position:relative; }
.jl-frame__art{ width:100%; height:auto; }

/* ══ 2 · THE MAN BEHIND THE LEGEND — phone layout first ═══════════════ */
.jl-legend{ background:linear-gradient(#0b0907, var(--jl-black)); }
.jl-frame--legend .jl-frame__art{ display:none; }
.jl-legend__portrait{
  width:100%; height:auto; aspect-ratio:760/725; object-fit:cover; object-position:30% 20%;
  -webkit-mask-image:linear-gradient(180deg, #000 70%, transparent);
          mask-image:linear-gradient(180deg, #000 70%, transparent);
}
.jl-legend__copy{ margin-top:-4rem; padding:0 var(--jl-pad) 2rem; text-align:center; position:relative; }
.jl-legend__copy .jl-h2 span + span{ font-size:.82em; }
.jl-legend__copy .jl-h2::after{ content:'⚜'; display:block; margin:.7rem auto 0; font-size:.5em; color:var(--jl-gold); text-shadow:none; }
.jl-legend__copy p{ max-width:36rem; margin:1.2rem auto 1.5rem; color:#eadfc8; font:400 1.05rem/1.65 var(--jl-serif); }

.jl-parchment{
  position:relative;
  margin:0 var(--jl-pad) 3rem;
  padding:2rem 1.4rem 1.8rem;
  color:#2a1c0e;
  text-align:center;
  background:
    radial-gradient(120% 90% at 50% 40%, transparent 55%, rgba(80,45,12,.5) 100%),
    radial-gradient(30% 22% at 18% 78%, rgba(120,72,24,.18), transparent 70%),
    radial-gradient(26% 20% at 84% 22%, rgba(120,72,24,.16), transparent 70%),
    linear-gradient(160deg, #ecdcb4, #d9bf8a 55%, #c7a66c);
  clip-path:polygon(1% 3%, 8% 0, 20% 2%, 34% 0, 50% 2%, 66% 0, 80% 2%, 93% 0, 99% 3%, 100% 20%, 98% 45%, 100% 70%, 98% 92%, 100% 98%, 88% 100%, 70% 98%, 52% 100%, 34% 98%, 16% 100%, 2% 98%, 0 80%, 2% 55%, 0 30%);
  box-shadow:0 18px 40px rgba(0,0,0,.6);
}
.jl-parchment h3{
  display:flex; align-items:center; justify-content:center; gap:.8rem;
  margin:0 0 .9rem;
  font:700 clamp(1.6rem, 7vw, 2.2rem)/1 var(--jl-display); letter-spacing:.04em; text-transform:uppercase;
  color:#2a1c0e;
}
.jl-parchment h3 b{
  display:grid; place-items:center; width:2.4em; height:2.4em; border-radius:50%;
  background:radial-gradient(circle at 40% 35%, #b3261a, #6b0c07 70%);
  box-shadow:0 0 0 3px #caa45a, 0 4px 10px rgba(0,0,0,.5);
  color:#f3d9a0; font-size:.5em; letter-spacing:.05em;
}
.jl-parchment p{ margin:0 auto 1.2rem; max-width:22rem; font:400 1rem/1.5 var(--jl-serif); }

/* ══ 3 · TIMELINE — phone layout first ════════════════════════════════ */
.jl-timeline{ padding:0 0 2.6rem; background:var(--jl-black); overflow:hidden; }
.jl-frame--timeline .jl-frame__art{ display:none; }
.jl-timeline{ background:radial-gradient(70% 50% at 50% 20%, rgba(232,135,46,.10), transparent 70%), linear-gradient(#0c0907, var(--jl-black)); }
.jl-timeline__head{ padding:3rem var(--jl-pad) 1.6rem; text-align:center; }
.jl-sechead p{ margin:.6rem 0 0; color:#e2c68b; font:500 .74rem/1.4 var(--jl-display); letter-spacing:.22em; text-transform:uppercase; }
.jl-tl{
  display:flex; gap:14px;
  margin:0; padding:.4rem var(--jl-pad) 1.2rem;
  list-style:none;
  overflow-x:auto; overscroll-behavior-x:contain;
  scroll-snap-type:x mandatory; scroll-padding:0 var(--jl-pad);
  scrollbar-width:thin; scrollbar-color:var(--jl-gold) transparent;
  counter-reset:tl;
}
.jl-tl > li:not(.jl-tl__item){ flex:0 0 auto; color:var(--jl-mute); }   /* no-JS list */
.jl-tl__item{ flex:0 0 min(66vw, 236px); scroll-snap-align:start; }
.jl-tl__card{
  position:relative; display:grid; width:100%; padding:0 0 1rem;
  border:1px solid rgba(201,154,69,.5);
  background:linear-gradient(#0d0b09, #060505);
  color:inherit; text-align:center; cursor:pointer;
  box-shadow:inset 0 0 0 3px #060505, inset 0 0 0 4px rgba(201,154,69,.2);
  transition:border-color .2s ease, box-shadow .2s ease, transform .2s ease;
}
.jl-tl__img{ width:100%; height:auto; aspect-ratio:232/226; object-fit:cover; }
.jl-tl__mark{
  position:relative; height:24px;
  background:linear-gradient(90deg, transparent, rgba(201,154,69,.8) 20%, rgba(201,154,69,.8) 80%, transparent) center/100% 1px no-repeat;
}
.jl-tl__mark::after{
  content:''; position:absolute; left:50%; top:50%; width:13px; height:13px; transform:translate(-50%,-50%);
  border-radius:50%; background:radial-gradient(circle, #f3d08c 30%, #7a531f 36%, #7a531f 60%, #e6c07a 64%);
  box-shadow:0 0 10px rgba(236,199,127,.6);
}
.jl-tl__date{ color:var(--jl-gold-hi); font:700 1.12rem/1.1 var(--jl-display); }
.jl-tl__title{ margin-top:.25rem; padding:0 .6rem; color:#ead9b6; font:400 .95rem/1.3 var(--jl-serif); }
.jl-tl__card:hover,.jl-tl__card:focus-visible,.jl-tl__card.is-active{
  border-color:var(--jl-gold-hi);
  box-shadow:inset 0 0 0 3px #060505, inset 0 0 0 4px rgba(236,199,127,.5), 0 0 26px rgba(201,154,69,.35);
}
.jl-tl__card:focus-visible{ outline:2px solid var(--jl-gold-hi); outline-offset:3px; }
.jl-tl__hint{ margin:0; padding:0 var(--jl-pad); color:var(--jl-mute); font:500 .66rem/1.4 var(--jl-display); letter-spacing:.18em; text-transform:uppercase; text-align:center; }

/* ══ 4 · MAP — phone layout first ═════════════════════════════════════ */
.jl-map{ background:#0b0906; padding-bottom:2.4rem; }
.jl-map__frame{ display:flex; flex-direction:column; }
.jl-map__copy{ order:-1; padding:3rem var(--jl-pad) 1.6rem; text-align:center; }
.jl-map__copy p{ max-width:30rem; margin:1rem auto 1.3rem; color:#eadfc8; font:400 1.02rem/1.6 var(--jl-serif); }
/* Phones see the chart only: the painted title panel is cropped away. */
.jl-map__inner{
  position:relative;
  width:calc(100% * 100 / var(--crop-w, 71));
  margin-left:calc(-100% * var(--crop-left, 29) / var(--crop-w, 71));
}
.jl-map__frame{ overflow:hidden; }
.jl-map__inner .jl-frame__art{ width:100%; }

.jl-pin{
  position:absolute;
  padding:0; border:0; background:transparent; cursor:pointer;
  -webkit-tap-highlight-color:transparent;
}
.jl-pin__name{ position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; }
.jl-pin__ring{
  position:absolute; left:var(--px); top:var(--py);
  width:clamp(26px, 3.4vw, 58px); aspect-ratio:1; transform:translate(-50%,-50%);
  border:2px solid rgba(236,199,127,.85); border-radius:50%;
  box-shadow:0 0 12px rgba(236,199,127,.55);
  animation:jl-pulse 2.8s ease-out infinite;
  pointer-events:none;
}
.jl-pin:hover .jl-pin__ring,.jl-pin:focus-visible .jl-pin__ring,.jl-pin.is-active .jl-pin__ring{
  animation:none; border-color:#fff1c9;
  box-shadow:0 0 0 3px rgba(118,15,12,.75), 0 0 26px rgba(255,214,140,.9);
}
.jl-pin:focus-visible{ outline:2px dashed var(--jl-gold-hi); outline-offset:2px; }
.jl-pin.is-active{ z-index:2; }

.jl-map__panel{
  position:relative;
  margin:1.2rem var(--jl-pad) 0;
  padding:1.4rem 1.3rem 1.5rem;
  border:1px solid rgba(201,154,69,.45);
  background:linear-gradient(#15110c, #0a0806);
  box-shadow:inset 0 0 0 4px #0a0806, inset 0 0 0 5px rgba(201,154,69,.18);
}
.jl-map__prompt{ margin:0; color:var(--jl-mute); font:400 1rem/1.5 var(--jl-serif); }
.jl-map__name{ margin:0 0 .6rem; color:var(--jl-gold-hi); font:600 clamp(1.3rem, 5vw, 1.7rem)/1.1 var(--jl-display); text-transform:uppercase; letter-spacing:.04em; outline:none; }
.jl-map__text{ margin:0 0 1.1rem; color:#eadfc8; font:400 1rem/1.6 var(--jl-serif); }
.jl-map__panel .jl-eyebrow{ margin-bottom:.5rem; }
.jl-map__cards{
  display:grid; grid-template-columns:repeat(2, minmax(0, 1fr)); gap:8px;
  margin:1rem var(--jl-pad) 0; padding:0; list-style:none;
}
.jl-mapcard{
  display:grid; gap:.2rem; width:100%; min-height:56px; padding:.7rem .75rem;
  border:1px solid rgba(201,154,69,.35); background:#0f0c09;
  color:inherit; text-align:left; cursor:pointer;
}
.jl-mapcard b{ color:#f2dcae; font:600 .78rem/1.2 var(--jl-display); letter-spacing:.06em; text-transform:uppercase; }
.jl-mapcard span{ color:var(--jl-mute); font:400 .8rem/1.3 var(--jl-body); }
.jl-mapcard.is-active{ border-color:var(--jl-gold-hi); background:#1a130b; box-shadow:0 0 18px rgba(201,154,69,.25); }

/* ══ 5 · DEFENDER OF A NATION ═════════════════════════════════════════ */
.jl-defender{ min-height:620px; display:grid; place-items:center; overflow:hidden; background:#0a0605; }
.jl-defender__art{
  position:absolute; inset:0; width:100%; height:100%; z-index:-3;
  object-fit:cover; object-position:40% 45%;
  transform:scale(1.05);
}
.jl-defender::after{
  content:''; position:absolute; inset:0; z-index:-2; pointer-events:none;
  background:
    radial-gradient(60% 70% at 50% 52%, rgba(5,6,6,.86) 0%, rgba(5,6,6,.62) 45%, rgba(5,6,6,.25) 80%),
    linear-gradient(180deg, var(--jl-black) 0, transparent 18%, transparent 82%, var(--jl-black) 100%);
}
.jl-embers{
  position:absolute; inset:0; z-index:-1; pointer-events:none; opacity:.7;
  background-image:
    radial-gradient(2px 2px at 12% 90%, #ffb357, transparent 70%),
    radial-gradient(2px 2px at 28% 80%, #ff9a3c, transparent 70%),
    radial-gradient(1.5px 1.5px at 47% 95%, #ffcf7a, transparent 70%),
    radial-gradient(2px 2px at 63% 85%, #ff8a2a, transparent 70%),
    radial-gradient(1.5px 1.5px at 78% 92%, #ffc266, transparent 70%),
    radial-gradient(2px 2px at 90% 82%, #ff9d45, transparent 70%);
  background-size:100% 100%;
  animation:jl-embers 9s linear infinite;
}
.jl-defender__copy{ max-width:52rem; padding:clamp(72px, 10vw, 120px) var(--jl-pad); text-align:center; }
.jl-defender__sub{
  margin:1rem 0 1.4rem;
  color:#f2d59b; font:600 clamp(.9rem, 3.4vw, 1.25rem)/1.3 var(--jl-display); letter-spacing:.2em; text-transform:uppercase;
}
.jl-defender__copy > p:not(.jl-eyebrow):not(.jl-defender__sub){ margin:0 auto; max-width:40rem; color:#f1e7d2; font:400 clamp(1.02rem, 2.4vw, 1.2rem)/1.7 var(--jl-serif); text-shadow:0 2px 10px #000; }
.jl-quote{ margin:2rem auto 0; max-width:34rem; padding:1.1rem 0 0; border-top:1px solid rgba(201,154,69,.4); }
.jl-quote p{ margin:0; color:var(--jl-gold-hi); font:italic 400 clamp(1.05rem, 2.6vw, 1.3rem)/1.5 var(--jl-serif); }
.jl-quote cite{ display:block; margin-top:.5rem; color:var(--jl-mute); font:500 .66rem/1.4 var(--jl-display); font-style:normal; letter-spacing:.16em; text-transform:uppercase; }

/* ══ 6 · THE BOOK ═════════════════════════════════════════════════════ */
.jl-book{
  padding:clamp(56px, 8vw, 110px) var(--jl-pad);
  background:
    radial-gradient(50% 60% at 22% 45%, rgba(232,135,46,.14), transparent 70%),
    radial-gradient(40% 50% at 85% 20%, rgba(118,15,12,.16), transparent 70%),
    linear-gradient(#0c0906, #060504);
}
.jl-book__in{ display:grid; gap:2.4rem; max-width:1180px; margin:0 auto; }
.jl-book__cover{ position:relative; margin:0 auto; width:min(74vw, 400px); perspective:1400px; }
.jl-book__cover picture img{
  position:relative; z-index:1; width:100%; height:auto;
  border-radius:2px 6px 6px 2px;
  box-shadow:-2px 0 0 #2a1a0c inset, 0 2px 0 rgba(255,255,255,.04), 18px 26px 44px rgba(0,0,0,.75), 0 0 60px rgba(232,135,46,.12);
  transform:rotateY(-9deg) rotateX(2deg);
  transform-origin:left center;
  transition:transform .6s cubic-bezier(.22,.61,.36,1);
}
.jl-book__cover:hover picture img{ transform:rotateY(-3deg) rotateX(1deg); }
.jl-book__table{
  position:relative; z-index:0; width:150%; max-width:none; margin:-2.4rem 0 0 -25%;
  -webkit-mask-image:linear-gradient(90deg, transparent, #000 18%, #000 82%, transparent), linear-gradient(180deg, transparent, #000 30%);
          mask-image:linear-gradient(90deg, transparent, #000 18%, #000 82%, transparent);
  opacity:.85;
}
.jl-book__info{ text-align:center; }
.jl-book__subtitle{ margin:.8rem 0 .4rem; color:#f3d69d; font:600 clamp(1rem, 3.6vw, 1.35rem)/1.25 var(--jl-display); letter-spacing:.14em; text-transform:uppercase; }
.jl-book__by{ margin:0 0 1.2rem; color:var(--jl-mute); font:500 .7rem/1.4 var(--jl-display); letter-spacing:.16em; text-transform:uppercase; }
.jl-book__blurb{ margin:0 auto 1.6rem; max-width:34rem; color:#eadfc8; font:400 1.08rem/1.65 var(--jl-serif); }
.jl-book__info .jl-actions--left{ justify-content:center; }
.jl-book__note{ margin:.9rem 0 0; color:var(--jl-mute); font:400 .82rem/1.4 var(--jl-body); letter-spacing:.04em; }
.jl-features{
  display:grid; grid-template-columns:repeat(2, minmax(0, 1fr)); gap:1rem;
  margin:2rem auto 0; padding:1.4rem 0 0; max-width:34rem; list-style:none;
  border-top:1px solid rgba(201,154,69,.3);
}
.jl-features li{ display:grid; justify-items:center; gap:.55rem; color:#e9d3a4; font:600 .64rem/1.35 var(--jl-display); letter-spacing:.14em; text-transform:uppercase; }
.jl-features svg{
  width:46px; height:46px; padding:9px;
  border:1px solid rgba(201,154,69,.6); border-radius:50%;
  fill:none; stroke:var(--jl-gold-hi); stroke-width:1.5; stroke-linecap:round; stroke-linejoin:round;
  box-shadow:inset 0 0 0 3px #0a0806, inset 0 0 0 4px rgba(201,154,69,.25);
}

/* ══ 7 · COLLECTION ═══════════════════════════════════════════════════ */
.jl-collection{ padding:clamp(56px, 7vw, 96px) 0 clamp(48px, 6vw, 80px); overflow:hidden; background:var(--jl-black); }
.jl-collection__art{
  position:absolute; inset:0; width:100%; height:100%; z-index:-2;
  object-fit:cover; object-position:50% 50%;
  opacity:.34; filter:blur(3px) saturate(.9);
  transform:scale(1.06);
}
.jl-collection::after{
  content:''; position:absolute; inset:0; z-index:-1; pointer-events:none;
  background:radial-gradient(80% 70% at 50% 50%, rgba(5,6,6,.55), rgba(5,6,6,.92));
}
.jl-collection .jl-sechead{ padding:0 var(--jl-pad); text-align:center; }
.jl-cards{
  display:flex; gap:16px;
  margin:2rem 0 2.2rem; padding:.5rem var(--jl-pad) 1rem;
  overflow-x:auto; scroll-snap-type:x mandatory; scroll-padding:0 var(--jl-pad);
  scrollbar-width:thin; scrollbar-color:var(--jl-gold) transparent;
}
.jl-cards__loading{ width:100%; margin:0; color:var(--jl-mute); text-align:center; font:400 1rem/1.5 var(--jl-serif); }
.jl-cards__loading a{ color:var(--jl-gold-hi); }
.jl-card{ flex:0 0 min(72vw, 260px); scroll-snap-align:start; }
.jl-card__link{
  position:relative; display:grid; height:100%;
  padding:12px 12px 14px;
  border:1px solid rgba(201,154,69,.55);
  background:linear-gradient(#17120d, #0a0806);
  box-shadow:inset 0 0 0 5px #0a0806, inset 0 0 0 6px rgba(201,154,69,.25), 0 14px 30px rgba(0,0,0,.55);
  color:inherit; text-decoration:none;
  transition:border-color .25s ease, box-shadow .25s ease;
}
.jl-card__frame{ display:block; overflow:hidden; aspect-ratio:1; background:#0d0b09; border:1px solid rgba(201,154,69,.2); }
.jl-card__frame img{ width:100%; height:100%; object-fit:cover; transition:transform .6s cubic-bezier(.22,.61,.36,1); }
.jl-card__label{
  justify-self:center; margin:-14px 0 0; position:relative; z-index:1;
  padding:.35rem .9rem;
  border:1px solid rgba(201,154,69,.6);
  background:linear-gradient(#1d160e, #0d0a07);
  color:#f1d79f; font:600 .66rem/1 var(--jl-display); letter-spacing:.2em; text-transform:uppercase;
}
.jl-card__info{ display:grid; gap:.3rem; margin-top:.8rem; text-align:center; }
.jl-card__name{ color:#efe2c6; font:400 .98rem/1.3 var(--jl-serif); }
.jl-card__meta{ color:var(--jl-mute); font:400 .8rem/1.3 var(--jl-body); }
.jl-card__meta b{ color:var(--jl-gold-hi); font-weight:500; }
.jl-card__link:hover,.jl-card__link:focus-visible{
  border-color:var(--jl-gold-hi);
  box-shadow:inset 0 0 0 5px #0a0806, inset 0 0 0 6px rgba(236,199,127,.55), 0 0 30px rgba(201,154,69,.35), 0 14px 30px rgba(0,0,0,.55);
}
.jl-card__link:hover .jl-card__frame img,.jl-card__link:focus-visible .jl-card__frame img{ transform:scale(1.05); }
.jl-card__link:focus-visible{ outline:2px solid var(--jl-gold-hi); outline-offset:3px; }

/* ══ 8 · THE LEGEND NEVER DIED ════════════════════════════════════════ */
.jl-closing{ min-height:560px; display:grid; place-items:center; overflow:hidden; background:#04070a; }
.jl-closing picture,.jl-closing__art{ position:absolute; inset:0; width:100%; height:100%; z-index:-3; }
.jl-closing__art{ object-fit:cover; object-position:50% 60%; animation:jl-drift 30s ease-in-out infinite alternate; }
.jl-closing::after{
  content:''; position:absolute; inset:0; z-index:-1; pointer-events:none;
  background:radial-gradient(55% 60% at 50% 50%, rgba(4,6,8,.62), rgba(4,6,8,.15) 75%), linear-gradient(180deg, var(--jl-black), transparent 22%, transparent 78%, var(--jl-black));
}
.jl-hero__fog--low{ opacity:.18; height:45%; }
.jl-closing__copy{ padding:clamp(72px, 10vw, 120px) var(--jl-pad); text-align:center; }
.jl-closing blockquote{ margin:1.4rem auto 2rem; max-width:34rem; }
.jl-closing blockquote p{ margin:0; color:#f4e6c8; font:italic 400 clamp(1.25rem, 4vw, 1.8rem)/1.45 var(--jl-serif); text-shadow:0 2px 14px #000; }

/* ══ Drawer + dialogs ═════════════════════════════════════════════════ */
.jl-drawer{
  width:min(100%, 620px); max-width:100%; height:100%; max-height:100%;
  margin:0 0 0 auto; padding:0;
  border:0; border-left:1px solid rgba(201,154,69,.55);
  background:linear-gradient(#120e0a, #070605);
  color:var(--jl-cream);
  box-shadow:-20px 0 60px rgba(0,0,0,.7);
}
.jl-drawer[open]{ animation:jl-slide .45s cubic-bezier(.22,.61,.36,1); }
.jl-drawer::backdrop{ background:rgba(3,3,3,.72); backdrop-filter:blur(2px); }
.jl-drawer__in{ height:100%; overflow-y:auto; padding:clamp(22px, 4vw, 40px) clamp(20px, 4vw, 44px) 32px; overscroll-behavior:contain; }
.jl-drawer__close{
  position:sticky; top:0; float:right; z-index:2;
  width:44px; height:44px; margin:-8px -8px 0 0;
  border:1px solid rgba(201,154,69,.45); background:#0c0a08; color:var(--jl-gold-hi);
  font-size:1.6rem; line-height:1; cursor:pointer;
}
.jl-drawer__close:hover,.jl-drawer__close:focus-visible{ border-color:var(--jl-gold-hi); }
.jl-drawer__img{ width:132px; height:auto; margin:0 0 1rem; border:1px solid rgba(201,154,69,.5); box-shadow:inset 0 0 0 3px #060505; }
.jl-drawer__date{ margin:0; color:var(--jl-gold); font:700 .9rem/1.2 var(--jl-display); letter-spacing:.12em; text-transform:uppercase; }
.jl-drawer__title{ margin:.3rem 0 .8rem; color:var(--jl-gold-hi); font:600 clamp(1.6rem, 5vw, 2.2rem)/1.05 var(--jl-display); text-transform:uppercase; letter-spacing:.03em; }
.jl-drawer__summary{ margin:0 0 1.2rem; color:#f6ead0; font:italic 400 1.12rem/1.55 var(--jl-serif); }
.jl-drawer__body p{ margin:0 0 1rem; color:#e6dac1; font:400 1.02rem/1.7 var(--jl-serif); }
.jl-drawer__facts{ margin:1.4rem 0; padding:1rem 1.1rem; list-style:none; border:1px solid rgba(201,154,69,.3); background:rgba(201,154,69,.05); }
.jl-drawer__facts li{ position:relative; padding:.3rem 0 .3rem 1.3rem; color:#efdcb3; font:400 .92rem/1.45 var(--jl-body); }
.jl-drawer__facts li::before{ content:'⚜'; position:absolute; left:0; top:.28rem; color:var(--jl-gold); font-size:.8rem; }
.jl-drawer__myth{ margin:0 0 1.2rem; }
.jl-drawer__myth:not(:empty){ padding:1rem 1.1rem; border-left:3px solid var(--jl-crimson); background:rgba(118,15,12,.14); }
.jl-drawer__myth p{ margin:0 0 .45rem; color:#ead9c0; font:400 .95rem/1.55 var(--jl-serif); }
.jl-drawer__myth b,.jl-myth b{ display:block; color:var(--jl-gold-hi); font:600 .62rem/1.4 var(--jl-display); letter-spacing:.18em; text-transform:uppercase; }
.jl-myth__verdict{ margin:0 0 .5rem!important; color:#f1a08f!important; font:600 .66rem/1.2 var(--jl-display)!important; letter-spacing:.2em; text-transform:uppercase; }
.jl-drawer__sources{ margin:0 0 1.6rem; color:var(--jl-mute); font:400 .8rem/1.5 var(--jl-body); }
.jl-drawer__nav{ display:flex; justify-content:space-between; gap:.6rem; padding-top:1rem; border-top:1px solid rgba(201,154,69,.25); }
.jl-drawer__nav .jl-btn{ flex:1 1 0; font-size:.68rem; }
.jl-myths{ margin:1.2rem 0 1.8rem; padding:0; list-style:none; display:grid; gap:12px; }
.jl-myth{ padding:1rem 1.1rem; border:1px solid rgba(201,154,69,.28); background:rgba(0,0,0,.25); }
.jl-myth p{ margin:0 0 .5rem; color:#e9dcc2; font:400 .98rem/1.55 var(--jl-serif); }
.jl-myth__legend{ color:#cdbfa3!important; }

/* ══ Floating cart ════════════════════════════════════════════════════ */
.jl-cartfab{
  position:fixed; right:16px; bottom:16px; z-index:80;
  display:none; place-items:center;
  width:54px; height:54px; border-radius:50%;
  border:1px solid var(--jl-gold); background:radial-gradient(circle at 40% 35%, #1f1810, #070605);
  color:var(--jl-gold-hi); cursor:pointer;
  box-shadow:0 10px 26px rgba(0,0,0,.6), 0 0 18px rgba(201,154,69,.25);
}
.jl-cartfab.is-on,.jl-cartfab:has(.cart-count.on){ display:grid; }
.jl-cartfab svg{ width:24px; height:24px; fill:none; stroke:currentColor; stroke-width:1.6; stroke-linecap:round; stroke-linejoin:round; }
.jl-cartfab .cart-count{
  position:absolute; top:-3px; right:-3px; min-width:20px; height:20px; padding:0 5px;
  display:grid; place-items:center; border-radius:10px;
  background:var(--jl-crimson); color:#fff; font:600 .7rem/1 var(--jl-body);
}

/* ══════════════════════════════════════════════════════════════════════
   TABLET  (≥ 761px)
   ══════════════════════════════════════════════════════════════════════ */
@media (min-width:761px){
  .jl-hero{ min-height:clamp(640px, 88vh, 820px); align-items:center; }
  .jl-hero__art{ object-position:68% 30%; }
  .jl-hero::after{
    background:
      linear-gradient(90deg, rgba(5,6,6,.92) 0%, rgba(5,6,6,.78) 30%, rgba(5,6,6,.3) 55%, rgba(5,6,6,0) 72%),
      linear-gradient(0deg, var(--jl-black) 0%, rgba(5,6,6,0) 26%),
      linear-gradient(180deg, rgba(5,6,6,.55) 0%, rgba(5,6,6,0) 24%);
  }
  .jl-hero__copy{
    width:min(660px, 56vw);
    padding:calc(var(--bar, 88px) + 24px) 0 64px var(--jl-pad);
    text-align:left;
  }
  .jl-hero__tags{ justify-content:flex-start; }
  .jl-display{ font-size:clamp(4rem, 8.6vw, 8.6rem); }
  .jl-display--md{ font-size:clamp(2.6rem, 4.8vw, 4.4rem); }
  .jl-scroll{ display:grid; }
  .jl-hero .jl-actions{ justify-content:flex-start; }

  .jl-tl__item{ flex-basis:236px; }
  .jl-map__cards{ grid-template-columns:repeat(4, minmax(0, 1fr)); }

  .jl-book__in{ grid-template-columns:minmax(260px, 420px) 1fr; align-items:center; gap:clamp(40px, 6vw, 96px); }
  .jl-book__info{ text-align:left; }
  .jl-book__info .jl-actions--left{ justify-content:flex-start; }
  .jl-book__blurb{ margin-left:0; }
  .jl-features{ margin-left:0; }
  .jl-legend__portrait{ max-height:560px; object-position:30% 18%; }
  .jl-parchment{ max-width:640px; margin-left:auto; margin-right:auto; }
  .jl-defender{ min-height:680px; }
  .jl-closing{ min-height:620px; }
}

/* ══════════════════════════════════════════════════════════════════════
   DESKTOP  (≥ 900px) — the painted art takes over
   Frames keep the art's exact 2170:725 proportion, so every live control
   sits on the button or tile painted beneath it.
   ══════════════════════════════════════════════════════════════════════ */
@media (min-width:900px){
  .jl-frame--legend,.jl-frame--timeline,.jl-map__frame{
    position:relative; display:block; max-width:2170px; margin:0 auto; aspect-ratio:2170/725;
  }
  .jl-legend,.jl-timeline,.jl-map{ background:var(--jl-black); }
  .jl-frame--legend .jl-frame__art,.jl-frame--timeline .jl-frame__art,.jl-map__inner .jl-frame__art{
    display:block; position:absolute; inset:0; width:100%; height:100%; object-fit:cover; opacity:1; z-index:0;
  }
  /* soft edges where very wide screens run past the art */
  .jl-frame--legend::after,.jl-frame--timeline::after,.jl-map__frame::after{
    content:''; position:absolute; inset:0; z-index:1; pointer-events:none;
    box-shadow:inset 0 0 40px 10px var(--jl-black);
  }

  /* hotspot buttons: the painted button shows through; ours adds the glow */
  .jl-hot{
    position:absolute; z-index:3;
    left:calc(var(--hx) * 1%); top:calc(var(--hy) * 1%);
    width:calc(var(--hw) * 1%); height:calc(var(--hh) * 1%);
    min-height:0; padding:0; margin:0;
    border:1px solid transparent; background:transparent; box-shadow:none;
    color:transparent; font-size:0;
    transform:none;
  }
  .jl-hot:hover,.jl-hot:focus-visible{
    transform:none; background:rgba(255,220,150,.06);
    border-color:rgba(236,199,127,.85);
    box-shadow:0 0 22px rgba(236,199,127,.45), inset 0 0 18px rgba(236,199,127,.18);
  }
  .jl-hot > span{ display:none; }

  /* 2 · legend: painted panel */
  .jl-frame .jl-legend__portrait{ display:none; }
  .jl-legend__copy,.jl-parchment{ position:static; margin:0; padding:0; background:none; clip-path:none; box-shadow:none; }
  .jl-legend__copy > :not(.jl-hot),.jl-parchment > :not(.jl-hot){ position:absolute!important; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; }
  .jl-hot--story{ --hx:42.3; --hy:76.6; --hw:17.6; --hh:9.4; }
  .jl-hot--truth{ --hx:77.4; --hy:62.8; --hw:17.5; --hh:9; }

  /* 3 · timeline: each card sits over its painted tile */
  .jl-timeline{ padding:0; }
  .jl-timeline__head{ position:absolute!important; width:1px; height:1px; padding:0; overflow:hidden; clip:rect(0 0 0 0); }
  .jl-tl{ position:absolute; inset:0; z-index:2; display:block; padding:0; overflow:visible; }
  .jl-tl__item{ position:absolute; left:calc(var(--x) * 1%); width:calc(var(--w) * 1%); top:28.3%; height:53.8%; }
  .jl-tl__card{
    height:100%; padding:0; border-color:transparent; background:transparent; box-shadow:none;
  }
  .jl-tl__card > *{ opacity:0; }
  .jl-tl__card::after{
    content:'Open the history'; position:absolute; left:50%; bottom:-2.1em; transform:translate(-50%, 4px);
    opacity:0; white-space:nowrap;
    color:var(--jl-gold-hi); font:600 clamp(.52rem, .62vw, .66rem)/1 var(--jl-display); letter-spacing:.18em; text-transform:uppercase;
    transition:opacity .2s ease, transform .2s ease;
  }
  .jl-tl__card:hover,.jl-tl__card:focus-visible,.jl-tl__card.is-active{
    background:linear-gradient(180deg, rgba(255,214,140,.08), rgba(255,214,140,0) 60%);
    border-color:rgba(236,199,127,.9);
    box-shadow:0 0 26px rgba(236,199,127,.45), inset 0 0 22px rgba(236,199,127,.15);
  }
  .jl-tl__card:hover::after,.jl-tl__card:focus-visible::after{ opacity:1; transform:translate(-50%, 0); }
  .jl-tl__hint{ display:none; }

  /* 4 · map: full art, copy kept for readers, CTA over the painted button */
  .jl-map{ padding-bottom:0; }
  .jl-map__inner{ position:absolute; inset:0; width:100%; margin:0; }
  .jl-map__copy{ position:static; padding:0; }
  .jl-map__copy > :not(.jl-hot){ position:absolute!important; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; }
  .jl-map__panel{
    display:grid; grid-template-columns:minmax(220px, .9fr) 2fr; gap:.2rem 2.4rem; align-items:start;
    max-width:1180px; margin:-1px auto 0; padding:1.6rem 2rem;
    border-top:none;
  }
  .jl-map__panel.is-filled > .jl-eyebrow{ grid-column:1; }
  .jl-map__panel.is-filled > .jl-map__name{ grid-column:1; }
  .jl-map__panel.is-filled > .jl-grade{ grid-column:1; justify-self:start; }
  .jl-map__panel.is-filled > .jl-map__text{ grid-column:2; grid-row:1 / span 3; }
  .jl-map__panel.is-filled > .jl-btn{ grid-column:2; justify-self:start; }
  .jl-map__cards{ display:none; }
  .jl-map::after{ content:''; display:block; height:clamp(40px, 5vw, 70px); }

  .jl-cards{ justify-content:center; flex-wrap:wrap; overflow:visible; max-width:1320px; margin-left:auto; margin-right:auto; }
  .jl-card{ flex:0 1 calc((100% - 16px * (var(--n, 4) - 1)) / var(--n, 4)); min-width:200px; max-width:260px; }
  .jl-card__info{ transition:transform .3s ease; }
  .jl-card__meta{ opacity:.7; transition:opacity .3s ease; }
  .jl-card__link:hover .jl-card__meta,.jl-card__link:focus-visible .jl-card__meta{ opacity:1; }
}

@media (min-width:1100px){
  .jl-features{ grid-template-columns:repeat(4, minmax(0, 1fr)); max-width:none; }
}

@media (min-width:1400px){
  .jl-hero__copy{ padding-left:calc(var(--jl-pad) + 2vw); }
}

/* ── motion ───────────────────────────────────────────────────────────── */
@keyframes jl-drift{ from{ transform:scale(1.02) translate3d(0,0,0); } to{ transform:scale(1.08) translate3d(-1%,-.6%,0); } }
@keyframes jl-fog{ from{ transform:translate3d(-6%,0,0); } to{ transform:translate3d(6%,-3%,0); } }
@keyframes jl-flicker{ 0%,100%{ opacity:.85; } 42%{ opacity:1; } 47%{ opacity:.7; } 55%{ opacity:.95; } 78%{ opacity:.8; } }
@keyframes jl-rise{ from{ opacity:0; transform:translateY(24px); } to{ opacity:1; transform:none; } }
@keyframes jl-scroll{ 0%,100%{ transform:scaleY(.6); transform-origin:top; opacity:.5; } 50%{ transform:scaleY(1); opacity:1; } }
@keyframes jl-pulse{ 0%{ box-shadow:0 0 0 0 rgba(236,199,127,.55); } 70%{ box-shadow:0 0 0 14px rgba(236,199,127,0); } 100%{ box-shadow:0 0 0 0 rgba(236,199,127,0); } }
@keyframes jl-embers{ from{ background-position:0 0; transform:translateY(0); opacity:.7; } to{ transform:translateY(-60px); opacity:.25; } }
@keyframes jl-slide{ from{ transform:translateX(40px); opacity:0; } to{ transform:none; opacity:1; } }

@media (prefers-reduced-motion: reduce){
  .jl-hero__art,.jl-closing__art,.jl-hero__fog i,.jl-hero__glow,.jl-embers,.jl-pin__ring,.jl-scroll i,.jl-hero__copy,.jl-drawer[open]{ animation:none!important; }
  .jl-reveal{ opacity:1; transform:none; transition:none; }
  .jl-btn,.jl-card__frame img,.jl-book__cover picture img{ transition:none; }
  html{ scroll-behavior:auto; }
}