
:root{
  --black:#080808;
  --white:#f4f1ea;
  --yellow:#ffd400;
  --red:#e32620;
  --blue:#79cfff;
  --muted:#aaa7a0;
}
*{box-sizing:border-box}
html{background:var(--black)}
body{margin:0;background:var(--black);color:var(--white);font-family:Arial,Helvetica,sans-serif}
a{color:inherit;text-decoration:none}
img{display:block;max-width:100%}
.site-header{
  position:sticky;top:0;z-index:50;
  min-height:86px;padding:18px 30px;
  display:grid;grid-template-columns:280px 1fr auto;gap:24px;align-items:center;
  background:rgba(8,8,8,.96);border-bottom:2px solid var(--white);
}
.brand{font-size:20px;line-height:.85;font-weight:900;text-transform:uppercase}
.brand span{display:block}
.main-nav{display:flex;gap:34px;justify-content:center;flex-wrap:wrap}
.main-nav a,.language-switch a{
  font-size:13px;font-weight:900;letter-spacing:.04em;text-transform:uppercase;
  padding:6px 0;border-bottom:3px solid transparent;
}
.main-nav a:hover,.main-nav a.active,.language-switch a:hover,.language-switch a.active{
  color:var(--yellow);border-color:var(--yellow);
}
.language-switch{display:flex;gap:9px;align-items:center;font-weight:900}
.menu-toggle{display:none}
.approved-hero{background:#000}
.approved-hero img{width:100%;height:auto}
.content-page{min-height:calc(100vh - 86px);display:grid;place-items:center;padding:60px 24px}
.content-wrap{width:min(1200px,100%);border:2px solid var(--white);padding:clamp(28px,6vw,90px)}
.kicker{color:var(--yellow);font-weight:900;letter-spacing:.12em;text-transform:uppercase}
.content-wrap h1{font-size:clamp(62px,11vw,170px);line-height:.78;letter-spacing:-.07em;margin:20px 0;text-transform:uppercase}
.content-wrap h2{font-size:clamp(26px,4vw,54px);text-transform:uppercase}
.content-wrap p{font-size:clamp(18px,2.2vw,30px);line-height:1.4;max-width:850px}
.button{display:inline-flex;margin-top:24px;padding:15px 18px;border:2px solid var(--yellow);color:var(--yellow);font-weight:900;text-transform:uppercase}
.button:hover{background:var(--yellow);color:#000}
.video{width:100%;aspect-ratio:16/9;border:2px solid var(--white);background:#000}
.coming-box{border:2px solid var(--blue);color:var(--blue);padding:24px;font-size:28px;font-weight:900;text-transform:uppercase}
.site-footer{display:grid;grid-template-columns:1fr auto;gap:24px;padding:42px 30px 26px;border-top:2px solid var(--white)}
.footer-brand{font-size:clamp(32px,5vw,70px);font-weight:900;line-height:.84}
.footer-links{display:flex;gap:18px;align-items:flex-start}
.footer-links a{font-weight:900;text-transform:uppercase;border-bottom:2px solid var(--white)}
.copyright{grid-column:1/-1;color:var(--muted);font-size:12px;text-transform:uppercase}
.colorbar{height:8px;background:linear-gradient(90deg,var(--blue) 0 33.33%,var(--red) 33.33% 66.66%,var(--yellow) 66.66%)}
@media(max-width:1050px){
  .site-header{grid-template-columns:1fr auto auto}
  .main-nav{position:absolute;top:86px;left:0;right:0;display:none;flex-direction:column;align-items:center;padding:24px;background:#000;border-bottom:2px solid var(--white)}
  .main-nav.open{display:flex}
  .menu-toggle{display:inline-flex;background:transparent;color:var(--yellow);border:2px solid var(--yellow);padding:10px 12px;font-weight:900}
}
@media(max-width:640px){
  .site-header{padding:14px 16px;grid-template-columns:1fr auto}
  .language-switch{grid-column:1/-1;justify-self:end}
  .site-footer{grid-template-columns:1fr}
  .footer-links{flex-wrap:wrap}
}


/* BOOK PAGE */
.book-page{background:var(--black)}
.book-hero{
  min-height:calc(100vh - 86px);
  display:grid;grid-template-columns:1.03fr .97fr;
  border-bottom:2px solid var(--white)
}
.book-hero-copy{
  padding:clamp(42px,7vw,110px);
  display:flex;flex-direction:column;justify-content:center;align-items:flex-start
}
.book-hero-copy h1{
  max-width:900px;margin:20px 0 28px;
  font-size:clamp(58px,9vw,150px);line-height:.78;
  letter-spacing:-.07em;text-transform:uppercase
}
.book-hero-copy p{max-width:750px;font-size:clamp(19px,2.2vw,30px);line-height:1.35}
.book-cover-panel{
  position:relative;overflow:hidden;min-height:720px;
  border-left:2px solid var(--white);background:var(--red)
}
.book-cover-panel img{
  width:100%;height:100%;object-fit:cover;object-position:70% center;
  transform:scale(1.12)
}
.book-stamp{
  position:absolute;left:5%;right:5%;bottom:8%;
  padding:18px;background:#000;color:#fff;border:10px double #fff;
  font-size:clamp(24px,3vw,48px);line-height:.9;font-weight:900;
  text-align:center;text-transform:uppercase;transform:rotate(-4deg);
  box-shadow:0 8px 0 rgba(0,0,0,.45)
}
.book-section{padding:clamp(64px,8vw,130px) 30px;border-bottom:2px solid var(--white)}
.section-heading{max-width:1500px;margin:0 auto 42px}
.section-heading h2{
  margin:12px 0 0;font-size:clamp(52px,8vw,125px);
  line-height:.8;letter-spacing:-.06em;text-transform:uppercase
}
.spec-grid,.content-cards{
  width:min(1500px,100%);margin:auto;display:grid;
  grid-template-columns:repeat(4,1fr);border:2px solid var(--white)
}
.spec-card{
  min-height:250px;padding:26px;border-right:2px solid var(--white);
  display:flex;flex-direction:column;justify-content:space-between
}
.spec-card:last-child{border-right:0}
.spec-card:nth-child(1){background:var(--yellow);color:#000}
.spec-card:nth-child(2){background:var(--red)}
.spec-card:nth-child(3){background:var(--blue);color:#000}
.spec-card strong{font-size:clamp(38px,4vw,66px);line-height:.88}
.spec-card span{font-weight:900;text-transform:uppercase}
.qr-section{background:#111}
.qr-layout,.order-layout{
  width:min(1500px,100%);margin:auto;display:grid;grid-template-columns:1fr 1fr;
  border:2px solid var(--white)
}
.qr-copy,.order-copy{padding:clamp(28px,5vw,72px)}
.qr-copy p,.order-copy p{font-size:clamp(20px,2.4vw,32px);line-height:1.35}
.qr-copy ol{padding-left:24px;font-size:18px;line-height:1.65}
.qr-demo{
  min-height:560px;border-left:2px solid var(--white);
  background:var(--yellow);color:#000;padding:clamp(32px,6vw,90px);
  display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center
}
.qr-placeholder{
  width:min(320px,70vw);aspect-ratio:1;background:
  repeating-linear-gradient(0deg,#000 0 14px,#fff 14px 28px),
  repeating-linear-gradient(90deg,#000 0 14px,#fff 14px 28px);
  background-blend-mode:difference;border:18px solid #fff;outline:5px solid #000
}
.qr-demo strong{font-size:clamp(60px,8vw,120px);line-height:1;margin-top:26px}
.qr-demo span{font-size:14px;overflow-wrap:anywhere}
.blue-button{border-color:var(--blue);color:var(--blue)}
.blue-button:hover{background:var(--blue);color:#000}
.content-card{
  min-height:330px;padding:28px;border-right:2px solid var(--white);
  display:flex;flex-direction:column;background:#101010
}
.content-card:last-child{border-right:0}
.content-card>span{color:var(--yellow);font-size:20px;font-weight:900}
.content-card h3{
  margin:auto 0 18px;font-size:clamp(30px,3vw,52px);
  line-height:.9;text-transform:uppercase
}
.content-card p{color:#ccc;line-height:1.45}
.order-section{background:var(--blue);color:#000}
.order-section .kicker{color:#000}
.order-copy{display:flex;flex-direction:column;justify-content:space-between}
.order-mark{
  margin-top:60px;font-size:clamp(48px,7vw,105px);
  line-height:.78;font-weight:900;letter-spacing:-.06em
}
.interest-form{
  border-left:2px solid #000;padding:clamp(28px,5vw,72px);
  display:grid;gap:18px;background:#0a0a0a;color:var(--white)
}
.interest-form label{display:grid;gap:8px;font-weight:900;text-transform:uppercase}
.interest-form input,.interest-form textarea{
  width:100%;background:#151515;color:#fff;border:2px solid #fff;
  padding:14px;font:inherit
}
.interest-form input:focus,.interest-form textarea:focus{outline:3px solid var(--yellow);outline-offset:2px}
.order-button{cursor:pointer;background:transparent}
.interest-form small{color:#aaa;line-height:1.4}

@media(max-width:1050px){
  .book-hero,.qr-layout,.order-layout{grid-template-columns:1fr}
  .book-cover-panel,.qr-demo,.interest-form{border-left:0;border-top:2px solid var(--white)}
  .spec-grid,.content-cards{grid-template-columns:repeat(2,1fr)}
  .spec-card:nth-child(2n),.content-card:nth-child(2n){border-right:0}
  .spec-card,.content-card{border-bottom:2px solid var(--white)}
  .spec-card:nth-last-child(-n+2),.content-card:nth-last-child(-n+2){border-bottom:0}
}
@media(max-width:640px){
  .book-section{padding-left:16px;padding-right:16px}
  .spec-grid,.content-cards{grid-template-columns:1fr}
  .spec-card,.content-card{border-right:0;border-bottom:2px solid var(--white)!important}
  .spec-card:last-child,.content-card:last-child{border-bottom:0!important}
  .book-cover-panel{min-height:540px}
}


/* QR ARCHIVE 001–201 */
.archive-page{background:#080808;min-height:100vh}
.archive-hero{
  display:grid;grid-template-columns:.72fr 1.28fr;
  min-height:460px;border-bottom:2px solid var(--white)
}
.archive-number-panel{
  padding:clamp(34px,6vw,90px);
  background:var(--yellow);color:#000;
  display:flex;flex-direction:column;justify-content:space-between
}
.archive-number{
  font-size:clamp(110px,18vw,280px);line-height:.68;
  font-weight:900;letter-spacing:-.09em
}
.archive-index{font-weight:900;text-transform:uppercase}
.archive-copy{
  padding:clamp(38px,7vw,110px);
  display:flex;flex-direction:column;justify-content:center
}
.archive-copy h1{
  margin:0 0 24px;font-size:clamp(54px,8vw,130px);
  line-height:.82;letter-spacing:-.06em;text-transform:uppercase
}
.archive-copy p{font-size:clamp(19px,2.3vw,30px);line-height:1.4;max-width:900px}
.archive-meta{display:flex;gap:28px;flex-wrap:wrap;margin-top:30px}
.archive-meta div{display:grid;gap:5px;border-top:2px solid var(--blue);padding-top:10px}
.archive-meta span{color:var(--blue);font-size:12px;font-weight:900;text-transform:uppercase}
.archive-video-section{padding:clamp(28px,6vw,90px);border-bottom:2px solid var(--white)}
.video-frame{
  width:min(1400px,100%);margin:auto;aspect-ratio:16/9;
  border:2px solid var(--white);background:#000
}
.video-frame iframe{width:100%;height:100%;border:0}
.archive-coming{
  width:min(1400px,100%);min-height:520px;margin:auto;
  border:2px solid var(--blue);color:var(--blue);
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  text-align:center;padding:30px
}
.archive-coming span{
  font-size:clamp(110px,18vw,260px);line-height:.7;
  font-weight:900;letter-spacing:-.08em
}
.archive-coming strong{
  margin-top:40px;font-size:clamp(24px,4vw,58px);text-transform:uppercase
}
.archive-navigation{
  display:grid;grid-template-columns:1fr auto 1fr;gap:20px;
  align-items:center;padding:28px 30px;border-bottom:2px solid var(--white)
}
.archive-navigation>div:last-child{text-align:right}
.archive-navigation a{
  display:inline-flex;padding:12px 14px;border:2px solid var(--yellow);
  color:var(--yellow);font-weight:900;text-transform:uppercase
}
.archive-navigation a:hover{background:var(--yellow);color:#000}
.archive-book-link{border-color:var(--blue)!important;color:var(--blue)!important}
.archive-book-link:hover{background:var(--blue)!important;color:#000!important}

@media(max-width:900px){
  .archive-hero{grid-template-columns:1fr}
  .archive-number-panel{min-height:300px}
  .archive-navigation{grid-template-columns:1fr}
  .archive-navigation>div,.archive-navigation>div:last-child{text-align:center}
  .archive-book-link{justify-self:center}
}
