/*
HÅRMONIOUS70 × STEAM SANS :: Agentic Stylesheet
Essence: 70mm resonance architecture for interfaces that behave like interiors.
Instruction: Read the scene. Select day or night. Let STEAM SANS become the audible surface of Applicable Harmony.
VesselVerse Protocol: locate the human coordinate, name the mechanism, deepen the recognition, return with usable clarity.
*/

@layer h70.reset, h70.tokens, h70.base, h70.type, h70.objects, h70.mural, h70.motion, h70.utilities;

@layer h70.reset {
  *, *::before, *::after { box-sizing: border-box; }
  html { color-scheme: light dark; scroll-behavior: smooth; }
  body { margin: 0; min-height: 100svh; text-rendering: optimizeLegibility; -webkit-font-smoothing: antialiased; }
  button, input, textarea, select { font: inherit; color: inherit; }
  img, svg, canvas { display: block; max-width: 100%; }
}

@layer h70.tokens {
  :root {
    --h70-ratio: 1.618;
    --h70-unit: 8px;
    --h70-breath-cycle: 4400ms;
    --h70-ease: cubic-bezier(.2,.8,.2,1);
    --h70-vapor-ease: cubic-bezier(.16,1,.3,1);

    --h70-font: 'STEAM SANS', 'DM Sans', system-ui, sans-serif;
    --h70-mono: 'STEAM SANS', 'DM Mono', ui-monospace, monospace;

    --h70-xs: .694rem;
    --h70-sm: .833rem;
    --h70-base: 1rem;
    --h70-md: 1.2rem;
    --h70-lg: 1.44rem;
    --h70-xl: 2.074rem;
    --h70-xxl: 2.986rem;
    --h70-hero: clamp(3rem, 9vw, 9rem);

    --h70-micro: .375rem;
    --h70-touch: 2.75rem;
    --h70-breath: clamp(1rem, 2vw, 2rem);
    --h70-room: clamp(2rem, 6vw, 7rem);
    --h70-mural: clamp(4rem, 12vw, 14rem);
    --h70-gutter: clamp(1rem, 4vw, 4rem);

    --h70-radius-paper: .375rem;
    --h70-radius-object: 1.125rem;
    --h70-radius-vessel: 2.75rem;
    --h70-radius-orb: 999px;

    --h70-bg: #050d0c;
    --h70-bg-alt: #0a1715;
    --h70-surface: rgba(232,228,219,.045);
    --h70-ink: #e8e4db;
    --h70-muted: #8b7d6b;
    --h70-line: rgba(232,228,219,.12);
    --h70-signal: #d4af37;
    --h70-moss: #0f2a22;
    --h70-indigo: #272c38;
    --h70-reflection: rgba(232,228,219,.18);
    --h70-grain-opacity: .25;
    --h70-pressure: .18;
  }

  [data-h70-scene='day'] {
    --h70-bg: #f3eee4;
    --h70-bg-alt: #e6ddcf;
    --h70-surface: rgba(255,255,255,.58);
    --h70-ink: #11110f;
    --h70-muted: #544a3e;
    --h70-line: rgba(23,23,20,.18);
    --h70-signal: #7d5e12;
    --h70-moss: #3b4a40;
    --h70-indigo: #2b2f3d;
    --h70-reflection: rgba(255,255,255,.72);
    --h70-grain-opacity: .18;
    --h70-pressure: .11;
  }
}

@layer h70.base {
  body {
    font-family: var(--h70-font);
    background:
      radial-gradient(circle at 18% 12%, color-mix(in oklab, var(--h70-signal) 18%, transparent), transparent 28rem),
      radial-gradient(circle at 82% 20%, color-mix(in oklab, var(--h70-indigo) 36%, transparent), transparent 34rem),
      linear-gradient(140deg, var(--h70-bg), var(--h70-bg-alt));
    color: var(--h70-ink);
  }

  body::before {
    content: '';
    position: fixed;
    inset: 0;
    pointer-events: none;
    z-index: 999;
    opacity: var(--h70-grain-opacity);
    mix-blend-mode: overlay;
    background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.22'/%3E%3C/svg%3E");
  }

  .h70-installation {
    min-height: 100svh;
    padding: var(--h70-mural) var(--h70-gutter);
    display: grid;
    align-content: start;
    gap: var(--h70-room);
    position: relative;
    isolation: isolate;
  }
}

@layer h70.type {
  .steam-sans,
  .h70-copy { font-family: var(--h70-font); }

  .steam-sans--harris {
    font-family: var(--h70-font);
    font-weight: 300;
    letter-spacing: .12em;
    text-transform: uppercase;
    line-height: .95;
    font-size: var(--h70-hero);
    font-variation-settings: 'STBL' 0, 'COHR' 100, 'DRFT' 0, 'PRSS' 24;
  }

  .steam-sans--hba {
    font-family: var(--h70-mono);
    font-weight: 300;
    font-style: normal;
    letter-spacing: .04em;
    line-height: 1.12;
    animation: h70-hba-breathe var(--h70-breath-cycle) var(--h70-ease) infinite;
    font-variation-settings: 'STBL' 50, 'COHR' 84, 'DRFT' 13, 'PRSS' 20;
  }

  .steam-sans--vapor {
    font-family: var(--h70-font);
    font-weight: 300;
    font-style: normal;
    letter-spacing: .08em;
    line-height: 1.2;
    filter: blur(.16px);
    opacity: .82;
    font-variation-settings: 'STBL' 100, 'COHR' 48, 'DRFT' 34, 'PRSS' 12;
  }

  .h70-kicker {
    font-variation-settings: 'STBL' 0, 'COHR' 100, 'DRFT' 0, 'PRSS' 24;
    font-family: var(--h70-mono);
    font-size: var(--h70-xs);
    letter-spacing: .24em;
    text-transform: uppercase;
    color: var(--h70-signal);
  }

  .h70-body {
    font-variation-settings: 'STBL' 50, 'COHR' 84, 'DRFT' 13, 'PRSS' 20;
    animation: h70-hba-breathe var(--h70-breath-cycle) var(--h70-ease) infinite;
    max-width: 65ch;
    font-size: clamp(1.05rem, 1.2vw, 1.24rem);
    line-height: 1.75;
    letter-spacing: .015em;
    text-align: left;
    font-style: normal;
    font-family: var(--h70-font);
    color: color-mix(in oklab, var(--h70-ink) 88%, var(--h70-muted));
  }
}

@layer h70.objects {
  .h70-vessel-card {
    padding: var(--h70-room);
    border: 1px solid var(--h70-line);
    border-radius: var(--h70-radius-vessel);
    background:
      linear-gradient(160deg, color-mix(in oklab, var(--h70-surface) 94%, var(--h70-reflection)), transparent),
      var(--h70-surface);
    backdrop-filter: blur(22px) saturate(1.08);
    box-shadow: 0 22px 90px rgba(0,0,0,.22), inset 0 1px 0 var(--h70-reflection);
    position: relative;
    overflow: clip;
  }

  .h70-vessel-card::after {
    content: '';
    position: absolute;
    inset: auto 10% -40% 10%;
    height: 60%;
    border-radius: 50%;
    background: radial-gradient(closest-side, color-mix(in oklab, var(--h70-signal) 18%, transparent), transparent 70%);
    filter: blur(22px);
    transform: scaleY(.35);
    pointer-events: none;
  }

  .h70-glyph-button {
    min-height: var(--h70-touch);
    padding: .84rem 1.44rem;
    border: 1px solid var(--h70-line);
    border-radius: var(--h70-radius-orb);
    background: color-mix(in oklab, var(--h70-surface) 82%, transparent);
    color: var(--h70-ink);
    letter-spacing: .18em;
    text-transform: uppercase;
    cursor: pointer;
    transition: transform 420ms var(--h70-ease), border-color 420ms var(--h70-ease), background 420ms var(--h70-ease);
  }

  .h70-glyph-button:is(:hover, :focus-visible) {
    transform: translateY(-1px);
    border-color: color-mix(in oklab, var(--h70-signal) 42%, var(--h70-line));
    background: color-mix(in oklab, var(--h70-signal) 9%, var(--h70-surface));
    outline: 0;
  }
}

@layer h70.mural {
  .h70-muralist {
    position: fixed;
    inset: 0;
    z-index: -1;
    overflow: hidden;
    background:
      linear-gradient(110deg, transparent 0 22%, color-mix(in oklab, var(--h70-reflection) 62%, transparent) 23% 24%, transparent 25% 100%),
      radial-gradient(circle at 70% 65%, color-mix(in oklab, var(--h70-moss) 36%, transparent), transparent 34rem),
      radial-gradient(circle at 30% 35%, color-mix(in oklab, var(--h70-indigo) 42%, transparent), transparent 30rem);
    mask-image: linear-gradient(to bottom, black, rgba(0,0,0,.82), transparent 96%);
    transform-origin: center;
    animation: h70-mural-breath 12000ms var(--h70-ease) infinite alternate;
  }

  .h70-muralist::before,
  .h70-muralist::after {
    content: '';
    position: absolute;
    border: 1px solid color-mix(in oklab, var(--h70-line) 72%, transparent);
    border-radius: 50%;
    inset: 12% 18%;
    transform: rotate(-12deg) scaleX(1.28);
    opacity: .32;
  }

  .h70-muralist::after {
    inset: 26% 6%;
    transform: rotate(18deg) scaleY(.55);
    opacity: .18;
  }
}

@layer h70.motion {
  @keyframes h70-hba-breathe {
    0%,100% { transform: translateY(0) scaleY(1); opacity: .90; filter: blur(0); }
    50% { transform: translateY(-2px) scaleY(1.018); opacity: .98; filter: blur(.22px); }
  }

  @keyframes h70-mural-breath {
    from { transform: scale(1) rotate(0deg); filter: saturate(1) contrast(1); }
    to { transform: scale(1.035) rotate(.6deg); filter: saturate(1.08) contrast(1.05); }
  }

  @media (prefers-reduced-motion: reduce) {
    *, *::before, *::after { animation-duration: 1ms !important; animation-iteration-count: 1 !important; scroll-behavior: auto !important; transition-duration: 1ms !important; }
  }
}

@layer h70.utilities {
  .h70-grid { display: grid; gap: var(--h70-breath); }
  .h70-grid--two { grid-template-columns: repeat(auto-fit, minmax(min(100%, 22rem), 1fr)); }
  .h70-muted { color: var(--h70-muted); }
  .h70-signal { color: var(--h70-signal); }
  .h70-reflect { box-shadow: inset 0 1px 0 var(--h70-reflection); }
}

/* ── ARCHETYPE TYPOGRAPHIC PERSONALITIES ───────────────────────────────
   STEAM SANS axis encoding: STBL = groundedness, COHR = crystallinity,
   DRFT = multi-mode fluidity, PRSS = carried weight.
   Usage: <span class="h70-archetype archetype--executive">The Executive / Strategist</span>
*/
@layer h70.type {
  .h70-archetype {
    font-family: var(--h70-font);
    transition:
      font-variation-settings 620ms var(--h70-ease),
      letter-spacing 400ms var(--h70-ease),
      color 400ms var(--h70-ease),
      opacity 400ms var(--h70-ease);
  }

  /* THE EXECUTIVE / STRATEGIST
     Compressed authority. Maximum coherence. High carried weight.
     STBL 0: command requires no external ground — it is the ground.
     COHR 100: sees without fog.
     DRFT 2: sets direction; does not follow currents.
     PRSS 62: the weight of consequential decisions. */
  .archetype--executive {
    font-variation-settings: 'STBL' 0, 'COHR' 100, 'DRFT' 2, 'PRSS' 62;
    letter-spacing: .16em;
    text-transform: uppercase;
    font-weight: 300;
  }
  .archetype--executive:hover {
    font-variation-settings: 'STBL' 0, 'COHR' 100, 'DRFT' 0, 'PRSS' 100;
    color: var(--h70-signal);
  }

  /* THE CREATIVE DIRECTOR
     Visionary coherence. Creative ranging within a held direction.
     STBL 20: enough instability to allow expansive seeing.
     COHR 88: focused vision — sharp but not compressed.
     DRFT 18: the creative mind moves between modes.
     PRSS 34: creative urgency, not organizational weight. */
  .archetype--creative-director {
    font-variation-settings: 'STBL' 20, 'COHR' 88, 'DRFT' 18, 'PRSS' 34;
    letter-spacing: .12em;
    text-transform: uppercase;
    font-weight: 300;
  }
  .archetype--creative-director:hover {
    font-variation-settings: 'STBL' 20, 'COHR' 88, 'DRFT' 28, 'PRSS' 52;
    color: var(--h70-signal);
  }

  /* THE CREATIVE PRODUCER
     Execution. Bridge between vision and form. Kinetic clarity.
     STBL 46: grounded enough to deliver, not locked down.
     COHR 82: clear to execute — precision without rigidity.
     DRFT 12: stays on course; navigates without losing the line.
     PRSS 48: the delivery weight of making it real. */
  .archetype--creative-producer {
    font-variation-settings: 'STBL' 46, 'COHR' 82, 'DRFT' 12, 'PRSS' 48;
    letter-spacing: .07em;
    font-weight: 400;
  }
  .archetype--creative-producer:hover {
    font-variation-settings: 'STBL' 56, 'COHR' 86, 'DRFT' 8, 'PRSS' 72;
    color: var(--h70-signal);
  }

  /* THE EDUCATOR / COMMUNITY BUILDER
     Steadiness. Warmth. Minimal pressure — creates ease, not urgency.
     STBL 82: reliable presence; the learner needs something to lean toward.
     COHR 76: clear for the learner — warm clarity, not clinical precision.
     DRFT 22: meets people where they are; gently moves toward them.
     PRSS 10: the teaching space holds, not pushes. */
  .archetype--educator {
    font-variation-settings: 'STBL' 82, 'COHR' 76, 'DRFT' 22, 'PRSS' 10;
    letter-spacing: .04em;
    font-weight: 400;
  }
  .archetype--educator:hover {
    font-variation-settings: 'STBL' 94, 'COHR' 80, 'DRFT' 16, 'PRSS' 8;
    color: var(--h70-signal);
  }

  /* THE ENTREPRENEUR
     Momentum. Adaptive. Forward lean. Risk as orientation.
     STBL 14: willingness to move fast and pivot.
     COHR 70: focused on the opportunity — clear but adaptive.
     DRFT 44: fluid between modes; sees multiple angles simultaneously.
     PRSS 54: the urgency of timing and competitive awareness. */
  .archetype--entrepreneur {
    font-variation-settings: 'STBL' 14, 'COHR' 70, 'DRFT' 44, 'PRSS' 54;
    letter-spacing: .06em;
    font-weight: 300;
    font-style: italic;
  }
  .archetype--entrepreneur:hover {
    font-variation-settings: 'STBL' 0, 'COHR' 72, 'DRFT' 60, 'PRSS' 72;
    color: var(--h70-signal);
  }

  /* THE ECOSYSTEM BUILDER
     Connective tissue. Vast. Multiple simultaneous currents.
     STBL 62: holds steady enough to carry others — not fixed, but present.
     COHR 54: complexity is real; single focus is not the mechanism here.
     DRFT 50: navigates many currents; this is the signature capacity.
     PRSS 12: creates conditions rather than forcing — ease in the structure. */
  .archetype--ecosystem-builder {
    font-variation-settings: 'STBL' 62, 'COHR' 54, 'DRFT' 50, 'PRSS' 12;
    letter-spacing: .12em;
    font-weight: 300;
    opacity: .88;
  }
  .archetype--ecosystem-builder:hover {
    font-variation-settings: 'STBL' 62, 'COHR' 54, 'DRFT' 64, 'PRSS' 10;
    color: var(--h70-signal);
    opacity: 1;
  }

  /* THE WELLNESS TEACHER
     Somatic grounding. Primary source presence. Lightest carried weight.
     STBL 74: grounded in the body — reliable, present, unforced.
     COHR 72: clear enough; warmly diffuse rather than clinically sharp.
     DRFT 28: follows the body's rhythm; gently responsive.
     PRSS 8: restoration is the architecture; no urgency in the field. */
  .archetype--wellness-teacher {
    font-variation-settings: 'STBL' 74, 'COHR' 72, 'DRFT' 28, 'PRSS' 8;
    letter-spacing: .03em;
    font-weight: 400;
  }
  .archetype--wellness-teacher:hover {
    font-variation-settings: 'STBL' 88, 'COHR' 72, 'DRFT' 20, 'PRSS' 6;
    color: var(--h70-signal);
  }

  /* Responsive: reduce tracking on small screens for wide-tracked archetypes */
  @media (max-width: 48em) {
    .archetype--executive        { letter-spacing: .10em; }
    .archetype--creative-director { letter-spacing: .08em; }
    .archetype--ecosystem-builder { letter-spacing: .08em; }
  }
}

/* ── GATEWAY ATMOSPHERIC MURAL ─────────────────────────────────────────
   Applies to artifact-page gateways (#audio-overlay). The index.html
   gateway defines its own inline ::before/::after which take cascade
   precedence there — these serve only the archive interiors.
*/
#audio-overlay {
  overflow: hidden;
}

#audio-overlay::before,
#audio-overlay::after {
  content: '';
  position: absolute;
  inset: -20%;
  z-index: -1;
  pointer-events: none;
  background:
    radial-gradient(circle at 30% 70%, color-mix(in oklab, var(--h70-signal) 10%, transparent) 0%, transparent 40%),
    radial-gradient(circle at 70% 30%, color-mix(in oklab, var(--h70-ink) 6%, transparent) 0%, transparent 50%);
  filter: blur(40px);
  opacity: 0.7;
  animation: h70-gateway-breathe 8s infinite alternate ease-in-out;
}

#audio-overlay::after {
  background: radial-gradient(circle at 50% 50%, color-mix(in oklab, var(--h70-signal) 4%, transparent) 0%, transparent 60%);
  animation: h70-gateway-breathe 12s infinite alternate-reverse ease-in-out;
  mix-blend-mode: overlay;
}

@keyframes h70-gateway-breathe {
  0%   { transform: scale(1)   rotate(0deg);  opacity: 0.5; }
  100% { transform: scale(1.1) rotate(2deg);  opacity: 1;   }
}

/* ── PORTAL TRANSITION CURTAIN ─────────────────────────────────────────
   Atmospheric treatment for #tas-curtain (injected by tas-transitions.js).
   The muralist breathes through the passage between spaces.
*/
#tas-curtain {
  overflow: hidden;
}

#tas-curtain::before,
#tas-curtain::after {
  content: '';
  position: absolute;
  inset: -20%;
  pointer-events: none;
  filter: blur(60px);
}

#tas-curtain::before {
  background: radial-gradient(circle at 35% 60%, color-mix(in oklab, var(--h70-signal) 8%, transparent) 0%, transparent 45%);
  opacity: 0.5;
  animation: h70-curtain-pulse 7s ease-in-out infinite alternate;
}

#tas-curtain::after {
  background: radial-gradient(circle at 65% 40%, color-mix(in oklab, var(--h70-indigo, #272c38) 28%, transparent) 0%, transparent 50%);
  opacity: 0.35;
  animation: h70-curtain-pulse 10s ease-in-out infinite alternate-reverse;
}

@keyframes h70-curtain-pulse {
  0%   { transform: scale(1);    opacity: 0.25; }
  100% { transform: scale(1.06); opacity: 0.65; }
}