:root{
    --ink:#101C2C; --ink-soft:#55677A;
    --navy:#0F2340; --navy-2:#173056; --navy-deep:#081527;
    --paper:#F8F5EC; --paper-2:#EFE7D2; --paper-3:#E6DBBD;
    --brass:#B9862F; --brass-dark:#8F6620; --brass-light:#E8C578;
    --teal:#2F7D72; --line:rgba(16,28,44,.13); --line-navy:rgba(255,255,255,.16);
    --radius:6px;
  }
  *{box-sizing:border-box;}
  html{scroll-behavior:smooth;}
  body{margin:0; background:var(--paper); color:var(--ink); font-family:'Hanken Grotesk',sans-serif; line-height:1.6;}
  h1,h2,h3,h4{font-family:'Newsreader',serif; margin:0; color:var(--ink); font-weight:600;}
  .mono{font-family:'Fragment Mono',monospace;}
  a{color:inherit; text-decoration:none;}
  img,svg{display:block;}
  .wrap{max-width:1180px; margin:0 auto; padding:0 28px;}
  @media (max-width:640px){.wrap{padding:0 18px;}}
  @media (prefers-reduced-motion:reduce){ *{animation:none !important; transition:none !important;} }

  /* ============ WAKE PROGRESS RAIL (signature scroll interaction) ============ */
  .wake-rail{position:fixed; left:20px; top:0; bottom:0; width:20px; z-index:60; display:flex; justify-content:center; pointer-events:none;}
  .wake-rail .track{position:absolute; top:8%; bottom:8%; width:2px; background:var(--line);}
  .wake-rail .fill{position:absolute; top:8%; width:2px; background:var(--brass); height:0%; transition:height .05s linear;}
  .wake-rail .marker{
    position:absolute; top:8%; width:16px; height:16px; margin-left:-7px; transform:translateY(-50%);
    background:var(--paper); border:2px solid var(--brass); border-radius:2px; rotate:45deg;
  }
  @media (max-width:1050px){.wake-rail{display:none;}}

  /* ============ HEADER ============ */
  header.site{position:sticky; top:0; z-index:50; background:var(--paper); border-bottom:1px solid var(--line); transition:padding .2s, box-shadow .2s;}
  header.site.scrolled{box-shadow:0 6px 20px rgba(8,21,39,.08);}
  .header-inner{display:flex; align-items:center; justify-content:space-between; padding:18px 0; transition:padding .2s;}
  header.site.scrolled .header-inner{padding:11px 0;}
  .brand{display:flex; align-items:center; gap:11px; cursor:pointer;}
  .logo-mark{flex-shrink:0;}
  .brand-word{font-family:'Libre Caslon Display',serif; font-size:19px; font-weight:400; line-height:1; letter-spacing:.01em;}
  .brand-word .amp{color:var(--brass-dark); font-style:italic;}
  .brand-tag{font-family:'Fragment Mono',monospace; font-size:9.5px; letter-spacing:.14em; text-transform:uppercase; color:var(--ink-soft); margin-top:3px;}
  nav.primary{display:flex; align-items:center; gap:2px;}
  nav.primary button{
    font-family:'Fragment Mono',monospace; font-size:11.5px; letter-spacing:.06em; text-transform:uppercase;
    background:none; border:none; cursor:pointer; color:var(--ink-soft); padding:10px 14px; position:relative;
  }
  nav.primary button:hover{color:var(--ink);}
  nav.primary button[aria-current="true"]{color:var(--brass-dark); font-weight:700;}
  nav.primary button[aria-current="true"]::after{content:""; position:absolute; left:14px; right:14px; bottom:3px; height:2px; background:var(--brass);}
  .menu-toggle{
    display:none; background:none; border:none; width:40px; height:40px; border-radius:10px;
    cursor:pointer; position:relative; transition:background .15s;
  }
  .menu-toggle:hover{background:var(--paper-2);}
  .menu-toggle .bar{
    position:absolute; left:10px; width:20px; height:2px; background:var(--ink); border-radius:2px;
    transition:transform .25s cubic-bezier(.4,0,.2,1), opacity .18s ease, top .25s cubic-bezier(.4,0,.2,1);
  }
  .menu-toggle .bar:nth-child(1){top:14px;}
  .menu-toggle .bar:nth-child(2){top:19px;}
  .menu-toggle .bar:nth-child(3){top:24px;}
  .menu-toggle.open .bar:nth-child(1){top:19px; transform:rotate(45deg);}
  .menu-toggle.open .bar:nth-child(2){opacity:0;}
  .menu-toggle.open .bar:nth-child(3){top:19px; transform:rotate(-45deg);}
  @media (max-width:900px){
    .header-inner{position:relative;}
    nav.primary{
      position:absolute; left:0; right:0; top:calc(100% + 10px); background:var(--paper);
      border:1px solid var(--line); border-radius:14px; box-shadow:0 20px 44px rgba(16,28,44,.16);
      flex-direction:column; align-items:stretch; padding:8px;
      opacity:0; visibility:hidden; transform:translateY(-8px); pointer-events:none;
      transition:opacity .2s ease, transform .2s ease, visibility .2s;
    }
    nav.primary.open{opacity:1; visibility:visible; transform:translateY(0); pointer-events:auto;}
    nav.primary button{text-align:left; padding:13px 16px; border-radius:9px;}
    nav.primary button:hover{background:var(--paper-2);}
    .menu-toggle{display:block;}
  }

  /* ============ HERO ============ */
  .hero{
    position:relative; overflow:hidden; color:var(--paper); padding:70px 0 0;
    background:radial-gradient(900px 500px at 80% -15%, rgba(185,134,47,.14), transparent 60%),
               linear-gradient(165deg, var(--navy-deep), var(--navy) 55%, var(--navy-2));
  }
  .hero-grid{display:grid; grid-template-columns:1.05fr .95fr; gap:50px; align-items:center; position:relative; z-index:3; padding-bottom:60px;}
  @media (max-width:920px){.hero-grid{grid-template-columns:1fr;}}
  .eyebrow{font-family:'Fragment Mono',monospace; font-size:11.5px; letter-spacing:.14em; text-transform:uppercase; color:#8FBFB2; margin-bottom:16px; display:flex; align-items:center; gap:8px;}
  .eyebrow::before{content:""; width:16px; height:1px; background:#8FBFB2;}
  .hero h1{font-family:'Libre Caslon Display',serif; font-weight:400; font-size:50px; line-height:1.1; letter-spacing:-.005em; max-width:13ch; color:#fff;}
  .hero h1 em{font-style:italic; color:var(--brass-light);}
  @media (max-width:640px){.hero h1{font-size:32px;}}
  .hero p.lede{font-size:17.5px; color:#C0CFDC; max-width:44ch; margin:20px 0 30px;}
  .btn{font-family:'Fragment Mono',monospace; font-size:12px; letter-spacing:.06em; text-transform:uppercase; padding:14px 22px; border-radius:var(--radius); cursor:pointer; border:1.5px solid transparent; display:inline-flex; align-items:center; gap:8px; transition:transform .15s, box-shadow .15s, background .15s;}
  .btn-primary{background:var(--brass); color:#221602; box-shadow:0 8px 20px rgba(185,134,47,.35); font-weight:700;}
  .btn-primary:hover{background:var(--brass-light); transform:translateY(-1px);}
  .btn-ghost{background:transparent; color:#fff; border-color:rgba(255,255,255,.4);}
  .btn-ghost:hover{background:rgba(255,255,255,.08);}
  .hero-ctas{display:flex; gap:14px; flex-wrap:wrap;}

  /* compass rose — ambient rotation */
  .hero-visual{position:relative; display:flex; align-items:center; justify-content:center; height:340px;}
  .compass{position:absolute; width:300px; height:300px; opacity:.9;}
  .compass .ring{animation:spin 90s linear infinite; transform-origin:150px 150px;}
  @keyframes spin{to{transform:rotate(360deg);}}
  .bow-shape{position:relative; z-index:2; width:150px;}

  .hero-wave{position:absolute; left:0; right:0; bottom:-1px; z-index:1; line-height:0;}
  .hero-wave svg{width:100%; height:auto; display:block;}

  /* ============ STAT STRIP (count-up on scroll) ============ */
  .stat-strip{background:var(--paper); padding:44px 0 8px;}
  .stat-grid{display:grid; grid-template-columns:repeat(4,1fr); gap:24px;}
  @media (max-width:760px){.stat-grid{grid-template-columns:repeat(2,1fr);}}
  .stat-num{font-family:'Newsreader',serif; font-size:38px; font-weight:700; color:var(--navy); line-height:1;}
  .stat-label{font-size:12.5px; color:var(--ink-soft); margin-top:8px; max-width:22ch;}

  .reveal{opacity:0; transform:translateY(16px); transition:opacity .55s ease, transform .55s ease;}
  .reveal.in{opacity:1; transform:translateY(0);}

  /* ============ SECTIONS ============ */
  .section{padding:60px 0;}
  .section-head{display:flex; justify-content:space-between; align-items:flex-end; margin-bottom:30px; gap:20px; flex-wrap:wrap;}
  .section-head h2{font-size:27px;}
  .section-head p{color:var(--ink-soft); font-size:14.5px; max-width:44ch; margin-top:6px;}
  .section-link{font-family:'Fragment Mono',monospace; font-size:11.5px; text-transform:uppercase; letter-spacing:.06em; color:var(--brass-dark); white-space:nowrap; border-bottom:1px solid var(--brass-dark); padding-bottom:2px; cursor:pointer;}

  /* ============ PILLARS ============ */
  .pillars{display:grid; grid-template-columns:repeat(4,1fr); gap:1px; background:var(--line); border:1px solid var(--line);}
  @media (max-width:860px){.pillars{grid-template-columns:repeat(2,1fr);}}
  @media (max-width:480px){.pillars{grid-template-columns:1fr;}}
  .pillar{background:var(--paper); padding:28px 22px; cursor:pointer; transition:background .15s;}
  .pillar:hover{background:var(--paper-2);}
  .pillar h3{font-size:17px; margin:14px 0 8px;}
  .pillar p{font-size:13.5px; color:var(--ink-soft); margin:0 0 14px;}
  .pillar-cta{font-family:'Fragment Mono',monospace; font-size:10.5px; text-transform:uppercase; letter-spacing:.06em; color:var(--brass-dark);}

  /* ============ CARDS w/ bearing readout on hover ============ */
  .card-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:24px;}
  @media (max-width:900px){.card-grid{grid-template-columns:repeat(2,1fr);}}
  @media (max-width:600px){.card-grid{grid-template-columns:1fr;}}
  .article-card{background:var(--paper); border:1px solid var(--line); border-radius:var(--radius); overflow:hidden; cursor:pointer; display:flex; flex-direction:column; transition:box-shadow .2s, transform .2s;}
  .article-card:hover{box-shadow:0 16px 32px rgba(16,28,44,.12); transform:translateY(-4px);}
  .card-media{height:148px; position:relative; overflow:hidden;}
  .card-tag{position:absolute; top:12px; left:12px; font-family:'Fragment Mono',monospace; font-size:9.5px; letter-spacing:.08em; text-transform:uppercase; background:rgba(255,255,255,.92); color:var(--navy); padding:5px 9px; border-radius:12px;}
  .card-bearing{position:absolute; top:12px; right:12px; font-family:'Fragment Mono',monospace; font-size:10px; color:#fff; opacity:0; transition:opacity .2s; background:rgba(8,21,39,.55); padding:4px 8px; border-radius:4px;}
  .article-card:hover .card-bearing{opacity:1;}
  .card-body{padding:18px 20px 20px; display:flex; flex-direction:column; gap:9px; flex:1;}
  .card-body h3{font-size:16.5px; line-height:1.3; font-weight:600;}
  .card-body p{font-size:13.5px; color:var(--ink-soft); margin:0; flex:1;}
  .card-meta{font-family:'Fragment Mono',monospace; font-size:10px; color:var(--ink-soft); display:flex; gap:10px;}
  .m1{background:linear-gradient(135deg,#3E7CA6,#173056);} .m2{background:linear-gradient(135deg,#4FAE8A,#1F5540);}
  .m3{background:linear-gradient(135deg,#D18B4A,#7A4A1F);} .m4{background:linear-gradient(135deg,#8B6FC4,#3E2C6B);}

  /* ============ CTA BAND ============ */
  .cta-band{background:var(--navy); color:var(--paper); padding:58px 0; position:relative; overflow:hidden;}
  .cta-band-inner{display:flex; justify-content:space-between; align-items:center; gap:30px; flex-wrap:wrap; position:relative; z-index:2;}
  .cta-band h2{color:#fff; font-size:26px; max-width:20ch;}
  .cta-band p{color:#B9CCDA; font-size:14px; margin-top:8px; max-width:38ch;}
  .cta-form{display:flex; gap:0; flex-shrink:0;}
  .cta-form input{font-family:'Hanken Grotesk',sans-serif; font-size:14px; padding:13px 16px; border:1.5px solid rgba(255,255,255,.4); border-right:none; background:transparent; color:#fff; width:220px; border-radius:var(--radius) 0 0 var(--radius);}
  .cta-form input::placeholder{color:#8FA3B4;}
  .cta-form button{font-family:'Fragment Mono',monospace; font-size:12px; text-transform:uppercase; background:var(--brass); border:1.5px solid var(--brass); color:#221602; padding:0 18px; cursor:pointer; border-radius:0 var(--radius) var(--radius) 0; font-weight:700;}
  @media (max-width:560px){.cta-form{flex-direction:column; width:100%;} .cta-form input{width:100%; border-right:1.5px solid rgba(255,255,255,.4); border-bottom:none; border-radius:var(--radius) var(--radius) 0 0;} .cta-form button{border-radius:0 0 var(--radius) var(--radius); padding:12px;}}

  /* ============ FOOTER ============ */
  footer{padding:46px 0 28px; border-top:1px solid var(--line);}
  .footer-grid{display:grid; grid-template-columns:1.4fr repeat(4,1fr); gap:30px; margin-bottom:34px;}
  @media (max-width:800px){.footer-grid{grid-template-columns:repeat(2,1fr);}}
  .footer-grid h4{font-family:'Fragment Mono',monospace; font-size:10.5px; letter-spacing:.08em; text-transform:uppercase; color:var(--ink-soft); margin-bottom:14px; font-weight:700;}
  .footer-grid ul{list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:9px;}
  .footer-grid a{font-size:13.5px; color:var(--ink); cursor:pointer;}
  .footer-grid a:hover{color:var(--brass-dark);}
  .disclosure{font-size:12px; color:var(--ink-soft); border-top:1px solid var(--line); padding-top:20px; line-height:1.7; display:flex; justify-content:space-between; gap:20px; flex-wrap:wrap;}
  .disclosure a{text-decoration:underline; cursor:pointer;}

  /* ============ ARTICLE / PORT TEMPLATE ============ */
  .breadcrumb{font-family:'Fragment Mono',monospace; font-size:11px; color:var(--ink-soft); padding:20px 0; display:flex; gap:8px; flex-wrap:wrap;}
  .breadcrumb a{cursor:pointer; text-decoration:underline;}
  .article-head{padding:8px 0 30px; border-bottom:1px solid var(--line); margin-bottom:32px;}
  .tag-pill{display:inline-block; font-family:'Fragment Mono',monospace; font-size:10.5px; text-transform:uppercase; background:var(--paper-2); color:var(--brass-dark); padding:6px 12px; border-radius:12px; margin-bottom:16px;}
  .article-head h1{font-size:34px; max-width:22ch; line-height:1.16;}
  .article-meta{display:flex; gap:16px; margin-top:16px; flex-wrap:wrap;}
  .article-meta span{font-family:'Fragment Mono',monospace; font-size:11px; color:var(--ink-soft);}
  .article-layout{display:grid; grid-template-columns:1fr 270px; gap:48px; padding-bottom:60px;}
  @media (max-width:860px){.article-layout{grid-template-columns:1fr;}}
  .prose p{font-size:15.5px; color:var(--ink-soft); margin:0 0 18px; max-width:64ch;}
  .prose h2{font-size:21px; margin:32px 0 12px;}
  table.compare{width:100%; border-collapse:collapse; margin:20px 0 28px; font-size:14px;}
  table.compare th, table.compare td{border:1px solid var(--line); padding:11px 14px; text-align:left;}
  table.compare th{background:var(--paper-2); font-family:'Fragment Mono',monospace; font-size:11px; text-transform:uppercase; color:var(--ink-soft);}
  .affiliate-box{background:var(--paper-2); border-radius:var(--radius); padding:22px 24px; margin:30px 0;}
  .affiliate-box h3{font-size:17px; margin-bottom:8px;}
  .affiliate-box p{font-size:13.5px; color:var(--ink-soft); margin:0 0 16px;}
  .sidebar-box{background:var(--paper-2); border-radius:var(--radius); padding:20px; margin-bottom:18px;}
  .sidebar-box h4{font-family:'Fragment Mono',monospace; font-size:10.5px; text-transform:uppercase; color:var(--ink-soft); margin-bottom:14px;}
  .fact-row{display:flex; justify-content:space-between; font-size:13px; padding:8px 0; border-bottom:1px solid var(--line);}
  .fact-row:last-child{border-bottom:none;}
  .fact-row span:last-child{font-weight:700;}
  .related-item{font-size:13px; padding:8px 0; border-bottom:1px solid var(--line); cursor:pointer; font-weight:600;}
  .related-item:hover{color:var(--brass-dark);}
  .excursion-item{background:var(--paper); border:1px solid var(--line); border-radius:var(--radius); padding:16px 18px; display:flex; justify-content:space-between; align-items:center; gap:16px; flex-wrap:wrap; margin-bottom:10px;}
  .excursion-item .name{font-weight:700; font-size:14.5px;}
  .excursion-item .desc{font-size:12.5px; color:var(--ink-soft); margin-top:3px;}
  .pill-btn{font-family:'Fragment Mono',monospace; font-size:10px; text-transform:uppercase; background:var(--brass); color:#221602; padding:9px 15px; border-radius:14px; white-space:nowrap; cursor:pointer; font-weight:700;}
  .callout{background:#EAF1EE; border-radius:var(--radius); padding:16px 20px; margin:24px 0; font-size:13.5px;}

  /* ============ PRIVACY PAGE ============ */
  .policy-wrap{max-width:820px; margin:0 auto; padding:40px 28px 80px;}
  .policy-wrap h1{font-size:32px; margin-bottom:6px;}
  .policy-updated{font-family:'Fragment Mono',monospace; font-size:12px; color:var(--ink-soft); margin-bottom:36px;}
  .policy-wrap h2{font-size:19px; margin:36px 0 12px;}
  .policy-wrap p, .policy-wrap li{font-size:14.5px; color:var(--ink-soft); line-height:1.75;}
  .policy-wrap ul{padding-left:20px;}
  .policy-note{background:var(--paper-2); border-radius:var(--radius); padding:16px 20px; font-size:13px; margin-bottom:30px; color:var(--ink-soft);}
  .policy-toc{background:var(--paper-2); border-radius:var(--radius); padding:20px 24px; margin-bottom:10px;}
  .policy-toc div{font-family:'Fragment Mono',monospace; font-size:10.5px; text-transform:uppercase; color:var(--ink-soft); margin-bottom:10px;}
  .policy-toc a{display:block; font-size:13.5px; padding:5px 0; cursor:pointer;}
  .policy-toc a:hover{color:var(--brass-dark);}

  /* ============ COOKIE BANNER ============ */
  .cookie-banner{
    position:fixed; left:20px; right:20px; bottom:-200px; z-index:100; max-width:640px; margin:0 auto;
    background:var(--navy); color:#fff; border-radius:var(--radius); padding:20px 22px; box-shadow:0 20px 50px rgba(8,21,39,.4);
    transition:bottom .5s cubic-bezier(.2,.9,.3,1); display:flex; gap:16px; align-items:center; flex-wrap:wrap;
  }
  .cookie-banner.show{bottom:20px;}
  .cookie-banner .icon{width:34px; height:34px; flex-shrink:0;}
  .cookie-banner p{font-size:12.5px; color:#C0CFDC; margin:0; flex:1; min-width:200px;}
  .cookie-banner .actions{display:flex; gap:8px;}
  .cookie-btn{font-family:'Fragment Mono',monospace; font-size:10.5px; text-transform:uppercase; padding:9px 14px; border-radius:6px; cursor:pointer; white-space:nowrap; border:1.5px solid rgba(255,255,255,.3); background:transparent; color:#fff;}
  .cookie-btn.accept{background:var(--brass); border-color:var(--brass); color:#221602; font-weight:700;}