/* ============================================================
   AUTOFRAMES MEDIA — Motorsport Photography
   Monochrome / technical / telemetry-inspired design system
   Fonts: Archivo (display/grotesque) + JetBrains Mono (labels)
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Archivo:wght@400;500;600;700;800;900&family=JetBrains+Mono:wght@400;500;700&display=swap');

:root{
  --black:#000000;
  --ink:#0a0a0b;        /* base surface */
  --panel:#101012;      /* raised panels */
  --panel-2:#161618;    /* hover / inputs */
  --line:rgba(255,255,255,0.12);
  --line-soft:rgba(255,255,255,0.07);
  --fg:#f1f1ef;         /* primary text */
  --fg-dim:#a4a4a2;     /* secondary */
  --fg-faint:#6a6a68;   /* tertiary / meta */
  --paper:#f3f2ee;      /* light section */
  --paper-ink:#0c0c0d;

  --mono:'JetBrains Mono', ui-monospace, Menlo, monospace;
  --disp:'Archivo', system-ui, sans-serif;

  --maxw:1600px;
  --gut:clamp(18px,4.5vw,72px);
  --header-h:96px;
}

*{box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{
  margin:0;
  background:var(--ink);
  color:var(--fg);
  font-family:var(--disp);
  font-weight:400;
  line-height:1.5;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
  overflow-x:hidden;
}
img{display:block;max-width:100%;}
a{color:inherit;text-decoration:none;}

::selection{background:#fff;color:#000;}

/* ---------- type helpers ---------- */
.mono{font-family:var(--mono);}
.kicker{
  font-family:var(--mono);
  font-size:12px;
  font-weight:500;
  letter-spacing:0.26em;
  text-transform:uppercase;
  color:var(--fg-faint);
}
.kicker--bright{color:var(--fg-dim);}

h1,h2,h3{margin:0;font-weight:800;line-height:0.92;letter-spacing:-0.02em;text-transform:uppercase;}
.display{
  font-weight:900;
  font-size:clamp(54px,11vw,168px);
  line-height:0.86;
  letter-spacing:-0.035em;
  text-transform:uppercase;
}

/* ---------- layout ---------- */
/* content is capped + centred so it never sprawls on large monitors */
.wrap{max-width:var(--maxw);width:100%;margin-inline:auto;padding-inline:var(--gut);}
.full{width:100%;}
.rule{height:1px;background:var(--line);border:0;margin:0;}

/* ---------- header ---------- */
.site-header{
  position:sticky;top:0;z-index:60;
  background:rgba(8,8,9,0.72);
  backdrop-filter:blur(14px) saturate(120%);
  border-bottom:1px solid var(--line-soft);
}
.site-header__inner{
  height:var(--header-h);
  display:flex;align-items:center;justify-content:space-between;
  gap:24px;
}
.brand{display:flex;align-items:center;gap:12px;}
.brand__logo{height:clamp(56px,6.4vw,76px);max-height:calc(var(--header-h) - 22px);width:auto;display:block;flex:none;}
.brand__name{font-family:var(--disp);font-weight:800;letter-spacing:0.02em;font-size:16px;text-transform:uppercase;line-height:1;}
.brand__name small{display:block;font-family:var(--mono);font-weight:400;font-size:9.5px;letter-spacing:0.28em;color:var(--fg-faint);margin-top:4px;white-space:nowrap;}

.nav{display:flex;align-items:center;gap:30px;}
.nav a{
  font-family:var(--mono);font-size:12px;font-weight:500;letter-spacing:0.12em;
  text-transform:uppercase;color:var(--fg-dim);position:relative;padding:6px 0;
  transition:color .2s;
}
.nav a:hover{color:var(--fg);}
.nav a[aria-current="page"]{color:var(--fg);}
.nav a[aria-current="page"]::after{
  content:"";position:absolute;left:0;right:0;bottom:-2px;height:1.5px;background:var(--fg);
}
.nav__cta{
  border:1px solid var(--line);padding:9px 16px !important;color:var(--fg) !important;
}
.nav__cta:hover{background:var(--fg);color:#000 !important;}

.nav-toggle{display:none;background:none;border:1px solid var(--line);color:var(--fg);
  width:42px;height:38px;cursor:pointer;}
.nav-toggle span{display:block;width:18px;height:1.5px;background:var(--fg);margin:3px auto;}

/* ---------- footer ---------- */
.site-footer{border-top:1px solid var(--line-soft);margin-top:0;background:var(--black);}
.site-footer__top{
  display:grid;grid-template-columns:1.4fr 1fr 1fr;gap:40px;
  padding-block:64px 48px;
}
.foot-statement{font-family:var(--disp);font-weight:800;text-transform:uppercase;
  font-size:clamp(28px,4vw,46px);line-height:0.95;letter-spacing:-0.02em;max-width:14ch;}
.foot-logo{width:clamp(150px,15vw,196px);height:auto;display:block;opacity:.95;}
.foot-col h4{font-family:var(--mono);font-size:11px;font-weight:500;letter-spacing:0.2em;
  text-transform:uppercase;color:var(--fg-faint);margin:0 0 16px;}
.foot-col a,.foot-col p{display:block;font-family:var(--mono);font-size:13px;color:var(--fg-dim);
  margin:0 0 10px;transition:color .2s;}
.foot-col a:hover{color:var(--fg);}
.site-footer__bottom{display:flex;justify-content:center;align-items:center;gap:16px;
  padding-block:22px;border-top:1px solid var(--line-soft);
  font-family:var(--mono);font-size:11px;letter-spacing:0.08em;color:var(--fg-faint);text-transform:uppercase;flex-wrap:wrap;}

/* ---------- buttons ---------- */
.btn{
  display:inline-flex;align-items:center;gap:12px;
  font-family:var(--mono);font-size:12.5px;font-weight:500;letter-spacing:0.14em;text-transform:uppercase;
  padding:14px 22px;border:1px solid var(--fg);color:var(--fg);background:transparent;cursor:pointer;
  transition:background .2s,color .2s,transform .2s;
}
.btn:hover{background:var(--fg);color:#000;}
.btn--solid{background:var(--fg);color:#000;}
.btn--solid:hover{background:transparent;color:var(--fg);}
.btn__arrow{transition:transform .2s;}
.btn:hover .btn__arrow{transform:translateX(4px);}

/* ---------- image frame motif ---------- */
.frame{position:relative;overflow:hidden;background:var(--panel);display:block;}
.frame img{width:100%;height:100%;object-fit:cover;display:block;
  transition:transform .9s cubic-bezier(.16,.84,.44,1),filter .6s;}
.frame:hover img{transform:scale(1.04);}
.frame__tag{
  position:absolute;left:14px;bottom:13px;z-index:3;
  font-family:var(--mono);font-size:11px;letter-spacing:0.1em;text-transform:uppercase;
  color:#fff;text-shadow:0 1px 8px rgba(0,0,0,.8);
  display:flex;align-items:center;gap:8px;
}
.frame__idx{
  position:absolute;left:14px;top:12px;z-index:3;
  font-family:var(--mono);font-size:11px;letter-spacing:0.1em;color:rgba(255,255,255,.85);
  text-shadow:0 1px 8px rgba(0,0,0,.8);
}
.frame__meta{
  position:absolute;right:14px;bottom:13px;z-index:3;
  font-family:var(--mono);font-size:10px;letter-spacing:0.08em;color:rgba(255,255,255,.6);
  text-shadow:0 1px 8px rgba(0,0,0,.8);
}
.frame::after{ /* gradient for legibility */
  content:"";position:absolute;inset:0;z-index:2;pointer-events:none;
  background:linear-gradient(to top,rgba(0,0,0,.55) 0%,rgba(0,0,0,0) 32%),
             linear-gradient(to bottom,rgba(0,0,0,.35) 0%,rgba(0,0,0,0) 22%);
  opacity:.9;
}
/* viewfinder corner ticks */
.frame--ticks::before{
  content:"";position:absolute;inset:12px;z-index:3;pointer-events:none;
  background:
    linear-gradient(#fff,#fff) left top/14px 1.5px no-repeat,
    linear-gradient(#fff,#fff) left top/1.5px 14px no-repeat,
    linear-gradient(#fff,#fff) right top/14px 1.5px no-repeat,
    linear-gradient(#fff,#fff) right top/1.5px 14px no-repeat,
    linear-gradient(#fff,#fff) left bottom/14px 1.5px no-repeat,
    linear-gradient(#fff,#fff) left bottom/1.5px 14px no-repeat,
    linear-gradient(#fff,#fff) right bottom/14px 1.5px no-repeat,
    linear-gradient(#fff,#fff) right bottom/1.5px 14px no-repeat;
  opacity:.0;transition:opacity .3s;
}
.frame--ticks:hover::before{opacity:.5;}

/* ---------- section heading row ---------- */
.section-head{display:flex;align-items:flex-end;justify-content:space-between;gap:24px;
  padding-block:clamp(48px,7vw,96px) 30px;flex-wrap:wrap;}
.section-head h2{font-size:clamp(30px,5vw,68px);}
.section-head__num{font-family:var(--mono);font-size:12px;color:var(--fg-faint);letter-spacing:0.2em;}

/* reveal */
.reveal{opacity:0;transform:translateY(26px);transition:opacity .9s cubic-bezier(.16,.84,.44,1),transform .9s cubic-bezier(.16,.84,.44,1);}
.reveal.in{opacity:1;transform:none;}
@media (prefers-reduced-motion:reduce){
  .reveal{opacity:1;transform:none;transition:none;}
  .frame img{transition:none;}
}

/* ---------- responsive ---------- */
@media (max-width:860px){
  :root{--header-h:82px;}
  .brand__logo{height:54px;}
  .nav{position:fixed;inset:var(--header-h) 0 auto 0;flex-direction:column;align-items:stretch;
    gap:0;background:rgba(8,8,9,.97);backdrop-filter:blur(16px);border-bottom:1px solid var(--line);
    padding:8px var(--gut) 22px;transform:translateY(calc(-100% - var(--header-h) - 14px));pointer-events:none;
    transition:transform .35s cubic-bezier(.16,.84,.44,1);z-index:50;}
  .nav.open{transform:none;pointer-events:auto;}
  .nav a{padding:16px 0;border-bottom:1px solid var(--line-soft);font-size:14px;}
  .nav a[aria-current="page"]::after{display:none;}
  .nav__cta{text-align:center;margin-top:14px;border-width:1px;}
  .nav-toggle{display:block;}
  .site-footer__top{grid-template-columns:1fr;gap:34px;}
}