/* ============================================================
   mono.css , repaints the SUBPAGES in the monochrome language.

   Loaded AFTER style.css. The whole site palette runs through CSS custom properties,
   so remapping those variables converts every page without touching its markup or
   layout , which is the safe way to do this: nothing can break structurally, because
   nothing structural changes. Only colour, edges and the pixel type are new.

   The homepage does NOT load this: index.html is generated from the mock and carries
   its own complete stylesheet inline.
   ============================================================ */

/* the pixel faces, matching the homepage */
@font-face{font-family:'Bitm';font-display:swap;src:url(fonts/Bitmgothic.woff) format('woff')}
@font-face{font-family:'RedC';font-display:swap;src:url(fonts/Redaction-Regular.otf) format('opentype')}
@font-face{font-family:'Red35';font-display:swap;src:url(fonts/Redaction35-Regular.otf) format('opentype')}

:root{
  /* black and white only. Every olive tone collapses to white or a neutral grey. */
  --carbon:#000;
  --bone:#fff;
  --olive:#fff;
  --olive-mid:#cfcfc9;
  --olive-deep:#6d6d67;
  --drab:#9a9a94;
  --bg:#000;
  --ink:#fff;
  --dim:#9a9a94;
  --dimmer:#5e5e58;
  --line:rgba(255,255,255,.14);
  /* subpage work videos keep their real colour, matching the homepage cards */
  --vfx:saturate(1) brightness(1) contrast(1.02);
}

/* hard edges everywhere , the Swiss register has no rounded corners */
*,*::before,*::after{border-radius:0!important}

/* kill the olive glows and tints that survive a pure variable swap */
body{background:#000}
.hero .heroglow,.heroglow{background:none!important;opacity:0!important}
.clientbar{background:none!important}
[class*="glow"]{opacity:0!important}

/* section numbers pick up the pixel serif, as on the homepage */
.snum{font-family:'RedC',serif!important;letter-spacing:.06em}

/* the accent mark renders as the BitmGothic wordmark rather than an olive-masked box */
.ac-logo,.cb-logo{background:none!important;-webkit-mask:none!important;mask:none!important;
  font-family:'Bitm'!important;width:auto!important;color:#fff}
.ac-logo::after,.cb-logo::after{content:"tsf"}

/* primary buttons invert instead of going olive */
.cbtn.primary{background:#fff!important;color:#000!important;border-color:#fff!important}
.cbtn.primary:hover{background:#000!important;color:#fff!important}
.cbtn.ghost{color:#fff;border-color:rgba(255,255,255,.22)}
.cbtn.ghost:hover{border-color:#fff;background:#fff;color:#000}

/* client marks read as pure white, as in the homepage marquee */
.mark img{filter:brightness(0) invert(1)!important}

/* film grain, so the subpages sit in the same air as the homepage */
body::after{content:"";position:fixed;inset:-14%;z-index:150;pointer-events:none;opacity:.13;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  animation:monograin 1.1s steps(6) infinite}
@keyframes monograin{
  0%{transform:translate(0,0)}25%{transform:translate(-4%,3%)}
  50%{transform:translate(3%,-4%)}75%{transform:translate(-3%,4%)}100%{transform:translate(0,0)}}
@media(pointer:coarse){body::after{animation:none}}

/* mobile floors, same numbers the homepage uses */
@media(max-width:760px){
  body{font-size:16px}
  .cbtn{min-height:48px;font-size:13px}
  .sidex{display:none}
}