/* TM101 — shared styles
   Palette: black / bone / volt (+ rec-red for Breaking). Type: Khand (wordmark),
   Archivo Black (display), Inter (body), Space Mono (timecodes & HUD labels). */

:root{
  --black:#000000;
  --ink:#0B0B0A;
  --bone:#F1EDE4;
  --bone80:rgba(241,237,228,.8);
  --bone55:rgba(241,237,228,.55);
  --bone35:rgba(241,237,228,.35);
  --hairline:rgba(241,237,228,.16);
  --volt:#CCFF00;
  --rec:#FF2A2A;
  --pad:clamp(20px,5vw,64px);
}
*{margin:0;padding:0;box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{background:var(--black);color:var(--bone);font-family:'Inter',sans-serif;
  font-size:16px;line-height:1.55;-webkit-font-smoothing:antialiased;}
a{color:inherit;text-decoration:none;}
button{font:inherit;color:inherit;background:none;border:none;cursor:pointer;}
img,svg{max-width:100%;display:block;}
:focus-visible{outline:2px solid var(--volt);outline-offset:3px;}
::selection{background:var(--volt);color:#000;}

section{padding:clamp(64px,10vw,120px) var(--pad);border-top:1px solid var(--hairline);}

/* type roles */
.display{font-family:'Archivo Black',sans-serif;font-weight:400;text-transform:uppercase;
  letter-spacing:-.02em;line-height:.94;}
.khand{font-family:'Khand',sans-serif;font-weight:700;text-transform:uppercase;
  line-height:.8;letter-spacing:-.005em;}
.mono{font-family:'Space Mono',monospace;font-size:11px;letter-spacing:.08em;}
.micro{font-size:10px;font-weight:600;letter-spacing:.24em;text-transform:uppercase;color:var(--bone55);}
.micro.volt{color:var(--volt);}
.dim{color:var(--bone55);}
.volt{color:var(--volt);}
.num{font-family:'Archivo Black',sans-serif;color:var(--volt);font-size:13px;letter-spacing:.06em;}
h2.display{font-size:clamp(38px,6vw,72px);margin-bottom:26px;}
.lede{max-width:620px;color:var(--bone55);}

/* recording dot — Breaking */
.dot-red{display:inline-block;width:7px;height:7px;border-radius:50%;background:var(--rec);
  margin-right:8px;vertical-align:1px;animation:blink 1.2s steps(1) infinite;}
.dot-red.lg{width:clamp(12px,1.6vw,20px);height:clamp(12px,1.6vw,20px);margin:0 0 0 18px;
  vertical-align:clamp(6px,1vw,14px);}

/* nav */
nav{position:fixed;top:0;left:0;right:0;z-index:50;display:flex;justify-content:space-between;
  align-items:center;padding:16px var(--pad);background:rgba(0,0,0,.82);
  backdrop-filter:blur(10px);border-bottom:1px solid var(--hairline);}
nav .brand{font-family:'Khand',sans-serif;font-weight:700;font-size:26px;line-height:1;
  display:flex;align-items:flex-start;gap:7px;}
.rec-dot{width:6px;height:6px;border-radius:50%;background:var(--volt);margin-top:4px;
  animation:blink 1.6s steps(1) infinite;}
@keyframes blink{50%{opacity:.15;}}
nav .links{display:flex;gap:28px;align-items:center;}
nav .links a{font-size:10px;font-weight:600;letter-spacing:.22em;text-transform:uppercase;
  color:var(--bone55);transition:color .2s;}
nav .links a:hover{color:var(--volt);}
nav .links a.active{color:var(--volt);}
.menu-btn{display:none;font-size:10px;font-weight:700;letter-spacing:.22em;text-transform:uppercase;
  padding:8px 0;}
@media(max-width:760px){
  nav .links{display:none;}
  .menu-btn{display:block;}
}

/* full-screen menu */
.overlay{position:fixed;inset:0;z-index:60;background:var(--black);display:none;
  flex-direction:column;justify-content:space-between;padding:16px var(--pad) 40px;}
.overlay.open{display:flex;}
.overlay .top{display:flex;justify-content:space-between;align-items:center;}
.overlay .menu-links{display:flex;flex-direction:column;gap:4px;}
.overlay .menu-links a{font-family:'Khand',sans-serif;font-weight:700;text-transform:uppercase;
  font-size:clamp(52px,14vw,96px);line-height:1;letter-spacing:-.005em;transition:color .2s;}
.overlay .menu-links a:hover,.overlay .menu-links a.active{color:var(--volt);}
.overlay .menu-links .idx{font-family:'Space Mono',monospace;font-size:11px;
  color:var(--bone35);margin-right:14px;vertical-align:super;letter-spacing:0;}
.overlay .foot{display:flex;justify-content:space-between;flex-wrap:wrap;gap:8px;}
body.menu-open{overflow:hidden;}

/* buttons */
.btn{display:inline-block;padding:14px 26px;font-size:11px;font-weight:700;
  letter-spacing:.22em;text-transform:uppercase;transition:all .2s;}
.btn.primary{background:var(--volt);color:#000;}
.btn.primary:hover{background:var(--bone);}
.btn.ghost{border:1px solid var(--hairline);color:var(--bone);}
.btn.ghost:hover{border-color:var(--volt);color:var(--volt);}

/* heroes */
.hero{min-height:100svh;display:flex;flex-direction:column;justify-content:flex-end;
  padding:120px var(--pad) 48px;border-top:none;}
.hero .wordmark{font-size:clamp(110px,26vw,380px);margin-left:-.03em;}
.hero .tagline{font-size:clamp(30px,5.5vw,64px);margin-top:.4em;}
.hero .sub{max-width:560px;margin-top:26px;color:var(--bone55);font-size:clamp(14px,1.6vw,17px);}
.hero .cta{display:flex;gap:14px;margin-top:34px;flex-wrap:wrap;}
.hero .foot{display:flex;justify-content:space-between;margin-top:56px;padding-top:16px;
  border-top:1px solid var(--hairline);flex-wrap:wrap;gap:8px;}
.page-hero{min-height:72svh;display:flex;flex-direction:column;justify-content:flex-end;
  padding:140px var(--pad) 56px;border-top:none;}
.page-hero h1{font-size:clamp(44px,9vw,120px);margin-top:18px;}
.page-hero .sub{max-width:600px;margin-top:24px;color:var(--bone55);font-size:clamp(14px,1.6vw,17px);}
@media(max-width:600px){
  .page-hero{min-height:auto;padding:116px var(--pad) 40px;}
}

/* viewfinder signature */
.vf{position:relative;padding:clamp(40px,6vw,58px) clamp(18px,4vw,44px);}
.vf .corner{position:absolute;width:22px;height:22px;border:0 solid var(--bone35);}
.vf .corner.tl{top:0;left:0;border-top-width:2px;border-left-width:2px;}
.vf .corner.tr{top:0;right:0;border-top-width:2px;border-right-width:2px;}
.vf .corner.bl{bottom:0;left:0;border-bottom-width:2px;border-left-width:2px;}
.vf .corner.br{bottom:0;right:0;border-bottom-width:2px;border-right-width:2px;}
.vf .hud{position:absolute;font-family:'Space Mono',monospace;font-size:10px;
  letter-spacing:.08em;color:var(--bone55);}
.vf .hud.rec{top:clamp(8px,2vw,20px);left:clamp(10px,2.4vw,26px);color:var(--volt);
  display:flex;align-items:center;gap:7px;}
.vf .hud.rec::before{content:"";width:7px;height:7px;border-radius:50%;background:var(--volt);
  animation:blink 1.6s steps(1) infinite;}
.vf .hud.tc{top:clamp(8px,2vw,20px);right:clamp(10px,2.4vw,26px);}
.vf .hud.cam{bottom:clamp(8px,2vw,20px);left:clamp(10px,2.4vw,26px);}
.vf .hud.iso{bottom:clamp(8px,2vw,20px);right:clamp(10px,2.4vw,26px);}
@media(max-width:600px){.vf .hud.cam,.vf .hud.iso{display:none;}}

/* marquee */
.marquee{overflow:hidden;border-top:1px solid var(--hairline);padding:22px 0;}
.marquee .track{display:flex;width:max-content;white-space:nowrap;
  animation:scroll 40s linear infinite;}
.marquee span{font-family:'Archivo Black',sans-serif;text-transform:uppercase;
  font-size:clamp(28px,5vw,54px);letter-spacing:-.01em;color:transparent;
  -webkit-text-stroke:1px var(--bone35);margin-right:56px;}
@keyframes scroll{to{transform:translateX(-50%);}}

/* manifesto */
.manifesto .l{font-size:clamp(30px,5.2vw,64px);}
.manifesto hr{border:none;border-top:1px solid var(--hairline);width:180px;margin:30px 0;}

/* card grids */
.cards{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--hairline);
  border:1px solid var(--hairline);margin-top:44px;}
.card{background:var(--black);padding:28px 26px;}
.card .q{font-size:clamp(17px,1.8vw,21px);font-weight:600;line-height:1.3;
  letter-spacing:-.01em;margin:14px 0 10px;}
.card p{font-size:13.5px;color:var(--bone55);}
.card h3{font-size:17px;font-weight:600;margin:12px 0 8px;}
@media(max-width:820px){.cards{grid-template-columns:1fr;}}
.cards.two{grid-template-columns:1fr 1fr;}
@media(max-width:820px){.cards.two{grid-template-columns:1fr;}}

/* spec rows */
.craft-grid{display:grid;grid-template-columns:5fr 7fr;gap:clamp(28px,4vw,60px);align-items:start;}
.spec{padding:18px 0;border-top:1px solid var(--hairline);}
.spec:last-of-type{border-bottom:1px solid var(--hairline);}
.spec .t{font-size:16px;font-weight:600;margin:6px 0 4px;}
.spec .d{font-size:13.5px;color:var(--bone55);max-width:560px;}
@media(max-width:820px){.craft-grid{grid-template-columns:1fr;}}

/* real clips with metrics */
.clips{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:var(--hairline);
  border:1px solid var(--hairline);margin-top:44px;}
.clip{background:var(--black);padding:24px 22px 26px;display:flex;flex-direction:column;gap:7px;}
.clip .meta{font-family:'Space Mono',monospace;font-size:10px;color:var(--bone35);
  letter-spacing:.08em;text-transform:uppercase;}
.clip .t{font-size:15px;font-weight:600;line-height:1.35;}
.clip .plays{font-family:'Archivo Black',sans-serif;font-size:clamp(26px,3vw,38px);
  color:var(--volt);letter-spacing:-.01em;margin-top:auto;padding-top:14px;}
.clip .plays small{font-size:10px;font-weight:600;letter-spacing:.24em;color:var(--bone55);
  font-family:'Inter',sans-serif;margin-left:8px;vertical-align:3px;text-transform:uppercase;}
.clip .eng{font-size:11.5px;color:var(--bone55);}
@media(max-width:1020px){.clips{grid-template-columns:1fr 1fr;}}
@media(max-width:560px){.clips{grid-template-columns:1fr;}}

/* case study */
.case{border:1px solid var(--hairline);padding:clamp(26px,4vw,44px);margin-top:48px;}
.case .h{font-family:'Archivo Black',sans-serif;text-transform:uppercase;
  font-size:clamp(24px,3.6vw,40px);letter-spacing:-.01em;margin:12px 0 12px;}
.case > p{font-size:14px;color:var(--bone55);max-width:640px;}
.case .cliplist{display:flex;gap:clamp(16px,3vw,40px);margin-top:24px;flex-wrap:wrap;}
.case .cliplist span{font-family:'Space Mono',monospace;font-size:11px;letter-spacing:.08em;
  color:var(--bone55);text-transform:uppercase;}
.case .totals{display:flex;gap:clamp(24px,5vw,64px);margin-top:26px;padding-top:22px;
  border-top:1px solid var(--hairline);flex-wrap:wrap;align-items:baseline;}
.case .totals .v{font-family:'Archivo Black',sans-serif;font-size:clamp(30px,4.6vw,54px);
  letter-spacing:-.01em;}

/* stats */
.heroStat{font-family:'Archivo Black',sans-serif;text-transform:uppercase;letter-spacing:-.02em;
  font-size:clamp(80px,16vw,190px);line-height:.9;color:var(--volt);}
.statgrid{display:grid;grid-template-columns:repeat(5,1fr);gap:1px;background:var(--hairline);
  border-top:1px solid var(--hairline);border-bottom:1px solid var(--hairline);margin-top:44px;}
.statgrid.four{grid-template-columns:repeat(4,1fr);border-top:none;margin-top:0;}
.stat{background:var(--black);padding:22px 20px 20px 0;}
.stat .v{font-family:'Archivo Black',sans-serif;font-size:clamp(22px,3vw,38px);letter-spacing:-.01em;}
.stat .v.small{font-size:clamp(15px,1.8vw,20px);line-height:1.4;font-family:'Inter',sans-serif;
  font-weight:700;}
.stat + .stat{padding-left:20px;}
@media(max-width:820px){.statgrid,.statgrid.four{grid-template-columns:1fr 1fr;}.stat{padding-left:20px;}}

/* rooms list */
.rooms .a{font-family:'Archivo Black',sans-serif;text-transform:uppercase;
  font-size:clamp(34px,6.5vw,74px);letter-spacing:-.015em;line-height:1.16;}

/* directory (home index of sections) */
.dir{margin-top:44px;border-bottom:1px solid var(--hairline);}
.dir a{display:grid;grid-template-columns:64px 1fr auto;align-items:baseline;gap:20px;
  padding:clamp(22px,3.4vw,36px) 0;border-top:1px solid var(--hairline);}
.dir .idx{font-family:'Space Mono',monospace;font-size:12px;color:var(--bone35);}
.dir .name{font-family:'Archivo Black',sans-serif;text-transform:uppercase;letter-spacing:-.015em;
  font-size:clamp(30px,6vw,72px);line-height:1;transition:color .2s;}
.dir .desc{grid-column:2;font-size:13.5px;color:var(--bone55);max-width:460px;margin-top:10px;}
.dir .arrow{font-size:clamp(22px,3vw,36px);color:var(--bone35);transition:all .2s;}
.dir a:hover .name{color:var(--volt);}
.dir a:hover .arrow{color:var(--volt);transform:translateX(8px);}
@media(max-width:600px){.dir a{grid-template-columns:1fr auto;}
  .dir .idx{display:none;}.dir .desc{grid-column:1;}}

/* breaking — article index */
.bk-list{margin-top:44px;border-bottom:1px solid var(--hairline);}
.bk-list a{display:block;padding:clamp(24px,3.4vw,36px) 0;border-top:1px solid var(--hairline);}
.bk-meta{font-family:'Space Mono',monospace;font-size:10px;letter-spacing:.08em;
  color:var(--bone35);display:flex;gap:16px;margin-bottom:12px;text-transform:uppercase;flex-wrap:wrap;}
.bk-meta .k{color:var(--rec);}
.bk-list .t{font-family:'Archivo Black',sans-serif;text-transform:uppercase;
  font-size:clamp(21px,3.4vw,42px);line-height:1.08;letter-spacing:-.015em;
  transition:color .2s;max-width:980px;}
.bk-list a:hover .t{color:var(--volt);}
.bk-list .sum{font-size:13.5px;color:var(--bone55);max-width:640px;margin-top:12px;}

/* breaking — article pages */
.article-hero{padding:150px var(--pad) 30px;border-top:none;}
.article-hero h1{font-size:clamp(32px,5.4vw,64px);margin-top:18px;max-width:1000px;}
.article-hero .stand{font-size:clamp(16px,2vw,19px);color:var(--bone55);margin-top:22px;
  max-width:740px;line-height:1.6;}
.article-body{padding:30px var(--pad) clamp(64px,9vw,110px);border-top:none;}
.article{max-width:760px;}
.article p{font-size:16.5px;line-height:1.75;color:var(--bone80);margin:0 0 22px;}
.article h2{font-family:'Archivo Black',sans-serif;text-transform:uppercase;
  font-size:clamp(19px,2.5vw,27px);letter-spacing:-.01em;line-height:1.15;margin:46px 0 18px;}
.article a{color:var(--volt);}
.article a:hover{text-decoration:underline;}
.article ul,.article ol{margin:0 0 22px 20px;}
.article li{font-size:16.5px;line-height:1.7;color:var(--bone80);margin-bottom:10px;}
.article strong{color:var(--bone);}
.article .rule{border:none;border-top:1px solid var(--hairline);margin:38px 0;}
.article .backlink{font-size:10px;font-weight:600;letter-spacing:.24em;text-transform:uppercase;
  color:var(--bone55);}
.article .backlink:hover{color:var(--volt);text-decoration:none;}

/* contact */
.cgrid{display:flex;gap:clamp(28px,6vw,80px);margin-top:44px;flex-wrap:wrap;}
.cgrid .v{font-size:clamp(16px,2vw,22px);font-weight:600;margin-top:8px;}
.cgrid a:hover .v{color:var(--volt);}

/* form */
form{margin-top:40px;max-width:760px;}
.fgrid{display:grid;grid-template-columns:1fr 1fr;gap:22px;}
.field{display:flex;flex-direction:column;gap:9px;}
.field.full{grid-column:1/-1;}
label{font-size:10px;font-weight:600;letter-spacing:.24em;text-transform:uppercase;color:var(--bone55);}
input,select,textarea{background:transparent;border:1px solid var(--hairline);color:var(--bone);
  font-family:'Inter',sans-serif;font-size:15px;padding:15px 16px;border-radius:0;
  transition:border-color .2s;width:100%;appearance:none;-webkit-appearance:none;}
select{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M0 0l5 6 5-6z' fill='%23F1EDE4'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 16px center;padding-right:40px;}
select option{background:var(--ink);color:var(--bone);}
textarea{min-height:150px;resize:vertical;}
input:focus,select:focus,textarea:focus{border-color:var(--volt);outline:none;}
form .btn{margin-top:26px;}
.formnote{font-size:12px;color:var(--bone35);margin-top:14px;}
@media(max-width:640px){.fgrid{grid-template-columns:1fr;}}

/* CTA band */
.band{display:flex;justify-content:space-between;align-items:center;gap:24px;flex-wrap:wrap;}
.band .t{font-family:'Archivo Black',sans-serif;text-transform:uppercase;letter-spacing:-.015em;
  font-size:clamp(26px,4.6vw,54px);line-height:1;}

/* coming soon */
.soon{font-family:'Khand',sans-serif;font-weight:700;text-transform:uppercase;
  font-size:clamp(64px,16vw,220px);line-height:.85;letter-spacing:-.005em;}

/* footer */
footer{border-top:1px solid var(--hairline);padding:clamp(44px,7vw,72px) var(--pad) 26px;}
.fgrid-foot{display:grid;grid-template-columns:2fr 1fr 1fr 1fr;gap:clamp(24px,4vw,48px);}
.fgrid-foot .brand{font-family:'Khand',sans-serif;font-weight:700;font-size:44px;line-height:.8;}
.fgrid-foot .col p{font-size:12.5px;color:var(--bone55);max-width:280px;margin-top:14px;}
.fgrid-foot .col .h{font-size:10px;font-weight:600;letter-spacing:.24em;text-transform:uppercase;
  color:var(--bone35);margin-bottom:16px;}
.fgrid-foot .col a{display:block;font-size:13px;color:var(--bone55);padding:5px 0;transition:color .2s;}
.fgrid-foot .col a:hover{color:var(--volt);}
.fbottom{display:flex;justify-content:space-between;flex-wrap:wrap;gap:8px;margin-top:52px;
  padding-top:18px;border-top:1px solid var(--hairline);}
@media(max-width:820px){.fgrid-foot{grid-template-columns:1fr 1fr;}}
@media(max-width:520px){.fgrid-foot{grid-template-columns:1fr;}}

/* reveal on scroll */
.reveal{opacity:0;transform:translateY(18px);
  transition:opacity .7s ease,transform .7s ease;}
.reveal.in{opacity:1;transform:none;}

/* reduced motion */
@media(prefers-reduced-motion:reduce){
  html{scroll-behavior:auto;}
  .marquee .track{animation:none;}
  .rec-dot,.dot-red,.vf .hud.rec::before{animation:none;}
  .reveal{opacity:1;transform:none;transition:none;}
}