/* ============================================================
   CARPE DIEM — base / design system + motion foundation
   "For those who define their own rules."
   ============================================================ */
@import url("https://fonts.googleapis.com/css2?family=Archivo:ital,wght@0,400;0,600;0,800;0,900;1,700&family=Archivo+Narrow:wght@400;500;600;700&family=Inconsolata:wght@400;500;700&display=swap");

:root{
  --red:#ff1a12; --red-deep:#c50f08;
  --ink:#0a0a0b; --ink-2:#121214;
  --paper:#ffffff; --smoke:#f4f3f1; --smoke-2:#e9e7e3;
  --mute:rgba(10,10,11,.54); --mute-d:rgba(255,255,255,.58);
  --line:rgba(10,10,11,.14); --line-d:rgba(255,255,255,.16);
  --disp:"Archivo",sans-serif;
  --cond:"Archivo Narrow",sans-serif;
  --mono:"Inconsolata",monospace;
  --gutter:clamp(18px,4vw,64px);
  --max:1600px;
  --ease:cubic-bezier(.19,1,.22,1);
  --ease-io:cubic-bezier(.65,.05,.36,1);
}
*,*::before,*::after{box-sizing:border-box}
html,body{margin:0;padding:0}
html{-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
html.lenis,html.lenis body{height:auto}
.lenis.lenis-smooth{scroll-behavior:auto !important}
.lenis.lenis-stopped{overflow:hidden}
body{
  font-family:var(--disp);font-weight:400;font-size:clamp(15px,1.05vw,17px);line-height:1.5;
  color:var(--ink);background:var(--paper);overflow-x:hidden;cursor:none;
}
img,video{display:block;max-width:100%}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;background:none;border:0;cursor:none}
h1,h2,h3,h4{margin:0;font-weight:900;line-height:.9;letter-spacing:-.02em}
::selection{background:var(--red);color:#fff}
@media(hover:none){body,button{cursor:auto}}

/* ---------- type helpers ---------- */
.mono{font-family:var(--mono);font-weight:500;letter-spacing:.12em;text-transform:uppercase}
.cond{font-family:var(--cond)}
.eyebrow{font-family:var(--mono);font-weight:500;font-size:11px;letter-spacing:.28em;text-transform:uppercase;color:var(--mute)}
.eyebrow--red{color:var(--red)}
.italic{font-style:italic}
.display{font-family:var(--disp);font-weight:900;letter-spacing:-.03em;line-height:.86;text-transform:uppercase}

/* ---------- film grain + custom cursor ---------- */
.grain{position:fixed;inset:0;z-index:9990;pointer-events:none;opacity:.05;mix-blend-mode:multiply;
  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='.75' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E")}
.cursor{position:fixed;top:0;left:0;width:7px;height:7px;border-radius:50%;background:var(--red);
  z-index:10000;pointer-events:none;transform:translate(-50%,-50%);mix-blend-mode:difference}
.cursor-ring{position:fixed;top:0;left:0;width:36px;height:36px;border:1px solid var(--ink);border-radius:50%;
  z-index:9999;pointer-events:none;transform:translate(-50%,-50%);
  transition:width .3s var(--ease),height .3s var(--ease),border-color .3s,background .3s,opacity .3s}
body.cur-lg .cursor-ring{width:74px;height:74px;background:rgba(255,26,18,.08);border-color:var(--red)}
body.cur-dark .cursor-ring{border-color:rgba(255,255,255,.7)}
body.cur-hide .cursor-ring{opacity:0}
@media(hover:none){.cursor,.cursor-ring{display:none}}

/* ---------- loader ---------- */
.loader{position:fixed;inset:0;z-index:10001;background:var(--ink);color:#fff;
  display:flex;align-items:center;justify-content:center;flex-direction:column;gap:20px}
.loader__word{font-family:var(--disp);font-weight:900;text-transform:uppercase;letter-spacing:-.03em;
  font-size:clamp(44px,10vw,140px);line-height:.86;overflow:hidden}
.loader__word span{display:block;transform:translateY(105%)}
.loader__bar{width:min(280px,60vw);height:1px;background:rgba(255,255,255,.2);position:relative;overflow:hidden}
.loader__bar i{position:absolute;inset:0;background:var(--red);transform:scaleX(0);transform-origin:left}
.loader__pct{font-family:var(--mono);font-size:12px;letter-spacing:.2em;color:rgba(255,255,255,.6)}

/* ---------- nav ---------- */
.nav{position:fixed;top:0;left:0;right:0;z-index:400;display:grid;grid-template-columns:1fr auto 1fr;
  align-items:center;padding:18px var(--gutter);color:#fff;
  transition:color .4s var(--ease),background .4s var(--ease),border-color .4s,padding .4s var(--ease);border-bottom:1px solid transparent}
.nav.solid{color:var(--ink);background:rgba(255,255,255,.82);backdrop-filter:blur(14px) saturate(1.2);
  border-bottom-color:var(--line);padding-top:14px;padding-bottom:14px}
.nav.solid .nav__cart b{background:var(--ink)}
.nav__l,.nav__r{display:flex;gap:26px;align-items:center;font-family:var(--mono);font-size:12px;
  letter-spacing:.14em;text-transform:uppercase}
.nav__r{justify-content:flex-end}
.nav a:hover{color:var(--red)}
.nav__logo{justify-self:center;font-family:var(--disp);font-weight:900;font-size:19px;letter-spacing:-.02em;
  text-transform:uppercase;white-space:nowrap}
.nav__burger{display:none;font-family:var(--mono);font-size:12px;letter-spacing:.14em;text-transform:uppercase}
.nav__cart{display:inline-flex;align-items:center;gap:8px}
.nav__cart b{min-width:19px;height:19px;padding:0 5px;border-radius:50%;background:var(--red);color:#fff;
  font-family:var(--mono);font-size:11px;display:inline-flex;align-items:center;justify-content:center;mix-blend-mode:normal}
.nav__clock{font-family:var(--mono);font-size:11px;letter-spacing:.12em;opacity:.85}
@media(max-width:900px){
  .nav{grid-template-columns:auto 1fr auto}
  .nav__l,.nav__clock{display:none}.nav__logo{justify-self:start}
  .nav__burger{display:inline-block}
  .nav__r{gap:14px;font-size:11px}
  .nav__logo{font-size:16px}
}

/* ---------- off-canvas menu ---------- */
.menu{position:fixed;inset:0;z-index:410;background:var(--ink);color:#fff;
  display:flex;flex-direction:column;justify-content:center;padding:var(--gutter);
  clip-path:inset(0 0 100% 0);transition:clip-path .8s var(--ease);pointer-events:none}
.menu.open{clip-path:inset(0 0 0 0);pointer-events:auto}
.menu__nav a{display:block;font-family:var(--disp);font-weight:900;text-transform:uppercase;
  font-size:clamp(38px,9vw,104px);line-height:1.02;letter-spacing:-.03em;color:#fff;transition:color .3s,padding-left .4s var(--ease)}
.menu__nav a:hover{color:var(--red);padding-left:18px}
.menu__foot{position:absolute;left:var(--gutter);right:var(--gutter);bottom:34px;display:flex;justify-content:space-between;
  gap:20px;flex-wrap:wrap;font-family:var(--mono);font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:var(--mute-d)}
.menu__foot a:hover{color:var(--red)}
.menu__close{position:absolute;top:20px;right:var(--gutter);font-family:var(--mono);font-size:13px;letter-spacing:.16em;text-transform:uppercase}

/* ---------- buttons ---------- */
.btn{display:inline-flex;align-items:center;gap:12px;padding:15px 26px;font-family:var(--mono);font-weight:500;
  font-size:12px;letter-spacing:.16em;text-transform:uppercase;border:1px solid var(--ink);border-radius:2px;
  transition:background .35s var(--ease),color .35s,border-color .35s,transform .35s var(--ease);position:relative;overflow:hidden}
.btn span{position:relative;z-index:1}
.btn::before{content:"";position:absolute;inset:0;background:var(--ink);transform:translateY(101%);transition:transform .4s var(--ease);z-index:0}
.btn:hover::before{transform:translateY(0)}
.btn:hover{color:#fff}
.btn--red{background:var(--red);border-color:var(--red);color:#fff}
.btn--red::before{background:var(--ink)}
.btn--ghost-d{border-color:var(--line-d);color:#fff}.btn--ghost-d::before{background:#fff}.btn--ghost-d:hover{color:var(--ink)}

/* ---------- marquee ---------- */
.marquee{overflow:hidden;white-space:nowrap;border-block:1px solid var(--line);padding:18px 0}
.marquee--red{background:var(--red);color:#fff;border-color:var(--red)}
.marquee--dark{background:var(--ink);color:#fff;border-color:transparent}
.marquee__t{display:inline-block;will-change:transform}
.marquee__t span{font-family:var(--disp);font-weight:900;text-transform:uppercase;letter-spacing:-.02em;
  font-size:clamp(26px,4vw,58px);padding:0 26px}
.marquee__t span i{color:var(--red);font-style:normal}
.marquee--red .marquee__t span i,.marquee--dark .marquee__t span i{-webkit-text-stroke:1px #fff;color:transparent}

/* ---------- reveals ---------- */
.rise{opacity:0;transform:translateY(40px);transition:opacity 1s var(--ease),transform 1s var(--ease)}
.rise.in{opacity:1;transform:none}
.linemask{overflow:hidden;display:block}
.linemask > *{display:block;transform:translateY(105%);transition:transform 1s var(--ease)}
.linemask.in > *{transform:none}
@media(prefers-reduced-motion:reduce){
  .rise,.linemask>*{opacity:1 !important;transform:none !important;transition:none}
}

/* ---------- footer ---------- */
.foot{background:var(--ink);color:#fff;padding:clamp(60px,9vw,120px) var(--gutter) 40px;position:relative}
.foot__top{display:flex;justify-content:space-between;gap:40px;flex-wrap:wrap;border-bottom:1px solid var(--line-d);padding-bottom:44px}
.foot__cols{display:flex;gap:clamp(30px,6vw,90px);flex-wrap:wrap}
.foot__col h4{font-family:var(--mono);font-weight:500;font-size:11px;letter-spacing:.2em;text-transform:uppercase;color:var(--mute-d);margin-bottom:16px}
.foot__col a{display:block;padding:5px 0;font-size:15px;color:rgba(255,255,255,.85);transition:color .25s,padding-left .3s var(--ease)}
.foot__col a:hover{color:var(--red);padding-left:6px}
.foot__giant{font-family:var(--disp);font-weight:900;text-transform:uppercase;letter-spacing:-.04em;
  font-size:clamp(64px,20vw,340px);line-height:.8;margin:40px 0 0;white-space:nowrap;overflow:hidden}
.foot__bottom{display:flex;justify-content:space-between;gap:20px;flex-wrap:wrap;
  font-family:var(--mono);font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--mute-d);margin-top:20px}

.shell{max-width:var(--max);margin:0 auto;padding:0 var(--gutter)}
[hidden]{display:none !important}