/* ==========================================================================
   THE DUKE OF ARC
   ========================================================================== */

:root{
  --navy-900:#00060f;
  --navy-850:#010a18;
  --navy-800:#030d1d;
  --navy-700:#071426;
  --ink-900:#0a0909;
  --ink-800:#141312;
  --ink-700:#1d1c1a;

  --gold:#e9bd6b;
  --gold-hi:#f4d493;
  --gold-deep:#c9963f;

  --cream:#f4efe4;
  --white:#ffffff;
  --muted:#aab2c0;
  --muted-2:#8e97a6;

  --parch:#e8dcc1;
  --parch-2:#d8c9a6;
  --parch-ink:#2a2118;

  --tw-bg:#15191f;
  --tw-bd:#252c35;
  --tw-tx:#e5e8ea;
  --tw-mut:#8b98a5;
  --tw-blue:#5eb0f6;

  --serif:"Cormorant Garamond",Georgia,"Times New Roman",serif;
  --serif-b:"EB Garamond",Georgia,serif;
  --sans:"Inter",-apple-system,BlinkMacSystemFont,"Segoe UI",Helvetica,Arial,sans-serif;
  --hand:"Caveat","Segoe Script",cursive;

  /* horizontal gutter, tracks the 1024px mockup's ~40px inset */
  --gut:clamp(18px,3.9vw,62px);
}

*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;
  background:var(--navy-900);
  color:var(--cream);
  font-family:var(--serif-b);
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
  overflow-x:hidden;
}
img{display:block;max-width:100%;background-color:#050c18}
img.is-broken{opacity:0}
.story-photos img{aspect-ratio:1100/461}
.tw-media{aspect-ratio:500/165}
.tw-link img{aspect-ratio:170/129}
a{color:inherit;text-decoration:none}
p{margin:0}
h1,h2,h3{margin:0;font-weight:400}
ul{margin:0;padding:0;list-style:none}

/* ---------- shared bits ---------- */
.hr-thin{display:block;width:clamp(30px,4.4vw,70px);height:1px;background:linear-gradient(90deg,rgba(233,189,107,.75),rgba(233,189,107,0));margin:clamp(6px,.82vw,13px) 0}
.hr-thin.light{background:linear-gradient(90deg,rgba(255,255,255,0),rgba(255,255,255,.55))}

.paw{display:inline-block;width:1.25em;height:1.25em;vertical-align:-.2em;margin-left:.35em}
.paw svg{width:100%;height:100%;fill:rgba(215,222,235,.72)}

.btn{
  display:inline-flex;align-items:center;justify-content:center;
  font-family:var(--sans);
  font-size:clamp(9.5px,1.07vw,16px);
  font-weight:600;letter-spacing:.075em;
  padding:clamp(8px,1.12vw,18px) clamp(14px,2.2vw,35px);
  border-radius:3px;border:1px solid transparent;
  transition:background .22s ease,color .22s ease,border-color .22s ease,transform .22s ease,box-shadow .22s ease;
  white-space:nowrap;cursor:pointer;
}
.btn-gold{background:linear-gradient(180deg,var(--gold-hi),var(--gold));color:#2b1f08;box-shadow:0 2px 18px rgba(233,189,107,.18)}
.btn-gold:hover{background:linear-gradient(180deg,#fadfa4,var(--gold-hi));transform:translateY(-1px);box-shadow:0 6px 26px rgba(233,189,107,.3)}
.btn-outline{border-color:rgba(219,228,242,.42);color:var(--cream);background:rgba(4,10,20,.32)}
.btn-outline:hover{border-color:rgba(219,228,242,.85);background:rgba(255,255,255,.07)}
.btn-ghost-gold{border-color:rgba(233,189,107,.75);color:var(--gold);background:transparent}
.btn-ghost-gold:hover{background:rgba(233,189,107,.12);border-color:var(--gold)}
.btn-sq{padding:clamp(8px,1.12vw,18px) clamp(10px,1.35vw,21px)}
.btn-sq svg{width:clamp(11px,1.25vw,19px);height:clamp(11px,1.25vw,19px)}

/* ==========================================================================
   HEADER
   ========================================================================== */
.site-header{
  position:sticky;top:0;z-index:60;
  background:linear-gradient(180deg,#000a1c 0%,#000917 100%);
  border-bottom:1px solid rgba(255,255,255,.055);
}
.header-inner{
  height:clamp(52px,5.37vw,84px);
  padding:0 var(--gut);
  display:flex;align-items:center;gap:clamp(14px,2.3vw,36px);
}
.brand{display:flex;align-items:center;gap:clamp(8px,1.15vw,18px);color:#fff;flex:0 0 auto}
.arch{width:clamp(20px,2.55vw,40px);height:auto;color:#fff}
.brand-word{
  font-family:var(--serif);font-size:clamp(12px,1.36vw,21px);
  letter-spacing:.075em;color:#f2f4f8;white-space:nowrap;
}
.brand-word em{font-style:normal;color:var(--gold);font-weight:600}

.main-nav{display:flex;align-items:center;gap:clamp(12px,1.95vw,31px);margin-left:clamp(10px,2.7vw,44px)}
.main-nav a{
  font-family:var(--sans);font-size:clamp(10px,1.17vw,17px);font-weight:400;
  color:#d6dce6;padding:6px 0;position:relative;transition:color .2s ease;
}
.main-nav a:hover{color:#fff}
.main-nav a.is-active{color:#fff}
.main-nav a.is-active::after{
  content:"";position:absolute;left:0;right:0;bottom:0;height:1.5px;
  background:linear-gradient(90deg,var(--gold-deep),var(--gold-hi));
}
.header-actions{margin-left:auto;display:flex;align-items:center;gap:clamp(9px,1.5vw,24px)}
.icon-link{color:#eef1f6;display:grid;place-items:center;transition:color .2s ease,transform .2s ease}
.icon-link svg{width:clamp(13px,1.5vw,23px);height:clamp(13px,1.5vw,23px)}
.icon-link:hover{color:var(--gold);transform:translateY(-1px)}
.header-cta{padding:clamp(7px,.92vw,15px) clamp(12px,1.85vw,30px);letter-spacing:.09em}

.nav-toggle{display:none;background:none;border:0;padding:6px;cursor:pointer}
.nav-toggle span{display:block;width:22px;height:1.6px;background:#e7ecf4;margin:4px 0;transition:transform .25s ease,opacity .25s ease}

/* ==========================================================================
   HERO
   ========================================================================== */
.hero{
  position:relative;isolation:isolate;
  min-height:clamp(330px,29vw,460px);
  background:
    radial-gradient(120% 130% at 8% 40%,#061426 0%,#020b18 45%,#00060f 100%);
  display:flex;align-items:center;
  overflow:hidden;
}
.hero-art{
  position:absolute;inset:0 0 0 auto;
  width:55.86%;height:100%;z-index:1;
}
.hero-art img{width:100%;height:100%;object-fit:cover;object-position:left center}
.hero-art-fade{
  position:absolute;inset:0;
  background:linear-gradient(90deg,#00060f 0%,rgba(0,6,15,.86) 1.4%,rgba(0,6,15,.28) 4.2%,rgba(0,6,15,0) 8%);
}
.hero-art-vignette{
  position:absolute;inset:0;
  background:
    radial-gradient(58% 46% at 101% 88%,rgba(1,6,13,.97) 0%,rgba(1,6,13,.82) 42%,rgba(1,6,13,0) 74%),
    linear-gradient(0deg,rgba(0,6,15,.55),rgba(0,6,15,0) 22%);
}

.hero-copy{
  position:relative;z-index:3;
  padding:0 var(--gut);
  width:min(56%,760px);
}
.hero-title{font-family:var(--serif);line-height:.94;letter-spacing:.005em}
.hero-title .l1{display:block;font-size:clamp(20px,3.35vw,53px);font-weight:600;letter-spacing:.06em;color:#fff;margin-left:.1em}
.hero-title .l2{display:block;font-size:clamp(34px,6.15vw,97px);font-weight:600;color:#fff;white-space:nowrap}
.hero-title em{
  font-style:normal;font-weight:700;
  background:linear-gradient(176deg,#f7dba3 6%,#e7b660 52%,#c9963f 100%);
  -webkit-background-clip:text;background-clip:text;color:transparent;
}
.hero-title small{font-size:.58em;font-weight:500;letter-spacing:.02em}
.hero-title .sc{font-size:.76em}
.hero-lead{
  font-family:var(--serif);font-weight:300;
  font-size:clamp(15px,2.18vw,34px);line-height:1.22;
  color:#eef1f7;margin-top:clamp(6px,.9vw,14px);
  text-shadow:0 2px 20px rgba(0,6,15,.7);
}
.hero-sub{
  font-family:var(--serif-b);font-size:clamp(10px,1.4vw,22px);
  color:#d7dde7;margin-top:clamp(5px,.75vw,12px);
  text-shadow:0 2px 16px rgba(0,6,15,.7);
}
.hero-btns{display:flex;gap:clamp(8px,1.25vw,20px);margin-top:clamp(10px,1.65vw,26px);flex-wrap:wrap}

.hero-kicker{
  position:absolute;z-index:4;right:6.1%;top:11.4%;
  font-family:var(--serif);font-size:clamp(8px,1.22vw,19px);
  letter-spacing:.17em;line-height:1.5;color:#f0f2f6;
  text-align:right;text-transform:uppercase;font-weight:400;
  text-shadow:0 2px 14px rgba(0,6,15,.8);
}
.hero-rule{
  position:absolute;z-index:4;right:14.9%;top:28%;
  width:8.2%;height:1px;
  background:linear-gradient(90deg,rgba(233,189,107,.1),rgba(233,189,107,.85),rgba(233,189,107,.1));
}
.hero-script{
  position:absolute;z-index:4;right:1.2%;top:70.5%;
  font-family:var(--hand);font-size:clamp(11px,1.72vw,27px);
  line-height:1.22;color:#eef1f7;text-align:right;
  text-shadow:0 2px 14px rgba(0,6,15,.9);
}
.hero-script .paw{width:1em;height:1em}

/* ==========================================================================
   2009 — THE STORY
   ========================================================================== */
.story{
  display:grid;
  grid-template-columns:19.6% 60.4% 20%;
  background:#0c0b0a;
  position:relative;
}
.story-left{
  padding:clamp(12px,1.9vw,30px) clamp(12px,1.9vw,30px) clamp(12px,1.9vw,30px) var(--gut);
  background:
    radial-gradient(120% 90% at 0% 40%,#232120 0%,#141312 55%,#0b0a0a 100%);
  display:flex;flex-direction:column;justify-content:center;
}
.year{
  font-family:var(--serif);font-weight:500;
  font-size:clamp(22px,3.5vw,55px);line-height:1;color:#fff;letter-spacing:.005em;
}
.year-sub{
  font-family:var(--serif);font-weight:600;
  font-size:clamp(11px,1.72vw,27px);line-height:1.05;
  text-transform:uppercase;letter-spacing:.035em;
  color:var(--gold);
  margin-top:clamp(2px,.35vw,6px);
}
.year-sub.gold{letter-spacing:.075em}
.story-body{
  font-family:var(--serif-b);font-size:clamp(9.5px,1.33vw,21px);
  line-height:1.32;color:#ded9d0;margin-top:clamp(7px,1.05vw,17px);
}
.discovery-left .story-body{font-size:clamp(9px,1.25vw,20px);line-height:1.38;margin-top:clamp(6px,.88vw,14px)}
.story-strong{
  font-family:var(--serif-b);font-weight:600;letter-spacing:.02em;
  font-size:clamp(11px,1.52vw,24px);color:#fff;margin-top:clamp(7px,.95vw,15px);
}
.story-ital{
  font-family:var(--serif-b);font-style:italic;
  font-size:clamp(9px,1.2vw,19px);line-height:1.36;
  color:#9a958e;margin-top:clamp(6px,.85vw,13px);
}

.story-photos{margin:0;position:relative;background:#0c0b0a}
.story-photos img{width:100%;height:auto;object-fit:cover}

.story-note{
  position:relative;
  padding:clamp(10px,1.12vw,18px) clamp(12px,1.8vw,28px) clamp(10px,1.12vw,18px) clamp(10px,1.45vw,23px);
  color:var(--parch-ink);
  background:
    radial-gradient(135% 118% at 22% 8%,#f5eeda 0%,#efe4c9 30%,#e0d0ad 66%,#c3af8d 100%);
  display:flex;flex-direction:column;justify-content:center;
}
.story-note::after{
  content:"";position:absolute;inset:0;pointer-events:none;opacity:.3;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23n)' opacity='.34'/%3E%3C/svg%3E");
  mix-blend-mode:multiply;
}
.story-note > *{position:relative;z-index:1}
.note-title{
  font-family:var(--serif);font-weight:600;text-transform:uppercase;letter-spacing:.015em;
  font-size:clamp(12px,1.82vw,29px);line-height:1;
  color:#241c14;display:flex;align-items:center;gap:.4em;
}
.tick{width:2px;height:.8em;background:#8a6a35;display:inline-block;border-radius:1px}
.story-note p{font-family:var(--serif-b);font-size:clamp(9px,1.19vw,19px);line-height:1.3;margin-top:clamp(4px,.58vw,9px);color:#2e2519}
.story-note strong{font-weight:600}
.story-note blockquote{
  margin:clamp(5px,.68vw,11px) 0 0;font-family:var(--serif-b);font-style:italic;
  font-size:clamp(9px,1.19vw,19px);line-height:1.32;color:#3a2e20;
}
.note-cite{color:#4a3e2e !important;font-size:clamp(8px,1.05vw,17px) !important}

/* ==========================================================================
   2026 — THE DISCOVERY
   ========================================================================== */
.discovery{
  display:grid;grid-template-columns:22.3% 1fr;
  background:#020a15;
  align-items:center;
  padding-right:clamp(10px,2.35vw,37px);
}
.discovery-left{
  padding:clamp(12px,1.45vw,23px) clamp(12px,1.8vw,28px) clamp(12px,1.45vw,23px) var(--gut);
  align-self:stretch;display:flex;flex-direction:column;justify-content:center;
  background:radial-gradient(120% 95% at 0% 45%,#1a1614 0%,#0c0b0c 52%,#04070d 100%);
}
.discovery-left .year-sub{
  background:none;color:var(--gold);
  letter-spacing:.085em;font-weight:500;
}

.tweets{
  display:grid;grid-template-columns:repeat(3,1fr);
  gap:clamp(5px,.78vw,12px);
  padding:clamp(8px,1.15vw,18px) 0;
}
.tweet{
  background:var(--tw-bg);
  border:1px solid var(--tw-bd);
  border-radius:clamp(6px,.85vw,14px);
  padding:clamp(7px,.92vw,15px) clamp(8px,1.05vw,17px);
  font-family:var(--sans);
  font-size:clamp(7.2px,.97vw,15px);
  line-height:1.38;color:var(--tw-tx);
  display:flex;flex-direction:column;
  overflow:hidden;
}
.tweet p{margin-top:clamp(5px,.65vw,10px)}
.tweet p:first-of-type{margin-top:0}
.tw-head{display:flex;align-items:flex-start;gap:clamp(5px,.72vw,11px)}
.tw-av{width:clamp(18px,2.45vw,39px);height:clamp(18px,2.45vw,39px);border-radius:50%;object-fit:cover;flex:0 0 auto}
.tw-id{display:flex;flex-direction:column;line-height:1.25;min-width:0}
.tw-name{font-weight:700;color:#f2f5f7;display:flex;align-items:center;gap:.25em;white-space:nowrap}
.flake{font-size:.9em}
.verified{width:clamp(8px,1.05vw,16px);height:clamp(8px,1.05vw,16px);color:var(--tw-blue);flex:0 0 auto}
.tw-at{color:var(--tw-mut);font-size:.94em}
.tw-more{margin-left:auto;color:var(--tw-mut);letter-spacing:.06em;line-height:.6;font-size:1.05em}
.tw-idx{color:#d3d9df;margin-top:clamp(5px,.68vw,11px) !important}
.tweet a{color:var(--tw-blue)}
.tw-media{
  width:100%;height:auto;border-radius:clamp(5px,.7vw,11px);
  margin-top:clamp(6px,.82vw,13px);object-fit:cover;
}
.tw-link{
  display:flex;gap:clamp(5px,.72vw,11px);align-items:stretch;
  border:1px solid var(--tw-bd);border-radius:clamp(5px,.7vw,11px);
  overflow:hidden;margin-top:clamp(6px,.82vw,13px);
  background:#1a1f26;color:inherit;
}
.tw-link img{width:clamp(30px,4.3vw,68px);flex:0 0 auto;object-fit:cover;height:auto}
.tw-link-body{display:flex;flex-direction:column;justify-content:center;padding:clamp(4px,.6vw,9px) clamp(5px,.7vw,11px) clamp(4px,.6vw,9px) 0;min-width:0}
.tw-link-title{color:#e2e7eb;line-height:1.3}
.tw-link-title b{font-weight:700}
.tw-link-host{color:var(--tw-mut);margin-top:.25em}
.tw-ca{word-break:break-all;color:#dfe4e9;line-height:1.5}

/* ==========================================================================
   PANORAMA
   ========================================================================== */
.panorama{position:relative;line-height:0;background:#020a15;overflow:hidden}
.panorama > img{width:100%;height:clamp(110px,14.45vw,228px);object-fit:cover;object-position:center 46%}
.pano-scrim-l,.pano-scrim-r{position:absolute;inset:0;pointer-events:none}
.pano-scrim-l{background:linear-gradient(90deg,#010810 0%,rgba(1,8,16,.98) 14%,rgba(1,8,16,.88) 21%,rgba(1,8,16,.5) 27%,rgba(1,8,16,0) 35%)}
.pano-scrim-r{background:linear-gradient(270deg,#010810 0%,rgba(1,8,16,.94) 10%,rgba(1,8,16,.66) 18%,rgba(1,8,16,0) 28%)}
.pano-overlay{
  position:absolute;inset:0;z-index:2;line-height:normal;
  display:flex;align-items:center;justify-content:space-between;
  padding:0 var(--gut);pointer-events:none;
}
.pano-overlay > *{pointer-events:auto}
.pano-left{line-height:normal}
.pano-title{
  font-family:var(--serif);font-weight:700;
  font-size:clamp(14px,2.15vw,34px);line-height:1.12;
  text-transform:uppercase;letter-spacing:.012em;color:#fff;
}
.pano-body{
  font-family:var(--serif-b);font-size:clamp(9.5px,1.36vw,21px);
  line-height:1.4;color:#e4e8ee;margin-top:clamp(5px,.85vw,13px);
}
.pano-right{
  line-height:normal;text-align:right;
  display:flex;flex-direction:column;align-items:flex-end;
}
.pano-kicker{
  font-family:var(--serif);font-size:clamp(8.5px,1.27vw,20px);
  letter-spacing:.14em;line-height:1.5;text-transform:uppercase;color:#f0f2f6;
}

/* ==========================================================================
   $DUKE
   ========================================================================== */
.token{
  position:relative;isolation:isolate;overflow:hidden;
  min-height:clamp(230px,21.9vw,345px);
  background:
    radial-gradient(90% 120% at 50% 55%,#061020 0%,#020a16 55%,#00060f 100%);
  display:flex;align-items:center;
  padding:clamp(14px,2vw,32px) var(--gut);
  gap:clamp(10px,2vw,32px);
}
.token-art{
  position:absolute;z-index:1;
  left:25.6%;top:0;width:43.6%;height:100%;
  -webkit-mask-image:linear-gradient(90deg,transparent 0,#000 12%,#000 86%,transparent 100%);
  mask-image:linear-gradient(90deg,transparent 0,#000 12%,#000 86%,transparent 100%);
}
.token-art{background:linear-gradient(90deg,#040b16,#0a1426 50%,#040b16)}
.token-art img{width:100%;height:100%;object-fit:cover;object-position:center}
.token-left{position:relative;z-index:2;width:34%;flex:0 0 auto}
.token-over{
  font-family:var(--serif);font-weight:600;
  font-size:clamp(12px,1.92vw,30px);line-height:1;
  text-transform:uppercase;letter-spacing:.028em;color:#fff;
}
.token-ticker{
  font-family:var(--serif);font-weight:700;
  font-size:clamp(24px,3.85vw,61px);line-height:1.05;letter-spacing:.005em;
  background:linear-gradient(176deg,#f7dba3 6%,#e7b660 52%,#c9963f 100%);
  -webkit-background-clip:text;background-clip:text;color:transparent;
  margin-top:clamp(1px,.2vw,4px);
}
.token-body{
  font-family:var(--serif-b);font-size:clamp(9.5px,1.36vw,21px);
  line-height:1.42;color:#e2e6ed;margin-top:clamp(6px,.95vw,15px);
}
.token-btns{display:flex;gap:clamp(6px,.92vw,15px);margin-top:clamp(10px,1.55vw,25px);flex-wrap:nowrap}
.token-btns .btn{padding-left:clamp(10px,1.55vw,25px);padding-right:clamp(10px,1.55vw,25px)}

.token-right{
  position:relative;z-index:2;margin-left:auto;align-self:stretch;
  width:38%;
  display:grid;grid-template-columns:1fr auto;grid-template-rows:auto 1fr;
  column-gap:clamp(8px,1.6vw,26px);
  padding:clamp(6px,1vw,16px) 0;
}
.ca-box{
  grid-area:1/1;align-self:start;width:100%;max-width:clamp(160px,19vw,300px);
  display:flex;align-items:center;gap:clamp(6px,.9vw,14px);
  background:rgba(5,11,21,.72);
  border:1px solid rgba(160,178,202,.28);
  border-radius:clamp(5px,.7vw,11px);
  padding:clamp(6px,.9vw,14px) clamp(8px,1.2vw,19px);
  color:var(--cream);cursor:pointer;text-align:left;
  backdrop-filter:blur(3px);
  transition:border-color .2s ease,background .2s ease;
}
.ca-box:hover{border-color:rgba(233,189,107,.6);background:rgba(8,16,28,.85)}
.ca-label{
  font-family:var(--sans);font-size:clamp(6.5px,.92vw,14px);
  letter-spacing:.14em;text-transform:uppercase;color:#a9b3c2;
  position:absolute;transform:translateY(-1.35em);
}
.ca-box{position:relative;padding-top:clamp(14px,2.05vw,32px)}
.ca-value{font-family:var(--sans);font-size:clamp(9px,1.28vw,20px);color:#eef2f7;letter-spacing:.01em}
.ca-copy{width:clamp(11px,1.45vw,23px);height:clamp(11px,1.45vw,23px);margin-left:auto;color:#c3ccda;flex:0 0 auto}

.token-feats{
  grid-area:1/2;align-self:start;
  display:flex;flex-direction:column;gap:clamp(5px,.88vw,14px);
}
.token-feats li{
  display:flex;align-items:center;gap:clamp(7px,1.1vw,17px);
  font-family:var(--sans);font-size:clamp(7px,1.02vw,16px);
  letter-spacing:.115em;text-transform:uppercase;color:#dbe1ea;font-weight:400;
}
.ico{width:clamp(11px,1.5vw,24px);height:clamp(11px,1.5vw,24px);display:grid;place-items:center;flex:0 0 auto}
.ico svg{width:100%;height:100%;fill:var(--gold)}
.arch-ico{fill:none;color:var(--gold)}
.token-script{
  grid-area:2/2;align-self:end;justify-self:end;
  font-family:var(--hand);font-size:clamp(11px,1.72vw,27px);
  line-height:1.18;color:#eef1f7;text-align:right;
}
.token-script .paw{width:1em;height:1em}

/* ==========================================================================
   DUAL PANELS
   ========================================================================== */
.dual{display:grid;grid-template-columns:45.5% 54.5%;background:#020a15}
.panel{position:relative;overflow:hidden;min-height:clamp(150px,20.9vw,330px);display:flex;align-items:center}
.panel-bg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.panel-scout .panel-bg{width:62%;object-position:left center}
.panel-fade{
  position:absolute;inset:0;
  background:linear-gradient(90deg,rgba(6,7,10,.05) 0%,rgba(6,7,10,.10) 34%,rgba(8,10,14,.72) 50%,rgba(11,14,20,.98) 58%,#0b0e14 64%,#0b0e14 100%);
}
.panel-copy{position:relative;z-index:2;padding:0 clamp(12px,1.9vw,30px)}
.panel-scout .panel-copy{margin-left:55.5%;padding-right:var(--gut)}
.panel-title{
  font-family:var(--serif);font-weight:600;
  font-size:clamp(13px,1.95vw,31px);line-height:1.14;
  text-transform:uppercase;letter-spacing:.015em;color:#fff;
}
.panel-copy p{
  font-family:var(--serif-b);font-size:clamp(9px,1.19vw,19px);
  line-height:1.4;color:#dfe4ec;margin-top:clamp(6px,1vw,16px);
}
.panel-community{background:#04101f}
.panel-scout{background:#0b0e14}
.panel-community .panel-copy{margin-left:auto;text-align:right;padding-right:var(--gut);align-self:flex-start;padding-top:clamp(10px,1.7vw,27px)}
.panel-community .panel-title{font-weight:500;letter-spacing:.02em;font-size:clamp(13px,2.08vw,33px)}
.panel-kicker{
  font-family:var(--serif) !important;letter-spacing:.115em;text-transform:uppercase;
  font-size:clamp(8px,1.2vw,19px) !important;line-height:1.55;color:#eaeef4 !important;
}
.panel-cta{
  position:absolute;right:var(--gut);bottom:clamp(8px,1.5vw,24px);
  z-index:3;
}

/* ==========================================================================
   FOOTER
   ========================================================================== */
.site-footer{
  background:linear-gradient(180deg,#010914,#000610);
  border-top:1px solid rgba(255,255,255,.05);
  padding:clamp(12px,1.9vw,30px) var(--gut);
  display:flex;align-items:center;gap:clamp(14px,2.5vw,40px);
}
.foot-brand{display:flex;align-items:center;gap:clamp(8px,1.25vw,20px);color:#fff}
.foot-brand .arch{width:clamp(18px,2.35vw,37px)}
.foot-brand > span{display:flex;flex-direction:column;gap:.15em}
.foot-brand .brand-word{font-size:clamp(9.5px,1.2vw,19px)}
.foot-tag{font-family:var(--serif-b);font-size:clamp(8.5px,1.17vw,18px);color:#c9d1dc}
.foot-legal{
  margin:0 auto;text-align:center;
  font-family:var(--serif-b);font-size:clamp(8.5px,1.17vw,18px);
  line-height:1.45;color:#cdd5e0;
}
.foot-note{
  font-family:var(--serif);font-size:clamp(8px,1.1vw,17px);
  letter-spacing:.115em;text-transform:uppercase;color:#dbe2ec;
  display:flex;align-items:center;white-space:nowrap;
}

/* ==========================================================================
   TOAST
   ========================================================================== */
.toast{
  position:fixed;left:50%;bottom:28px;transform:translate(-50%,20px);
  background:rgba(8,15,27,.96);border:1px solid rgba(233,189,107,.45);
  color:var(--gold);font-family:var(--sans);font-size:13px;letter-spacing:.06em;
  padding:10px 18px;border-radius:4px;opacity:0;pointer-events:none;
  transition:opacity .25s ease,transform .25s ease;z-index:200;
}
.toast.show{opacity:1;transform:translate(-50%,0)}

/* ==========================================================================
   REVEAL
   ========================================================================== */
@media (prefers-reduced-motion:no-preference){
  .reveal{opacity:0;transition:opacity .75s cubic-bezier(.22,.7,.3,1)}
  .reveal.in{opacity:1}
}

/* ==========================================================================
   RESPONSIVE
   ========================================================================== */
@media (max-width:1000px){
  .main-nav{
    position:fixed;inset:var(--hdr,62px) 0 auto 0;
    flex-direction:column;align-items:flex-start;gap:0;margin:0;
    background:#020b1a;border-bottom:1px solid rgba(255,255,255,.08);
    padding:6px var(--gut) 14px;
    transform:translateY(-120%);transition:transform .32s cubic-bezier(.3,.8,.3,1);
    z-index:55;
  }
  .main-nav.open{transform:none}
  .main-nav a{font-size:15px;padding:11px 0;width:100%;border-bottom:1px solid rgba(255,255,255,.05)}
  .main-nav a.is-active::after{display:none}
  .nav-toggle{display:block}
  .header-cta{display:none}
}

@media (max-width:860px){
  :root{--gut:20px}
  .hero{min-height:auto;flex-direction:column;align-items:stretch}
  .hero-art{position:relative;width:100%;height:clamp(200px,52vw,340px);order:2}
  .hero-art-fade{background:linear-gradient(0deg,#00060f 0%,rgba(0,6,15,.55) 12%,rgba(0,6,15,0) 34%)}
  .hero-art img{object-position:22% center}
  .hero-copy{width:100%;order:1;padding-top:30px;padding-bottom:22px}
  .hero-title .l2{white-space:normal;font-size:clamp(32px,10.5vw,64px)}
  .hero-title .l1{font-size:clamp(18px,5.6vw,34px)}
  .hero-lead{font-size:clamp(18px,5.4vw,32px)}
  .hero-sub{font-size:clamp(13px,3.7vw,20px)}
  .hero-kicker{right:5%;top:6%;font-size:11px}
  .hero-rule{right:5%;top:20%;width:60px}
  .hero-script{right:5%;top:auto;bottom:6%;font-size:16px}

  .story{grid-template-columns:1fr}
  .story-left{padding:26px var(--gut)}
  .story-photos img{height:auto}
  .story-note{padding:24px var(--gut)}
  .year{font-size:34px}
  .year-sub{font-size:19px}
  .story-body,.story-note p,.story-note blockquote{font-size:15px}
  .note-title{font-size:23px}

  .discovery{grid-template-columns:1fr;padding-right:0}
  .discovery-left{padding:26px var(--gut)}
  .tweets{grid-template-columns:1fr;gap:12px;padding:18px var(--gut) 26px}
  .tweet{font-size:14px;border-radius:14px;padding:14px 16px}
  .tw-av{width:40px;height:40px}
  .tw-link img{width:74px}

  .panorama > img{height:clamp(230px,62vw,330px)}
  .pano-scrim-l{background:linear-gradient(0deg,rgba(1,8,16,.2),rgba(1,8,16,.2)),linear-gradient(90deg,#010810 0%,rgba(1,8,16,.9) 30%,rgba(1,8,16,.35) 60%,rgba(1,8,16,.25) 100%)}
  .pano-scrim-r{background:none}
  .pano-overlay{flex-direction:column;align-items:flex-start;justify-content:space-between;padding:20px var(--gut) 18px}
  .pano-right{align-items:flex-start;text-align:left}
  .hr-thin.light{background:linear-gradient(90deg,rgba(255,255,255,.55),rgba(255,255,255,0))}
  .pano-title{font-size:23px}
  .pano-body{font-size:15px}
  
  .pano-kicker{font-size:11px}

  .token{flex-direction:column;align-items:flex-start;padding:26px var(--gut);gap:0;min-height:auto}
  .token-btns{flex-wrap:wrap}
  .token-art{position:relative;left:auto;top:auto;width:100%;height:clamp(180px,48vw,300px);order:2;margin:20px 0;
    -webkit-mask-image:linear-gradient(90deg,transparent 0,#000 10%,#000 90%,transparent 100%);
    mask-image:linear-gradient(90deg,transparent 0,#000 10%,#000 90%,transparent 100%)}
  .token-left{width:100%;order:1}
  .token-over{font-size:20px}
  .token-ticker{font-size:44px}
  .token-body{font-size:15px}
  .token-right{width:100%;order:3;margin-left:0;align-items:stretch}
  .ca-box{width:100%;padding-top:26px}
  .ca-label{font-size:10px}
  .ca-value{font-size:15px}
  .token-feats{position:static;transform:none;margin-top:20px;display:grid;grid-template-columns:1fr 1fr;gap:12px}
  .token-feats li{font-size:11px}
  .ico{width:18px;height:18px}
  .token-script{position:static;text-align:left;margin-top:22px;font-size:20px}

  .dual{grid-template-columns:1fr}
  .panel{min-height:clamp(230px,62vw,380px)}
  .panel-scout .panel-bg{width:100%}
  .panel-fade{background:linear-gradient(90deg,rgba(6,7,10,.2) 0%,rgba(8,10,14,.55) 40%,rgba(8,10,14,.9) 72%,rgba(11,14,20,.97) 100%)}
  .panel-scout .panel-copy{margin-left:38%;padding-right:var(--gut)}
  .panel-title{font-size:23px}
  .panel-copy p{font-size:15px}
  .panel-community{position:relative}
  .panel-community::before{
    content:"";position:absolute;inset:0;z-index:1;pointer-events:none;
    background:linear-gradient(180deg,rgba(2,8,18,.88) 0%,rgba(2,8,18,.55) 26%,rgba(2,8,18,0) 48%);
  }
  .panel-community .panel-copy{padding-top:24px}
  .panel-kicker{font-size:11px !important}
  .panel-cta{bottom:16px}
  

  .site-footer{flex-direction:column;text-align:center;gap:16px;padding:26px var(--gut)}
  .foot-brand{flex-direction:column;text-align:center}
  .foot-brand > span{align-items:center}
  .foot-legal{font-size:13px}
  .foot-note{font-size:11px;white-space:normal;justify-content:center}
}

@media (max-width:520px){
  .token-feats{grid-template-columns:1fr}
  .token-btns .btn{flex:1 1 auto}
  .hero-btns .btn{flex:1 1 auto}
}
