/* ===== /assets/site.css ===== */
/* ===== Reset & Variables ===== */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
:root{
  --c-red:#E60000;
  --c-red-hover:#FF3333;
  --c-dark:#0A0A0A;
  --c-dark-lt:#1A1A1A;
  --c-text:#F5F5F5;
  --c-gold:#FFD700;
  --c-grey:#666666;
  --c-green:#36C57A;
  --c-orange:#FF9900;
  --font-head:Didot,Georgia,serif;
  --font-body:"Helvetica Neue",Arial,sans-serif;
  --font-mono:"Space Mono","Courier New",monospace;
  --sidebar-w:80px;
  --sidebar-expanded-w:220px;
  --content-max:1280px;
  --header-h-mobile:64px;
  --ease:cubic-bezier(.22,1,.36,1)
}
/* ===== Base ===== */
body{
  font-family:var(--font-body);
  font-size:16px;
  line-height:1.75;
  color:var(--c-text);
  background:var(--c-dark);
  padding-left:var(--sidebar-w);
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
  letter-spacing:.01em
}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
ul{list-style:none}
button{background:none;border:none;font:inherit;color:inherit;cursor:pointer}
h1,h2,h3,h4,h5,h6{font-family:var(--font-head);color:var(--c-text);line-height:1.2;font-weight:700}
h1{font-size:44px}
h2{font-size:32px}
h3{font-size:22px}
h4{font-size:18px}
p{color:var(--c-text)}
::selection{background:var(--c-red);color:#fff}
#main-content{display:block;outline:none;min-height:60vh}
/* ===== Visually Hidden ===== */
.visually-hidden{
  position:absolute;width:1px;height:1px;margin:-1px;
  padding:0;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0
}
/* ===== Container ===== */
.container{max-width:var(--content-max);margin:0 auto;padding:0 32px}
/* ===== Grid ===== */
.grid{display:grid;gap:24px}
.grid--2col{grid-template-columns:repeat(2,1fr)}
.grid--3col{grid-template-columns:repeat(3,1fr)}
/* ===== Buttons ===== */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  height:44px;padding:0 24px;font-weight:700;font-size:14px;
  letter-spacing:.5px;text-transform:uppercase;border:2px solid transparent;
  cursor:pointer;transition:background .3s var(--ease),border-color .3s var(--ease),color .3s var(--ease),transform .2s var(--ease)
}
.btn--primary{background:var(--c-red);color:#fff;border-color:var(--c-red)}
.btn--primary:hover{background:var(--c-red-hover);border-color:var(--c-red-hover);transform:translateY(-2px)}
.btn--ghost{background:transparent;color:var(--c-text);border-color:var(--c-grey)}
.btn--ghost:hover{border-color:var(--c-gold);color:var(--c-gold)}
/* ===== Breadcrumb ===== */
.breadcrumb{display:flex;flex-wrap:wrap;gap:8px;padding:16px 0;font-family:var(--font-mono);font-size:12px;color:var(--c-grey)}
.breadcrumb__sep{color:var(--c-grey);opacity:.6}
.breadcrumb__link{transition:color .2s ease}
.breadcrumb__link:hover{color:var(--c-gold)}
.breadcrumb__current{color:var(--c-text)}
/* ===== Media Frame ===== */
.media-frame{
  position:relative;overflow:hidden;background:var(--c-dark-lt);
  aspect-ratio:16/9;width:100%
}
.media-frame--portrait{aspect-ratio:3/4}
.media-frame--wide{aspect-ratio:21/9}
/* ===== Section Head ===== */
.section{padding:64px 0}
.section--tight{padding:32px 0}
.section-head{display:flex;flex-direction:column;gap:8px;margin-bottom:32px}
.section-index{
  font-family:var(--font-mono);font-size:14px;color:var(--c-gold);
  text-transform:uppercase;letter-spacing:2px
}
.section-title{font-family:var(--font-head);font-size:36px;font-weight:700;color:var(--c-text);line-height:1.2}
/* ===== Skip Link ===== */
.skip-link{
  position:fixed;top:-48px;left:12px;z-index:2000;
  background:var(--c-gold);color:#000;padding:8px 16px;
  font-family:var(--font-mono);font-size:14px;font-weight:700;
  transition:top .25s var(--ease)
}
.skip-link:focus{top:12px;outline:none}
/* ===== Scroll Progress ===== */
.scroll-progress{
  position:fixed;top:0;left:0;width:100%;height:3px;z-index:1000;
  background:linear-gradient(90deg,var(--c-red),var(--c-gold));
  transform-origin:0 50%;transform:scaleX(0);
  pointer-events:none
}
/* ===== Site Header ===== */
.site-header{
  position:fixed;top:0;left:0;z-index:900;
  width:var(--sidebar-w);height:100vh;
  background:var(--c-dark-lt);
  border-right:1px solid rgba(255,255,255,.06);
  display:flex;flex-direction:column;align-items:center;
  padding:20px 0;
  overflow:hidden;
  transition:width .4s var(--ease)
}
.site-header:hover,
.site-header:focus-within{width:var(--sidebar-expanded-w)}
/* Brand Lockup */
.brand-lockup{
  display:flex;align-items:center;gap:12px;
  width:100%;padding:8px 16px;margin-bottom:24px;flex-shrink:0
}
.brand-lockup__mark{
  flex-shrink:0;width:48px;height:48px;
  background:var(--c-red);border:2px solid var(--c-gold);
  display:flex;align-items:center;justify-content:center;
  transform:rotate(-5deg);transition:transform .3s var(--ease)
}
.brand-lockup__letter{
  font-family:var(--font-head);font-size:26px;font-weight:700;
  color:#fff;transform:rotate(5deg);line-height:1
}
.brand-lockup__text{
  display:flex;flex-direction:column;
  opacity:0;white-space:nowrap;
  transition:opacity .3s var(--ease)
}
.brand-lockup__name{font-family:var(--font-head);font-size:20px;color:var(--c-text);line-height:1.2}
.brand-lockup__tag{
  font-family:var(--font-mono);font-size:10px;color:var(--c-gold);
  text-transform:uppercase;letter-spacing:1.5px
}
.site-header:hover .brand-lockup__text,
.site-header:focus-within .brand-lockup__text{opacity:1}
/* Main Nav */
.main-nav{width:100%;flex:1;display:flex;justify-content:center}
.main-nav__list{display:flex;flex-direction:column;gap:2px;width:100%}
.main-nav__link{
  display:flex;align-items:center;gap:14px;
  height:52px;padding:0 20px;
  color:var(--c-text);white-space:nowrap;
  transition:background .25s ease,color .25s ease
}
.main-nav__index{
  font-family:var(--font-mono);font-size:12px;min-width:20px;
  color:var(--c-grey);transition:color .25s ease
}
.main-nav__label{
  opacity:0;transform:translateX(-8px);font-size:15px;font-weight:500;
  transition:opacity .3s var(--ease),transform .3s var(--ease)
}
.site-header:hover .main-nav__label,
.site-header:focus-within .main-nav__label{opacity:1;transform:translateX(0)}
.main-nav__link:hover{background:var(--c-red);color:#000}
.main-nav__link:hover .main-nav__index{color:#000}
.main-nav__link[aria-current="page"]{background:var(--c-red);color:#fff}
.main-nav__link[aria-current="page"] .main-nav__index{color:var(--c-gold)}
.main-nav__link:focus-visible{
  outline:2px solid var(--c-gold);outline-offset:-2px
}
/* Header Meta */
.header-meta{
  display:flex;align-items:center;gap:8px;
  margin-top:auto;padding:12px 16px;
  font-family:var(--font-mono);font-size:11px;
  color:var(--c-grey);white-space:nowrap
}
.header-meta__dot{
  width:6px;height:6px;border-radius:50%;
  background:var(--c-green);flex-shrink:0
}
.header-meta__text{opacity:0;transition:opacity .3s var(--ease)}
.site-header:hover .header-meta__text,
.site-header:focus-within .header-meta__text{opacity:1}
/* Mobile Nav Toggle - hidden on desktop */
.mobile-nav-toggle{display:none}
/* ===== Site Footer ===== */
.site-footer{
  background:var(--c-dark-lt);
  border-top:1px solid rgba(255,255,255,.06);
  padding:48px 0 20px;
  font-size:14px;
  margin-top:0
}
.site-footer__grid{
  display:grid;
  grid-template-columns:1.4fr 1fr 1.2fr;
  gap:40px;
  padding-bottom:32px
}
.footer-brand__link{
  display:inline-flex;align-items:center;gap:10px;
  transition:opacity .2s ease
}
.footer-brand__link:hover{opacity:.85}
.footer-brand__mark{
  width:36px;height:36px;background:var(--c-red);
  border:1px solid var(--c-gold);
  display:inline-flex;align-items:center;justify-content:center;
  font-family:var(--font-head);font-size:20px;font-weight:700;color:#fff;
  transform:rotate(-5deg)
}
.footer-brand__name{
  font-family:var(--font-head);font-size:22px;font-weight:700;
  color:var(--c-text)
}
.footer-brand__tag{
  font-family:var(--font-mono);font-size:11px;color:var(--c-gold);
  letter-spacing:2px;margin-top:6px;margin-left:46px
}
.footer-col__title{
  font-family:var(--font-mono);font-size:12px;
  text-transform:uppercase;letter-spacing:2px;
  color:var(--c-grey);margin-bottom:14px
}
.footer-col__list{
  display:flex;flex-direction:column;gap:8px
}
.footer-col__link{
  color:var(--c-text);border-bottom:1px solid transparent;
  transition:color .2s ease,border-color .2s ease
}
.footer-col__link:hover{color:var(--c-red-hover);border-bottom-color:var(--c-red-hover)}
.footer-col__item{color:var(--c-text);line-height:1.5}
.footer-col__item--muted{color:var(--c-grey);font-size:13px}
.site-footer__trust{
  border-top:1px solid rgba(255,255,255,.06);
  padding:20px 0;
  font-size:12px;color:var(--c-grey);line-height:1.7
}
.site-footer__trust p{color:var(--c-grey)}
.site-footer__bottom{
  display:flex;justify-content:space-between;align-items:center;
  border-top:1px solid rgba(255,255,255,.06);
  padding-top:16px;
  font-family:var(--font-mono);font-size:12px;color:var(--c-grey)
}
.site-footer__bottom p{color:var(--c-grey)}
/* ===== Focus Visible Global ===== */
:focus-visible{outline:2px solid var(--c-gold);outline-offset:3px}
/* ===== Responsive ===== */
@media (max-width:1024px){
  .container{padding:0 24px}
  .site-footer__grid{grid-template-columns:1fr 1fr;gap:24px}
}
@media (max-width:768px){
  body{padding-left:0;padding-top:var(--header-h-mobile)}
  .container{padding:0 16px}
  /* Header becomes top bar */
  .site-header{
    width:100%;height:var(--header-h-mobile);
    flex-direction:row;align-items:center;
    padding:0 16px;
    border-right:none;border-bottom:1px solid rgba(255,255,255,.06);
    overflow:visible
  }
  .site-header:hover,
  .site-header:focus-within{width:100%}
  .brand-lockup{padding:0;margin-bottom:0;width:auto}
  .brand-lockup__mark{width:36px;height:36px}
  .brand-lockup__letter{font-size:20px}
  .brand-lockup__text{opacity:1}
  .brand-lockup__tag{display:none}
  /* Mobile nav dropdown */
  .main-nav{
    position:fixed;top:var(--header-h-mobile);left:0;
    width:100%;background:var(--c-dark-lt);
    border-bottom:1px solid rgba(255,255,255,.06);
    transform:translateY(-110%);
    opacity:0;visibility:hidden;
    transition:transform .35s var(--ease),opacity .3s ease,visibility .35s;
    display:block;z-index:980
  }
  .main-nav[data-open="true"]{
    transform:translateY(0);
    opacity:1;visibility:visible
  }
  .main-nav__list{padding:12px 16px;gap:2px}
  .main-nav__link{height:44px;padding:0 12px}
  .main-nav__label{opacity:1;transform:none}
  /* Mobile toggle */
  .mobile-nav-toggle{
    display:inline-flex;flex-direction:column;align-items:center;justify-content:center;
    gap:4px;width:44px;height:44px;margin-left:auto;flex-shrink:0
  }
  .mobile-nav-toggle__bars{display:flex;flex-direction:column;gap:4px}
  .mobile-nav-toggle__bar{
    display:block;width:20px;height:2px;background:var(--c-text);
    transition:transform .3s var(--ease),background .3s ease
  }
  .mobile-nav-toggle__text{font-size:10px;color:var(--c-text);font-family:var(--font-mono)}
  .mobile-nav-toggle[aria-expanded="true"] .mobile-nav-toggle__bar:nth-child(1){
    transform:translateY(6px) rotate(45deg)
  }
  .mobile-nav-toggle[aria-expanded="true"] .mobile-nav-toggle__bar:nth-child(2){
    transform:translateY(-6px) rotate(-45deg)
  }
  .header-meta{display:none}
  /* Footer */
  .site-footer{padding-top:32px}
  .site-footer__grid{grid-template-columns:1fr;gap:24px}
  .site-footer__bottom{flex-direction:column;gap:8px;align-items:flex-start}
  /* Grid */
  .grid--2col,.grid--3col{grid-template-columns:1fr}
  /* Section */
  .section{padding:40px 0}
  .section-title{font-size:26px}
  h1{font-size:32px}
  h2{font-size:26px}
}
/* ===== Reduced Motion ===== */
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{
    transition-duration:.01ms!important;
    animation-duration:.01ms!important;
    animation-iteration-count:1!important
  }
  .scroll-progress{transition:none}
}