@import url('https://fonts.googleapis.com/css2?family=Permanent+Marker&family=Courier+Prime:wght@400;700&family=Inter:wght@400;500;600;700&display=swap');

:root{
  --paper:#f3eee9;
  --ink:#11110f;
  --red:#c94231;
  --muted:#746e68;
  --sidebar:220px;
}
*{box-sizing:border-box}
html,body{margin:0;padding:0;background:var(--paper);color:var(--ink);font-family:"Courier Prime",monospace}
body{overflow:hidden}
a{color:inherit;text-decoration:none}
img{display:block;width:100%;height:100%;object-fit:cover}
h1,h2,h3,p{margin-top:0}

.sidebar{
  position:fixed;left:0;top:0;width:var(--sidebar);height:100vh;
  background:#101010;color:#fff;padding:30px 25px 22px;z-index:50;
  display:flex;flex-direction:column;
}
.logo{width:166px;height:auto}
.logo-sub{font:500 11px Inter,sans-serif;letter-spacing:.15em;margin-top:9px}
.seal{margin-top:18px;align-self:flex-start;color:var(--red);border:1px solid var(--red);padding:4px 6px;font-size:10px}
.chapter-nav{margin-top:52px;display:grid;gap:16px;font:500 10px/1.25 Inter,sans-serif;text-transform:uppercase}
.chapter-nav a{display:flex;gap:9px;color:#c9c9c9}
.chapter-nav b{color:#666;font-weight:600}
.chapter-nav a.active,.chapter-nav a:hover{color:var(--red)}
.chapter-nav a.active b{color:var(--red)}
.progress{width:1px;flex:1;max-height:130px;background:#444;margin:28px 0 0 9px;position:relative}
.progress span{position:absolute;top:0;left:-1px;width:3px;height:14%;background:var(--red)}
.side-bottom{margin-top:auto;font-size:9px;color:#aaa}
.mobile-head{display:none}

.horizontal-shell{
  margin-left:var(--sidebar);
  width:calc(100vw - var(--sidebar));
  height:100vh;
  overflow:hidden;
}
.panels{
  height:100%;
  display:flex;
  will-change:transform;
  transition:transform .72s cubic-bezier(.22,.61,.36,1);
}
.panel{
  flex:0 0 calc(100vw - var(--sidebar));
  width:calc(100vw - var(--sidebar));
  height:100vh;
  position:relative;
  overflow:hidden;
  background:var(--paper);
}
.panel::after{
  content:"";position:absolute;inset:0;pointer-events:none;opacity:.09;
  background:
    radial-gradient(circle at 15% 25%,rgba(60,40,25,.13) 0 1px,transparent 1.3px),
    radial-gradient(circle at 70% 65%,rgba(60,40,25,.08) 0 1px,transparent 1.3px);
  background-size:19px 19px,29px 29px;
  mix-blend-mode:multiply;
}
.eyebrow{
  font:700 10px Inter,sans-serif;text-transform:uppercase;letter-spacing:.13em;
  color:var(--red);margin-bottom:18px;
}
em{color:var(--red);font-style:normal}
.red-line{width:90px;height:3px;background:var(--red);margin:22px 0 28px}
.small{font-size:13px!important;color:var(--muted)}

.intro-panel{display:grid;grid-template-columns:.9fr 1.1fr}
.intro-copy{padding:9vh 5vw 7vh 6vw;display:flex;flex-direction:column;justify-content:center}
.intro-copy h1{font:400 clamp(60px,6.4vw,102px)/.9 "Permanent Marker",cursive;letter-spacing:-.035em;margin:0}
.intro-copy p{font-size:17px;line-height:1.7;max-width:650px}
.intro-art{position:relative;overflow:hidden}
.circle{position:absolute;border-radius:50%;border:1px solid rgba(17,17,15,.12)}
.circle.one{width:620px;height:620px;right:-120px;top:-80px}
.circle.two{width:430px;height:430px;right:120px;bottom:-130px;border-color:rgba(201,66,49,.25)}
.brush-world{position:absolute;left:10%;top:43%;font:400 72px/.9 "Permanent Marker";transform:rotate(-7deg);color:rgba(17,17,15,.82)}
.paper-mark{position:absolute;right:32px;top:32px;writing-mode:vertical-rl;color:var(--red);border:1px solid var(--red);padding:10px 7px;font-size:17px}
.scroll-hint{position:absolute;left:6vw;bottom:28px;font:600 10px Inter,sans-serif;text-transform:uppercase;color:var(--muted)}

.project-panel{display:grid;grid-template-columns:1.15fr .85fr}
.project-image{position:relative;overflow:hidden}
.project-image img{object-position:center}
.image-fade{position:absolute;inset:0;background:linear-gradient(90deg,transparent 0 62%,rgba(243,238,233,.18) 78%,var(--paper) 100%)}
.project-copy{padding:7vh 5vw 6vh 4vw;display:flex;flex-direction:column;justify-content:center}
.project-copy h2{font:400 clamp(58px,6vw,96px)/.9 "Permanent Marker";margin:0 0 18px}
.tags{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:24px}
.tags span{border:1px solid rgba(17,17,15,.25);padding:6px 9px;font:600 9px Inter,sans-serif;text-transform:uppercase}
.project-copy .pitch{font-size:18px;line-height:1.55}
.project-copy>p{font-size:14px;line-height:1.65;max-width:640px}
.project-meta{display:grid;grid-template-columns:1fr 1fr;gap:13px 20px;margin:24px 0}
.project-meta div{border-top:1px solid rgba(17,17,15,.22);padding-top:9px}
.project-meta strong{display:block;color:var(--red);font:700 9px Inter,sans-serif;text-transform:uppercase;margin-bottom:4px}
.project-meta span{font-size:11px;line-height:1.35}
.outline-btn{align-self:flex-start;border-bottom:1px solid #111;padding-bottom:6px;font:700 10px Inter,sans-serif;text-transform:uppercase}
.outline-btn:hover{color:var(--red);border-color:var(--red)}

.development-panel{display:grid;grid-template-columns:1fr .9fr;background:#111;color:#fff}
.development-copy{padding:7vh 5vw 6vh 6vw;display:flex;flex-direction:column;justify-content:center}
.development-copy h2,.journey-copy h2,.future-copy h2,.partner-copy h2{
  font:400 clamp(55px,5.8vw,92px)/.91 "Permanent Marker";margin:0 0 24px
}
.development-copy>p{font-size:15px;line-height:1.65;color:#ddd;max-width:700px}
.world-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin:24px 0}
.world-grid div{border-top:1px solid rgba(255,255,255,.25);padding-top:10px}
.world-grid strong{display:block;font:600 11px Inter,sans-serif;color:#fff;margin-bottom:5px}
.world-grid span{font-size:10px;line-height:1.4;color:#bbb}
.roadmap{display:grid;grid-template-columns:repeat(4,1fr);gap:8px;margin-top:18px}
.roadmap-step{border-top:2px solid #555;padding-top:9px}
.roadmap-step.done{border-color:#888}.roadmap-step.active{border-color:var(--red)}
.roadmap-step b{display:block;color:var(--red);font:700 9px Inter,sans-serif;margin-bottom:4px}
.roadmap-step span{font-size:9px;color:#ccc}
.development-art{position:relative;display:grid;place-items:center}
.poster{width:56%;height:70%;background:linear-gradient(180deg,#eee6d9,#c88f48);position:relative;overflow:hidden;box-shadow:0 30px 80px rgba(0,0,0,.5)}
.poster .tower{position:absolute;left:37%;bottom:0;width:27%;height:83%;background:#d5c0a0;clip-path:polygon(30% 0,70% 0,100% 100%,0 100%)}
.poster span{position:absolute;left:10px;bottom:8px;color:var(--red);font:400 44px "Permanent Marker"}
.note{position:absolute;bottom:9%;right:8%;font-size:9px;color:#999;writing-mode:vertical-rl;text-transform:uppercase}

.sunrise-panel .project-image img{object-position:center}
.sunrise-journey{display:grid;grid-template-columns:1.1fr .9fr}
.journey-copy{padding:7vh 4vw 6vh 6vw;display:flex;flex-direction:column;justify-content:center}
.journey-copy>p{font-size:15px;line-height:1.65;max-width:760px}
.milestones{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin-top:25px}
.milestones article{border-top:1px solid rgba(17,17,15,.22);padding-top:10px}
.milestones strong{color:var(--red);font:700 10px Inter,sans-serif}
.milestones h3{font:400 19px "Permanent Marker";margin:7px 0}
.milestones p{font-size:10px;line-height:1.45;margin:0}
.sunrise-art{position:relative;background:#121923;overflow:hidden}
.sun-disc{position:absolute;width:420px;height:420px;border-radius:50%;background:radial-gradient(circle,#ffce5d 0 25%,#d26740 44%,rgba(210,103,64,.1) 65%,transparent 70%);right:8%;top:9%}
.ship{position:absolute;left:14%;bottom:22%;font:400 68px "Permanent Marker";color:#fff;transform:rotate(-8deg)}
.stars{position:absolute;inset:0;background-image:radial-gradient(circle,#fff 0 1px,transparent 1.5px);background-size:38px 38px;opacity:.35}

.future-panel{display:grid;grid-template-columns:1fr 1fr}
.future-copy{padding:8vh 5vw 7vh 6vw;display:flex;flex-direction:column;justify-content:center}
.future-copy p{font-size:15px;line-height:1.7;max-width:650px}
.future-files{position:relative;display:grid;place-items:center}
.file-card{position:absolute;width:52%;height:58%;border:1px solid rgba(17,17,15,.22);background:#e8e0d6;padding:20px;box-shadow:0 25px 60px rgba(0,0,0,.12)}
.file-card span{font:700 10px Inter,sans-serif;color:var(--red)}
.file-card b{position:absolute;left:20px;bottom:20px;font:400 28px "Permanent Marker"}
.file-card.one{transform:rotate(-8deg) translate(-70px,15px)}
.file-card.two{transform:rotate(5deg) translate(65px,-25px);background:#eee7de}
.file-card.three{transform:rotate(1deg) translate(18px,45px);background:#111;color:#fff}

.partner-panel{display:grid;grid-template-columns:1fr .8fr;background:#111;color:#fff}
.partner-copy{padding:8vh 5vw 7vh 6vw;display:flex;flex-direction:column;justify-content:center}
.partner-copy>p{font-size:15px;line-height:1.7;max-width:700px;color:#ddd}
.access-list{display:grid;grid-template-columns:1fr 1fr;gap:12px 25px;margin:24px 0 30px}
.access-list span{border-top:1px solid rgba(255,255,255,.25);padding-top:9px;font-size:11px}
.cta-btn{align-self:flex-start;background:var(--red);padding:15px 19px;font:700 10px Inter,sans-serif;text-transform:uppercase}
.back-link{margin-top:24px;align-self:flex-start;font-size:10px;color:#aaa}
.partner-art{position:relative;display:grid;place-items:center}
.red-square{width:310px;height:310px;border:2px solid var(--red);transform:rotate(8deg)}
.jp-large{position:absolute;font-size:40px;writing-mode:vertical-rl;color:#fff;letter-spacing:.14em}

@media(max-width:900px){
  body{overflow:auto}
  .sidebar{display:none}
  .mobile-head{
    display:flex;position:fixed;top:0;left:0;right:0;height:64px;background:#111;z-index:60;
    padding:12px 18px;align-items:center;justify-content:space-between
  }
  .mobile-head img{width:135px;height:auto}
  .mobile-head a{color:#fff;font:600 10px Inter,sans-serif;text-transform:uppercase}
  .horizontal-shell{margin-left:0;width:100%;height:auto;overflow:visible;padding-top:64px}
  .panels{display:block;height:auto;transform:none!important;transition:none}
  .panel{width:100%;height:auto;min-height:auto;overflow:visible}
  .intro-panel,.project-panel,.development-panel,.sunrise-journey,.future-panel,.partner-panel{display:block}
  .intro-copy,.project-copy,.development-copy,.journey-copy,.future-copy,.partner-copy{padding:60px 24px}
  .intro-copy h1,.project-copy h2,.development-copy h2,.journey-copy h2,.future-copy h2,.partner-copy h2{font-size:50px}
  .intro-art{height:360px}
  .project-image{height:390px}
  .image-fade{background:linear-gradient(180deg,transparent 40%,var(--paper) 100%)}
  .project-meta,.world-grid,.roadmap,.milestones,.access-list{grid-template-columns:1fr}
  .development-art,.sunrise-art,.future-files,.partner-art{height:430px}
  .file-card{width:62%;height:58%}
}


/* New top-navigation layout */
.sidebar,.mobile-head{display:none!important}
.horizontal-shell{margin-left:0!important;width:100vw!important}