/* =====================================================================
   HermitMonster - edge.css   ("2032" editorial-modern refinement)
   The final design layer. Loads after every other sheet. Pushes the build
   toward restraint + confidence: a fluid type scale, generous spatial
   rhythm, premium surfaces, and a few signature flourishes. Persona-aware
   via tokens. Touch + reduced-motion friendly (no new motion of its own).
   ===================================================================== */

:root {
  /* fluid type scale (clamp): one system, every breakpoint */
  --fs-display: clamp(3rem, 8.5vw, 7.5rem);
  --fs-h2:      clamp(2.1rem, 5vw, 3.6rem);
  --fs-h3:      clamp(1.3rem, 2.4vw, 1.85rem);
  --fs-lead:    clamp(1.1rem, 1.6vw, 1.4rem);
  --space-section: clamp(5rem, 11vw, 10rem);
  --edge-ring: color-mix(in srgb, var(--accent) 22%, transparent);
}

/* generous, even section rhythm everywhere */
.section { padding-block: var(--space-section); }
.section-head { margin-bottom: clamp(2.2rem, 5vw, 4rem); }
.section-head h2 { font-size: var(--fs-h2); line-height: 1.0; }
.lead, .section-head p { font-size: var(--fs-lead); line-height: 1.55; }

/* editorial eyebrow: hairline + mono, quieter and more precise */
.eyebrow { letter-spacing: .2em; opacity: 1; }

/* hero: cinematic scale + tighter leading */
.hero__title { font-size: var(--fs-display); line-height: .92; letter-spacing: -.04em; }
.hero__copy .eyebrow { margin-bottom: clamp(.6rem, 2vw, 1.2rem); }

/* premium glass surfaces: thinner borders, deeper shadow, hairline top light */
.work-card, .tile, .cap, .quote-card, .archive-card {
  border-radius: clamp(14px, 1.5vw, 22px);
  box-shadow: 0 1px 0 rgba(255,255,255,.06) inset, 0 18px 50px -28px rgba(10,4,20,.55);
}

/* buttons: pill, confident, springy press */
.btn { border-radius: 100px; padding-inline: 1.5rem; font-weight: 600; letter-spacing: .005em; }
.btn:active { transform: translateY(1px) scale(.99); }

/* header: floats as a slim glass capsule */
.site-header.is-stuck .container { transition: padding .4s var(--ease); }

/* refined focus ring (accessibility, premium) */
:focus-visible { outline-color: var(--accent); outline-offset: 4px; }

/* link affordance: editorial underline grows on hover */
.section a:not(.btn):not(.tile__link):not(.nav a), .lead a { background-image: linear-gradient(var(--accent), var(--accent)); background-size: 0% 1.5px; background-position: 0 100%; background-repeat: no-repeat; transition: background-size .3s var(--ease); }
.section a:not(.btn):not(.tile__link):hover, .lead a:hover { background-size: 100% 1.5px; }

/* big closing CTA gets real presence */
.cta { border-radius: clamp(20px, 3vw, 40px); }
.cta h2 { font-size: var(--fs-h2); }

/* responsive: tighten the rhythm + tame display type on phones */
@media (max-width: 640px) {
  .section { padding-block: clamp(3.2rem, 14vw, 5rem); }
  .hero__title { font-size: clamp(2rem, 8vw, 2.9rem); line-height: 1.04; overflow-wrap: break-word; }
  .section-head h2 { font-size: clamp(1.7rem, 6.5vw, 2.3rem); }
  .hero__copy { gap: 1rem; }
}