/* ═══ CaptuREE — base. Loaded by every page. ═══ */

:root{
  --ink:#080808;
  --ink-2:#131313;
  --red:#C1291B;
  --red-bright:#E8382A;
  --paper:#F6F7F9;
  --white:#ffffff;
  --grey:#8b8b8b;

  --display:'Anton','Anton Regular',Impact,Haettenschweiler,'Arial Narrow Bold',sans-serif;
  --body:'Montserrat',system-ui,sans-serif;
  --gut:clamp(1.25rem,4vw,3rem);
}

*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{
  font-family:var(--body);background:var(--ink);color:var(--white);
  line-height:1.6;overflow-x:hidden;font-size:16px;-webkit-font-smoothing:antialiased;
}
img{max-width:100%;height:auto;display:block}
a{color:inherit;text-decoration:none}

h1,h2,h3,.display{
  font-family:var(--display);font-weight:400;text-transform:none;
  letter-spacing:-0.015em;line-height:0.92;
}
.wrap{max-width:1180px;margin:0 auto;padding-left:var(--gut);padding-right:var(--gut)}
.tag{font-weight:600;font-size:.68rem;letter-spacing:.22em;text-transform:uppercase}
:focus-visible{outline:3px solid var(--red-bright);outline-offset:3px}

/* ───────── NAV ───────── */
.nav{
  position:fixed;top:0;left:0;right:0;z-index:60;
  display:flex;align-items:center;gap:1rem;
  padding:.85rem var(--gut);
  border-bottom:1px solid transparent;
  transition:background .35s ease, backdrop-filter .35s ease, border-color .35s ease;
}
.nav.stuck{background:rgba(8,8,8,.86);backdrop-filter:blur(18px);border-bottom-color:rgba(255,255,255,.1)}
.brand{display:flex;align-items:center;gap:.85rem}
.brand-logo{width:40px;height:40px;object-fit:contain;flex:none}
.wordmark{display:flex;flex-direction:column;line-height:1}
.wordmark b{font-family:var(--display);font-weight:400;font-size:1.15rem;letter-spacing:.3em}
.wordmark i{font-style:normal;font-size:.58rem;letter-spacing:.25em;text-transform:uppercase;color:var(--grey);margin-top:.22rem}
.nav-links{display:flex;gap:1.7rem;margin-left:auto}
.nav-links a{font-size:.78rem;font-weight:600;letter-spacing:.08em;border-bottom:2px solid transparent;padding-bottom:2px;transition:border-color .2s}
.nav-links a:hover{border-bottom-color:var(--red-bright)}
.nav-back{margin-left:auto;font-size:.78rem;font-weight:600;letter-spacing:.08em;
  border-bottom:2px solid transparent;padding-bottom:2px;transition:border-color .2s}
.nav-back:hover{border-bottom-color:var(--red-bright)}
.nav-cta{
  border:2px solid var(--red);background:var(--red);color:var(--white);
  font-size:.76rem;font-weight:700;letter-spacing:.08em;padding:.55rem 1.1rem;
  transition:background .2s;flex:none;margin-left:auto
}
.nav-links + .nav-back{margin-left:auto;font-size:.78rem;font-weight:600;letter-spacing:.08em;
  border-bottom:2px solid transparent;padding-bottom:2px;transition:border-color .2s}
.nav-back:hover{border-bottom-color:var(--red-bright)}
.nav-cta{margin-left:1.7rem}
.nav-cta:hover{background:transparent}
@media(max-width:820px){.nav-links{display:none}.wordmark i{display:none}}
@media(max-width:420px){.wordmark b{font-size:1rem;letter-spacing:.2em}}

/* ───────── WAVY BLOCK EDGES ───────── */
.edge{display:block;width:100%;height:clamp(34px,4.6vw,62px);position:relative;z-index:1}

/* ───────── BANDS ───────── */
.band{padding:clamp(3.2rem,7.5vw,5.6rem) 0;scroll-margin-top:4.5rem}
.band-red{background:var(--red);color:var(--ink)}
.band-paper{background:var(--paper);color:var(--ink)}
.band-ink{background:var(--ink);color:var(--white)}

.loop{text-align:center}
.loop .tag{color:rgba(8,8,8,.86);display:block;margin-bottom:1rem}
.loop h2{font-size:clamp(2.3rem,8.6vw,6.4rem);color:var(--ink);max-width:16ch;margin:0 auto}

/* ───────── CONTACT ───────── */
.contact{text-align:center}
.contact h2{font-size:clamp(2.2rem,7vw,5rem);color:var(--ink);max-width:14ch;margin:0 auto 1.2rem}
.contact p{color:rgba(8,8,8,.78);font-weight:500;max-width:46ch;margin:0 auto 1.8rem}
.btn{
  display:inline-block;background:var(--ink);color:var(--white);font-weight:600;
  font-size:.9rem;letter-spacing:.04em;padding:.9rem 1.7rem;border:2px solid var(--ink);
  transition:background .18s,color .18s
}
.btn:hover{background:transparent;color:var(--ink)}

footer{background:var(--ink);padding:2.4rem 0;border-top:1px solid rgba(255,255,255,.1)}
.foot{display:flex;flex-wrap:wrap;gap:1rem;justify-content:space-between;align-items:center;font-size:.76rem;color:rgba(255,255,255,.45);font-weight:500}

/* ───────── SCROLL REVEAL ───────── */
[data-rise]{
  opacity:0;transform:translateY(26px);
  transition:opacity .7s cubic-bezier(.2,.7,.25,1), transform .7s cubic-bezier(.2,.7,.25,1);
  transition-delay:var(--d,0ms);
}
[data-rise].in{opacity:1;transform:none}

[data-wipe]{
  clip-path:inset(0 0 100% 0);
  transition:clip-path 1s cubic-bezier(.2,.75,.2,1);
  transition-delay:var(--d,0ms);
}
[data-wipe].in{clip-path:inset(0 0 0 0)}

[data-draw] .rule{transform:scaleX(0);transform-origin:left;transition:transform .6s cubic-bezier(.2,.75,.2,1) .12s}
[data-draw].in .rule{transform:none}

@media (prefers-reduced-motion: reduce){
  html{scroll-behavior:auto}
  *{animation-duration:.001ms !important;transition-duration:.001ms !important}
  [data-rise],[data-wipe]{opacity:1;transform:none;clip-path:none}
  [data-draw] .rule{transform:none}
}