@import url('https://fonts.googleapis.com/css2?family=Bebas+Neue&family=Noto+Serif+JP:wght@500;700&family=Noto+Sans+JP:wght@300;400;500;700&display=swap');

:root{
  --red:#e31b23;
  --red-dark:#8d0d12;
  --ink:#070707;
  --ink2:#101010;
  --paper:#efeee9;
  --paper2:#deddd8;
  --muted:#9a9a9a;
  --line:#2b2b2b;
  --serif:"Noto Serif JP","Yu Mincho",serif;
  --sans:"Noto Sans JP",-apple-system,BlinkMacSystemFont,"Yu Gothic",sans-serif;
  --display:"Bebas Neue",Impact,sans-serif;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;background:var(--ink);color:#f2f2f2;
  font-family:var(--sans);line-height:1.9;
  letter-spacing:.015em;overflow-x:hidden
}
body:before{
  content:"";position:fixed;inset:0;pointer-events:none;z-index:1000;
  background:linear-gradient(180deg,rgba(255,255,255,.015),transparent 20%,transparent 80%,rgba(255,255,255,.01));
  mix-blend-mode:screen
}
.grain{
  position:fixed;inset:-50%;z-index:999;pointer-events:none;opacity:.055;
  background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.85'/%3E%3C/svg%3E");
  animation:grain .22s steps(2) infinite
}
@keyframes grain{0%{transform:translate(0,0)}25%{transform:translate(2%,-1%)}50%{transform:translate(-1%,2%)}75%{transform:translate(1%,1%)}100%{transform:translate(0,0)}}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
::selection{background:var(--red);color:#fff}

.site-header{
  position:fixed;left:0;right:0;top:0;height:78px;
  display:flex;align-items:center;padding:0 4vw;z-index:50;
  background:linear-gradient(180deg,rgba(0,0,0,.9),rgba(0,0,0,.42),transparent);
  backdrop-filter:blur(8px)
}
.logo,.section-head p,.eyebrow,.footer-logo,.kicker{font-family:var(--display);letter-spacing:.08em}
.logo{font-size:25px;line-height:.68;color:#fff}
.logo::first-line{color:var(--red)}
.nav{margin-left:auto;display:flex;gap:26px;font-size:10px;letter-spacing:.17em}
.nav a{opacity:.72;position:relative}
.nav a:after{content:"";position:absolute;left:0;right:100%;bottom:-6px;height:1px;background:var(--red);transition:.25s}
.nav a:hover{opacity:1}.nav a:hover:after{right:0}
.menu{display:none;margin-left:auto;background:none;border:0;width:42px}
.menu span{display:block;height:1px;background:#fff;margin:8px 0}

.hero{
  position:relative;min-height:100vh;display:flex;align-items:flex-end;overflow:hidden;
  isolation:isolate;background:#000
}
.hero-image{
  position:absolute;inset:0;
  background:url("assets/deck-1.jpg") center 38%/cover no-repeat;
  filter:saturate(.72) contrast(1.18) brightness(.72);
  transform:scale(1.025)
}
.hero-shade{
  position:absolute;inset:0;
  background:
    radial-gradient(circle at 72% 35%,transparent 0 17%,rgba(0,0,0,.25) 44%,rgba(0,0,0,.65) 100%),
    linear-gradient(90deg,rgba(0,0,0,.93) 0,rgba(0,0,0,.56) 38%,rgba(0,0,0,.14) 66%,rgba(0,0,0,.52) 100%),
    linear-gradient(0deg,#070707 0,rgba(7,7,7,.64) 17%,transparent 48%);
  z-index:1
}
.hero-line{position:absolute;z-index:2;background:var(--red);opacity:.8;transform:rotate(-18deg)}
.line-a{width:42vw;height:1px;right:-4vw;top:23vh}
.line-b{width:19vw;height:1px;left:42vw;bottom:15vh}
.hero-copy{position:relative;z-index:3;padding:0 7vw 10vh;max-width:1080px}
.kicker{font-size:12px;color:#ddd;margin-bottom:13px}
.kicker span{color:var(--red)}
.hero h1{
  font-family:var(--display);font-size:clamp(86px,15vw,220px);
  line-height:.68;margin:10px 0 22px;letter-spacing:-.015em;
  text-shadow:0 14px 55px rgba(0,0,0,.8)
}
.hero h1 span{color:var(--red);-webkit-text-stroke:.5px rgba(255,255,255,.1)}
.jp-title{display:flex;gap:18px;align-items:baseline;flex-wrap:wrap;margin:0}
.jp-title span{font-family:var(--serif);font-size:clamp(20px,2.2vw,30px);font-weight:700}
.jp-title em{font-style:normal;font-size:clamp(13px,1.2vw,17px);color:#c4c4c4}
.tagline{
  margin:46px 0 30px;font-family:var(--serif);
  font-size:clamp(22px,2.7vw,38px);font-weight:700
}
.hero-actions{display:flex;gap:12px;flex-wrap:wrap}
.btn{
  display:inline-flex;align-items:center;justify-content:center;
  min-height:46px;padding:12px 27px;border:1px solid #5f5f5f;
  font-size:10px;letter-spacing:.17em;font-weight:700;
  transition:.25s;background:rgba(0,0,0,.16)
}
.btn.primary{background:var(--red);border-color:var(--red)}
.btn.ghost{background:rgba(0,0,0,.35);backdrop-filter:blur(5px)}
.btn:hover{transform:translateY(-2px);box-shadow:0 10px 30px rgba(0,0,0,.28)}
.scroll{
  position:absolute;right:2.6vw;bottom:6vh;z-index:3;
  writing-mode:vertical-rl;font-size:8px;letter-spacing:.4em;color:#aaa
}
.scroll:before{content:"";display:inline-block;width:1px;height:52px;background:var(--red);margin-bottom:12px}

.manifesto{
  position:relative;text-align:center;padding:58px 8vw;
  background:var(--paper);color:#7b4747;font-family:var(--serif);
  border-top:1px solid #fff;border-bottom:1px solid #c8c7c2
}
.manifesto:before{
  content:"DHAMMA";position:absolute;left:3vw;top:50%;transform:translateY(-52%);
  font-family:var(--display);font-size:clamp(80px,14vw,210px);line-height:1;
  color:rgba(95,30,30,.035);letter-spacing:.02em
}
.manifesto p{position:relative;font-size:clamp(13px,1.5vw,19px);margin:0 0 6px}
.manifesto small{position:relative;color:#9d6b6b}

.section{position:relative;padding:125px max(7vw,24px);max-width:1500px;margin:auto}
.section:after{content:"";position:absolute;left:7vw;right:7vw;bottom:0;border-bottom:1px solid var(--line)}
.inverse{
  max-width:none;background:var(--paper);color:#171717;
  padding-left:max(7vw,calc((100vw - 1500px)/2 + 7vw));
  padding-right:max(7vw,calc((100vw - 1500px)/2 + 7vw))
}
.inverse:after{border-color:#c9c8c3}
.section-head{margin-bottom:58px;display:grid;grid-template-columns:auto 1fr;column-gap:20px;align-items:end}
.section-head .no{grid-row:1/3;align-self:start;color:var(--red);font-family:var(--display);font-size:18px;letter-spacing:.16em;margin-top:10px}
.section-head p{
  font-size:clamp(60px,9vw,126px);line-height:.72;color:var(--red);
  margin:0;letter-spacing:.015em
}
.section-head h2{
  font-family:var(--serif);font-size:clamp(25px,3vw,42px);
  font-weight:700;margin:12px 0 0;letter-spacing:.02em
}
.section-head:after{
  content:"";grid-column:2;width:74px;height:2px;background:var(--red);margin-top:24px
}

.two-col,.tone-grid,.creator-panel{display:grid;grid-template-columns:1fr 1fr;gap:74px;align-items:center}
.lead{font-size:clamp(20px,2.05vw,29px);line-height:1.75;font-weight:600}
.lead.small{font-size:20px}
.facts{
  display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:#333;
  margin:38px 0;border:1px solid #333
}
.facts div{background:#0d0d0d;padding:19px 20px}
.facts dt{font-size:10px;color:#8e8e8e;letter-spacing:.13em}
.facts dd{margin:4px 0;font-weight:700}
.image-frame{
  position:relative;margin:0;overflow:hidden;background:#111;
  box-shadow:0 28px 90px rgba(0,0,0,.34)
}
.image-frame:after{content:"";position:absolute;inset:0;border:1px solid rgba(255,255,255,.12);pointer-events:none}
.image-frame img{width:100%;height:100%;object-fit:cover;transition:.7s}
.image-frame:hover img{transform:scale(1.018)}

.story-page{overflow:hidden}
.story-page:before{
  content:"STORY";position:absolute;right:-2vw;top:50%;transform:translateY(-50%) rotate(90deg);
  font-family:var(--display);font-size:clamp(110px,18vw,280px);line-height:1;
  color:rgba(0,0,0,.035);letter-spacing:.03em
}
.synopsis{max-width:940px;position:relative}
.synopsis.editorial{padding-left:clamp(0px,5vw,70px)}
.synopsis.editorial .lead:first-letter{
  float:left;font-family:var(--display);font-size:84px;line-height:.74;
  color:var(--red);padding:9px 10px 0 0
}
.synopsis blockquote{
  border-left:3px solid var(--red);margin:50px 0 0;padding:14px 0 14px 28px;
  font-family:var(--serif);font-size:clamp(21px,2.25vw,32px);font-weight:700
}

.character-grid{
  display:grid;grid-template-columns:repeat(4,1fr);gap:1px;
  background:#333;border:1px solid #333
}
.character-grid article{
  position:relative;background:#0c0c0c;padding:30px;min-height:275px;overflow:hidden;
  transition:.25s
}
.character-grid article:before{
  content:"";position:absolute;left:0;top:0;width:4px;height:0;background:var(--red);transition:.3s
}
.character-grid article:hover{transform:translateY(-4px);z-index:2;box-shadow:0 18px 45px #000}
.character-grid article:hover:before{height:100%}
.character-grid article:nth-child(even){background:#e7e6e1;color:#1d1d1d}
.character-grid span{font-family:var(--display);font-size:14px;color:var(--red)}
.character-grid h3{font-family:var(--serif);font-size:22px;margin:10px 0}
.character-grid b{font-size:11px;color:var(--red);letter-spacing:.04em}
.character-grid p{font-size:13px;margin-top:18px}

.tone{
  max-width:none;background:
  linear-gradient(180deg,rgba(255,255,255,.018),transparent),
  #181818;
  padding-left:max(7vw,calc((100vw - 1500px)/2 + 7vw));
  padding-right:max(7vw,calc((100vw - 1500px)/2 + 7vw))
}
.refs{list-style:none;padding:0;margin-top:32px;display:flex;gap:10px;flex-wrap:wrap}
.refs li{border:1px solid #454545;padding:7px 12px;font-size:11px;letter-spacing:.08em}

.casting{background:#090909}
.casting-layout{display:grid;grid-template-columns:1.1fr .9fr;gap:58px}
.notice{border-top:1px solid #444;margin-top:36px;padding-top:26px}
.notice h3{color:var(--red);font-family:var(--serif);font-size:24px}
.royalty{
  position:relative;background:linear-gradient(145deg,var(--red),var(--red-dark));
  padding:42px;box-shadow:0 28px 80px rgba(142,0,0,.26);overflow:hidden
}
.royalty:after{
  content:"30%";position:absolute;right:-12px;bottom:-34px;
  font-family:var(--display);font-size:160px;color:rgba(255,255,255,.09);line-height:1
}
.royalty .eyebrow{color:#fff}
.royalty h3{position:relative;font-family:var(--serif);font-size:clamp(23px,2.4vw,34px);line-height:1.55}
.royalty p{position:relative}
.eyebrow{font-family:var(--display);font-size:14px;color:var(--red);letter-spacing:.18em}

.timeline{display:grid;grid-template-columns:1fr 1fr;gap:0 50px;max-width:1120px}
.timeline div{
  position:relative;padding:24px 0;border-bottom:1px solid #c7c6c0;
  display:grid;grid-template-columns:180px 1fr;gap:20px
}
.timeline div:before{content:"";position:absolute;left:0;bottom:-1px;width:0;height:1px;background:var(--red);transition:.35s}
.timeline div:hover:before{width:100%}
.timeline b{color:var(--red);font-size:14px}

.support{background:#121212}
.support-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:#333}
.support-grid article{
  position:relative;background:#090909;padding:36px;min-height:270px;overflow:hidden
}
.support-grid article:after{
  content:"";position:absolute;right:-45px;bottom:-45px;width:120px;height:120px;
  border:1px solid rgba(227,27,35,.24);transform:rotate(45deg)
}
.support-grid h3{font-family:var(--display);color:var(--red);font-size:34px;letter-spacing:.05em;margin-top:0}

.creator{background:#050505}
.creator-panel{align-items:stretch}
.creator-panel>div{display:flex;flex-direction:column;justify-content:center}
.contact-section{
  position:relative;text-align:center;padding:120px 7vw;background:var(--paper);color:#111;overflow:hidden
}
.contact-section:before{
  content:"CONTACT";position:absolute;left:50%;top:50%;transform:translate(-50%,-52%);
  font-family:var(--display);font-size:clamp(110px,22vw,330px);color:rgba(0,0,0,.035);line-height:1
}
.contact-section>*{position:relative}
.contact-section h2{font-family:var(--serif);font-size:clamp(34px,5vw,66px);margin:7px 0 18px}
.mail{
  display:block;
  font-family:var(--sans);
  font-size:clamp(22px,3vw,42px);
  font-weight:500;
  text-transform:lowercase !important;
  letter-spacing:.01em;
  color:var(--red);
  margin:28px 0;
  line-height:1.25
}
.site{text-decoration:underline;text-underline-offset:4px}

footer{
  padding:44px 6vw;display:flex;justify-content:space-between;align-items:end;
  border-top:1px solid #222;color:#6d6d6d;font-size:10px
}
.footer-logo{font-size:30px;color:#ddd}
.reveal{opacity:0;transform:translateY(26px);transition:.78s cubic-bezier(.2,.7,.2,1)}
.reveal.show{opacity:1;transform:none}

@media(max-width:1000px){
  .nav{display:none}.menu{display:block}
  .nav-open .nav{
    display:flex;position:fixed;inset:76px 0 auto 0;background:#080808f7;
    padding:30px 5vw 35px;flex-direction:column;gap:18px;border-bottom:1px solid #222
  }
  .two-col,.tone-grid,.creator-panel,.casting-layout{grid-template-columns:1fr}
  .character-grid{grid-template-columns:1fr 1fr}
  .support-grid{grid-template-columns:1fr}
  .facts{grid-template-columns:1fr}
  .timeline{grid-template-columns:1fr}
  .hero-image{background-position:60% center}
}
@media(max-width:640px){
  .site-header{height:68px}
  .hero-copy{padding:0 6vw 9vh}
  .hero h1{font-size:24vw}
  .jp-title{gap:6px;flex-direction:column}
  .section{padding:84px 6vw}
  .inverse,.tone{padding-left:6vw;padding-right:6vw}
  .section-head{grid-template-columns:auto 1fr;column-gap:12px}
  .section-head p{font-size:17vw}
  .section-head h2{font-size:28px}
  .character-grid{grid-template-columns:1fr}
  .timeline div{grid-template-columns:1fr;gap:2px}
  .hero-actions{flex-direction:column;align-items:flex-start}
  .manifesto{padding:38px 6vw}
  .contact-section{padding:84px 6vw}
  .synopsis.editorial{padding-left:0}
  .story-page:before{display:none}
  footer{flex-direction:column;align-items:flex-start;gap:14px}
}