/* ============================================================
   BRAUN RACING — "Pit Lane Archive"
   Palette + type evolved from the team's own 2010 stylesheet
   (/css/styles.css: #cc0000 / #30b5d9 / #000 / Arial Black).
   Sharp edges, timing-sheet rhythm, high contrast. No rounding.
   ============================================================ */
:root{
  --ink:#101013;
  --ink-2:#1c1c21;
  --ink-3:#2a2a31;
  --paper:#f3f2ef;
  --paper-2:#e9e7e2;
  --red:#d3121a;
  --red-dk:#9c0d13;
  --cyan:#2ba8cc;
  --grey:#63636b;
  --grey-lt:#8d8d95;
  --rule:#d5d2cc;
  --rule-dk:#3a3a42;
  --maxw:1240px;
  --shell:clamp(1rem,4vw,3rem);
}
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0;background:var(--paper);color:var(--ink);
  font:400 1.0625rem/1.68 "Barlow",-apple-system,BlinkMacSystemFont,"Segoe UI",Arial,sans-serif;
  overflow-x:hidden;
}
img{max-width:100%;height:auto;display:block}
a{color:var(--red-dk);text-decoration:none;border-bottom:1px solid rgba(211,18,26,.35)}
a:hover{color:var(--red);border-bottom-color:var(--red)}

/* ---------- chequer / speed strip ---------- */
.strip{height:6px;background:repeating-linear-gradient(115deg,var(--red) 0 22px,var(--ink) 22px 30px,var(--cyan) 30px 34px,var(--ink) 34px 56px)}

/* ---------- masthead ---------- */
.masthead{background:var(--ink);color:#fff;position:sticky;top:0;z-index:60;box-shadow:0 2px 0 rgba(0,0,0,.4)}
.mast-in{max-width:var(--maxw);margin:0 auto;padding:.9rem var(--shell);
  display:flex;align-items:center;gap:1rem;flex-wrap:wrap;min-width:0}
.brand{display:flex;align-items:center;gap:.75rem;min-width:0;flex:1 1 auto;border:0}
.brand:hover{border:0}
.mark{flex:0 0 auto;width:44px;height:44px;background:var(--red);
  display:grid;place-items:center;transform:skewX(-9deg)}
.mark span{transform:skewX(9deg);font-family:"Archivo Black",Arial Black,sans-serif;
  font-size:1.15rem;color:#fff;line-height:1}
.wordmark{min-width:0;overflow-wrap:anywhere}
.wordmark b{display:block;font-family:"Archivo Black",Arial Black,sans-serif;
  font-size:clamp(1.15rem,3.2vw,1.6rem);letter-spacing:.01em;color:#fff;line-height:1.05;text-transform:uppercase}
.wordmark small{display:block;font-family:"Barlow Condensed",Arial Narrow,sans-serif;
  font-size:.78rem;letter-spacing:.22em;text-transform:uppercase;color:var(--grey-lt);margin-top:.18rem}
.burger{flex:0 0 auto;display:none;background:none;border:1px solid var(--rule-dk);color:#fff;
  font:600 .8rem/1 "Barlow Condensed",sans-serif;letter-spacing:.18em;text-transform:uppercase;
  padding:.62rem .8rem;cursor:pointer}

/* ---------- nav (wraps; never fixed; never shrink-locked) ---------- */
.nav{background:var(--ink-2);border-top:1px solid var(--rule-dk)}
.nav-in{max-width:var(--maxw);margin:0 auto;padding:0 var(--shell)}
.nav ul{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;min-width:0}
.nav li{min-width:0}
.nav a{display:block;padding:.72rem .95rem;border:0;
  font:600 .84rem/1 "Barlow Condensed",Arial Narrow,sans-serif;letter-spacing:.16em;
  text-transform:uppercase;color:#cfcfd6;border-bottom:3px solid transparent}
.nav a:hover{color:#fff;background:var(--ink-3);border-bottom-color:var(--cyan)}
.nav a[aria-current="page"]{color:#fff;border-bottom-color:var(--red);background:var(--ink-3)}

/* ---------- hero ---------- */
.hero{position:relative;background:var(--ink);color:#fff;overflow:hidden}
.hero-img{position:absolute;inset:0}
.hero-img img{width:100%;height:100%;object-fit:cover;opacity:.5}
.hero::after{content:"";position:absolute;inset:0;
  background:linear-gradient(100deg,rgba(16,16,19,.94) 0%,rgba(16,16,19,.78) 48%,rgba(16,16,19,.42) 100%)}
.hero-in{position:relative;z-index:2;max-width:var(--maxw);margin:0 auto;
  padding:clamp(2.5rem,7vw,5.5rem) var(--shell)}
.eyebrow{font:600 .8rem/1 "Barlow Condensed",Arial Narrow,sans-serif;letter-spacing:.28em;
  text-transform:uppercase;color:var(--cyan);margin:0 0 .9rem}
.eyebrow::before{content:"";display:inline-block;width:26px;height:3px;background:var(--red);
  vertical-align:middle;margin-right:.6rem}
.hero h1{font-family:"Archivo Black",Arial Black,sans-serif;font-weight:400;
  font-size:clamp(1.95rem,5.6vw,3.6rem);line-height:1.02;letter-spacing:-.015em;
  margin:0;text-transform:uppercase;color:#fff}
.hero .lede{margin:1.25rem 0 0;max-width:62ch;font-size:clamp(1.02rem,1.9vw,1.2rem);
  line-height:1.6;color:#dcdce2}
.hero .lede strong{color:#fff}

/* ---------- interior page banner ---------- */
.pagebanner{background:var(--ink);border-bottom:6px solid var(--red);position:relative}
.pagebanner img{width:100%;max-height:min(46vh,430px);object-fit:cover;opacity:.92}
.pagebanner::after{content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(180deg,rgba(16,16,19,.35) 0%,rgba(16,16,19,0) 45%,rgba(16,16,19,.30) 100%)}

/* ---------- shell / grid ---------- */
.shell{max-width:var(--maxw);margin:0 auto;padding:clamp(2rem,5vw,3.6rem) var(--shell) 3rem}
.cols{display:grid;grid-template-columns:minmax(0,1fr);gap:clamp(2rem,4vw,3.4rem)}
@media (min-width:1040px){.cols{grid-template-columns:minmax(0,1fr) 268px}}
.prose{min-width:0}

/* ---------- prose ---------- */
.prose h1{font-family:"Archivo Black",Arial Black,sans-serif;font-weight:400;
  font-size:clamp(1.8rem,4.4vw,2.85rem);line-height:1.06;letter-spacing:-.01em;
  text-transform:uppercase;margin:0 0 1.4rem}
.prose h2{font-family:"Archivo Black",Arial Black,sans-serif;font-weight:400;
  font-size:clamp(1.22rem,2.6vw,1.62rem);line-height:1.16;text-transform:uppercase;
  letter-spacing:.005em;margin:2.7rem 0 .95rem;padding-bottom:.5rem;
  border-bottom:2px solid var(--ink);position:relative}
.prose h2::after{content:"";position:absolute;left:0;bottom:-2px;width:64px;height:2px;background:var(--red)}
.prose h3{font-family:"Barlow Condensed",Arial Narrow,sans-serif;font-weight:600;
  font-size:1.22rem;letter-spacing:.09em;text-transform:uppercase;color:var(--red-dk);
  margin:1.9rem 0 .55rem}
.prose p{margin:0 0 1.15rem;overflow-wrap:break-word}
.prose .lede{font-size:clamp(1.08rem,2.1vw,1.28rem);line-height:1.58;color:var(--ink-2);
  border-left:4px solid var(--red);padding-left:1.15rem;margin-bottom:1.7rem}
.prose ul,.prose ol{margin:0 0 1.3rem;padding-left:1.25rem}
.prose li{margin:0 0 .58rem}
.prose strong{font-weight:600}
.prose .note{background:var(--paper-2);border-left:4px solid var(--grey);
  padding:.95rem 1.15rem;font-size:.96rem;color:var(--ink-2);margin:1.6rem 0}
.prose ul.roster{columns:2;column-gap:2rem;list-style:none;padding:0;
  border-top:2px solid var(--ink);border-bottom:2px solid var(--ink);padding:1rem 0}
.prose ul.roster li{font-family:"Barlow Condensed",Arial Narrow,sans-serif;font-size:1.12rem;
  letter-spacing:.05em;text-transform:uppercase;break-inside:avoid;margin:0 0 .35rem;
  padding-left:.9rem;border-left:3px solid var(--cyan)}
@media (max-width:520px){.prose ul.roster{columns:1}}
.prose ul.resources{list-style:none;padding:0}
.prose ul.resources li{border-left:3px solid var(--rule);padding:.2rem 0 .2rem .95rem;margin-bottom:.9rem}

/* ---------- figure ---------- */
.figure{margin:0 0 2.1rem;background:var(--ink)}
.figure img{width:100%}
.figure figcaption{font:400 .82rem/1.45 "Barlow Condensed",Arial Narrow,sans-serif;
  letter-spacing:.09em;text-transform:uppercase;color:var(--grey-lt);padding:.6rem .85rem;background:var(--ink)}

/* ---------- number plate (car pages) ---------- */
.plate{display:flex;align-items:stretch;background:var(--ink);color:#fff;margin:0 0 2rem}
.plate .num{flex:0 0 auto;background:var(--red);padding:1.1rem 1.5rem;display:grid;place-items:center}
.plate .num b{font-family:"Archivo Black",Arial Black,sans-serif;font-size:clamp(2rem,7vw,3.2rem);line-height:1}
.plate .meta{padding:1.1rem 1.35rem;display:flex;flex-direction:column;justify-content:center;min-width:0}
.plate .meta span{font:600 .74rem/1.5 "Barlow Condensed",Arial Narrow,sans-serif;
  letter-spacing:.2em;text-transform:uppercase;color:var(--grey-lt)}
.plate .meta em{font-style:normal;font-family:"Barlow Condensed",Arial Narrow,sans-serif;
  font-size:1.16rem;letter-spacing:.05em;text-transform:uppercase;color:#fff}

/* ---------- rail ---------- */
.rail{min-width:0}
@media (min-width:1040px){.rail{position:sticky;top:92px;align-self:start}}
.rail section{border-top:3px solid var(--ink);padding-top:.8rem;margin-bottom:2rem}
.rail h2{font:600 .78rem/1 "Barlow Condensed",Arial Narrow,sans-serif;letter-spacing:.24em;
  text-transform:uppercase;color:var(--grey);margin:0 0 .85rem}
.rail ul{list-style:none;margin:0;padding:0}
.rail li{margin:0 0 .1rem}
.rail a{display:block;padding:.34rem 0 .34rem .8rem;border:0;border-left:3px solid var(--rule);
  font:500 .95rem/1.35 "Barlow",sans-serif;color:var(--ink-2)}
.rail a:hover{border-left-color:var(--red);color:var(--red-dk);background:var(--paper-2)}
.rail a[aria-current="page"]{border-left-color:var(--red);font-weight:600;color:var(--ink)}
.rail .fact{font-size:.9rem;line-height:1.55;color:var(--grey);margin:0 0 .7rem}
.rail .fact b{display:block;font:600 .72rem/1 "Barlow Condensed",Arial Narrow,sans-serif;
  letter-spacing:.2em;text-transform:uppercase;color:var(--ink);margin-bottom:.22rem}

/* ---------- footer ---------- */
.foot{background:var(--ink);color:#a9a9b2;margin-top:3rem}
.foot-in{max-width:var(--maxw);margin:0 auto;padding:2.6rem var(--shell) 2rem}
.foot h2{font:600 .78rem/1 "Barlow Condensed",Arial Narrow,sans-serif;letter-spacing:.24em;
  text-transform:uppercase;color:#fff;margin:0 0 .9rem}
.foot-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));gap:1.8rem}
.foot ul{list-style:none;margin:0;padding:0}
.foot li{margin:0 0 .4rem}
.foot a{color:#c9c9d1;border:0;font-size:.95rem}
.foot a:hover{color:#fff;border:0}
.foot p{font-size:.92rem;line-height:1.6;margin:0 0 .8rem}
.foot .legal{border-top:1px solid var(--rule-dk);margin-top:2.2rem;padding-top:1.2rem;
  font-size:.85rem;color:#75757e}
.foot .legal b{color:#a9a9b2;font-weight:600}

/* ---------- 404 ---------- */
.oops{max-width:var(--maxw);margin:0 auto;padding:clamp(3rem,9vw,6rem) var(--shell)}
.oops .big{font-family:"Archivo Black",Arial Black,sans-serif;font-size:clamp(4rem,18vw,10rem);
  line-height:.9;color:var(--red);margin:0 0 1rem}

/* ---------- entrance animation: ends visible, safe if JS/anim never runs ---------- */
@keyframes rise{from{opacity:.001;transform:translateY(12px)}to{opacity:1;transform:none}}
.hero-in,.prose>h1{animation:rise .5s ease-out both}
@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}
/* Safeguard: nothing on this site may depend on JS to become visible. */
[data-aos]{opacity:1!important;transform:none!important}

/* ---------- small screens ---------- */
@media (max-width:767px){
  .burger{display:block}
  .nav{display:none}
  .nav.open{display:block}
  .nav ul{flex-direction:column}
  .nav a{border-bottom:1px solid var(--rule-dk);border-left:3px solid transparent}
  .nav a:hover,.nav a[aria-current="page"]{border-left-color:var(--red);border-bottom-color:var(--rule-dk)}
}