/* ============================================================================
   MORITZ GRUND — Foundations
   Clean-future / retro: bold condensed sans clashing with Times New Roman
   italic. Bone paper, near-black ink, cyan + gold pulled from the artwork.
   Texture = fine halftone dots (never scanlines, never pop-art).
   ========================================================================== */

/* Display face — self-hosted (no Google Fonts, GDPR-clean). Shared with the
   ISEEMONSTERZ design system. */
@font-face{
  font-family:'Monzane';
  src:url('../fonts/Monzane-1GKxv.otf') format('opentype');
  font-weight:400 900;
  font-style:normal;
  font-display:swap;
}
@font-face{
  font-family:'Monzane Slant';
  src:url('../fonts/MonzaneSlant-Rp6WE.otf') format('opentype');
  font-weight:400 900;
  font-style:normal;
  font-display:swap;
}

:root{
  /* ---- CANVAS / INK ----------------------------------------------------- */
  --paper:    #efe7d6;   /* warm bone */
  --paper-2:  #e6dcc4;   /* deeper panel */
  --ink:      #17160f;   /* warm near-black */
  --ink-2:    #4b4636;   /* secondary */
  --ink-3:    #8c8670;   /* tertiary / meta */
  --line:     #d2c8af;   /* hairline on bone */

  /* ---- SIGNAL DUO — straight from the render --------------------------- */
  --cyan:     #07b8d8;
  --cyan-deep:#0a7c94;   /* cyan as text on bone (legible) */
  --gold:     #f2a800;
  --gold-deep:#cc8a00;

  /* on-color text (both are light → ink reads on them) */
  --on-cyan:  #07261d;
  --on-gold:  #2a1c00;

  /* ---- TYPE ------------------------------------------------------------- */
  --cond:  'Monzane','Arial Narrow',sans-serif;              /* self-hosted display */
  --serif: 'Times New Roman', Times, Georgia, serif;          /* retro counterpoint */
  --sans:  'Archivo', system-ui, sans-serif;                  /* body / minimal */
  --mono:  'Space Mono','SFMono-Regular',ui-monospace,monospace; /* technical labels */

  --fs-mega: clamp(76px, 17vw, 280px); /* @kind font */
  --fs-h1:   clamp(48px, 10vw, 150px); /* @kind font */
  --fs-h2:   clamp(34px, 6vw, 86px);   /* @kind font */
  --fs-num:  clamp(60px, 12vw, 200px); /* @kind font */  /* big serif numerals */
  --fs-body: 17px;                     /* @kind font */
  --fs-sm:   13px;                     /* @kind font */

  --lh-tight: 0.82; /* @kind font */
  --lh-body:  1.55; /* @kind font */
  --track-label: 0.28em;

  /* ---- SPACING ---------------------------------------------------------- */
  --sp-4:16px; --sp-5:24px; --sp-6:32px; --sp-7:48px; --sp-8:64px; --sp-9:96px; --sp-10:150px;
  --maxw: 1360px;

  /* ---- FINE HALFTONE DOTS ---------------------------------------------- */
  --dot-size: 6px;     /* grid spacing — small, never pop-art */
  --dot-r: 0.9px;      /* dot radius */
}

/* ============================================================================
   BASE
   ========================================================================== */
*{box-sizing:border-box}
html{scroll-behavior:smooth}
html,body{margin:0;padding:0}
body{
  background:var(--paper);
  color:var(--ink);
  font-family:var(--sans);
  font-size:var(--fs-body);
  line-height:var(--lh-body);
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
  overflow-x:hidden;
}
img{display:block;max-width:100%}
a{color:inherit;text-decoration:none}
::selection{background:var(--gold);color:var(--on-gold)}

/* ---- DISPLAY ----------------------------------------------------------- */
.cond{font-family:var(--cond);font-weight:800;text-transform:uppercase;line-height:var(--lh-tight);letter-spacing:-.01em;margin:0}
.serif{font-family:var(--serif)}
.serif-i{font-family:var(--serif);font-style:italic}

h1,h2{font-family:var(--cond);font-weight:800;text-transform:uppercase;line-height:var(--lh-tight);letter-spacing:-.01em;margin:0}
h1{font-size:var(--fs-h1)}
h2{font-size:var(--fs-h2)}
p{margin:0 0 1em}
p:last-child{margin-bottom:0}

/* technical mono label (Marathon-style annotation) */
.tag{font-family:var(--mono);font-weight:700;font-size:var(--fs-sm);letter-spacing:var(--track-label);text-transform:uppercase;color:var(--ink-3);display:inline-flex;align-items:center;gap:.7em}
.tag .tick{width:7px;height:7px;background:var(--cyan);flex:none}
.tag.gold .tick{background:var(--gold)}

/* big serif italic numeral, used as a section marker */
.num{font-family:var(--serif);font-style:italic;font-weight:400;font-size:var(--fs-num);line-height:.8;color:var(--ink);letter-spacing:-.02em}

/* serif italic lead — the retro counterpoint to the condensed caps */
.lead-i{font-family:var(--serif);font-style:italic;font-weight:400;font-size:clamp(20px,2.6vw,34px);line-height:1.3;color:var(--ink-2)}

.c-cyan{color:var(--cyan-deep)}
.c-gold{color:var(--gold-deep)}

/* ============================================================================
   FINE HALFTONE DOT TEXTURE
   ========================================================================== */
.dots{position:relative}
.dots::after{
  content:"";position:absolute;inset:0;pointer-events:none;z-index:1;
  background-image:radial-gradient(currentColor var(--dot-r), transparent calc(var(--dot-r) + .4px));
  background-size:var(--dot-size) var(--dot-size);
  opacity:.10;
}
/* dot field that fades across (a soft halftone gradient, not flat) */
.dots-fade::after{
  -webkit-mask-image:linear-gradient(160deg,#000,transparent 70%);
  mask-image:linear-gradient(160deg,#000,transparent 70%);
  opacity:.16;
}
/* a slightly rougher/bigger option */
.dots-coarse::after{ --dot-size:11px; --dot-r:1.5px; opacity:.12; }

/* ============================================================================
   REVEAL ON SCROLL — gated under .anim so exports/print never hide content
   ========================================================================== */
.anim .reveal{opacity:0;transform:translateY(22px);transition:opacity .7s ease, transform .7s cubic-bezier(.2,.7,.2,1)}
.anim .reveal.in{opacity:1;transform:none}
.anim .reveal.d1{transition-delay:.07s}
.anim .reveal.d2{transition-delay:.14s}
.anim .reveal.d3{transition-delay:.21s}
@media print{.reveal{opacity:1 !important;transform:none !important;transition:none !important}}
@media (prefers-reduced-motion:reduce){.anim .reveal{opacity:1;transform:none;transition:none}}