/* odyssey.css — PREMIUM LAYOUT V2 (reconstruit pour ton HTML odyssey.php)
   - Scope strict sous #xsOdyssey
   - Fix grille (les .ody-col--main ne “s’emmêlent” plus)
   - Visuel premium : media cadrés, interludes maîtrisés, rythme typographique propre
   - Hero conservé “film poster”
*/

/* =========================
   FONTS (self-host)
========================= */
@font-face{
  font-family:"Satoshi";
  src:url("/fonts/Satoshi-Regular.woff2") format("woff2");
  font-weight:400;
  font-style:normal;
  font-display:swap;
}
@font-face{
  font-family:"Satoshi";
  src:url("/fonts/Satoshi-Medium.woff2") format("woff2");
  font-weight:500;
  font-style:normal;
  font-display:swap;
}
@font-face{
  font-family:"Satoshi";
  src:url("/fonts/Satoshi-Bold.woff2") format("woff2");
  font-weight:700;
  font-style:normal;
  font-display:swap;
}
@font-face{
  font-family:"Satoshi";
  src:url("/fonts/Satoshi-Black.woff2") format("woff2");
  font-weight:900;
  font-style:normal;
  font-display:swap;
}
@font-face{
  font-family:"Satoshi";
  src:url("/fonts/Satoshi-Italic.woff2") format("woff2");
  font-weight:400;
  font-style:italic;
  font-display:swap;
}
@font-face{
  font-family:"Satoshi";
  src:url("/fonts/Satoshi-Light.woff2") format("woff2");
  font-weight:300;
  font-style:normal;
  font-display:swap;
}

/* =========================
   ROOT / TOKENS
========================= */
#xsOdyssey{
  --ody-white: var(--xs-white, #f6f8f7);
  --ody-deep:  var(--xs-deep,  #1f2a32);
  --ody-ink:   var(--xs-ink,   #0b1218);

  --ody-accent: var(--xs-accent, #ff5a3c);
  --ody-accentStrong: var(--xs-accent-strong, #ff4726);
  --ody-focus:  var(--xs-focus, rgba(255,90,60,.55));

  --ody-ice:  #eef3f6;
  --ody-ice2: #f3f7fa;
  --ody-ice3: #fbfcfe;

  --ody-muted: rgba(31,42,50,.64);
  --ody-text:  rgba(31,42,50,.86);

  --ody-r: 16px;
  --ody-r-lg: 24px;
  --ody-r-xl: 34px;

  --ody-shadowSoft: 0 22px 60px rgba(6,12,18,.10);
  --ody-shadowCard: 0 14px 34px rgba(6,12,18,.08);
  --ody-shadowHero: 0 46px 140px rgba(0,0,0,.38);

  --ody-h1: clamp(40px, 5.2vw, 78px);
  --ody-h2: clamp(26px, 2.9vw, 40px);
  --ody-h3: clamp(18px, 1.7vw, 22px);

  --ody-body: 16.7px;
  --ody-lead: clamp(16.8px, 1.18vw, 18.4px);

  --ody-gap: 22px;
  --ody-gap-lg: 30px;

  --ody-maxText: 72ch;

  /* Paper */
  --ody-paper: #ffffff;
  --ody-paper2:#fbfcfe;
  --ody-paperBorder: rgba(20,40,60,.09);
  --ody-paperShadow: 0 18px 54px rgba(10,20,30,.06);

  /* Captions */
  --ody-capBg: linear-gradient(180deg, rgba(255,255,255,.92), rgba(255,255,255,.98));
  --ody-capText: rgba(10,18,28,.78);

  /* Fonts */
  --ody-font-heading: "Satoshi", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --ody-font-body: "Satoshi", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;

  /* Sections */
  --ody-secPad: clamp(84px, 8vw, 150px);
  --ody-secPadTight: clamp(64px, 7vw, 120px);

  /* Rails */
  --ody-wrap: min(1180px, calc(100% - 40px));
  --ody-asideMin: 360px;
  --ody-asideMax: 420px;

  /* Dark chapters */
  --ody-night: #070b10;
  --ody-night2: #0b1118;
  --ody-nightText: rgba(255,255,255,.86);
  --ody-nightMuted: rgba(255,255,255,.64);
  --ody-nightBorder: rgba(255,255,255,.14);

  isolation:isolate;

  background:
    radial-gradient(1200px 620px at 10% -8%, rgba(255,90,60,.07), transparent 60%),
    radial-gradient(1100px 640px at 92% 8%, rgba(170,220,255,.10), transparent 62%),
    linear-gradient(180deg, #ffffff, var(--ody-ice2));

  font-family: var(--ody-font-body);
  font-optical-sizing: auto;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: geometricPrecision;
  font-kerning: normal;
  font-feature-settings: "kern" 1, "liga" 1, "calt" 1;
}

#xsOdyssey *{ box-sizing:border-box; }
#xsOdyssey img, #xsOdyssey video{ display:block; max-width:100%; height:auto; }
#xsOdyssey strong{ font-weight: 900; }
#xsOdyssey em{ font-style: italic; }

#xsOdyssey a{ color: inherit; }
#xsOdyssey a:focus-visible{
  outline:2px solid var(--ody-focus);
  outline-offset:3px;
  border-radius:12px;
}

#xsOdyssey ::selection{ background: rgba(255,90,60,.22); }
#xsOdyssey [id]{ scroll-margin-top: calc(var(--xs-header-h, 0px) + 22px); }

#xsOdyssey .xs-container{
  width: var(--ody-wrap);
  max-width: none;
}

/* =========================
   PROGRESS BAR
========================= */
.ody-progress{
  position: sticky;
  top: var(--xs-header-h, 0px);
  z-index: 60;
  height: 3px;
  background: rgba(15,25,35,.10);
  /* backdrop-filter retiré : crée une couche GPU qui intercepte les taps iOS sur le header fixed */
  pointer-events: none;
}
.ody-progress span{
  display:block;
  height:100%;
  width: var(--ody-progress, 0%);
  background: linear-gradient(90deg, rgba(255,90,60,.95), rgba(170,220,255,.85));
  box-shadow: 0 10px 30px rgba(255,90,60,.18);
}

/* =========================
   SECTIONS
========================= */
#xsOdyssey .ody-sec{
  padding: var(--ody-secPad) 0;
  position:relative;
}
@media (max-width:900px){
  #xsOdyssey .ody-sec{ padding: var(--ody-secPadTight) 0; }
}

/* hairline + micro-grain */
#xsOdyssey .ody-sec::before{
  content:"";
  position:absolute;
  left: 50%;
  transform: translateX(-50%);
  top: 16px;
  width: min(1160px, calc(100% - 32px));
  height: 1px;
  background: linear-gradient(90deg,
    rgba(255,90,60,0),
    rgba(255,90,60,.18),
    rgba(170,220,255,.14),
    rgba(255,90,60,.10),
    rgba(255,90,60,0)
  );
  opacity:.55;
  pointer-events:none;
}
#xsOdyssey .ody-sec::after{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  opacity:.05;
  background:
    radial-gradient(1px 1px at 15% 20%, rgba(0,0,0,.22) 0 1px, transparent 2px),
    radial-gradient(1px 1px at 55% 70%, rgba(0,0,0,.18) 0 1px, transparent 2px),
    radial-gradient(1px 1px at 85% 35%, rgba(0,0,0,.16) 0 1px, transparent 2px);
  mix-blend-mode:multiply;
}

/* alternates */
#xsOdyssey .ody-alt{
  background:
    radial-gradient(900px 380px at 20% 0%, rgba(255,90,60,.08), transparent 65%),
    radial-gradient(980px 420px at 86% 16%, rgba(170,220,255,.12), transparent 68%),
    linear-gradient(180deg, #ffffff, var(--ody-ice));
}

/* =========================
   HERO
========================= */
#xsOdyssey .ody-hero{
  position:relative;
  min-height: min(84vh, 900px);
  display:flex;
  align-items:center;
  justify-content:center;
  overflow:hidden;
  background: var(--ody-ink);
  color:#fff;
}

/* hero media */
#xsOdyssey .ody-heroMedia{ position:absolute; inset:0; z-index:0; }
#xsOdyssey .ody-heroMedia img{
  width:100%;
  height:100%;
  object-fit:cover;
  filter: brightness(.99) contrast(1.06) saturate(1.05);
  transform: translate3d(0, var(--ody-hero-y, 0px), 0) scale(1.05);
  will-change: transform;
}

/* overlay */
#xsOdyssey .ody-heroOverlay{
  position:absolute;
  inset:0;
  z-index:1;
  background:
    radial-gradient(760px 420px at 50% 46%, rgba(10,14,20,.18), rgba(10,14,20,0) 68%),
    radial-gradient(1200px 680px at 18% 18%, rgba(255,90,60,.14), transparent 66%),
    radial-gradient(980px 620px at 82% 18%, rgba(170,220,255,.11), transparent 70%),
    linear-gradient(180deg, rgba(0,0,0,.06), rgba(0,0,0,.40));
}

/* vignette + grain */
#xsOdyssey .ody-hero::before{
  content:"";
  position:absolute; inset:0;
  z-index:2; pointer-events:none;
  background: radial-gradient(1100px 600px at 50% 42%, rgba(0,0,0,0), rgba(0,0,0,.34));
  opacity:.92;
}
#xsOdyssey .ody-hero::after{
  content:"";
  position:absolute; inset:-25%;
  z-index:2; pointer-events:none;
  opacity:.10;
  background:
    radial-gradient(1px 1px at 18% 22%, rgba(255,255,255,.18) 0 1px, transparent 2px),
    radial-gradient(1px 1px at 62% 48%, rgba(255,255,255,.14) 0 1px, transparent 2px),
    radial-gradient(1px 1px at 84% 28%, rgba(255,255,255,.12) 0 1px, transparent 2px),
    radial-gradient(1px 1px at 36% 76%, rgba(255,255,255,.12) 0 1px, transparent 2px);
  transform: rotate(8deg);
  mix-blend-mode: overlay;
}

/* hero inner */
#xsOdyssey .ody-heroInner{
  position:relative;
  z-index:3;
  width:100%;
  padding: 128px 0 104px;
}
@media (max-width:900px){
  #xsOdyssey .ody-heroInner{ padding: 112px 0 92px; }
}

/* hero card */
#xsOdyssey .ody-heroCard{
  width: min(980px, calc(100% - 32px));
  margin: 0 auto;
  border-radius: var(--ody-r-xl);
  text-align:center;
  position:relative;
  overflow:hidden;
  padding: 30px 26px 20px;

  background: rgba(10,14,20,.46);
  border: 1px solid rgba(255,255,255,.20);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  box-shadow:
    0 52px 150px rgba(0,0,0,.36),
    0 18px 48px rgba(0,0,0,.22);
}
#xsOdyssey .ody-heroCard::before{
  content:"";
  position:absolute; inset:0;
  border-radius: inherit;
  pointer-events:none;
  background:
    linear-gradient(180deg, rgba(255,255,255,.14), rgba(255,255,255,0) 40%),
    radial-gradient(980px 520px at 12% 6%, rgba(255,90,60,.14), transparent 62%),
    radial-gradient(980px 560px at 88% 10%, rgba(190,230,255,.12), transparent 66%);
  opacity:.95;
}
#xsOdyssey .ody-heroCard::after{
  content:"";
  position:absolute; inset:-1px;
  border-radius: inherit;
  pointer-events:none;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.16),
    inset 0 -1px 0 rgba(0,0,0,.22),
    inset 0 0 0 1px rgba(255,255,255,.08);
}
#xsOdyssey .ody-heroCard > *{ position:relative; z-index:1; }

/* meta line */
#xsOdyssey .ody-metaLine{
  display:flex;
  align-items:center;
  justify-content:center;
  flex-wrap:wrap;
  gap:10px;
  margin-bottom:10px;
}
#xsOdyssey .ody-meta{
  margin:0;
  font-size:11.5px;
  letter-spacing:.28em;
  text-transform:uppercase;
  color: rgba(255,255,255,.80);
}
#xsOdyssey .ody-dot{
  width:6px; height:6px;
  border-radius:999px;
  background: rgba(255,90,60,.95);
  box-shadow: 0 0 0 3px rgba(255,90,60,.18);
}

/* title + lead */
#xsOdyssey .ody-h1{
  margin:0 0 12px;
  font-size: clamp(38px, 4.7vw, 72px);
  font-family: var(--ody-font-heading);
  font-weight: 900;
  letter-spacing: -0.028em;
  line-height:1.04;
  max-width: 21ch;
  margin-left:auto;
  margin-right:auto;
}
#xsOdyssey .ody-lead{
  margin:0 auto 10px;
  font-size: var(--ody-lead);
  line-height: 1.78;
  color: rgba(255,255,255,.92);
  max-width: 66ch;
}

/* pills */
#xsOdyssey .ody-pills{
  display:flex;
  justify-content:center;
  flex-wrap:wrap;
  gap:8px;
  margin-top: 18px;
  padding-top: 16px;
  border-top: 1px solid rgba(255,255,255,.16);
}
#xsOdyssey .ody-pill{
  display:inline-flex;
  align-items:center;
  padding: 8px 12px;
  border-radius: 999px;
  text-decoration:none;
  font-size: 12.5px;
  font-weight: 850;
  color: rgba(255,255,255,.92);
  border: 1px solid rgba(255,255,255,.18);
  background: rgba(255,255,255,.08);
  transition: transform .18s, background .18s, border-color .18s, box-shadow .18s;
}
#xsOdyssey .ody-pill.is-active{
  background: rgba(255,90,60,.18);
  border-color: rgba(255,90,60,.62);
  box-shadow: 0 18px 55px rgba(255,90,60,.12);
}
@media (hover:hover){
  #xsOdyssey .ody-pill:hover{
    transform: translateY(-1px);
    background: rgba(255,255,255,.10);
    border-color: rgba(255,255,255,.22);
  }
}
@media (max-width:560px){
  #xsOdyssey .ody-heroCard{
    padding: 24px 18px 16px;
    border-radius: calc(var(--ody-r-xl) - 6px);
  }
  #xsOdyssey .ody-h1{
    letter-spacing: -0.022em;
  }
}

/* =========================
   TITLES / TEXT
========================= */
#xsOdyssey .ody-kicker{
  margin:0 0 10px;
  font-size: 12px;
  letter-spacing: .28em;
  text-transform: uppercase;
  color: var(--ody-muted);
}
#xsOdyssey .ody-kicker.dark{ color: rgba(31,42,50,.58); }

#xsOdyssey .ody-title{
  margin:0 0 14px;
  font-size: var(--ody-h2);
  font-family: var(--ody-font-heading);
  font-weight: 900;
  letter-spacing: -0.028em;
  color: var(--ody-deep);
  line-height: 1.06;
}
#xsOdyssey .ody-subtitle{
  margin: 18px 0 12px;
  font-size: var(--ody-h3);
  font-family: var(--ody-font-heading);
  font-weight: 850;
  letter-spacing: -0.02em;
  color: var(--ody-deep);
  line-height: 1.12;
}
#xsOdyssey .ody-subtitle:first-child{ margin-top: 0; }

#xsOdyssey .ody-text{
  margin:0 0 14px;
  font-size: var(--ody-body);
  line-height: 1.90;
  color: var(--ody-text);
  max-width: min(var(--ody-maxText), 100%);
}
#xsOdyssey .ody-intro{
  font-size: 17px;
  line-height: 1.92;
  color: rgba(31,42,50,.82);
  max-width: min(82ch, 100%);
}

/* editorial rail (subtle) */
#xsOdyssey .ody-col--main{ position:relative; min-width:0; }
#xsOdyssey .ody-col--main::before{
  content:"";
  position:absolute;
  left:-18px;
  top:6px;
  bottom:6px;
  width:2px;
  border-radius:999px;
  background: linear-gradient(180deg, rgba(255,90,60,.16), rgba(170,220,255,.14), rgba(255,90,60,.08));
  opacity:.40;
}
@media (max-width:980px){
  #xsOdyssey .ody-col--main::before{ display:none; }
}
#xsOdyssey .ody-col--main > *:last-child{ margin-bottom:0; }

/* =========================
   MAGAZINE CHAPTER
========================= */
#xsOdyssey .ody-mag{
  background:
    radial-gradient(1200px 560px at 12% -4%, rgba(255,90,60,.10), transparent 62%),
    radial-gradient(1100px 520px at 90% 10%, rgba(170,220,255,.14), transparent 66%),
    linear-gradient(180deg, #ffffff, var(--ody-ice2));
}

#xsOdyssey .ody-magHead{
  max-width: 1120px;
  margin: 0 auto 18px;
  text-align:center;
}
#xsOdyssey .ody-magHead .ody-text{ margin-left:auto; margin-right:auto; }

/* Spread becomes compact mosaic */
#xsOdyssey .ody-magSpread{
  display:grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: clamp(12px, 1.8vw, 22px);
  align-items: stretch;
  margin: 22px 0 34px;
}
@media (max-width:980px){
  #xsOdyssey .ody-magSpread{ grid-template-columns: 1fr; gap: 14px; margin: 18px 0 26px; }
}

/* MAIN GRID (critical fix: stop mixing) */
#xsOdyssey .ody-magGrid{
  display:grid;
  grid-template-columns: minmax(0, 1fr) minmax(var(--ody-asideMin), var(--ody-asideMax));
  gap: clamp(18px, 2.6vw, 44px);
  align-items:start;
  grid-auto-flow: row;
}
@media (max-width:1100px){
  #xsOdyssey .ody-magGrid{
    grid-template-columns: minmax(0, 1fr) minmax(320px, 380px);
    gap: 26px;
  }
}
@media (max-width:980px){
  #xsOdyssey .ody-magGrid{ grid-template-columns: 1fr; gap: 18px; }
}

/* Force every .ody-col--main to col 1 */
#xsOdyssey .ody-magGrid > .ody-col--main{ grid-column: 1; }

/* Aside: col 2, spanning full chapter; sticky on desktop */
#xsOdyssey .ody-magGrid > .ody-aside{
  grid-column: 2;
  grid-row: 1 / -1;
  align-self: start;
  padding-top: 0;
}
@media (min-width:981px){
  #xsOdyssey .ody-magGrid > .ody-aside{
    position: sticky;
    top: calc(var(--xs-header-h, 0px) + 22px);
  }
}
@media (max-width:980px){
  #xsOdyssey .ody-magGrid > .ody-aside{
    grid-column: 1;
    grid-row: auto;
    position: static;
  }
}

/* =========================
   FIGURES / CAPTIONS
========================= */
#xsOdyssey figure.ody-figure{
  margin:0;
  border-radius: var(--ody-r-lg);
  overflow:hidden;
  background:#0c1118;
  border: 1px solid rgba(255,255,255,.22);
  box-shadow: var(--ody-shadowSoft);
  position:relative;
}

#xsOdyssey figure.ody-figure > img,
#xsOdyssey figure.ody-figure > video{
  position: relative;
  z-index: 0;
  width:100%;
  height:100%;
  object-fit:cover;
  transform: scale(1.02);
  filter: contrast(1.06) saturate(1.04);
  will-change: transform;
}

#xsOdyssey figure.ody-figure::after{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  z-index: 1;
  background:
    radial-gradient(900px 520px at 20% 10%, rgba(255,90,60,.10), transparent 62%),
    radial-gradient(1000px 560px at 82% 12%, rgba(170,220,255,.08), transparent 66%),
    linear-gradient(180deg, rgba(0,0,0,.00), rgba(0,0,0,.18));
}

#xsOdyssey figure.ody-figure > figcaption.ody-caption{
  position: relative;
  z-index: 2;
  margin:0;
  padding: 11px 14px 12px;
  background: var(--ody-capBg);
  border-top: 1px solid rgba(20,40,60,.08);
  color: var(--ody-capText);
  font-size: 12.9px;
  line-height: 1.52;
  letter-spacing: .01em;
}

/* sizes */
#xsOdyssey .ody-figure--wide{
  display:flex;
  flex-direction:column;
  min-height: 260px;
}
#xsOdyssey .ody-figure--wide > img{ flex:1 1 auto; min-height: 210px; }

#xsOdyssey .ody-figure--tall{
  display:flex;
  flex-direction:column;
  min-height: 300px;
}
#xsOdyssey .ody-figure--tall > img{ flex:1 1 auto; min-height: 240px; }

#xsOdyssey .ody-figure--aside > img,
#xsOdyssey .ody-figure--aside > video{
  aspect-ratio: 4/5;
  min-height: 300px;
}
@media (max-width:980px){
  #xsOdyssey .ody-figure--aside > img,
  #xsOdyssey .ody-figure--aside > video{
    aspect-ratio: 16/10;
    min-height: 260px;
  }
}

@media (hover:hover){
  #xsOdyssey figure.ody-figure{
    transition: transform .22s cubic-bezier(.2,.7,.2,1), box-shadow .22s cubic-bezier(.2,.7,.2,1);
  }
  #xsOdyssey figure.ody-figure:hover{
    transform: translateY(-3px);
    box-shadow: 0 34px 100px rgba(6,12,18,.16);
  }
  #xsOdyssey figure.ody-figure:hover > img,
  #xsOdyssey figure.ody-figure:hover > video{
    transform: scale(1.04);
  }
}

/* =========================
   PULLQUOTE / QUOTE
========================= */
#xsOdyssey .ody-pullquote{
  margin: 18px 0;
  border-radius: var(--ody-r-xl);
  padding: 16px 18px 15px;
  background:
    radial-gradient(900px 420px at 0% 0%, rgba(255,90,60,.14), transparent 62%),
    radial-gradient(900px 520px at 92% 12%, rgba(170,220,255,.12), transparent 66%),
    rgba(255,255,255,.96);
  border: 1px solid rgba(255,90,60,.22);
  box-shadow: var(--ody-shadowCard);
  position:relative;
}
#xsOdyssey .ody-pullquote::before{
  content:"";
  position:absolute;
  left: 14px;
  top: 14px;
  width: 32px;
  height: 32px;
  border-radius: 14px;
  background: rgba(255,90,60,.10);
  border: 1px solid rgba(255,90,60,.22);
  box-shadow: 0 18px 55px rgba(255,90,60,.08);
}
#xsOdyssey .ody-pullquote p{
  margin:0;
  font-size: 17px;
  line-height: 1.65;
  font-weight: 900;
  letter-spacing: -0.01em;
  color: rgba(31,42,50,.92);
  padding-left: 10px;
  font-family: var(--ody-font-heading);
}

#xsOdyssey .ody-quote{
  margin-top: 18px;
  border-radius: var(--ody-r-xl);
  padding: 16px 16px 14px;
  background:
    radial-gradient(840px 380px at 10% 0%, rgba(255,90,60,.10), transparent 62%),
    radial-gradient(900px 520px at 92% 12%, rgba(170,220,255,.08), transparent 66%),
    linear-gradient(180deg, rgba(255,90,60,.07), rgba(255,90,60,0)),
    rgba(255,255,255,.96);
  border: 1px solid rgba(255,90,60,.18);
  box-shadow: var(--ody-shadowCard);
}
#xsOdyssey .ody-quoteTag{
  display:inline-flex;
  padding: 6px 10px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 850;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: rgba(31,42,50,.78);
  border: 1px solid rgba(31,42,50,.10);
  background: rgba(255,255,255,.92);
  margin-bottom: 10px;
}
#xsOdyssey .ody-quote p{
  margin:0;
  font-size: 16px;
  line-height: 1.86;
  color: rgba(31,42,50,.90);
}

/* =========================
   CARDS / LIST
========================= */
#xsOdyssey .ody-card{
  border-radius: var(--ody-r-xl);
  padding: 18px 18px;
  background: linear-gradient(180deg, var(--ody-paper), var(--ody-paper2));
  border: 1px solid var(--ody-paperBorder);
  box-shadow: var(--ody-paperShadow);
  position:relative;
  overflow:hidden;
}
#xsOdyssey .ody-card h3{
  margin: 0 0 10px;
  font-size: 18px;
  font-weight: 900;
  letter-spacing: -0.01em;
  color: var(--ody-deep);
  font-family: var(--ody-font-heading);
}
#xsOdyssey .ody-card.glass{
  background: rgba(255,255,255,.86);
  border: 1px solid rgba(20,40,60,.10);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  box-shadow: 0 18px 62px rgba(10,20,30,.07);
}
#xsOdyssey .ody-card.glass::after{
  content:"";
  position:absolute;
  inset:-1px;
  pointer-events:none;
  border-radius: inherit;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.34),
    inset 0 -1px 0 rgba(0,0,0,.05);
  opacity:.85;
}

#xsOdyssey .ody-list{
  margin: 10px 0 0;
  padding-left: 18px;
  color: rgba(31,42,50,.84);
  line-height: 1.74;
  font-size: 15.6px;
}
#xsOdyssey .ody-list li{ margin: 7px 0; }
#xsOdyssey .ody-list a{
  text-decoration: none;
  border-bottom: 1px solid rgba(255,90,60,.22);
  padding-bottom: 1px;
}
@media (hover:hover){
  #xsOdyssey .ody-list a:hover{ border-bottom-color: rgba(255,90,60,.55); }
}

/* =========================
   GRID3 (ARION tiles)
========================= */
#xsOdyssey .ody-grid3{
  display:grid;
  grid-template-columns: repeat(3, minmax(0,1fr));
  gap: 16px;
  margin-top: 18px;
}
@media (max-width:900px){
  #xsOdyssey .ody-grid3{ grid-template-columns: 1fr; }
}
#xsOdyssey .ody-grid3 .ody-card{
  padding: 18px 18px 16px;
}
#xsOdyssey .ody-grid3 .ody-card::before{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  background:
    radial-gradient(900px 420px at 10% 0%, rgba(255,90,60,.06), transparent 62%),
    radial-gradient(900px 520px at 90% 12%, rgba(170,220,255,.08), transparent 66%);
  opacity:.95;
}
#xsOdyssey .ody-grid3 .ody-card > *{ position:relative; z-index:1; }

/* =========================
   FULL BLEED (interludes) — disciplined
========================= */
#xsOdyssey .ody-bleed{
  padding: 0;
  position:relative;
  background: #0b1218;
}
#xsOdyssey .ody-bleedMedia{
  position:relative;
  width: 100vw;
  left: 50%;
  right: 50%;
  margin-left: -50vw;
  margin-right: -50vw;
  height: min(46vh, 520px);
  overflow:hidden;
  background:#000;
}
@media (max-width:900px){
  #xsOdyssey .ody-bleedMedia{ height: min(44vh, 480px); }
}
@media (max-width:560px){
  #xsOdyssey .ody-bleedMedia{ height: 42vh; }
}

#xsOdyssey .ody-bleedMedia img,
#xsOdyssey .ody-bleedMedia video{
  width:100%;
  height:100%;
  object-fit:cover;
  transform: scale(1.02);
  filter: brightness(.98) contrast(1.06) saturate(1.04);
  will-change: transform;
  display:block;
}
#xsOdyssey .ody-bleedMedia::after{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  background:
    radial-gradient(1200px 520px at 18% 16%, rgba(255,90,60,.10), transparent 62%),
    radial-gradient(1000px 520px at 80% 12%, rgba(170,220,255,.08), transparent 64%),
    linear-gradient(180deg, rgba(0,0,0,.00), rgba(0,0,0,.22));
}

#xsOdyssey .ody-bleedCaption{
  position:absolute;
  left: 50%;
  transform: translateX(-50%);
  bottom: 16px;
  width: min(980px, calc(100% - 32px));
  border-radius: 16px;
  padding: 10px 14px;
  background: rgba(255,255,255,.96);
  border: 1px solid rgba(20,40,60,.10);
  box-shadow: 0 18px 60px rgba(0,0,0,.18);
  color: rgba(31,42,50,.88);
  font-size: 13.0px;
  line-height: 1.5;
  text-align:left;
  font-weight: 650;
  letter-spacing: .01em;
}

/* =========================
   BAND CTA
========================= */
#xsOdyssey .ody-band{
  margin-top: 18px;
  border-radius: 18px;
  padding: 16px 18px;
  background:
    radial-gradient(900px 420px at 10% 0%, rgba(255,90,60,.07), transparent 62%),
    radial-gradient(900px 520px at 90% 10%, rgba(170,220,255,.08), transparent 66%),
    linear-gradient(180deg, rgba(255,255,255,.92), rgba(255,255,255,.98));
  border: 1px solid rgba(20,40,60,.10);
  box-shadow: 0 22px 70px rgba(10,20,30,.08);
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:14px;
}
#xsOdyssey .ody-band p{
  margin:0;
  color: rgba(31,42,50,.82);
  font-size: 15.6px;
  line-height: 1.65;
}
#xsOdyssey .ody-band a{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding: 11px 16px;
  border-radius: 999px;
  text-decoration:none;
  font-size: 13px;
  font-weight: 900;
  background: var(--ody-accent);
  color:#111;
  border: 1px solid rgba(255,90,60,.85);
  white-space:nowrap;
  transition: transform .18s cubic-bezier(.2,.7,.2,1), box-shadow .18s, background .18s;
}
@media (hover:hover){
  #xsOdyssey .ody-band a:hover{
    transform: translateY(-2px);
    background: var(--ody-accentStrong);
    box-shadow: 0 28px 86px rgba(255,90,60,.20);
  }
}
@media (max-width:720px){
  #xsOdyssey .ody-band{
    flex-direction: column;
    align-items:flex-start;
    padding: 16px 16px;
  }
}

/* =========================
   CHAPTER MOODS
========================= */
#xsOdyssey #genese{
  background:
    radial-gradient(1200px 560px at 12% -4%, rgba(255,90,60,.10), transparent 62%),
    radial-gradient(1100px 520px at 90% 10%, rgba(170,220,255,.14), transparent 66%),
    linear-gradient(180deg, #ffffff, var(--ody-ice2));
}
#xsOdyssey #patagonie{
  background:
    radial-gradient(1200px 560px at 14% -6%, rgba(170,220,255,.18), transparent 64%),
    radial-gradient(1100px 520px at 88% 16%, rgba(255,90,60,.08), transparent 66%),
    linear-gradient(180deg, #ffffff, var(--ody-ice));
}
#xsOdyssey #noms{
  background:
    radial-gradient(1200px 560px at 10% -6%, rgba(255,90,60,.09), transparent 64%),
    radial-gradient(1100px 520px at 90% 12%, rgba(170,220,255,.12), transparent 66%),
    linear-gradient(180deg, #ffffff, var(--ody-ice2));
}

/* =========================
   DARK CHAPTERS (ARION + FILM)
========================= */
#xsOdyssey #arion{
  background:
    radial-gradient(1200px 620px at 14% 8%, rgba(255,90,60,.16), transparent 66%),
    radial-gradient(1200px 620px at 88% 12%, rgba(170,220,255,.18), transparent 68%),
    linear-gradient(180deg, var(--ody-night), var(--ody-night2));
  color: var(--ody-nightText);
}
#xsOdyssey #film{
  background:
    radial-gradient(1200px 620px at 18% 10%, rgba(170,220,255,.20), transparent 68%),
    radial-gradient(1200px 620px at 86% 14%, rgba(255,90,60,.14), transparent 66%),
    linear-gradient(180deg, var(--ody-night), #06090d);
  color: var(--ody-nightText);
}

#xsOdyssey #arion .ody-kicker,
#xsOdyssey #film .ody-kicker{ color: var(--ody-nightMuted); }

#xsOdyssey #arion .ody-title,
#xsOdyssey #film .ody-title,
#xsOdyssey #arion .ody-subtitle,
#xsOdyssey #film .ody-subtitle{ color: rgba(255,255,255,.94); }

#xsOdyssey #arion .ody-text,
#xsOdyssey #film .ody-text{ color: rgba(255,255,255,.82); }

#xsOdyssey #arion .ody-card,
#xsOdyssey #film .ody-card{
  background: rgba(255,255,255,.06);
  border: 1px solid var(--ody-nightBorder);
  box-shadow: 0 28px 90px rgba(0,0,0,.38);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
}
#xsOdyssey #arion .ody-card h3,
#xsOdyssey #film .ody-card h3{ color: rgba(255,255,255,.92); }

#xsOdyssey #arion .ody-list,
#xsOdyssey #film .ody-list{ color: rgba(255,255,255,.78); }

#xsOdyssey #arion .ody-list a,
#xsOdyssey #film .ody-list a{ border-bottom-color: rgba(255,90,60,.35); }

#xsOdyssey #arion figure.ody-figure,
#xsOdyssey #film figure.ody-figure{
  border: 1px solid rgba(255,255,255,.18);
  box-shadow: 0 40px 140px rgba(0,0,0,.55);
}
#xsOdyssey #arion figure.ody-figure::after,
#xsOdyssey #film figure.ody-figure::after{
  background:
    radial-gradient(900px 520px at 22% 12%, rgba(255,90,60,.14), transparent 62%),
    radial-gradient(1000px 560px at 80% 14%, rgba(170,220,255,.12), transparent 66%),
    linear-gradient(180deg, rgba(0,0,0,.00), rgba(0,0,0,.32));
}
#xsOdyssey #arion figure.ody-figure > figcaption.ody-caption,
#xsOdyssey #film figure.ody-figure > figcaption.ody-caption{
  background: rgba(8,12,16,.78);
  border-top: 1px solid rgba(255,255,255,.12);
  color: rgba(255,255,255,.82);
}

#xsOdyssey #arion .ody-band,
#xsOdyssey #film .ody-band{
  background:
    radial-gradient(900px 420px at 12% 0%, rgba(255,90,60,.12), transparent 62%),
    radial-gradient(900px 520px at 90% 10%, rgba(170,220,255,.12), transparent 66%),
    rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.16);
  box-shadow: 0 34px 120px rgba(0,0,0,.44);
}
#xsOdyssey #arion .ody-band p,
#xsOdyssey #film .ody-band p{ color: rgba(255,255,255,.74); }

#xsOdyssey #arion .ody-band a,
#xsOdyssey #film .ody-band a{
  color:#111;
  border-color: rgba(255,90,60,.95);
}

/* film video polish */
#xsOdyssey #film .ody-figure video{
  filter: contrast(1.08) saturate(1.05);
}

/* =========================
   REDUCED MOTION
========================= */
@media (prefers-reduced-motion: reduce){
  #xsOdyssey .ody-heroMedia img{ transform:none !important; }
  #xsOdyssey figure.ody-figure > img,
  #xsOdyssey figure.ody-figure > video,
  #xsOdyssey .ody-bleedMedia img,
  #xsOdyssey .ody-bleedMedia video{ transform:none !important; }
  #xsOdyssey .ody-pill,
  #xsOdyssey .ody-band a{ transition:none !important; }
}
/* =========================
   iPhone / Safari — fix hamburger
========================= */
@media (max-width:1080px){

  #xsOdyssey{
    isolation:auto !important;
  }

  #xsOdyssey .ody-hero,
  #xsOdyssey .ody-heroInner{
    position:relative;
    z-index:0;
  }

  #xsOdyssey .ody-heroMedia,
  #xsOdyssey .ody-heroOverlay,
  #xsOdyssey .ody-hero::before,
  #xsOdyssey .ody-hero::after,
  #xsOdyssey .ody-progress{
    pointer-events:none !important;
  }

  #xsOdyssey .ody-heroCard{
    backdrop-filter:none !important;
    -webkit-backdrop-filter:none !important;
    background:rgba(10,14,20,.72) !important;
  }

  #xsOdyssey .ody-card.glass,
  #xsOdyssey #arion .ody-card,
  #xsOdyssey #film .ody-card{
    backdrop-filter:none !important;
    -webkit-backdrop-filter:none !important;
  }

  #xsOdyssey .ody-heroMedia img,
  #xsOdyssey .ody-bleedMedia img,
  #xsOdyssey .ody-bleedMedia video,
  #xsOdyssey figure.ody-figure > img,
  #xsOdyssey figure.ody-figure > video{
    will-change:auto !important;
  }
}