:root{
  --font-heading:"Space Grotesk","Noto Sans SC",sans-serif;
  --font-body:"Noto Serif SC","Source Han Serif SC",serif;
  --depth:#0A1A2F;
  --paper:#F5F1E8;
  --gold:#C9A24B;
  --ember:#D2691E;
  --slate:#4A5568;
  --moss:#6B8E6B;
  --terra:#C17A5E;
  --ink:#1A1A1A;
  --light:#FFFFFF;
  --header-h:5.5rem;
  --content-width:1200px;
}

*,*::before,*::after{box-sizing:border-box;}

html{scroll-behavior:smooth;}

body{
  margin:0;
  font-family:var(--font-body);
  background:var(--paper);
  color:var(--ink);
  line-height:1.85;
  -webkit-font-smoothing:antialiased;
}

h1,h2,h3,h4{
  margin:0;
  font-family:var(--font-heading);
  font-weight:700;
  line-height:1.12;
  letter-spacing:-0.02em;
}

p{margin:0;}
button{font:inherit;cursor:pointer;}
::selection{background:var(--gold);color:var(--depth);}

a{
  color:var(--depth);
  text-decoration-thickness:2px;
  text-underline-offset:4px;
}

a:hover{color:var(--ember);}

:focus-visible{
  outline:3px solid var(--gold);
  outline-offset:3px;
}

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto;}
  *,*::before,*::after{
    animation-duration:.01ms!important;
    animation-iteration-count:1!important;
    transition-duration:.01ms!important;
  }
}

#main-content,[id]{scroll-margin-top:var(--header-h);}
.site-main{display:block;}

.skip-link{
  position:fixed;
  top:1rem;
  left:-100vw;
  z-index:2000;
  padding:.75rem 1.1rem;
  background:var(--gold);
  color:var(--ink);
  font-family:var(--font-heading);
  font-weight:700;
  font-size:.9rem;
  text-decoration:none;
  border:2px solid var(--ink);
}

.skip-link:focus{left:1rem;}

.site-header{
  position:fixed;
  top:0;
  left:0;
  width:100%;
  height:var(--header-h);
  z-index:1000;
  background:transparent;
  border-bottom:1px solid transparent;
  transition:background-color .3s ease,border-color .3s ease,box-shadow .3s ease;
}

.site-header[data-scrolled="true"]{
  background-color:var(--depth);
  border-bottom-color:rgba(201,162,75,.45);
  box-shadow:0 8px 24px rgba(10,26,47,.25);
}

.site-header[data-scrolled="true"] .brand-mark{
  background:var(--gold);
  color:var(--depth);
}

.header-inner{
  position:relative;
  z-index:3;
  width:min(var(--content-width),calc(100% - 3rem));
  height:100%;
  margin:0 auto;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:2rem;
}

.brand{
  display:inline-flex;
  align-items:center;
  gap:.75rem;
  text-decoration:none;
  flex-shrink:0;
}

.brand-mark{
  display:grid;
  place-items:center;
  width:2.8rem;
  height:2.8rem;
  background:rgba(10,26,47,.55);
  border:2px solid var(--gold);
  color:var(--gold);
  font-family:var(--font-heading);
  font-weight:700;
  font-size:.9rem;
  box-shadow:4px 4px 0 rgba(201,162,75,.25);
  transition:background-color .3s ease,color .3s ease;
}

.brand-name{
  font-family:var(--font-heading);
  font-size:1.35rem;
  font-weight:700;
  letter-spacing:.02em;
  color:var(--light);
  text-shadow:0 2px 8px rgba(10,26,47,.4);
}

.site-nav{
  position:relative;
  z-index:2;
  display:flex;
  align-items:center;
  justify-content:flex-end;
  flex:1;
  margin-left:2rem;
}

.nav-list{
  display:flex;
  align-items:center;
  gap:.2rem;
  list-style:none;
  margin:0;
  padding:0;
}

.nav-link{
  position:relative;
  display:inline-block;
  padding:.65rem .8rem;
  color:var(--light);
  font-family:var(--font-heading);
  font-weight:700;
  font-size:.95rem;
  letter-spacing:.04em;
  text-decoration:none;
  white-space:nowrap;
  transition:color .2s ease;
}

.nav-link::after{
  content:"";
  position:absolute;
  left:.8rem;
  right:.8rem;
  bottom:.25rem;
  height:2px;
  background:var(--ember);
  transform:scaleX(0);
  transform-origin:left;
  transition:transform .25s ease;
}

.nav-link:hover{color:var(--gold);}
.nav-link:hover::after{transform:scaleX(1);}
.nav-link[aria-current="page"]{color:var(--gold);}
.nav-link[aria-current="page"]::after{transform:scaleX(1);background:var(--gold);}

.nav-meta{
  display:flex;
  flex-direction:column;
  align-items:flex-end;
  margin-left:1.75rem;
  padding-left:1.75rem;
  border-left:1px solid rgba(201,162,75,.5);
  color:rgba(245,241,232,.55);
  font-family:var(--font-heading);
  font-size:.65rem;
  line-height:1.5;
  letter-spacing:.14em;
  text-transform:uppercase;
}

.nav-toggle{display:none;}

.header-progress{
  position:absolute;
  left:0;
  bottom:0;
  width:100%;
  height:3px;
  z-index:5;
  background:linear-gradient(90deg,var(--gold),var(--ember));
  transform:scaleX(0);
  transform-origin:left;
}

@media (max-width:768px){
  :root{--header-h:4.5rem;}

  .site-header{
    background-color:var(--depth);
    border-bottom-color:rgba(201,162,75,.25);
  }

  .header-inner{width:calc(100% - 2rem);}
  .brand-name{font-size:1.15rem;}

  .nav-toggle{
    display:inline-flex;
    align-items:center;
    gap:.5rem;
    background:none;
    border:0;
    color:var(--light);
    font-family:var(--font-heading);
    font-weight:700;
    font-size:.9rem;
    padding:.5rem;
  }

  .nav-toggle-box{
    position:relative;
    display:block;
    width:1.75rem;
    height:1.25rem;
  }

  .nav-toggle-box span{
    position:absolute;
    left:0;
    width:100%;
    height:2px;
    background:var(--gold);
    transition:transform .25s ease,top .25s ease,opacity .25s ease;
  }

  .nav-toggle-box span:nth-child(1){top:0;}
  .nav-toggle-box span:nth-child(2){top:.55rem;}
  .nav-toggle-box span:nth-child(3){top:1.1rem;}

  .nav-toggle[aria-expanded="true"] .nav-toggle-box span:nth-child(1){top:.55rem;transform:rotate(45deg);}
  .nav-toggle[aria-expanded="true"] .nav-toggle-box span:nth-child(2){opacity:0;}
  .nav-toggle[aria-expanded="true"] .nav-toggle-box span:nth-child(3){top:.55rem;transform:rotate(-45deg);}
  .nav-toggle[aria-expanded="true"] .nav-toggle-text{color:var(--gold);}

  .site-nav{
    position:fixed;
    top:0;
    right:0;
    width:min(21rem,86vw);
    height:100dvh;
    margin:0;
    padding:calc(var(--header-h) + 2.5rem) 2rem 2rem;
    background:var(--depth);
    border-left:2px solid rgba(201,162,75,.55);
    box-shadow:-10px 0 30px rgba(10,26,47,.35);
    transform:translateX(100%);
    transition:transform .3s ease;
    overflow-y:auto;
    align-items:flex-start;
  }

  .site-nav[data-open="true"]{transform:translateX(0);}

  .nav-list{
    flex-direction:column;
    align-items:stretch;
    gap:0;
    width:100%;
  }

  .nav-link{
    display:block;
    padding:1rem .25rem;
    border-bottom:1px solid rgba(245,241,232,.12);
    font-size:1.1rem;
    white-space:normal;
  }

  .nav-link::after{left:.25rem;right:.25rem;bottom:.35rem;}

  .nav-meta{
    margin-top:2rem;
    padding-left:0;
    margin-left:0;
    border-left:0;
    align-items:flex-start;
    color:var(--gold);
    font-size:.65rem;
  }
}

.container{
  width:min(var(--content-width),calc(100% - 3rem));
  margin:0 auto;
}

.container--narrow{max-width:54rem;}
.section-pad{padding-top:clamp(3.5rem,8vw,6.5rem);padding-bottom:clamp(3.5rem,8vw,6.5rem);}

.section--dark{background:var(--depth);color:var(--paper);}
.section--paper{background:var(--paper);}
.section--sand{background:#E9E2D0;}

.grid{display:grid;gap:1.5rem;}
.grid--2{grid-template-columns:repeat(2,minmax(0,1fr));}
.grid--3{grid-template-columns:repeat(3,minmax(0,1fr));}
.grid--asym{grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);align-items:center;}

@media (max-width:980px){
  .grid--3{grid-template-columns:repeat(2,minmax(0,1fr));}
}

@media (max-width:767px){
  .grid--2,.grid--3,.grid--asym{grid-template-columns:minmax(0,1fr);}
}

.hero-split{
  position:relative;
  display:grid;
  grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);
  align-items:center;
  gap:clamp(2rem,5vw,4rem);
  min-height:calc(100vh - var(--header-h));
  padding:calc(var(--header-h) + 3rem) 0 clamp(3rem,6vw,5rem);
  background:var(--depth);
  color:var(--paper);
}

.hero-split--paper{
  background:var(--paper);
  color:var(--ink);
}

.hero-copy{
  max-width:44rem;
  position:relative;
  z-index:2;
}

.hero-visual{
  position:relative;
  min-height:24rem;
  display:grid;
  place-items:center;
}

.hero-panel{
  position:relative;
  width:min(100%,30rem);
  min-height:20rem;
  border:2px solid var(--ink);
  background:linear-gradient(135deg,var(--paper) 0%,#E7DBC2 100%);
  box-shadow:12px 12px 0 var(--gold);
}

.hero-panel::before{
  content:"LATE SUMMER";
  position:absolute;
  top:1rem;
  left:1rem;
  font-family:var(--font-heading);
  letter-spacing:.18em;
  color:var(--gold);
  font-size:.75rem;
  font-weight:700;
}

.hero-meta{
  display:flex;
  flex-wrap:wrap;
  gap:.75rem;
  margin-top:2rem;
}

.hero-index{
  font-family:var(--font-heading);
  font-size:.75rem;
  letter-spacing:.12em;
  color:var(--gold);
  border:1px solid rgba(201,162,75,.4);
  padding:.35rem .6rem;
}

.page-masthead{
  background:var(--depth);
  color:var(--paper);
  padding:calc(var(--header-h) + 3.5rem) 0 3.5rem;
  border-bottom:4px solid var(--gold);
}

.page-masthead .eyebrow{color:var(--gold);}

.page-title{
  font-size:clamp(2.25rem,5vw,4rem);
  margin-top:.75rem;
  color:var(--light);
}

.page-description{
  max-width:48rem;
  margin-top:1rem;
  color:#CED6E2;
  font-size:1.1rem;
  line-height:1.8;
}

.eyebrow{
  display:inline-flex;
  align-items:center;
  gap:.65rem;
  font-family:var(--font-heading);
  font-size:.78rem;
  font-weight:700;
  letter-spacing:.18em;
  color:var(--gold);
  text-transform:uppercase;
}

.eyebrow::before{
  content:"";
  width:2rem;
  height:2px;
  background:currentColor;
}

.display-title{
  font-size:clamp(3rem,7vw,5.75rem);
  line-height:.95;
  letter-spacing:-.04em;
  margin-top:1rem;
  color:var(--light);
}

.hero-split--paper .display-title{color:var(--ink);}

.display-sub{
  max-width:32rem;
  margin-top:1.25rem;
  color:var(--slate);
  font-size:1.15rem;
  line-height:1.7;
}

.hero-split--dark .display-sub,
.hero-split .display-sub{color:#CED6E2;}

.breadcrumb{
  display:flex;
  flex-wrap:wrap;
  gap:.5rem 1rem;
  list-style:none;
  margin:0 0 1.5rem;
  padding:0;
  font-family:var(--font-heading);
  font-size:.85rem;
}

.breadcrumb a{
  color:var(--gold);
  text-decoration:none;
}

.breadcrumb li+li::before{
  content:"/";
  margin-right:1rem;
  color:rgba(201,162,75,.5);
}

.breadcrumb [aria-current="page"]{color:var(--light);}

.panel{
  border:2px solid var(--ink);
  background:var(--paper);
  color:var(--ink);
  padding:2rem;
  box-shadow:8px 8px 0 var(--terra);
}

.panel--dark{
  background:var(--depth);
  color:var(--paper);
  border-color:var(--depth);
  box-shadow:8px 8px 0 var(--gold);
}

.panel--gold{
  background:var(--gold);
  color:var(--ink);
  border-color:var(--ink);
  box-shadow:8px 8px 0 var(--depth);
}

.panel h2,.panel h3{margin-bottom:.75rem;}

.chapter-head{
  display:grid;
  grid-template-columns:auto 1fr;
  align-items:end;
  gap:1.25rem;
  margin-bottom:2rem;
  padding-bottom:1.25rem;
  border-bottom:3px solid var(--ink);
}

.chapter-index{
  font-family:var(--font-heading);
  font-size:clamp(3.5rem,7vw,5rem);
  line-height:.8;
  color:var(--gold);
  text-shadow:3px 3px 0 var(--ink);
}

.chapter-label{
  display:block;
  font-family:var(--font-heading);
  font-size:.75rem;
  letter-spacing:.18em;
  color:var(--slate);
  margin-bottom:.45rem;
}

.chapter-title{
  display:block;
  font-family:var(--font-heading);
  font-size:clamp(1.7rem,3.5vw,2.75rem);
}

.legend-list{
  list-style:none;
  margin:0;
  padding:1rem 1.25rem;
  border:2px solid var(--ink);
  background:var(--paper);
  color:var(--ink);
  box-shadow:6px 6px 0 var(--terra);
}

.legend-item{
  display:grid;
  grid-template-columns:2.5rem 1fr;
  align-items:center;
  gap:1rem;
  padding:.9rem 0;
  border-bottom:1px dashed rgba(74,85,104,.4);
}

.legend-item:last-child{border-bottom:0;}

.legend-key{
  width:2.5rem;
  height:1.5rem;
  border:2px solid var(--ink);
  background:var(--gold);
}

.legend-key--moss{background:var(--moss);}
.legend-key--ember{background:var(--ember);}
.legend-key--depth{background:var(--depth);}
.legend-key--terra{background:var(--terra);}

.legend-text{
  font-size:.95rem;
  line-height:1.5;
}

.legend-text strong{
  font-family:var(--font-heading);
  letter-spacing:.02em;
}

.route-grid{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(15.5rem,1fr));
  gap:1.5rem;
}

.route-card{
  position:relative;
  display:block;
  padding:2rem 2rem 1.75rem;
  border:2px solid var(--ink);
  background:var(--paper);
  text-decoration:none;
  color:var(--ink);
  box-shadow:6px 6px 0 var(--terra);
  transition:transform .2s ease,box-shadow .2s ease;
}

.route-card:hover{
  transform:translate(-3px,-3px);
  box-shadow:10px 10px 0 var(--gold);
}

.route-card:hover .route-title{color:var(--ember);}

.route-index{
  position:absolute;
  top:1.25rem;
  right:1.5rem;
  font-family:var(--font-heading);
  font-weight:700;
  font-size:.8rem;
  color:var(--ember);
}

.route-title{
  font-family:var(--font-heading);
  font-size:1.5rem;
  font-weight:700;
  letter-spacing:-.02em;
  margin-bottom:.75rem;
  padding-right:3rem;
  transition:color .2s ease;
}

.route-desc{
  color:var(--slate);
  font-size:.95rem;
  line-height:1.7;
}

.metric-grid{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(10rem,1fr));
  gap:1.5rem;
}

.metric-card{
  border-bottom:3px solid var(--gold);
  padding:1.25rem 0 .75rem;
}

.metric-value{
  font-family:var(--font-heading);
  font-size:clamp(2.25rem,4vw,3.5rem);
  font-weight:700;
  line-height:1;
  color:var(--depth);
}

.metric-label{
  font-size:.8rem;
  font-family:var(--font-heading);
  letter-spacing:.14em;
  color:var(--slate);
}

.btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:.65rem;
  padding:.85rem 1.3rem;
  font-family:var(--font-heading);
  font-weight:700;
  font-size:.95rem;
  line-height:1.2;
  border:2px solid var(--ink);
  background:var(--paper);
  color:var(--ink);
  text-decoration:none;
  box-shadow:5px 5px 0 var(--ink);
  transition:transform .15s ease,box-shadow .15s ease,background-color .15s ease,color .15s ease;
}

.btn:hover{
  background:var(--gold);
  color:var(--ink);
  transform:translate(-2px,-2px);
  box-shadow:8px 8px 0 var(--ink);
}

.btn:active{
  transform:translate(2px,2px);
  box-shadow:1px 1px 0 var(--ink);
}

.btn--dark{
  background:var(--depth);
  border-color:var(--depth);
  color:var(--light);
  box-shadow:5px 5px 0 var(--gold);
}

.btn--dark:hover{
  background:var(--gold);
  border-color:var(--gold);
  color:var(--depth);
  box-shadow:8px 8px 0 var(--ink);
}

.btn--gold{
  background:var(--gold);
  color:var(--ink);
}

.btn--gold:hover{background:var(--paper);}

.img-frame{
  position:relative;
  display:block;
  overflow:hidden;
  width:100%;
  aspect-ratio:16/9;
  border:2px solid var(--ink);
  background:linear-gradient(135deg,var(--gold) 0%,var(--paper) 55%,var(--ember) 130%);
  box-shadow:8px 8px 0 var(--terra);
}

.img-frame--portrait{aspect-ratio:4/5;}
.img-frame--square{aspect-ratio:1/1;}
.img-frame--wide{aspect-ratio:21/9;}

.img-frame::after{
  content:attr(data-label);
  position:absolute;
  left:1rem;
  bottom:1rem;
  padding:.45rem .7rem;
  background:var(--depth);
  color:var(--paper);
  font-family:var(--font-heading);
  font-size:.72rem;
  letter-spacing:.12em;
  border-left:3px solid var(--gold);
}

.img-frame img,
.img-frame svg{
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
}

.preamble{
  max-width:52rem;
  font-size:1.3rem;
  line-height:1.7;
  color:var(--depth);
  border-left:4px solid var(--gold);
  padding-left:1.75rem;
  margin:2.5rem 0;
}

.prose{
  max-width:64ch;
  font-size:1.0625rem;
  line-height:2;
}

.prose p{margin:1.4em 0;}
.prose h2{margin:2.2em 0 .6em;font-size:1.7rem;}
.prose h3{margin:2em 0 .5em;font-size:1.3rem;}
.prose ul{padding-left:1.5rem;margin:1.4em 0;}
.prose li{margin:.4em 0;}

.note{
  border:2px solid var(--ink);
  background:var(--paper);
  color:var(--ink);
  padding:1rem 1.25rem;
  box-shadow:4px 4px 0 var(--terra);
  font-size:.95rem;
  line-height:1.7;
}

.note--moss{
  border-color:var(--moss);
  box-shadow:4px 4px 0 var(--moss);
}

.note--ember{
  border-color:var(--ember);
  box-shadow:4px 4px 0 var(--ember);
}

html[data-js] [data-reveal]{
  opacity:0;
  transform:translateY(18px);
  transition:opacity .55s ease,transform .55s ease;
  transition-delay:var(--reveal-delay,0ms);
}

html[data-js] [data-reveal].is-inview{
  opacity:1;
  transform:none;
}

@media (prefers-reduced-motion:reduce){
  html[data-js] [data-reveal]{
    opacity:1;
    transform:none;
    transition:none;
  }
}

.site-footer{
  position:relative;
  background:linear-gradient(180deg,var(--depth) 0%,#071521 100%);
  color:var(--paper);
  border-top:5px solid var(--gold);
  padding:clamp(3.5rem,7vw,5rem) 0 2rem;
  overflow:hidden;
}

.site-footer::before{
  content:"";
  position:absolute;
  right:-6rem;
  bottom:-8rem;
  width:24rem;
  height:24rem;
  border:2px solid rgba(201,162,75,.18);
  border-radius:50%;
  box-shadow:0 0 0 2.5rem rgba(201,162,75,.06),0 0 0 5rem rgba(201,162,75,.04);
  pointer-events:none;
}

.footer-inner{
  position:relative;
  z-index:2;
  width:min(var(--content-width),calc(100% - 3rem));
  margin:0 auto;
}

.footer-grid{
  display:grid;
  grid-template-columns:minmax(0,1.25fr) minmax(0,.8fr) minmax(0,1fr);
  gap:clamp(2rem,5vw,4rem);
  padding-bottom:3rem;
}

.footer-column{min-width:0;}

.footer-kicker{
  font-family:var(--font-heading);
  font-size:.72rem;
  font-weight:700;
  letter-spacing:.18em;
  color:var(--gold);
  margin-bottom:.75rem;
}

.footer-title{
  font-family:var(--font-heading);
  font-size:clamp(2rem,4vw,3rem);
  color:var(--light);
  margin-bottom:.9rem;
}

.footer-intro{
  color:#CED6E2;
  font-size:.99rem;
  line-height:1.85;
  max-width:36ch;
}

.footer-heading{
  font-family:var(--font-heading);
  font-size:.8rem;
  letter-spacing:.16em;
  color:var(--gold);
  border-bottom:1px solid rgba(201,162,75,.35);
  padding-bottom:.65rem;
  margin-bottom:1.15rem;
}

.footer-link-list,
.footer-contact-list{
  list-style:none;
  margin:0;
  padding:0;
}

.footer-link-list li,
.footer-contact-list li{
  display:block;
  margin:.35rem 0;
  color:#CED6E2;
  font-size:.95rem;
  line-height:1.7;
}

.footer-link-list a{
  color:#E3E8F0;
  text-decoration:none;
  font-family:var(--font-heading);
  transition:color .2s ease,padding-left .2s ease;
}

.footer-link-list a:hover{
  color:var(--ember);
  padding-left:.25rem;
}

.footer-bottom{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  justify-content:space-between;
  gap:1rem 2rem;
  border-top:1px solid rgba(245,241,232,.15);
  padding:1.6rem 0 4.5rem;
  color:#AEB9C7;
  font-size:.85rem;
}

.footer-bottom p{margin:0;}

.footer-legal{
  display:flex;
  align-items:center;
  gap:.8rem;
}

.footer-legal a{
  color:#E3E8F0;
  text-decoration:none;
  font-family:var(--font-heading);
  font-size:.88rem;
}

.footer-legal a:hover{color:var(--ember);}

.dot-sep{color:var(--gold);}
.footer-icp{letter-spacing:.04em;}

.to-top{
  position:fixed;
  right:1.25rem;
  bottom:1.25rem;
  z-index:900;
  display:grid;
  place-items:center;
  width:3.25rem;
  height:3.25rem;
  border:2px solid var(--ink);
  background:var(--gold);
  color:var(--ink);
  font-size:1.4rem;
  line-height:1;
  box-shadow:5px 5px 0 var(--depth);
  opacity:0;
  visibility:hidden;
  transform:translateY(1rem);
  transition:opacity .3s ease,transform .3s ease,visibility .3s ease;
}

.to-top.is-visible{
  opacity:1;
  visibility:visible;
  transform:none;
}

.to-top:hover{
  background:var(--ember);
  color:var(--light);
  box-shadow:8px 8px 0 var(--depth);
}

@media (max-width:1024px) and (min-width:769px){
  .footer-grid{
    grid-template-columns:1fr 1fr;
  }

  .footer-brand{
    grid-column:1 / -1;
  }
}

@media (max-width:768px){
  .footer-grid{
    grid-template-columns:1fr;
    gap:2rem;
  }

  .footer-inner{width:calc(100% - 2rem);}

  .footer-bottom{
    align-items:flex-start;
    flex-direction:column;
  }
}