/* =====================================================================
   ANGELINA COSCUNA — DESIGN SYSTEM
   One source of truth for tokens + reusable editorial components.
   Pages set their own --pg-bg / --pg-ink / --pg-accent (chrome scheme);
   every .ed-* component reads those so colour adapts per page while the
   structure, type, spacing and motion stay identical site-wide.
   ===================================================================== */

/* Reserve the scrollbar gutter so locking scroll (menu open) never shifts the
   fixed header/chrome. The homepage's fixed full-viewport canvas is unaffected. */
html { scrollbar-gutter: stable; }

:root {
  /* Brand colours */
  --blue:   #0000FF;
  --pink:   #FF31FF;
  --paper:  #ffffff;
  --black:  #000000;

  /* Layout */
  --grid-max: 1440px;
  --grid-gap: clamp(16px, 1.6vw, 24px);
  --pad-x:    clamp(20px, 2.4vw, 32px);
  --pad-top:  clamp(220px, 26vh, 320px);  /* clears the fixed header logo */
  --pad-bot:  clamp(80px, 12vh, 140px);
  --section-gap: clamp(56px, 9vh, 120px);

  /* Motion — two speeds: instant feedback (color/opacity hovers) and expo
     glide (transforms/entrances). Fast in, smooth settle. */
  --ease:       cubic-bezier(0.16, 1, 0.3, 1);   /* easeOutExpo — refined entrances + hovers */
  --ease-inout: cubic-bezier(0.65, 0, 0.35, 1);
  --dur-fast:   0.22s;
  --dur:        0.45s;
  --dur-slow:   0.8s;

  /* Type — one scale; change here to move the whole site. */
  --font-display: 'HIPO', Helvetica, sans-serif;
  --font-body:    'Hanken Grotesk', Helvetica, Arial, sans-serif;
  --fs-display-xl: clamp(48px, 9vw, 168px);
  --fs-display:    clamp(48px, 8vw, 132px);
  --fs-h2:    clamp(28px, 3.4vw, 48px);
  --fs-h3:    clamp(20px, 2vw, 28px);
  --fs-lede:  clamp(19px, 1.8vw, 28px);
  --fs-body:  clamp(15px, 1.15vw, 18px);
  --fs-label: 12px;
  --lh-tight: 0.88;
  --lh-snug:  1.2;
  --lh-body:  1.6;
  --ls-body:  -0.04rem;   /* tracking for paragraph / body copy */
}

/* Keep body content clear of the fixed rotated corner labels (.page-chrome),
   which only show above 768px and sit ~28-45px in from each edge. Raise the
   container side padding there so text never runs under a corner label. Applies
   across the board to anything reading --pad-x. */
@media (min-width: 769px) {
  :root { --pad-x: clamp(56px, 4.5vw, 72px); }
}

/* Paragraph + body copy tracking, site-wide. Display type (HIPO headings, nav,
   labels) sets its own letter-spacing, so this only lands on running text. */
body { letter-spacing: var(--ls-body); }

/* Resolved ink/accent: page chrome var, falling back to brand blue/pink. */
.ed-scope,
.ed-container { --ink: var(--pg-ink, var(--blue)); --accent: var(--pg-accent, var(--pink)); }

/* ---- Container: 1440, centred, top padding clears the header ---- */
main#primary.ed-container {
  --ink: var(--pg-ink, var(--blue));
  --accent: var(--pg-accent, var(--pink));
  max-width: var(--grid-max);
  margin: 0 auto !important;
  padding: var(--pad-top) var(--pad-x) var(--pad-bot) var(--pad-x) !important;
  box-sizing: border-box;
}
@media (max-width: 768px) {
  main#primary.ed-container { padding: 140px 20px 70px 20px !important; }
}

/* ---- 12-col grid ---- */
.ed-grid {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: var(--grid-gap);
  align-items: start;
}
.ed-section { margin-top: var(--section-gap); }

/* ---- Eyebrow rule ---- */
.ed-eyebrow {
  grid-column: 1 / -1;
  display: flex; justify-content: space-between; gap: 24px;
  font-family: var(--font-display);
  font-size: 12px; letter-spacing: 0.2em; text-transform: uppercase;
  color: var(--ink);
  border-top: 1px solid currentColor;
  padding-top: 14px;
  margin-bottom: clamp(40px, 7vh, 80px);
}
.ed-eyebrow a { color: inherit; text-decoration: none; transition: color var(--dur-fast) var(--ease); }
.ed-eyebrow a:hover { color: var(--accent); }

/* ---- Numbered section meta (label left) ---- */
.ed-meta {
  grid-column: 1 / span 4;
  display: flex; align-items: baseline; gap: 16px;
  font-family: var(--font-display);
  font-size: 12px; letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--ink);
  border-top: 1px solid currentColor;
  padding-top: 14px;
}
.ed-meta .dot { flex: 0 0 6px; height: 6px; background: currentColor; margin-top: 4px; }
.ed-meta .num { font-variant-numeric: tabular-nums; }
.ed-body { grid-column: 5 / span 8; }
.ed-body--wide { grid-column: 1 / -1; }
@media (max-width: 768px) {
  .ed-meta, .ed-body { grid-column: 1 / -1; }
  .ed-meta { margin-bottom: 10px; }
}

/* ---- Display title + subtitle ---- */
.ed-title {
  font-family: var(--font-display);
  font-weight: 400; text-transform: uppercase;
  font-size: var(--fs-display);
  line-height: var(--lh-tight); letter-spacing: -0.015em;
  color: var(--ink); margin: 0;
}
.ed-title--xl { font-size: var(--fs-display-xl); line-height: 0.86; letter-spacing: -0.02em; }
.ed-subtitle {
  font-family: var(--font-body);
  font-size: clamp(15px, 1.4vw, 21px); line-height: 1.5;
  color: var(--ink); opacity: 0.85;
  margin: clamp(16px, 2.4vh, 28px) 0 0; max-width: 60ch;
}

/* ---- Prose / body copy (project context, page content) ---- */
.ed-prose { font-family: var(--font-body); font-size: var(--fs-body); line-height: var(--lh-body); color: var(--ink); }
.ed-prose p { margin: 0 0 18px; }
.ed-prose p:first-of-type { font-size: clamp(18px, 1.5vw, 23px); line-height: 1.45; margin-bottom: 24px; }
.ed-prose h2, .ed-prose h3, .ed-prose h4 {
  font-family: var(--font-display); font-size: 11px; font-weight: 400; text-transform: uppercase;
  letter-spacing: 0.12em; color: var(--ink); opacity: 0.6; margin: 28px 0 10px;
}
.ed-prose ul { list-style: none; padding: 0; margin: 0 0 18px; }
.ed-prose li { position: relative; padding-left: 18px; margin: 0 0 10px; }
.ed-prose li::before { content: ""; position: absolute; left: 0; top: 11px; width: 6px; height: 1px; background: currentColor; }
/* Unified inline-link hover: a underline that grows in on hover. */
.ed-prose a {
  color: var(--ink);
  text-decoration: none;
  background-image: linear-gradient(currentColor, currentColor);
  background-size: 100% 1px; background-position: 0 100%; background-repeat: no-repeat;
  padding-bottom: 2px;
  transition: background-size var(--dur-fast) var(--ease), opacity var(--dur-fast) var(--ease);
}
.ed-prose a:hover { opacity: 0.6; }
@media (hover: hover) {
  .ed-prose a { background-size: 0% 1px; }
  .ed-prose a:hover { background-size: 100% 1px; opacity: 1; }
}

/* ---- Credits ---- */
.ed-credits { display: grid; grid-template-columns: repeat(2, 1fr); gap: 20px 32px; margin: 0; }
.ed-credits .cr dt { font-family: var(--font-display); font-size: 11px; text-transform: uppercase; letter-spacing: 0.1em; color: var(--ink); opacity: 0.55; margin: 0 0 4px; }
.ed-credits .cr dd { font-family: var(--font-body); font-size: 15px; color: var(--ink); margin: 0; }

/* ---- Back link ---- */
.ed-back {
  display: inline-block;
  font-family: var(--font-display); font-size: 13px; text-transform: uppercase; letter-spacing: 0.08em;
  color: var(--ink); opacity: 0.6;
  margin-top: clamp(48px, 8vh, 100px); padding: 8px 0;
  border-bottom: 1px solid currentColor;
  transition: opacity var(--dur-fast) var(--ease);
}
.ed-back:hover { opacity: 1; }

/* ---- Motion: one fade-in for the whole site ----
   Fast in (0.55s expo, small 12px rise); system.js staggers batches 55ms apart
   so grids cascade instead of landing as one block. */
.ed-fade { opacity: 0; transform: translateY(12px); transition: opacity 0.55s ease, transform 0.55s var(--ease); }
.ed-fade.is-visible { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) { .ed-fade { opacity: 1; transform: none; transition: none; } }

/* ---- Page-to-page: cross-document view transitions ----
   Same-origin navigations crossfade (0.2s out / 0.3s expo in) instead of
   hard-cutting between page color schemes. The fixed header carries its own
   snapshot so the chrome reads as continuous while content swaps beneath it.
   Progressive enhancement: browsers without support fall back to a normal
   navigation. Disabled under reduced motion. */
@view-transition { navigation: auto; }
header#site-header { view-transition-name: ac-header; }
@media (prefers-reduced-motion: no-preference) {
  ::view-transition-old(root)      { animation: acVtOut 0.20s cubic-bezier(0.4, 0, 1, 1) both; }
  ::view-transition-new(root)      { animation: acVtIn  0.30s var(--ease) both; }
  ::view-transition-old(ac-header) { animation: acVtOut 0.20s cubic-bezier(0.4, 0, 1, 1) both; }
  ::view-transition-new(ac-header) { animation: acVtIn  0.30s var(--ease) both; }
}
@media (prefers-reduced-motion: reduce) {
  ::view-transition-group(*),
  ::view-transition-old(*),
  ::view-transition-new(*) { animation: none !important; }
}
@keyframes acVtOut { to   { opacity: 0; } }
@keyframes acVtIn  { from { opacity: 0; } }

/* ---- Lenis smooth scroll (home + interior) ----
   Recommended baseline so smooth scroll behaves and lenis.stop() locks cleanly. */
html.lenis, html.lenis body { height: auto; }
.lenis.lenis-smooth { scroll-behavior: auto !important; }
.lenis.lenis-smooth [data-lenis-prevent] { overscroll-behavior: contain; }
.lenis.lenis-stopped { overflow: hidden; }
.lenis.lenis-smooth iframe { pointer-events: none; }