/* Shared section navigation (subnav + pager), reference identity (teal/Instrument).
   Self-contained colours so it renders correctly on every page regardless of the
   page-specific stylesheet. */

/* ---- sticky sub-navigation (below the 74px main nav) ----
   A three-step tab bar, not a row of loose pills: the numbers carry the sequence, an
   underline anchors where you are, and the strip only scrolls sideways when it has to.
   When it does, the edges fade so cut-off items read as "more this way" rather than as
   a broken layout, and the current step is scrolled into view on load. */
.subnav{position:sticky;top:74px;z-index:49;background:rgba(18,38,51,.94);
  -webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);
  border-bottom:1px solid rgba(250,246,238,.10);}
.subnav-in{max-width:1180px;margin:0 auto;padding:0 28px;display:flex;align-items:stretch;gap:0;
  height:52px;overflow-x:auto;overflow-y:hidden;overscroll-behavior-x:contain;
  -webkit-overflow-scrolling:touch;scrollbar-width:none;-ms-overflow-style:none;}
.subnav-in::-webkit-scrollbar{display:none;}
/* fade only at the end the content actually overflows past */
.subnav-in.is-scrollable{-webkit-mask-image:linear-gradient(90deg,#000 0,#000 calc(100% - 34px),transparent 100%);
  mask-image:linear-gradient(90deg,#000 0,#000 calc(100% - 34px),transparent 100%);}
.subnav-in.is-scrollable.at-start-hidden{-webkit-mask-image:linear-gradient(90deg,transparent 0,#000 34px,#000 calc(100% - 34px),transparent 100%);
  mask-image:linear-gradient(90deg,transparent 0,#000 34px,#000 calc(100% - 34px),transparent 100%);}
.subnav-in.is-scrollable.at-end{-webkit-mask-image:linear-gradient(90deg,transparent 0,#000 34px,#000 100%);
  mask-image:linear-gradient(90deg,transparent 0,#000 34px,#000 100%);}

.subnav .back{font-family:'Spline Sans Mono',ui-monospace,monospace;font-size:10.5px;letter-spacing:.13em;
  text-transform:uppercase;color:rgba(250,246,238,.62);text-decoration:none;display:inline-flex;
  align-items:center;gap:9px;padding:0 22px 0 0;margin-right:18px;flex:none;
  border-right:1px solid rgba(250,246,238,.14);transition:color .25s;white-space:nowrap;}
.subnav .back:hover,.subnav .back:focus-visible{color:#4FBFA6;outline:none;}

.subnav a.sub{position:relative;flex:none;display:inline-flex;align-items:center;gap:9px;
  padding:0 15px;font-family:'Spline Sans Mono',ui-monospace,monospace;font-size:11px;letter-spacing:.09em;
  text-transform:uppercase;color:rgba(250,246,238,.68);text-decoration:none;white-space:nowrap;
  border-bottom:2px solid transparent;transition:color .25s,background .25s,border-color .25s;}
.subnav a.sub .num{color:#4FBFA6;opacity:.75;font-weight:500;transition:opacity .25s;}
.subnav a.sub:hover,.subnav a.sub:focus-visible{color:#FAF6EE;background:rgba(250,246,238,.05);outline:none;}
.subnav a.sub:hover .num,.subnav a.sub:focus-visible .num{opacity:1;}
.subnav a.sub.current{color:#FAF6EE;border-bottom-color:#4FBFA6;
  background:linear-gradient(180deg,rgba(79,191,166,0) 40%,rgba(79,191,166,.13) 100%);}
.subnav a.sub.current .num{opacity:1;}
.subnav a:focus-visible{box-shadow:inset 0 0 0 2px #4FBFA6;}

@media(max-width:760px){
  .subnav-in{padding:0 16px;height:50px;scroll-snap-type:x proximity;scroll-padding-inline:16px;}
  .subnav .back{padding-right:14px;margin-right:12px;}
  .subnav a.sub{padding:0 12px;scroll-snap-align:center;}
}
@media(prefers-reduced-motion:reduce){
  .subnav a.sub,.subnav .back{transition:none;}
}

/* ---- previous / next pager (above the footer) ---- */
.pagernav{border-top:1px solid #E4DCC9;background:#FAF6EE;}
.pagernav-in{max-width:1180px;margin:0 auto;display:grid;grid-template-columns:1fr 1fr;gap:2px;}
.pagernav a{display:block;text-decoration:none;color:#16232B;padding:40px 40px;transition:background .3s;}
.pagernav a:hover,.pagernav a:focus-visible{background:#F1EAD9;outline:none;}
.pagernav a .dir{font-family:'Spline Sans Mono',ui-monospace,monospace;font-size:10px;letter-spacing:.2em;text-transform:uppercase;color:#5C6870;margin-bottom:10px;display:flex;align-items:center;gap:8px;}
.pagernav a .ptitle{font-family:'Instrument Serif',Georgia,serif;font-style:italic;font-size:24px;line-height:1.15;transition:color .3s;}
/* the label and the title on one line, rather than the label stacked above it */
.pagernav a{display:flex;align-items:baseline;gap:14px;flex-wrap:wrap;}
.pagernav a .dir{margin-bottom:0;flex:0 0 auto;}
.pagernav a.next{justify-content:flex-end;}
.pagernav a.next .dir{order:2;}
.pagernav a.next .ptitle{order:1;}

.pagernav a:hover .ptitle,.pagernav a:focus-visible .ptitle{color:#17806D;}
.pagernav a.next{text-align:right;border-left:1px solid #E4DCC9;}
.pagernav a.next .dir{justify-content:flex-end;}
@media(max-width:640px){
  .pagernav-in{grid-template-columns:1fr;}
  .pagernav a.next{border-left:none;border-top:1px solid #E4DCC9;text-align:left;}
  .pagernav a.next .dir{justify-content:flex-start;}
}

/* ---- compact navy chapter band (sub-pages) ---- */
.chapter{position:relative;overflow:hidden;background:#0C1A24;color:#FAF6EE;padding:15px 0;}
.chapter::before{content:"";position:absolute;inset:0;pointer-events:none;background:radial-gradient(ellipse 60% 120% at 15% -30%, rgba(23,128,109,.2), transparent 60%);}
.chapter::after{content:"";position:absolute;inset:0;pointer-events:none;opacity:.28;mix-blend-mode:overlay;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)' opacity='0.28'/%3E%3C/svg%3E");}
.chapter .wrap{position:relative;z-index:1;max-width:1080px;margin:0 auto;padding:0 28px;}
.chapter .eyebrow{font-family:'Spline Sans Mono',ui-monospace,monospace;font-size:10.5px;letter-spacing:.22em;text-transform:uppercase;color:#4FBFA6;margin-bottom:0;display:flex;align-items:center;gap:11px;opacity:0;transform:translateY(10px);animation:chrise .7s cubic-bezier(.22,1,.36,1) forwards;}
.chapter .eyebrow::before{content:"";width:26px;height:1px;background:#17806D;}
.chapter .eyebrow .part{color:rgba(250,246,238,.45);}
.chapter h1{font-family:'Instrument Serif',Georgia,serif;font-weight:400;font-style:italic;font-size:clamp(30px,3.6vw,40px);line-height:1.1;margin-bottom:10px;color:#FAF6EE;opacity:0;transform:translateY(10px);animation:chrise .7s cubic-bezier(.22,1,.36,1) .1s forwards;}
.chapter .standfirst{font-size:15px;color:rgba(250,246,238,.6);max-width:560px;opacity:0;transform:translateY(10px);animation:chrise .7s cubic-bezier(.22,1,.36,1) .2s forwards;}
@keyframes chrise{to{opacity:1;transform:none;}}
@media(prefers-reduced-motion:reduce){.chapter .eyebrow,.chapter h1,.chapter .standfirst{opacity:1;transform:none;animation:none;}}