/* ============================================================
   RELATED GUIDES — "the departures board"  (ALL pages)
   Added 2026-09-13. Enqueued sitewide from inc/asset-map.php.

   WHY THIS FILE EXISTS. The 13 Sep internal-link run appended a
   `related-guides` nav to 13 pages with NO theme classes:
     - 8 Elementor pages: a bare top-level e-con (html_tag nav)
       carrying inline Elementor bg #EFEAE1, hairline borders and
       padding 48/40. elementor-bridge.css zeroes
       --padding-block-start / --padding-inline-start on every
       .elementor .e-con (0,2,0), which outranks the per-element
       --padding-top/--padding-left Elementor feeds them through
       .e-con (0,1,0). MEASURED on post 387: computed padding 0px,
       heading and links flush at x=0 under the 29px fixed sig rail.
     - 5 classic pages (1569 1570 1572 1576 1590): a plain
       <nav id="related-guides"> appended to post_content.
   Both shapes carry data-id="related-guides" + aria-label, so one
   component styles all 13. No markup or text is changed.

   SPECIFICITY. Elementor's own inline-settings rules are (0,4,0)
   (.elementor-NNN .elementor-element.elementor-element-related-
   guides:not(...)). The E selector below is (0,5,3); no !important.

   New visible strings are CSS-generated and hidden from the
   accessibility tree with the `content: x / ""` alt syntax.
   Browsers without it drop the declaration and fall back to "".
   ============================================================ */

html body nav[data-id="related-guides"][aria-label="Related guides"],
html body nav.e-con.elementor-element.elementor-element-related-guides[data-id="related-guides"]{
  --rg-pad-x: max(var(--outer, 24px), calc((100% - var(--shell, 1440px)) / 2 + var(--outer, 24px)));
  position: relative;
  isolation: isolate;
  overflow: hidden;
  display: grid;
  grid-template-columns: minmax(240px, 4fr) minmax(0, 8fr);
  align-items: start;
  gap: clamp(32px, 4vw, 56px) clamp(32px, 5vw, 88px);
  margin: 0;
  padding: clamp(64px, 7.5vw, 112px) var(--rg-pad-x);
  background: var(--navy, #14233F);
  border: 0;
  border-top: 1px solid rgba(239,234,225,.12);
  counter-reset: rg;
  color: #fff;
  text-align: left;
}

/* ghost watermark */
html body nav[data-id="related-guides"][aria-label="Related guides"]::after{
  content: "";
  content: "Routes" / "";
  position: absolute;
  left: calc(var(--rg-pad-x) - .04em);
  bottom: -.14em;
  z-index: -1;
  font-family: var(--font-display);
  font-size: clamp(110px, 15vw, 240px);
  line-height: .8;
  letter-spacing: -.02em;
  text-transform: uppercase;
  white-space: nowrap;
  color: rgba(239,234,225,.045);
  pointer-events: none;
}

/* ---------- heading column ---------- */
html body nav[data-id="related-guides"][aria-label="Related guides"] h2{
  margin: 0;
  padding: 0;
  font-family: var(--font-display);
  font-size: clamp(42px, 4.6vw, 72px);
  font-weight: 400;
  line-height: .92;
  letter-spacing: -.01em;
  text-transform: uppercase;
  color: #fff;
}
/* eyebrow — names the job, not the topic (Ruling 18) */
html body nav[data-id="related-guides"][aria-label="Related guides"] h2::before{
  content: "";
  content: "Next routes" / "";
  display: block;
  margin-bottom: 22px;
  padding-left: 44px;
  /* the .eyebrow--orange 30x2 bar. A gradient on a PSEUDO is safe from
     Elementor's lazy-background `*` rule, which cannot match ::before. */
  background: linear-gradient(var(--orange, #E07A2F), var(--orange, #E07A2F)) no-repeat 0 50% / 30px 2px;
  font-family: var(--font-body);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: .16em;
  line-height: 1;
  text-transform: uppercase;
  color: rgba(239,234,225,.78);
}

/* ---------- the board ---------- */
html body nav[data-id="related-guides"][aria-label="Related guides"] ul{
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 250px), 1fr));
  gap: 14px;
  margin: 0;
  padding: 0;
  list-style: none;
}
html body nav[data-id="related-guides"][aria-label="Related guides"] li{
  position: relative;
  margin: 0;
  padding: 0;
  counter-increment: rg;
}
html body nav[data-id="related-guides"][aria-label="Related guides"] li::before{ content: none; }

html body nav[data-id="related-guides"][aria-label="Related guides"] a{
  display: flex;
  flex-direction: column;
  height: 100%;
  min-height: 200px;
  box-sizing: border-box;
  padding: 20px 22px 22px;
  border: 1px solid rgba(239,234,225,.16);
  border-radius: 3px;
  background: rgba(11,23,41,.62);
  box-shadow: inset 0 0 0 0 var(--orange, #E07A2F);
  font-family: var(--font-display);
  font-size: clamp(22px, 1.85vw, 29px);
  font-weight: 400;
  line-height: 1.02;
  letter-spacing: -.005em;
  text-transform: uppercase;
  text-decoration: none;
  color: #fff;
  transition: transform 420ms var(--ease-enter, cubic-bezier(.22,1,.36,1)),
              border-color 240ms ease, background-color 240ms ease, box-shadow 300ms ease;
}
/* route number */
html body nav[data-id="related-guides"][aria-label="Related guides"] a::before{
  content: "";
  content: "Route " counter(rg, decimal-leading-zero) / "";
  display: block;
  margin-bottom: 30px;
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .16em;
  line-height: 1;
  color: var(--orange-soft, #F2B183);
}
/* destination path */
html body nav[data-id="related-guides"][aria-label="Related guides"] a::after{
  content: "";
  content: attr(href) / "";
  display: block;
  margin-top: auto;
  padding-top: 26px;
  padding-right: 48px;
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .06em;
  line-height: 1.4;
  text-transform: none;
  overflow-wrap: anywhere;
  color: var(--green-bright, #3FBF84);
}
/* arrow key */
html body nav[data-id="related-guides"][aria-label="Related guides"] li::after{
  content: "\2192";
  content: "\2192" / "";
  position: absolute;
  right: 18px;
  bottom: 18px;
  display: grid;
  place-items: center;
  width: 36px;
  height: 36px;
  border: 1px solid rgba(239,234,225,.28);
  border-radius: 3px;
  font-family: var(--font-body);
  font-size: 17px;
  line-height: 1;
  color: #fff;
  pointer-events: none;
  transition: transform 420ms var(--ease-punch, cubic-bezier(.34,1.56,.64,1)),
              background-color 240ms ease, border-color 240ms ease, color 240ms ease;
}

html body nav[data-id="related-guides"][aria-label="Related guides"] a:hover,
html body nav[data-id="related-guides"][aria-label="Related guides"] a:focus-visible{
  transform: translateY(-4px);
  border-color: var(--orange, #E07A2F);
  background: rgba(224,122,47,.1);
  box-shadow: inset 0 3px 0 0 var(--orange, #E07A2F), 0 24px 40px -28px rgba(0,0,0,.7);
  color: #fff;
}
html body nav[data-id="related-guides"][aria-label="Related guides"] a:focus-visible{
  outline: 3px solid var(--orange-soft, #F2B183);
  outline-offset: 3px;
}
html body nav[data-id="related-guides"][aria-label="Related guides"] li:hover::after,
html body nav[data-id="related-guides"][aria-label="Related guides"] li:focus-within::after{
  transform: translate(4px, -4px);
  background: var(--orange, #E07A2F);
  border-color: var(--orange, #E07A2F);
  color: var(--navy-deep, #0B1729);
}

/* ---------- entrance: scroll-driven, progressive ----------
   Only where the browser supports view timelines AND the reader
   has not asked for reduced motion. Everywhere else: static and
   fully visible. No JS, so nothing can strand a tile hidden. */
@supports (animation-timeline: view()){
  @media (prefers-reduced-motion: no-preference){
    html body nav[data-id="related-guides"][aria-label="Related guides"] li{
      animation: rg-rise linear both;
      animation-timeline: view();
      animation-range: entry 10% entry 85%;
    }
    html body nav[data-id="related-guides"][aria-label="Related guides"] li:nth-child(2){ animation-range: entry 16% entry 91%; }
    html body nav[data-id="related-guides"][aria-label="Related guides"] li:nth-child(3){ animation-range: entry 22% entry 97%; }
    html body nav[data-id="related-guides"][aria-label="Related guides"] li:nth-child(4){ animation-range: entry 28% cover 50%; }
    html body nav[data-id="related-guides"][aria-label="Related guides"]::after{
      animation: rg-drift linear both;
      animation-timeline: view();
    }
  }
}
@keyframes rg-rise{
  from{ opacity: 0; transform: translate3d(0, 36px, 0); }
  to  { opacity: 1; transform: none; }
}
@keyframes rg-drift{
  from{ transform: translate3d(9%, 0, 0); }
  to  { transform: translate3d(-3%, 0, 0); }
}
@media (prefers-reduced-motion: reduce){
  html body nav[data-id="related-guides"][aria-label="Related guides"] a,
  html body nav[data-id="related-guides"][aria-label="Related guides"] li::after{ transition: none; }
}

/* ---------- classic pages: the nav sits inside .page-content ---------- */
html body nav[data-id="related-guides"][aria-label="Related guides"]:not(.e-con){
  --rg-pad-x: clamp(24px, 4vw, 56px);
  grid-template-columns: 1fr;
  margin: clamp(48px, 6vw, 80px) 0 0;
  padding-block: clamp(44px, 5vw, 72px);
  border-radius: 6px;
}

/* ---------- narrow ---------- */
@media (max-width: 1024px){
  html body nav[data-id="related-guides"][aria-label="Related guides"],
  html body nav.e-con.elementor-element.elementor-element-related-guides[data-id="related-guides"]{
    grid-template-columns: 1fr;
  }
}
@media (max-width: 767px){
  html body nav[data-id="related-guides"][aria-label="Related guides"],
  html body nav.e-con.elementor-element.elementor-element-related-guides[data-id="related-guides"]{
    --rg-pad-x: 20px;
    padding-block: 56px 64px;
  }
  html body nav[data-id="related-guides"][aria-label="Related guides"] ul{ grid-template-columns: 1fr; gap: 10px; }
  html body nav[data-id="related-guides"][aria-label="Related guides"] a{ min-height: 0; padding: 18px 18px 20px; font-size: 23px; }
  html body nav[data-id="related-guides"][aria-label="Related guides"] a::before{ margin-bottom: 18px; }
  html body nav[data-id="related-guides"][aria-label="Related guides"] a::after{ padding-top: 18px; }
  html body nav[data-id="related-guides"][aria-label="Related guides"] li::after{ right: 14px; bottom: 14px; }
}

/* ---------- honour Elementor's Advanced > Responsive > Hide switches ----------
   Added 2026-09-15. The board's display:grid above is (0,5,3) and outranks
   Elementor's .elementor-hidden-{device}{display:none}, so switching the section
   off in the editor did nothing on the front end (post 13). Ranges mirror this
   site's active Elementor breakpoints: mobile 480, tablet 768, tablet_extra 900,
   laptop 1024, widescreen 1440. To show the section again, turn the Hide switches
   off in Elementor; no CSS change needed. Scoped off the Elementor editor\n   (body.elementor-editor-active) so the section stays visible and editable there. */
@media (max-width: 480px){ html body:not(.elementor-editor-active) nav[data-id="related-guides"][aria-label="Related guides"].elementor-hidden-mobile{ display: none !important; } }
@media (min-width: 481px) and (max-width: 768px){ html body:not(.elementor-editor-active) nav[data-id="related-guides"][aria-label="Related guides"].elementor-hidden-tablet{ display: none !important; } }
@media (min-width: 769px) and (max-width: 900px){ html body:not(.elementor-editor-active) nav[data-id="related-guides"][aria-label="Related guides"].elementor-hidden-tablet_extra{ display: none !important; } }
@media (min-width: 901px) and (max-width: 1024px){ html body:not(.elementor-editor-active) nav[data-id="related-guides"][aria-label="Related guides"].elementor-hidden-laptop{ display: none !important; } }
@media (min-width: 1025px) and (max-width: 1439px){ html body:not(.elementor-editor-active) nav[data-id="related-guides"][aria-label="Related guides"].elementor-hidden-desktop{ display: none !important; } }
@media (min-width: 1440px){ html body:not(.elementor-editor-active) nav[data-id="related-guides"][aria-label="Related guides"].elementor-hidden-widescreen{ display: none !important; } }

/* ==========================================================================
   HOME-CASE-FILE (2026-09-20)  homepage ONLY (body.home.page-id-10).
   The single collapsed Read-more row under The Verdict (c361) was an unstyled
   65px hairline row. Now a compact navy "case file" cabinet on the Verdict
   board's exact geometry (var(--bd-w), shifted sig-w/2; measured 84/1445 =
   board 84/1445). Ported from post 900 RM2 "Sealed Files". + gate kept.
   Markup untouched. Rollback: related-guides.css.bak-pre-homecasefile-2026-09-20
   ========================================================================== */
html body.home.page-id-10 details.oig-more[data-oig-more="related-guides"]{ --rm-ink:#FBF8F3; --rm-line:rgba(251,248,243,.09); --rm-acc:#E07A2F; --rm-deep:#0B1729; --rm-pad:clamp(18px,3vw,44px);
 position:relative; box-sizing:border-box; width:var(--bd-w,calc(100% - 136px)); max-width:none; margin:0 auto clamp(44px,5vw,80px); padding:52px 0 12px; border:0; border-radius:16px; overflow:hidden;
 background-color:var(--rm-deep); background-image:radial-gradient(60% 140% at 100% 0%,rgba(224,122,47,.14),rgba(224,122,47,0) 60%),linear-gradient(rgba(251,248,243,.035) 1px,transparent 1px),linear-gradient(90deg,rgba(251,248,243,.035) 1px,transparent 1px); background-size:auto,34px 34px,34px 34px;
 box-shadow:inset 0 0 0 1px var(--rm-line), inset 0 2px 0 rgba(224,122,47,.8), 0 44px 80px -40px rgba(11,23,41,.55); color:var(--rm-ink); }
@media (min-width:900px){ html body.home.page-id-10 details.oig-more[data-oig-more="related-guides"]{ transform:translateX(calc(var(--sig-w, 32px) / 2)); } }
html body.home.page-id-10 details.oig-more[data-oig-more="related-guides"]::before{ content:"THE CASE FILE" / ""; position:absolute; top:20px; left:var(--rm-pad); padding-left:42px; font:600 12px/1 ui-monospace,"SF Mono",Menlo,Consolas,monospace; letter-spacing:.24em; color:var(--rm-acc); }
html body.home.page-id-10 details.oig-more[data-oig-more="related-guides"]::after{ content:""; position:absolute; top:25px; left:var(--rm-pad); width:30px; height:2px; background:var(--rm-acc); }
html body.home.page-id-10 details.oig-more[data-oig-more="related-guides"] > .oig-more__sum{ position:relative; display:grid; grid-template-columns:auto minmax(0,1fr); align-items:center; column-gap:clamp(16px,2.2vw,32px); width:auto; margin:0; min-height:70px; overflow:hidden;
 padding:clamp(12px,1.3vw,18px) calc(var(--rm-pad) + 130px) clamp(12px,1.3vw,18px) calc(var(--rm-pad) + 18px); border:0; color:var(--rm-ink); background:transparent; transition:background-color .25s ease; list-style:none; cursor:pointer; }
html body.home.page-id-10 details.oig-more[data-oig-more="related-guides"] > .oig-more__sum::-webkit-details-marker{ display:none; }
html body.home.page-id-10 details.oig-more[data-oig-more="related-guides"] > .oig-more__sum::before{ content:""; position:absolute; left:var(--rm-pad); top:16px; bottom:16px; width:7px; border-radius:2px; background:repeating-linear-gradient(135deg,var(--rm-acc) 0 5px,transparent 5px 10px); opacity:.45; transition:opacity .25s ease; }
html body.home.page-id-10 details.oig-more[data-oig-more="related-guides"] > .oig-more__sum::after{ content:""; position:absolute; left:0; right:0; bottom:0; height:2px; background:linear-gradient(90deg,var(--rm-acc),rgba(224,122,47,0)); transform:scaleX(0); transform-origin:left center; transition:transform .45s cubic-bezier(.22,1,.36,1); }
html body.home.page-id-10 details.oig-more[data-oig-more="related-guides"] > .oig-more__sum:hover{ background-color:rgba(251,248,243,.035); }
html body.home.page-id-10 details.oig-more[data-oig-more="related-guides"] > .oig-more__sum:hover::before, html body.home.page-id-10 details.oig-more[data-oig-more="related-guides"][open] > .oig-more__sum::before{ opacity:1; }
html body.home.page-id-10 details.oig-more[data-oig-more="related-guides"] > .oig-more__sum:hover::after, html body.home.page-id-10 details.oig-more[data-oig-more="related-guides"][open] > .oig-more__sum::after{ transform:scaleX(1); }
html body.home.page-id-10 details.oig-more[data-oig-more="related-guides"] .oig-more__k{ grid-column:1; font:600 11px/1 ui-monospace,"SF Mono",Menlo,Consolas,monospace; letter-spacing:.2em; text-transform:uppercase; color:var(--rm-acc); padding:8px 11px; border:1px solid rgba(224,122,47,.55); border-radius:999px; white-space:nowrap; transition:background-color .25s ease,color .25s ease; }
html body.home.page-id-10 details.oig-more[data-oig-more="related-guides"][open] .oig-more__k{ background:var(--rm-acc); color:var(--rm-deep); }
html body.home.page-id-10 details.oig-more[data-oig-more="related-guides"] .oig-more__t{ grid-column:2; font-family:"Anton","Arial Narrow",Impact,sans-serif; font-weight:400; font-size:clamp(20px,1.8vw,28px); line-height:1.02; letter-spacing:.01em; text-transform:uppercase; color:var(--rm-ink); transition:transform .35s cubic-bezier(.22,1,.36,1); }
html body.home.page-id-10 details.oig-more[data-oig-more="related-guides"] .oig-more__sum:hover .oig-more__t{ transform:translateX(8px); }
html body.home.page-id-10 details.oig-more[data-oig-more="related-guides"] .oig-more__sum > .oig-more__t::after{ content:"FILE 01" / ""; position:absolute; top:50%; right:calc(var(--rm-pad) + 64px); transform:translateY(-50%); font:600 11px/1 ui-monospace,"SF Mono",Menlo,Consolas,monospace; letter-spacing:.2em; color:rgba(251,248,243,.55); padding:8px 0 8px 14px; border-left:1px solid rgba(251,248,243,.14); }
html body.home.page-id-10 details.oig-more[data-oig-more="related-guides"][open] .oig-more__sum > .oig-more__t::after{ color:var(--rm-acc); border-left-color:rgba(224,122,47,.5); }
html body.home.page-id-10 details.oig-more[data-oig-more="related-guides"] .oig-more__i{ position:absolute; right:var(--rm-pad); top:50%; margin-top:-22px; width:44px; height:44px; border-radius:12px; border:1.5px solid rgba(251,248,243,.3); color:var(--rm-ink); transition:background-color .25s ease,border-color .25s ease,color .25s ease,transform .35s cubic-bezier(.34,1.56,.64,1); }
html body.home.page-id-10 details.oig-more[data-oig-more="related-guides"] .oig-more__i::before, html body.home.page-id-10 details.oig-more[data-oig-more="related-guides"] .oig-more__i::after{ width:18px; height:2px; background:currentColor; }
html body.home.page-id-10 details.oig-more[data-oig-more="related-guides"] .oig-more__sum:hover .oig-more__i{ border-color:var(--rm-acc); background:rgba(224,122,47,.14); }
html body.home.page-id-10 details.oig-more[data-oig-more="related-guides"][open] .oig-more__i{ background:var(--rm-acc); border-color:var(--rm-acc); color:var(--rm-deep); transform:rotate(45deg); }
html body.home.page-id-10 details.oig-more[data-oig-more="related-guides"][open] .oig-more__i::after{ transform:translate(-50%,-50%) rotate(90deg); }
html body.home.page-id-10 details.oig-more[data-oig-more="related-guides"] .oig-more__sum:focus-visible{ outline:2px solid var(--rm-acc); outline-offset:-4px; }
html body.home.page-id-10 details.oig-more[data-oig-more="related-guides"][open] > .oig-more__sum{ border-bottom:1px dashed rgba(224,122,47,.55); }
html body.home.page-id-10 details.oig-more[data-oig-more="related-guides"] > .oig-more__body{ padding:clamp(12px,1.4vw,20px); box-sizing:border-box; }
html body.home.page-id-10 details.oig-more[data-oig-more="related-guides"] > .oig-more__body > .e-con{ border-radius:12px; overflow:hidden; margin:0 !important; }
html body.home.page-id-10 details.oig-more[data-oig-more="related-guides"][open] > .oig-more__body{ animation:hp-rm-in .5s cubic-bezier(.22,1,.36,1) both; }
@keyframes hp-rm-in{ from{opacity:0;transform:translateY(-10px)} to{opacity:1;transform:none} }
@media (max-width:899px){ html body.home.page-id-10 details.oig-more[data-oig-more="related-guides"]{ width:auto; margin-left:16px; margin-right:16px; transform:none; }
 html body.home.page-id-10 details.oig-more[data-oig-more="related-guides"] > .oig-more__sum{ grid-template-columns:minmax(0,1fr); row-gap:10px; min-height:0; padding-right:calc(var(--rm-pad) + 60px); }
 html body.home.page-id-10 details.oig-more[data-oig-more="related-guides"] .oig-more__k{ justify-self:start; } html body.home.page-id-10 details.oig-more[data-oig-more="related-guides"] .oig-more__t{ grid-column:1; font-size:20px; }
 html body.home.page-id-10 details.oig-more[data-oig-more="related-guides"] .oig-more__sum > .oig-more__t::after{ display:none; } html body.home.page-id-10 details.oig-more[data-oig-more="related-guides"] .oig-more__i{ width:40px; height:40px; margin-top:-20px; border-radius:10px; } }
@media (prefers-reduced-motion:reduce){ html body.home.page-id-10 details.oig-more[data-oig-more="related-guides"] *, html body.home.page-id-10 details.oig-more[data-oig-more="related-guides"] *::before, html body.home.page-id-10 details.oig-more[data-oig-more="related-guides"] *::after{ transition:none !important; animation:none !important; } }

/* ==========================================================================
   NDE-INK FIX - opened read-more rows re-ink for their own band - 2026-09-23
   Founder: "whats going on here.. i cant read any of this" (Why This Matters).
   MEASURED at 1600 logged out: .nde-why heading 58px and its 18px body painted
   #FBF8F3 on band-mist #DDE7E4 = 1.19:1 - invisible.
   MECHANISM: the read-more row sets color:var(--rm-ink) (#FBF8F3, chosen for
   the dark summary row) on the <details>, so it INHERITS into
   .oig-more__body, where every light-band section inside renders cream.
   FIX: set the page ink on light-band sections inside an opened row and let
   inheritance do the rest - elements that carry their own colour (the green
   +33 pts figure, the .72-alpha captions, link inks) are untouched.
   ========================================================================== */
html body details.oig-more > .oig-more__body > .sec:is(.band-canvas, .band-mist, .band-stone) {
  color: var(--navy, #14233F);
}