/* ==========================================================================
   BASE — tokens, reset, typography primitives
   Marvic Dollentas · portfolio
   ========================================================================== */

:root{
  /* ── surface ── */
  --paper:      #F2F0EB;
  --paper-2:    #EAE7E0;
  --ink:        #10231B;
  --ink-70:     rgba(16,35,27,.70);
  /* secondary text — .64 is the lightest tint that still clears WCAG AA (4.9:1)
     on --paper, so every readable label stays legible */
  --ink-45:     rgba(16,35,27,.64);
  --ink-28:     rgba(16,35,27,.28);   /* decoration only: rules, separators */
  --ink-12:     rgba(16,35,27,.12);
  --line:       rgba(16,35,27,.13);
  --acc:        #DC4B22;
  --acc-ink:    #FFF6F2;

  /* ── type ── */
  --f-display:  "Archivo", "Helvetica Neue", Helvetica, sans-serif;
  --f-text:     "Host Grotesk", "Helvetica Neue", Helvetica, sans-serif;

  /* 18px body is the baseline; metadata sits one step down from it */
  --t-meta:     14px;
  --t-body:     18px;

  /* mirrors the reference's 144px @1440 display scale */
  --t-display:  clamp(3.1rem, 10vw, 9rem);
  --t-mid:      clamp(1.55rem, 2.1vw, 1.9rem);
  --t-lead:     clamp(1.5rem, 2.9vw, 2.55rem);

  /* ── grid ── */
  --pad:        clamp(18px, 2.8vw, 40px);
  --gut:        clamp(14px, 1.7vw, 24px);
  --col:        calc((100vw - (var(--pad) * 2) - (var(--gut) * 11)) / 12);
  --head-h:     94px;

  /* ── motion ── */
  --e-brand:    cubic-bezier(.22,1,.36,1);
  --e-snap:     cubic-bezier(.32,.72,0,1);
  --e-soft:     cubic-bezier(.4,0,.2,1);
}

*,*::before,*::after{ box-sizing:border-box; }

html{
  -webkit-text-size-adjust:100%;
  scroll-behavior:auto;
}

html.lenis, html.lenis body{ height:auto; }
.lenis.lenis-smooth{ scroll-behavior:auto !important; }
.lenis.lenis-stopped{ overflow:hidden; }

body{
  margin:0;
  background:var(--paper);
  color:var(--ink);
  font-family:var(--f-text);
  font-size:var(--t-body);
  font-weight:400;
  line-height:1.5;
  letter-spacing:-.005em;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  overflow-x:hidden;
  text-rendering:optimizeLegibility;
}

body.is-loading{ overflow:hidden; height:100vh; }

img,svg,video,canvas{ display:block; max-width:100%; }
img{ height:auto; }

h1,h2,h3,h4,p,figure,ul,ol,blockquote{ margin:0; padding:0; }
ul,ol{ list-style:none; }

a{ color:inherit; text-decoration:none; }
button{
  font:inherit; color:inherit; background:none;
  border:0; padding:0; cursor:pointer; text-align:left;
}

::selection{ background:var(--acc); color:var(--acc-ink); }

/* ── focus: visible, never ugly ─────────────────────────────────────────── */
:focus{ outline:none; }
:focus-visible{
  outline:2px solid var(--acc);
  outline-offset:4px;
  border-radius:2px;
}

.sr-only{
  position:absolute; width:1px; height:1px;
  padding:0; margin:-1px; overflow:hidden;
  clip:rect(0 0 0 0); clip-path:inset(50%); white-space:nowrap; border:0;
}

.skip-link{
  position:fixed; top:10px; left:10px; z-index:9999;
  padding:10px 16px; background:var(--ink); color:var(--paper);
  font-size:12px; letter-spacing:.06em; text-transform:uppercase;
  transform:translateY(-200%); transition:transform .3s var(--e-brand);
}
.skip-link:focus-visible{ transform:translateY(0); }

/* ══ TYPE PRIMITIVES ═══════════════════════════════════════════════════════ */

/* huge uppercase display — the reference's core voice */
.d-type{
  font-family:var(--f-display);
  font-size:var(--t-display);
  font-weight:700;
  font-stretch:105%;
  line-height:.86;
  letter-spacing:-.035em;
  text-transform:uppercase;
}

.h-mid{
  font-family:var(--f-text);
  font-size:var(--t-mid);
  font-weight:400;
  line-height:1.1;
  letter-spacing:-.025em;
}

.lab{
  font-size:11px;
  font-weight:400;
  letter-spacing:.12em;
  text-transform:uppercase;
  color:var(--ink-45);
}

.meta{
  font-size:var(--t-meta);
  line-height:1.35;
  letter-spacing:0;
}

.dot{
  width:6px; height:6px; border-radius:50%;
  background:var(--ink-28); display:inline-block;
  margin-right:8px; flex:none;
}

/* ══ SPLIT-TEXT MASK (word reveal) ════════════════════════════════════════ */
/* one mask per word, so the browser still controls wrapping and the copy
   cannot break on a font swap or resize. The padding/margin pair gives
   descenders room inside the mask without adding layout height. */
.line-wrap{
  display:inline-block;
  overflow:hidden;
  vertical-align:top;
  padding-bottom:.2em;
  margin-bottom:-.2em;
}
.line-in{ display:block; transform:translate3d(0,110%,0); will-change:transform; }

/* word reveal on display type */
[data-reveal-word]{ display:block; overflow:hidden; }
[data-reveal-word] > i{
  display:block; font-style:normal;
  transform:translate3d(0,105%,0);
  will-change:transform;
}

/* ══ GRAIN ════════════════════════════════════════════════════════════════ */
.grain{
  position:absolute; inset:-120%;
  pointer-events:none; z-index:4;
  opacity:.22; mix-blend-mode:multiply;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.82' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='220' height='220' filter='url(%23n)' opacity='.55'/%3E%3C/svg%3E");
  animation:grainShift 6s steps(6) infinite;
}
@keyframes grainShift{
  0%{transform:translate(0,0)}      16%{transform:translate(-4%,-3%)}
  33%{transform:translate(3%,-5%)}  50%{transform:translate(-2%,4%)}
  66%{transform:translate(4%,2%)}   83%{transform:translate(-3%,-2%)}
  100%{transform:translate(0,0)}
}

/* ══ CUSTOM CURSOR ════════════════════════════════════════════════════════ */
.cursor{
  position:fixed; top:0; left:0; z-index:9000;
  pointer-events:none; opacity:0;
  transform:translate3d(-100px,-100px,0);
  will-change:transform;
}
.cursor__dot{
  position:absolute; top:-4px; left:-4px;
  width:8px; height:8px; border-radius:50%;
  background:var(--ink);
  transform:scale(1);
  transition:transform .45s var(--e-brand), background-color .3s var(--e-soft), opacity .3s;
}
.cursor__pill{
  position:absolute; top:-13px; left:-13px;
  height:26px; padding:0 13px;
  display:flex; align-items:center;
  border-radius:99px;
  background:var(--acc); color:var(--acc-ink);
  font-family:var(--f-text);
  font-size:10px; font-weight:500;
  letter-spacing:.1em; text-transform:uppercase;
  white-space:nowrap;
  transform:scale(.2); opacity:0;
  transform-origin:0 50%;
  transition:transform .5s var(--e-brand), opacity .28s var(--e-soft);
}
.cursor.is-pill .cursor__dot{ transform:scale(0); }
.cursor.is-pill .cursor__pill{ transform:scale(1); opacity:1; }
.cursor.is-link .cursor__dot{ transform:scale(3.2); background:var(--acc); }
.cursor.is-active{ opacity:1; }
.cursor.is-down .cursor__pill{ transform:scale(.9); }

/* ══ MAGNETIC ═════════════════════════════════════════════════════════════ */
[data-magnet]{ display:inline-flex; will-change:transform; }

/* ══ LINKS ════════════════════════════════════════════════════════════════ */
/* bold accent word inside body copy — no link, just emphasis */
.hl-b{ color:var(--acc); font-weight:700; }

/* inline link inside body copy */
.ilink{
  color:var(--acc);
  box-shadow:inset 0 -1px 0 rgba(220,75,34,.35);
  transition:box-shadow .35s var(--e-soft), opacity .35s var(--e-soft);
}
.ilink:hover{ box-shadow:inset 0 -1px 0 var(--acc); opacity:.82; }

.link-ext{
  position:relative;
  align-items:center; gap:7px;
  font-size:var(--t-meta);
  padding-bottom:3px;
}
.link-ext::after{
  content:""; position:absolute; left:0; bottom:0;
  width:100%; height:1px; background:var(--ink-28);
  transform-origin:100% 50%; transform:scaleX(1);
  transition:transform .5s var(--e-brand), background-color .4s;
}
.link-ext:hover::after{ background:var(--acc); }
.link-ext i{
  width:7px; height:7px; flex:none;
  border-top:1px solid currentColor; border-right:1px solid currentColor;
  transform:rotate(45deg) translate(0,0);
  transition:transform .45s var(--e-brand);
}
.link-ext:hover i{ transform:rotate(45deg) translate(2px,-2px); }

/* ══ REDUCED MOTION ═══════════════════════════════════════════════════════ */
@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{
    animation-duration:.001ms !important;
    animation-iteration-count:1 !important;
    transition-duration:.001ms !important;
  }
  .line-in,[data-reveal-word] > i{ transform:none !important; }
  .grain{ animation:none; }
  .cursor{ display:none; }
}