/*
 * JLo News Layout: Jennifer-Lopez.net design.
 * Only loaded on the pages the plugin draws (home, news, archives, search, 404).
 */

/* ---------- Tokens ---------- */
:root {
  --void: #FFFBF3;          /* page background: warm parchment */
  --void-2: #FBF3E4;
  --void-3: #F3E5CB;
  --velvet-deep: #EAD6B0;
  --velvet: #F2E3C4;
  --garnet: #C0392B;        /* live dot / red accents (rose red from the header) */
  --gold: #8B5E1A;          /* main accent: links, kickers, italics */
  --gold-soft: rgba(139, 94, 26, .55);
  --gold-line: rgba(139, 94, 26, .25);
  --bone: #46290d;          /* headings (your brown) */
  --bone-2: #5B3F2B;        /* body text */
  --smoke: #86705C;         /* meta text */
  --line: rgba(70, 41, 13, .10);

  --f-display: "Bodoni Moda", "Didot", "Bodoni 72", Georgia, serif;
  --f-caps: "Jost", "Futura", "Century Gothic", system-ui, sans-serif;
  --f-body: "Jost", "Futura", "Century Gothic", system-ui, sans-serif;

  --gutter: clamp(16px, 3.4vw, 40px);
  --ease: cubic-bezier(.45, 0, .55, 1);
  --t: 400ms;
  --t-slow: 500ms;

  /* art-nouveau line art (gold stroke) */
  --orn-corner: url("assets/ornaments/corner.svg");
  --orn-corner-alt: url("assets/ornaments/corner-alt.svg");
  --orn-corner-gem: url("assets/ornaments/corner-gem.svg");
  --orn-corner-stars: url("assets/ornaments/corner-stars.svg");
  --widget-bg: linear-gradient(180deg, #FFFFFF, #FFFFFF);
  --icon-heart: url("assets/icons/heart.svg");
  --icon-celtic-n: url("assets/icons/celtic-n.svg");
  --icon-globe: url("assets/icons/globe.svg");
  --icon-dice: url("assets/icons/dice.svg");
  --icon-video: url("assets/icons/video.svg");
  --icon-lyric: url("assets/icons/lyric.svg");
 --icon-beauty: url("assets/icons/beauty.svg");
 --icon-intro: url("assets/icons/heart.svg");
  --orn-arch: url("assets/ornaments/arch.svg");
  --orn-rule: url("assets/ornaments/rule.svg");
  --orn-monogram: url("assets/ornaments/monogram.svg");
  --orn-chain: url("assets/ornaments/monogram-line.svg");
  --orn-chain-center: url("assets/ornaments/monogram-line-middle.svg");
  --orn-chain-middle: url("assets/ornaments/monogram-line-center.svg");
}

/* ---------- Base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { background: var(--void); color-scheme: light; }
body {
  margin: 0;
  background: var(--void);
  color: var(--bone);
  font: 300 17px/1.65 var(--f-body);
  -webkit-font-smoothing: antialiased;
  overflow-x: clip;
}
/* shimmer that trails the cursor + a faint crystal vignette */
body::before {
  content: "";
  position: fixed; inset: 0; z-index: 0; pointer-events: none;
  background:
    radial-gradient(640px circle at var(--mx, 72%) var(--my, 18%), rgba(139, 94, 26, .07), transparent 65%),
    radial-gradient(120% 90% at 50% 0%, transparent 55%, rgba(234, 214, 176, .55) 100%);
}
body::after {
  content: "";
  position: fixed; inset: 0; z-index: 100; pointer-events: none; opacity: .025; mix-blend-mode: multiply;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}
img { max-width: 100%; height: auto; }
a { color: inherit; text-decoration-color: var(--gold-soft); text-decoration-thickness: 1px; text-underline-offset: 4px; transition: color var(--t) var(--ease); }
a:hover { color: var(--gold); }
:focus-visible { outline: 1px solid var(--gold); outline-offset: 4px; }
button { font: inherit; color: inherit; }
::selection { background: var(--velvet); color: var(--bone); }
.screen-reader-text {
  position: absolute !important; width: 1px; height: 1px; overflow: hidden;
  clip: rect(1px, 1px, 1px, 1px); white-space: nowrap;
}
.skip-link:focus {
  clip: auto; width: auto; height: auto; z-index: 200; top: 8px; left: 8px;
  background: var(--gold); color: var(--void); padding: 10px 14px;
}

/* ---------- Header video banner ---------- */
.jlo-videohead {
  position: relative; z-index: 2; overflow: hidden; background: var(--void);
  border-bottom: 1px solid var(--gold-line);
  height: clamp(180px, 34vw, 460px, 720px);
}
.jlo-videohead__media { display: block; width: 100%; height: 100%; object-fit: cover; }
.jlo-videohead__veil {
  position: absolute; inset: 0; pointer-events: none;
  }
.jlo-motion {
  position: absolute; z-index: 3; right: var(--gutter); bottom: 14px;
  display: inline-flex; align-items: center; gap: 8px; cursor: pointer;
  padding: 8px 12px; border: 1px solid var(--gold-line); border-radius: 999px;
  background: rgba(255, 255, 255, .7); color: var(--gold);
  -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
  font: 600 9px/1 var(--f-caps); letter-spacing: .22em; text-transform: uppercase;
  transition: border-color var(--t) var(--ease), background var(--t) var(--ease), color var(--t) var(--ease);
}
.jlo-motion:hover { border-color: var(--gold); background: var(--gold); color: #fff; }
.jlo-motion svg { width: 10px; height: 10px; flex: none; }
.jlo-motion__play, .jlo-still .jlo-motion__pause { display: none; }
.jlo-still .jlo-motion__play { display: inline; }

/* ---------- Ticker ---------- */
.jlo-ticker {
  position: relative; z-index: 2;
  display: flex; align-items: stretch;
  background: linear-gradient(180deg, #2B1A10, #46290d);
  border-bottom: 1px solid var(--gold-line);
  font: 400 11px/1 var(--f-caps); letter-spacing: .22em; text-transform: uppercase;
  color: #E9D8B4; overflow: hidden;
}
.jlo-ticker__label {
  flex: none; display: flex; align-items: center; gap: 10px;
  padding: 11px 22px 11px var(--gutter);
  color: #E2B45C; border-right: 1px solid var(--gold-line);
  font-weight: 600;
}
.jlo-ticker__label::before {
  content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--garnet);
  box-shadow: 0 0 10px 2px rgba(214, 49, 79, .7); animation: jlo-candle 6s var(--ease) infinite;
}
.jlo-ticker__viewport { overflow: hidden; flex: 1; display: flex; align-items: center;
  mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent); }
.jlo-ticker__track { display: flex; width: max-content; animation: jlo-ticker 75s linear infinite; }
.jlo-ticker:hover .jlo-ticker__track { animation-play-state: paused; }
.jlo-ticker__track a { text-decoration: none; padding: 11px 0; white-space: nowrap; display: inline-flex; align-items: center; }
.jlo-ticker__track a::after { content: "\2767"; color: #E2B45C; margin: 0 34px; font-size: 13px; letter-spacing: 0; }

/* ---------- Header ---------- */
.jlo-header {
  position: sticky; top: env(safe-area-inset-top, 0px); z-index: 50;
  background: rgba(255, 255, 255, .88);
  -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px);
  border-bottom: 1px solid var(--gold-line);
}
.jlo-header__inner {
  max-width: 1340px; margin: 0 auto; padding: 16px var(--gutter);
  display: flex; align-items: center; gap: 32px;
}

/* JLO chain lines, repeated from side to side. Three drawings of the same chain:
   --top    chain along the top, medallions hanging down (under the header monogram)
   --center chain through the medallions (under the video banner)
   --middle chain along the bottom, medallions standing up (where the footer monogram starts) */
.jlo-chain {
  position: relative;
  z-index: 2;
  height: clamp(26px, 3vw, 39px);
  background-color: white;
  background-image: var(--orn-chain-center);
  background-position: center;
  background-size: auto 100%;
  background-repeat: repeat-x;
}
.jlo-chain--center { background-image: var(--orn-chain); }
.jlo-chain--middle { background-image: var(--orn-chain-middle); }
.jlo-logo {
  display: inline-flex; align-items: baseline; text-decoration: none; line-height: 1; flex: none;
  font: 500 clamp(22px, 2.5vw, 30px)/1 var(--f-display); letter-spacing: .14em;
}
.jlo-logo__main {
  background: linear-gradient(100deg, var(--bone) 0%, #F6E3B4 22%, #B8862F 40%, var(--bone) 60%, var(--bone) 100%);
  background-size: 250% 100%;
  -webkit-background-clip: text; background-clip: text; color: transparent;
  animation: jlo-foil 14s var(--ease) infinite;
}
.jlo-logo__tld { color: var(--gold); font-style: italic; letter-spacing: .06em; }
.jlo-logo:hover { color: inherit; }
.custom-logo-link img { max-height: 48px; width: auto; display: block; }

.jlo-nav { flex: 1; min-width: 0; }
.jlo-nav ul { list-style: none; margin: 0; padding: 0; display: flex; justify-content: center; gap: 6px; flex-wrap: wrap; }
.jlo-nav a {
  position: relative; display: block; padding: 8px 12px;
  font: 500 12px/1 var(--f-caps); letter-spacing: .22em; text-transform: uppercase; text-decoration: none;
  color: var(--bone-2);
}
.jlo-nav a::after {
  content: ""; position: absolute; left: 12px; right: 12px; bottom: 0; height: 1px;
  background: var(--gold); transform: scaleX(0); transform-origin: center;
  transition: transform var(--t) var(--ease);
}
.jlo-nav a:hover { color: var(--gold); }
.jlo-nav a:hover::after, .jlo-nav .current-menu-item > a::after, .jlo-nav .current-cat > a::after { transform: scaleX(1); }
.jlo-nav .current-menu-item > a, .jlo-nav .current-cat > a { color: var(--gold); }
.jlo-nav .sub-menu { display: none; }

.jlo-header__actions { display: flex; gap: 12px; align-items: center; flex: none; }
.jlo-iconbtn {
  display: grid; place-items: center; width: 40px; height: 40px; border-radius: 50%;
  background: transparent; border: 1px solid var(--gold-line); cursor: pointer; color: var(--gold);
  transition: border-color var(--t) var(--ease), background var(--t) var(--ease);
}
.jlo-iconbtn:hover { border-color: var(--gold); background: rgba(139, 94, 26, .08); }
.jlo-iconbtn svg { width: 17px; height: 17px; }
.jlo-btn, .search-submit, .jlo-search button {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px; cursor: pointer;
  padding: 12px 22px; border: 1px solid var(--gold-soft); border-radius: 0; background: transparent;
  color: var(--gold); text-decoration: none;
  font: 600 11px/1 var(--f-caps); letter-spacing: .24em; text-transform: uppercase;
  transition: background var(--t) var(--ease), color var(--t) var(--ease), border-color var(--t) var(--ease);
}
.jlo-btn:hover, .search-submit:hover, .jlo-search button:hover {
  background: var(--velvet); border-color: var(--gold); color: var(--bone);
}
.jlo-btn--solid { background: var(--gold); color: var(--void); border-color: var(--gold); }

.jlo-search { border-top: 1px solid var(--line); }
.jlo-search form { max-width: 1340px; margin: 0 auto; padding: 16px var(--gutter); display: flex; gap: 12px; }
.jlo-search input[type="search"], .search-form .search-field {
  flex: 1; min-width: 0; background: transparent; color: var(--bone);
  border: 0; border-bottom: 1px solid var(--gold-line); border-radius: 0;
  padding: 10px 2px; font: italic 400 22px var(--f-display);
  transition: border-color var(--t) var(--ease);
}
.jlo-search input[type="search"]:focus { outline: none; border-color: var(--gold); }

@media (max-width: 960px) {
  .jlo-header__inner { flex-wrap: wrap; gap: 10px 16px; }
  .jlo-nav { order: 3; flex-basis: 100%; overflow-x: auto; scrollbar-width: none; margin: 0 calc(var(--gutter) * -1); padding: 0 var(--gutter); }
  .jlo-nav ul { flex-wrap: nowrap; justify-content: flex-start; }
  .jlo-nav a { white-space: nowrap; padding: 8px 10px; }
  .jlo-header__actions { margin-left: auto; }
}

/* ---------- Layout ---------- */
.jlo-main {
  position: relative; z-index: 1;
  max-width: 1340px; margin: 0 auto;
  padding: 36px var(--gutter) 88px;
  display: grid; grid-template-columns: minmax(0, 1fr) 350px; gap: 56px; align-items: start;
}
.jlo-content { min-width: 0; display: grid; gap: 64px; }

/* Monogram pattern behind the news + sidebar (same tile as the footer).
   Full-bleed edge to edge, sits behind the content, scrolls with the page.
   The first gradient is a parchment veil that keeps the pattern faint:
   lower the .88 to show more monogram, raise it to show less. */
.jlo-main::before {
  content: ""; position: absolute; z-index: -1; pointer-events: none;
  top: 0; bottom: 0; left: 50%; width: 100vw; margin-left: -50vw;
  background:
    linear-gradient(180deg, var(--void) 0%, rgba(255, 251, 243, 0) 140px, rgba(255, 255, 255, 0) calc(100% - 140px), #FFFFFF 100%),
    linear-gradient(rgba(255, 251, 243, .88), rgba(255, 251, 243, .88)),
    var(--orn-monogram) center top / auto 100px repeat;
}
@media (max-width: 1060px) { .jlo-main { grid-template-columns: minmax(0, 1fr); gap: 56px; } }

/* ---------- Shared type ---------- */
.jlo-kicker {
  display: inline-flex; align-items: center; gap: 10px; width: fit-content;
  color: var(--gold); text-decoration: none;
  font: 600 10.5px/1 var(--f-caps); letter-spacing: .28em; text-transform: uppercase;
}
.jlo-kicker::before { content: ""; width: 22px; height: 1px; background: currentColor; opacity: .8; }
.jlo-kicker--garnet { color: var(--garnet); }
a.jlo-kicker:hover { color: var(--bone); }

.jlo-headline {
  margin: 0; font-family: var(--f-display); font-weight: 500;
  line-height: 1.04; letter-spacing: -.012em; text-wrap: balance;
  font-optical-sizing: auto;
}
.jlo-headline a { text-decoration: none; background: linear-gradient(var(--gold), var(--gold)) 0 100% / 0 1px no-repeat; transition: background-size var(--t-slow) var(--ease), color var(--t) var(--ease); }
.jlo-headline a:hover { color: var(--bone); background-size: 100% 1px; }
.jlo-headline mark {
  background: none; color: var(--gold); font-style: italic; font-weight: 400;
}
.jlo-meta {
  display: flex; flex-wrap: wrap; align-items: center; gap: 6px 18px;
  color: var(--smoke); font: 400 12px/1.4 var(--f-body); letter-spacing: .06em;
}
.jlo-meta > * + *::before { content: "·"; margin-right: 18px; margin-left: -9px; color: var(--gold-soft); }
.jlo-meta a { text-decoration: none; }
.jlo-meta .jlo-live { color: var(--garnet); display: inline-flex; align-items: center; gap: 8px; font-family: var(--f-caps); font-size: 10px; letter-spacing: .24em; text-transform: uppercase; }
.jlo-meta .jlo-live::after { content: ""; order: -1; width: 6px; height: 6px; border-radius: 50%; background: var(--garnet); box-shadow: 0 0 10px 2px rgba(214, 49, 79, .8); animation: jlo-candle 6s var(--ease) infinite; }

.jlo-sec-head { display: flex; align-items: center; gap: 20px; margin: 0 0 26px; }
.jlo-sec-head h2 {
  margin: 0; font: 500 clamp(26px, 2.8vw, 34px)/1 var(--f-display); letter-spacing: -.01em;
}
.jlo-sec-head h2 em { font-style: italic; font-weight: 400; color: var(--gold); }
.jlo-sec-head::after {
  content: ""; flex: 1; height: 16px;
  background: linear-gradient(var(--gold-line), var(--gold-line)) left center / calc(100% - 128px) 1px no-repeat, var(--orn-rule) right center / 120px 16px no-repeat;
}
.jlo-sec-head a { order: 3; font: 600 10.5px var(--f-caps); letter-spacing: .24em; text-transform: uppercase; text-decoration: none; color: var(--smoke); }
.jlo-sec-head a:hover { color: var(--gold); }

/* ---------- Media placeholders ---------- */
.ph {
  position: relative; display: block; overflow: hidden; isolation: isolate;
  aspect-ratio: 16 / 10; max-width: 100%; background: var(--void-3);
}
.ph img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; filter: saturate(.85) contrast(1.04); transition: transform var(--t-slow) var(--ease), filter var(--t-slow) var(--ease); }
.ph--art {
  background:
    radial-gradient(80% 70% at var(--px, 50%) var(--py, 20%), var(--c2) 0%, transparent 70%),
    radial-gradient(120% 90% at 50% 120%, var(--c3) 0%, transparent 60%),
    linear-gradient(180deg, var(--c1), var(--void));
}
.ph--art::before {
  content: ""; position: absolute; inset: 12% 0 0; z-index: 1;
  background: var(--orn-arch) center bottom / auto 88% no-repeat;
  opacity: .75; transition: opacity var(--t-slow) var(--ease), transform var(--t-slow) var(--ease);
}
.ph::after {
  content: ""; position: absolute; inset: 0; z-index: 2; pointer-events: none;
  background: radial-gradient(120% 100% at 50% 40%, transparent 45%, rgba(255, 255, 255, .55) 100%);
  transition: opacity var(--t-slow) var(--ease);
}
.ph--v1 { --c1: #F4E6CC; --c2: rgba(184, 134, 47, .45); --c3: rgba(139, 94, 26, .18); }
.ph--v2 { --c1: #F7EBD8; --c2: rgba(192, 57, 43, .22); --c3: rgba(139, 94, 26, .3); --px: 30%; }
.ph--v3 { --c1: #F1E6CF; --c2: rgba(184, 134, 47, .3); --c3: rgba(120, 140, 70, .25); --py: 30%; }
.ph--v4 { --c1: #F2E1C2; --c2: rgba(139, 94, 26, .5); --c3: rgba(70, 41, 13, .12); --px: 70%; }
.ph--v5 { --c1: #F6EAD9; --c2: rgba(214, 120, 90, .28); --c3: rgba(139, 94, 26, .2); }
.ph--v6 { --c1: #F3E8D4; --c2: rgba(70, 41, 13, .1); --c3: rgba(192, 57, 43, .22); --px: 40%; --py: 10%; }
.ph__label {
  position: absolute; left: 0; right: 0; bottom: 14px; z-index: 3; text-align: center;
  font: italic 400 clamp(18px, 2.4vw, 26px)/1 var(--f-display); color: var(--bone-2); opacity: .85;
}
.jlo-news-item:hover .ph img, .jlo-sh__media:hover img { transform: scale(1.03); filter: saturate(1) contrast(1.06); }
.jlo-news-item:hover .ph--art::before, .jlo-sh__media:hover.ph--art::before { opacity: 1; transform: translateY(-4px); }
.jlo-news-item:hover .ph::after, .jlo-sh__media:hover::after { opacity: .6; }

/* ---------- Hero: the stage ---------- */
.jlo-hero {
  --cw: 0px;
  position: relative; isolation: isolate; overflow: hidden; margin: 0;
  min-height: clamp(500px, 56vw, 680px);
  display: flex; align-items: flex-end;
  background: var(--void);
  box-shadow: 0 40px 90px -40px rgba(139, 94, 26, .3), 0 0 0 1px var(--gold-line);
}
.jlo-hero__stage {
  position: absolute; inset: 0; z-index: -3;
  background:
    radial-gradient(46% 60% at 50% -6%, rgba(70, 41, 13, .1), transparent 70%),
    radial-gradient(70% 50% at 50% 108%, rgba(184, 134, 47, .28), transparent 70%),
    linear-gradient(180deg, #f7f1e9, var(--void));
}
.jlo-hero__img { position: absolute; inset: 0; z-index: -3; width: 100%; height: 100%; object-fit: cover; filter: saturate(.85) contrast(1.04) brightness(.98); }
.jlo-hero__emblem {
  position: absolute; z-index: -2; left: 50%; top: 7%; width: min(46%, 380px); aspect-ratio: 1;
  transform: translateX(-50%); color: var(--gold); opacity: .42;
  animation: jlo-breathe 12s var(--ease) infinite;
}
.jlo-hero__emblem svg { width: 100%; height: 100%; display: block; overflow: visible; }
.jlo-hero__emblem .spin { transform-origin: 200px 200px; animation: jlo-rotate 120s linear infinite; }
.jlo-smoke { position: absolute; inset: 0; z-index: -1; width: 100%; height: 100%; display: block; pointer-events: none; }
.jlo-hero::before {
  content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0) 38%, rgba(255, 255, 255, .72) 70%, rgba(255, 255, 255, .95) 100%);
}
/* proscenium: crystal arch line */
.jlo-hero::after {
  content: ""; position: absolute; z-index: 3; pointer-events: none;
  inset: 14px calc(var(--cw) + 10px) 14px;
  border: 1px solid var(--gold-line); border-bottom: 0;
  border-radius: 50% 50% 0 0 / 70px 70px 0 0;
}
.jlo-hero__body {
  position: relative; z-index: 3; width: 100%; display: grid; gap: 18px; justify-items: center; text-align: center;
  padding: clamp(24px, 4vw, 48px) calc(var(--cw) + clamp(16px, 4vw, 48px));
}
.jlo-hero .jlo-headline { font-size: clamp(36px, 5.2vw, 74px); max-width: 17ch; }
.jlo-hero__dek { margin: 0; max-width: 56ch; color: var(--bone-2); font-size: clamp(15px, 1.4vw, 18px); }
.jlo-hero__row { display: flex; flex-wrap: wrap; gap: 14px 24px; align-items: center; justify-content: center; }
@media (max-width: 600px) {
  .jlo-hero::after { border-radius: 50% 50% 0 0 / 40px 40px 0 0; }
}
/* opening sequence for the copy: short UI fades, staggered */
.jlo-hero__body > * { animation: jlo-in var(--t-slow) var(--ease) both; }
.jlo-hero__body > :nth-child(1) { animation-delay: 0.3s; }
.jlo-hero__body > :nth-child(2) { animation-delay: 0.45s; }
.jlo-hero__body > :nth-child(3) { animation-delay: 0.6s; }
.jlo-hero__body > :nth-child(4) { animation-delay: 0.75s; }

/* ---------- Latest news (stacked) ---------- */
.jlo-news { display: grid; }
.jlo-news-item {
  display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 36px; align-items: start;
  padding: 52px 0;
}
.jlo-news-item:first-child { padding-top: 0; }
.jlo-news-item + .jlo-news-item { background: var(--orn-rule) center top / 120px 16px no-repeat; }
.jlo-news-item__frame {
  position: relative; display: block; padding: 6px; border: 1px solid var(--gold-line);
  transition: border-color var(--t) var(--ease);
}
.jlo-news-item:hover .jlo-news-item__frame { border-color: var(--gold-soft); }
.jlo-news-item__frame .ph { aspect-ratio: 4 / 5; }
.jlo-news-item__frame::before, .jlo-news-item__frame::after {
  content: ""; position: absolute; z-index: 5; width: 38px; height: 38px; pointer-events: none;
  background: var(--orn-corner) center / contain no-repeat;
}
.jlo-news-item__frame::before { top: 12px; left: 12px; }
.jlo-news-item__frame::after { bottom: 12px; right: 12px; transform: rotate(180deg); }
.jlo-news-item__text { display: grid; gap: 14px; align-content: start; }
.jlo-news-item .jlo-headline { font-size: clamp(28px, 2.9vw, 40px); }
.jlo-news-item__body { display: grid; gap: 14px; color: var(--bone-2); max-width: 62ch; margin-top: 4px; }
.jlo-news-item__body p { margin: 0; }
.jlo-news-item__body p:first-child::first-letter {
  float: left; font: italic 400 3.4em/.8 var(--f-display); color: var(--gold); margin: .08em .08em 0 0;
}
.jlo-more-link {
  justify-self: start; display: inline-flex; align-items: center; gap: 10px; margin-top: 4px;
  font: 600 10.5px/1 var(--f-caps); letter-spacing: .24em; text-transform: uppercase; text-decoration: none; color: var(--gold);
}
.jlo-more-link::after { content: ""; width: 28px; height: 1px; background: currentColor; transition: width var(--t) var(--ease); }
.jlo-more-link:hover { color: var(--bone); }
.jlo-more-link:hover::after { width: 44px; }
@media (max-width: 760px) {
  .jlo-news-item { grid-template-columns: minmax(0, 1fr); gap: 20px; padding: 44px 0; }
  .jlo-news-item__frame .ph { aspect-ratio: 16 / 10; }
}

.nav-links { display: flex; flex-wrap: wrap; gap: 6px; justify-content: center; align-items: center; }
.nav-links .page-numbers {
  display: grid; place-items: center; min-width: 44px; height: 44px; padding: 0 10px;
  text-decoration: none; font: 400 20px var(--f-display); color: var(--bone-2);
  border-bottom: 1px solid transparent; transition: color var(--t) var(--ease), border-color var(--t) var(--ease);
}
.nav-links .page-numbers.current { color: var(--gold); font-style: italic; border-color: var(--gold); }
.nav-links a.page-numbers:hover { color: var(--gold); border-color: var(--gold-line); }

/* ---------- Sidebar & widgets ---------- */
.jlo-sidebar { display: grid; gap: 30px; min-width: 0; }
.widget {
  position: relative; background: var(--widget-bg);
  border: 1px solid var(--gold-line);
  transition: border-color var(--t) var(--ease);
}
/* Per-widget-type icon, top-right corner. Layered as a second background image
   so it doesn't compete with the ::before/::after corner ornaments below. */
.jlo-widget--welcome  { background: var(--icon-heart)    top 12px right 12px / 45px 45px no-repeat, var(--widget-bg); }
.jlo-widget--trending { background: var(--icon-celtic-n) top 12px right 12px / 45px 45px no-repeat, var(--widget-bg); }
.jlo-widget--social    { background: var(--icon-globe)    top 12px right 12px / 45px 45px no-repeat, var(--widget-bg); }
.jlo-widget--poll     { background: var(--icon-dice)     top 12px right 12px / 45px 45px no-repeat, var(--widget-bg); }
.jlo-widget--streaming     { background: var(--icon-video)     top 12px right 12px / 45px 45px no-repeat, var(--widget-bg); }
.jlo-widget--lyrics       { background: var(--icon-lyric)     top 12px right 12px / 45px 45px no-repeat, var(--widget-bg); }
.jlo-widget--beauty       { background: var(--icon-beauty)     top 12px right 12px / 45px 45px no-repeat, var(--widget-bg); }
.jlo-widget--intro  { background: var(--icon-heart)    top 12px right 12px / 45px 45px no-repeat, var(--widget-bg); }



.widget:hover { border-color: var(--gold-soft); }
.widget::before, .widget::after {
  content: ""; position: absolute; z-index: 2; width: 34px; height: 34px; pointer-events: none;
  background: var(--orn-corner) center / contain no-repeat; opacity: .9;
}
.widget::before { top: 5px; left: 5px; background: var(--orn-corner-stars) center / contain no-repeat; opacity: .9; }
.widget::after { bottom: 5px; right: 5px; background: var(--orn-corner-gem) center / contain no-repeat; opacity: .9; }


.widget-title {
  margin: 0; padding: 24px 22px 16px; display: flex; flex-direction: column; align-items: center; gap: 8px; text-align: center;
  font: 500 24px/1.05 var(--f-display); letter-spacing: -.005em;
}
.widget-title small {
  order: -1; font: 600 9.5px/1 var(--f-caps); letter-spacing: .3em; text-transform: uppercase; color: var(--gold);
}
.widget-title small.is-live { color: var(--garnet); }
.widget-title::after { content: ""; width: 120px; height: 16px; background: var(--orn-rule) center / contain no-repeat; margin-top: 4px; }
.widget__body { padding: 4px 22px 22px; display: grid; gap: 14px; }
.widget__foot {
  display: flex; justify-content: space-between; align-items: center; gap: 10px;
  margin: 0 22px; padding: 14px 0 46px; border-top: 1px solid var(--line);
  font: 600 9.5px var(--f-caps); letter-spacing: .24em; text-transform: uppercase; color: var(--smoke);
}
.widget__foot a { text-decoration: none; color: var(--gold); }
.widget__foot a:hover { color: var(--bone); }
.widget ul:not([class]) { margin: 0; padding: 0 22px 22px 40px; }
.widget:not([class*="widget_jlo"]) > :not(.widget-title):not(ul) { padding: 0 22px; }

/* Lady Gaga on Social */
.jlo-sh { display: grid; gap: 14px; }
.jlo-sh__head { display: flex; align-items: center; gap: 12px; text-decoration: none; }
.jlo-sh__avatar {
  width: 42px; height: 42px; border-radius: 50%; flex: none; display: grid; place-items: center;
  background: radial-gradient(circle at 35% 30%, var(--gold), var(--velvet) 70%);
  font: italic 500 15px var(--f-display); color: var(--bone);
  box-shadow: 0 0 0 1px var(--void-2), 0 0 0 2px var(--gold-soft);
}
.jlo-sh__who { display: grid; gap: 2px; min-width: 0; }
.jlo-sh__who strong { font: 500 16px/1.2 var(--f-display); transition: color var(--t) var(--ease); }
.jlo-sh__who span { color: var(--smoke); font-size: 12px; }
.jlo-sh__head:hover strong { color: var(--gold); }
.jlo-sh__glyph { margin-left: auto; flex: none; color: var(--gold); }
.jlo-sh__media { width: 100%; }
.jlo-sh__media--tall { aspect-ratio: 9 / 16; max-height: 520px; }
.jlo-sh--instagram .jlo-sh__media { aspect-ratio: 4 / 5; }
.jlo-sh__media--tall.ph--art::before { inset: 30% 0 0; }
.jlo-video--vertical .jlo-video__frame { aspect-ratio: 9 / 16; max-height: 580px; margin: 0 auto; }
.jlo-sh__caption { margin: 0; font-size: 15px; line-height: 1.6; color: var(--bone-2); }
.jlo-sh__tag { color: var(--gold); }
.jlo-sh__stats { margin: 0; color: var(--smoke); font-size: 12px; letter-spacing: .06em; }
.jlo-sh__embed { overflow: hidden; }
.jlo-sh__embed blockquote { margin: 0 auto !important; min-width: 0 !important; max-width: 100% !important; }
.jlo-sh__embed iframe { max-width: 100%; }
.jlo-sh__embed--fb iframe { display: block; width: 100%; min-height: 480px; border: 0; }
.jlo-sh__icons { display: inline-flex; gap: 14px; align-items: center; }
.jlo-sh__icons a { display: grid; place-items: center; color: var(--gold); transition: color var(--t) var(--ease), transform var(--t) var(--ease); }
.jlo-sh__icons a:hover { color: var(--bone); transform: translateY(-2px); }
.jlo-sh__icons svg { width: 17px; height: 17px; }

/* Trending now */
.jlo-trending { margin: 0; padding: 0; list-style: none; counter-reset: trend; display: grid; }
.jlo-trending li + li { border-top: 1px solid var(--line); }
.jlo-trending a {
  display: grid; grid-template-columns: 2.4ch minmax(0, 1fr); gap: 14px; align-items: start;
  padding: 13px 0; text-decoration: none; counter-increment: trend;
}
.jlo-trending li:first-child a { padding-top: 0; }
.jlo-trending a::before { content: counter(trend, upper-roman); font: italic 400 22px/1 var(--f-display); color: var(--gold); text-align: right; }
.jlo-trending strong { display: block; font: 500 16px/1.28 var(--f-display); transition: color var(--t) var(--ease); }
.jlo-trending a:hover strong { color: var(--gold); }
.jlo-trending span { display: block; margin-top: 6px; color: var(--smoke); font-size: 12px; letter-spacing: .06em; }

/* Video */
.jlo-video__poster { display: block; width: 100%; border: 0; padding: 0; cursor: pointer; text-align: left; background-clip: padding-box; }
.jlo-video__poster.ph:not(.jlo-sh__media) { aspect-ratio: 16 / 9; }
.jlo-video__poster .ph__label { font-size: 26px; bottom: 16px; }
.jlo-video__play {
  position: absolute; z-index: 4; left: 50%; top: 44%; width: 64px; height: 64px; margin: -32px 0 0 -32px;
  border-radius: 50%; border: 1px solid var(--gold); background: rgba(255, 255, 255, .6);
  display: grid; place-items: center;
  -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px);
  transition: background var(--t) var(--ease), transform var(--t) var(--ease);
}
.jlo-video__play::before { content: ""; margin-left: 4px; border-style: solid; border-width: 9px 0 9px 14px; border-color: transparent transparent transparent var(--gold); }
.jlo-video__play::after { content: ""; position: absolute; inset: -9px; border-radius: 50%; border: 1px solid var(--gold-line); animation: jlo-halo 9s var(--ease) infinite; }
.jlo-video__poster:hover .jlo-video__play { background: rgba(139, 94, 26, .85); transform: scale(1.04); }
.jlo-video__dur {
  position: absolute; z-index: 4; left: 12px; top: 12px;
  font: 600 9px var(--f-caps); letter-spacing: .26em; color: var(--gold);
}
.jlo-video__frame { position: relative; aspect-ratio: 16 / 9; max-width: 100%; overflow: hidden; background: var(--void-3); }
.jlo-video__frame iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.jlo-video__title { margin: 0; font: italic 400 19px/1.3 var(--f-display); text-align: center; }
.jlo-video__note { margin: 0; color: var(--smoke); font-size: 12px; letter-spacing: .06em; text-align: center; }
.jlo-stream { display: grid; gap: 10px; justify-items: center; padding-top: 14px; background: var(--orn-rule) center top / 90px 12px no-repeat; }
.jlo-stream__label { font: 600 9.5px var(--f-caps); letter-spacing: .28em; text-transform: uppercase; color: var(--smoke); }
.jlo-stream__links { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; }
.jlo-stream__links a {
  display: inline-block; padding: 9px 12px; border: 1px solid var(--gold-line); text-decoration: none;
  font: 600 9px/1 var(--f-caps); letter-spacing: .22em; text-transform: uppercase; color: var(--gold);
  transition: background var(--t) var(--ease), color var(--t) var(--ease), border-color var(--t) var(--ease);
}
.jlo-stream__links a:hover { background: var(--gold); border-color: var(--gold); color: var(--void); }

/* Albums, videos, lyrics */
.jlo-disco, .jlo-vidgrid { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 34px 26px; }
.jlo-disco__item h2, .jlo-vidgrid__item h2, .jlo-vidgrid__item h3 { margin: 14px 0 6px; font-size: 22px; }
.jlo-disco__item a, .jlo-vidgrid__item a { text-decoration: none; color: inherit; }
.jlo-disco__item h2 a:hover, .jlo-vidgrid__item h2 a:hover, .jlo-vidgrid__item h3 a:hover { color: var(--gold); }
.jlo-disco__cover .ph { aspect-ratio: 1; }
.jlo-disco__meta { margin: 0; display: flex; flex-wrap: wrap; gap: 6px 14px; color: var(--smoke); font: 600 9.5px var(--f-caps); letter-spacing: .22em; text-transform: uppercase; }
.jlo-vidgrid__frame { position: relative; display: block; aspect-ratio: 16 / 9; }
.jlo-vidgrid__frame .jlo-video__play { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); }
.jlo-vidgrid__frame:hover .jlo-video__play { background: rgba(139, 94, 26, .85); transform: translate(-50%, -50%) scale(1.04); }
.jlo-vidgrid__item[hidden] { display: none; }

.jlo-filter { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 16px; margin: 0 0 30px; padding-bottom: 18px; border-bottom: 1px solid var(--line); }
.jlo-filter ul { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.jlo-filter button {
  background: none; padding: 9px 12px; border: 1px solid var(--gold-line); cursor: pointer;
  font: 600 9px/1 var(--f-caps); letter-spacing: .22em; text-transform: uppercase; color: var(--smoke);
  transition: color var(--t) var(--ease), border-color var(--t) var(--ease), background var(--t) var(--ease);
}
.jlo-filter button:hover { color: var(--bone); }
.jlo-filter button.is-active { background: var(--gold); border-color: var(--gold); color: var(--void); }

.jlo-album__grid { display: grid; grid-template-columns: minmax(0, 320px) minmax(0, 1fr); gap: 40px; align-items: start; }
@media (max-width: 820px) { .jlo-album__grid { grid-template-columns: minmax(0, 1fr); gap: 30px; } }
.jlo-album__aside { display: grid; gap: 22px; position: sticky; top: 92px; }
@media (max-width: 820px) { .jlo-album__aside { position: static; } }
.jlo-album__cover { margin: 0; }
.jlo-album__cover .ph { aspect-ratio: 1; }
.jlo-album__stores { display: grid; gap: 10px; justify-items: center; text-align: center; }
.jlo-album__main { display: grid; gap: 34px; }
.jlo-album__section > .entry-content { margin: 0; }
.jlo-tracks { list-style: none; counter-reset: jlo-track; margin: 0; padding: 0; display: grid; }
.jlo-tracks li {
  counter-increment: jlo-track; display: grid; grid-template-columns: 34px minmax(0, 1fr) auto;
  align-items: center; gap: 12px 14px; padding: 13px 0; border-top: 1px solid var(--line);
}
.jlo-tracks li::before { content: counter(jlo-track, upper-roman); font: 400 13px var(--f-caps); letter-spacing: .1em; color: var(--gold); }
.jlo-tracks__name { font: 500 18px/1.25 var(--f-display); }
.jlo-tracks__audio { grid-column: 2 / -1; width: 100%; max-width: 420px; height: 34px; }
.jlo-album__quote { margin: 0; text-align: center; }
.jlo-album__quote blockquote { margin: 0; font: italic 400 22px/1.5 var(--f-display); color: var(--bone); }
.jlo-album__quote blockquote p { margin: 0 0 10px; }
.jlo-album__quote figcaption { margin-top: 12px; font: 600 9.5px var(--f-caps); letter-spacing: .28em; text-transform: uppercase; color: var(--gold); }

.jlo-lyric-index { display: grid; gap: 34px; }
.jlo-lyric-group { display: grid; grid-template-columns: 56px minmax(0, 1fr); gap: 0 20px; align-items: start; }
.jlo-lyric-letter { margin: 0; font: italic 400 46px/1 var(--f-display); color: var(--gold); }
.jlo-lyric-group ul { list-style: none; margin: 0; padding: 0; display: grid; }
.jlo-lyric-group li { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 6px 16px; padding: 12px 0; border-top: 1px solid var(--line); }
.jlo-lyric-group li a { text-decoration: none; color: var(--bone); font: 500 19px/1.2 var(--f-display); }
.jlo-lyric-group li a:hover { color: var(--gold); }
.jlo-lyric-group li span { color: var(--smoke); font: 600 9px var(--f-caps); letter-spacing: .22em; text-transform: uppercase; }
.jlo-lyricpage__cover { margin: 0 auto 30px; max-width: 320px; }
.jlo-lyrics { margin: 0; padding: 0; list-style: none; text-align: center; }
.jlo-lyrics > li > span { font: italic 400 19px/1.9 var(--f-display); color: var(--bone-2); }
.jlo-lyrics__item {
  display: flex; flex-direction: column; align-items: flex-start; text-align: left;
  padding: 20px 0; border-top: 1px solid var(--line);
}
.jlo-lyrics__item:first-child { border-top: none; padding-top: 0; }
.jlo-lyrics__img {
  display: block; width: 100%; height: auto;
  border: 1px solid var(--gold-line); margin-bottom: 12px;
}
.jlo-lyrics__body { min-width: 0; width: 100%; }
.jlo-lyrics__title { display: block; font: 500 16px/1.3 var(--f-display); color: var(--bone); }
.jlo-lyrics__text { margin: 6px 0 0; font: 400 13px/1.5 var(--f-body); color: var(--smoke); }
.jlo-lyrics__link {
  display: inline-flex; align-items: center; gap: 6px; margin-top: 12px;
  font: 600 9.5px var(--f-caps); letter-spacing: .2em; text-transform: uppercase;
  color: var(--gold); text-decoration: none;
}
.jlo-lyrics__link:hover { color: var(--bone); }
.jlo-lyrics__link .jlo-lyrics__icon { width: 13px; height: 13px; }

/* Welcome message */
.jlo-reel { display: grid; gap: 10px; }
.jlo-reel__list { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(64px, 1fr)); gap: 8px; }
.jlo-reel__thumb {
  position: relative; display: block; width: 100%; aspect-ratio: 16 / 9; padding: 0; overflow: hidden; cursor: pointer;
  background: var(--velvet); border: 1px solid var(--gold-line); opacity: .55;
  transition: opacity var(--t) var(--ease), border-color var(--t) var(--ease);
}
.jlo-reel__thumb img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; filter: saturate(.8); }
.jlo-reel__thumb:hover, .jlo-reel__thumb:focus-visible { opacity: .85; }
.jlo-reel__thumb.is-active { opacity: 1; border-color: var(--gold); }
.jlo-welcome__img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; border-radius: 999px 999px 0 0; border: 1px solid var(--gold-line); filter: saturate(.85) contrast(1.05); }
.jlo-welcome__msg p { margin: 0 0 12px; color: var(--bone-2); font-size: 15px; line-height: 1.7; }
.jlo-welcome__msg p:last-child { margin-bottom: 0; }
.jlo-welcome__msg p:first-child::first-letter { float: left; margin: 6px 10px 0 0; font: italic 400 54px/.8 var(--f-display); color: var(--gold); }
.jlo-welcome__sig { margin: 0; padding-top: 14px; text-align: right; font: italic 400 17px/1.3 var(--f-display); color: var(--gold); background: var(--orn-rule) left top / 90px 12px no-repeat; }

/* Tour dates */
.jlo-tour__name { margin: 0; text-align: center; font: italic 400 16px/1.2 var(--f-display); color: var(--bone-2); }
.jlo-tour { list-style: none; margin: 0; padding: 0; display: grid; }
.jlo-tour li {
  display: grid; grid-template-columns: 48px minmax(0, 1fr) auto; gap: 14px; align-items: center;
  padding: 13px 0; border-top: 1px solid var(--line);
}
.jlo-tour time { display: grid; text-align: center; line-height: 1; gap: 4px; }
.jlo-tour time b { font: 600 9px var(--f-caps); letter-spacing: .24em; color: var(--gold); }
.jlo-tour time span { font: 400 28px/1 var(--f-display); font-variant-numeric: lining-nums tabular-nums; }
.jlo-tour__place { min-width: 0; }
.jlo-tour__place strong { display: block; font: 500 17px/1.2 var(--f-display); }
.jlo-tour__place span { display: block; color: var(--smoke); font-size: 13px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.jlo-tix {
  font: 600 9px/1 var(--f-caps); letter-spacing: .22em; text-transform: uppercase; text-decoration: none;
  padding: 9px 10px; border: 1px solid var(--gold-soft); color: var(--gold); white-space: nowrap;
  transition: background var(--t) var(--ease), color var(--t) var(--ease);
}
a.jlo-tix:hover { background: var(--gold); color: var(--void); }
.jlo-tix--low { border-color: rgba(214, 49, 79, .7); color: var(--garnet); }
a.jlo-tix--low:hover { background: var(--garnet); color: var(--bone); }
.jlo-tix--out { border-color: var(--line); color: var(--smoke); text-decoration: line-through; }

/* Social post */
.jlo-social__card { display: grid; gap: 14px; }
.jlo-social__who { display: flex; align-items: center; gap: 12px; }
.jlo-social__avatar {
  width: 40px; height: 40px; border-radius: 50%; flex: none; display: grid; place-items: center;
  background: radial-gradient(circle at 35% 30%, var(--gold), var(--velvet) 70%);
  font: italic 500 15px var(--f-display); color: var(--bone);
  box-shadow: 0 0 0 1px var(--void-2), 0 0 0 2px var(--gold-soft);
}
.jlo-social__who strong { display: block; font: 500 15px/1.2 var(--f-display); }
.jlo-social__who span { color: var(--smoke); font-size: 12px; }
.jlo-social__net { margin-left: auto; color: var(--gold); }
.jlo-social__text { margin: 0; font-size: 15px; line-height: 1.6; }
.jlo-social__text a { color: var(--gold); text-decoration: none; }
.jlo-social__card .ph { aspect-ratio: 4 / 3; }
.jlo-social__acts { display: flex; gap: 20px; color: var(--smoke); font-size: 13px; }
.jlo-social__acts button { display: inline-flex; align-items: center; gap: 7px; background: none; border: 0; padding: 0; cursor: pointer; color: inherit; font: inherit; transition: color var(--t) var(--ease); }
.jlo-social__acts button:hover { color: var(--bone); }
.jlo-social__acts svg { width: 17px; height: 17px; transition: fill var(--t) var(--ease); }
.jlo-social__acts .is-liked { color: var(--garnet); }
.jlo-social__acts .is-liked svg { fill: currentColor; }
.jlo-social__embed { overflow: hidden; }
.jlo-social__embed iframe, .jlo-social__embed blockquote { max-width: 100% !important; }

/* Poll */
.jlo-poll { display: grid; gap: 14px; margin: 0; }
.jlo-poll__q { margin: 0; text-align: center; font: italic 400 20px/1.25 var(--f-display); text-wrap: balance; }
.jlo-poll__opts { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.jlo-poll__opt {
  position: relative; overflow: hidden; width: 100%; display: flex; align-items: center; gap: 10px;
  padding: 12px 14px; cursor: pointer; text-align: left;
  background: transparent; border: 1px solid var(--line);
  transition: border-color var(--t) var(--ease), background var(--t) var(--ease);
}
.jlo-poll__opt:hover { border-color: var(--gold-soft); background: rgba(198, 161, 91, .05); }
.jlo-poll__bar {
  position: absolute; inset: 0; z-index: 0; transform-origin: left; transform: scaleX(0);
  background: linear-gradient(90deg, rgba(184, 134, 47, .55), rgba(139, 94, 26, .85));
  transition: transform var(--t-slow) var(--ease);
}
.jlo-poll__label, .jlo-poll__pct { position: relative; z-index: 1; }
.jlo-poll__label { flex: 1; font: 500 16px/1.2 var(--f-display); }
.jlo-poll__pct { font: italic 400 16px var(--f-display); color: var(--gold); font-variant-numeric: tabular-nums; opacity: 0; transition: opacity var(--t) var(--ease) 200ms; }
.jlo-poll.is-voted .jlo-poll__opt { cursor: default; background: transparent; border-color: var(--line); }
.jlo-poll.is-voted .jlo-poll__bar { transform: scaleX(var(--pct, 0)); }
.jlo-poll.is-voted .jlo-poll__pct { opacity: 1; }
.jlo-poll__opt.is-choice { border-color: var(--gold-soft) !important; }
.jlo-poll__opt.is-choice .jlo-poll__label::after { content: " \2767"; color: var(--gold); font-size: 13px; }
.jlo-poll__total { margin: 0; text-align: center; color: var(--smoke); font-size: 12px; letter-spacing: .06em; }

/* ---------- Single / page ---------- */
.jlo-article { display: grid; gap: 36px; min-width: 0; }
.jlo-article__head { display: grid; gap: 18px; justify-items: center; text-align: center; }
.jlo-article__head .jlo-headline { font-size: clamp(40px, 5.4vw, 76px); max-width: 18ch; }
.jlo-article .jlo-hero { min-height: clamp(300px, 42vw, 520px); }
.entry-content { font-size: 19px; line-height: 1.78; max-width: 68ch; margin: 0 auto; width: 100%; }
.entry-content > * + * { margin-top: 1.15em; }
.entry-content > p:first-child::first-letter {
  float: left; font: italic 400 5.2em/.82 var(--f-display); color: var(--gold); margin: .06em .1em 0 0;
}
.entry-content h2, .entry-content h3 { font-family: var(--f-display); font-weight: 500; line-height: 1.1; letter-spacing: -.01em; }
.entry-content h2 { font-size: 34px; } .entry-content h3 { font-size: 26px; }
.entry-content blockquote {
  margin: 1.8em 0; padding: 0; text-align: center;
  font: italic 400 30px/1.25 var(--f-display); color: var(--bone);
}
.entry-content blockquote::before, .entry-content blockquote::after { content: ""; display: block; height: 16px; margin: 0 auto 18px; width: 120px; background: var(--orn-rule) center / contain no-repeat; }
.entry-content blockquote::after { margin: 18px auto 0; }
.entry-content figure { margin: 1.8em 0; }
.entry-content figcaption, .wp-caption-text, .wp-element-caption { color: var(--smoke); font-size: 13px; font-style: italic; margin-top: 10px; text-align: center; }
.entry-content iframe { max-width: 100%; }
.alignleft { float: left; margin: .4em 1.4em 1em 0; }
.alignright { float: right; margin: .4em 0 1em 1.4em; }
.aligncenter { display: block; margin-left: auto; margin-right: auto; }
.alignwide, .alignfull { max-width: 100%; }
.wp-caption { max-width: 100%; }
.jlo-tags { display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; }
.jlo-tags a { padding: 8px 14px; border: 1px solid var(--gold-line); font: 600 9.5px var(--f-caps); text-transform: uppercase; letter-spacing: .22em; text-decoration: none; transition: border-color var(--t) var(--ease), color var(--t) var(--ease); }
.jlo-tags a:hover { border-color: var(--gold); }
.post-navigation .nav-links { justify-content: space-between; align-items: flex-start; border-top: 1px solid var(--gold-line); padding-top: 22px; }
.post-navigation a { display: grid; gap: 6px; max-width: 32ch; text-decoration: none; font: 500 18px/1.3 var(--f-display); }
.post-navigation .meta-nav { font: 600 9.5px var(--f-caps); color: var(--gold); text-transform: uppercase; letter-spacing: .24em; }
.jlo-archive-head { display: grid; gap: 14px; justify-items: center; text-align: center; padding-bottom: 12px; }
.jlo-archive-head .jlo-headline { font-size: clamp(42px, 6vw, 80px); }
.jlo-archive-head p { margin: 0; color: var(--smoke); max-width: 60ch; }

/* comments */
.comments-area { display: grid; gap: 22px; max-width: 68ch; margin: 0 auto; width: 100%; }
.comment-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 18px; }
.comment-list .children { list-style: none; padding-left: 24px; border-left: 1px solid var(--gold-line); }
.comment-body { padding: 18px 0; border-bottom: 1px solid var(--line); }
.comment-author img { border-radius: 50%; vertical-align: middle; margin-right: 10px; }
.comment-metadata { font-size: 12px; color: var(--smoke); }
.comment-form input:not([type="submit"]):not([type="checkbox"]), .comment-form textarea {
  width: 100%; background: transparent; color: var(--bone); border: 1px solid var(--gold-line); padding: 12px 14px; font: inherit;
  transition: border-color var(--t) var(--ease);
}
.comment-form input:focus, .comment-form textarea:focus { outline: none; border-color: var(--gold); }
.comment-form .submit { padding: 13px 24px; border: 1px solid var(--gold-soft); background: transparent; color: var(--gold); font: 600 11px var(--f-caps); letter-spacing: .24em; text-transform: uppercase; cursor: pointer; transition: background var(--t) var(--ease), color var(--t) var(--ease); }
.comment-form .submit:hover { background: var(--velvet); color: var(--bone); }

/* ---------- White cards: news items + single article (with its comments) ----------
   Same frame as the sidebar widgets: thin gold line, star corner top-left,
   gem corner bottom-right. Change --card-bg to tint the cards. */
:root { --card-bg: #FFFFFF; }

.jlo-news { gap: 32px; }
.jlo-news-item,
.jlo-news-item:first-child,
.jlo-news-item + .jlo-news-item,
.jlo-article {
  position: relative;
  background: var(--card-bg);
  border: 1px solid var(--gold-line);
  transition: border-color var(--t) var(--ease);
}
.jlo-news-item,
.jlo-news-item:first-child { padding: 40px; }
.jlo-article { padding: 48px clamp(20px, 4vw, 56px); }
.jlo-news-item:hover,
.jlo-article:hover { border-color: var(--gold-soft); }

.jlo-article::before, .jlo-article::after {
  content: ""; position: absolute; z-index: 2; width: 34px; height: 34px; pointer-events: none; opacity: .9;
}
.jlo-article::before { top: 5px; left: 5px; background: var(--orn-corner-stars) center / contain no-repeat; }
.jlo-article::after { bottom: 5px; right: 5px; background: var(--orn-corner-gem) center / contain no-repeat; }

/* News cards: a different ornament in each corner.
   One layer holds all four images, so each corner can be swapped on its own:
   point a variable at another SVG in assets/ornaments/. */
:root {
  --news-corner-tl: url("assets/ornaments/news-corner-tl.svg");   /* star */
  --news-corner-tr: url("assets/ornaments/news-corner-tr.svg");   /* crescent moon */
  --news-corner-bl: url("assets/ornaments/news-corner-bl.svg");   /* heart */
  --news-corner-br: url("assets/ornaments/news-corner-br.svg");   /* diamond */
  --news-corner-size: 56px;
}
.jlo-news-item::before {
  content: ""; position: absolute; inset: 5px; z-index: 2; pointer-events: none;
  background:
    var(--news-corner-tl) top left     / var(--news-corner-size) no-repeat,
    var(--news-corner-tr) top right    / var(--news-corner-size) no-repeat,
    var(--news-corner-bl) bottom left  / var(--news-corner-size) no-repeat,
    var(--news-corner-br) bottom right / var(--news-corner-size) no-repeat;
}
.jlo-news-item::after { content: none; }

/* comments sit inside the article card: an ornamental rule separates them */
.jlo-article .comments-area { padding-top: 36px; background: var(--orn-rule) center top / 120px 16px no-repeat; }

@media (max-width: 760px) {
  .jlo-news-item,
  .jlo-news-item:first-child { padding: 28px 20px; }
  .jlo-article { padding: 32px 20px; }
  :root { --news-corner-size: 44px; }
}

/* ---------- Footer ---------- */
.jlo-footer {
  --mono-h: clamp(170px, 22vw, 280px);
  position: relative; z-index: 1; overflow: hidden; isolation: isolate; border-top: 1px solid var(--gold-line);
  background: #FFFFFF;   /* solid white: covers the warm page vignette behind the footer */

}
.jlo-footer__monogram {
  height: var(--mono-h);
  background:
    linear-gradient(180deg, #FFFFFF 0%, rgba(255, 255, 255, .75) 35%, rgba(255, 255, 255, 0) 80%),
    var(--orn-monogram) center bottom / auto 100px repeat #FFFFFF;
}
.jlo-footer .jlo-smoke { opacity: .75; }
.jlo-footer__inner {
  position: relative; max-width: 1340px; margin: 0 auto; padding: 72px var(--gutter) 56px;
  display: grid; grid-template-columns: 1.2fr 1fr 1fr; gap: 40px;
}
@media (max-width: 820px) { .jlo-footer__inner { grid-template-columns: minmax(0, 1fr); } }
.jlo-footer h2 { margin: 0 0 16px; font: 600 10.5px var(--f-caps); letter-spacing: .28em; text-transform: uppercase; color: var(--gold); }
.jlo-footer ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.jlo-footer a { text-decoration: none; color: var(--bone-2); }
.jlo-footer a:hover { color: var(--gold); }
.jlo-footer ul a { font: 400 18px var(--f-display); }
.jlo-footer p { margin: 0 0 14px; color: var(--smoke); font-size: 15px; }
.jlo-disclaimer p { font-size: 14px; line-height: 1.65; max-width: 42ch; }
.jlo-signup { display: flex; gap: 10px; flex-wrap: wrap; }
.jlo-signup input { flex: 1 1 180px; min-width: 0; background: transparent; color: var(--bone); border: 0; border-bottom: 1px solid var(--gold-line); padding: 12px 2px; font: italic 400 18px var(--f-display); transition: border-color var(--t) var(--ease); }
.jlo-signup input:focus { outline: none; border-color: var(--gold); }
.jlo-footer__legal {
  position: relative; max-width: 1340px; margin: 0 auto; padding: 20px var(--gutter) 30px; border-top: 1px solid var(--line);
  display: flex; flex-wrap: wrap; justify-content: space-between; gap: 10px;
  color: var(--smoke); font-size: 12px; letter-spacing: .04em;
}

/* Dark footer band: wordmark + tagline, Archive, Website Disclaimer and the © line.
   Full width via box-shadow + clip-path (the content itself stays 1340px wide).
   Change --footer-dark to #111111 for black. */
:root { --footer-dark: #2B1A10; }
.jlo-footer__inner,
.jlo-footer__legal {
  background: var(--footer-dark);
  box-shadow: 0 0 0 100vmax var(--footer-dark);
  clip-path: inset(0 -100vmax);
}
.jlo-footer__legal {
  --footer-dark: #000000;   /* the © line sits on black; change to any color */
  border-top-color: rgba(233, 216, 180, .14);
}
.jlo-footer h2 { color: #E2B45C; }
.jlo-footer a { color: #E9D8B4; }
.jlo-footer a:hover { color: #F6E3B4; }
.jlo-footer p, .jlo-footer__legal { color: #CBB89A; }
/* wordmark foil, re-lit for the dark band */
.jlo-footer .jlo-logo__main {
  background: linear-gradient(100deg, #E9D8B4 0%, #FFF6DC 22%, #E2B45C 40%, #E9D8B4 60%, #E9D8B4 100%);
  background-size: 250% 100%;
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.jlo-footer .jlo-logo__tld { color: #E2B45C; }

/* Chain line at the very top of the footer, above the dark band
   (same drawing as the chain at the bottom of the footer).
   For medallions hanging down instead, use var(--orn-chain-center). */
.jlo-footer { border-top: 0; }
.jlo-footer::before {
  content: ""; display: block; position: relative; z-index: 2;
  height: clamp(26px, 3vw, 39px);
  background: #FFFFFF var(--orn-chain-middle) center / auto 100% repeat-x;
}

/* toast */
.jlo-toast {
  position: fixed; left: 50%; bottom: calc(26px + env(safe-area-inset-bottom, 0px)); z-index: 300;
  transform: translate(-50%, 12px); opacity: 0; pointer-events: none;
  max-width: calc(100% - 32px); padding: 14px 22px;
  background: var(--void-2); color: var(--bone); border: 1px solid var(--gold-soft);
  font: italic 400 16px var(--f-display);
  box-shadow: 0 18px 40px rgba(70, 41, 13, .18);
  transition: opacity var(--t) var(--ease), transform var(--t) var(--ease);
}
.jlo-toast.is-on { opacity: 1; transform: translate(-50%, 0); }

/* ---------- Keyframes (slow, hypnotic) ---------- */
@keyframes jlo-ticker { to { transform: translateX(-50%); } }
@keyframes jlo-foil { 0%, 100% { background-position: 100% 0; } 50% { background-position: 0 0; } }
@keyframes jlo-candle { 0%, 100% { opacity: .55; box-shadow: 0 0 8px 1px rgba(214,49,79,.6); } 50% { opacity: 1; box-shadow: 0 0 14px 3px rgba(214,49,79,.9); } }
@keyframes jlo-breathe { 0%, 100% { opacity: .30; transform: translateX(-50%) scale(1); } 50% { opacity: .5; transform: translateX(-50%) scale(1.025); } }
@keyframes jlo-rotate { to { transform: rotate(360deg); } }
@keyframes jlo-halo { 0%, 100% { transform: scale(1); opacity: .9; } 50% { transform: scale(1.16); opacity: .25; } }
@keyframes jlo-in { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }

/* Ambient motion (smoke, header video, ticker, foil, emblem) plays for everyone;
   the "Pause motion" button on the header video stops all of it and is remembered per browser.
   Visitors who ask their device for less motion still get instant UI changes
   and no entrance fades. */
.jlo-still *, .jlo-still *::before, .jlo-still *::after { animation-play-state: paused !important; }
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition-duration: .001ms !important; }
  .jlo-hero__body > * { animation: none; }
}

/* Image alignment inside posts (center / left / right). */
.entry-content figure.aligncenter,
.entry-content .aligncenter { margin-left: auto; margin-right: auto; }
.entry-content .wp-block-image.aligncenter { text-align: center; }
.entry-content figure.alignleft { margin: .4em 1.4em 1em 0; }
.entry-content figure.alignright { margin: .4em 0 1em 1.4em; }



/* ------------------------------------------------------------------
 * Block layouts inside posts: rows, columns, galleries.
 * Safety net so they always line up like in the editor. Wrapped in
 * :where() so any setting you pick in the editor (gap, wrap, widths)
 * still wins over these defaults.
 * ------------------------------------------------------------------ */
:where(.entry-content) :where(.is-layout-flex) { display: flex; flex-wrap: wrap; align-items: center; gap: var(--wp--style--block-gap, 1em); }
:where(.entry-content) :where(.is-layout-flex.is-nowrap) { flex-wrap: nowrap; }
:where(.entry-content) :where(.is-layout-flex.is-vertical) { flex-direction: column; align-items: flex-start; }
:where(.entry-content) :where(.is-layout-flex.is-content-justification-left) { justify-content: flex-start; }
:where(.entry-content) :where(.is-layout-flex.is-content-justification-center) { justify-content: center; }
:where(.entry-content) :where(.is-layout-flex.is-content-justification-right) { justify-content: flex-end; }
:where(.entry-content) :where(.is-layout-flex.is-content-justification-space-between) { justify-content: space-between; }
:where(.entry-content) :where(.is-layout-grid) { display: grid; gap: var(--wp--style--block-gap, 1em); }

:where(.entry-content) :where(.wp-block-columns) { display: flex; flex-wrap: nowrap; align-items: normal; gap: 2em; }
:where(.entry-content) :where(.wp-block-column) { flex: 1 1 0; min-width: 0; }
:where(.entry-content) :where(.wp-block-column[style*="flex-basis"]) { flex-grow: 0; }
@media (max-width: 781px) {
  :where(.entry-content) :where(.wp-block-columns:not(.is-not-stacked-on-mobile)) { flex-wrap: wrap; }
  :where(.entry-content) :where(.wp-block-columns:not(.is-not-stacked-on-mobile) > .wp-block-column) { flex-basis: 100%; }
}

:where(.entry-content) :where(.wp-block-gallery.has-nested-images) { display: flex; flex-wrap: wrap; align-items: normal; gap: var(--wp--style--unstable-gallery-gap, 16px); }
:where(.entry-content) :where(.wp-block-gallery.has-nested-images figure.wp-block-image) { flex-grow: 1; width: calc(50% - var(--wp--style--unstable-gallery-gap, 16px) / 2); }
@media (min-width: 600px) {
  :where(.entry-content) :where(.wp-block-gallery.has-nested-images.columns-default figure.wp-block-image),
  :where(.entry-content) :where(.wp-block-gallery.has-nested-images.columns-3 figure.wp-block-image) { width: calc(33.333% - var(--wp--style--unstable-gallery-gap, 16px) * .66667); }
  :where(.entry-content) :where(.wp-block-gallery.has-nested-images.columns-4 figure.wp-block-image) { width: calc(25% - var(--wp--style--unstable-gallery-gap, 16px) * .75); }
  :where(.entry-content) :where(.wp-block-gallery.has-nested-images.columns-5 figure.wp-block-image) { width: calc(20% - var(--wp--style--unstable-gallery-gap, 16px) * .8); }
  :where(.entry-content) :where(.wp-block-gallery.has-nested-images.columns-1 figure.wp-block-image) { width: 100%; }
}

/* The post's normal image spacing shouldn't push items inside a row/column/gallery apart. */
.entry-content .is-layout-flex > figure,
.entry-content .wp-block-gallery figure.wp-block-image,
.entry-content .wp-block-column > figure:first-child { margin-top: 0; margin-bottom: 0; }