/* ══════════════════════════════════════════════════════════════════════════
   MAIN.CSS — Carlo Schembri · Cinematic editorial homepage
   One page, one rhythm. Replaces main / featured / archive of the old build.
   ═══════════════════════════════════════════════════════════════════════ */

/* ── 0. FOUNDATION ────────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }

/* ── Global responsive safety rails ─────────────────────────────────────
   Applied site-wide so typography and layout behave predictably at every
   viewport. Nothing decorative — just guarantees. */
h1, h2, h3, h4, h5, h6 {
  overflow-wrap: break-word;
  text-wrap: balance;
  hyphens: manual;
}
p, li, dd, dt, figcaption {
  overflow-wrap: break-word;
}
/* Prevent flex/grid children from overflowing their tracks — the silent
   cause of 90% of "my layout breaks on small screens" bugs. */
.hero, .about, .categories, .projects, .atelier, .andbold, .contact, .foot,
section, article, aside, header, footer {
  min-width: 0;
}

/* Every top-level page section owns its own stacking context. Decorative
   pseudo-elements (::before / ::after / .*-atmos) inside a section can
   therefore never bleed above content in an adjacent section, no matter
   what z-index they use internally. This is the single most effective
   guarantee against "background effect overlapping text" bugs. */
.hero,
.about,
.categories,
.projects,
.atelier,
.andbold,
.contact,
.foot {
  isolation: isolate;
}

html {
  background: var(--ink-deep);
  color: var(--limestone);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  scroll-behavior: smooth;
  /* Anchor nav should scroll to just below the fixed navbar, not under it. */
  scroll-padding-top: calc(var(--nav-height, 76px) + 12px);
  font-size: 16px;
}
body {
  font-family: var(--font-body);
  background: var(--ink-deep);
  color: var(--limestone);
  overflow-x: hidden;
  line-height: 1.55;
  font-size: var(--text-base);
  /* Native OS cursor always visible. Custom #cursor-dot/#cursor-ring
     are a decorative overlay (pointer-events: none) — they never hide
     the real cursor, so the mouse can't disappear. */
}
/* body.nav-open overflow lock is in navbar.css */

img, svg, video { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; padding: 0; }

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

/* Film grain overlay */
#grain {
  position: fixed; inset: 0;
  pointer-events: none;
  z-index: 9000;
  opacity: 0.35;
  mix-blend-mode: overlay;
}

/* Custom cursor — editorial crosshair */
.cursor, .cursor-follow {
  position: fixed; top: 0; left: 0;
  pointer-events: none;
  z-index: 10000;
  transform: translate(-50%, -50%);
  will-change: left, top;
}
/* Dot: small bronze diamond */
.cursor {
  width: 6px; height: 6px;
  background: var(--bronze);
  border-radius: 0;
  transform: translate(-50%, -50%) rotate(45deg);
  transition: transform 0.18s var(--ease-out), background 0.2s, opacity 0.2s;
  opacity: 0.9;
}
/* Ring: fine square frame that tracks with lag */
.cursor-follow {
  width: 32px; height: 32px;
  border: 1px solid rgba(196, 167, 108, 0.5);
  border-radius: 0;
  transform: translate(-50%, -50%) rotate(45deg);
  transition:
    width 0.4s var(--ease-out),
    height 0.4s var(--ease-out),
    border-color 0.3s,
    background 0.35s;
}
/* Hover state: ring opens, fills faintly, dot sharpens */
.cursor-follow.hover {
  width: 52px; height: 52px;
  background: rgba(196, 167, 108, 0.07);
  border-color: rgba(196, 167, 108, 0.85);
}
.cursor-follow.hover + .cursor,
body:has(.cursor-follow.hover) .cursor {
  background: var(--bronze-pale);
  transform: translate(-50%, -50%) rotate(45deg) scale(1.5);
}
@media (hover: none), (pointer: coarse) {
  .cursor, .cursor-follow { display: none !important; }
  body { cursor: auto; }
}


/* ══════════════════════════════════════════════════════════════════════════
   1. SHARED EDITORIAL ATOMS
   ══════════════════════════════════════════════════════════════════════ */

/* Section kicker — tiny spaced-out label paired w/ a fine rule */
.section-kicker {
  display: inline-flex; align-items: center; gap: 14px;
  font-family: var(--font-sc);
  font-size: 10.5px;
  letter-spacing: 0.42em;
  text-transform: uppercase;
  color: var(--muted);
}
.section-kicker .sk-rule {
  width: 42px; height: 1px;
  background: currentColor;
  opacity: 0.45;
}
.section-kicker.on-dark { color: rgba(232, 226, 214, 0.58); }

/* .reveal — fully defined in scroll.css (loaded last).
   Removed from here to eliminate duplicate definitions and the dead
   .reveal.vis state (JS uses .is-visible, not .vis). */


/* ══════════════════════════════════════════════════════════════════════════