/* ==========================================================================
   The Open Door (start.howtomuslim.org): shared page styles.
   Loaded after /assets/css/site-chrome.css on every page.
   Every class is prefixed od- so nothing collides with the shared chrome.

   Contents
     1. Tokens (site-wide, then one block per door)
     2. Base and type
     3. Crisis strip, breadcrumb
     4. Home: the hall and the door cards
     5. Questions people ask, "behind every door" steps
     6. The path (door pages): hero, arch, trail, stations, side notes, end
     7. Talk to a real person
     8. The other doors strip
     9. Network cards and guide chips
    10. Privacy line, closing note
    11. The opening-door overlay and the arrival cover (driven by od-door.js)
    12. Responsive
    13. Reduced motion

   Gold rule: gold and golden-pollen are only ever light (glows, lines, pins,
   backgrounds). Never text on a light background.
   ========================================================================== */


/* ---------- 1. Tokens ---------- */
:root{
  --od-ink:var(--charcoal-blue);          /* body text, 8:1+ on every wash */
  --od-ink-soft:#3E5566;                  /* secondary text, 5.8:1+ on every wash and tint */
  --od-muted:var(--blue-slate);           /* small print, ONLY on off-white/paper (5:1) */
  --od-paper:#FFFFF4;
  --od-line:rgba(35,61,77,.14);
  --od-line-strong:rgba(35,61,77,.26);
  --od-milestone:#F5E9BC;
  --od-shadow:0 1px 0 rgba(35,61,77,.04),0 18px 40px -24px rgba(35,61,77,.34);
  --od-radius:22px;
  --od-display:"Montserrat Alternates","Manrope",system-ui,sans-serif;
  --od-body:"Manrope",system-ui,-apple-system,"Segoe UI",sans-serif;
  --od-wrap:1240px;
  --od-gutter:16px;

  /* Door defaults (the home page has no door of its own) */
  --od-tint:var(--green-tea);
  --od-tint-deep:#AFBAB2;
  --od-wash:var(--off-white);
  --od-glow:#FFFDF0;
  --od-glow-strong:var(--golden-pollen);
  --od-accent-ink:var(--olive-dark);
}
@media (min-width:640px){ :root{ --od-gutter:28px; } }
@media (min-width:1100px){ :root{ --od-gutter:40px; } }

/* One block per door. The same attribute works on <html> (a door page),
   on a door card or link (the home page), and on the opening-door overlay,
   so the light behind a door is exactly the wash of the page it opens onto.
     --od-tint        the door leaf colour, and the accent of its page
     --od-tint-deep   the path track and pin rings on its page (decorative)
     --od-wash        the page background, and the colour the light floods to
     --od-glow        the bright core of that light
     --od-glow-strong the light seen through a half-open door on the home page
     --od-accent-ink  text-safe accent (6:1+ on wash, tint and paper)        */
[data-od-door="curious"]{
  --od-tint:#D6DDCF; --od-tint-deep:#9EAE93; --od-wash:#EAEEE2;
  --od-glow:#F8F8EB; --od-glow-strong:#E2D7A3; --od-accent-ink:#3B5236;
}
[data-od-door="new-muslim"]{
  --od-tint:#F1E2A9; --od-tint-deep:#D1B55F; --od-wash:#F8F0CE;
  --od-glow:#FDF8E4; --od-glow-strong:#F6D678; --od-accent-ink:#5C4A0E;
}
[data-od-door="first-year"]{
  --od-tint:#DCE0C4; --od-tint-deep:#A9B387; --od-wash:#EEF0DC;
  --od-glow:#F9F8E9; --od-glow-strong:#E6D99C; --od-accent-ink:#4D5231;
}
[data-od-door="struggling"]{
  --od-tint:#DDE0DF; --od-tint-deep:#A7B0B4; --od-wash:#EEF0EA;
  --od-glow:#F9F8EE; --od-glow-strong:#E7D9AE; --od-accent-ink:#3E5566;
}
[data-od-door="family-and-friends"]{
  --od-tint:#D7DCE1; --od-tint-deep:#A2AEB8; --od-wash:#EBEEEA;
  --od-glow:#F8F8EE; --od-glow-strong:#E3D6AF; --od-accent-ink:#2E4A60;
}
/* The light itself: one gradient, used by the overlay's final flood and by
   the arrival cover on the next page, so the hand-over has no seam. */
[data-od-door], :root{
  --od-flood:radial-gradient(130% 95% at 50% 55%, var(--od-glow) 0%, var(--od-wash) 62%);
}


/* ---------- 2. Base and type ---------- */
body{ margin:0; background:var(--off-white); color:var(--od-ink); }
.od-main{
  font-family:var(--od-body); font-size:1.0625rem; line-height:1.62; color:var(--od-ink);
  -webkit-font-smoothing:antialiased; overflow-x:clip; overflow-wrap:break-word;
}
.od-main *, .od-main *::before, .od-main *::after{ box-sizing:border-box; }
/* :where() keeps these resets at zero specificity, so a component's own margin or padding always wins */
:where(.od-main) :where(h1, h2, h3, p, ul, ol, figure, blockquote){ margin:0; }
:where(.od-main) :where(ul, ol){ padding:0; list-style:none; }
.od-main a{ color:inherit; }
.od-main :focus-visible{ outline:3px solid var(--charcoal-blue); outline-offset:3px; border-radius:6px; }
.od-wrap{ max-width:var(--od-wrap); margin:0 auto; padding-left:var(--od-gutter); padding-right:var(--od-gutter); }
.od-vh{ position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0; }
.od-defs{ position:absolute; width:0; height:0; overflow:hidden; }
.od-arrow{ width:16px; height:16px; flex:none; }

.od-eyebrow{
  font-family:var(--od-body); font-weight:700; font-size:.76rem; letter-spacing:.15em;
  text-transform:uppercase; color:var(--od-ink-soft);
}
.od-h1{
  font-family:var(--od-display); font-weight:600; color:var(--od-ink); text-wrap:balance;
  font-size:clamp(2.35rem, 1.35rem + 4vw, 4.25rem); line-height:1.03; letter-spacing:-.03em;
}
.od-h1 span{ display:block; color:var(--od-accent-ink); }
.od-h2{
  font-family:var(--od-display); font-weight:600; color:var(--od-ink); text-wrap:balance;
  font-size:clamp(1.65rem, 1.1rem + 2vw, 2.5rem); line-height:1.12; letter-spacing:-.02em;
}
.od-lede{ font-size:clamp(1.04rem, .98rem + .32vw, 1.2rem); line-height:1.6; color:var(--od-ink-soft); max-width:56ch; }
.od-sub{ color:var(--od-ink-soft); font-size:1.04rem; max-width:40em; margin-top:12px; }
.od-head{ max-width:700px; margin-bottom:clamp(30px, 4vw, 50px); }
.od-head .od-h2{ margin-top:10px; }
.od-head .od-lede{ margin-top:14px; }
.od-section{ padding:clamp(72px, 9vw, 120px) 0; }
.od-section--flush{ padding-top:0; }   /* a section that follows another light section */

.od-btn{
  display:inline-flex; align-items:center; gap:10px; min-height:46px; padding:12px 22px; border-radius:999px;
  background:var(--charcoal-blue); color:var(--off-white) !important; text-decoration:none;
  font-family:var(--od-display); font-weight:600; font-size:.95rem; line-height:1.2;
  transition:background-color .25s ease, transform .25s ease, box-shadow .25s ease;
}
.od-btn:hover{ background:var(--olive-dark); box-shadow:0 8px 20px -8px rgba(35,61,77,.6); transform:translateY(-1px); }
.od-btn--quiet{ background:transparent; color:var(--charcoal-blue) !important; box-shadow:inset 0 0 0 1.5px var(--charcoal-blue); }
.od-btn--quiet:hover{ background:var(--charcoal-blue); color:var(--off-white) !important; }


/* ---------- 3. Crisis strip, breadcrumb ---------- */
.od-crisis{ background:#EEF0EA; border-bottom:1px solid var(--od-line); font-size:.92rem; line-height:1.5; }
.od-crisis .od-wrap{ display:flex; gap:10px; align-items:flex-start; justify-content:center; padding-top:10px; padding-bottom:10px; }
.od-crisis svg{ flex:none; width:18px; height:18px; margin-top:2px; color:var(--olive-dark); }
.od-crisis p{ color:var(--od-ink); }
.od-crisis a{ font-weight:700; text-decoration-thickness:1.5px; text-underline-offset:3px; }

.od-crumbs ol{ display:flex; flex-wrap:wrap; align-items:center; gap:4px 10px; font-size:.9rem; color:var(--od-ink-soft); }
.od-crumbs li{ display:inline-flex; align-items:center; gap:10px; }
.od-crumbs li + li::before{ content:""; width:6px; height:6px; border-top:1.5px solid currentColor; border-right:1.5px solid currentColor; transform:rotate(45deg); opacity:.7; }
.od-crumbs a{ font-weight:600; text-underline-offset:3px; }
.od-crumbs [aria-current]{ color:var(--od-ink); font-weight:600; }


/* ---------- 4. Home: the hall and the door cards ---------- */
.od-hall{ position:relative; isolation:isolate; padding:clamp(40px, 4.2vw, 64px) 0 0;
  background:linear-gradient(180deg, var(--off-white) 0%, var(--off-white) 50%, #F6F1DA 100%); }
.od-hall-head{ text-align:center; max-width:1000px; margin:0 auto; }
.od-hall-head .od-eyebrow{ display:inline-flex; align-items:center; gap:12px; margin-bottom:18px; }
.od-hall-head .od-eyebrow::before, .od-hall-head .od-eyebrow::after{ content:""; width:28px; height:1px; background:currentColor; opacity:.5; }
.od-hall-head .od-h1{ margin-bottom:22px; }
.od-hall-head .od-lede{ margin:0 auto; max-width:50ch; }
.od-hall-note{ margin:14px auto 0 !important; font-size:.95rem; color:var(--od-muted); max-width:46ch; }

/* The row of doors. Each <li class="od-door" data-od-door="..."> holds the
   door itself (a.od-door-way, the link od-door.js animates) and, below it,
   a few sample links that go straight to sub-pages. */
.od-doors{
  margin:clamp(36px, 3.6vw, 52px) auto 0;
  display:grid; grid-template-columns:repeat(5, minmax(0, 1fr)); grid-template-rows:auto auto; gap:clamp(14px, 1.8vw, 26px);
}
.od-door{ position:relative; display:grid; grid-template-rows:subgrid; grid-row:span 2; }
.od-door-way{
  --ajar:9deg;
  position:relative; display:flex; flex-direction:column; text-decoration:none; color:var(--od-ink);
  border-radius:999px 999px 6px 6px; padding:9px 9px 0;
  background:linear-gradient(180deg, #FFFFFA, #F4F1E2);
  box-shadow:inset 0 0 0 1.5px rgba(35,61,77,.20), 0 1px 0 rgba(255,255,255,.8);
}
/* the light behind each door: the colour of the room it opens onto */
.od-door-light{
  position:absolute; inset:9px 9px 0; border-radius:999px 999px 0 0; overflow:hidden;
  background:
    radial-gradient(90% 60% at 50% 100%, var(--od-glow) 0%, transparent 70%),
    linear-gradient(180deg, var(--od-glow-strong) 0%, var(--od-glow) 62%, var(--od-wash) 100%);
}
.od-door-light::after{
  content:""; position:absolute; inset:0; opacity:.7;
  background:linear-gradient(100deg, rgba(255,255,255,0) 40%, rgba(255,255,255,.55) 70%, rgba(255,255,255,0) 90%);
}
.od-door-leaf{
  position:relative; z-index:1; flex:1; display:flex; flex-direction:column;
  min-height:400px; padding:22px 20px 24px; border-radius:999px 999px 0 0;
  background:linear-gradient(180deg, rgba(255,255,255,.42) 0%, rgba(255,255,255,0) 38%), var(--od-tint);
  box-shadow:inset 0 0 0 1px rgba(35,61,77,.07), 7px 0 16px -10px rgba(35,61,77,.45);
  transform-origin:0% 50%; transform:perspective(1300px) rotateY(var(--ajar));
  transition:transform .7s cubic-bezier(.2,.7,.2,1), box-shadow .7s ease;
}
.od-door-leaf::after{ /* the knob */
  content:""; position:absolute; right:14px; top:56%; width:9px; height:9px; border-radius:50%;
  background:radial-gradient(circle at 35% 35%, #fff 0%, var(--light-gold) 35%, var(--olive-dark) 100%);
  box-shadow:0 1px 2px rgba(35,61,77,.35);
}
.od-fan{ display:block; width:66%; height:auto; margin:10px auto 24px; flex:none; }
.od-door-body{ margin-top:auto; padding-right:10px; }
.od-door-num{ display:block; font-family:var(--od-display); font-weight:600; font-size:.72rem; letter-spacing:.16em; text-transform:uppercase; color:var(--od-ink-soft); margin:0 0 10px; }
.od-door-title{ font-family:var(--od-display); font-weight:600; font-size:clamp(1.12rem, .9rem + .45vw, 1.34rem); line-height:1.18; letter-spacing:-.015em; margin:0 0 10px; color:var(--od-ink); }
.od-door-desc{ display:block; font-size:.93rem; line-height:1.55; color:var(--od-ink-soft); }
.od-door-enter{ display:inline-flex; align-items:center; gap:8px; margin-top:16px; font-family:var(--od-display); font-weight:600; font-size:.86rem; color:var(--od-ink); }
.od-door-enter svg{ width:16px; height:16px; transition:transform .5s ease; }
.od-door-way::before{ /* the stone step */
  content:""; position:absolute; left:-8px; right:-8px; top:100%; height:7px; border-radius:2px;
  background:linear-gradient(180deg, #E4E2D2, #D2D1C2); box-shadow:0 1px 0 rgba(35,61,77,.12);
}
.od-door-way::after{ /* the light on the floor */
  content:""; position:absolute; left:-12%; right:-12%; top:calc(100% + 7px); height:64px; pointer-events:none;
  background:radial-gradient(50% 100% at 50% 0%, rgba(252,202,70,.42) 0%, rgba(252,202,70,0) 100%);
  opacity:.55; transform-origin:50% 0; transform:scaleY(.7); transition:opacity .7s ease, transform .7s ease;
}
.od-door-way:hover, .od-door-way:focus-visible{ --ajar:26deg; }
.od-door-way:hover .od-door-leaf, .od-door-way:focus-visible .od-door-leaf{ box-shadow:inset 0 0 0 1px rgba(35,61,77,.07), 12px 0 22px -10px rgba(35,61,77,.5); }
.od-door-way:hover::after, .od-door-way:focus-visible::after{ opacity:1; transform:scaleY(1.15); }
.od-door-way:hover .od-door-enter svg, .od-door-way:focus-visible .od-door-enter svg{ transform:translateX(4px); }
.od-main .od-door-way:focus-visible{ outline:3px solid var(--od-ink); outline-offset:5px; border-radius:999px 999px 8px 8px; }

.od-door-links{ margin:30px 0 0; align-self:start; padding:0 4px; font-size:.92rem; line-height:1.4; }
.od-door-links li + li{ margin-top:2px; }
.od-door-links a{ display:flex; gap:8px; padding:6px 0; text-decoration:none; color:var(--od-ink); }
.od-door-links a::before{ content:""; flex:none; width:6px; height:6px; margin-top:.5em; border-radius:50%; background:var(--od-tint); box-shadow:inset 0 0 0 1px rgba(35,61,77,.35); }
.od-door-links a:hover{ text-decoration:underline; text-underline-offset:4px; text-decoration-thickness:1px; }

.od-threshold{ margin-top:clamp(40px, 5vw, 64px); border-top:1px solid var(--od-line); padding:22px 0 30px; }


/* ---------- 5. Questions people ask, "behind every door" ---------- */
.od-asked{ background:linear-gradient(180deg, rgba(201,210,192,.34), rgba(201,210,192,.18)); border-top:1px solid var(--od-line); border-bottom:1px solid var(--od-line); }
.od-asked-head{ display:flex; flex-wrap:wrap; justify-content:space-between; align-items:end; gap:16px 48px; margin-bottom:clamp(32px, 4vw, 52px); }
.od-asked-head .od-h2{ margin-top:10px; }
.od-asked-head .od-lede{ max-width:44ch; }
.od-qs{ display:grid; grid-template-columns:repeat(2, minmax(0, 1fr)); gap:0 clamp(28px, 4vw, 64px); }
.od-qs li{ border-top:1px solid rgba(35,61,77,.16); }
.od-qs li:nth-last-child(-n+2){ border-bottom:1px solid rgba(35,61,77,.16); }
.od-q{ display:grid; grid-template-columns:1fr auto; gap:6px 18px; align-items:center; padding:20px 4px; text-decoration:none; color:var(--od-ink); }
.od-q-text{ font-family:var(--od-display); font-weight:500; font-size:clamp(1.02rem, .95rem + .35vw, 1.18rem); line-height:1.35; letter-spacing:-.01em; }
.od-q-door{ grid-column:1; display:inline-flex; align-items:center; gap:8px; font-size:.84rem; color:var(--od-ink-soft); }
.od-q-door::before{ content:""; width:10px; height:13px; border-radius:999px 999px 2px 2px; background:var(--od-tint); box-shadow:inset 0 0 0 1px rgba(35,61,77,.3); }
.od-q-arrow{ grid-column:2; grid-row:1 / span 2; width:38px; height:38px; border-radius:50%; display:grid; place-items:center; box-shadow:inset 0 0 0 1px rgba(35,61,77,.22); transition:background-color .3s ease, box-shadow .3s ease; }
.od-q-arrow svg{ width:16px; height:16px; }
.od-q:hover .od-q-text{ text-decoration:underline; text-underline-offset:5px; text-decoration-thickness:1px; }
.od-q:hover .od-q-arrow, .od-q:focus-visible .od-q-arrow{ background:var(--light-gold); box-shadow:none; }

.od-inside-grid{ display:grid; grid-template-columns:minmax(0, 5fr) minmax(0, 7fr); gap:clamp(36px, 6vw, 96px); align-items:start; }
.od-quote{ margin:18px 0 0; padding:0 0 0 28px; position:relative; font-family:var(--od-display); font-weight:500; letter-spacing:-.02em; line-height:1.18; font-size:clamp(1.55rem, 1.05rem + 2vw, 2.45rem); color:var(--od-ink); }
.od-quote::before{ content:""; position:absolute; left:0; top:.2em; bottom:.2em; width:3px; border-radius:3px; background:linear-gradient(180deg, var(--gold), var(--light-gold)); }
.od-quote-cap{ margin:18px 0 0 28px !important; font-size:.95rem; color:var(--od-muted); max-width:40ch; }
.od-steps{ margin-top:28px; display:grid; grid-template-columns:repeat(2, minmax(0, 1fr)); gap:0 clamp(24px, 3vw, 44px); counter-reset:od-step; }
.od-steps li{ counter-increment:od-step; display:grid; grid-template-columns:40px 1fr; gap:14px; padding:18px 0; border-top:1px solid var(--od-line); }
.od-steps li::before{ content:counter(od-step); display:grid; place-items:center; width:34px; height:40px; border-radius:999px 999px 4px 4px; background:var(--green-tea); font-family:var(--od-display); font-weight:600; font-size:.9rem; color:var(--od-ink); }
.od-steps strong{ display:block; font-family:var(--od-display); font-weight:600; font-size:1.02rem; line-height:1.3; margin:0 0 4px; }
.od-steps span{ display:block; font-size:.93rem; line-height:1.55; color:var(--od-ink-soft); }


/* ---------- 6. The path (door pages) ----------
   <div class="od-journey"> holds the hero AND the stations, so one SVG line
   (svg.od-trail, drawn by od-door.js) can run from the arch in the hero down
   through every station pin. Without the script the cards still read as a
   numbered list, with a plain line down the left on phones. */
.od-journey{
  position:relative; isolation:isolate;
  background:
    radial-gradient(70% 520px at 80% 0%, var(--od-glow) 0%, transparent 70%),
    linear-gradient(180deg, var(--od-wash) 0, var(--od-wash) calc(100% - 360px), var(--off-white) 100%);
}
.od-trail{ position:absolute; left:0; top:0; z-index:0; overflow:visible; pointer-events:none; }
.od-trail-track{ fill:none; stroke:var(--od-tint-deep); stroke-width:14; stroke-linecap:round; stroke-linejoin:round; }
.od-trail-steps{ fill:none; stroke:var(--od-paper); stroke-opacity:.9; stroke-width:2.4; stroke-linecap:round; stroke-dasharray:.5 10; }
.od-trail-progress{ fill:none; stroke:var(--gold); stroke-width:4.5; stroke-linecap:round; stroke-linejoin:round; }
.od-trail-branches{ fill:none; stroke:var(--od-tint-deep); stroke-width:3; stroke-linecap:round; stroke-dasharray:7 8; }
.od-walker-halo{ fill:var(--gold); opacity:.22; }
.od-walker-dot{ fill:var(--gold); stroke:var(--od-paper); stroke-width:3; }

/* Door-page hero */
.od-hero{ position:relative; z-index:1; padding-top:28px; }
.od-hero-grid{ display:grid; gap:26px; }
.od-crumbs{ margin-bottom:26px; }
.od-door-tag{ display:inline-flex; align-items:center; gap:10px; color:var(--od-accent-ink); }
.od-door-tag-arch{ width:14px; height:18px; border-radius:999px 999px 2px 2px; background:var(--od-tint); box-shadow:inset 0 0 0 1.5px var(--od-accent-ink); flex:none; }
.od-hero .od-h1{ margin-top:16px; max-width:13em; }
.od-hero .od-lede{ margin-top:20px; color:var(--od-ink); }
.od-hero-note{ margin-top:12px !important; font-size:.96rem; color:var(--od-ink-soft); max-width:46ch; }

/* "Jump to where you are": links to station ids; :target marks the card */
.od-choose{ margin-top:28px; }
.od-choose-label{ font-family:var(--od-display); font-weight:600; font-size:1.02rem; color:var(--od-ink); }
.od-choose ul{ display:flex; flex-wrap:wrap; gap:10px; margin-top:12px; }
.od-choose a{
  display:inline-flex; align-items:center; gap:10px; min-height:44px; padding:9px 16px 9px 12px; border-radius:999px;
  background:var(--od-paper); border:1.5px solid var(--od-line-strong); font-weight:600; font-size:.95rem; line-height:1.25;
  text-decoration:none; color:var(--od-ink); transition:background-color .2s, border-color .2s;
}
.od-choose a:hover{ background:#fff; border-color:var(--od-accent-ink); }
.od-mark{ width:14px; height:14px; border-radius:50%; flex:none; background:var(--gold); box-shadow:0 0 0 2px var(--od-accent-ink); }
.od-mark--side{ background:var(--od-paper); box-shadow:none; border:2px dashed var(--od-accent-ink); }

/* The arch the path walks out of: a smaller echo of the door you came through */
.od-arch{ position:relative; width:136px; }
.od-arch svg{ display:block; width:100%; height:auto; }
.od-arch-frame{ fill:none; stroke:var(--od-tint); stroke-width:18; stroke-linejoin:round; }
.od-arch-edge{ fill:none; stroke:var(--od-accent-ink); stroke-width:4.5; stroke-linejoin:round; stroke-linecap:round; }
.od-arch-leaf{ fill:var(--od-tint); stroke:var(--od-accent-ink); stroke-width:3.5; stroke-linejoin:round; }
.od-arch-knob{ fill:var(--gold); }
.od-arch-glow-a{ stop-color:var(--od-glow); }
.od-arch-glow-b{ stop-color:var(--od-glow-strong); }
.od-arch-spill{ stop-color:var(--golden-pollen); }
.od-start{ position:absolute; left:50%; top:88.6%; width:2px; height:2px; margin:-1px 0 0 -1px; }

/* "You are here": a dark tag (never gold text) */
.od-here{
  position:absolute; left:calc(100% + 10px); top:78%; white-space:nowrap;
  padding:5px 12px; border-radius:999px; background:var(--charcoal-blue); color:var(--od-paper);
  font-weight:700; font-size:.72rem; letter-spacing:.08em; text-transform:uppercase; line-height:1.4;
}
.od-here::before{ content:""; position:absolute; right:100%; top:50%; margin-top:-5px; border:5px solid transparent; border-right-color:var(--charcoal-blue); }

/* The stations area. Phones: one lane down the left. Desktop: a 12-column
   grid; stations alternate right and left so the line winds between them. */
.od-path-area{ position:relative; z-index:1; padding:56px var(--od-gutter) 24px calc(var(--od-gutter) + 40px); }
.od-legend{ max-width:32em; }
.od-legend .od-h2{ margin-top:8px; }
.od-legend-keys{ display:grid; gap:9px; margin-top:18px !important; font-size:.93rem; color:var(--od-ink-soft); }
.od-legend-keys li{ display:flex; align-items:center; gap:12px; }
.od-key-line{ width:30px; height:6px; border-radius:6px; flex:none; background:var(--gold); }

.od-path{ display:flex; flex-direction:column; gap:30px; margin-top:34px !important; }
.od-stop{ position:relative; display:flex; flex-direction:column; gap:16px; }

.od-station{
  position:relative; z-index:1; background:var(--od-paper); border:1px solid var(--od-line);
  border-radius:var(--od-radius); padding:30px 22px 24px; box-shadow:var(--od-shadow); scroll-margin-top:28px;
}
.od-station--milestone{ background:linear-gradient(165deg, var(--od-glow) 0, var(--od-tint) 120%); border-color:var(--od-line-strong); }
.od-station--side{ background:#FAFBF4; border:1.5px dashed var(--od-tint-deep); box-shadow:none; }

.od-pin{
  position:absolute; left:-41px; top:24px; width:30px; height:30px; border-radius:50%;
  display:grid; place-items:center; background:var(--gold); color:var(--charcoal-blue);
  border:3px solid var(--od-paper); box-shadow:0 0 0 2px var(--od-accent-ink);
  font-family:var(--od-display); font-weight:700; font-size:.8rem; line-height:1;
  transition:background-color .35s, box-shadow .35s;
}
.od-pin--side{ background:var(--od-paper); box-shadow:0 0 0 2px var(--od-tint-deep); }
.od-pin--side::after{ content:""; width:8px; height:8px; border-radius:50%; background:var(--od-accent-ink); }
/* With the script running, pins light up as the gold line reaches them */
.od-live .od-pin{ background:var(--od-paper); }
.od-live .od-pin.od-pin--passed{ background:var(--gold); }
.od-live .od-pin--side.od-pin--passed{ background:var(--light-gold); }

.od-station-kicker{ display:flex; flex-wrap:wrap; gap:4px 12px; align-items:baseline; }
.od-station-kicker .od-eyebrow:first-child{ color:var(--od-accent-ink); }
.od-station-title{ font-family:var(--od-display); font-weight:600; color:var(--od-ink); font-size:clamp(1.4rem, 1.1rem + 1vw, 1.8rem); line-height:1.15; letter-spacing:-.01em; margin-top:10px !important; }
.od-voice{ margin-top:14px !important; padding-left:14px; border-left:3px solid var(--gold); font-weight:500; font-size:1.08rem; line-height:1.5; color:var(--od-accent-ink); }
.od-note{ margin-top:12px !important; color:var(--od-ink); font-size:1rem; }
.od-station .od-btn{ margin-top:20px; }
.od-deeper{ margin-top:22px; }
.od-deeper-label{ font-weight:700; font-size:.74rem; letter-spacing:.14em; text-transform:uppercase; color:var(--od-ink-soft); margin-bottom:6px !important; }
.od-links{ border-bottom:1px solid var(--od-line); }
.od-links a{
  display:flex; align-items:center; justify-content:space-between; gap:14px; min-height:46px; padding:10px 2px;
  border-top:1px solid var(--od-line); font-weight:600; font-size:.97rem; line-height:1.35; text-decoration:none; color:var(--od-ink);
}
.od-links a small{ display:block; font-weight:500; font-size:.84rem; color:var(--od-ink-soft); margin-top:2px; }
.od-links a:hover{ color:var(--od-accent-ink); text-decoration:underline; text-underline-offset:4px; }
.od-links .od-arrow{ color:var(--od-accent-ink); transition:transform .2s; }
.od-links a:hover .od-arrow{ transform:translateX(3px); }
.od-also{ margin-top:14px !important; font-size:.92rem; color:var(--od-ink-soft); }
.od-also a{ color:var(--charcoal-blue); font-weight:700; text-underline-offset:3px; }

/* "You are here" on the station the reader jumped to */
.od-station:target{ outline:3px solid var(--gold); outline-offset:6px; box-shadow:var(--od-shadow), 0 0 0 2px var(--od-accent-ink); }
.od-station:target::after{
  content:"You are here"; position:absolute; top:-14px; right:18px; padding:5px 12px; border-radius:999px;
  background:var(--charcoal-blue); color:var(--od-paper); font-family:var(--od-body); font-weight:700; font-size:.72rem; letter-spacing:.08em; text-transform:uppercase;
}
.od-station:target .od-pin{ background:var(--gold); box-shadow:0 0 0 2px var(--od-accent-ink), 0 0 0 9px rgba(255,185,0,.28); }

/* A side note beside a station: the mentor talking, not a link */
.od-side{ font-family:var(--od-display); font-weight:500; font-size:clamp(1.1rem, 1rem + .7vw, 1.45rem); line-height:1.4; color:var(--od-accent-ink); max-width:20em; padding:4px 0; }
.od-side strong{ font-weight:600; color:var(--od-ink); }

/* Where the path goes after this door */
.od-end{ position:relative; z-index:1; padding:40px 0 0; }
.od-end .od-pin{ top:38px; }
.od-end-title{ font-family:var(--od-display); font-weight:600; font-size:1.3rem; color:var(--od-ink); }
.od-end p{ color:var(--od-ink-soft); margin-top:6px !important; max-width:30em; }
.od-end .od-btn{ margin-top:16px; }

/* No script: a plain line still shows the way on phones */
@media (max-width:879px){
  .od-journey:not(.od-drawn) .od-path-area::before{ content:""; position:absolute; left:calc(var(--od-gutter) + 12px); top:56px; bottom:0; width:5px; border-radius:5px; background:var(--od-tint-deep); }
  .od-trail-track{ stroke-width:9; }
  .od-here{ top:70%; }
}
@media (min-width:880px){
  .od-hero{ padding-top:40px; }
  .od-hero-grid{ grid-template-columns:minmax(0, 1.4fr) minmax(0, .6fr); align-items:end; gap:40px; }
  .od-arch{ width:min(250px, 100%); justify-self:center; }
  .od-here{ left:auto; right:calc(100% + 12px); top:80%; }
  .od-here::before{ right:auto; left:100%; border-right-color:transparent; border-left-color:var(--charcoal-blue); }

  .od-path-area{ display:grid; grid-template-columns:repeat(12, minmax(0, 1fr)); column-gap:28px; padding:120px var(--od-gutter) 40px; }
  .od-legend{ grid-column:1 / 6; grid-row:1; align-self:start; z-index:2; padding-top:20px; }
  .od-path{ grid-column:1 / -1; grid-row:1 / span 2; margin-top:0 !important; gap:110px; }
  .od-end{ grid-column:3 / 11; grid-row:3; text-align:center; padding-top:110px; }
  .od-end .od-pin{ left:50%; top:95px; margin-left:-15px; }
  .od-end p{ margin-left:auto; margin-right:auto; }

  .od-stop{ display:grid; grid-template-columns:repeat(12, minmax(0, 1fr)); column-gap:28px; align-items:center; }
  .od-stop > *{ grid-row:1; }
  .od-stop:nth-child(odd) > .od-station{ grid-column:6 / 13; }
  .od-stop:nth-child(odd) > .od-side{ grid-column:1 / 5; justify-self:end; text-align:right; }
  .od-stop:nth-child(even) > .od-station{ grid-column:1 / 8; }
  .od-stop:nth-child(even) > .od-side{ grid-column:9 / 13; }
  .od-station{ padding:38px 34px 30px; }
  .od-pin{ left:24px; top:-15px; }
}


/* ---------- 7. Talk to a real person ---------- */
.od-talk{ position:relative; overflow:hidden; background:var(--charcoal-blue); color:var(--off-white); }
.od-talk::before{ /* a lit doorway at the edge of the dark room */
  content:""; position:absolute; right:-60px; top:-40px; width:340px; height:520px; border-radius:999px 999px 0 0; pointer-events:none;
  background:radial-gradient(70% 60% at 50% 100%, rgba(252,202,70,.22), rgba(252,202,70,0) 70%);
}
.od-talk .od-eyebrow{ color:var(--green-tea); }
.od-talk .od-h2{ color:var(--off-white); max-width:20ch; margin-top:10px; }
.od-talk .od-lede{ color:#D5DDE2; margin-top:14px; }
.od-main .od-talk :focus-visible{ outline-color:var(--light-gold); }
.od-talk-grid{ position:relative; display:grid; grid-template-columns:minmax(0, 5fr) minmax(0, 7fr); gap:clamp(32px, 5vw, 80px); margin-top:clamp(32px, 4vw, 52px); align-items:start; }
.od-feature{ background:var(--light-gold); color:var(--charcoal-blue); border-radius:160px 160px 14px 14px; padding:clamp(56px, 6vw, 76px) clamp(24px, 3vw, 36px) clamp(28px, 3vw, 36px); box-shadow:0 30px 60px -30px rgba(0,0,0,.55); }
.od-feature-tag{ display:inline-block; font-family:var(--od-display); font-weight:600; font-size:.72rem; letter-spacing:.16em; text-transform:uppercase; color:var(--olive-dark); margin-bottom:12px; }
.od-feature h3{ font-family:var(--od-display); font-weight:600; font-size:clamp(1.4rem, 1.1rem + 1vw, 1.8rem); line-height:1.15; letter-spacing:-.02em; margin:0 0 12px; }
.od-feature p{ margin:0 0 22px; font-size:1rem; color:#2D4656; }
.od-main .od-feature .od-btn:focus-visible{ outline:3px solid var(--charcoal-blue); outline-offset:4px; border-radius:999px; }
.od-orgs{ display:grid; grid-template-columns:repeat(2, minmax(0, 1fr)); gap:0 32px; }
.od-orgs li{ border-top:1px solid rgba(255,255,244,.16); }
.od-orgs a{ display:block; padding:16px 0 18px; text-decoration:none; color:var(--off-white); }
.od-orgs b{ display:flex; align-items:baseline; justify-content:space-between; gap:12px; font-family:var(--od-display); font-weight:600; font-size:1.02rem; }
.od-orgs i{ font-style:normal; font-family:var(--od-body); font-weight:600; font-size:.72rem; letter-spacing:.1em; text-transform:uppercase; color:var(--green-tea); white-space:nowrap; }
.od-orgs span{ display:block; margin-top:4px; font-size:.92rem; line-height:1.5; color:#C7D1D8; }
.od-orgs-all{ grid-column:1 / -1; }
.od-orgs-all b{ color:var(--light-gold); }
.od-orgs a:hover b{ text-decoration:underline; text-underline-offset:4px; text-decoration-thickness:1px; }
.od-talk-notes{ position:relative; display:grid; grid-template-columns:repeat(3, minmax(0, 1fr)); gap:20px 40px; margin-top:clamp(40px, 5vw, 64px); padding-top:28px; border-top:1px solid rgba(255,255,244,.16); }
.od-talk-notes p{ font-size:.93rem; line-height:1.6; color:#C7D1D8; }
.od-talk-notes strong{ display:block; color:var(--off-white); font-family:var(--od-display); font-weight:600; font-size:.98rem; margin-bottom:4px; }
.od-talk-notes a{ color:var(--light-gold); font-weight:600; text-underline-offset:3px; }


/* ---------- 8. The other doors strip ----------
   Each <li data-od-door="..."> sets its own tint. The link carries
   data-od-door-link, so it opens with the same door animation. */
.od-others-list{ display:grid; grid-template-columns:repeat(4, minmax(0, 1fr)); gap:clamp(12px, 1.6vw, 20px); }
.od-other{
  display:grid; grid-template-columns:44px 1fr; gap:4px 16px; align-items:start; height:100%;
  padding:18px 20px; border-radius:16px; text-decoration:none; color:var(--od-ink);
  background:var(--od-paper); box-shadow:inset 0 0 0 1px var(--od-line); transition:box-shadow .3s ease, transform .3s ease;
}
.od-other-arch{
  grid-row:1 / span 3; position:relative; width:44px; height:58px; border-radius:999px 999px 4px 4px; overflow:hidden;
  background:linear-gradient(180deg, var(--od-glow-strong), var(--od-wash)); box-shadow:inset 0 0 0 1.5px rgba(35,61,77,.24);
}
.od-other-arch::after{ /* the leaf, ajar */
  content:""; position:absolute; inset:3px; border-radius:999px 999px 0 0; background:var(--od-tint);
  transform-origin:0 50%; transform:perspective(200px) rotateY(14deg); transition:transform .5s cubic-bezier(.2,.7,.2,1);
  box-shadow:inset 0 0 0 1px rgba(35,61,77,.08);
}
.od-other-num{ font-family:var(--od-display); font-weight:600; font-size:.7rem; letter-spacing:.16em; text-transform:uppercase; color:var(--od-ink-soft); }
.od-other b{ font-family:var(--od-display); font-weight:600; font-size:1.04rem; line-height:1.25; }
.od-other-desc{ font-size:.9rem; line-height:1.5; color:var(--od-ink-soft); }
.od-other:hover{ box-shadow:inset 0 0 0 1px rgba(35,61,77,.3), 0 14px 30px -18px rgba(35,61,77,.4); transform:translateY(-2px); }
.od-other:hover .od-other-arch::after, .od-other:focus-visible .od-other-arch::after{ transform:perspective(200px) rotateY(38deg); }
.od-other:hover b{ text-decoration:underline; text-underline-offset:4px; text-decoration-thickness:1px; }
.od-others-home{ margin-top:22px !important; font-size:.95rem; }
.od-others-home a{ font-weight:700; text-underline-offset:3px; }


/* ---------- 9. Network cards and guide chips ---------- */
.od-room-list{ display:grid; grid-template-columns:repeat(5, minmax(0, 1fr)); gap:clamp(12px, 1.6vw, 20px); }
.od-room-list--4{ grid-template-columns:repeat(4, minmax(0, 1fr)); }
.od-room{
  display:flex; flex-direction:column; height:100%; padding:22px 20px 20px; border-radius:14px; text-decoration:none; color:var(--od-ink);
  background:#FFFFFB; box-shadow:inset 0 0 0 1px var(--od-line); transition:box-shadow .3s ease, transform .3s ease;
}
.od-room-win{ width:26px; height:34px; border-radius:999px 999px 3px 3px; margin-bottom:18px; background:var(--od-room-tint, var(--green-tea)); box-shadow:inset 0 0 0 1px rgba(35,61,77,.22); position:relative; overflow:hidden; flex:none; }
.od-room-win::after{ content:""; position:absolute; left:0; right:0; bottom:0; height:40%; background:linear-gradient(0deg, rgba(252,202,70,.75), rgba(252,202,70,0)); opacity:0; transition:opacity .4s ease; }
.od-room b{ font-family:var(--od-display); font-weight:600; font-size:1.04rem; line-height:1.25; }
.od-room span{ display:block; margin-top:6px; font-size:.9rem; line-height:1.5; color:var(--od-ink-soft); }
.od-room small{ display:block; margin-top:auto; padding-top:14px; font-size:.78rem; color:var(--od-muted); overflow-wrap:anywhere; }
.od-room:hover{ box-shadow:inset 0 0 0 1px rgba(35,61,77,.3), 0 14px 30px -18px rgba(35,61,77,.4); transform:translateY(-2px); }
.od-room:hover .od-room-win::after, .od-room:focus-visible .od-room-win::after{ opacity:1; }
.od-room--gold{ --od-room-tint:#F1E2A9; }
.od-room--sage{ --od-room-tint:#D6DDCF; }
.od-room--olive{ --od-room-tint:#DCE0C4; }
.od-room--slate{ --od-room-tint:#D7DCE1; }
.od-room--linen{ --od-room-tint:#DDE0DF; }

.od-guide{ margin-top:clamp(40px, 5vw, 60px); display:grid; grid-template-columns:auto 1fr; gap:14px 32px; align-items:baseline; padding-top:26px; border-top:1px solid var(--od-line); }
.od-guide h3{ font-family:var(--od-display); font-weight:600; font-size:1rem; }
.od-chips{ display:flex; flex-wrap:wrap; gap:10px; }
.od-chips a{ display:inline-flex; align-items:center; min-height:40px; padding:8px 15px; border-radius:999px; font-size:.9rem; font-weight:600; text-decoration:none; color:var(--od-ink); background:rgba(201,210,192,.45); transition:background-color .25s ease; }
.od-chips a:hover{ background:var(--green-tea); }


/* ---------- 10. Privacy line, closing note ---------- */
/* Panel form (door pages) and inline form (.od-privacy--inline, home threshold).
   The words are the owner's promise of 1 Nov 2026: see the HTML. */
.od-privacy{ display:flex; gap:16px; align-items:flex-start; padding:22px; border-radius:20px; background:var(--od-paper); border:1px solid var(--od-line); }
.od-privacy svg{ width:28px; height:28px; flex:none; color:var(--olive-dark); }
.od-privacy p{ font-size:.97rem; max-width:62em; color:var(--od-ink-soft); }
.od-privacy strong{ display:block; font-family:var(--od-display); font-weight:600; font-size:1.06rem; color:var(--od-ink); margin-bottom:4px; }
.od-privacy--inline{ justify-content:center; padding:0; background:none; border:0; border-radius:0; }
.od-privacy--inline svg{ width:20px; height:20px; margin-top:3px; }
.od-privacy--inline p{ max-width:68ch; text-align:left; }
.od-privacy--inline strong{ display:inline; font-family:var(--od-body); font-weight:700; font-size:inherit; margin:0; }
.od-privacy-wrap{ padding-top:0; padding-bottom:clamp(56px, 7vw, 88px); }

.od-close{ text-align:center; padding:0 0 clamp(72px, 9vw, 120px); }
.od-close-arch{ display:block; width:64px; height:auto; margin:0 auto 20px; }
.od-close p{ margin:0 auto; max-width:46ch; color:var(--od-ink-soft); }
.od-close .od-close-line{ font-family:var(--od-display); font-weight:600; font-size:clamp(1.3rem, 1rem + 1vw, 1.7rem); letter-spacing:-.02em; color:var(--od-ink); margin-bottom:10px; }


/* ---------- 11. The opening-door overlay (built by od-door.js) ----------
   .od-portal          fixed layer over everything; takes the second tap
     .od-portal-frame  the arch, grown from the tapped card to the screen
       .od-portal-glow   the light behind the leaves
       .od-portal-leaf   two leaves, hinged at the frame's outer edges
     .od-portal-flood  the light that fills the screen at the end
   Only transform and opacity are animated. */
.od-portal{ position:fixed; inset:0; z-index:2147483000; overflow:hidden; pointer-events:auto; cursor:pointer; -webkit-tap-highlight-color:transparent; contain:strict; }
.od-portal-frame{
  position:absolute; left:0; top:0; overflow:hidden; transform-origin:0 0;
  will-change:transform; backface-visibility:hidden;
  box-shadow:0 0 0 2px rgba(35,61,77,.12);
}
.od-portal-glow{ position:absolute; inset:0; background:var(--od-flood); transform-origin:50% 60%; will-change:transform; }
.od-portal-leaf{
  position:absolute; top:0; bottom:0; width:50.2%; will-change:transform; backface-visibility:hidden;
  background:linear-gradient(180deg, rgba(255,255,255,.42) 0%, rgba(255,255,255,0) 40%), var(--od-tint);
}
.od-portal-leaf--l{ left:0; transform-origin:0 50%; box-shadow:inset -1px 0 0 rgba(35,61,77,.16); }
.od-portal-leaf--r{ right:0; transform-origin:100% 50%; box-shadow:inset 1px 0 0 rgba(35,61,77,.16); }
.od-portal-leaf::after{ /* a knob on each leaf, by the seam */
  content:""; position:absolute; top:56%; width:10px; height:10px; border-radius:50%;
  background:radial-gradient(circle at 35% 35%, #fff 0%, var(--light-gold) 35%, var(--olive-dark) 100%);
}
.od-portal-leaf--l::after{ right:12px; }
.od-portal-leaf--r::after{ left:12px; }
.od-portal-flood{ position:absolute; inset:-12vh 0; background:var(--od-flood); opacity:0; will-change:opacity; }

/* The arrival cover: od-door.js adds .od-arriving to <html> before the page
   paints, when the reader came through a door. The cover is the same light
   the overlay ended on; it fades away by itself (CSS only), so it can never
   get stuck even if a script fails. */
html.od-arriving::after{
  content:""; position:fixed; inset:-12vh 0; z-index:2147483000; pointer-events:none;
  background:var(--od-flood);
  animation:od-uncover .75s cubic-bezier(.3,0,.2,1) .12s both;
}
@keyframes od-uncover{ from{ opacity:1; } to{ opacity:0; visibility:hidden; } }


/* ---------- 12. Responsive ---------- */
@media (max-width:1180px){
  .od-room-list{ grid-template-columns:repeat(3, minmax(0, 1fr)); }
  .od-others-list{ grid-template-columns:repeat(2, minmax(0, 1fr)); }
}
@media (max-width:1080px){
  /* three doors, then two centred under them. A six-column grid with subgrid rows
     keeps every door in a row the same height, so the steps and link lists line up. */
  .od-doors{ grid-template-columns:repeat(6, minmax(0, 1fr)); grid-template-rows:repeat(4, auto); }
  .od-door{ grid-column:span 2; }
  .od-door:nth-child(1){ grid-area:1 / 1 / span 2 / span 2; }
  .od-door:nth-child(2){ grid-area:1 / 3 / span 2 / span 2; }
  .od-door:nth-child(3){ grid-area:1 / 5 / span 2 / span 2; }
  .od-door:nth-child(4){ grid-area:3 / 2 / span 2 / span 2; margin-top:clamp(20px, 3vw, 36px); }
  .od-door:nth-child(5){ grid-area:3 / 4 / span 2 / span 2; margin-top:clamp(20px, 3vw, 36px); }
  .od-door-links{ align-self:stretch; }
  .od-inside-grid, .od-talk-grid{ grid-template-columns:1fr; }
  .od-talk-notes{ grid-template-columns:1fr 1fr; }
}
@media (max-width:720px){
  .od-hall{ background:var(--off-white); }
  .od-doors{ display:grid; grid-template-columns:1fr; grid-template-rows:none; gap:22px; margin-top:40px; }
  .od-door, .od-door:nth-child(n){ grid-area:auto; margin-top:0; } /* :nth-child(n) outranks the tablet placement rules */
  .od-door{ display:flex; flex-direction:column; flex:none; background:#F6F1DA; border-radius:22px 22px 16px 16px; padding:0 0 6px; }
  .od-door-way{ --ajar:5deg; border-radius:200px 200px 6px 6px / 70px 70px 6px 6px; padding:7px 7px 0; }
  .od-door-light{ inset:7px 7px 0; border-radius:200px 200px 0 0 / 66px 66px 0 0; }
  .od-door-leaf{ min-height:0; padding:12px 44px 20px 20px; border-radius:200px 200px 0 0 / 66px 66px 0 0; }
  .od-door-way:hover, .od-door-way:focus-visible{ --ajar:14deg; }
  .od-main .od-door-way:focus-visible{ border-radius:200px 200px 8px 8px / 70px 70px 8px 8px; }
  .od-fan{ width:96px; margin:2px auto 14px; }
  .od-door-leaf::after{ top:auto; bottom:30px; }
  .od-door-way::after{ height:34px; left:0; right:0; }
  .od-door-links{ margin:16px 0 0; padding:0 18px 10px; display:flex; flex-wrap:wrap; gap:4px 18px; }
  .od-door-links li + li{ margin-top:0; }
  .od-door-links a{ padding:4px 0; }
  .od-steps, .od-qs, .od-orgs, .od-talk-notes{ grid-template-columns:1fr; }
  .od-qs li:nth-last-child(2){ border-bottom:0; }
  .od-room-list, .od-room-list--4{ grid-template-columns:1fr 1fr; }
  .od-others-list{ grid-template-columns:1fr; }
  .od-guide{ grid-template-columns:1fr; }
  .od-feature{ border-radius:120px 120px 14px 14px; }
  .od-talk::before{ display:none; }
}
@media (max-width:420px){
  .od-room-list, .od-room-list--4{ grid-template-columns:1fr; }
  .od-room{ display:grid; grid-template-columns:26px 1fr; gap:2px 16px; padding:16px 18px; }
  .od-room-win{ grid-row:1 / span 3; margin:2px 0 0; }
  .od-room small{ padding-top:6px; }
  .od-crisis .od-wrap{ justify-content:flex-start; }
  .od-privacy--inline{ justify-content:flex-start; }
}


/* ---------- 13. Reduced motion ---------- */
@media (prefers-reduced-motion:no-preference){ html{ scroll-behavior:smooth; } }
@media (prefers-reduced-motion:reduce){
  .od-main *, .od-main *::before, .od-main *::after{ transition:none !important; animation:none !important; }
  .od-door-way:hover, .od-door-way:focus-visible{ --ajar:9deg; }
  .od-room:hover, .od-other:hover, .od-btn:hover{ transform:none; }
  .od-walker{ display:none; }
  .od-portal{ display:none; }
  html.od-arriving::after{ display:none; }
}
@media (prefers-reduced-motion:reduce) and (max-width:720px){
  .od-door-way:hover, .od-door-way:focus-visible{ --ajar:5deg; }
}