/* =====================================================================
   HermitMonster — Design System
   A clean, editorial foundation. Personality lives in the details.
   ===================================================================== */

/* ----- Design tokens ------------------------------------------------ */
:root {
  /* Light theme (default) */
  --paper:        #f6f3ea;   /* warm off-white background */
  --paper-2:      #fffdf7;   /* raised surfaces / cards   */
  --paper-3:      #efeadd;   /* sunken / subtle fills     */
  --ink:          #18170f;   /* near-black, warm          */
  --ink-2:        #5f5b50;   /* muted text                */
  --line:         rgba(24, 23, 15, 0.12);
  --line-strong:  rgba(24, 23, 15, 0.22);
  --accent:       #1f5d4c;   /* deep emerald — the hermit's forest */
  --accent-2:     #2c7a63;   /* hover / lighter emerald   */
  --accent-ink:   #f6f3ea;   /* text on accent            */
  --spark:        #e8a838;   /* amber — the monster's wink (decorative/graphics) */
  --spark-text:   #8c5e10;   /* legible amber for highlighted WORDS on light bg */
  --danger:       #b4452f;

  /* Feature panels — fixed in BOTH themes so highlights stay legible.
     The quote card & CTA are signature dark/emerald blocks regardless of theme. */
  --panel-bg:     #1b1a12;   /* warm near-black panel (about card, skip link) */
  --panel-ink:    #f6f3ea;   /* cream text on the panel */
  --cta-bg:       #1f5d4c;   /* emerald CTA block */
  --cta-ink:      #f5f8f6;   /* near-white text on the CTA */

  /* Type */
  --font-display: "Fraunces", Georgia, "Times New Roman", serif;
  --font-body:    "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;

  /* Layout */
  --container: 1140px;
  --header-h: 68px;
  --radius:   14px;
  --radius-lg: 22px;
  --radius-sm: 9px;

  /* Elevation */
  --shadow-sm: 0 1px 2px rgba(24,23,15,.06), 0 2px 8px rgba(24,23,15,.05);
  --shadow-md: 0 10px 30px rgba(24,23,15,.10), 0 2px 8px rgba(24,23,15,.06);
  --shadow-lg: 0 24px 60px rgba(24,23,15,.16), 0 6px 18px rgba(24,23,15,.08);

  /* Motion */
  --ease: cubic-bezier(.22, .61, .36, 1);
  --dur: .45s;
}

:root[data-theme="dark"] {
  --paper:        #131311;
  --paper-2:      #1c1c19;
  --paper-3:      #242420;
  --ink:          #f3efe4;
  --ink-2:        #a8a394;
  --line:         rgba(243, 239, 228, 0.12);
  --line-strong:  rgba(243, 239, 228, 0.22);
  --accent:       #58c9a8;
  --accent-2:     #74d8bb;
  --accent-ink:   #0e1411;
  --spark:        #f0b948;
  --spark-text:   #f0b948;   /* bright amber already pops on dark — keep it */
  --cta-bg:       #1a4d40;   /* deep emerald — bold but not glaring in the dark */
  /* --panel-bg, --panel-ink, --cta-ink inherited from :root (kept identical) */
  --shadow-sm: 0 1px 2px rgba(0,0,0,.4);
  --shadow-md: 0 10px 30px rgba(0,0,0,.5);
  --shadow-lg: 0 24px 60px rgba(0,0,0,.6);
}

/* ----- Reset / base ------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; }

html {
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--header-h) + 16px);
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  /* clip (not hidden) prevents horizontal scroll from entrance-animation
     transforms without creating a scroll container that breaks position:sticky */
  overflow-x: clip;
}

body {
  font-family: var(--font-body);
  background: var(--paper);
  color: var(--ink);
  line-height: 1.6;
  font-size: 1.0625rem;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: clip;
  -webkit-tap-highlight-color: transparent;
}

/* snappier touch: remove the 300ms delay, keep gestures responsive */
a, button, summary, [role="button"], .btn, .nav a, .icon-btn { touch-action: manipulation; }

img, svg, iframe { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; cursor: pointer; }
[hidden] { display: none !important; }

/* long words (URLs, headline words) never force horizontal scroll on narrow screens */
h1, h2, h3, h4, p, a, .hero__title { overflow-wrap: break-word; }

::selection { background: var(--spark); color: #18170f; }

:focus-visible {
  outline: 2.5px solid var(--accent);
  outline-offset: 3px;
  border-radius: 4px;
}

.container {
  width: 100%;
  max-width: var(--container);
  margin-inline: auto;
  padding-inline: clamp(1.1rem, 4vw, 2.2rem);
}

.visually-hidden {
  position: absolute !important;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0);
  white-space: nowrap; border: 0;
}

.skip-link {
  position: absolute;
  left: 50%; top: -60px;
  transform: translateX(-50%);
  background: var(--panel-bg);
  color: var(--panel-ink);
  padding: .6rem 1.1rem;
  border-radius: 0 0 10px 10px;
  z-index: 1000;
  transition: top .2s var(--ease);
}
.skip-link:focus { top: 0; }

/* ----- Typography --------------------------------------------------- */
h1, h2, h3, h4 {
  font-family: var(--font-display);
  font-weight: 500;
  line-height: 1.06;
  letter-spacing: -0.02em;
  font-optical-sizing: auto;
}

.eyebrow {
  font-family: var(--font-body);
  font-size: .78rem;
  font-weight: 600;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--accent);
  display: inline-flex;
  align-items: center;
  gap: .55rem;
}
.eyebrow::before {
  content: "";
  width: 26px; height: 1px;
  background: currentColor;
  opacity: .6;
}

.lead { font-size: clamp(1.05rem, 1.6vw, 1.28rem); color: var(--ink-2); }

/* ----- Buttons ------------------------------------------------------ */
.btn {
  display: inline-flex;
  align-items: center;
  gap: .55rem;
  padding: .85rem 1.5rem;
  border-radius: 100px;
  border: 1px solid transparent;
  font-weight: 600;
  font-size: .98rem;
  letter-spacing: -0.01em;
  transition: transform var(--dur) var(--ease), background var(--dur) var(--ease), box-shadow var(--dur) var(--ease), border-color var(--dur) var(--ease);
  will-change: transform;
}
.btn:hover { transform: translateY(-2px); }
.btn:active { transform: translateY(0); }

.btn--primary { background: var(--accent); color: var(--accent-ink); box-shadow: var(--shadow-sm); }
.btn--primary:hover { background: var(--accent-2); box-shadow: var(--shadow-md); }

.btn--ghost { background: transparent; color: var(--ink); border-color: var(--line-strong); }
.btn--ghost:hover { border-color: var(--ink); background: color-mix(in srgb, var(--ink) 5%, transparent); }

.btn .arrow { transition: transform var(--dur) var(--ease); }
.btn:hover .arrow { transform: translateX(3px); }

/* ----- Header ------------------------------------------------------- */
.site-header {
  position: sticky;
  top: 0;
  z-index: 100;
  height: var(--header-h);
  display: flex;
  align-items: center;
  background: color-mix(in srgb, var(--paper) 78%, transparent);
  -webkit-backdrop-filter: saturate(1.4) blur(12px);
  backdrop-filter: saturate(1.4) blur(12px);
  border-bottom: 1px solid transparent;
  transition: border-color var(--dur) var(--ease), background var(--dur) var(--ease);
}
.site-header.is-stuck { border-bottom-color: var(--line); }
.site-header .container {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
}

.brand { display: inline-flex; align-items: center; gap: .6rem; font-weight: 600; }
.brand__mark {
  width: 34px; height: 34px;
  flex: none;
  border-radius: 9px;
  background: var(--ink);
  color: var(--paper);
  display: grid;
  place-items: center;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: .95rem;
  letter-spacing: -0.03em;
  position: relative;
  overflow: hidden;
}
/* the monster's blinking eye */
.brand__mark::after {
  content: "";
  position: absolute;
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--spark);
  top: 8px; right: 8px;
  box-shadow: 0 0 0 0 color-mix(in srgb, var(--spark) 70%, transparent);
  animation: blink 6s var(--ease) infinite;
}
@keyframes blink {
  0%, 92%, 100% { transform: scaleY(1); }
  95% { transform: scaleY(.1); }
}
.brand__name { font-family: var(--font-body); letter-spacing: -0.02em; }
.brand__name b { font-weight: 700; }

.nav { display: flex; align-items: center; gap: .35rem; }
.nav a {
  padding: .5rem .85rem;
  border-radius: 100px;
  color: var(--ink-2);
  font-weight: 500;
  font-size: .96rem;
  transition: color var(--dur) var(--ease), background var(--dur) var(--ease);
}
.nav a:hover, .nav a[aria-current="page"] { color: var(--ink); background: color-mix(in srgb, var(--ink) 6%, transparent); }

.header-actions { display: flex; align-items: center; gap: .5rem; }

.icon-btn {
  width: 40px; height: 40px;
  display: grid; place-items: center;
  border-radius: 50%;
  background: transparent;
  border: 1px solid var(--line);
  transition: border-color var(--dur) var(--ease), background var(--dur) var(--ease), transform var(--dur) var(--ease);
}
.icon-btn:hover { border-color: var(--ink); transform: translateY(-1px); }
.icon-btn svg { width: 18px; height: 18px; }
.theme-toggle .moon { display: none; }
:root[data-theme="dark"] .theme-toggle .sun { display: none; }
:root[data-theme="dark"] .theme-toggle .moon { display: block; }

.nav-toggle { display: none; }

/* ----- Hero --------------------------------------------------------- */
.hero { position: relative; padding: clamp(2.25rem, 6vw, 4.5rem) 0 clamp(1.75rem, 4vw, 3rem); }

/* ----- Section scaffolding ----------------------------------------- */
.section { padding: clamp(1.9rem, 5vw, 4rem) 0; }
.section--tint { background: var(--paper-3); }
.section--flush-top { padding-top: 0; }
.section--tight-top { padding-top: clamp(1rem, 3vw, 2rem); }
.section-head { max-width: 720px; margin-bottom: clamp(1.5rem, 3vw, 2.25rem); }
.section-head h2 { font-size: clamp(2rem, 4.5vw, 3.1rem); margin-top: .9rem; }
.section-head p { margin-top: 1rem; }
.section-head__cta { margin-top: 1.4rem; }
.section-head__cta a { font-weight: 600; color: var(--accent); display: inline-flex; align-items: center; gap: .45rem; }
.section-head__cta .arrow { transition: transform var(--dur) var(--ease); }
.section-head__cta a:hover .arrow { transform: translateX(4px); }

/* ----- Capabilities ------------------------------------------------- */
.cap-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1px;
  background: var(--line);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  overflow: hidden;
}
.cap {
  background: var(--paper-2);
  padding: clamp(1.5rem, 3vw, 2.1rem);
  display: flex;
  flex-direction: column;
  gap: .55rem;
  transition: background var(--dur) var(--ease);
}
.cap:hover { background: color-mix(in srgb, var(--accent) 6%, var(--paper-2)); }
.cap__no {
  font-family: var(--font-display);
  font-size: .95rem;
  color: var(--accent);
  font-feature-settings: "tnum";
}
.cap h3 { font-size: 1.32rem; letter-spacing: -0.02em; }
.cap p { color: var(--ink-2); font-size: .98rem; }

/* ----- Selected work ------------------------------------------------ */
.work-grid { display: grid; gap: clamp(1.1rem, 2.4vw, 1.6rem); }
.work-card {
  position: relative;
  display: grid;
  grid-template-columns: 1.1fr 1fr;
  gap: clamp(1.2rem, 3vw, 2.5rem);
  align-items: center;
  background: var(--paper-2);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  padding: clamp(1.3rem, 2.6vw, 2rem);
  overflow: hidden;
  transition: transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease), border-color var(--dur) var(--ease);
}
.work-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-lg); border-color: var(--line-strong); }
.work-card__body { min-width: 0; }
.work-card__tags { display: flex; flex-wrap: wrap; gap: .5rem; margin-bottom: 1rem; }
.chip {
  font-size: .74rem;
  font-weight: 600;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--ink-2);
  background: var(--paper-3);
  border: 1px solid var(--line);
  padding: .3rem .7rem;
  border-radius: 100px;
}
.work-card h3 { font-size: clamp(1.5rem, 2.8vw, 2.2rem); margin-bottom: .7rem; }
.work-card p { color: var(--ink-2); max-width: 46ch; }
.work-card__cta { margin-top: 1.3rem; display: inline-flex; align-items: center; gap: .5rem; font-weight: 600; color: var(--accent); }
.work-card__cta .arrow { transition: transform var(--dur) var(--ease); }
.work-card:hover .work-card__cta .arrow { transform: translateX(4px); }

/* visual panel — a stylised "system map" motif, brand-coloured */
.work-card__visual {
  aspect-ratio: 4 / 3;
  border-radius: var(--radius);
  background:
    radial-gradient(120% 120% at 80% 10%, color-mix(in srgb, var(--accent) 18%, transparent), transparent 55%),
    var(--paper-3);
  border: 1px solid var(--line);
  position: relative;
  overflow: hidden;
}
.work-card__visual svg { position: absolute; inset: 0; width: 100%; height: 100%; }

/* ----- About strip -------------------------------------------------- */
.about { display: grid; grid-template-columns: 1.4fr 1fr; gap: clamp(1.5rem, 4vw, 3.5rem); align-items: center; }
.about h2 { font-size: clamp(1.8rem, 3.6vw, 2.7rem); }
.about p { margin-top: 1.1rem; color: var(--ink-2); }
.about__card {
  background: var(--panel-bg);
  color: var(--panel-ink);
  border-radius: var(--radius-lg);
  padding: clamp(1.6rem, 3vw, 2.4rem);
  position: relative;
  overflow: hidden;
}
.about__card .quote { font-family: var(--font-display); font-size: clamp(1.3rem, 2.4vw, 1.7rem); line-height: 1.3; }
.about__card .quote .spark { color: var(--spark); }
.about__card .sig { margin-top: 1.3rem; font-size: .9rem; opacity: .75; }

/* ----- CTA ---------------------------------------------------------- */
.cta {
  background: var(--cta-bg);
  color: var(--cta-ink);
  border-radius: var(--radius-lg);
  padding: clamp(2rem, 4.5vw, 3.5rem);
  text-align: center;
  position: relative;
  overflow: hidden;
}
.cta h2 { font-size: clamp(2rem, 5vw, 3.4rem); }
.cta p { margin: 1.1rem auto 0; max-width: 52ch; color: color-mix(in srgb, var(--cta-ink) 85%, transparent); }
.cta .actions { margin-top: 1.6rem; display: flex; flex-wrap: wrap; gap: .8rem; justify-content: center; }
.cta .btn--primary { background: var(--cta-ink); color: var(--cta-bg); }
.cta .btn--primary:hover { background: #ffffff; }
.cta .btn--ghost { color: var(--cta-ink); border-color: color-mix(in srgb, var(--cta-ink) 45%, transparent); }
.cta .btn--ghost:hover { border-color: var(--cta-ink); background: color-mix(in srgb, var(--cta-ink) 12%, transparent); }
.eyebrow--on-accent { color: color-mix(in srgb, var(--cta-ink) 82%, transparent); }
.eyebrow--on-accent::before { opacity: .5; }

/* ----- Footer ------------------------------------------------------- */
.site-footer { border-top: 1px solid var(--line); padding: clamp(2rem, 4vw, 3rem) 0 1.5rem; }
.footer-grid { display: grid; grid-template-columns: 1.4fr 1fr 1fr; gap: clamp(1.5rem, 4vw, 3rem); }
.site-footer h4 { font-family: var(--font-body); font-size: .8rem; letter-spacing: .12em; text-transform: uppercase; color: var(--ink-2); margin-bottom: 1rem; font-weight: 600; }
.footer-links { display: flex; flex-direction: column; gap: .6rem; }
.footer-links a { color: var(--ink-2); transition: color var(--dur) var(--ease); width: fit-content; }
.footer-links a:hover { color: var(--ink); }
.footer-intro p { color: var(--ink-2); margin-top: 1rem; max-width: 38ch; }

.journey {
  margin-top: clamp(1.6rem, 4vw, 2.75rem);
  padding-top: 1.5rem;
  border-top: 1px solid var(--line);
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 1rem;
  justify-content: space-between;
}
.journey__path { font-size: .82rem; color: var(--ink-2); letter-spacing: .02em; font-feature-settings: "tnum"; }
.journey__path b { color: var(--accent); font-weight: 600; }
.journey__copy { font-size: .82rem; color: var(--ink-2); }

/* =====================================================================
   Case study pages — cohesive iframe wrappers
   ===================================================================== */
.case-hero { padding: clamp(1.8rem, 4vw, 2.8rem) 0 clamp(1.2rem, 2.5vw, 1.8rem); }
.breadcrumb { display: flex; align-items: center; gap: .5rem; font-size: .86rem; color: var(--ink-2); margin-bottom: 1.4rem; }
.breadcrumb a:hover { color: var(--ink); }
.breadcrumb .sep { opacity: .5; }
.case-hero h1 { font-size: clamp(2.1rem, 5vw, 3.6rem); max-width: 18ch; }
.case-hero .lead { margin-top: 1.1rem; max-width: 58ch; }

.case-meta { display: flex; flex-wrap: wrap; gap: .6rem 1.8rem; margin-top: 1.6rem; padding-top: 1.4rem; border-top: 1px solid var(--line); }
.case-meta div { display: flex; flex-direction: column; gap: .15rem; }
.case-meta dt { font-size: .72rem; letter-spacing: .1em; text-transform: uppercase; color: var(--ink-2); }
.case-meta dd { font-weight: 600; font-size: .96rem; }

/* the embed "stage" — framed like an intentional viewport */
.embed-wrap { padding-bottom: clamp(2rem, 4vw, 3.25rem); }

/* each case study stacks two retained embeds: the narrative + the working prototype */
.embed-block + .embed-block { margin-top: clamp(2rem, 4.5vw, 3.25rem); }
.embed-section-head { max-width: 640px; margin-bottom: clamp(1.1rem, 2.6vw, 1.7rem); }
.embed-section-head h2 { font-size: clamp(1.5rem, 3vw, 2.15rem); margin-top: .55rem; }
.embed-section-head p { margin-top: .6rem; }

.embed-frame {
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-lg);
  background: var(--paper-2);
  box-shadow: var(--shadow-md);
  overflow: hidden;
}
.embed-bar {
  display: flex;
  align-items: center;
  gap: .75rem;
  padding: .7rem 1rem;
  border-bottom: 1px solid var(--line);
  background: color-mix(in srgb, var(--ink) 3%, var(--paper-2));
}
.embed-bar .dots { display: flex; gap: .4rem; }
.embed-bar .dots i { width: 11px; height: 11px; border-radius: 50%; background: var(--line-strong); display: block; }
.embed-bar .dots i:nth-child(1) { background: #e1685a; }
.embed-bar .dots i:nth-child(2) { background: var(--spark); }
.embed-bar .dots i:nth-child(3) { background: var(--accent); }
.embed-bar .embed-title { font-size: .85rem; color: var(--ink-2); font-weight: 500; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.embed-bar .embed-actions { margin-left: auto; display: flex; gap: .4rem; }
.embed-bar .embed-actions a {
  display: inline-flex; align-items: center; gap: .4rem;
  font-size: .82rem; font-weight: 600; color: var(--ink-2);
  padding: .4rem .7rem; border-radius: 100px; border: 1px solid var(--line);
  transition: color var(--dur) var(--ease), border-color var(--dur) var(--ease);
}
.embed-bar .embed-actions a:hover { color: var(--ink); border-color: var(--line-strong); }

/* the stage holds the iframe at a generous, immersive height */
.embed-stage {
  position: relative;
  height: clamp(460px, calc(100dvh - var(--header-h) - 120px), 820px);
  background:
    radial-gradient(140% 90% at 50% 0%, color-mix(in srgb, var(--accent) 8%, transparent), transparent 60%),
    var(--paper-3);
}
.embed-stage iframe { width: 100%; height: 100%; border: 0; }

/* branded loading state shown until the iframe paints */
.embed-loading {
  position: absolute; inset: 0;
  display: grid; place-items: center;
  gap: 1rem;
  text-align: center;
  transition: opacity .5s var(--ease), visibility .5s var(--ease);
}
.embed-loading.is-hidden { opacity: 0; visibility: hidden; }
.embed-loading .spinner {
  width: 38px; height: 38px;
  border-radius: 50%;
  border: 3px solid var(--line-strong);
  border-top-color: var(--accent);
  animation: spin 1s linear infinite;
}
.embed-loading p { color: var(--ink-2); font-size: .9rem; }
@keyframes spin { to { transform: rotate(360deg); } }

/* manual facade button (also the no-JS fallback target) */
.embed-facade {
  position: absolute; inset: 0;
  display: grid; place-items: center;
  padding: 2rem;
  text-align: center;
}
.embed-facade .btn { margin-top: 1rem; }
.embed-hint { margin-top: 1.2rem; font-size: .85rem; color: var(--ink-2); text-align: center; }

/* prev / next */
.case-nav { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; border-top: 1px solid var(--line); padding-top: 2rem; }
.case-nav a {
  display: flex; flex-direction: column; gap: .3rem;
  padding: 1.2rem 1.4rem;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  transition: border-color var(--dur) var(--ease), background var(--dur) var(--ease);
}
.case-nav a:hover { border-color: var(--line-strong); background: var(--paper-2); }
.case-nav .dir { font-size: .74rem; letter-spacing: .1em; text-transform: uppercase; color: var(--ink-2); }
.case-nav .ttl { font-family: var(--font-display); font-size: 1.15rem; }
.case-nav a.next { text-align: right; }

/* =====================================================================
   Art page — gallery + archive
   ===================================================================== */
.art-hero { padding: clamp(3rem, 8vw, 6rem) 0 clamp(1.4rem, 4vw, 2.6rem); text-align: center; position: relative; }
.art-hero .eyebrow { justify-content: center; }
.art-hero h1 { font-size: clamp(2.8rem, 11vw, 6.5rem); margin-top: 1rem; letter-spacing: -0.04em; }
.art-hero h1 .wink { color: var(--spark-text); font-style: italic; }
.art-hero .sub { margin: 1.2rem auto 0; max-width: 52ch; color: var(--ink-2); font-size: clamp(1.05rem, 1.8vw, 1.25rem); }

.art-gallery { columns: 3; column-gap: clamp(.7rem, 1.6vw, 1.1rem); margin-top: clamp(1.5rem, 4vw, 2.5rem); }
.art-figure { break-inside: avoid; margin: 0 0 clamp(.7rem, 1.6vw, 1.1rem); border-radius: var(--radius); overflow: hidden; border: 1px solid var(--line); background: var(--paper-3); position: relative; }
.art-figure img { width: 100%; height: auto; display: block; transition: transform .6s var(--ease); }
.art-figure:hover img { transform: scale(1.04); }
.art-figure figcaption {
  position: absolute; inset: auto 0 0 0;
  padding: 1.4rem .9rem .8rem;
  font-size: .85rem; font-weight: 500; color: #fff;
  background: linear-gradient(to top, rgba(0,0,0,.65), transparent);
  opacity: 0; transition: opacity .4s var(--ease);
}
.art-figure:hover figcaption, .art-figure:focus-within figcaption { opacity: 1; }

.archive-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 17rem), 1fr)); gap: clamp(1rem, 2.4vw, 1.5rem); }
.archive-card {
  display: flex; flex-direction: column; gap: .6rem;
  padding: clamp(1.4rem, 3vw, 2rem);
  background: var(--paper-2);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  transition: transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease), border-color var(--dur) var(--ease);
}
.archive-card:hover { transform: translateY(-3px); box-shadow: var(--shadow-md); border-color: var(--line-strong); }
.archive-card h3 { font-size: 1.3rem; }
.archive-card p { color: var(--ink-2); font-size: .95rem; flex: 1; }
.archive-card .archive-cta { font-weight: 600; color: var(--accent); display: inline-flex; align-items: center; gap: .4rem; }
.archive-card .archive-cta .arrow { transition: transform var(--dur) var(--ease); }
.archive-card:hover .archive-cta .arrow { transform: translateX(4px); }

/* =====================================================================
   Work index — full portfolio
   ===================================================================== */
.index-group + .index-group { margin-top: clamp(1.75rem, 4vw, 3rem); }
.index-group__head { display: flex; align-items: baseline; justify-content: space-between; gap: 1rem; flex-wrap: wrap; margin-bottom: clamp(1.1rem, 2.6vw, 1.6rem); }
.index-group__head h2 { font-size: clamp(1.5rem, 3.2vw, 2.3rem); }
.index-group__head .count { font-size: .82rem; color: var(--ink-2); font-weight: 600; letter-spacing: .06em; }

/* Fluid card grid: columns reflow 3→2→1 continuously via auto-fill +
   minmax, so no per-breakpoint column rules are needed. auto-fill (not
   auto-fit) keeps empty tracks so a lone trailing card never stretches. */
.tile-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 17rem), 1fr)); gap: clamp(.9rem, 2vw, 1.3rem); }
.tile {
  display: flex; flex-direction: column; gap: .7rem;
  padding: clamp(1.4rem, 3vw, 1.9rem);
  background: var(--paper-2);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  transition: transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease), border-color var(--dur) var(--ease);
  position: relative;
}
.tile:hover { transform: translateY(-4px); box-shadow: var(--shadow-lg); border-color: var(--line-strong); }
.tile__tags { display: flex; flex-wrap: wrap; gap: .4rem; }
.tile h3 { font-size: 1.3rem; letter-spacing: -0.02em; }
.tile p { color: var(--ink-2); font-size: .94rem; flex: 1; }
.tile__cta { font-weight: 600; color: var(--accent); display: inline-flex; align-items: center; gap: .4rem; font-size: .92rem; margin-top: .2rem; }
.tile__cta .arrow { transition: transform var(--dur) var(--ease); }
.tile:hover .tile__cta .arrow { transform: translateX(4px); }
/* Stretched "whole card is a link" overlay. The higher-specificity selector + z-index
   ensure it keeps position:absolute and stays clickable even inside .glow-card, whose
   `.glow-card > * { position: relative; z-index: 1 }` rule (motion.css) would otherwise
   collapse this empty anchor to zero height and bury it under the card content. */
.tile .tile__link { position: absolute; inset: 0; border-radius: var(--radius); z-index: 2; }
.tile__badge { position: absolute; top: 1rem; right: 1rem; font-size: .64rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--accent); background: color-mix(in srgb, var(--accent) 13%, transparent); padding: .25rem .55rem; border-radius: 100px; }

/* migrate / retained-link note on stub case studies */
.migrate-panel {
  display: grid; gap: 1.1rem;
  padding: clamp(1.6rem, 4vw, 2.6rem);
  border: 1px dashed var(--line-strong);
  border-radius: var(--radius-lg);
  background: var(--paper-2);
}
.migrate-panel h2 { font-size: clamp(1.4rem, 3vw, 2rem); }
.migrate-panel p { color: var(--ink-2); max-width: 60ch; }
.migrate-panel .actions { display: flex; flex-wrap: wrap; gap: .8rem; margin-top: .3rem; }
.migrate-panel .note { font-size: .85rem; color: var(--ink-2); display: flex; align-items: center; gap: .5rem; }
.migrate-panel .note::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--spark); flex: none; }

/* small layout utilities (kept here so markup stays style-free) */
.stack-xl { margin-top: clamp(1.75rem, 4vw, 2.75rem); }
.about--start { align-items: start; }
.h2-sub { font-size: clamp(1.6rem, 3.4vw, 2.4rem); margin-top: .7rem; }
.prose p { margin-top: 1rem; color: var(--ink-2); }

/* ----- Reveal-on-scroll -------------------------------------------- */
.reveal { opacity: 0; transform: translateY(18px); transition: opacity .7s var(--ease), transform .7s var(--ease); }
.reveal.is-visible { opacity: 1; transform: none; }
.reveal[data-delay="1"] { transition-delay: .08s; }
.reveal[data-delay="2"] { transition-delay: .16s; }
.reveal[data-delay="3"] { transition-delay: .24s; }

/* ----- Responsive --------------------------------------------------- */
/* Tablet landscape / small laptop (≤1024px) */
@media (max-width: 1024px) {
  .work-card { gap: clamp(1rem, 3vw, 2rem); }
}

/* Tablet portrait (≤860px) — collapse to single-column nav earlier so the
   desktop nav never crowds the brand + actions */
@media (max-width: 860px) {
  .nav, .header-actions .desktop-only { display: none; }
  .nav-toggle { display: grid; }
  .nav.is-open {
    display: flex;
    position: fixed;
    inset: var(--header-h) 0 auto 0;
    flex-direction: column;
    align-items: stretch;
    gap: .2rem;
    padding: 1rem clamp(1.1rem, 4vw, 2.2rem) 1.4rem;
    background: var(--paper);
    border-bottom: 1px solid var(--line);
    box-shadow: var(--shadow-md);
    max-height: calc(100dvh - var(--header-h));
    overflow-y: auto;
  }
  .nav.is-open a { padding: .9rem 1rem; font-size: 1.05rem; min-height: 44px; display: flex; align-items: center; }
}

@media (max-width: 900px) {
  .cap-grid { grid-template-columns: repeat(2, 1fr); }
  .work-card { grid-template-columns: 1fr; }
  .work-card__visual { order: -1; aspect-ratio: 16 / 9; }
  .about { grid-template-columns: 1fr; }
  .footer-grid { grid-template-columns: 1fr 1fr; }
  .footer-intro { grid-column: 1 / -1; }
  .art-gallery { columns: 2; }
}

/* Phone (≤640px) */
@media (max-width: 640px) {
  :root { --header-h: 58px; }
  .cap-grid { grid-template-columns: 1fr; }
  .footer-grid { grid-template-columns: 1fr; }
  .case-nav { grid-template-columns: 1fr; }
  .case-nav a.next { text-align: left; }
  .journey { flex-direction: column; align-items: flex-start; gap: .6rem; }
  .art-gallery { columns: 1; }
  /* larger, comfier tap targets for icon buttons */
  .icon-btn { width: 44px; height: 44px; }
  /* full-width primary actions read better on phones */
  .hero__copy .actions .btn, .cta .actions .btn { flex: 1 1 auto; justify-content: center; }
  .work-card__tags .chip { font-size: .7rem; }
  .case-meta { gap: .8rem 1.4rem; }
  .section-head { margin-bottom: clamp(1.25rem, 4vw, 1.75rem); }
}

/* Small phone (≤380px) — tighten gutters & type a touch more */
@media (max-width: 380px) {
  .container { padding-inline: 1rem; }
  .work-card, .cap, .tile, .archive-card { padding: 1.2rem; }
  .chip { padding: .28rem .6rem; }
}

/* Embeds on phones — slightly shorter stage, compact bar */
@media (max-width: 640px) {
  .embed-stage { height: clamp(460px, calc(100dvh - var(--header-h) - 60px), 760px); }
  .embed-bar { padding: .6rem .75rem; gap: .5rem; }
  .embed-bar .embed-title { font-size: .78rem; }
  .embed-bar .embed-actions a { padding: .35rem .6rem; font-size: .78rem; }
  .embed-facade { padding: 1.4rem; }
}

/* ----- Touch devices: keep interactions calm & intuitive -----------
   Hover-driven "lift" transforms can feel jumpy on tap, and JS pointer
   effects (cursor glow, tilt, magnetic) are disabled on coarse pointers.
   Gate the decorative lifts so touch taps stay flat and predictable. */
@media (hover: none) {
  .work-card:hover, .tile:hover, .cap:hover, .archive-card:hover,
  .case-nav a:hover, .about__card:hover, .btn:hover, .icon-btn:hover,
  .magnetic:hover { transform: none; }
  .btn:hover::after { animation: none; }
  .work-card:active, .tile:active { transform: scale(.99); }
}

/* ----- Reduced motion ---------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
  }
  .reveal { opacity: 1; transform: none; }
}

/* ----- Print -------------------------------------------------------- */
@media print {
  .site-header, .site-footer, .embed-frame, .case-nav { display: none; }
}