:root{
  --black:#171411; --coal:#221E1A; --paper:#F1EEE7;
  --red:#9E2620; --red-deep:#7E1B16; --yellow:#F0B41C;
  --bone:#E9E4D8; --ink:#262220;
  --display:'Rubik Distressed','Oswald',sans-serif;
  --label:'Oswald',sans-serif;
  --body:'Rubik',sans-serif;
  --marker:'Permanent Marker',cursive;
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
@media (prefers-reduced-motion: reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation:none!important;transition:none!important}
}
body{font-family:var(--body);background:var(--paper);color:var(--ink);line-height:1.7;position:relative}
body::after{
  content:"";position:fixed;inset:0;pointer-events:none;z-index:999;opacity:.05;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)'/%3E%3C/svg%3E");
}
html{background:#171411 url('../img/pozadina.svg') repeat;background-size:620px;background-attachment:fixed}
body{max-width:1280px;margin:0 auto;box-shadow:0 0 50px rgba(0,0,0,.45)}
.badge-img{height:3.8rem;width:auto;display:block;position:absolute;right:1.4rem;top:50%;transform:translateY(-50%)}
@media (max-width:700px){.badge-img{position:static;transform:none}.topbar{padding:.9rem 1.5rem}}
a{color:inherit;text-decoration:none}
:focus-visible{outline:3px solid var(--yellow);outline-offset:3px}

/* ===== shared header / nav ===== */
.topbar{background:var(--black);color:var(--bone);display:flex;align-items:center;justify-content:flex-start;gap:1.5rem;padding:.9rem 5rem .9rem 1.4rem;flex-wrap:wrap;position:relative}
.logo{display:flex;align-items:center;gap:.5rem}
.logo-img{height:4.2rem;width:auto;display:block}
.bolt-img{height:3.9rem;width:auto;display:block}
.moto-img{height:3.4rem;width:auto;display:block}
.logo-mark{font-family:var(--marker);font-size:1.7rem;color:var(--bone);white-space:nowrap}
.logo-year{display:flex;flex-direction:column;gap:.2rem;font-family:var(--label);font-weight:600;font-size:.65rem}
.logo-year span{background:var(--red);color:var(--bone);padding:.05rem .3rem;line-height:1.2}
.tagline{font-family:var(--display);font-size:1.05rem;line-height:1.15;text-transform:uppercase;letter-spacing:.04em;max-width:16ch}
.nav{background:var(--red);display:flex;flex-wrap:wrap;position:sticky;top:0;z-index:50;box-shadow:0 3px 0 rgba(0,0,0,.35)}
.nav-links > a{font-family:var(--display);font-size:1rem;letter-spacing:.06em;color:var(--bone);padding:.8rem 1.4rem;text-transform:uppercase;border-right:1px solid var(--red-deep);transition:background .15s}
.nav-links > a:hover{background:var(--red-deep)}
.nav-links > a[aria-current]{background:var(--black)}

/* ===== essay layout ===== */
.wrap{max-width:720px;margin:0 auto;padding:3rem 1.5rem 4rem}
h1{font-family:var(--display);font-size:clamp(2rem,5vw,2.8rem);text-transform:uppercase;letter-spacing:.03em;color:var(--black);margin-bottom:1.6rem}
.essay p{margin-bottom:1.3rem;font-size:1.05rem}
.essay p:first-of-type::first-letter{
  font-family:var(--display);font-size:3.4em;float:left;line-height:.85;
  padding-right:.12em;color:var(--red);
}
.pull{
  margin:2.4rem 0;padding:1.4rem 1.6rem;border-left:8px solid var(--red);
  background:#fff;box-shadow:6px 6px 0 var(--black);
  font-family:var(--display);font-size:clamp(1.2rem,3vw,1.55rem);
  text-transform:uppercase;letter-spacing:.03em;line-height:1.35;color:var(--black);
}

/* ===== photo band ===== */
.photos{display:grid;grid-template-columns:repeat(2,1fr);gap:1.6rem;margin:3rem 0}
.ph{aspect-ratio:4/3;position:relative;overflow:hidden;background:var(--coal);display:flex;align-items:flex-end;justify-content:center}
.ph img{width:100%;height:100%;object-fit:cover}
.ph-tag{position:absolute;inset:auto 0 0 0;text-align:center;font-family:var(--label);font-weight:600;font-size:.7rem;letter-spacing:.2em;color:var(--bone);background:rgba(0,0,0,.55);padding:.4rem;text-transform:uppercase}
.ph-empty{background:repeating-linear-gradient(45deg, var(--coal) 0 18px, #2E2925 18px 36px)}
.ph-empty::before{content:"📷";font-size:2rem;position:absolute;inset:0;display:flex;align-items:center;justify-content:center;opacity:.5}

/* ===== trust block ===== */
.trust{background:var(--black);color:var(--bone);padding:1.8rem 1.7rem;margin-top:2.5rem}
.trust h2{font-family:var(--display);font-size:1.3rem;text-transform:uppercase;letter-spacing:.04em;color:var(--yellow);margin-bottom:.7rem}
.trust p{font-size:.95rem}

/* ===== CTA ===== */
.cta-strip{background:var(--red);color:var(--bone);text-align:center;padding:3rem 1.5rem;margin-top:4rem}
.cta-strip h2{font-family:var(--display);font-size:clamp(1.5rem,3.5vw,2rem);text-transform:uppercase;letter-spacing:.03em;margin-bottom:1.4rem}
.cta-strip a{
  display:inline-block;background:var(--black);color:var(--bone);
  font-family:var(--display);font-size:1.3rem;letter-spacing:.05em;text-transform:uppercase;
  padding:.7em 1.5em;box-shadow:6px 6px 0 var(--red-deep);
  transition:transform .12s, box-shadow .12s;
}
.cta-strip a:hover{transform:translate(3px,3px);box-shadow:3px 3px 0 var(--red-deep)}

footer{background:var(--black);text-align:center;padding:2.5rem 1rem}
.wordmark-img{width:min(520px,82%);height:auto;display:inline-block}
.foot-meta{margin-top:1rem;color:#8C8478;font-size:.78rem;font-family:var(--label);letter-spacing:.14em;text-transform:uppercase}

@media (max-width:680px){
  .photos{grid-template-columns:1fr}
  .topbar{justify-content:center;text-align:center}
  .nav{justify-content:center}
}