/* ------------------------------------------------------------------
   Shared styles for content pages (WORK, NOTES, case studies).
   Palette + type mirror the landing page (index.html) so the site
   reads as one system.
------------------------------------------------------------------ */
:root {
  --bg: #0a0c12;
  --panel: #10131c;
  --border: #1e2230;
  --fg: #d8dde8;
  --dim: #9aa2b5;
  --faint: #868ca0;
  --accent: #9bb3d8;
  --maxw: 900px;
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--fg);
  font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  -webkit-font-smoothing: antialiased;
  line-height: 1.65;
  overscroll-behavior-y: none;
}

a { color: var(--accent); text-decoration: none; }
a:hover { color: var(--fg); }

img { max-width: 100%; height: auto; display: block; }

/* ---- site header ---- */
.site-head {
  position: sticky; top: 0; z-index: 20;
  display: flex; justify-content: space-between; align-items: center;
  gap: 16px;
  padding: 18px clamp(16px, 4vw, 40px);
  background: rgba(10, 12, 18, 0.82);
  backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--border);
  font-size: 12px; letter-spacing: 0.22em; text-transform: uppercase;
}
.site-head .brand { color: var(--fg); letter-spacing: 0.32em; }
.site-head .brand:hover { color: var(--accent); }
.site-head nav { display: flex; gap: clamp(14px, 2.4vw, 28px); }
.site-head nav a { color: var(--dim); }
.site-head nav a:hover, .site-head nav a[aria-current="page"] { color: var(--fg); }

/* ---- layout ---- */
.wrap { max-width: var(--maxw); margin: 0 auto; padding: clamp(32px, 6vw, 72px) clamp(16px, 4vw, 40px); }

.eyebrow { font-size: 12px; letter-spacing: 0.28em; text-transform: uppercase; color: var(--faint); margin: 0 0 14px; }

h1 { font-size: clamp(28px, 5vw, 44px); line-height: 1.15; letter-spacing: -0.01em; margin: 0 0 18px; font-weight: 600; }
h2 { font-size: clamp(18px, 3vw, 22px); letter-spacing: 0.02em; margin: 56px 0 16px; font-weight: 600; }
.lede { font-size: clamp(16px, 2.4vw, 19px); color: var(--dim); max-width: 60ch; margin: 0 0 8px; }

.back-link { display: inline-block; margin-bottom: 18px; color: var(--faint); font-size: 11px; letter-spacing: .16em; text-transform: uppercase; }
.back-link:hover { color: var(--fg); }
.content-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 18px; margin: 24px 0 8px; color: var(--faint); font-size: 11px; letter-spacing: .06em; }
.content-date { flex: 0 0 auto; white-space: nowrap; }
.content-tags { display: flex; flex: 1 1 220px; flex-wrap: wrap; gap: 6px; min-width: 0; margin: 0; padding: 0; list-style: none; }
.content-tags a { display: block; padding: 3px 8px; border: 1px solid var(--border); border-radius: 999px; color: var(--faint); font-size: 10px; line-height: 1.4; letter-spacing: .04em; transition: color .2s ease, border-color .2s ease, background .2s ease; }
.content-tags a:hover { border-color: var(--faint); background: var(--panel); color: var(--fg); }

p { max-width: 68ch; }

/* ---- meta row (case study) ---- */
.meta { display: flex; flex-wrap: wrap; gap: 28px; margin: 28px 0 8px; padding: 20px 0; border-top: 1px solid var(--border); border-bottom: 1px solid var(--border); }
.meta div { display: grid; gap: 4px; }
.meta dt { font-size: 11px; letter-spacing: 0.22em; text-transform: uppercase; color: var(--faint); }
.meta dd { margin: 0; font-size: 14px; color: var(--fg); }

/* ---- tags ---- */
.tags { display: flex; flex-wrap: wrap; gap: 8px; list-style: none; padding: 0; margin: 0; }
.tags li { font-size: 10.5px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--dim); border: 1px solid var(--border); border-radius: 999px; padding: 4px 10px; }

/* ---- notes / work index cards ---- */
.cards { display: grid; gap: 1px; background: var(--border); border: 1px solid var(--border); margin-top: 40px; }
.card {
  position: relative;
  display: grid; gap: 14px;
  background: var(--bg);
  padding: clamp(22px, 3vw, 34px);
  transition: background 0.2s ease;
}
a.card:hover { background: var(--panel); }
/* Whole card is the link — a single corner arrow signals it, no per-card button. */
a.card::after {
  content: "→";
  position: absolute;
  top: clamp(22px, 3vw, 34px);
  right: clamp(22px, 3vw, 34px);
  color: var(--faint);
  transition: color 0.2s ease, transform 0.2s ease;
}
a.card:hover::after { color: var(--accent); transform: translateX(3px); }
.card .idx { font-size: 12px; color: var(--faint); letter-spacing: 0.2em; }
.card h3 { margin: 0; font-size: clamp(19px, 3vw, 24px); color: var(--fg); font-weight: 600; }
.card p { margin: 0; color: var(--dim); font-size: 14.5px; max-width: 60ch; }
.card[hidden] { display: none; }

/* ---- tag filter bar (Notes) ---- */
.filters { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 40px; }
.filters button {
  font: inherit; font-size: 11px; letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--dim); background: none; border: 1px solid var(--border);
  border-radius: 999px; padding: 6px 14px; cursor: pointer;
  transition: color .2s ease, border-color .2s ease, background .2s ease;
}
.filters button:hover { color: var(--fg); border-color: var(--faint); }
.filters button[aria-pressed="true"] { color: var(--bg); background: var(--accent); border-color: var(--accent); }
.filters + .cards { margin-top: 16px; }

/* ---- figures / galleries ---- */
figure { margin: 24px 0; }
figure img { border: 1px solid var(--border); border-radius: 6px; background: var(--panel); }
figure figcaption { margin-top: 10px; font-size: 12.5px; color: var(--faint); }
.gallery { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 14px; margin: 28px 0; }
.gallery img { border: 1px solid var(--border); border-radius: 6px; background: var(--panel); width: 100%; }

/* ---- prev / next ---- */
.pager { display: flex; justify-content: space-between; gap: 16px; margin-top: 72px; padding-top: 28px; border-top: 1px solid var(--border); font-size: 13px; }
.pager a { max-width: 46%; }
.pager .stub { color: var(--faint); }
.pager .lbl { display: block; font-size: 11px; letter-spacing: 0.2em; text-transform: uppercase; color: var(--faint); margin-bottom: 4px; }
.pager-next { text-align: right; }

/* ---- case study image lightbox ---- */
.lightbox-trigger { cursor: zoom-in; }
.lightbox-trigger:focus-visible { outline: 2px solid var(--accent); outline-offset: 4px; }
.image-lightbox { width: 100vw; max-width: none; height: 100dvh; max-height: none; margin: 0; padding: clamp(48px, 7vw, 76px) clamp(16px, 4vw, 48px) 24px; overflow: hidden; border: 0; background: rgb(7 9 14 / .96); color: var(--fg); }
.image-lightbox[open] { display: grid; place-items: center; }
.image-lightbox::backdrop { background: rgb(7 9 14 / .88); backdrop-filter: blur(5px); }
.lightbox-content { display: grid; justify-items: center; gap: 12px; width: 100%; height: 100%; min-height: 0; }
.lightbox-content img { width: auto; max-width: 100%; height: auto; max-height: calc(100dvh - 120px); align-self: center; object-fit: contain; border: 0; border-radius: 0; background: transparent; }
.lightbox-caption { align-self: end; max-width: 72ch; margin: 0; color: var(--dim); font-size: 11px; text-align: center; }
.lightbox-close { position: fixed; z-index: 2; top: max(16px, env(safe-area-inset-top)); right: max(16px, env(safe-area-inset-right)); display: grid; place-items: center; width: 36px; height: 36px; padding: 0; border: 1px solid #3a4150; border-radius: 50%; background: #10131c; color: var(--fg); font: inherit; font-size: 22px; line-height: 1; cursor: pointer; }
.lightbox-close:hover, .lightbox-close:focus-visible { border-color: var(--accent); color: var(--accent); outline: none; }

/* ---- footer ---- */
.site-foot { border-top: 1px solid var(--border); color: var(--faint); font-size: 12px; letter-spacing: 0.06em; padding: 28px clamp(16px, 4vw, 40px); display: flex; justify-content: space-between; flex-wrap: wrap; gap: 12px; }

/* ---- notes / blog list ---- */
.post-list { list-style: none; padding: 0; margin: 40px 0 0; display: grid; gap: 1px; background: var(--border); border: 1px solid var(--border); }
.post-list li { background: var(--bg); padding: 22px clamp(18px, 3vw, 30px); }
.post-list time { font-size: 12px; color: var(--faint); letter-spacing: 0.14em; }
.empty { color: var(--dim); border: 1px dashed var(--border); border-radius: 8px; padding: 32px; margin-top: 40px; text-align: center; }

@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

/* ---- mobile header: keep brand on one line, tighten spacing ---- */
@media (max-width: 600px) {
  .site-head { padding: 14px 16px; letter-spacing: 0.14em; }
  .site-head .brand { letter-spacing: 0.14em; white-space: nowrap; }
  .site-head nav { gap: clamp(12px, 4vw, 18px); }
}
@media (max-width: 380px) {
  .site-head { font-size: 11px; letter-spacing: 0.06em; }
  .site-head .brand { letter-spacing: 0.06em; }
  .site-head nav { gap: 10px; }
}

/* ---- developer ergonomics note ---- */
.ergonomics-note {
  --erg-lime: #c9f27b;
  --erg-blue: #83b9ff;
  --erg-coral: #ff9c82;
  --erg-ink: #080a0f;
}

.ergonomics-note .wrap { max-width: 1120px; padding-top: clamp(36px, 6vw, 76px); }

.erg-hero { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(340px, .95fr); gap: clamp(36px, 7vw, 84px); align-items: center; min-height: min(720px, calc(100vh - 58px)); padding-bottom: clamp(56px, 9vw, 104px); }
.erg-hero h1 { max-width: 12ch; font-size: clamp(42px, 6.5vw, 76px); line-height: .98; letter-spacing: -.055em; }
.erg-hero .lede { max-width: 43ch; line-height: 1.55; }

.attention-system { position: relative; min-height: 370px; padding: 30px; overflow: hidden; border: 1px solid #2a3040; border-radius: 3px; background: linear-gradient(145deg, #121620 0%, #0d1017 70%); box-shadow: 24px 24px 0 #07080d; }
.attention-system::before { content: ""; position: absolute; inset: 0; opacity: .28; background-image: linear-gradient(var(--border) 1px, transparent 1px), linear-gradient(90deg, var(--border) 1px, transparent 1px); background-size: 24px 24px; mask-image: linear-gradient(to bottom, #000, transparent 82%); }
.attention-labels { position: relative; display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 8px; color: var(--faint); font-size: 9px; letter-spacing: .15em; text-transform: uppercase; }
.attention-labels span:nth-child(2) { text-align: center; }
.attention-labels span:last-child { text-align: right; }
.attention-track { position: relative; height: 230px; margin-top: 22px; }
.attention-track::before { content: ""; position: absolute; top: 94px; right: 0; left: 0; height: 1px; background: linear-gradient(90deg, var(--erg-blue), #465064 48%, var(--erg-lime)); }
.attention-track::after { content: ""; position: absolute; top: 93px; right: 0; left: 0; height: 3px; opacity: .5; background: linear-gradient(90deg, transparent 20%, rgb(216 221 232 / .6) 50%, transparent 80%); background-size: 220% 100%; animation: line-shimmer 10s ease-in-out infinite; }
.attention-pulse { position: absolute; z-index: 2; top: 88px; left: 12%; width: 13px; height: 13px; border-radius: 50%; background: var(--erg-blue); box-shadow: 0 0 0 6px rgb(131 185 255 / .08), 0 0 16px rgb(131 185 255 / .45); animation: soft-glow 6s ease-in-out infinite; }
.friction { position: absolute; top: 68px; display: grid; place-items: center; width: 52px; height: 52px; border: 1px solid #343a49; background: #151922; color: #737b8c; font-size: 8px; letter-spacing: .1em; text-transform: uppercase; transform: rotate(45deg); }
.friction::after { content: ""; position: absolute; inset: 8px; border: 1px solid #282e3b; }
.friction-a { left: 25%; }
.friction-b { left: 43%; }
.friction-c { left: 61%; }
.friction-a, .friction-c { color: transparent; opacity: .3; }
.focus-output { position: absolute; right: 0; top: 62px; display: grid; place-items: center; width: 88px; height: 66px; border: 1px solid rgb(201 242 123 / .5); background: rgb(201 242 123 / .08); color: var(--erg-lime); font-size: 11px; text-transform: uppercase; }
.focus-output i { font-size: 18px; font-style: normal; line-height: 1; }
.attention-system > p { position: relative; margin: 0; padding-top: 18px; border-top: 1px solid var(--border); color: var(--dim); font-size: 12px; line-height: 1.55; }
.attention-system > p span { color: var(--erg-lime); }

.erg-thesis { display: grid; grid-template-columns: 160px minmax(0, 1fr); column-gap: 40px; padding: clamp(48px, 8vw, 88px) 0; border-top: 1px solid var(--border); border-bottom: 1px solid var(--border); }
.section-label { margin: 7px 0 0; color: var(--faint); font-size: 10px; letter-spacing: .2em; text-transform: uppercase; }
.erg-thesis h2 { margin: 0 0 20px; font-size: clamp(28px, 4vw, 44px); line-height: 1.1; letter-spacing: -.035em; }
.erg-thesis > p:last-child { grid-column: 2; margin: 0; max-width: 61ch; color: var(--dim); font-size: clamp(16px, 2vw, 19px); }
.erg-thesis mark { padding: 0 .15em; background: rgb(201 242 123 / .13); color: var(--erg-lime); }

.principle-index { display: grid; grid-template-columns: repeat(3, 1fr); margin: 72px 0 96px; border-top: 1px solid var(--border); border-left: 1px solid var(--border); }
.principle-index a { display: flex; align-items: baseline; gap: 12px; min-height: 74px; padding: 20px; border-right: 1px solid var(--border); border-bottom: 1px solid var(--border); color: var(--dim); font-size: 12px; transition: background .2s ease, color .2s ease; }
.principle-index a:hover { background: var(--panel); color: var(--fg); }
.principle-index span { color: var(--erg-lime); font-size: 9px; }

.principles { display: grid; gap: clamp(88px, 14vw, 156px); }
.principle { scroll-margin-top: 90px; display: grid; grid-template-columns: clamp(220px, 26vw, 280px) minmax(0, 1fr); gap: clamp(36px, 6vw, 72px); align-items: center; }
.principle-visual { position: relative; display: grid; place-items: center; height: clamp(210px, 24vw, 260px); overflow: hidden; border: 1px solid var(--border); background: #0d1017; }
.principle-visual::before { content: ""; position: absolute; inset: 0; opacity: .23; background-image: radial-gradient(#3a4151 1px, transparent 1px); background-size: 15px 15px; }
.principle-visual::after { content: ""; position: absolute; z-index: 0; inset: 0; opacity: .12; background: linear-gradient(110deg, transparent 25%, rgb(216 221 232 / .35) 48%, transparent 70%); transform: translateX(-80%); animation: ambient-shimmer 12s ease-in-out infinite alternate; }
.principle-copy h2 { margin: 8px 0 16px; max-width: 17ch; font-size: clamp(26px, 3.5vw, 38px); line-height: 1.1; letter-spacing: -.035em; }
.principle-copy > p { margin: 0 0 20px; color: var(--dim); font-size: 14px; line-height: 1.65; }
.principle-number { margin: 0; color: var(--erg-lime) !important; font-size: 10px; letter-spacing: .18em; text-transform: uppercase; }
.principle-copy ul { display: grid; gap: 8px; margin: 0; padding: 0; list-style: none; color: var(--dim); font-size: 14px; line-height: 1.55; }
.principle-copy li { position: relative; padding-left: 20px; }
.principle-copy li::before { content: "→"; position: absolute; left: 0; color: var(--erg-lime); }

.mini-window { position: relative; z-index: 1; width: 78%; border: 1px solid #323948; background: #0a0d13; box-shadow: 12px 12px 0 rgb(0 0 0 / .28); }
.window-bar { display: flex; align-items: center; gap: 5px; height: 30px; padding: 0 10px; border-bottom: 1px solid #252b38; }
.window-bar i { width: 5px; height: 5px; border-radius: 50%; background: #3c4352; }
.window-bar span { margin-left: auto; color: #687083; font-size: 8px; }
.terminal-line, .response-line { display: flex; align-items: center; gap: 8px; padding: 14px; font-size: 11px; }
.terminal-line span { color: var(--erg-blue); }
.cursor { width: 6px; height: 13px; background: var(--fg); animation: soft-blink 5s ease-in-out infinite; }
.response-line { justify-content: space-between; padding-top: 2px; color: var(--erg-lime); }
.response-line em { color: var(--faint); font-size: 8px; font-style: normal; }
.latency-line { display: grid; gap: 7px; padding: 12px 14px 16px; color: var(--faint); font-size: 7px; letter-spacing: .12em; text-transform: uppercase; }
.latency-line i { display: block; height: 3px; background: linear-gradient(90deg, var(--erg-lime) 0 22%, #242a36 22%); }

.route-map { position: relative; z-index: 1; width: 82%; height: 62%; }
.route-start, .route-result, .route-detour { position: absolute; padding: 9px 12px; border: 1px solid #343a48; background: #121620; font-size: 9px; }
.route-start { left: 0; top: 42%; color: var(--erg-blue); }
.route-result { right: 0; top: 42%; border-color: rgb(201 242 123 / .5); color: var(--erg-lime); }
.route-line { position: absolute; top: calc(42% + 18px); left: 64px; right: 78px; height: 1px; background: #465267; }
.route-line i { position: absolute; top: -3px; left: calc(100% - 7px); width: 7px; height: 7px; border-radius: 50%; background: var(--erg-blue); box-shadow: 0 0 10px rgb(131 185 255 / .5); animation: soft-glow 7s ease-in-out infinite; }
.route-detour { border-style: dashed; color: #596173; text-decoration: line-through; }
.detour-one { top: 3%; left: 42%; }
.detour-two { bottom: 2%; left: 47%; }
.route-map::before, .route-map::after { content: ""; position: absolute; left: 31%; width: 28%; height: 36%; border: 1px dashed #252b36; }
.route-map::before { top: 12%; border-bottom: 0; }
.route-map::after { bottom: 12%; border-top: 0; }

.focus-editor { position: relative; z-index: 1; width: 80%; height: 72%; border-left: 2px solid var(--erg-blue); background: #10141d; box-shadow: 10px 10px 0 rgb(0 0 0 / .22); }
.code-lines { display: grid; gap: 15px; padding: 28px 22px; }
.code-lines i { height: 5px; border-radius: 1px; background: linear-gradient(90deg, #455b78 0 24%, #242b38 24% 72%, transparent 72%); }
.code-lines i:nth-child(2) { margin-left: 20px; background: linear-gradient(90deg, #6a536a 0 18%, #242b38 18% 63%, transparent 63%); }
.code-lines i:nth-child(3) { margin-left: 20px; background: linear-gradient(90deg, #4b6c59 0 30%, #242b38 30% 82%, transparent 82%); }
.focus-cursor { position: absolute; top: 105px; left: 75px; width: 5px; height: 14px; background: var(--erg-blue); animation: soft-blink 6s ease-in-out infinite; }
.queued-notes { position: absolute; top: 18px; right: -10px; display: grid; padding: 10px 12px; border: 1px solid #333a49; background: #151922; color: var(--faint); font-size: 9px; }
.queued-notes small { color: #606879; font-size: 7px; }
.commit-boundary { position: absolute; right: 0; bottom: 0; left: 0; display: flex; justify-content: space-between; padding: 9px 12px; border-top: 1px solid #2a313e; color: var(--erg-lime); font-size: 9px; }

.option-filter { position: relative; z-index: 1; display: grid; grid-template-columns: minmax(58px, 1fr) 48px minmax(48px, .75fr); align-items: center; gap: 8px; width: calc(100% - 28px); }
.option-cloud { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; width: 100%; }
.option-cloud i, .earned-options i { width: 100%; max-width: 22px; height: auto; aspect-ratio: 1; border: 1px solid #3a414f; background: #151922; }
.option-cloud i:nth-child(2), .option-cloud i:nth-child(5) { border-radius: 50%; }
.value-gate { display: grid; place-items: center; align-content: center; width: 100%; height: 110px; border: 1px solid rgb(255 156 130 / .35); color: var(--erg-coral); font-size: 7px; letter-spacing: .08em; text-transform: uppercase; clip-path: polygon(0 0, 100% 14%, 100% 86%, 0 100%); }
.value-gate b { font-size: 18px; font-weight: 400; }
.earned-options { display: grid; justify-items: start; gap: 10px; }
.default-option { padding: 6px; border: 1px solid rgb(201 242 123 / .45); background: rgb(201 242 123 / .07); color: var(--erg-lime); font-size: 7px; white-space: nowrap; }

.input-paths { position: relative; z-index: 1; display: grid; grid-template-columns: 1fr 1fr; gap: 32px; width: 82%; }
.key-path, .voice-path { display: flex; align-items: center; justify-content: center; min-height: 92px; border: 1px solid #303746; background: #11151e; }
.key-path { gap: 6px; }
.key-path kbd { display: grid; place-items: center; width: 30px; height: 30px; border: 1px solid #424b5d; border-bottom-width: 3px; border-radius: 4px; color: var(--erg-blue); font: inherit; font-size: 11px; }
.key-path span, .voice-path span { position: absolute; margin-top: 126px; color: var(--faint); font-size: 8px; text-transform: uppercase; }
.voice-path { gap: 4px; }
.voice-path i { width: 3px; height: 16px; background: var(--erg-coral); animation: soft-wave 6s ease-in-out infinite; }
.voice-path i:nth-child(2), .voice-path i:nth-child(4) { height: 30px; animation-delay: -.4s; }
.voice-path i:nth-child(3) { height: 42px; animation-delay: -.7s; }
.input-command { grid-column: 1 / -1; justify-self: center; margin-top: 30px; padding: 10px 16px; border: 1px solid rgb(201 242 123 / .4); color: var(--erg-lime); font-size: 9px; }
.input-command b { margin-left: 18px; }

.intent-map { position: relative; z-index: 1; width: 86%; height: 72%; min-width: 0; }
.intent-ring { position: absolute; inset: 22px 28px; border: 1px solid #2d3442; border-radius: 10px; }
.intent-ring::before, .intent-ring::after { content: ""; position: absolute; width: 5px; height: 5px; border-radius: 50%; background: var(--erg-blue); box-shadow: 0 0 12px var(--erg-blue); }
.intent-ring::before { top: -3px; left: 28%; animation: soft-glow 7s ease-in-out infinite; }
.intent-ring::after { right: 18%; bottom: -3px; background: var(--erg-lime); box-shadow: 0 0 12px var(--erg-lime); animation: soft-glow 7s ease-in-out -3s infinite; }
.intent-center, .intent-node { position: absolute; z-index: 2; padding: 7px 9px; border: 1px solid #343b49; background: #11151e; font-size: 8px; line-height: 1; white-space: nowrap; }
.intent-center { top: 50%; left: 50%; padding: 14px; border-color: rgb(201 242 123 / .45); color: var(--erg-lime); transform: translate(-50%, -50%); }
.node-files { top: 0; left: 0; }
.node-command { top: 0; right: 0; }
.node-settings { bottom: 0; left: 0; }
.node-results { right: 0; bottom: 0; }

.erg-closing { max-width: 760px; margin: clamp(112px, 18vw, 200px) auto 40px; padding: clamp(36px, 6vw, 60px); border: 1px solid #303744; background: linear-gradient(135deg, rgb(131 185 255 / .06), rgb(201 242 123 / .04)); text-align: left; }
.erg-closing .section-label { margin: 0 0 14px; color: var(--erg-lime); }
.erg-closing h2 { margin: 0 0 18px; font-size: clamp(32px, 5vw, 50px); letter-spacing: -.04em; }
.erg-closing p:last-child { margin: 0; color: var(--dim); }
.erg-closing strong { color: var(--fg); }

@keyframes line-shimmer { 0%, 20% { background-position: 180% 0; opacity: .15; } 55% { opacity: .5; } 80%, 100% { background-position: -120% 0; opacity: .15; } }
@keyframes ambient-shimmer { 0%, 30% { transform: translateX(-80%); opacity: .06; } 70%, 100% { transform: translateX(80%); opacity: .14; } }
@keyframes soft-glow { 0%, 100% { opacity: .65; } 50% { opacity: 1; } }
@keyframes soft-blink { 0%, 100% { opacity: .55; } 50% { opacity: .9; } }
@keyframes soft-wave { 0%, 100% { opacity: .65; transform: scaleY(.92); } 50% { opacity: .9; transform: scaleY(1); } }

@media (max-width: 820px) {
  .erg-hero { grid-template-columns: 1fr; min-height: auto; }
  .erg-hero h1 { max-width: 13ch; }
  .attention-system { min-height: 340px; }
  .principle-copy { max-width: 620px; }
}

@media (max-width: 600px) {
  .erg-hero h1 { font-size: clamp(39px, 13vw, 56px); }
  .content-meta { align-items: flex-start; gap: 8px 14px; }
  .content-tags { flex-basis: 100%; }
  .attention-system { min-height: 300px; padding: 20px; box-shadow: 10px 10px 0 #07080d; }
  .attention-track { height: 185px; }
  .attention-track::before { top: 78px; }
  .attention-pulse { top: 72px; }
  .friction { top: 58px; width: 42px; height: 42px; font-size: 7px; }
  .focus-output { top: 49px; width: 70px; height: 58px; font-size: 9px; }
  .erg-thesis { grid-template-columns: 1fr; gap: 14px; }
  .erg-thesis > p:last-child { grid-column: 1; }
  .principle-index { grid-template-columns: 1fr 1fr; margin: 54px 0 80px; }
  .principle-index a { min-height: 66px; padding: 15px; font-size: 10px; }
  .principles { gap: 100px; }
  .principle { grid-template-columns: 1fr; gap: 28px; }
  .principle-visual { width: min(100%, 300px); height: 210px; }
  .erg-closing { padding: 34px 22px; }
}

@media (prefers-reduced-motion: reduce) {
  .attention-track::after, .attention-pulse, .principle-visual::after, .route-line i, .cursor, .focus-cursor, .voice-path i, .intent-ring::before, .intent-ring::after { animation: none; }
}