/* ============================================================================
   Platon.md — content platform design system (adapted from aleksei)
   Visual target: Dashi / blog.edgelab.space — near-white canvas, near-black
   cinematic panels, ONE warm accent, bold grotesk headings for UI,
   editorial serif (Lora) for the article prose.
   Graph-paper grid used as premium decor (hero, page canvas, footer).
   ========================================================================== */

:root {
  /* --- the green accent color knob --- */
  --accent: #10B981;            /* glowing neon emerald green */
  --accent-ink: #0C0A08;        /* text on the accent — dark ink reads beautifully on bright emerald green */

  /* neutrals — warm cozy near-black (dark theme) */
  --bg: #171310;                /* warm near-black canvas */
  --panel: #0C0A08;             /* deepest cinematic panel */
  --panel-2: #141210;           /* slightly lifted dark */
  --card: #201A14;              /* raised warm panel */
  --card-2: #271F17;            /* raised warm panel, top of gradient */
  --ink: #F3EEE7;               /* primary light text */
  --ink-2: #BAB3A8;             /* secondary light text */
  --ink-3: #8B857A;             /* tertiary / labels */
  --line: rgba(255,255,255,.10);/* hairline dividers on dark */
  --on-dark: #FFFFFF;           /* text on dark panels */
  --on-dark-2: #C0BAB0;         /* secondary text on dark panels */

  --radius: 18px;
  --radius-lg: 26px;
  --maxw: 1200px;

  /* decorative dot-grid — premium background texture */
  --dot-step: 24px;                         /* dot spacing */
  --dot-size: 1.2px;                        /* dot radius */
  --dot-light: rgba(255,255,255,.05);       /* light dots on the dark canvas */
  --dot-dark: rgba(255,255,255,.07);        /* light dots on dark panels */
  /* optional hairline grid, layered under dots on the hero for depth */
  --grid-step: 96px;
  --grid-dark: rgba(255,255,255,.035);

  /* Type system — premium, Cyrillic-complete, with variety. */
  --ff-display: "Unbounded", "Onest", system-ui, sans-serif;
  --ff-head: "Onest", "Manrope", system-ui, sans-serif;
  --ff-body: "Inter", system-ui, -apple-system, sans-serif;
  --ff-serif: "Lora", Georgia, "Times New Roman", serif;   /* editorial article prose */
  --ff-mono: "JetBrains Mono", ui-monospace, monospace;
}

/* SEO, retention and CMS quality additions */
.post-rail {
  position: sticky;
  top: 84px;
  z-index: 8;
  display: flex;
  gap: 8px;
  align-items: center;
  padding: 8px;
  margin: 0 0 18px;
  border: 1px solid var(--hairline);
  background: color-mix(in srgb, var(--bg) 86%, transparent);
  backdrop-filter: blur(16px);
}
.post-rail a,
.post-rail button {
  border: 1px solid var(--hairline);
  background: transparent;
  color: var(--ink-2);
  padding: 8px 10px;
  font: 600 11px/1 var(--font-mono);
  text-transform: uppercase;
  cursor: pointer;
}
.post-rail__progress {
  flex: 1;
  height: 3px;
  background: rgba(255,255,255,.12);
  overflow: hidden;
}
.post-rail__progress i {
  display: block;
  width: 100%;
  height: 100%;
  transform: scaleX(0);
  transform-origin: left center;
  background: var(--accent);
}
.post-cta,
.related-posts,
.popular-strip {
  margin-top: 42px;
  padding: 22px;
  border: 1px solid var(--hairline);
  background: rgba(255,255,255,.035);
}
.post-cta h2 {
  margin: 4px 0 16px;
  font-size: clamp(1.4rem, 3vw, 2.4rem);
}
.related-grid,
.popular-strip__items {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  gap: 12px;
}
.related-card,
.popular-strip__items a,
.post-nav-card {
  display: grid;
  gap: 8px;
  padding: 14px;
  border: 1px solid var(--hairline);
  color: inherit;
  background: rgba(0,0,0,.16);
}
.related-card span,
.related-card small,
.post-nav-card span,
.popular-strip small {
  color: var(--muted);
  font: 500 11px/1.45 var(--font-mono);
}
.art-nav {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  gap: 12px;
  align-items: stretch;
}
.post-nav-card--next {
  text-align: right;
}
.toc__level-3 {
  padding-left: 14px;
  opacity: .78;
}
.editor-checklist ul {
  display: grid;
  gap: 8px;
  padding: 0;
  margin: 0 0 10px;
  list-style: none;
}
.editor-checklist li {
  display: flex;
  gap: 8px;
  align-items: center;
  color: var(--muted);
  font: 600 12px/1.35 var(--font-mono);
}
.editor-checklist li::before {
  content: "";
  width: 9px;
  height: 9px;
  border: 1px solid currentColor;
}
.editor-checklist li.is-ok {
  color: var(--accent);
}
.editor-checklist li.is-ok::before {
  background: currentColor;
}
.cms-row__actions button {
  border: 0;
  background: transparent;
  color: inherit;
  font: inherit;
  cursor: pointer;
}
@media (max-width: 820px) {
  .post-rail {
    top: 68px;
    overflow-x: auto;
  }
  .art-nav {
    grid-template-columns: 1fr;
  }
  .post-nav-card--next {
    text-align: left;
  }
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; overflow-x: hidden; scroll-behavior: smooth; }
body {
  margin: 0;
  background-color: var(--bg);
  /* faint dot-grid across the whole canvas */
  background-image: radial-gradient(var(--dot-light) var(--dot-size), transparent var(--dot-size));
  background-size: var(--dot-step) var(--dot-step);
  color: var(--ink);
  font-family: var(--ff-body);
  font-size: 17px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
a { color: inherit; text-decoration: none; }
img { max-width: 100%; display: block; }

/* headings: bold modern grotesk everywhere */
h1, h2, h3, h4 {
  font-family: var(--ff-head);
  font-weight: 700;
  letter-spacing: -0.02em;
  line-height: 1.08;
  margin: 0;
}
.k { color: var(--accent); }          /* one accent word inside a headline */

/* uppercase micro-label with an accent square bullet: ■ LABEL */
.eyebrow, .card__cat, .flag, .sec-head .lbl, .side__label, .cat, .about-group .lbl {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--ff-head);
  font-weight: 600;
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}
.eyebrow .dot, .card__cat .d, .flag .d, .cat .d, .about-group .lbl .d,
.sq { width: 9px; height: 9px; background: var(--accent); border-radius: 2.5px; flex: none;
  box-shadow: 0 0 10px -1px color-mix(in srgb, var(--accent) 75%, transparent),
              inset 0 0 0 1px color-mix(in srgb, #fff 22%, transparent); }

/* ------------------------------------------------------------------ layout */
.wrap { max-width: var(--maxw); margin: 0 auto; padding: 0 24px; }

/* ------------------------------------------------------------------- nav */
.nav { position: sticky; top: 0; z-index: 40;
  backdrop-filter: saturate(1.4) blur(10px);}
.nav__in { max-width: var(--maxw); margin: 0 auto; padding: 14px 24px;
  display: flex; align-items: center; gap: 28px; }
.brand { display: inline-flex; align-items: center; gap: 9px;
  font-family: var(--ff-head); font-weight: 700; font-size: 20px;
  letter-spacing: -0.02em; }
.brand__mark { width: 14px; height: 14px; border-radius: 4px;
  background: var(--accent); flex: none;
  box-shadow: 0 0 12px var(--accent); }
.brand__word { color: var(--ink); }
.nav__links { display: flex; gap: 26px; margin-left: 8px; }
.nav__links a { font-family: var(--ff-head); font-weight: 500; font-size: 15px;
  color: var(--ink-2); transition: color .15s; }
.nav__links a:hover, .nav__links a.is-active { color: var(--ink); }
.nav__spacer { flex: 1; }
.nav__pill { display: inline-flex; align-items: center; gap: 8px;
  font-family: var(--ff-head); font-weight: 600; font-size: 14px;
  padding: 11px 19px; border-radius: 999px;
  background: var(--accent); color: var(--accent-ink);
  box-shadow: 0 8px 20px -8px color-mix(in srgb, var(--accent) 55%, transparent),
              inset 0 1px 0 rgba(255,255,255,.22);
  transition: transform .15s, filter .15s, box-shadow .15s; }
.nav__pill:hover { transform: translateY(-1px); filter: brightness(1.04);
  box-shadow: 0 12px 26px -8px color-mix(in srgb, var(--accent) 70%, transparent),
              inset 0 1px 0 rgba(255,255,255,.32); }

.lang-switch {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 4px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: rgba(12,10,8,.38);
}
.lang-switch a {
  min-width: 34px;
  padding: 6px 8px;
  border-radius: 999px;
  color: var(--ink-3);
  font-family: var(--ff-head);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .08em;
  text-align: center;
  transition: background .15s, color .15s;
}
.lang-switch a:hover,
.lang-switch a.is-active {
  background: var(--accent);
  color: var(--accent-ink);
}

/* ------------------------------------------------------------------- hero */
.hero { padding: 26px 0 12px; }
.hero__panel { position: relative; overflow: hidden;
  background-color: var(--panel); color: var(--on-dark);
  border-radius: var(--radius-lg);
  padding: clamp(40px, 5vw, 72px) clamp(30px, 5vw, 76px);
  min-height: clamp(440px, 46vw, 560px);
  display: flex; flex-direction: column; justify-content: center;
  box-shadow: 0 40px 90px -40px rgba(0,0,0,.7),
              inset 0 0 0 1px rgba(255,255,255,.06); }
.hero__bg { position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; object-position: right center; z-index: 0;
  opacity: .74; transition: opacity .6s ease; }
.hero__panel--portal .hero__bg { object-position: 78% 50%; }
.hero__stage { position: absolute; inset: 0; z-index: 0; pointer-events: none;
  opacity: 0; transition: opacity .8s ease;
  background:
    radial-gradient(circle at 76% 46%, rgba(16,185,129,.34), transparent 23%),
    radial-gradient(circle at 86% 62%, rgba(232,227,218,.14), transparent 19%),
    linear-gradient(115deg, rgba(14,14,13,.08), rgba(14,14,13,.72)); }
.hero__canvas { display: block; width: 100%; height: 100%; }
.hero__panel.is-three-ready .hero__bg { opacity: .16; }
.hero__panel.is-three-ready .hero__stage { opacity: 1; }
.hero__panel::before { content: ""; position: absolute; inset: 0; z-index: 1;
  pointer-events: none;
  background: linear-gradient(90deg,
    #0e0e0d 0%, rgba(14,14,13,.92) 38%,
    rgba(14,14,13,.45) 66%, rgba(14,14,13,.15) 100%); }
.hero__panel::after { content: ""; position: absolute; inset: 0; z-index: 1;
  pointer-events: none; opacity: .45;
  background-image:
    linear-gradient(rgba(255,255,255,.045) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.035) 1px, transparent 1px);
  background-size: 72px 72px;
  mask-image: linear-gradient(90deg, transparent, #000 45%, #000);
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 45%, #000); }
.hero__l { position: relative; z-index: 2; max-width: 58%; }
.hero .eyebrow { color: var(--on-dark); margin-bottom: 26px;
  padding: 7px 14px 7px 12px; border-radius: 999px;
  background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.18);
  backdrop-filter: blur(8px); }
.hero .eyebrow .dot { box-shadow: 0 0 12px 1px var(--accent),
  inset 0 0 0 1px rgba(255,255,255,.3); }
.hero h1 { font-family: var(--ff-display); font-size: clamp(34px, 5.4vw, 64px);
  font-weight: 700; letter-spacing: -0.025em; line-height: 1.02;
  text-shadow: 0 2px 30px rgba(0,0,0,.5); }
.hero h1 .k { white-space: nowrap; }
.hero .sub { color: var(--on-dark-2); font-size: clamp(16px, 1.5vw, 19px);
  max-width: 30em; margin: 24px 0 32px;
  text-shadow: 0 1px 16px rgba(0,0,0,.5); }
.hero__cta { display: inline-flex; align-items: center; gap: 14px;
  font-family: var(--ff-head); font-weight: 600; font-size: 15px;
  color: var(--accent); }
.hero__cta .btn { width: 48px; height: 48px; border-radius: 999px;
  background: var(--accent); display: grid; place-items: center;
  color: var(--accent-ink);
  box-shadow: 0 10px 26px -10px color-mix(in srgb, var(--accent) 70%, transparent);
  transition: transform .15s; }
.hero__cta:hover .btn { transform: translateX(3px); }
.hero__cta .btn svg { width: 20px; height: 20px; }
.hero__cta .lbl { color: var(--on-dark); letter-spacing: .08em;
  text-transform: uppercase; font-size: 12px; }

/* --------------------------------------------------------------- sections */
.section { padding: clamp(34px, 5vw, 60px) 0 0; }
.sec-head { display: flex; align-items: flex-end; justify-content: space-between;
  gap: 24px; padding-bottom: 22px; }
.sec-head h2 { font-size: clamp(24px, 3vw, 34px); }
.sec-head .lbl { color: var(--ink-3); margin-bottom: 12px; }
.sec-head .lead { color: var(--ink-2); font-size: 15px; margin: 8px 0 0;
  max-width: 42em; }

/* ----------------------------------------------------------------- cards */
.grid { display: grid; gap: clamp(20px, 2.4vw, 30px); }
.cols-3 { grid-template-columns: repeat(3, 1fr); }
.cols-2 { grid-template-columns: repeat(2, 1fr); }

[hidden] { display: none !important; }
.card { display: block; transition: transform .18s; }
.card:hover { transform: translateY(-4px); }
.card__cover { position: relative; aspect-ratio: 3 / 2; overflow: hidden;
  border-radius: var(--radius); background: var(--panel);
  box-shadow: 0 1px 0 var(--line); }
.card__cover img { position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; }
.card__cover::after { content: ""; position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(0,0,0,.15) 0%, rgba(0,0,0,.05) 42%,
              rgba(0,0,0,.55) 78%, rgba(0,0,0,.82) 100%); }
.card__chip { position: absolute; top: 15px; left: 15px; z-index: 3;
  display: inline-flex; align-items: center; gap: 8px;
  font-family: var(--ff-head); font-weight: 600; font-size: 10.5px;
  letter-spacing: .13em; text-transform: uppercase; color: #fff;
  padding: 7px 13px 7px 11px; border-radius: 999px;
  background: linear-gradient(180deg, rgba(16,16,14,.66), rgba(8,8,7,.58));
  border: 1px solid rgba(255,255,255,.16);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.15), 0 8px 22px -10px rgba(0,0,0,.7);
  backdrop-filter: blur(12px) saturate(1.4); }
.card__chip .d { width: 8px; height: 8px; box-shadow: 0 0 10px 0 var(--accent),
  inset 0 0 0 1px rgba(255,255,255,.3); }
.card__body { padding: 16px 2px 0; }
.card__cat { color: var(--ink-3); }
.card__body h3 { font-size: 19px; margin: 12px 0 8px; color: var(--ink); }
.card__body p { color: var(--ink-2); font-size: 15px; margin: 0 0 14px; }
.card__meta { display: flex; align-items: center; gap: 12px;
  font-family: var(--ff-head); font-weight: 500; font-size: 12px;
  letter-spacing: .06em; text-transform: uppercase; color: var(--ink-3); }
.card__meta .go { margin-left: auto; color: var(--ink);
  transition: transform .15s; }
.card:hover .card__meta .go { transform: translateX(3px); }

/* ----------------------------------------------- "Про меня" zone (editorial) */
.about-group { padding: clamp(48px, 7vw, 92px) 0 clamp(52px, 8vw, 104px);
  scroll-margin-top: 88px;
  display: flex; flex-direction: column; gap: clamp(34px, 4.5vw, 60px); }

.about-id { display: grid; align-items: start;
  grid-template-columns: minmax(0, 1.12fr) minmax(0, 1fr);
  gap: clamp(28px, 5vw, 72px); }
.about-id__head .lbl { color: var(--ink-3); }
.about-id__head h2 { font-family: var(--ff-head); font-size: clamp(28px, 3.6vw, 44px);
  line-height: 1.06; letter-spacing: -0.02em; margin: 18px 0 0;
  max-width: 15ch; text-wrap: balance; }
.about-id__body { padding-top: clamp(4px, 2.4vw, 34px); }
.about-id__body p { color: var(--ink-2); font-size: clamp(16px, 1.15vw, 18px);
  line-height: 1.66; margin: 0 0 24px; max-width: 46ch; }
.about__tags { display: flex; flex-wrap: wrap; gap: 10px; }
.about__tags span { font-family: var(--ff-head); font-weight: 500; font-size: 13px;
  padding: 9px 15px; border-radius: 999px; border: 1px solid var(--line);
  background: linear-gradient(180deg, #241E17, #1C1712);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.06), 0 1px 2px rgba(0,0,0,.3); color: var(--ink-2); }
.about__tags span:hover { border-color: color-mix(in srgb, var(--accent) 40%, var(--line)); }
.about__tg { display: inline-flex; align-items: center; gap: 9px; margin-top: 22px;
  font-family: var(--ff-head); font-weight: 600; font-size: 14px;
  padding: 10px 17px; border-radius: 999px;
  border: 1px solid color-mix(in srgb, var(--accent) 34%, var(--line));
  color: var(--accent);
  background: color-mix(in srgb, var(--accent) 12%, var(--card));
  transition: border-color .15s, background .15s, transform .15s; }
.about__tg .d { width: 9px; height: 9px; background: var(--accent); border-radius: 2.5px;
  flex: none; box-shadow: 0 0 10px -1px color-mix(in srgb, var(--accent) 75%, transparent); }
.about__tg:hover { border-color: var(--accent); transform: translateY(-1px);
  background: color-mix(in srgb, var(--accent) 20%, var(--card)); }

/* the unified 1-на-1 offer */
.consult { position: relative; overflow: hidden;
  border: 1px solid color-mix(in srgb, var(--accent) 13%, var(--line));
  border-radius: var(--radius-lg);
  background:
    radial-gradient(120% 130% at 100% 0%, color-mix(in srgb, var(--accent) 6%, transparent), transparent 55%),
    linear-gradient(180deg, var(--card-2), var(--card));
  padding: clamp(24px, 3.6vw, 48px);
  box-shadow: 0 1px 0 var(--line), 0 22px 50px -34px rgba(0,0,0,.55); }
.consult__intro { max-width: 60ch; }
.consult__intro .lbl { color: var(--ink-3); }
.consult__intro h3 { font-family: var(--ff-head); font-weight: 700;
  font-size: clamp(23px, 2.3vw, 31px); line-height: 1.12; letter-spacing: -0.015em;
  margin: 14px 0 14px; text-wrap: balance; }
.consult__intro p { color: var(--ink-2); font-size: clamp(15.5px, 1.1vw, 17px);
  line-height: 1.62; margin: 0; }

.do-list { list-style: none; margin: clamp(26px, 3.2vw, 40px) 0 0; padding: 0;
  display: grid; grid-template-columns: 1fr 1fr;
  gap: clamp(20px, 2.6vw, 30px) clamp(36px, 5vw, 72px); }
.do-list__row { display: flex; align-items: flex-start; gap: 14px; }
.do-list__row .sq { margin-top: 7px; }
.do-list__txt { display: flex; flex-direction: column; gap: 4px; }
.do-list__txt b { font-family: var(--ff-head); font-weight: 600;
  font-size: clamp(16px, 1.2vw, 18px); letter-spacing: -0.01em; color: var(--ink); }
.do-list__txt span { color: var(--ink-3); font-size: 14.5px; line-height: 1.5;
  text-wrap: pretty; }

.consult__cta { display: inline-flex; align-items: center; justify-content: center; gap: 9px;
  margin-top: clamp(28px, 3.4vw, 42px);
  font-family: var(--ff-head); font-weight: 600; font-size: 14.5px;
  padding: 14px 26px; border-radius: 999px;
  background: var(--accent); color: var(--accent-ink);
  box-shadow: 0 10px 24px -10px color-mix(in srgb, var(--accent) 60%, transparent);
  transition: transform .15s, box-shadow .15s, filter .15s; }
.consult__cta:hover { transform: translateY(-1px); filter: brightness(1.05);
  box-shadow: 0 14px 30px -10px color-mix(in srgb, var(--accent) 74%, transparent); }

@media (max-width: 820px) {
  .about-id { grid-template-columns: 1fr; gap: clamp(18px, 4vw, 26px); }
  .about-id__head h2 { max-width: none; }
  .about-id__body { padding-top: 0; }
  .do-list { grid-template-columns: 1fr; gap: clamp(18px, 4vw, 24px); }
  .consult__cta { width: 100%; }
}
@media (max-width: 560px) {
  .about-group { gap: 26px; }
  .about-id__head h2 { font-size: 26px; }
  .consult { padding: 22px 20px; }
  .consult__intro h3 { font-size: 22px; }
  .do-list { margin-top: 22px; gap: 18px; }
  .consult__cta { margin-top: 24px; padding: 13px 22px; }
}

/* --------------------------------------------------------- story about page */
.story-page {
  position: relative;
  overflow: hidden;
  background:
    linear-gradient(180deg, rgba(23,19,16,0), rgba(12,10,8,.82) 42%, rgba(23,19,16,0) 100%),
    radial-gradient(var(--dot-light) var(--dot-size), transparent var(--dot-size));
  background-size: auto, var(--dot-step) var(--dot-step);
}
.story-hero {
  position: relative;
  min-height: min(820px, calc(100dvh - 74px));
  display: grid;
  align-items: center;
  padding: clamp(34px, 5vw, 76px) 0 clamp(40px, 7vw, 96px);
  isolation: isolate;
}
.story-hero__backdrop {
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background:
    linear-gradient(112deg, rgba(12,10,8,.96) 0%, rgba(23,19,16,.9) 41%, rgba(16,185,129,.16) 100%),
    linear-gradient(180deg, rgba(255,255,255,.04), transparent 35%);
}
.story-hero__sun {
  position: absolute;
  right: max(-90px, -6vw);
  top: clamp(42px, 10vw, 120px);
  width: clamp(330px, 42vw, 680px);
  height: clamp(160px, 22vw, 330px);
  transform: skewX(-10deg) rotate(-7deg);
  background:
    repeating-linear-gradient(180deg, rgba(255,255,255,.18) 0 2px, transparent 2px 18px),
    linear-gradient(135deg, rgba(16,185,129,.78), rgba(255,121,84,.34) 50%, rgba(243,238,231,.08));
  opacity: .62;
  filter: saturate(1.2);
}
.story-hero__grid {
  position: absolute;
  inset: auto 0 0;
  height: 42%;
  transform: perspective(700px) rotateX(62deg);
  transform-origin: bottom;
  background-image:
    linear-gradient(rgba(255,255,255,.08) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.07) 1px, transparent 1px);
  background-size: 70px 70px;
  opacity: .34;
}
.story-hero__in {
  display: grid;
  grid-template-columns: minmax(0, .95fr) minmax(360px, 1fr);
  align-items: center;
  gap: clamp(28px, 5vw, 80px);
}
.story-hero__copy {
  position: relative;
  z-index: 2;
  max-width: 720px;
}
.story-kicker {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 18px;
  color: var(--accent);
  font-family: var(--ff-mono);
  font-size: 12px;
  letter-spacing: .14em;
  text-transform: uppercase;
}
.story-kicker::before {
  content: "";
  width: 28px;
  height: 1px;
  background: currentColor;
}
.story-hero h1 {
  max-width: 11ch;
  font-family: var(--ff-display);
  font-size: clamp(42px, 7.6vw, 92px);
  line-height: .95;
  letter-spacing: -.04em;
  text-wrap: balance;
}
.story-hero__copy p {
  max-width: 38em;
  margin: clamp(22px, 2.6vw, 32px) 0 0;
  color: var(--ink-2);
  font-size: clamp(17px, 1.4vw, 20px);
  line-height: 1.62;
}
.story-cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 48px;
  margin-top: 30px;
  padding: 0 22px;
  border-radius: 999px;
  background: var(--accent);
  color: var(--accent-ink);
  font-family: var(--ff-head);
  font-weight: 700;
  font-size: 14px;
  box-shadow: 0 16px 34px -18px color-mix(in srgb, var(--accent) 80%, transparent);
  transition: transform .16s ease, filter .16s ease;
}
.story-cta:hover {
  transform: translateY(-2px);
  filter: brightness(1.06);
}
.story-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}
.story-cta--ghost {
  border: 1px solid rgba(255,255,255,.18);
  background: rgba(12,10,8,.36);
  color: var(--ink);
  box-shadow: none;
}
.story-poster {
  position: relative;
  min-height: clamp(410px, 49vw, 620px);
}
.story-page--personal .story-hero__backdrop {
  background:
    radial-gradient(circle at 82% 18%, rgba(255,86,139,.34), transparent 27%),
    radial-gradient(circle at 70% 62%, rgba(16,185,129,.22), transparent 28%),
    linear-gradient(112deg, rgba(12,10,8,.96) 0%, rgba(23,19,16,.9) 44%, rgba(111,55,191,.22) 100%);
}
.story-page--personal .story-hero__sun {
  background:
    repeating-linear-gradient(180deg, rgba(255,255,255,.16) 0 2px, transparent 2px 18px),
    linear-gradient(135deg, rgba(255,86,139,.72), rgba(255,143,74,.54) 48%, rgba(16,185,129,.22));
}
.story-character-card {
  position: absolute;
  z-index: 3;
  left: 5%;
  top: 11%;
  display: grid;
  gap: 6px;
  width: min(240px, 46%);
  padding: 16px;
  border: 1px solid rgba(255,255,255,.18);
  border-radius: 8px;
  background: linear-gradient(135deg, rgba(12,10,8,.82), rgba(39,31,23,.62));
  backdrop-filter: blur(12px);
  transform: rotate(-5deg);
}
.story-character-card span {
  color: var(--accent);
  font-family: var(--ff-mono);
  font-size: 11px;
  letter-spacing: .14em;
}
.story-character-card b {
  font-family: var(--ff-head);
  font-size: clamp(18px, 2vw, 24px);
  line-height: 1.05;
}
.story-poster::before,
.story-poster::after {
  content: "";
  position: absolute;
  inset: 9% 8% 7% 12%;
  border: 1px solid rgba(255,255,255,.18);
  transform: rotate(-4deg);
}
.story-poster::after {
  inset: 14% 0 13% 2%;
  transform: rotate(7deg);
  border-color: color-mix(in srgb, var(--accent) 32%, transparent);
}
.story-poster__frame {
  position: absolute;
  overflow: hidden;
  border: 1px solid rgba(255,255,255,.18);
  border-radius: 8px;
  background: var(--panel);
  box-shadow: 0 34px 80px -44px rgba(0,0,0,.9);
}
.story-poster__frame img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.story-poster__frame::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(180deg, rgba(12,10,8,.04), rgba(12,10,8,.58)),
    linear-gradient(90deg, rgba(16,185,129,.16), transparent 52%);
}
.story-poster__frame--main {
  inset: 5% 7% 10% 13%;
  transform: rotate(2deg);
}
.story-poster__frame--one {
  left: 0;
  bottom: 4%;
  width: 42%;
  aspect-ratio: 4 / 3;
  transform: rotate(-7deg);
}
.story-poster__frame--two {
  right: 0;
  top: 9%;
  width: 36%;
  aspect-ratio: 4 / 3;
  transform: rotate(8deg);
}
.story-poster__label {
  position: absolute;
  right: 7%;
  bottom: 4%;
  display: grid;
  gap: 2px;
  min-width: 160px;
  padding: 14px 16px;
  border: 1px solid rgba(255,255,255,.16);
  border-radius: 8px;
  background: rgba(12,10,8,.72);
  backdrop-filter: blur(12px);
}
.story-poster__label span {
  color: var(--ink-3);
  font-family: var(--ff-mono);
  font-size: 11px;
  letter-spacing: .1em;
  text-transform: uppercase;
}
.story-poster__label b {
  font-family: var(--ff-head);
  font-size: 20px;
}
.story-strip {
  display: flex;
  justify-content: center;
  gap: clamp(14px, 4vw, 54px);
  padding: 18px 24px;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  background: rgba(12,10,8,.56);
  color: var(--ink-2);
  font-family: var(--ff-mono);
  font-size: 12px;
  letter-spacing: .12em;
  text-transform: uppercase;
}
.story-chapters {
  display: grid;
  gap: clamp(22px, 4vw, 54px);
  padding-top: clamp(48px, 8vw, 112px);
  padding-bottom: clamp(48px, 8vw, 112px);
}
.story-section {
  padding-top: clamp(54px, 8vw, 112px);
  padding-bottom: clamp(18px, 4vw, 50px);
}
.story-section h2,
.story-section__head h2 {
  font-family: var(--ff-display);
  font-size: clamp(32px, 5vw, 70px);
  line-height: .98;
  letter-spacing: -.04em;
  text-wrap: balance;
}
.story-wide {
  max-width: 760px;
  margin: 24px 0 0;
  color: var(--ink-2);
  font-size: clamp(17px, 1.4vw, 20px);
  line-height: 1.76;
}
.story-section--split {
  display: grid;
  grid-template-columns: minmax(0, .8fr) minmax(0, 1fr);
  gap: clamp(26px, 5vw, 74px);
  align-items: start;
}
.story-section--split p {
  margin: 0;
  color: var(--ink-2);
  font-size: clamp(17px, 1.4vw, 20px);
  line-height: 1.76;
}
.story-card-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 14px;
  margin-top: 28px;
}
.story-mini-card {
  min-height: 142px;
  padding: 20px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background:
    linear-gradient(145deg, rgba(39,31,23,.78), rgba(12,10,8,.58)),
    radial-gradient(circle at 100% 0%, rgba(255,86,139,.12), transparent 42%);
  transition: transform .18s ease, border-color .18s ease;
}
.story-mini-card:hover {
  transform: translateY(-4px);
  border-color: color-mix(in srgb, var(--accent) 34%, var(--line));
}
.story-mini-card span,
.story-tag {
  display: inline-flex;
  color: var(--accent);
  font-family: var(--ff-mono);
  font-size: 11px;
  letter-spacing: .12em;
  text-transform: uppercase;
}
.story-mini-card p {
  margin: 14px 0 0;
  color: var(--ink-2);
  line-height: 1.55;
}
.story-panel {
  display: grid;
  grid-template-columns: minmax(180px, .58fr) minmax(0, 1fr);
  gap: clamp(22px, 5vw, 72px);
  align-items: center;
  min-height: clamp(320px, 38vw, 460px);
  padding: clamp(22px, 3.4vw, 42px);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  background:
    linear-gradient(135deg, rgba(39,31,23,.72), rgba(12,10,8,.76)),
    radial-gradient(var(--dot-light) var(--dot-size), transparent var(--dot-size));
  background-size: auto, var(--dot-step) var(--dot-step);
  overflow: hidden;
}
.story-panel:nth-child(even) {
  grid-template-columns: minmax(0, 1fr) minmax(180px, .58fr);
}
.story-panel:nth-child(even) .story-panel__media {
  order: 2;
}
.story-panel__media {
  position: relative;
  min-height: 260px;
  border-radius: 8px;
  background:
    linear-gradient(145deg, rgba(16,185,129,.72), rgba(255,121,84,.22) 54%, rgba(243,238,231,.1)),
    repeating-linear-gradient(135deg, rgba(255,255,255,.18) 0 1px, transparent 1px 14px);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.14);
}
.story-panel__media::before {
  content: "";
  position: absolute;
  inset: 18px;
  border: 1px solid rgba(12,10,8,.38);
}
.story-panel__media::after {
  content: "";
  position: absolute;
  inset: 24% -12% 24% 36%;
  transform: skewX(-18deg);
  background: rgba(12,10,8,.34);
}
.story-panel__number {
  position: absolute;
  left: 22px;
  bottom: 8px;
  color: rgba(12,10,8,.62);
  font-family: var(--ff-display);
  font-size: clamp(76px, 10vw, 132px);
  line-height: 1;
  letter-spacing: -.08em;
}
.story-panel__glow {
  position: absolute;
  right: 20px;
  top: 22px;
  width: 38%;
  height: 44%;
  transform: skewX(-16deg);
  border: 1px solid rgba(255,255,255,.24);
  background: linear-gradient(180deg, rgba(255,255,255,.18), rgba(255,255,255,.04));
}
.story-panel__body {
  max-width: 660px;
}
.story-panel__body .story-tag {
  margin-bottom: 14px;
}
.story-panel__body h2,
.story-stack__copy h2,
.story-final__panel h2 {
  font-family: var(--ff-display);
  font-size: clamp(28px, 4.2vw, 58px);
  line-height: .98;
  letter-spacing: -.035em;
  text-wrap: balance;
}
.story-panel__body p,
.story-stack__copy p,
.story-final__panel p {
  margin: 22px 0 0;
  color: var(--ink-2);
  font-size: clamp(16px, 1.25vw, 19px);
  line-height: 1.72;
}
.story-stack {
  padding-bottom: clamp(54px, 8vw, 110px);
}
.story-stack__sticky {
  position: sticky;
  top: 92px;
  min-height: min(680px, calc(100dvh - 118px));
  display: grid;
  grid-template-columns: minmax(260px, .85fr) minmax(0, 1fr);
  gap: clamp(26px, 5vw, 72px);
  align-items: center;
  padding: clamp(26px, 4vw, 54px);
  border: 1px solid color-mix(in srgb, var(--accent) 20%, var(--line));
  border-radius: var(--radius-lg);
  background:
    linear-gradient(125deg, rgba(12,10,8,.94), rgba(39,31,23,.86) 58%, rgba(16,185,129,.12)),
    radial-gradient(var(--dot-light) var(--dot-size), transparent var(--dot-size));
  background-size: auto, var(--dot-step) var(--dot-step);
  overflow: hidden;
}
.story-stack__visual {
  position: relative;
  min-height: 360px;
  border-radius: 8px;
  background:
    linear-gradient(90deg, rgba(255,255,255,.08) 1px, transparent 1px),
    linear-gradient(rgba(255,255,255,.08) 1px, transparent 1px),
    linear-gradient(145deg, rgba(16,185,129,.52), rgba(12,10,8,.2));
  background-size: 48px 48px, 48px 48px, auto;
  transform: rotate(-2deg);
}
.story-orbit {
  position: absolute;
  inset: 16%;
  border: 1px solid rgba(255,255,255,.34);
  border-radius: 50%;
}
.story-orbit--a {
  transform: rotate(14deg) scaleX(1.25);
  border-color: color-mix(in srgb, var(--accent) 62%, transparent);
}
.story-orbit--b {
  inset: 26%;
  transform: rotate(-28deg) scaleX(1.55);
}
.story-orbit--c {
  inset: 38%;
  transform: rotate(48deg) scaleX(1.9);
}
.story-stack__copy {
  position: relative;
  z-index: 1;
}
.story-stats {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
}
.story-stat {
  padding: 18px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: rgba(12,10,8,.44);
}
.story-stat span {
  display: block;
  color: var(--ink-3);
  font-family: var(--ff-mono);
  font-size: 11px;
  letter-spacing: .12em;
  text-transform: uppercase;
}
.story-stat b {
  display: block;
  margin-top: 8px;
  font-family: var(--ff-head);
  font-size: clamp(18px, 2.4vw, 28px);
  line-height: 1.08;
}
.story-final {
  padding-bottom: clamp(58px, 9vw, 120px);
}
.story-final__panel {
  position: relative;
  overflow: hidden;
  padding: clamp(30px, 5vw, 70px);
  border: 1px solid color-mix(in srgb, var(--accent) 24%, var(--line));
  border-radius: var(--radius-lg);
  background:
    linear-gradient(105deg, rgba(16,185,129,.18), transparent 44%),
    linear-gradient(180deg, var(--card-2), var(--card));
}
.story-final__panel::after {
  content: "";
  position: absolute;
  right: -8%;
  top: 12%;
  width: 42%;
  height: 68%;
  transform: skewX(-18deg);
  border: 1px solid rgba(255,255,255,.12);
  background: repeating-linear-gradient(180deg, rgba(255,255,255,.08) 0 1px, transparent 1px 18px);
}
.story-final__panel h2,
.story-final__panel p,
.story-final__panel .story-kicker,
.story-final__panel .story-cta {
  position: relative;
  z-index: 1;
}
.story-final__panel p {
  max-width: 50em;
}

@media (max-width: 980px) {
  .story-hero__in,
  .story-stack__sticky {
    grid-template-columns: 1fr;
  }
  .story-hero h1 {
    max-width: 13ch;
  }
  .story-poster {
    min-height: 460px;
  }
  .story-stack__sticky {
    position: relative;
    top: auto;
  }
}

/* ------------------------------------------------ performance tier for weak phones */
.perf-lite [data-reveal],
.perf-lite .split-lines,
.perf-lite .split-chars,
.perf-lite [data-stagger] > *,
.perf-lite .reveal,
.perf-lite .story-panel,
.perf-lite .story-stat,
.perf-lite .story-final__panel {
  opacity: 1 !important;
  transform: none !important;
  filter: none !important;
}

.perf-lite .hero__canvas,
.perf-lite [data-hero-three],
.perf-lite [data-three-hero],
.perf-lite [data-webgl-hero] {
  display: none !important;
}

.perf-lite .hero__panel.is-three-lite::after {
  opacity: .72;
}

.perf-lite .route-cinema__photo,
.perf-lite .story-poster,
.perf-lite .story-panel__media,
.perf-lite .awards-hero__doc,
.perf-lite .award-doc {
  will-change: auto;
}

@media (max-width: 760px) {
  .perf-lite {
    scroll-behavior: auto;
  }

  .perf-lite .nav__in,
  .perf-lite .drawer,
  .perf-lite .story-mini-card,
  .perf-lite .timeline-card,
  .perf-lite .route-note,
  .perf-lite .route-manifest,
  .perf-lite .award-doc figure,
  .perf-lite .awards-stat,
  .perf-lite .about-id {
    -webkit-backdrop-filter: none !important;
    backdrop-filter: none !important;
  }

  .perf-lite .story-hero__sun,
  .perf-lite .story-orbit,
  .perf-lite .awards-page::before {
    opacity: .42;
  }

  .perf-lite .award-doc,
  .perf-lite .route-photo,
  .perf-lite .story-poster__frame {
    box-shadow: 0 16px 34px rgba(0, 0, 0, .34);
  }

  .perf-lite .award-doc:hover,
  .perf-lite .route-photo:hover,
  .perf-lite .story-poster__frame:hover {
    transform: translateY(-3px);
  }
}
@media (max-width: 720px) {
  .story-hero {
    min-height: auto;
  }
  .story-hero__in,
  .story-chapters,
  .story-stack,
  .story-final {
    padding-left: 18px;
    padding-right: 18px;
  }
  .story-hero__in {
    gap: 24px;
  }
  .story-hero h1 {
    font-size: 38px;
    max-width: none;
  }
  .story-poster {
    min-height: 360px;
  }
  .story-poster__frame--one,
  .story-poster__frame--two {
    width: 46%;
  }
  .story-strip {
    align-items: flex-start;
    flex-direction: column;
    gap: 8px;
  }
  .story-panel,
  .story-panel:nth-child(even) {
    grid-template-columns: 1fr;
    min-height: auto;
  }
  .story-panel:nth-child(even) .story-panel__media {
    order: 0;
  }
  .story-panel__media,
  .story-stack__visual {
    min-height: 220px;
  }
  .story-stats {
    grid-template-columns: 1fr;
  }
  .story-section--split,
  .story-card-grid {
    grid-template-columns: 1fr;
  }
  .story-character-card {
    width: 58%;
  }
}

/* --------------------------------------------------------------- footer */
.foot { border-top: 1px solid var(--line); margin-top: 40px;
  background-color: #120F0C;
  background-image: radial-gradient(rgba(255,255,255,.05) var(--dot-size), transparent var(--dot-size));
  background-size: var(--dot-step) var(--dot-step); }
.foot__in { max-width: var(--maxw); margin: 0 auto; padding: 30px 24px;
  display: flex; flex-direction: column; gap: 18px; }
.foot__top { display: flex; align-items: center; justify-content: space-between;
  gap: 20px; flex-wrap: wrap; }
.foot__legal { display: flex; flex-wrap: wrap; gap: 6px 22px;
  padding-top: 18px; border-top: 1px solid var(--line); }
.foot__legal a { font-size: 13.5px; color: var(--ink-3); transition: color .15s; }
.foot__legal a:hover { color: var(--ink); }
.foot__legalnote { display: flex; flex-direction: column; gap: 4px; }
.foot__tag { color: var(--ink-3); font-size: 14px; }
.foot__tg { font-family: var(--ff-head); font-weight: 600; font-size: 14px;
  color: var(--accent); transition: opacity .15s; }
.foot__tg:hover { opacity: .75; }

/* --------------------------------------------------------- single guide page */
.reading { max-width: 1440px; margin: 0 auto; padding: 0 24px;
  display: grid; grid-template-columns: minmax(0, 1fr) 230px;
  gap: clamp(28px, 3.4vw, 56px); align-items: start; }

.toc { position: sticky; top: 78px; padding-top: 34px; }
.toc__label { color: var(--ink-3); margin-bottom: 16px; }
.toc__list { display: flex; flex-direction: column; gap: 2px; }
.toc__list a { font-size: 13px; line-height: 1.35; color: var(--ink-3);
  padding: 6px 0; transition: color .15s; }
.toc__list a:hover, .toc__list a.is-active { color: var(--ink); }

.art { padding: 24px 0 40px; min-width: 0; }
.crumbs { display: flex; align-items: center; gap: 10px; font-size: 13px;
  color: var(--ink-3); margin-bottom: 14px; }
.crumbs a:hover { color: var(--ink); }
.crumbs .sep { color: var(--line); }
.art h1 { font-size: clamp(28px, 3.6vw, 44px); margin: 4px 0 18px; color: var(--ink); }
.byline { display: flex; align-items: center; justify-content: space-between;
  gap: 18px; flex-wrap: wrap; padding-bottom: 26px; border-bottom: 1px solid var(--line);
  margin-bottom: 30px; }
.byline__who { display: flex; align-items: center; gap: 12px; }
.byline__who .byline__mark { width: 36px; height: 36px; border-radius: 9px; flex: none;
  background: var(--panel); display: grid; place-items: center; }
.byline__who .byline__mark span { width: 13px; height: 13px; border-radius: 3px; background: var(--accent); }
.byline__name { font-family: var(--ff-head); font-weight: 600; font-size: 15px; }
.byline__meta { font-size: 13px; color: var(--ink-3); }

.art-cover {
  position: relative;
  aspect-ratio: 16 / 7;
  overflow: hidden;
  border-radius: 8px;
  border: 1px solid var(--line);
  background: var(--panel);
  box-shadow: 0 24px 60px -42px rgba(0,0,0,.85);
}
.art-cover img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.art-cover::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(0,0,0,.05), rgba(0,0,0,.46));
}
.art-cover .card__chip {
  z-index: 2;
}
.post-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: -12px 0 28px;
}
.post-tags span {
  border: 1px solid var(--line);
  border-radius: 6px;
  padding: 7px 10px;
  color: var(--ink-2);
  font-family: var(--ff-head);
  font-size: 12px;
  background: rgba(12,10,8,.4);
}

.copy { display: inline-flex; align-items: center; gap: 9px; cursor: pointer;
  font-family: var(--ff-head); font-weight: 600; font-size: 13px;
  padding: 10px 16px; border-radius: 999px; border: 1px solid var(--line);
  background: var(--card); color: var(--ink); transition: .15s; }
.copy:hover { border-color: var(--ink); }
.copy.is-done { background: var(--accent); border-color: var(--accent); color: var(--accent-ink); }
.copy svg { width: 16px; height: 16px; }

/* Article body editorial Lora typography */
.body { font-family: var(--ff-serif); font-size: 19px; line-height: 1.75;
  color: #E8E3DA; max-width: 700px; }
.body > *:first-child { margin-top: 0; }
.body p { margin: 0 0 22px; }
.body h2 { font-family: var(--ff-head); font-size: clamp(23px, 2.6vw, 30px);
  margin: 48px 0 16px; scroll-margin-top: 90px; color: var(--ink); }
.body h3 { font-family: var(--ff-head); font-size: 21px; margin: 32px 0 12px; color: var(--ink); }
.body strong { font-weight: 600; color: var(--ink); }
.body a { color: var(--ink); border-bottom: 2px solid var(--accent); }
.body ul, .body ol { margin: 0 0 22px; padding-left: 24px; }
.body li { margin: 0 0 10px; }
.body li::marker { color: var(--accent); }
.body blockquote { margin: 30px 0; padding: 18px 26px;
  border-left: 3px solid var(--accent);
  background: linear-gradient(90deg, color-mix(in srgb, var(--accent) 12%, var(--card)), var(--card));
  border-radius: 0 var(--radius) var(--radius) 0;
  font-family: var(--ff-serif); font-style: italic; font-weight: 500;
  font-size: 19px; line-height: 1.6; color: var(--ink); }
.body .lead { font-size: 21px; line-height: 1.62; color: var(--ink);
  margin: 0 0 30px; padding: 20px 26px;
  border-left: 3px solid var(--accent);
  background: linear-gradient(90deg, color-mix(in srgb, var(--accent) 12%, var(--card)), var(--card));
  border-radius: 0 var(--radius) var(--radius) 0; }
.body code { font-family: var(--ff-mono); font-size: .88em;
  background: #262019; padding: 2px 6px; border-radius: 6px; color: #E8E3DA; }
.body pre { background: var(--panel); color: #e8e8e2; padding: 20px 22px;
  border-radius: var(--radius); overflow-x: auto; margin: 26px 0;
  font-family: var(--ff-mono); font-size: 14px; line-height: 1.6; }
.body pre code { background: none; padding: 0; color: inherit; font-size: inherit; }

/* ------------------------------------------------------------- Admin styles compatibility */
.EasyMDEContainer .CodeMirror,
.EasyMDEContainer .editor-toolbar {
  background-color: var(--panel);
  border-color: var(--line);
  color: var(--ink);
  font-family: var(--ff-mono);
}
.EasyMDEContainer .editor-toolbar a { color: var(--ink) !important; }
.EasyMDEContainer .editor-toolbar a.active,
.EasyMDEContainer .editor-toolbar a:hover {
  background: rgba(16, 185, 129, 0.15);
  border-color: transparent;
}
.EasyMDEContainer .CodeMirror-cursor { border-left-color: var(--accent); }
.editor-preview { background-color: var(--panel); color: var(--ink); }

/* Form styles */
.field {
  width: 100%;
  border-radius: 6px;
  background: var(--card);
  border: 1px solid var(--line);
  padding: 12px 16px;
  color: var(--ink);
  transition: border-color 0.15s ease, background-color 0.15s ease;
}
.field:focus {
  outline: none;
  border-color: var(--accent);
  background: var(--card-2);
}
.field::placeholder { color: var(--ink-3); }

/* Buttons */
.btn-mono {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--ff-head);
  font-size: 13px;
  font-weight: 600;
  border-radius: 6px;
  padding: 11px 20px;
  border: 0;
  cursor: pointer;
  transition: transform 0.15s ease, background-color 0.15s ease, border-color 0.15s ease;
}
.btn-mono:active { transform: scale(0.98); }
.btn-primary {
  background: var(--accent);
  color: var(--accent-ink);
}
.btn-primary:hover { background: color-mix(in srgb, var(--accent) 85%, #fff); }
.btn-ghost {
  border: 1px solid var(--line);
  color: var(--ink);
  background: transparent;
}
.btn-ghost:hover { border-color: var(--accent); color: var(--accent); }

/* ---------------------------------------------------------------------- responsive */
@media (max-width: 900px) {
  .cols-3 { grid-template-columns: repeat(2, 1fr); }
  .hero__panel { min-height: clamp(520px, 96vw, 640px);
    padding: clamp(30px,7vw,46px); justify-content: stretch; align-items: stretch; }
  .hero__l { max-width: 100%; width: 100%; min-width: 0; display: flex; flex-direction: column; flex: 1; }
  .hero__bg { object-position: 64% 38%; }
  .hero__panel::before { background: linear-gradient(180deg,
    #0e0e0d 0%, rgba(14,14,13,.9) 40%,
    rgba(14,14,13,.32) 66%, rgba(14,14,13,.55) 100%); }
  .hero__stage { background:
    radial-gradient(circle at 54% 70%, rgba(16,185,129,.28), transparent 30%),
    linear-gradient(180deg, rgba(14,14,13,.15), rgba(14,14,13,.72)); }
  .hero__panel::after { opacity: .28;
    mask-image: linear-gradient(180deg, transparent, #000 48%, #000);
    -webkit-mask-image: linear-gradient(180deg, transparent, #000 48%, #000); }
  .reading { grid-template-columns: minmax(0,1fr); }
  .toc { display: none; }
}
@media (max-width: 640px) {
  body { font-size: 16px; }
  .cols-3, .cols-2 { grid-template-columns: 1fr; }
  .nav__links { display: none; }
  .sec-head { flex-direction: column; align-items: flex-start; }
  .hero h1 { font-size: 25px; overflow-wrap: break-word; }
  .hero h1 .k { white-space: normal; }
  .hero .sub { max-width: 100%; overflow-wrap: break-word; }
  .art h1 { font-size: 27px; }
  .body { font-size: 17px; line-height: 1.72; }
  .body .lead { font-size: 18.5px; padding: 16px 18px; }
  .body blockquote { padding: 16px 18px; font-size: 17px; }
  .body pre { padding: 15px 16px; font-size: 13px; }
  .art { padding: 18px 0 34px; }
  .reading { padding: 0 18px; }
}

/* ----------------- Hamburger & Drawer for mobile */
.nav__burger { display: inline-flex; flex-direction: column; justify-content: center;
  gap: 5px; width: 44px; height: 42px; margin-left: 14px; padding: 0 11px;
  border: 1px solid var(--line); border-radius: 12px; background: var(--card);
  cursor: pointer; flex: none; transition: border-color .15s, background .15s; }
.nav__burger:hover { border-color: var(--accent); }
.nav__burger span { display: block; height: 2px; width: 100%; border-radius: 2px;
  background: var(--ink); }
@media (min-width: 1024px) { .nav__burger { display: none; } }

body.no-scroll { overflow: hidden; }
.drawer__overlay { position: fixed; inset: 0; z-index: 90;
  background: rgba(0,0,0,.55); animation: drawerFade .2s ease; }
@keyframes drawerFade { from { opacity: 0; } to { opacity: 1; } }

.drawer { position: fixed; top: 0; left: 0; z-index: 100;
  width: min(360px, 86vw); height: 100%;
  display: flex; flex-direction: column;
  background: var(--panel-2); border-right: 1px solid var(--line);
  box-shadow: 0 0 60px -10px rgba(0,0,0,.7);
  transform: translateX(-102%); transition: transform .28s cubic-bezier(.22,1,.36,1); }
.drawer.is-open { transform: translateX(0); }

.drawer__head { display: flex; align-items: center; justify-content: space-between;
  padding: 18px 20px; border-bottom: 1px solid var(--line); flex: none; }
.drawer__close { width: 38px; height: 38px; border: 1px solid var(--line);
  border-radius: 10px; background: var(--card); color: var(--ink);
  font-size: 22px; line-height: 1; cursor: pointer; transition: border-color .15s; }
.drawer__close:hover { border-color: var(--accent); }

.drawer__body { flex: 1; overflow-y: auto; padding: 8px 12px 16px; }
.drawer__list { display: flex; flex-direction: column; }
.drawer__list > a { display: flex; align-items: center; justify-content: space-between;
  padding: 12px; border-radius: 12px; color: var(--ink);
  font-family: var(--ff-head); font-weight: 600; font-size: 16px;
  transition: background .15s; }
.drawer__list > a:hover { background: var(--card); }
.drawer__langs {
  display: grid;
  gap: 7px;
  margin: 14px 0 0;
  padding: 14px 12px 0;
  border-top: 1px solid var(--line);
}
.drawer__langs a {
  border-radius: 10px;
  padding: 10px 12px;
  color: var(--ink-2);
  font-family: var(--ff-head);
  font-size: 14px;
  font-weight: 600;
}
.drawer__langs a:hover,
.drawer__langs a.is-active {
  background: color-mix(in srgb, var(--accent) 14%, transparent);
  color: var(--ink);
}
.drawer__lbl { padding: 16px 12px 6px; font-family: var(--ff-head);
  font-weight: 700; font-size: 11px; letter-spacing: .14em; text-transform: uppercase;
  color: var(--ink-3); }
.drawer__foot { padding: 16px 20px; border-top: 1px solid var(--line); flex: none; }
.drawer__cta { display: flex; align-items: center; justify-content: center; gap: 8px;
  height: 46px; border-radius: 12px; background: var(--accent);
  color: var(--accent-ink); font-family: var(--ff-head); font-weight: 700;
  font-size: 15px; transition: filter .15s, transform .15s; }
.drawer__cta:hover { filter: brightness(1.05); transform: translateY(-1px); }

@media (max-width: 720px) {
  .nav__links { display: none; }
  .nav__pill { display: none; }
  .lang-switch { margin-left: auto; }
  .nav__burger { margin-left: 0; }
}

/* Homepage search bar */
.home-search { position: relative; display: flex; align-items: center; gap: 12px;
  height: 60px; padding: 0 20px; border-radius: 16px;
  border: 1px solid var(--line); background: var(--card);
  box-shadow: 0 1px 0 var(--line), 0 24px 55px -34px rgba(0,0,0,.75);
  transition: border-color .15s; }
.home-search:focus-within { border-color: var(--accent); }
.home-search__ic { width: 22px; height: 22px; color: var(--ink-3); flex: none; }
.home-search input { flex: 1; min-width: 0; height: 100%; border: 0; background: transparent;
  color: var(--ink); font-family: var(--ff-head); font-size: 17px; outline: none; }
.home-search input::placeholder { color: var(--ink-3); }
.home-search__empty { text-align: center; color: var(--ink-3); font-size: 15px; margin: 20px 0 0; }

/* Homepage library toolbar */
.lib-toolbar { display: flex; align-items: center; gap: 14px; flex-wrap: wrap;
  margin: clamp(18px,2.4vw,26px) 0 clamp(22px,2.8vw,32px); }
.lib-toolbar .home-search { flex: 1; min-width: 240px; margin: 0; }
.lib-filters { display: flex; gap: 8px; flex-wrap: wrap; }
.chip { font-family: var(--ff-head); font-weight: 600; font-size: 14px; color: var(--ink-2);
  padding: 10px 16px; border-radius: 999px; border: 1px solid var(--line);
  background: var(--card); cursor: pointer; transition: .15s; }
.chip:hover, .chip.is-active { border-color: var(--accent); color: var(--ink); }
.chip.is-active { background: color-mix(in srgb, var(--accent) 15%, transparent); }

@media (max-width: 640px) {
  .lib-toolbar .home-search { flex: 1 1 100%; }
}

/* ===== copy button checkmark styling ===== */
.copy.is-done svg { display: none; }
.copy.is-done::before {
  content: "✔";
  font-family: var(--ff-head);
  font-weight: 700;
  font-size: 15px;
  color: var(--accent-ink);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  animation: checkCheer .35s cubic-bezier(.2,1.35,.35,1);
}
@keyframes checkCheer {
  0%   { transform: scale(.2); opacity: 0; }
  100% { transform: scale(1); opacity: 1; }
}

/* ===== scroll reveal & card hover polish ===== */
.reveal { opacity: 0; transform: translateY(16px);
  transition: opacity .6s ease, transform .6s cubic-bezier(.22,1,.36,1); }
.reveal.is-in { opacity: 1; transform: none; }
.card { transition: transform .18s, box-shadow .28s; }
.card__cover { overflow: hidden; }
.card__cover img { transition: transform .35s cubic-bezier(.22,1,.36,1); }
.card:hover { box-shadow: 0 26px 60px -36px rgba(0,0,0,.6); }
.card:hover .card__cover img { transform: scale(1.045); }
@media (prefers-reduced-motion: reduce) {
  .reveal { opacity: 1; transform: none; transition: none; }
  .copy.is-done::before { animation: none; }
  .card:hover .card__cover img { transform: none; }
  .hero__bg,
  .hero__stage { transition: none; }
}

/* ===== category vector icons ===== */
.d--ic { width: auto !important; height: auto !important; background: none !important;
  box-shadow: none !important; border-radius: 0 !important; border: 0 !important;
  display: inline-flex; align-items: center; justify-content: center;
  color: var(--accent); vertical-align: middle; }
.d--ic svg { width: 13px; height: 13px; display: block; }
.card__cat .d--ic { width: auto; }
.card__cat--compare .d--ic, .lbl .d--ic, .flag .d--ic { color: var(--accent); }

/* ---------- Blog list (Admin Dashboard compatibility) ---------- */
.post-row {
  display: flex;
  padding: 18px 0;
  border-bottom: 1px solid var(--line);
  transition: padding-left 0.2s ease;
  width: 100%;
}
.post-row:first-child { border-top: 1px solid var(--line); }
.post-row:hover { padding-left: 6px; }
.post-row__date {
  font-family: var(--ff-mono);
  font-size: 11px;
  letter-spacing: 0.02em;
  color: var(--accent);
}

/* ---------- Mini CMS admin dashboard ---------- */
.admin-shell,
.cms-editor {
  width: min(1480px, calc(100% - 32px));
  margin: 0 auto;
  padding: 28px 0 52px;
}
.admin-shell {
  display: grid;
  grid-template-columns: 248px minmax(0, 1fr);
  gap: 24px;
  align-items: start;
}
.admin-side,
.admin-panel,
.editor-card,
.metric-card {
  border: 1px solid var(--line);
  border-radius: 8px;
  background: linear-gradient(180deg, rgba(39,31,23,.92), rgba(32,26,20,.96));
  box-shadow: 0 24px 60px -44px rgba(0,0,0,.8), inset 0 1px 0 rgba(255,255,255,.05);
}
.admin-side {
  position: sticky;
  top: 82px;
  min-height: calc(100dvh - 110px);
  padding: 18px;
  display: flex;
  flex-direction: column;
  gap: 24px;
}
.admin-side h1,
.admin-top h2,
.editor-top h1 {
  font-size: clamp(25px, 3vw, 36px);
  letter-spacing: 0;
}
.admin-kicker {
  margin: 0 0 7px;
  font-family: var(--ff-mono);
  font-size: 11px;
  color: var(--ink-3);
  letter-spacing: .08em;
  text-transform: uppercase;
}
.admin-side__nav {
  display: grid;
  gap: 7px;
}
.admin-side__nav a {
  border-radius: 6px;
  padding: 11px 12px;
  color: var(--ink-2);
  font-family: var(--ff-head);
  font-weight: 600;
  font-size: 14px;
  transition: background .16s, color .16s;
}
.admin-side__nav a:hover,
.admin-side__nav a.is-active {
  background: color-mix(in srgb, var(--accent) 14%, transparent);
  color: var(--ink);
}
.admin-side__note {
  margin-top: auto;
  border-top: 1px solid var(--line);
  padding-top: 16px;
  display: grid;
  gap: 4px;
}
.admin-side__note span,
.admin-muted,
.cms-empty-line {
  color: var(--ink-3);
  font-size: 14px;
}
.admin-side__note strong {
  font-family: var(--ff-mono);
  color: var(--accent);
}
.admin-main {
  display: grid;
  gap: 22px;
  min-width: 0;
}
.admin-top,
.editor-top,
.admin-panel__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
}
.admin-actions {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}
.admin-metrics {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 14px;
}
.metric-card {
  padding: 18px;
  min-height: 132px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}
.metric-card span,
.metric-card small {
  color: var(--ink-3);
  font-size: 13px;
}
.metric-card strong {
  display: block;
  margin: 10px 0;
  font-family: var(--ff-mono);
  font-size: clamp(28px, 3vw, 40px);
  line-height: 1;
  font-variant-numeric: tabular-nums;
  color: var(--ink);
}
.admin-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 300px;
  gap: 18px;
  align-items: start;
}
.editorial-command {
  display: grid;
  grid-template-columns: minmax(280px, .42fr) minmax(0, 1fr);
  gap: 18px;
}
.admin-panel {
  padding: 18px;
  min-width: 0;
}
.admin-panel--content {
  padding: 0;
  overflow: hidden;
}
.admin-panel--content .admin-panel__head {
  padding: 18px;
  border-bottom: 1px solid var(--line);
}
.admin-panel h3,
.editor-section h2 {
  font-size: 19px;
  letter-spacing: 0;
}
.admin-search {
  width: min(360px, 100%);
  height: 42px;
  border-radius: 6px;
  border: 1px solid var(--line);
  background: var(--panel-2);
  color: var(--ink);
  padding: 0 13px;
  outline: none;
}
.admin-search:focus {
  border-color: var(--accent);
}
.cms-tools {
  min-width: min(620px, 100%);
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 10px;
  flex-wrap: wrap;
}
.cms-filters {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 4px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: rgba(12,10,8,.4);
}
.cms-filters button {
  min-height: 32px;
  border: 0;
  border-radius: 6px;
  padding: 0 10px;
  background: transparent;
  color: var(--ink-3);
  cursor: pointer;
  font-family: var(--ff-head);
  font-size: 12px;
  font-weight: 700;
}
.cms-filters button:hover,
.cms-filters button.is-active {
  background: color-mix(in srgb, var(--accent) 14%, transparent);
  color: var(--ink);
}
.cms-table {
  display: grid;
}
.cms-row {
  display: grid;
  grid-template-columns: minmax(220px, 1.3fr) minmax(220px, .8fr) minmax(130px, .65fr) auto;
  gap: 14px;
  align-items: center;
  padding: 15px 18px;
  border-bottom: 1px solid var(--line);
  transition: background .16s;
}
.cms-row:hover {
  background: rgba(255,255,255,.025);
}
.cms-row__title {
  display: flex;
  align-items: flex-start;
  gap: 11px;
  min-width: 0;
}
.cms-row h4 {
  margin: 0;
  font-family: var(--ff-head);
  font-size: 15px;
  line-height: 1.25;
  letter-spacing: 0;
}
.cms-row p {
  margin: 4px 0 0;
  color: var(--ink-3);
  font-family: var(--ff-mono);
  font-size: 12px;
}
.status-dot {
  width: 9px;
  height: 9px;
  border-radius: 3px;
  margin-top: 5px;
  flex: none;
  background: #9CA3AF;
}
.status-dot--published {
  background: var(--accent);
  box-shadow: 0 0 14px color-mix(in srgb, var(--accent) 70%, transparent);
}
.status-dot--draft {
  background: #F59E0B;
}
.cms-row__meta,
.cms-tags,
.cms-row__actions {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}
.cms-row__meta span {
  color: var(--ink-3);
  font-family: var(--ff-mono);
  font-size: 12px;
}
.cms-tags span,
.tag-cloud span {
  border: 1px solid var(--line);
  border-radius: 6px;
  padding: 6px 9px;
  color: var(--ink-2);
  font-size: 12px;
  background: rgba(12,10,8,.42);
}
.cms-tags .cms-chip--ok {
  border-color: rgba(16,185,129,.28);
  color: var(--accent);
  background: rgba(16,185,129,.08);
}
.cms-tags .cms-chip--warn {
  border-color: rgba(245,158,11,.3);
  color: #FBBF24;
  background: rgba(245,158,11,.08);
}
.tag-cloud {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}
.tag-cloud b {
  color: var(--accent);
  font-family: var(--ff-mono);
}
.cms-row__actions {
  justify-content: flex-end;
}
.cms-row__actions a,
.cms-row__actions button {
  border: 1px solid var(--line);
  border-radius: 6px;
  background: transparent;
  color: var(--ink-2);
  padding: 8px 10px;
  font-family: var(--ff-head);
  font-size: 12px;
  cursor: pointer;
  transition: border-color .16s, color .16s, background .16s;
}
.cms-row__actions a:hover,
.cms-row__actions button:hover {
  border-color: var(--accent);
  color: var(--ink);
  background: color-mix(in srgb, var(--accent) 10%, transparent);
}
.cms-row__actions button:hover {
  border-color: #F87171;
  color: #FCA5A5;
}
.cms-empty {
  padding: 40px 18px;
  display: grid;
  gap: 12px;
  justify-items: start;
}
.cms-empty h4 {
  margin: 0;
  font-size: 21px;
}
.cms-empty p {
  margin: 0;
  color: var(--ink-3);
  max-width: 48ch;
}
.cms-empty-line {
  padding: 18px;
  margin: 0;
}
.editorial-score,
.editorial-queue {
  display: grid;
  gap: 16px;
}
.quality-ring {
  width: 168px;
  aspect-ratio: 1;
  display: grid;
  place-items: center;
  justify-self: center;
  border-radius: 999px;
  background:
    radial-gradient(circle at center, rgba(39,31,23,.98) 0 57%, transparent 58%),
    conic-gradient(var(--accent) calc(var(--score) * 1%), rgba(255,255,255,.08) 0);
}
.quality-ring strong {
  color: var(--ink);
  font-family: var(--ff-mono);
  font-size: 42px;
  line-height: 1;
}
.quality-ring span {
  max-width: 92px;
  margin-top: -32px;
  color: var(--ink-3);
  font-size: 12px;
  line-height: 1.25;
  text-align: center;
}
.quality-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
}
.quality-grid span {
  min-height: 62px;
  display: grid;
  align-content: center;
  gap: 4px;
  padding: 10px;
  border: 1px solid rgba(255,255,255,.08);
  border-radius: 8px;
  background: rgba(12,10,8,.34);
  color: var(--ink-3);
  font-size: 12px;
}
.quality-grid b {
  color: var(--ink);
  font-family: var(--ff-mono);
  font-size: 20px;
}
.review-list {
  display: grid;
  gap: 10px;
}
.review-item {
  display: grid;
  gap: 6px;
  min-height: 62px;
  padding: 12px;
  border: 1px solid rgba(255,255,255,.08);
  border-radius: 8px;
  background: rgba(12,10,8,.34);
  transition: border-color .16s, background .16s, transform .16s;
}
.review-item:hover {
  border-color: rgba(16,185,129,.32);
  background: rgba(16,185,129,.07);
  transform: translateY(-1px);
}
.review-item span {
  color: var(--ink);
  font-family: var(--ff-head);
  font-size: 14px;
  font-weight: 700;
}
.review-item small {
  color: var(--ink-3);
  font-size: 12px;
}

/* ---------- CMS editor ---------- */
.cms-editor {
  display: grid;
  gap: 22px;
}
.editor-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 360px;
  gap: 18px;
  align-items: start;
}
.editor-card {
  padding: 18px;
}
.editor-card--main {
  display: grid;
  gap: 18px;
}
.translation-panels {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
}
.translation-panel {
  display: grid;
  gap: 14px;
  padding: 16px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: rgba(12,10,8,.28);
}
.translation-panel h2 {
  font-size: 17px;
  letter-spacing: 0;
}
.translation-body {
  min-height: 260px;
  font-family: var(--ff-mono);
  font-size: 13px;
}
.editor-card--side {
  position: sticky;
  top: 82px;
  display: grid;
  gap: 18px;
}
.editor-section {
  display: grid;
  gap: 14px;
  padding-bottom: 18px;
  border-bottom: 1px solid var(--line);
}
.field-stack {
  display: grid;
  gap: 8px;
}
.field-stack label {
  color: var(--ink-2);
  font-family: var(--ff-head);
  font-size: 13px;
  font-weight: 600;
}
.field-stack small {
  color: var(--ink-3);
  font-size: 12px;
}
.field-counter {
  justify-self: start;
  padding: 4px 7px;
  border: 1px solid rgba(255,255,255,.08);
  border-radius: 6px;
  background: rgba(12,10,8,.3);
  font-family: var(--ff-mono);
}
.field-counter.is-warn {
  border-color: rgba(245,158,11,.35);
  color: #FBBF24;
}
.field--textarea {
  min-height: 92px;
  resize: vertical;
}
.cms-check {
  display: flex;
  align-items: center;
  gap: 10px;
  color: var(--ink-2);
  font-size: 14px;
}
.cms-check input {
  width: 17px;
  height: 17px;
  accent-color: var(--accent);
}
.editor-save {
  width: 100%;
  justify-content: center;
}
.EasyMDEContainer {
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--bg);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.04);
}
.EasyMDEContainer .editor-toolbar {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  padding: 10px 12px;
  border: 0;
  border-bottom: 1px solid rgba(255,255,255,.14);
  border-radius: 8px 8px 0 0;
  background:
    linear-gradient(180deg, rgba(39,31,23,.98), rgba(26,21,17,.98));
  opacity: 1 !important;
}
.EasyMDEContainer .editor-toolbar:hover {
  opacity: 1 !important;
}
.EasyMDEContainer .editor-toolbar a {
  display: inline-grid;
  place-items: center;
  width: 34px;
  height: 34px;
  border: 1px solid transparent;
  border-radius: 6px;
  color: var(--ink-2) !important;
  opacity: 1 !important;
  transition: background .15s, border-color .15s, color .15s;
}
.EasyMDEContainer .editor-toolbar a::before {
  color: currentColor !important;
}
.EasyMDEContainer .editor-toolbar a.active,
.EasyMDEContainer .editor-toolbar a:hover {
  border-color: color-mix(in srgb, var(--accent) 38%, var(--line));
  background: color-mix(in srgb, var(--accent) 13%, transparent);
  color: var(--ink) !important;
}
.EasyMDEContainer .editor-toolbar i.separator {
  width: 1px;
  height: 24px;
  margin: 5px 7px;
  border: 0;
  background: rgba(255,255,255,.2);
}
.EasyMDEContainer .CodeMirror {
  min-height: 430px;
  border: 0;
  border-radius: 0 0 8px 8px;
  background-color: var(--bg);
  background-image: radial-gradient(var(--dot-light) var(--dot-size), transparent var(--dot-size));
  background-size: var(--dot-step) var(--dot-step);
  color: var(--ink);
}
.EasyMDEContainer .CodeMirror-gutters {
  border-right-color: var(--line);
  background: color-mix(in srgb, var(--bg) 88%, #000);
}
.EasyMDEContainer .CodeMirror-selected {
  background: color-mix(in srgb, var(--accent) 20%, transparent) !important;
}
.EasyMDEContainer .CodeMirror-placeholder {
  color: var(--ink-3) !important;
}
.EasyMDEContainer .editor-preview,
.EasyMDEContainer .editor-preview-side {
  padding: 34px 42px;
  border-color: var(--line);
  background-color: var(--bg);
  background-image: radial-gradient(var(--dot-light) var(--dot-size), transparent var(--dot-size));
  background-size: var(--dot-step) var(--dot-step);
  color: #E8E3DA;
  font-family: var(--ff-serif);
  font-size: 19px;
  line-height: 1.75;
}
.EasyMDEContainer .editor-preview > *,
.EasyMDEContainer .editor-preview-side > * {
  max-width: 700px;
}
.EasyMDEContainer .editor-preview > *:first-child,
.EasyMDEContainer .editor-preview-side > *:first-child {
  margin-top: 0;
}
.EasyMDEContainer .editor-preview p,
.EasyMDEContainer .editor-preview-side p {
  margin: 0 0 22px;
}
.EasyMDEContainer .editor-preview h1,
.EasyMDEContainer .editor-preview-side h1 {
  margin: 4px 0 18px;
  color: var(--ink);
  font-family: var(--ff-head);
  font-size: clamp(28px, 3.6vw, 44px);
  line-height: 1.08;
  letter-spacing: 0;
}
.EasyMDEContainer .editor-preview h2,
.EasyMDEContainer .editor-preview-side h2 {
  margin: 48px 0 16px;
  color: var(--ink);
  font-family: var(--ff-head);
  font-size: clamp(23px, 2.6vw, 30px);
  line-height: 1.12;
  letter-spacing: 0;
}
.EasyMDEContainer .editor-preview h3,
.EasyMDEContainer .editor-preview-side h3 {
  margin: 32px 0 12px;
  color: var(--ink);
  font-family: var(--ff-head);
  font-size: 21px;
  letter-spacing: 0;
}
.EasyMDEContainer .editor-preview strong,
.EasyMDEContainer .editor-preview-side strong {
  color: var(--ink);
  font-weight: 600;
}
.EasyMDEContainer .editor-preview a,
.EasyMDEContainer .editor-preview-side a {
  color: var(--ink);
  border-bottom: 2px solid var(--accent);
}
.EasyMDEContainer .editor-preview ul,
.EasyMDEContainer .editor-preview ol,
.EasyMDEContainer .editor-preview-side ul,
.EasyMDEContainer .editor-preview-side ol {
  margin: 0 0 22px;
  padding-left: 24px;
}
.EasyMDEContainer .editor-preview li,
.EasyMDEContainer .editor-preview-side li {
  margin: 0 0 10px;
}
.EasyMDEContainer .editor-preview li::marker,
.EasyMDEContainer .editor-preview-side li::marker {
  color: var(--accent);
}
.EasyMDEContainer .editor-preview blockquote,
.EasyMDEContainer .editor-preview-side blockquote {
  margin: 30px 0;
  padding: 18px 26px;
  border-left: 3px solid var(--accent);
  border-radius: 0 var(--radius) var(--radius) 0;
  background: linear-gradient(90deg, color-mix(in srgb, var(--accent) 12%, var(--card)), var(--card));
  color: var(--ink);
  font-family: var(--ff-serif);
  font-size: 19px;
  font-style: italic;
  font-weight: 500;
  line-height: 1.6;
}
.EasyMDEContainer .editor-preview code,
.EasyMDEContainer .editor-preview-side code {
  padding: 2px 6px;
  border-radius: 6px;
  background: #262019;
  color: #E8E3DA;
  font-family: var(--ff-mono);
  font-size: .88em;
}
.EasyMDEContainer .editor-preview pre,
.EasyMDEContainer .editor-preview-side pre {
  margin: 26px 0;
  padding: 20px 22px;
  overflow-x: auto;
  border-radius: var(--radius);
  background: var(--panel);
  color: #e8e8e2;
  font-family: var(--ff-mono);
  font-size: 14px;
  line-height: 1.6;
}
.EasyMDEContainer .editor-preview pre code,
.EasyMDEContainer .editor-preview-side pre code {
  padding: 0;
  background: none;
  color: inherit;
  font-size: inherit;
}

@media (max-width: 1180px) {
  .admin-shell,
  .editor-layout,
  .admin-grid,
  .editorial-command {
    grid-template-columns: 1fr;
  }
  .translation-panels {
    grid-template-columns: 1fr;
  }
  .admin-side,
  .editor-card--side {
    position: static;
    min-height: auto;
  }
  .admin-side {
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
  }
  .admin-side__nav {
    display: flex;
    flex-wrap: wrap;
  }
  .admin-side__note {
    margin-top: 0;
    border-top: 0;
    padding-top: 0;
  }
}
@media (max-width: 900px) {
  .admin-metrics {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .cms-row {
    grid-template-columns: 1fr;
    align-items: start;
  }
  .cms-row__actions {
    justify-content: flex-start;
  }
}
@media (max-width: 640px) {
  .admin-shell,
  .cms-editor {
    width: min(100% - 24px, 1480px);
    padding-top: 18px;
  }
  .admin-top,
  .editor-top,
  .admin-panel__head,
  .admin-side {
    align-items: flex-start;
    flex-direction: column;
  }
  .admin-metrics {
    grid-template-columns: 1fr;
  }
  .admin-actions,
  .admin-actions .btn-mono,
  .admin-search,
  .cms-tools,
  .cms-filters {
    width: 100%;
  }
  .cms-tools {
    align-items: stretch;
  }
  .cms-filters {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
  .admin-actions .btn-mono {
    justify-content: center;
  }
  .quality-grid {
    grid-template-columns: 1fr;
  }
}

.tag-cloud--stack {
  align-items: flex-start;
  flex-direction: column;
}

.tag-cloud--stack span {
  max-width: 100%;
  overflow-wrap: anywhere;
}

.traffic-lab {
  display: grid;
  grid-template-columns: minmax(0, 1.25fr) minmax(320px, .75fr);
  gap: 18px;
}

.traffic-panel {
  position: relative;
  overflow: hidden;
}

.traffic-panel::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    radial-gradient(circle at 18% 0%, rgba(16,185,129,.16), transparent 32%),
    linear-gradient(135deg, rgba(255,255,255,.045), transparent 38%);
  opacity: .8;
}

.traffic-panel > * {
  position: relative;
  z-index: 1;
}

.traffic-panel--wide {
  grid-column: span 2;
}

.traffic-badge {
  display: inline-flex;
  align-items: center;
  min-height: 34px;
  padding: 9px 12px;
  border: 1px solid rgba(16,185,129,.32);
  border-radius: 999px;
  background: rgba(16,185,129,.08);
  color: var(--accent);
  font-family: var(--ff-mono);
  font-size: 12px;
  font-weight: 800;
}

.traffic-chart {
  min-height: 280px;
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  gap: 12px;
  align-items: end;
  padding-top: 18px;
}

.traffic-chart__day {
  min-width: 0;
  display: grid;
  grid-template-rows: 1fr auto auto auto;
  gap: 8px;
  align-items: end;
}

.traffic-chart__day span {
  position: relative;
  min-height: 170px;
  border: 1px solid rgba(255,255,255,.08);
  border-radius: 10px;
  background: rgba(12,10,8,.42);
  overflow: hidden;
}

.traffic-chart__day span i {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: var(--h);
  border-radius: 10px 10px 0 0;
  background:
    linear-gradient(180deg, rgba(229,189,104,.92), rgba(16,185,129,.74)),
    var(--accent);
  box-shadow: 0 -18px 38px rgba(16,185,129,.22);
}

.traffic-chart__day b,
.traffic-chart__day small,
.traffic-chart__day em {
  min-width: 0;
  text-align: center;
}

.traffic-chart__day b {
  color: var(--ink);
  font-family: var(--ff-mono);
  font-size: 16px;
}

.traffic-chart__day small,
.traffic-chart__day em {
  color: var(--ink-3);
  font-size: 11px;
  font-style: normal;
}

.traffic-funnel,
.traffic-bars {
  display: grid;
  gap: 12px;
}

.traffic-funnel__step,
.traffic-bar {
  position: relative;
  min-height: 54px;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 12px;
  align-items: center;
  padding: 12px;
  border: 1px solid rgba(255,255,255,.08);
  border-radius: 10px;
  background: rgba(12,10,8,.36);
  overflow: hidden;
}

.traffic-funnel__step i,
.traffic-bar i {
  position: absolute;
  inset: auto auto 0 0;
  width: var(--w);
  height: 3px;
  border-radius: 999px;
  background: linear-gradient(90deg, var(--accent), rgba(229,189,104,.9));
  box-shadow: 0 0 24px rgba(16,185,129,.28);
}

.traffic-funnel__step::before,
.traffic-bar::before {
  content: "";
  position: absolute;
  inset: 0 auto 0 0;
  width: var(--w);
  background: linear-gradient(90deg, rgba(16,185,129,.14), transparent);
  pointer-events: none;
}

.traffic-funnel__step span,
.traffic-bar span,
.traffic-ref span {
  min-width: 0;
  overflow: hidden;
  color: var(--ink-2);
  font-size: 13px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.traffic-funnel__step b,
.traffic-bar b,
.traffic-ref b {
  color: var(--ink);
  font-family: var(--ff-mono);
  font-size: 15px;
}

.traffic-bar--device i {
  background: linear-gradient(90deg, rgba(229,189,104,.95), rgba(255,255,255,.64));
}

.traffic-ref {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 9px 2px;
  border-bottom: 1px solid rgba(255,255,255,.08);
}

.ip-log {
  display: grid;
  gap: 12px;
}

.ip-row {
  display: grid;
  grid-template-columns: minmax(210px, .42fr) minmax(140px, .24fr) minmax(0, 1fr);
  gap: 14px;
  align-items: center;
  padding: 14px;
  border: 1px solid rgba(255,255,255,.09);
  border-radius: 12px;
  background: rgba(12,10,8,.42);
}

.ip-row__main {
  min-width: 0;
  display: grid;
  gap: 6px;
}

.ip-row__main strong {
  min-width: 0;
  overflow: hidden;
  color: var(--ink);
  font-family: var(--ff-mono);
  font-size: 16px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.ip-row__main small,
.ip-row p {
  color: var(--ink-3);
  font-size: 12px;
}

.ip-row__bar {
  height: 9px;
  border-radius: 999px;
  background: rgba(255,255,255,.08);
  overflow: hidden;
}

.ip-row__bar i {
  display: block;
  width: var(--w);
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, var(--accent), rgba(229,189,104,.95));
}

.ip-row__stats {
  min-width: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.ip-row__stats span {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 6px 8px;
  border: 1px solid rgba(255,255,255,.08);
  border-radius: 999px;
  color: var(--ink-3);
  font-size: 12px;
  background: rgba(255,255,255,.035);
}

.ip-row__stats b {
  color: var(--accent);
  font-family: var(--ff-mono);
}

.ip-row p {
  grid-column: 1 / -1;
  margin: -4px 0 0;
  overflow-wrap: anywhere;
}

@media (max-width: 980px) {
  .traffic-lab,
  .traffic-panel--wide {
    grid-template-columns: 1fr;
    grid-column: auto;
  }

  .ip-row {
    grid-template-columns: 1fr;
  }

  .traffic-chart {
    min-height: 230px;
    gap: 8px;
  }

  .traffic-chart__day span {
    min-height: 128px;
  }
}

/* ------------------------------------------------ about story refresh */
.story-page--personal {
  --story-pink: #ff4f92;
  --story-orange: #ff9a4d;
  --story-violet: #8a5cff;
  --story-cyan: #28e0d4;
  background:
    radial-gradient(circle at 14% 10%, rgba(255,79,146,.18), transparent 28%),
    radial-gradient(circle at 86% 18%, rgba(40,224,212,.14), transparent 24%),
    linear-gradient(180deg, #120d15 0%, #171014 42%, #0b0a0c 100%);
}
.about-local-nav {
  position: sticky;
  top: 65px;
  z-index: 30;
  border-bottom: 1px solid rgba(255,255,255,.1);
  background: rgba(12,10,12,.58);
  backdrop-filter: blur(14px) saturate(1.25);
}
.about-local-nav__in {
  min-height: 48px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
}
.about-local-nav span,
.about-local-nav a {
  font-family: var(--ff-mono);
  font-size: 11px;
  letter-spacing: .1em;
  text-transform: uppercase;
}
.about-local-nav span {
  color: var(--story-cyan);
}
.about-local-nav div div {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  justify-content: flex-end;
}
.about-local-nav a {
  padding: 7px 10px;
  border: 1px solid rgba(255,255,255,.11);
  border-radius: 999px;
  color: var(--ink-2);
  background: rgba(255,255,255,.035);
  transition: color .16s ease, border-color .16s ease, background .16s ease;
}
.about-local-nav a:hover {
  color: var(--ink);
  border-color: rgba(40,224,212,.38);
  background: rgba(40,224,212,.08);
}
.story-page--personal .story-hero__backdrop {
  background:
    radial-gradient(circle at 70% 18%, rgba(255,79,146,.34), transparent 28%),
    radial-gradient(circle at 82% 68%, rgba(40,224,212,.24), transparent 26%),
    radial-gradient(circle at 38% 82%, rgba(255,154,77,.16), transparent 30%),
    linear-gradient(112deg, rgba(13,9,15,.98) 0%, rgba(27,15,25,.94) 45%, rgba(83,42,135,.34) 100%);
}
.story-page--personal .story-hero__sun {
  background:
    repeating-linear-gradient(180deg, rgba(255,255,255,.15) 0 2px, transparent 2px 18px),
    linear-gradient(135deg, rgba(255,79,146,.78), rgba(255,154,77,.66) 50%, rgba(40,224,212,.28));
  box-shadow: 0 0 80px rgba(255,79,146,.12);
}
.story-hero {
  min-height: min(850px, calc(100dvh - 113px));
}
.story-hero h1 {
  max-width: 12ch;
  text-shadow: 0 18px 54px rgba(0,0,0,.46);
}
.story-kicker {
  color: var(--story-cyan);
}
.story-cta {
  background: linear-gradient(135deg, var(--story-pink), var(--story-orange));
  color: #160b0d;
  box-shadow: 0 18px 40px -20px rgba(255,79,146,.9);
}
.story-cta--ghost {
  background: rgba(255,255,255,.045);
  color: var(--ink);
}
.story-character-card,
.story-poster__frame,
.story-poster__label,
.story-mini-card,
.story-panel,
.story-panel__media,
.story-stack__sticky,
.story-stack__visual,
.story-stat,
.story-final__panel,
.story-note,
.story-service-note {
  border-radius: 8px;
}
.story-character-card small {
  color: var(--ink-2);
  font-family: var(--ff-mono);
  font-size: 11px;
  letter-spacing: .08em;
  text-transform: uppercase;
}
.story-poster__label {
  max-width: 280px;
}
.story-poster__label b {
  font-size: 17px;
  line-height: 1.25;
}
.story-strip {
  background: linear-gradient(90deg, rgba(255,79,146,.1), rgba(12,10,8,.7), rgba(40,224,212,.1));
}
.story-duo {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(260px, 360px);
  gap: clamp(24px, 5vw, 72px);
  align-items: end;
}
.story-note,
.story-service-note {
  border: 1px solid rgba(255,255,255,.12);
  background:
    linear-gradient(145deg, rgba(255,79,146,.12), rgba(40,224,212,.06)),
    rgba(12,10,8,.5);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.06);
}
.story-note {
  padding: 22px;
}
.story-note span {
  color: var(--story-orange);
  font-family: var(--ff-mono);
  font-size: 11px;
  letter-spacing: .14em;
}
.story-note h3 {
  margin-top: 14px;
  font-family: var(--ff-head);
  font-size: 24px;
  letter-spacing: 0;
}
.story-note p,
.story-service-note p {
  margin: 14px 0 0;
  color: var(--ink-2);
  line-height: 1.7;
}
.story-card-grid {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}
.story-mini-card {
  background:
    linear-gradient(145deg, rgba(33,22,32,.88), rgba(12,10,12,.72)),
    radial-gradient(circle at 100% 0%, rgba(255,79,146,.16), transparent 40%);
}
.story-mini-card:hover,
.story-panel:hover,
.story-stat:hover {
  border-color: rgba(40,224,212,.38);
  transform: translateY(-4px);
}
.story-panel {
  transition: transform .18s ease, border-color .18s ease, box-shadow .18s ease;
  background:
    linear-gradient(135deg, rgba(34,22,35,.78), rgba(11,10,12,.8)),
    radial-gradient(circle at 100% 0%, rgba(255,154,77,.1), transparent 34%),
    radial-gradient(var(--dot-light) var(--dot-size), transparent var(--dot-size));
  background-size: auto, auto, var(--dot-step) var(--dot-step);
}
.story-panel__media {
  background:
    linear-gradient(145deg, rgba(255,79,146,.76), rgba(255,154,77,.42) 48%, rgba(40,224,212,.38)),
    repeating-linear-gradient(135deg, rgba(255,255,255,.16) 0 1px, transparent 1px 14px);
}
.story-tag,
.story-mini-card span {
  color: var(--story-cyan);
}
.story-stack__sticky {
  background:
    linear-gradient(125deg, rgba(12,10,12,.95), rgba(34,22,35,.9) 58%, rgba(40,224,212,.12)),
    radial-gradient(var(--dot-light) var(--dot-size), transparent var(--dot-size));
  background-size: auto, var(--dot-step) var(--dot-step);
}
.story-stack__visual {
  background:
    linear-gradient(90deg, rgba(255,255,255,.08) 1px, transparent 1px),
    linear-gradient(rgba(255,255,255,.08) 1px, transparent 1px),
    radial-gradient(circle at 34% 32%, rgba(255,79,146,.38), transparent 24%),
    linear-gradient(145deg, rgba(40,224,212,.42), rgba(13,10,14,.16));
  background-size: 48px 48px, 48px 48px, auto, auto;
}
.story-orbit--a {
  border-color: rgba(40,224,212,.7);
}
.story-orbit--b {
  border-color: rgba(255,154,77,.42);
}
.story-orbit--c {
  border-color: rgba(255,79,146,.48);
}
.story-stats {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}
.story-stat {
  transition: transform .18s ease, border-color .18s ease;
}
.story-stat b {
  font-size: clamp(16px, 1.65vw, 23px);
}
.story-service-note {
  max-width: 880px;
  padding: clamp(24px, 4vw, 42px);
}
.story-service-note h2 {
  font-family: var(--ff-display);
  font-size: clamp(30px, 4.2vw, 56px);
  line-height: 1;
  letter-spacing: -.035em;
}
.story-final__panel {
  background:
    radial-gradient(circle at 78% 18%, rgba(255,79,146,.2), transparent 28%),
    linear-gradient(105deg, rgba(40,224,212,.16), transparent 44%),
    linear-gradient(180deg, #211522, #171014);
}
@media (max-width: 980px) {
  .about-local-nav {
    top: 61px;
  }
  .story-duo,
  .story-stack__sticky {
    grid-template-columns: 1fr;
  }
  .story-stats {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
@media (max-width: 720px) {
  .about-local-nav {
    position: relative;
    top: auto;
  }
  .about-local-nav__in {
    align-items: flex-start;
    flex-direction: column;
    padding-top: 12px;
    padding-bottom: 12px;
  }
  .about-local-nav div div {
    justify-content: flex-start;
  }
  .story-hero {
    padding-top: 30px;
  }
  .story-poster__label {
    right: 0;
    max-width: 230px;
  }
  .story-card-grid,
  .story-stats {
    grid-template-columns: 1fr;
  }
  .story-section,
  .story-duo {
    padding-left: 18px;
    padding-right: 18px;
  }
}
@media (max-width: 460px) {
  .story-actions,
  .story-actions .story-cta {
    width: 100%;
  }
  .story-poster {
    min-height: 320px;
  }
  .story-character-card {
    width: 68%;
  }
  .story-poster__label b {
    font-size: 15px;
  }
}

/* ------------------------------------------------ route three mission map */
.story-route {
  position: relative;
}
.story-route__head {
  position: relative;
  z-index: 2;
}
.story-route__stage {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(320px, .85fr);
  gap: clamp(18px, 3vw, 34px);
  align-items: stretch;
  min-height: clamp(640px, 76vw, 860px);
}
.story-route__canvas-wrap {
  position: sticky;
  top: 128px;
  height: min(720px, calc(100dvh - 154px));
  min-height: 520px;
  overflow: hidden;
  border: 1px solid rgba(255,255,255,.13);
  border-radius: 8px;
  background:
    radial-gradient(circle at 30% 20%, rgba(255,79,146,.18), transparent 28%),
    radial-gradient(circle at 72% 78%, rgba(40,224,212,.16), transparent 26%),
    linear-gradient(145deg, rgba(18,10,20,.96), rgba(8,8,10,.98));
  box-shadow: 0 34px 90px -54px rgba(0,0,0,.95), inset 0 1px 0 rgba(255,255,255,.08);
}
.story-route__canvas-wrap::before,
.story-route__canvas-wrap::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
}
.story-route__canvas-wrap::before {
  z-index: 1;
  background:
    linear-gradient(90deg, rgba(255,255,255,.04) 1px, transparent 1px),
    linear-gradient(rgba(255,255,255,.035) 1px, transparent 1px);
  background-size: 54px 54px;
  mask-image: linear-gradient(180deg, rgba(0,0,0,.95), rgba(0,0,0,.26));
  -webkit-mask-image: linear-gradient(180deg, rgba(0,0,0,.95), rgba(0,0,0,.26));
}
.story-route__canvas-wrap::after {
  z-index: 2;
  background:
    linear-gradient(180deg, rgba(8,8,10,.04), rgba(8,8,10,.24)),
    repeating-linear-gradient(180deg, rgba(255,255,255,.035) 0 1px, transparent 1px 9px);
  mix-blend-mode: screen;
  opacity: .5;
}
.story-route__canvas {
  position: relative;
  z-index: 0;
  display: block;
  width: 100%;
  height: 100%;
}
.story-route__hud {
  position: absolute;
  z-index: 3;
  left: 18px;
  right: 18px;
  bottom: 18px;
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 16px;
  padding: 14px 16px;
  border: 1px solid rgba(255,255,255,.14);
  border-radius: 8px;
  background: rgba(8,8,10,.58);
  backdrop-filter: blur(14px);
}
.story-route__hud span {
  color: var(--story-cyan);
  font-family: var(--ff-mono);
  font-size: 11px;
  letter-spacing: .14em;
}
.story-route__hud b {
  max-width: 22ch;
  color: var(--ink);
  font-family: var(--ff-head);
  font-size: clamp(17px, 2vw, 25px);
  line-height: 1.05;
  text-align: right;
}
.story-route__feed {
  display: grid;
  gap: 12px;
  align-content: start;
  padding: 6px 0;
}
.story-route-card,
.story-route-card:nth-child(even) {
  grid-template-columns: 88px minmax(0, 1fr);
  gap: 16px;
  min-height: 0;
  padding: 16px;
  border-color: rgba(255,255,255,.1);
  background:
    linear-gradient(135deg, rgba(255,255,255,.055), rgba(255,255,255,.018)),
    rgba(10,9,12,.6);
  backdrop-filter: blur(10px);
  cursor: default;
}
.story-route-card:nth-child(even) .story-panel__media {
  order: 0;
}
.story-route-card .story-panel__media {
  min-height: 92px;
  border: 1px solid rgba(255,255,255,.12);
  background:
    radial-gradient(circle at 35% 25%, rgba(255,255,255,.22), transparent 24%),
    linear-gradient(145deg, rgba(255,79,146,.58), rgba(255,154,77,.34) 48%, rgba(40,224,212,.3));
}
.story-route-card .story-panel__media::before {
  inset: 10px;
  border-color: rgba(255,255,255,.2);
}
.story-route-card .story-panel__media::after {
  inset: 20% -30% 20% 34%;
  background: rgba(8,8,10,.28);
}
.story-route-card .story-panel__number {
  left: 10px;
  bottom: 5px;
  color: rgba(8,8,10,.62);
  font-size: 46px;
  letter-spacing: -.06em;
}
.story-route-card .story-panel__glow {
  right: 10px;
  top: 10px;
  width: 34%;
  height: 36%;
}
.story-route-card .story-panel__body h2 {
  font-family: var(--ff-head);
  font-size: clamp(19px, 2vw, 25px);
  line-height: 1.08;
  letter-spacing: 0;
}
.story-route-card .story-panel__body p {
  margin-top: 10px;
  font-size: 14.5px;
  line-height: 1.55;
}
.story-route-card .story-panel__body .story-tag {
  margin-bottom: 8px;
}
.story-route-card.is-active {
  border-color: rgba(40,224,212,.54);
  background:
    linear-gradient(135deg, rgba(40,224,212,.14), rgba(255,79,146,.08)),
    rgba(10,9,12,.78);
  box-shadow: 0 18px 46px -34px rgba(40,224,212,.9), inset 0 1px 0 rgba(255,255,255,.12);
}
.story-route-card.is-active .story-panel__media {
  box-shadow: 0 0 34px -18px rgba(40,224,212,.9), inset 0 0 0 1px rgba(255,255,255,.16);
}
.story-route.is-three-ready .story-route__canvas-wrap {
  border-color: rgba(40,224,212,.25);
}
.story-route.is-three-ready .story-route-card {
  opacity: .74;
}
.story-route.is-three-ready .story-route-card.is-active,
.story-route.is-three-ready .story-route-card:hover {
  opacity: 1;
}
@media (max-width: 1040px) {
  .story-route__stage {
    grid-template-columns: 1fr;
    min-height: auto;
  }
  .story-route__canvas-wrap {
    position: relative;
    top: auto;
    height: 540px;
    min-height: 420px;
  }
  .story-route__feed {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
@media (max-width: 720px) {
  .story-route__canvas-wrap {
    height: 430px;
    min-height: 360px;
  }
  .story-route__hud {
    align-items: flex-start;
    flex-direction: column;
  }
  .story-route__hud b {
    text-align: left;
  }
  .story-route__feed {
    grid-template-columns: 1fr;
  }
  .story-route-card,
  .story-route-card:nth-child(even) {
    grid-template-columns: 72px minmax(0, 1fr);
    padding: 13px;
  }
  .story-route-card .story-panel__media {
    min-height: 78px;
  }
  .story-route-card .story-panel__number {
    font-size: 38px;
  }
}

/* ------------------------------------------------ toned-down learning path pass */
.story-page--personal {
  --story-pink: #d6788b;
  --story-orange: #d99a5f;
  --story-violet: #8f82bf;
  --story-cyan: #7ccfc1;
  background:
    radial-gradient(circle at 14% 10%, rgba(214,120,139,.08), transparent 30%),
    radial-gradient(circle at 86% 18%, rgba(124,207,193,.08), transparent 25%),
    linear-gradient(180deg, #151116 0%, #171213 46%, #0d0c0d 100%);
}
.story-page--personal .story-hero__backdrop {
  background:
    radial-gradient(circle at 70% 18%, rgba(214,120,139,.16), transparent 30%),
    radial-gradient(circle at 82% 68%, rgba(124,207,193,.12), transparent 28%),
    radial-gradient(circle at 38% 82%, rgba(217,154,95,.1), transparent 32%),
    linear-gradient(112deg, rgba(15,12,16,.98) 0%, rgba(27,20,23,.94) 48%, rgba(74,62,103,.18) 100%);
}
.story-page--personal .story-hero__sun {
  opacity: .42;
  filter: saturate(.82);
  background:
    repeating-linear-gradient(180deg, rgba(255,255,255,.1) 0 2px, transparent 2px 18px),
    linear-gradient(135deg, rgba(214,120,139,.48), rgba(217,154,95,.44) 52%, rgba(124,207,193,.18));
  box-shadow: none;
}
.story-kicker,
.story-tag,
.story-mini-card span,
.about-local-nav span {
  color: #9ed8ce;
}
.story-cta {
  background: linear-gradient(135deg, #d6788b, #d99a5f);
  box-shadow: 0 16px 34px -24px rgba(214,120,139,.65);
}
.story-strip {
  background: linear-gradient(90deg, rgba(214,120,139,.055), rgba(12,10,8,.7), rgba(124,207,193,.055));
}
.story-mini-card,
.story-note,
.story-service-note,
.story-final__panel {
  box-shadow: inset 0 1px 0 rgba(255,255,255,.045);
}
.story-route__stage {
  grid-template-columns: minmax(0, 1fr) minmax(300px, .72fr);
}
.story-route__canvas-wrap {
  background:
    radial-gradient(circle at 42% 18%, rgba(240,210,138,.11), transparent 30%),
    radial-gradient(circle at 72% 76%, rgba(124,207,193,.1), transparent 28%),
    linear-gradient(180deg, rgba(27,22,20,.96), rgba(12,12,13,.98));
  box-shadow: 0 30px 78px -58px rgba(0,0,0,.9), inset 0 1px 0 rgba(255,255,255,.075);
}
.story-route__canvas-wrap::before {
  opacity: .42;
  background:
    radial-gradient(rgba(255,255,255,.08) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.025) 1px, transparent 1px),
    linear-gradient(rgba(255,255,255,.025) 1px, transparent 1px);
  background-size: 28px 28px, 84px 84px, 84px 84px;
}
.story-route__canvas-wrap::after {
  opacity: .24;
  mix-blend-mode: normal;
}
.story-route__hud {
  border-color: rgba(255,255,255,.12);
  background: rgba(18,16,15,.68);
}
.story-route__hud span {
  color: #f0d28a;
}
.story-route-card,
.story-route-card:nth-child(even) {
  grid-template-columns: 70px minmax(0, 1fr);
  align-items: center;
  border-color: rgba(255,255,255,.1);
  background:
    linear-gradient(135deg, rgba(255,255,255,.045), rgba(255,255,255,.018)),
    rgba(18,16,15,.62);
}
.story-route-card:hover,
.story-route-card.is-active {
  border-color: rgba(240,210,138,.4);
  background:
    linear-gradient(135deg, rgba(240,210,138,.095), rgba(124,207,193,.055)),
    rgba(18,16,15,.78);
  box-shadow: 0 16px 42px -36px rgba(240,210,138,.58), inset 0 1px 0 rgba(255,255,255,.1);
}
.story-route-card .story-panel__media {
  width: 64px;
  height: 64px;
  min-height: 64px;
  border-radius: 999px;
  border: 2px solid rgba(255,255,255,.16);
  background:
    radial-gradient(circle at 35% 28%, rgba(255,255,255,.34), transparent 28%),
    linear-gradient(145deg, #88c9a1, #7ccfc1 58%, #e6c06f);
  box-shadow: 0 10px 26px -22px rgba(124,207,193,.8), inset 0 -10px 18px rgba(0,0,0,.14);
}
.story-route-card:nth-child(2n) .story-panel__media {
  background:
    radial-gradient(circle at 35% 28%, rgba(255,255,255,.34), transparent 28%),
    linear-gradient(145deg, #e8a45f, #d9b76f 58%, #89c7b8);
}
.story-route-card:nth-child(3n) .story-panel__media {
  background:
    radial-gradient(circle at 35% 28%, rgba(255,255,255,.34), transparent 28%),
    linear-gradient(145deg, #9fb8dd, #8f82bf 58%, #e8a45f);
}
.story-route-card .story-panel__media::before,
.story-route-card .story-panel__media::after,
.story-route-card .story-panel__glow {
  display: none;
}
.story-route-card .story-panel__number {
  inset: 0;
  display: grid;
  place-items: center;
  color: rgba(19,15,14,.74);
  font-family: var(--ff-head);
  font-size: 20px;
  letter-spacing: 0;
}
.story-route-card .story-panel__body h2 {
  font-size: clamp(18px, 1.75vw, 22px);
}
.story-route-card .story-panel__body p {
  color: rgba(243,238,231,.68);
}
.story-route.is-three-ready .story-route__canvas-wrap {
  border-color: rgba(240,210,138,.22);
}
.story-route.is-three-ready .story-route-card {
  opacity: .82;
}
.story-route.is-three-ready .story-route-card.is-active {
  opacity: 1;
}
@media (max-width: 720px) {
  .story-route-card,
  .story-route-card:nth-child(even) {
    grid-template-columns: 60px minmax(0, 1fr);
  }
  .story-route-card .story-panel__media {
    width: 54px;
    height: 54px;
    min-height: 54px;
  }
  .story-route-card .story-panel__number {
    font-size: 17px;
  }
}

/* keep learning path single-column after toned overrides */
@media (max-width: 1040px) {
  .story-route__stage {
    grid-template-columns: 1fr;
  }
}
@media (max-width: 720px) {
  .story-route__stage {
    grid-template-columns: 1fr;
  }
}

/* ------------------------------------------------ continuous learning path, no cards */
.learning-route {
  position: relative;
  overflow: visible;
  --route-shift: 0px;
  --route-tilt: 0deg;
}
.learning-route__head {
  position: relative;
  z-index: 3;
  max-width: 760px;
}
.learning-route__path {
  position: relative;
  min-height: 1560px;
  margin-top: clamp(18px, 4vw, 42px);
  isolation: isolate;
  transform: translateY(calc(var(--route-shift) * .18));
}
.learning-route__path::before {
  content: "";
  position: absolute;
  inset: 2% 10% 4%;
  z-index: -2;
  background:
    radial-gradient(circle at 52% 12%, rgba(240,210,138,.08), transparent 24%),
    radial-gradient(circle at 30% 52%, rgba(124,207,193,.07), transparent 25%),
    radial-gradient(circle at 66% 88%, rgba(214,120,139,.055), transparent 24%);
  filter: blur(2px);
}
.learning-route__line {
  position: absolute;
  inset: 0 16% 0 16%;
  width: 68%;
  height: 100%;
  overflow: visible;
  transform: translateY(calc(var(--route-shift) * -.12)) rotate(var(--route-tilt));
  transform-origin: 50% 50%;
}
.learning-route__line path {
  fill: none;
  stroke: rgba(240,210,138,.72);
  stroke-width: 18;
  stroke-linecap: round;
  filter: drop-shadow(0 18px 22px rgba(0,0,0,.26));
}
.learning-route__line path + path {
  stroke-width: 3;
  stroke: rgba(255,255,255,.18);
}
.learning-step {
  position: absolute;
  z-index: 2;
  display: grid;
  grid-template-columns: 92px minmax(0, 330px);
  gap: 20px;
  align-items: center;
  width: min(520px, 48%);
  transform: translate3d(0, calc(var(--step-shift, 0px) + var(--route-shift) * var(--depth, .08)), 0);
  transition: opacity .24s ease, transform .24s ease;
}
.learning-step__node {
  position: relative;
  width: 82px;
  height: 82px;
  display: grid;
  place-items: center;
  border-radius: 999px;
  background:
    radial-gradient(circle at 34% 26%, rgba(255,255,255,.36), transparent 28%),
    linear-gradient(145deg, #88c9a1, #7ccfc1 58%, #e6c06f);
  border: 3px solid rgba(255,255,255,.16);
  box-shadow: 0 18px 38px -30px rgba(124,207,193,.8), inset 0 -13px 22px rgba(0,0,0,.16);
}
.learning-step__node::after {
  content: "";
  position: absolute;
  inset: -10px;
  border: 1px solid rgba(240,210,138,.24);
  border-radius: inherit;
  opacity: 0;
  transform: scale(.88);
  transition: opacity .2s ease, transform .2s ease;
}
.learning-step__node span {
  color: rgba(17,16,13,.72);
  font-family: var(--ff-head);
  font-size: 23px;
  font-weight: 800;
  line-height: 1;
}
.learning-step__copy {
  max-width: 34ch;
}
.learning-step__copy span {
  display: inline-flex;
  color: #9ed8ce;
  font-family: var(--ff-mono);
  font-size: 11px;
  letter-spacing: .12em;
  text-transform: uppercase;
}
.learning-step__copy h3 {
  margin: 8px 0 0;
  font-family: var(--ff-display);
  font-size: clamp(22px, 3vw, 36px);
  line-height: 1;
  letter-spacing: -.03em;
  text-wrap: balance;
}
.learning-step__copy p {
  margin: 10px 0 0;
  color: rgba(243,238,231,.72);
  font-size: clamp(15px, 1.2vw, 17px);
  line-height: 1.58;
}
.learning-step.is-active .learning-step__node::after {
  opacity: 1;
  transform: scale(1);
}
.learning-step.is-active .learning-step__copy h3 {
  color: #fff8ec;
}
.learning-step--1 { left: 43%; top: 0%; --depth: -.04; }
.learning-step--2 { left: 10%; top: 15%; --depth: .09; }
.learning-step--3 { left: 47%; top: 29%; --depth: -.06; }
.learning-step--4 { left: 12%; top: 43%; --depth: .11; }
.learning-step--5 { left: 46%; top: 57%; --depth: -.1; }
.learning-step--6 { left: 9%; top: 71%; --depth: .08; }
.learning-step--7 { left: 44%; top: 86%; --depth: -.05; }
.learning-step--2,
.learning-step--4,
.learning-step--6 {
  grid-template-columns: minmax(0, 330px) 92px;
  text-align: right;
}
.learning-step--2 .learning-step__node,
.learning-step--4 .learning-step__node,
.learning-step--6 .learning-step__node {
  order: 2;
}
.learning-step--2 .learning-step__copy,
.learning-step--4 .learning-step__copy,
.learning-step--6 .learning-step__copy {
  justify-self: end;
}
.learning-step:nth-of-type(3n) .learning-step__node {
  background:
    radial-gradient(circle at 34% 26%, rgba(255,255,255,.34), transparent 28%),
    linear-gradient(145deg, #e8a45f, #d9b76f 58%, #89c7b8);
}
.learning-step:nth-of-type(4n) .learning-step__node {
  background:
    radial-gradient(circle at 34% 26%, rgba(255,255,255,.34), transparent 28%),
    linear-gradient(145deg, #9fb8dd, #8f82bf 58%, #e8a45f);
}
@media (max-width: 980px) {
  .learning-route__path {
    min-height: 1520px;
  }
  .learning-route__line {
    inset: 0 6% 0 6%;
    width: 88%;
  }
  .learning-step,
  .learning-step--2,
  .learning-step--4,
  .learning-step--6 {
    width: min(560px, 86%);
    grid-template-columns: 76px minmax(0, 1fr);
    text-align: left;
  }
  .learning-step--2 .learning-step__node,
  .learning-step--4 .learning-step__node,
  .learning-step--6 .learning-step__node {
    order: 0;
  }
  .learning-step--2 .learning-step__copy,
  .learning-step--4 .learning-step__copy,
  .learning-step--6 .learning-step__copy {
    justify-self: start;
  }
  .learning-step__node {
    width: 68px;
    height: 68px;
  }
  .learning-step__node span {
    font-size: 19px;
  }
  .learning-step--1 { left: 18%; top: 0%; }
  .learning-step--2 { left: 4%; top: 15%; }
  .learning-step--3 { left: 16%; top: 29%; }
  .learning-step--4 { left: 4%; top: 43%; }
  .learning-step--5 { left: 16%; top: 57%; }
  .learning-step--6 { left: 4%; top: 71%; }
  .learning-step--7 { left: 14%; top: 86%; }
}
@media (max-width: 560px) {
  .learning-route__path {
    min-height: 1640px;
  }
  .learning-route__line {
    inset: 0 auto 0 7px;
    width: 130px;
    opacity: .72;
  }
  .learning-route__line path {
    stroke-width: 14;
  }
  .learning-step,
  .learning-step--2,
  .learning-step--4,
  .learning-step--6 {
    left: 0;
    width: 100%;
    grid-template-columns: 62px minmax(0, 1fr);
    gap: 14px;
  }
  .learning-step__node {
    width: 58px;
    height: 58px;
  }
  .learning-step__node span {
    font-size: 16px;
  }
  .learning-step__copy h3 {
    font-size: 22px;
  }
  .learning-step__copy p {
    font-size: 14.5px;
  }
}

/* ------------------------------------------------ cinematic route scroll */
.route-cinema {
  position: relative;
  margin: clamp(60px, 9vw, 130px) 0 clamp(56px, 8vw, 110px);
  overflow: clip;
  background:
    radial-gradient(circle at 18% 8%, rgba(217,154,95,.08), transparent 24%),
    linear-gradient(180deg, rgba(15,12,16,0), rgba(10,9,10,.72) 10%, rgba(10,9,10,.86) 88%, rgba(15,12,16,0));
}
.route-cinema__head {
  position: relative;
  z-index: 4;
  padding-top: clamp(34px, 5vw, 72px);
  padding-bottom: clamp(14px, 3vw, 28px);
}
.route-cinema__head h2 {
  max-width: 960px;
  font-family: var(--ff-display);
  font-size: clamp(40px, 7vw, 94px);
  line-height: .92;
  letter-spacing: -.045em;
}
.route-cinema__scroll {
  position: relative;
  min-height: calc(100vh * 7);
}
.route-cinema__pin {
  position: sticky;
  top: 0;
  height: 100vh;
  min-height: 680px;
  overflow: hidden;
  background: #0c0b0c;
}
.route-cinema__media,
.route-cinema__photo,
.route-cinema__photo img,
.route-cinema__wash,
.route-cinema__grain {
  position: absolute;
  inset: 0;
}
.route-cinema__photo {
  opacity: 0;
  transform: scale(1.08);
  transition: opacity .5s ease;
}
.route-cinema__photo.is-active {
  opacity: 1;
}
.route-cinema__photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: saturate(.78) contrast(1.08) brightness(.72);
  transform: scale(1.04);
}
.route-cinema__wash {
  z-index: 2;
  pointer-events: none;
  background:
    linear-gradient(90deg, rgba(8,7,8,.92) 0%, rgba(8,7,8,.66) 34%, rgba(8,7,8,.22) 62%, rgba(8,7,8,.78) 100%),
    linear-gradient(180deg, rgba(8,7,8,.38), rgba(8,7,8,.12) 48%, rgba(8,7,8,.76)),
    radial-gradient(circle at 68% 28%, rgba(217,154,95,.14), transparent 26%);
}
.route-cinema__grain {
  z-index: 3;
  pointer-events: none;
  opacity: .32;
  background:
    repeating-linear-gradient(180deg, rgba(255,255,255,.04) 0 1px, transparent 1px 7px),
    radial-gradient(rgba(255,255,255,.08) .8px, transparent .8px);
  background-size: auto, 18px 18px;
  mix-blend-mode: overlay;
}
.route-cinema__chapters {
  position: relative;
  z-index: 5;
  margin-top: -100vh;
}
.route-cinema__scene {
  min-height: 100vh;
  display: flex;
  align-items: center;
  padding: clamp(80px, 10vw, 150px) 0;
}
.route-cinema__scene:nth-child(even) {
  justify-content: flex-end;
}
.route-cinema__copy {
  width: min(760px, 78vw);
  transform: translate3d(0, 22px, 0);
  will-change: transform, opacity;
}
.route-cinema__copy span {
  display: inline-flex;
  margin-bottom: 16px;
  color: #f0d28a;
  font-family: var(--ff-mono);
  font-size: 12px;
  letter-spacing: .14em;
  text-transform: uppercase;
}
.route-cinema__copy h3 {
  max-width: 11ch;
  font-family: var(--ff-display);
  font-size: clamp(46px, 8.7vw, 128px);
  line-height: .86;
  letter-spacing: -.065em;
  text-wrap: balance;
  text-shadow: 0 20px 58px rgba(0,0,0,.52);
}
.route-cinema__copy p {
  max-width: 540px;
  margin: 24px 0 0;
  color: rgba(243,238,231,.8);
  font-size: clamp(17px, 1.5vw, 21px);
  line-height: 1.62;
  text-shadow: 0 12px 38px rgba(0,0,0,.72);
}
.route-cinema__scene:nth-child(even) .route-cinema__copy h3,
.route-cinema__scene:nth-child(even) .route-cinema__copy p {
  margin-left: auto;
}
.route-cinema__scene:nth-child(even) .route-cinema__copy {
  text-align: right;
}
@media (max-width: 860px) {
  .route-cinema__pin {
    min-height: 620px;
  }
  .route-cinema__wash {
    background:
      linear-gradient(180deg, rgba(8,7,8,.86), rgba(8,7,8,.22) 38%, rgba(8,7,8,.82)),
      linear-gradient(90deg, rgba(8,7,8,.8), rgba(8,7,8,.28));
  }
  .route-cinema__scene,
  .route-cinema__scene:nth-child(even) {
    justify-content: flex-start;
  }
  .route-cinema__scene:nth-child(even) .route-cinema__copy {
    text-align: left;
  }
  .route-cinema__scene:nth-child(even) .route-cinema__copy h3,
  .route-cinema__scene:nth-child(even) .route-cinema__copy p {
    margin-left: 0;
  }
  .route-cinema__copy {
    width: min(100%, 640px);
  }
  .route-cinema__copy h3 {
    max-width: 9.5ch;
    font-size: clamp(42px, 15vw, 72px);
  }
}
@media (max-width: 560px) {
  .route-cinema {
    margin-top: 48px;
  }
  .route-cinema__pin {
    min-height: 560px;
  }
  .route-cinema__scene {
    min-height: 92vh;
    padding: 92px 0;
  }
  .route-cinema__copy p {
    max-width: 30ch;
    font-size: 15.5px;
  }
}

/* route cinema sticky bugfix: keep media pinned with text */
.route-cinema {
  overflow: visible;
}
.route-cinema__scroll {
  isolation: isolate;
}
.route-cinema__pin {
  z-index: 1;
  transform: translateZ(0);
}
.route-cinema__chapters {
  z-index: 3;
}
.story-page--personal {
  overflow: visible;
}
body {
  overflow-x: hidden;
}


/* ============================================================
   Awwwards About redesign CSS — appended without removing home styles
   ============================================================ */


/* --- assets/css/variables.css --- */
:root{--bg:#070707;--bg2:#0d0c0a;--panel:#11100e;--panel2:#171512;--glass:rgba(255,255,255,.065);--glass2:rgba(255,255,255,.11);--ink:#f6f1e8;--muted:#b8afa1;--dim:#756e64;--line:rgba(255,255,255,.13);--accent:#10b981;--accent2:#d9ff78;--danger:#ff6b4a;--shadow:0 30px 90px rgba(0,0,0,.5);--radius:24px;--radius-lg:40px;--maxw:1480px;--pad:clamp(20px,4vw,64px);--display:"Unbounded","Onest",system-ui,sans-serif;--sans:"Onest","Inter",system-ui,sans-serif;--body:"Inter",system-ui,sans-serif;--serif:"Lora",Georgia,serif;--mono:"JetBrains Mono",ui-monospace,monospace;--ease:cubic-bezier(.19,1,.22,1)}


/* --- assets/css/base.css --- */
*{box-sizing:border-box}html{background:var(--bg);color-scheme:dark;scroll-behavior:auto;-webkit-text-size-adjust:100%}body{margin:0;min-height:100vh;background:radial-gradient(circle at 20% 0%,rgba(16,185,129,.11),transparent 34%),linear-gradient(180deg,var(--bg),#0b0908 48%,var(--bg));color:var(--ink);font-family:var(--body);font-size:17px;line-height:1.55;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;overflow-x:hidden}body.no-scroll{overflow:hidden}a{color:inherit;text-decoration:none}img,svg,canvas{display:block;max-width:100%}button,input{font:inherit}button{color:inherit}::selection{background:var(--accent);color:#05110d}.skip-link{position:fixed;left:16px;top:12px;z-index:999;padding:10px 14px;border-radius:999px;background:var(--ink);color:#000;transform:translateY(-160%)}.skip-link:focus{transform:translateY(0)}.wrap{width:min(100% - var(--pad)*2,var(--maxw));margin-inline:auto}.site-main{position:relative;isolation:isolate}.section-pad{padding-block:clamp(92px,13vw,210px)}.section-label{display:inline-flex;gap:10px;align-items:center;font:700 11px/1 var(--mono);letter-spacing:.16em;text-transform:uppercase;color:var(--accent)}.section-label:before{content:"";width:8px;height:8px;border-radius:50%;background:currentColor;box-shadow:0 0 24px currentColor}.display-xl,.display-lg,.display-md{font-family:var(--display);line-height:.88;letter-spacing:-.07em;text-transform:uppercase;margin:0}.display-xl{font-size:clamp(54px,14vw,220px)}.display-lg{font-size:clamp(44px,9vw,148px)}.display-md{font-size:clamp(38px,6vw,98px);line-height:.96}.editorial-lead,.editorial-copy{color:var(--muted);font-family:var(--serif);font-size:clamp(19px,2.1vw,34px);line-height:1.35;letter-spacing:-.02em}.editorial-copy{font-size:clamp(24px,3.2vw,54px);color:var(--ink)}.no-js [data-reveal],.no-js .split-lines,.no-js .split-chars{opacity:1!important;transform:none!important}@media (prefers-reduced-motion:reduce){*,*:before,*:after{animation-duration:.01ms!important;animation-iteration-count:1!important;scroll-behavior:auto!important;transition-duration:.01ms!important}.hero-webgl,.cursor,.cursor-follower{display:none!important}}


/* --- assets/css/layout.css --- */
.nav{position:fixed;top:18px;left:0;right:0;z-index:80;transition:transform .7s var(--ease),opacity .4s var(--ease)}.nav.is-hidden{transform:translateY(-140%);opacity:0}.nav__in{width:min(calc(100% - 28px),var(--maxw));margin:auto;padding:10px 12px 10px 18px;display:flex;align-items:center;gap:22px;border:1px solid var(--line);border-radius:999px;background:rgba(7,7,7,.58);backdrop-filter:blur(22px) saturate(1.4);box-shadow:0 18px 70px rgba(0,0,0,.22)}.brand{display:inline-flex;align-items:center;gap:10px;font:800 18px/1 var(--display);letter-spacing:-.04em}.brand__mark{width:14px;height:14px;border-radius:999px;background:var(--accent);box-shadow:0 0 24px var(--accent)}.nav__links{display:flex;gap:4px}.nav__links a{position:relative;padding:10px 13px;border-radius:999px;color:var(--muted);font:700 12px/1 var(--mono);letter-spacing:.06em;text-transform:uppercase;transition:color .25s var(--ease),background .25s var(--ease)}.nav__links a:hover,.nav__links a.is-active{color:var(--ink);background:rgba(255,255,255,.06)}.nav__spacer{flex:1}.lang-switch{display:flex;gap:4px;padding:4px;border:1px solid var(--line);border-radius:999px}.lang-switch a{min-width:34px;padding:7px 8px;border-radius:999px;color:var(--dim);font:800 11px/1 var(--mono);text-align:center}.lang-switch a.is-active,.lang-switch a:hover{background:var(--ink);color:#090909}.nav__pill,.drawer__cta,.foot__tg{display:inline-flex;align-items:center;gap:8px;padding:12px 18px;border-radius:999px;background:var(--accent);color:#03130d;font:800 12px/1 var(--mono);letter-spacing:.08em;text-transform:uppercase}.nav__burger{display:none;width:42px;height:42px;border:0;border-radius:50%;background:rgba(255,255,255,.08);align-items:center;justify-content:center;flex-direction:column;gap:5px}.nav__burger span{width:18px;height:2px;background:var(--ink);border-radius:3px}.drawer{position:fixed;inset:12px;z-index:100;display:flex;flex-direction:column;transform:translateY(-120%);opacity:0;pointer-events:none;transition:.55s var(--ease);border:1px solid var(--line);border-radius:28px;background:rgba(10,10,10,.92);backdrop-filter:blur(26px)}.drawer.is-open{transform:translateY(0);opacity:1;pointer-events:auto}.drawer__head,.drawer__foot{padding:22px;display:flex;align-items:center;justify-content:space-between}.drawer__close{width:46px;height:46px;border:0;border-radius:50%;background:var(--ink);color:#000;font-size:28px}.drawer__body{padding:18px 24px;display:grid;gap:14px}.drawer__body>a{font-family:var(--display);font-size:clamp(36px,10vw,82px);line-height:.95;letter-spacing:-.07em;text-transform:uppercase}.drawer__langs{display:flex;gap:8px;margin-top:24px}.drawer__langs a{padding:10px 14px;border:1px solid var(--line);border-radius:999px;color:var(--muted)}.drawer__langs a.is-active{background:var(--ink);color:#000}.drawer__overlay{position:fixed;inset:0;z-index:90;background:rgba(0,0,0,.5)}.foot{padding:34px var(--pad);border-top:1px solid var(--line);background:#050505}.foot__in{width:min(100%,var(--maxw));margin:auto;display:flex;align-items:center;gap:18px}.foot__tag{margin-left:auto;color:var(--dim);font:600 12px/1 var(--mono)}.about-index{position:fixed;left:50%;bottom:22px;transform:translateX(-50%);z-index:60;width:min(calc(100% - 28px),920px);display:flex;align-items:center;justify-content:space-between;gap:16px;padding:10px 12px 10px 18px;border:1px solid var(--line);border-radius:999px;background:rgba(8,8,8,.54);backdrop-filter:blur(18px);box-shadow:0 20px 60px rgba(0,0,0,.28)}.about-index span{color:var(--dim);font:700 11px/1 var(--mono);letter-spacing:.12em;text-transform:uppercase}.about-index div{display:flex;gap:4px}.about-index a{padding:8px 11px;border-radius:999px;color:var(--muted);font:700 11px/1 var(--mono);text-transform:uppercase}.about-index a:hover{background:rgba(255,255,255,.08);color:var(--ink)}


/* --- assets/css/hero.css --- */
.experience-shell{position:relative;overflow:hidden;background:linear-gradient(180deg,#050505,#100f0d 34%,#070707)}.experience-shell:before{content:"";position:fixed;inset:0;z-index:-2;opacity:.35;background-image:radial-gradient(rgba(255,255,255,.13) 1px,transparent 1px);background-size:22px 22px;mask-image:linear-gradient(#000,transparent 86%)}.about-hero{position:relative;min-height:100svh;display:grid;align-items:center;overflow:hidden;isolation:isolate}.hero-webgl{position:absolute;inset:0;width:100%;height:100%;z-index:-3}.hero-noise,.hero-noise:after{position:absolute;inset:0;z-index:-1;pointer-events:none}.hero-noise{background:radial-gradient(circle at 72% 36%,rgba(16,185,129,.24),transparent 28%),radial-gradient(circle at 26% 70%,rgba(255,255,255,.07),transparent 24%)}.hero-noise:after{content:"";opacity:.13;background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 260 260' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.72' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='260' height='260' filter='url(%23n)' opacity='.7'/%3E%3C/svg%3E")}.hero-layout{position:relative;display:grid;grid-template-columns:minmax(0,1.12fr) minmax(320px,.68fr);align-items:center;gap:clamp(28px,5vw,96px);padding-top:90px}.hero-title{font-family:var(--display);font-size:clamp(54px,11.4vw,184px);line-height:.76;letter-spacing:-.095em;text-transform:uppercase;margin:18px 0 0;max-width:8ch}.hero-title__line{display:block;overflow:hidden}.hero-lead{max-width:680px;color:var(--muted);font:500 clamp(18px,1.6vw,24px)/1.5 var(--sans);margin:26px 0 0}.hero-actions{display:flex;flex-wrap:wrap;gap:14px;margin-top:34px}.btn{position:relative;display:inline-flex;align-items:center;justify-content:center;gap:12px;min-height:54px;padding:0 22px;border:1px solid var(--line);border-radius:999px;overflow:hidden;font:800 12px/1 var(--mono);letter-spacing:.1em;text-transform:uppercase;transform:translateZ(0);will-change:transform}.btn:before{content:"";position:absolute;inset:0;background:linear-gradient(120deg,transparent,rgba(255,255,255,.16),transparent);transform:translateX(-120%)}.btn:hover:before{transform:translateX(120%);transition:transform .7s var(--ease)}.btn--primary{background:var(--ink);color:#060606;border-color:transparent;box-shadow:0 18px 44px rgba(255,255,255,.08)}.btn--ghost{background:rgba(255,255,255,.04);color:var(--ink);backdrop-filter:blur(16px)}.btn--large{min-height:64px;padding-inline:30px}.hero-portrait{position:relative;margin:0;min-height:clamp(450px,52vw,760px);display:grid;align-items:end}.portrait-frame{position:absolute;inset:9% 0 8% 6%;border-radius:44px;overflow:hidden;background:rgba(255,255,255,.06);box-shadow:var(--shadow),inset 0 0 0 1px var(--line);clip-path:polygon(0 10%,100% 0,92% 100%,8% 94%)}.portrait-frame img{width:100%;height:100%;object-fit:cover;filter:saturate(.88) contrast(1.08);opacity:.78}.hero-portrait figcaption{position:absolute;left:0;bottom:6%;padding:18px 22px;border:1px solid var(--line);border-radius:24px;background:rgba(9,9,9,.48);backdrop-filter:blur(20px);box-shadow:0 20px 70px rgba(0,0,0,.28)}.hero-portrait figcaption span{display:block;font:800 13px/1 var(--mono);letter-spacing:.12em;text-transform:uppercase}.hero-portrait figcaption b{display:block;margin-top:9px;color:var(--muted);font:500 14px/1 var(--sans)}.mission-card{position:absolute;right:-2%;top:18%;width:min(280px,70%);padding:20px;border:1px solid var(--line);border-radius:28px;background:rgba(255,255,255,.075);backdrop-filter:blur(22px);box-shadow:0 24px 80px rgba(0,0,0,.35)}.mission-card small{color:var(--accent);font:800 11px/1 var(--mono);letter-spacing:.15em;text-transform:uppercase}.mission-card strong{display:block;margin-top:13px;font:700 20px/1.16 var(--sans);letter-spacing:-.03em}.scroll-indicator{position:absolute;right:var(--pad);bottom:34px;display:flex;align-items:center;gap:12px;color:var(--dim);font:800 11px/1 var(--mono);letter-spacing:.16em;text-transform:uppercase}.scroll-indicator i{width:52px;height:1px;background:var(--line);position:relative;overflow:hidden}.scroll-indicator i:after{content:"";position:absolute;inset:0;background:var(--accent);transform:translateX(-100%)}


/* --- assets/css/story.css --- */
.story-layout{display:grid;grid-template-columns:minmax(280px,.75fr) minmax(0,1fr);gap:clamp(40px,8vw,140px)}.story-sticky{position:sticky;top:130px;height:max-content}.story-body{display:grid;gap:34px}.story-index{margin:0;color:var(--dim);font:800 12px/1.4 var(--mono);letter-spacing:.14em;text-transform:uppercase}.glass-note{width:min(560px,100%);padding:28px;border:1px solid var(--line);border-radius:32px;background:linear-gradient(180deg,rgba(255,255,255,.08),rgba(255,255,255,.035));box-shadow:var(--shadow);backdrop-filter:blur(18px)}.glass-note span,.note-panel span,.human-panel span{color:var(--accent);font:800 11px/1 var(--mono);letter-spacing:.16em;text-transform:uppercase}.glass-note h3{margin:12px 0;font:800 clamp(26px,3vw,42px)/1 var(--display);letter-spacing:-.06em;text-transform:uppercase}.glass-note p{margin:0;color:var(--muted)}.philosophy-grid{display:grid;grid-template-columns:.35fr 1fr;gap:clamp(32px,8vw,140px)}.principles{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin-top:38px}.principle-card{min-height:210px;padding:22px;border:1px solid var(--line);border-radius:28px;background:rgba(255,255,255,.045);box-shadow:0 20px 70px rgba(0,0,0,.2)}.principle-card span{display:block;width:42px;height:42px;border-radius:50%;background:var(--accent);box-shadow:0 0 50px rgba(16,185,129,.5)}.principle-card p{margin:42px 0 0;font:700 22px/1.08 var(--sans);letter-spacing:-.035em}.experience-section{background:linear-gradient(180deg,transparent,rgba(255,255,255,.035),transparent)}.experience-list{margin-top:48px;border-top:1px solid var(--line)}.experience-row{display:grid;grid-template-columns:100px minmax(220px,.8fr) 1fr;gap:24px;padding:34px 0;border-bottom:1px solid var(--line);align-items:start}.experience-row span{color:var(--accent);font:800 12px/1 var(--mono)}.experience-row h3{margin:0;font:800 clamp(24px,3vw,48px)/.98 var(--display);letter-spacing:-.06em;text-transform:uppercase}.experience-row p{margin:0;color:var(--muted);font-size:18px;max-width:52ch}.blog-grid{display:grid;grid-template-columns:.85fr 1fr;gap:clamp(36px,7vw,120px);align-items:start}.topic-orbit{display:flex;flex-wrap:wrap;gap:12px;align-content:flex-start}.topic-pill{padding:16px 20px;border:1px solid var(--line);border-radius:999px;background:rgba(255,255,255,.055);color:var(--muted);font:700 13px/1 var(--mono);letter-spacing:.06em;text-transform:uppercase;transition:.35s var(--ease)}.topic-pill:hover{background:var(--ink);color:#070707;transform:translateY(-4px)}.human-panel{padding:clamp(28px,5vw,70px);border:1px solid var(--line);border-radius:var(--radius-lg);background:radial-gradient(circle at 80% 0,rgba(16,185,129,.22),transparent 34%),rgba(255,255,255,.04);box-shadow:var(--shadow)}.human-panel h2{margin:18px 0}.human-panel p{max-width:850px;color:var(--muted);font-size:clamp(18px,1.6vw,24px)}.note-section{padding-bottom:clamp(80px,12vw,180px)}.note-panel{padding:34px;border-left:2px solid var(--accent);background:linear-gradient(90deg,rgba(16,185,129,.08),transparent);border-radius:0 26px 26px 0}.note-panel h2{margin:12px 0;font:800 clamp(32px,5vw,82px)/.96 var(--display);letter-spacing:-.07em;text-transform:uppercase}.note-panel p{max-width:760px;color:var(--muted);font-size:20px}


/* --- assets/css/timeline.css --- */
.timeline-section{position:relative;overflow:hidden}.timeline-head{display:grid;grid-template-columns:.35fr 1fr .25fr;gap:30px;align-items:end}.timeline-head p{color:var(--dim);font:800 11px/1.5 var(--mono);letter-spacing:.14em;text-transform:uppercase;margin:0}.timeline-wrap{position:relative;margin-top:70px}.timeline-svg{position:absolute;left:calc(50% - 24px);top:0;height:100%;overflow:visible}.timeline-path{fill:none;stroke:var(--accent);stroke-width:2;stroke-linecap:round;filter:drop-shadow(0 0 16px rgba(16,185,129,.55))}.timeline-items{display:grid;gap:clamp(50px,7vw,120px)}.timeline-item{display:grid;grid-template-columns:1fr 90px 1fr;align-items:center;gap:22px;min-height:250px}.timeline-item:nth-child(even) .timeline-card{grid-column:3}.timeline-item:nth-child(even) .timeline-year{grid-column:2;grid-row:1}.timeline-year{grid-column:2;color:var(--accent);font:800 13px/1 var(--mono);text-align:center;position:relative}.timeline-year:after{content:"";display:block;width:16px;height:16px;border:2px solid var(--accent);border-radius:50%;background:#050505;margin:12px auto 0;box-shadow:0 0 24px rgba(16,185,129,.7)}.timeline-card{grid-column:1;padding:28px;border:1px solid var(--line);border-radius:32px;background:linear-gradient(180deg,rgba(255,255,255,.085),rgba(255,255,255,.035));box-shadow:0 25px 80px rgba(0,0,0,.28);backdrop-filter:blur(16px);will-change:transform}.timeline-card span{color:var(--accent);font:800 11px/1 var(--mono);letter-spacing:.16em}.timeline-card h3{margin:18px 0 12px;font:800 clamp(28px,4vw,64px)/.94 var(--display);letter-spacing:-.065em;text-transform:uppercase}.timeline-card p{margin:0;color:var(--muted);font-size:18px}


/* --- assets/css/skills.css --- */
.skills-section{overflow:hidden;background:#050505}.skills-head{display:grid;grid-template-columns:.36fr 1fr;gap:clamp(28px,7vw,120px);align-items:start}.skills-head .editorial-lead{grid-column:2;margin-top:20px}.skill-marquee{margin-top:70px;border-block:1px solid var(--line);overflow:hidden;transform:rotate(-1.2deg) scale(1.03)}.skill-track{display:flex;width:max-content;gap:32px;padding:24px 0;will-change:transform}.skill-track span{font-family:var(--display);font-size:clamp(62px,12vw,190px);line-height:.8;letter-spacing:-.08em;text-transform:uppercase;white-space:nowrap;color:transparent;-webkit-text-stroke:1px rgba(255,255,255,.34)}.skill-track span:nth-child(3n){color:var(--ink);-webkit-text-stroke:0}.skill-detail{margin-top:74px;display:grid;border-top:1px solid var(--line)}.skill-row{display:grid;grid-template-columns:.35fr 1fr;gap:22px;padding:24px 0;border-bottom:1px solid var(--line)}.skill-row span{color:var(--accent);font:800 12px/1 var(--mono);letter-spacing:.16em;text-transform:uppercase}.skill-row p{margin:0;font:700 clamp(24px,3.4vw,56px)/1 var(--sans);letter-spacing:-.055em;color:var(--ink)}


/* --- assets/css/footer.css --- */
.footer-cta{position:relative;overflow:hidden;padding:clamp(90px,14vw,210px) 0;background:radial-gradient(circle at 70% 20%,rgba(16,185,129,.22),transparent 34%),#050505}.footer-cta:before{content:"";position:absolute;inset:0;opacity:.12;background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 260 260' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='260' height='260' filter='url(%23n)'/%3E%3C/svg%3E")}.footer-cta__in{position:relative}.footer-mega{margin:22px 0;font-family:var(--display);font-size:clamp(56px,14vw,230px);line-height:.74;letter-spacing:-.1em;text-transform:uppercase}.footer-mega span{display:block}.footer-cta p:not(.section-label){max-width:700px;color:var(--muted);font-size:clamp(18px,1.7vw,24px);margin:0 0 32px}


/* --- assets/css/cursor.css --- */
.cursor,.cursor-follower{position:fixed;left:0;top:0;z-index:200;pointer-events:none;border-radius:50%;transform:translate3d(-50%,-50%,0);mix-blend-mode:difference}.cursor{width:10px;height:10px;background:var(--ink)}.cursor span{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%) scale(.4);opacity:0;color:#000;font:800 10px/1 var(--mono);letter-spacing:.12em}.cursor-follower{width:44px;height:44px;border:1px solid rgba(255,255,255,.55);transition:width .25s var(--ease),height .25s var(--ease),border-color .25s var(--ease),background .25s var(--ease)}.cursor.is-label{width:76px;height:76px;background:var(--ink);mix-blend-mode:normal}.cursor.is-label span{opacity:1;transform:translate(-50%,-50%) scale(1)}.cursor.is-label+.cursor-follower{width:0;height:0;border-color:transparent}.cursor.is-hidden,.cursor-follower.is-hidden{opacity:0}


/* --- assets/css/animations.css --- */
[data-reveal],.split-lines,.split-chars,[data-stagger]>*{opacity:0}.char,.line{display:inline-block}.line{overflow:hidden}.will-change{will-change:transform,opacity,filter}.is-loaded .scroll-indicator i:after{animation:scrollLine 1.65s var(--ease) infinite}@keyframes scrollLine{0%{transform:translateX(-105%)}60%,100%{transform:translateX(105%)}}


/* --- assets/css/responsive.css --- */
@media (max-width:1100px){.hero-layout,.story-layout,.philosophy-grid,.blog-grid,.skills-head{grid-template-columns:1fr}.hero-title{font-size:clamp(64px,18vw,150px)}.hero-portrait{min-height:540px}.timeline-head{grid-template-columns:1fr}.principles{grid-template-columns:1fr}.skills-head .editorial-lead{grid-column:auto}.about-index{display:none}.experience-row{grid-template-columns:70px 1fr}.experience-row p{grid-column:2}.timeline-svg{left:20px}.timeline-item,.timeline-item:nth-child(even){grid-template-columns:46px 1fr}.timeline-year,.timeline-item:nth-child(even) .timeline-year{grid-column:1}.timeline-card,.timeline-item:nth-child(even) .timeline-card{grid-column:2}}@media (max-width:820px){body{font-size:16px}.nav{top:10px}.nav__links,.nav__pill,.lang-switch{display:none}.nav__burger{display:flex}.nav__in{width:calc(100% - 20px)}.hero-layout{padding-top:110px}.hero-portrait{min-height:420px}.mission-card{right:4%;top:10%}.story-sticky{position:relative;top:auto}.skill-row{grid-template-columns:1fr}.foot__in{flex-wrap:wrap}.foot__tag{margin-left:0;width:100%}.cursor,.cursor-follower{display:none}.section-pad{padding-block:74px}.footer-mega{font-size:clamp(54px,18vw,130px)}}@media (max-width:560px){.wrap{width:min(100% - 32px,var(--maxw))}.hero-title{font-size:clamp(58px,20vw,102px)}.hero-actions{display:grid}.btn{width:100%}.portrait-frame{inset:10% 0}.hero-portrait figcaption{left:6%;bottom:2%}.mission-card{position:relative;right:auto;top:auto;width:100%;margin-top:20px}.timeline-card{padding:22px}.timeline-card h3{font-size:30px}.experience-row{grid-template-columns:1fr;gap:12px}.experience-row p{grid-column:auto}.topic-pill{width:100%;justify-content:center}.principle-card{min-height:170px}.skill-track span{font-size:70px}.footer-cta .btn{width:100%}}

/* ============================================================
   Readability tuning for Awwwards About — 2K-safe, no blur waiting
   ============================================================ */
body:has([data-page="about"]) {
  --maxw: 1320px;
  --pad: clamp(20px, 3vw, 48px);
}

body:has([data-page="about"]) .display-xl { font-size: clamp(48px, 10vw, 160px); }
body:has([data-page="about"]) .display-lg { font-size: clamp(42px, 7.2vw, 120px); }
body:has([data-page="about"]) .display-md { font-size: clamp(34px, 4.6vw, 78px); }
body:has([data-page="about"]) .editorial-lead { font-size: clamp(18px, 1.55vw, 26px); line-height: 1.48; }
body:has([data-page="about"]) .editorial-copy { font-size: clamp(24px, 2.55vw, 42px); line-height: 1.22; }
body:has([data-page="about"]) .section-pad { padding-block: clamp(78px, 9vw, 150px); }
body:has([data-page="about"]) .about-hero { min-height: min(100svh, 940px); }
body:has([data-page="about"]) .hero-layout { gap: clamp(28px, 4.2vw, 72px); }
body:has([data-page="about"]) .hero-title { font-size: clamp(52px, 8.8vw, 136px); line-height: .82; letter-spacing: -.082em; }
body:has([data-page="about"]) .hero-lead { max-width: 620px; font-size: clamp(17px, 1.25vw, 21px); line-height: 1.58; }
body:has([data-page="about"]) .hero-portrait { min-height: clamp(410px, 43vw, 660px); }
body:has([data-page="about"]) .mission-card strong { font-size: 18px; line-height: 1.24; }
body:has([data-page="about"]) .story-layout { gap: clamp(34px, 6vw, 100px); }
body:has([data-page="about"]) .glass-note h3 { font-size: clamp(24px, 2.2vw, 34px); line-height: 1.06; }
body:has([data-page="about"]) .principle-card p { font-size: clamp(18px, 1.45vw, 22px); line-height: 1.15; }
body:has([data-page="about"]) .experience-row h3 { font-size: clamp(22px, 2.15vw, 36px); line-height: 1.04; }
body:has([data-page="about"]) .experience-row p,
body:has([data-page="about"]) .timeline-card p,
body:has([data-page="about"]) .note-panel p { font-size: clamp(16px, 1.05vw, 18px); line-height: 1.62; }
body:has([data-page="about"]) .timeline-items { gap: clamp(38px, 5.5vw, 86px); }
body:has([data-page="about"]) .timeline-item { min-height: 210px; }
body:has([data-page="about"]) .timeline-card h3 { font-size: clamp(24px, 3vw, 46px); line-height: .98; }
body:has([data-page="about"]) .skill-marquee { margin-top: 54px; }
body:has([data-page="about"]) .skill-track span { font-size: clamp(58px, 8.7vw, 138px); line-height: .86; }
body:has([data-page="about"]) .skill-row p { font-size: clamp(22px, 2.35vw, 38px); line-height: 1.08; }
body:has([data-page="about"]) .human-panel p { font-size: clamp(17px, 1.28vw, 21px); line-height: 1.58; }
body:has([data-page="about"]) .note-panel h2 { font-size: clamp(30px, 4vw, 58px); line-height: 1; }
body:has([data-page="about"]) .footer-mega { font-size: clamp(54px, 10.5vw, 164px); line-height: .78; }
body:has([data-page="about"]) .footer-cta { padding-block: clamp(80px, 10vw, 155px); }
body:has([data-page="about"]) .footer-cta p:not(.section-label) { font-size: clamp(17px, 1.25vw, 21px); line-height: 1.58; }

/* Remove actual blur effects on About: faster readability and lighter GPU work. */
body:has([data-page="about"]) .btn--ghost,
body:has([data-page="about"]) .nav__in,
body:has([data-page="about"]) .drawer,
body:has([data-page="about"]) .about-index,
body:has([data-page="about"]) .glass-note,
body:has([data-page="about"]) .timeline-card,
body:has([data-page="about"]) .hero-portrait figcaption,
body:has([data-page="about"]) .mission-card {
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}
body:has([data-page="about"]) .will-change { will-change: transform, opacity; }
body:has([data-page="about"]) [data-reveal],
body:has([data-page="about"]) .split-lines,
body:has([data-page="about"]) .split-chars,
body:has([data-page="about"]) [data-stagger] > * {
  filter: none !important;
}

@media (min-width: 1600px) {
  body:has([data-page="about"]) .hero-title { font-size: clamp(92px, 7vw, 132px); }
  body:has([data-page="about"]) .display-xl { font-size: clamp(92px, 8vw, 150px); }
  body:has([data-page="about"]) .display-lg { font-size: clamp(78px, 6vw, 112px); }
  body:has([data-page="about"]) .display-md { font-size: clamp(54px, 4vw, 72px); }
  body:has([data-page="about"]) .editorial-copy { font-size: clamp(30px, 2vw, 40px); }
  body:has([data-page="about"]) .hero-lead { font-size: 20px; }
  body:has([data-page="about"]) .skill-track span { font-size: clamp(96px, 6.7vw, 132px); }
  body:has([data-page="about"]) .footer-mega { font-size: clamp(104px, 7.6vw, 156px); }
}

@media (min-width: 2100px) {
  body:has([data-page="about"]) { --maxw: 1360px; }
  body:has([data-page="about"]) .hero-title { font-size: 126px; }
  body:has([data-page="about"]) .display-xl { font-size: 144px; }
  body:has([data-page="about"]) .display-lg { font-size: 108px; }
  body:has([data-page="about"]) .footer-mega { font-size: 148px; }
}

@supports not selector(body:has([data-page="about"])) {
  .experience-shell .hero-title { font-size: clamp(52px, 8.8vw, 136px); line-height: .82; }
  .experience-shell .display-xl { font-size: clamp(48px, 10vw, 160px); }
  .experience-shell .display-lg { font-size: clamp(42px, 7.2vw, 120px); }
  .experience-shell .editorial-copy { font-size: clamp(24px, 2.55vw, 42px); }
  .experience-shell .skill-track span { font-size: clamp(58px, 8.7vw, 138px); }
  .experience-shell .footer-mega { font-size: clamp(54px, 10.5vw, 164px); }
  .experience-shell .btn--ghost,
  .experience-shell .glass-note,
  .experience-shell .timeline-card,
  .experience-shell .hero-portrait figcaption,
  .experience-shell .mission-card { backdrop-filter:none!important; -webkit-backdrop-filter:none!important; }
}

/* ============================================================================
   ABOUT HERO — magnetic story hook refinement
   Keeps the readable patch, but makes the first screen more inviting.
   ========================================================================== */
body:has([data-page="about"]) .about-hero--hook {
  min-height: min(100svh, 900px);
  background:
    radial-gradient(circle at 78% 26%, rgba(16,185,129,.16), transparent 26%),
    radial-gradient(circle at 18% 68%, rgba(255,255,255,.055), transparent 28%),
    linear-gradient(180deg, rgba(255,255,255,.02), transparent 42%);
}

body:has([data-page="about"]) .about-hero--hook:after {
  content: "";
  position: absolute;
  left: var(--pad);
  right: var(--pad);
  bottom: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.22), rgba(16,185,129,.65), transparent);
  opacity: .8;
  pointer-events: none;
}

body:has([data-page="about"]) .hero-orbit {
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  overflow: hidden;
}

body:has([data-page="about"]) .hero-orbit span {
  position: absolute;
  display: block;
  border: 1px solid rgba(255,255,255,.08);
  border-radius: 999px;
  transform: rotate(-14deg);
  opacity: .8;
}

body:has([data-page="about"]) .hero-orbit span:nth-child(1) {
  width: 52vw;
  height: 18vw;
  right: -12vw;
  top: 18%;
  border-color: rgba(16,185,129,.20);
}
body:has([data-page="about"]) .hero-orbit span:nth-child(2) {
  width: 38vw;
  height: 12vw;
  right: 3vw;
  top: 38%;
}
body:has([data-page="about"]) .hero-orbit span:nth-child(3) {
  width: 24vw;
  height: 8vw;
  left: -8vw;
  bottom: 16%;
  border-color: rgba(255,255,255,.055);
}

body:has([data-page="about"]) .hero-copy {
  position: relative;
  z-index: 2;
}

body:has([data-page="about"]) .hero-hook {
  max-width: 720px;
  margin: 22px 0 0;
  color: var(--ink);
  font: 750 clamp(20px, 1.8vw, 30px)/1.22 var(--sans);
  letter-spacing: -.035em;
  text-wrap: balance;
}

body:has([data-page="about"]) .hero-lead {
  max-width: 620px;
  margin-top: 16px;
  font-size: clamp(16px, 1.08vw, 19px);
  line-height: 1.62;
  color: color-mix(in srgb, var(--muted) 88%, var(--ink));
}

body:has([data-page="about"]) .hero-proof {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 22px;
}

body:has([data-page="about"]) .hero-proof span {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  min-height: 34px;
  padding: 0 13px;
  border: 1px solid rgba(255,255,255,.12);
  border-radius: 999px;
  background: rgba(255,255,255,.045);
  color: rgba(243,238,231,.76);
  font: 800 11px/1 var(--mono);
  letter-spacing: .09em;
  text-transform: uppercase;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.06);
}

body:has([data-page="about"]) .hero-proof span:before {
  content: "";
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--accent);
  box-shadow: 0 0 18px rgba(16,185,129,.65);
}

body:has([data-page="about"]) .btn--pulse {
  box-shadow: 0 18px 44px rgba(255,255,255,.08), 0 0 0 0 rgba(16,185,129,.34);
}

body:has([data-page="about"]) .btn--pulse:after {
  content: "";
  position: absolute;
  inset: -1px;
  border-radius: inherit;
  border: 1px solid rgba(16,185,129,.44);
  opacity: 0;
  transform: scale(.98);
  pointer-events: none;
}

body:has([data-page="about"]) .hero-portrait--story {
  min-height: clamp(430px, 44vw, 660px);
}

body:has([data-page="about"]) .hero-portrait--story .portrait-frame {
  inset: 5% 2% 18% 8%;
  border-radius: 38px;
  background:
    linear-gradient(180deg, rgba(255,255,255,.075), rgba(255,255,255,.025)),
    rgba(255,255,255,.04);
  backdrop-filter: none !important;
  clip-path: polygon(0 8%,100% 0,94% 96%,9% 100%);
}

body:has([data-page="about"]) .mission-card--hook,
body:has([data-page="about"]) .hero-portrait figcaption,
body:has([data-page="about"]) .hero-route-card {
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}

body:has([data-page="about"]) .mission-card--hook {
  right: 0;
  top: 9%;
  width: min(270px, 72%);
  background: linear-gradient(180deg, rgba(255,255,255,.10), rgba(255,255,255,.045));
}

body:has([data-page="about"]) .hero-route-cards {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 2%;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
  z-index: 3;
}

body:has([data-page="about"]) .hero-route-card {
  min-height: 104px;
  padding: 16px;
  border: 1px solid rgba(255,255,255,.12);
  border-radius: 22px;
  background: linear-gradient(180deg, rgba(255,255,255,.075), rgba(255,255,255,.035));
  box-shadow: 0 18px 46px rgba(0,0,0,.22), inset 0 1px 0 rgba(255,255,255,.06);
  transform: translateZ(0);
  transition: transform .32s var(--ease), border-color .32s var(--ease), background .32s var(--ease);
}

body:has([data-page="about"]) .hero-route-card:hover {
  transform: translateY(-6px);
  border-color: rgba(16,185,129,.38);
  background: linear-gradient(180deg, rgba(16,185,129,.11), rgba(255,255,255,.04));
}

body:has([data-page="about"]) .hero-route-card span {
  display: block;
  color: var(--accent);
  font: 850 12px/1 var(--mono);
  letter-spacing: .12em;
}

body:has([data-page="about"]) .hero-route-card strong {
  display: block;
  margin-top: 12px;
  color: var(--ink);
  font: 850 clamp(18px, 1.8vw, 27px)/.95 var(--display);
  letter-spacing: -.055em;
  text-transform: uppercase;
}

body:has([data-page="about"]) .hero-route-card small {
  display: block;
  margin-top: 8px;
  color: var(--dim);
  font: 700 11px/1.25 var(--mono);
  letter-spacing: .04em;
  text-transform: uppercase;
}

body:has([data-page="about"]) .scroll-indicator--link {
  text-decoration: none;
  cursor: pointer;
  transition: color .25s var(--ease), transform .25s var(--ease);
}

body:has([data-page="about"]) .scroll-indicator--link:hover {
  color: var(--ink);
  transform: translateX(-4px);
}

body:has([data-page="about"]) .scroll-indicator--link i em {
  position: absolute;
  inset: 0;
  display: block;
  background: var(--accent);
  transform: translateX(-110%);
}

@media (min-width: 1500px) {
  body:has([data-page="about"]) .experience-shell .hero-title {
    font-size: clamp(58px, 7.2vw, 126px);
    line-height: .82;
  }
  body:has([data-page="about"]) .hero-layout {
    gap: clamp(34px, 4vw, 72px);
  }
}

@media (min-width: 1900px) {
  body:has([data-page="about"]) .experience-shell .hero-title {
    font-size: clamp(62px, 6.2vw, 118px);
  }
  body:has([data-page="about"]) .about-hero--hook {
    min-height: min(100svh, 860px);
  }
  body:has([data-page="about"]) .hero-hook {
    font-size: clamp(22px, 1.35vw, 28px);
  }
}

@media (max-width: 1100px) {
  body:has([data-page="about"]) .hero-route-cards {
    position: relative;
    bottom: auto;
    margin-top: 18px;
  }
}

@media (max-width: 680px) {
  body:has([data-page="about"]) .hero-proof span { width: 100%; justify-content: center; }
  body:has([data-page="about"]) .hero-route-cards { grid-template-columns: 1fr; }
  body:has([data-page="about"]) .hero-route-card { min-height: auto; }
  body:has([data-page="about"]) .mission-card--hook { width: 100%; }
}

/* ============================================================================
   HERO FIX — balanced composition, no broken overlaps on 2K displays
   ========================================================================== */
body:has([data-page="about"]) .about-hero--hook {
  min-height: clamp(720px, 100svh, 900px);
}

body:has([data-page="about"]) .about-hero--hook .hero-layout {
  grid-template-columns: minmax(560px, .95fr) minmax(520px, .82fr);
  align-items: center;
  gap: clamp(44px, 5vw, 96px);
  padding-top: clamp(96px, 9vh, 132px);
  padding-bottom: clamp(48px, 7vh, 88px);
}

body:has([data-page="about"]) .about-hero--hook .hero-copy {
  transform: translateY(-2.6vh);
  max-width: 760px;
}

body:has([data-page="about"]) .about-hero--hook .hero-hook {
  max-width: 720px;
  font-size: clamp(24px, 2vw, 38px);
  line-height: 1.14;
  letter-spacing: -.045em;
}

body:has([data-page="about"]) .about-hero--hook .hero-lead {
  max-width: 600px;
}

body:has([data-page="about"]) .about-hero--hook .hero-portrait--story {
  display: grid;
  align-content: center;
  gap: 14px;
  min-height: auto;
  max-width: 620px;
  justify-self: end;
  transform: translateY(-1vh);
}

body:has([data-page="about"]) .about-hero--hook .portrait-frame {
  position: relative;
  inset: auto;
  width: min(100%, 560px);
  height: clamp(310px, 28vw, 460px);
  justify-self: end;
  border-radius: 34px;
  clip-path: none;
}

body:has([data-page="about"]) .about-hero--hook .portrait-frame img {
  opacity: .70;
  object-position: center;
}

body:has([data-page="about"]) .about-hero--hook .mission-card--hook {
  top: clamp(18px, 2.2vw, 32px);
  right: clamp(18px, 2.2vw, 32px);
  width: min(310px, calc(100% - 36px));
  padding: 18px;
  border-radius: 24px;
  z-index: 4;
}

body:has([data-page="about"]) .about-hero--hook .mission-card--hook strong {
  font-size: clamp(17px, 1.2vw, 21px);
  line-height: 1.2;
}

body:has([data-page="about"]) .about-hero--hook .hero-portrait figcaption {
  display: none;
}

body:has([data-page="about"]) .about-hero--hook .hero-route-cards {
  position: relative;
  left: auto;
  right: auto;
  bottom: auto;
  width: min(100%, 560px);
  justify-self: end;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
  margin-top: 0;
  z-index: 5;
}

body:has([data-page="about"]) .about-hero--hook .hero-route-card {
  min-height: 92px;
  padding: 14px 13px;
  border-radius: 20px;
  overflow: hidden;
}

body:has([data-page="about"]) .about-hero--hook .hero-route-card strong {
  margin-top: 9px;
  font-family: var(--sans);
  font-size: clamp(16px, .95vw, 20px);
  line-height: 1.02;
  letter-spacing: -.035em;
  white-space: normal;
  overflow-wrap: anywhere;
  word-break: normal;
}

body:has([data-page="about"]) .about-hero--hook .hero-route-card small {
  margin-top: 7px;
  font-size: 9.5px;
  line-height: 1.22;
  opacity: .72;
}

body:has([data-page="about"]) .about-hero--hook .hero-orbit span:nth-child(1) {
  right: -8vw;
  top: 13%;
}
body:has([data-page="about"]) .about-hero--hook .hero-orbit span:nth-child(2) {
  right: 5vw;
  top: 34%;
}
body:has([data-page="about"]) .about-hero--hook .hero-orbit span:nth-child(3) {
  left: 3vw;
  bottom: 21%;
}

@media (min-width: 1800px) {
  body:has([data-page="about"]) .about-hero--hook .hero-layout {
    grid-template-columns: minmax(620px, .98fr) minmax(560px, .78fr);
    max-width: 1460px;
  }
  body:has([data-page="about"]) .about-hero--hook .hero-hook {
    font-size: 36px;
  }
  body:has([data-page="about"]) .about-hero--hook .hero-lead {
    font-size: 19px;
  }
}

@media (min-width: 2200px) {
  body:has([data-page="about"]) .about-hero--hook .hero-layout {
    max-width: 1500px;
  }
  body:has([data-page="about"]) .about-hero--hook .hero-hook {
    font-size: 34px;
  }
}

@media (max-width: 1240px) {
  body:has([data-page="about"]) .about-hero--hook .hero-layout {
    grid-template-columns: 1fr;
  }
  body:has([data-page="about"]) .about-hero--hook .hero-copy {
    transform: none;
  }
  body:has([data-page="about"]) .about-hero--hook .hero-portrait--story,
  body:has([data-page="about"]) .about-hero--hook .portrait-frame,
  body:has([data-page="about"]) .about-hero--hook .hero-route-cards {
    width: 100%;
    max-width: 760px;
    justify-self: start;
  }
}

@media (max-width: 720px) {
  body:has([data-page="about"]) .about-hero--hook .hero-hook {
    font-size: clamp(25px, 8vw, 38px);
  }
  body:has([data-page="about"]) .about-hero--hook .hero-route-cards {
    grid-template-columns: 1fr;
  }
  body:has([data-page="about"]) .about-hero--hook .portrait-frame {
    height: 340px;
  }
  body:has([data-page="about"]) .about-hero--hook .mission-card--hook {
    position: absolute;
  }
}


/* ------------------------------------------------------------------ no custom cursor */
.cursor,
.cursor-follower {
  display: none !important;
}

/* ---------------------------------------------------------- admin login repair */
.admin-login {
  position: relative;
  min-height: calc(100dvh - 160px);
  display: grid;
  place-items: center;
  padding: clamp(72px, 10vw, 128px) 24px;
  overflow: hidden;
}
.admin-login__bg {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    radial-gradient(circle at 50% 18%, color-mix(in srgb, var(--accent) 18%, transparent), transparent 34%),
    radial-gradient(circle at 80% 80%, rgba(255,255,255,.06), transparent 34%);
  opacity: .8;
}
.admin-login__card {
  position: relative;
  width: min(100%, 430px);
  padding: clamp(28px, 4vw, 42px);
  border: 1px solid color-mix(in srgb, var(--accent) 18%, var(--line));
  border-radius: 28px;
  background:
    linear-gradient(180deg, rgba(255,255,255,.055), rgba(255,255,255,.025)),
    color-mix(in srgb, var(--panel) 88%, transparent);
  box-shadow: 0 34px 90px -54px rgba(0,0,0,.9), inset 0 1px 0 rgba(255,255,255,.08);
}
.admin-login__brand {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 34px;
  font-family: var(--ff-head, var(--head));
  font-weight: 800;
  letter-spacing: -.03em;
}
.admin-login__kicker {
  margin: 0 0 10px;
  color: var(--accent);
  font-family: var(--ff-mono, var(--mono));
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .16em;
  text-transform: uppercase;
}
.admin-login h1 {
  margin: 0;
  color: var(--ink);
  font-family: var(--ff-display, var(--display));
  font-size: clamp(30px, 4vw, 44px);
  line-height: .98;
  letter-spacing: -.045em;
}
.admin-login__lead {
  margin: 16px 0 0;
  color: var(--ink-2, var(--muted));
  font-size: 15px;
  line-height: 1.6;
}
.admin-login__error {
  margin-top: 22px;
  border: 1px solid rgba(248,113,113,.35);
  border-radius: 16px;
  background: rgba(248,113,113,.11);
  color: #fca5a5;
  padding: 13px 15px;
  font-family: var(--ff-mono, var(--mono));
  font-size: 13px;
}
.admin-login__form {
  display: grid;
  gap: 12px;
  margin-top: 26px;
}
.admin-login__label {
  color: var(--ink-3, var(--muted));
  font-family: var(--ff-mono, var(--mono));
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
}
.admin-login__input {
  min-height: 54px;
  border-radius: 16px;
  font-family: var(--ff-mono, var(--mono));
  background: rgba(255,255,255,.045);
}
.admin-login__submit {
  width: 100%;
  min-height: 52px;
  justify-content: center;
  border-radius: 999px;
  margin-top: 8px;
}
.admin-login__back {
  display: inline-flex;
  margin-top: 22px;
  color: var(--ink-3, var(--muted));
  font-family: var(--ff-mono, var(--mono));
  font-size: 12px;
  letter-spacing: .08em;
  transition: color .18s ease;
}
.admin-login__back:hover { color: var(--accent); }

@media (max-width: 560px) {
  .admin-login {
    min-height: calc(100dvh - 120px);
    padding-inline: 16px;
  }
  .admin-login__card {
    border-radius: 22px;
  }
}

/* === Hotfix: balanced route images in About timeline === */
.story-page .timeline-svg{left:50%;transform:translateX(-50%);z-index:0}.story-page .timeline-items{position:relative;z-index:1;gap:clamp(70px,7vw,118px)}.story-page .timeline-item{grid-template-columns:minmax(0,.92fr) minmax(68px,90px) minmax(0,.92fr);align-items:center;gap:clamp(24px,3vw,48px);min-height:clamp(310px,25vw,430px)}.story-page .timeline-card,.story-page .timeline-media{width:100%;min-width:0;align-self:center}.story-page .timeline-media{position:relative;justify-self:stretch;max-width:none!important;min-height:clamp(250px,21vw,360px)!important;aspect-ratio:16/10;margin:0;border-radius:34px;overflow:hidden}.story-page .timeline-media img{width:100%;height:100%;object-fit:cover;display:block}.story-page .timeline-item:nth-child(odd) .timeline-card{grid-column:1;grid-row:1}.story-page .timeline-item:nth-child(odd) .timeline-media{grid-column:3;grid-row:1;transform:rotate(1.2deg)}.story-page .timeline-item:nth-child(even) .timeline-card{grid-column:3;grid-row:1}.story-page .timeline-item:nth-child(even) .timeline-media{grid-column:1;grid-row:1;transform:rotate(-1.2deg)}.story-page .timeline-item:nth-child(even) .timeline-year,.story-page .timeline-item:nth-child(odd) .timeline-year{grid-column:2;grid-row:1}@media (min-width:1600px){.story-page .timeline-wrap{max-width:1320px}.story-page .timeline-item{grid-template-columns:minmax(0,1fr) 96px minmax(0,1fr);gap:clamp(34px,3.2vw,58px)}.story-page .timeline-media{max-width:none!important;min-height:clamp(280px,18vw,370px)!important}}@media (max-width:900px){.story-page .timeline-svg{left:18px;transform:none}.story-page .timeline-item,.story-page .timeline-item:nth-child(even){grid-template-columns:48px minmax(0,1fr);gap:16px;min-height:0}.story-page .timeline-year,.story-page .timeline-item:nth-child(even) .timeline-year,.story-page .timeline-item:nth-child(odd) .timeline-year{grid-column:1;grid-row:1 / span 2}.story-page .timeline-card,.story-page .timeline-item:nth-child(odd) .timeline-card,.story-page .timeline-item:nth-child(even) .timeline-card{grid-column:2;grid-row:1}.story-page .timeline-media,.story-page .timeline-item:nth-child(odd) .timeline-media,.story-page .timeline-item:nth-child(even) .timeline-media{grid-column:2;grid-row:2;transform:none!important;max-width:100%;min-height:190px!important;border-radius:24px}}
.route-section{position:relative;overflow:hidden}.route-section:before{content:"";position:absolute;inset:6% -10% auto;height:34%;pointer-events:none;background:radial-gradient(circle at 30% 30%,rgba(16,185,129,.12),transparent 34%),radial-gradient(circle at 72% 42%,rgba(243,238,231,.06),transparent 28%);filter:saturate(1.2)}.route-head{display:grid;grid-template-columns:.35fr 1fr .28fr;gap:30px;align-items:end}.route-head p{color:var(--dim);font:800 11px/1.5 var(--mono);letter-spacing:.14em;text-transform:uppercase;margin:0}.route-board{position:relative;margin-top:clamp(52px,6vw,88px);padding:clamp(26px,3vw,44px) 0 clamp(24px,3vw,42px);max-width:min(1280px,calc(100vw - 48px))}.route-map-bg{position:absolute;inset:0;pointer-events:none;overflow:hidden;border-radius:42px;opacity:.45}.route-map-bg span{position:absolute;border:1px solid rgba(16,185,129,.18);border-radius:999px;filter:drop-shadow(0 0 18px rgba(16,185,129,.15))}.route-map-bg span:nth-child(1){width:42vw;height:18vw;left:-18vw;top:7%;transform:rotate(-18deg)}.route-map-bg span:nth-child(2){width:50vw;height:22vw;right:-23vw;top:37%;transform:rotate(13deg)}.route-map-bg span:nth-child(3){width:40vw;height:20vw;left:15%;bottom:4%;transform:rotate(7deg)}.route-rail{position:absolute;inset:0;width:100%;height:100%;overflow:visible;z-index:0}.route-rail-path{fill:none;stroke:rgba(16,185,129,.76);stroke-width:2;stroke-linecap:round;stroke-dasharray:12 18;filter:drop-shadow(0 0 16px rgba(16,185,129,.45))}.route-manifest{position:sticky;top:92px;z-index:3;width:min(220px,30vw);margin-left:auto;margin-bottom:-74px;padding:16px 18px;border:1px solid rgba(255,255,255,.11);border-radius:22px;background:linear-gradient(180deg,rgba(255,255,255,.07),rgba(255,255,255,.025));box-shadow:0 22px 70px rgba(0,0,0,.24)}.route-manifest span,.route-manifest small{display:block;color:var(--accent);font:800 10px/1 var(--mono);letter-spacing:.16em;text-transform:uppercase}.route-manifest b{display:block;margin:10px 0 8px;color:var(--paper);font:800 22px/.92 var(--display);letter-spacing:-.05em;text-transform:uppercase}.route-manifest small{color:var(--dim);line-height:1.45}.route-chapters{position:relative;z-index:1;display:grid;gap:clamp(44px,5.4vw,86px)}.route-chapter{position:relative;display:grid;grid-template-columns:minmax(0,.95fr) 108px minmax(0,.95fr);align-items:center;gap:clamp(22px,3.2vw,54px);min-height:clamp(330px,28vw,455px);perspective:1200px}.route-pin{grid-column:2;grid-row:1;align-self:center;justify-self:center;position:relative;z-index:3;text-align:center;color:var(--accent);font:800 12px/1 var(--mono);letter-spacing:.06em}.route-pin i{display:block;width:20px;height:20px;margin:12px auto 0;border:2px solid currentColor;border-radius:999px;background:#050505;box-shadow:0 0 0 8px rgba(16,185,129,.06),0 0 26px rgba(16,185,129,.75)}.route-photo{position:relative;grid-row:1;align-self:center;width:100%;min-height:clamp(260px,21vw,365px);aspect-ratio:16/10;border:1px solid rgba(255,255,255,.13);border-radius:36px;overflow:hidden;background:#0d0d0c;box-shadow:0 30px 90px rgba(0,0,0,.36);margin:0;transform:rotate(var(--r,1.4deg));will-change:transform}.route-photo:before{content:"";position:absolute;inset:0;z-index:1;pointer-events:none;background:linear-gradient(180deg,rgba(0,0,0,.03),rgba(0,0,0,.30)),radial-gradient(circle at 82% 12%,rgba(16,185,129,.22),transparent 35%)}.route-photo:after{content:"";position:absolute;inset:14px;z-index:2;border:1px solid rgba(255,255,255,.09);border-radius:26px;pointer-events:none}.route-photo img{width:100%;height:100%;display:block;object-fit:cover;filter:saturate(.9) contrast(1.06)}.route-photo figcaption{position:absolute;left:18px;right:18px;bottom:16px;z-index:3;display:flex;align-items:center;justify-content:space-between;gap:12px;padding:10px 12px;border:1px solid rgba(255,255,255,.14);border-radius:999px;background:rgba(5,5,5,.56);color:var(--paper);font-family:var(--mono);text-transform:uppercase;letter-spacing:.12em}.route-photo figcaption span{color:var(--accent);font-weight:900;font-size:10px}.route-photo figcaption b{font-size:10px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.route-note{grid-row:1;position:relative;align-self:center;padding:clamp(22px,2.6vw,34px);border:1px solid var(--line);border-radius:34px;background:linear-gradient(180deg,rgba(255,255,255,.085),rgba(255,255,255,.03));box-shadow:0 24px 80px rgba(0,0,0,.28);will-change:transform}.route-note:before{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;background:linear-gradient(135deg,rgba(16,185,129,.09),transparent 36%);opacity:.75}.route-note__top,.route-note__foot{position:relative;display:flex;align-items:center;justify-content:space-between;gap:14px}.route-note__top span,.route-note__top small,.route-note__foot span{color:var(--accent);font:800 10px/1 var(--mono);letter-spacing:.16em;text-transform:uppercase}.route-note__top small,.route-note__foot span{color:var(--dim)}.route-note h3{position:relative;margin:20px 0 14px;font:800 clamp(28px,3vw,50px)/.92 var(--display);letter-spacing:-.065em;text-transform:uppercase;text-wrap:balance}.route-note p{position:relative;margin:0;color:var(--muted);font-size:clamp(16px,1.05vw,18px);line-height:1.58}.route-note__foot{margin-top:22px;justify-content:flex-start}.route-note__foot i{width:52px;height:1px;background:rgba(16,185,129,.45)}.route-chapter.is-left .route-photo{grid-column:3;--r:1.2deg}.route-chapter.is-left .route-note{grid-column:1}.route-chapter.is-right .route-photo{grid-column:1;--r:-1.2deg}.route-chapter.is-right .route-note{grid-column:3}.route-chapter:hover .route-photo{transform:translateY(-8px) rotate(0deg) scale(1.015)}.route-chapter:hover .route-note{transform:translateY(-5px)}@media (min-width:1600px){.route-board{max-width:1360px}.route-chapter{grid-template-columns:minmax(0,1fr) 110px minmax(0,1fr);gap:clamp(36px,3vw,64px);min-height:clamp(340px,24vw,440px)}.route-note h3{font-size:clamp(30px,2.45vw,48px)}.route-photo{min-height:clamp(285px,18vw,370px)}}@media (max-width:980px){.route-head{grid-template-columns:1fr}.route-board{max-width:var(--maxw);margin-top:42px;padding-top:0}.route-manifest{position:relative;top:auto;width:100%;margin:0 0 28px}.route-rail{display:none}.route-chapters{gap:28px}.route-chapter,.route-chapter.is-left,.route-chapter.is-right{grid-template-columns:1fr;min-height:0;gap:14px}.route-pin{grid-column:1!important;grid-row:1;justify-self:start;display:flex;align-items:center;gap:12px}.route-pin i{margin:0}.route-note,.route-chapter.is-left .route-note,.route-chapter.is-right .route-note{grid-column:1;grid-row:2}.route-photo,.route-chapter.is-left .route-photo,.route-chapter.is-right .route-photo{grid-column:1;grid-row:3;transform:none;min-height:200px;border-radius:26px}.route-photo:after{border-radius:18px}.route-note h3{font-size:clamp(27px,8vw,42px)}}




/* === Creative safe header: compact, sticky, non-overlapping === */
.nav.nav--creative{
  position: sticky;
  top: 12px;
  left: auto;
  right: auto;
  z-index: 90;
  padding: 0 var(--pad, 24px);
  margin: 12px 0 -1px;
  transform: none;
  opacity: 1;
  pointer-events: auto;
  isolation: isolate;
}
.nav.nav--creative.is-hidden{
  transform: translateY(-128%);
  opacity: .96;
}
.nav.nav--creative .nav__in{
  position: relative;
  width: min(100%, 1180px);
  min-height: 64px;
  margin: 0 auto;
  padding: 8px 10px 8px 12px;
  display: grid;
  grid-template-columns: auto auto minmax(320px, 1fr) auto auto auto;
  align-items: center;
  gap: 10px;
  border: 1px solid rgba(255,255,255,.13);
  border-radius: 999px;
  overflow: hidden;
  background:
    linear-gradient(180deg, rgba(19,19,17,.94), rgba(8,8,8,.90)),
    radial-gradient(circle at 16% 50%, rgba(16,185,129,.20), transparent 28%);
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  box-shadow: 0 24px 70px rgba(0,0,0,.30), inset 0 1px 0 rgba(255,255,255,.08);
}
.nav.nav--creative .nav__in:before{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  background:
    linear-gradient(90deg, rgba(16,185,129,.14), transparent 18%, transparent 82%, rgba(255,255,255,.06)),
    repeating-linear-gradient(90deg, transparent 0 18px, rgba(255,255,255,.025) 18px 19px);
  opacity:.7;
}
.nav.nav--creative .brand,
.nav.nav--creative .nav__links,
.nav.nav--creative .nav__spacer,
.nav.nav--creative .lang-switch,
.nav.nav--creative .nav__pill,
.nav.nav--creative .nav__burger,
.nav.nav--creative .nav__signal{
  position: relative;
  z-index: 2;
}
.nav.nav--creative .brand--creative{
  min-width: 0;
  gap: 10px;
  padding: 7px 10px 7px 8px;
  border-radius: 999px;
  color: var(--ink, #f3eee7);
}
.nav.nav--creative .brand__mark{
  position: relative;
  width: 34px;
  height: 34px;
  border-radius: 999px;
  display: grid;
  place-items: center;
  background: rgba(16,185,129,.12);
  box-shadow: inset 0 0 0 1px rgba(16,185,129,.34), 0 0 24px rgba(16,185,129,.18);
}
.nav.nav--creative .brand__mark:before,
.nav.nav--creative .brand__mark:after{
  content:"";
  position:absolute;
  border: 1px solid rgba(16,185,129,.45);
  border-radius: 999px;
  inset: 5px;
}
.nav.nav--creative .brand__mark:after{
  inset: 11px;
  background: var(--accent, #10b981);
  box-shadow: 0 0 16px rgba(16,185,129,.75);
}
.nav.nav--creative .brand__mark span{
  width: 2px;
  height: 20px;
  background: rgba(255,255,255,.52);
  transform: rotate(37deg);
  border-radius: 999px;
  z-index: 1;
}
.nav.nav--creative .brand__word{
  display: inline-flex;
  align-items: baseline;
  gap: 1px;
  color: var(--ink, #f3eee7);
  font-family: var(--display, var(--ff-display));
  font-size: 17px;
  font-weight: 800;
  letter-spacing: -.055em;
  white-space: nowrap;
}
.nav.nav--creative .brand__word em{
  color: var(--accent, #10b981);
  font-style: normal;
}
.nav.nav--creative .nav__signal{
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-width: max-content;
  color: rgba(243,238,231,.58);
  font: 800 10px/1 var(--mono, monospace);
  letter-spacing: .14em;
  text-transform: uppercase;
  padding: 9px 11px;
  border: 1px solid rgba(255,255,255,.08);
  border-radius: 999px;
  background: rgba(255,255,255,.035);
}
.nav.nav--creative .nav__signal i{
  width: 7px;
  height: 7px;
  border-radius: 999px;
  background: var(--accent, #10b981);
  box-shadow: 0 0 18px rgba(16,185,129,.85);
}
.nav.nav--creative .nav__links{
  min-width: 0;
  justify-self: center;
  display: flex;
  justify-content: center;
  gap: 3px;
  padding: 4px;
  border: 1px solid rgba(255,255,255,.075);
  border-radius: 999px;
  background: rgba(0,0,0,.22);
}
.nav.nav--creative .nav__links a{
  white-space: nowrap;
  padding: 10px 12px;
  border-radius: 999px;
  color: rgba(243,238,231,.62);
  font: 800 11px/1 var(--mono, monospace);
  letter-spacing: .08em;
}
.nav.nav--creative .nav__links a:hover,
.nav.nav--creative .nav__links a.is-active{
  color: #050505;
  background: var(--ink, #f3eee7);
}
.nav.nav--creative .nav__spacer{ display:none; }
.nav.nav--creative .lang-switch{
  justify-self: end;
  background: rgba(255,255,255,.035);
  border-color: rgba(255,255,255,.10);
}
.nav.nav--creative .nav__pill{
  justify-self: end;
  min-height: 42px;
  padding: 0 15px;
  background: linear-gradient(180deg, var(--accent, #10b981), #77ffd0);
  box-shadow: 0 14px 34px rgba(16,185,129,.20);
}
.nav.nav--creative .nav__progress{
  position:absolute;
  left: 16px;
  right: 16px;
  bottom: 4px;
  z-index: 3;
  height: 2px;
  border-radius: 99px;
  overflow:hidden;
  background: rgba(255,255,255,.08);
  pointer-events:none;
}
.nav.nav--creative .nav__progress i{
  display:block;
  width: calc(var(--nav-progress, 0) * 100%);
  height:100%;
  border-radius: inherit;
  background: linear-gradient(90deg, var(--accent, #10b981), rgba(243,238,231,.92));
  box-shadow: 0 0 16px rgba(16,185,129,.65);
}
body:has([data-page="about"]) .about-hero{
  min-height: calc(100svh - 86px);
}
body:has([data-page="about"]) .hero-layout{
  padding-top: clamp(34px, 4vw, 70px);
}
@media (max-width: 1180px){
  .nav.nav--creative .nav__in{ grid-template-columns: auto minmax(290px,1fr) auto auto auto; }
  .nav.nav--creative .nav__signal{ display:none; }
}
@media (max-width: 980px){
  .nav.nav--creative .nav__in{ grid-template-columns: auto 1fr auto auto; min-height: 60px; }
  .nav.nav--creative .nav__links{ display:none; }
  .nav.nav--creative .nav__burger{ display:flex; justify-self:end; }
  .nav.nav--creative .nav__pill{ display:none; }
}
@media (max-width: 720px){
  .nav.nav--creative{ top: 8px; padding: 0 10px; margin-top: 8px; }
  .nav.nav--creative .nav__in{ grid-template-columns: auto 1fr auto; padding: 7px 8px; }
  .nav.nav--creative .lang-switch{ display:none; }
  .nav.nav--creative .brand__word{ font-size: 16px; }
  .nav.nav--creative .brand__mark{ width: 32px; height: 32px; }
}

@media (max-width: 820px) {
  .drawer {
    inset: 10px;
    max-height: calc(100dvh - 20px);
    border-radius: 22px;
    overflow: hidden;
  }
  .drawer__head,
  .drawer__foot {
    flex: 0 0 auto;
    padding: 16px;
  }
  .drawer__close {
    width: 40px;
    height: 40px;
    font-size: 24px;
  }
  .drawer__body {
    flex: 1 1 auto;
    align-content: start;
    gap: 8px;
    padding: 8px 16px 18px;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
  }
  .drawer__body > a {
    min-height: 48px;
    padding: 13px 14px;
    border: 1px solid rgba(255,255,255,.09);
    border-radius: 14px;
    background: rgba(255,255,255,.035);
    color: rgba(243,238,231,.82);
    font-family: var(--mono, monospace);
    font-size: 13px;
    font-weight: 800;
    line-height: 1;
    letter-spacing: .08em;
    text-transform: uppercase;
  }
  .drawer__body > a.is-active {
    background: var(--ink, #f3eee7);
    border-color: transparent;
    color: #070707;
  }
  .drawer__langs {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 8px;
    margin-top: 8px;
  }
  .drawer__langs a {
    padding: 10px 8px;
    text-align: center;
    font: 800 11px/1 var(--mono, monospace);
  }
  .drawer__cta {
    width: 100%;
    min-height: 44px;
    justify-content: center;
    padding: 12px 14px;
    font-size: 11px;
  }
}

/* ------------------------------------------------ awards archive */
.awards-page {
  --awards-bg: #070706;
  --awards-panel: rgba(255,255,255,.055);
  --awards-line: rgba(255,255,255,.14);
  --awards-ink: #f5f1e8;
  --awards-muted: rgba(245,241,232,.66);
  --awards-dim: rgba(245,241,232,.42);
  --awards-accent: #e5bd68;
  position: relative;
  isolation: isolate;
  min-height: 100dvh;
  overflow-x: hidden;
  overflow-y: visible;
  color: var(--awards-ink);
  background:
    radial-gradient(circle at 16% 0%, rgba(229,189,104,.16), transparent 30%),
    radial-gradient(circle at 78% 18%, rgba(255,255,255,.07), transparent 26%),
    linear-gradient(180deg, #050505 0%, #12100c 42%, #070706 100%);
}
.awards-page::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  opacity: .22;
  background-image:
    linear-gradient(rgba(255,255,255,.06) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.04) 1px, transparent 1px);
  background-size: 48px 48px;
  mask-image: linear-gradient(#000, transparent 82%);
}
.awards-page [data-reveal],
.awards-page [data-stagger] > * {
  opacity: 1;
  transform: none;
}
.awards-hero {
  position: relative;
  z-index: 1;
  width: min(calc(100% - 40px), 1480px);
  min-height: min(100dvh, 980px);
  margin: 0 auto;
  padding: clamp(118px, 12vw, 184px) 0 clamp(58px, 7vw, 110px);
  display: grid;
  grid-template-columns: minmax(0, .94fr) minmax(320px, .68fr);
  gap: clamp(28px, 5vw, 86px);
  align-items: center;
}
.awards-kicker {
  margin: 0 0 18px;
  color: var(--awards-accent);
  font: 800 12px/1 var(--mono);
  letter-spacing: .16em;
  text-transform: uppercase;
}
.awards-hero h1 {
  margin: 0;
  font-family: var(--display);
  font-size: clamp(68px, 14vw, 228px);
  line-height: .78;
  letter-spacing: -.08em;
  text-transform: uppercase;
}
.awards-lead {
  width: min(680px, 100%);
  margin: clamp(24px, 3vw, 40px) 0 0;
  color: var(--awards-muted);
  font-family: var(--serif);
  font-size: clamp(19px, 1.8vw, 30px);
  line-height: 1.42;
  letter-spacing: -.02em;
}
.awards-hero__nav {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 34px;
}
.awards-hero__nav a {
  display: inline-flex;
  align-items: center;
  min-height: 42px;
  padding: 12px 16px;
  border: 1px solid var(--awards-line);
  border-radius: 999px;
  background: rgba(255,255,255,.045);
  color: var(--awards-ink);
  font: 800 12px/1 var(--mono);
  letter-spacing: .08em;
  text-transform: uppercase;
  transition: transform .25s var(--ease), background .25s var(--ease), border-color .25s var(--ease);
}
.awards-hero__nav a:hover {
  transform: translateY(-2px);
  border-color: color-mix(in srgb, var(--awards-accent) 62%, var(--awards-line));
  background: rgba(229,189,104,.12);
}
.awards-hero__stack {
  position: relative;
  min-height: clamp(440px, 48vw, 690px);
}
.awards-hero__doc,
.award-doc {
  position: relative;
  display: block;
  color: inherit;
  transform-style: preserve-3d;
}
.awards-hero__doc {
  position: absolute;
  width: min(72%, 390px);
  border: 1px solid rgba(255,255,255,.24);
  border-radius: 18px;
  overflow: hidden;
  background: #17130d;
  box-shadow: 0 34px 120px rgba(0,0,0,.5);
  transition: transform .4s var(--ease), border-color .3s var(--ease);
}
.awards-hero__doc img,
.award-doc img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  background: #16120c;
}
.awards-hero__doc--1 {
  left: 8%;
  top: 4%;
  z-index: 3;
  aspect-ratio: 3 / 4.15;
  transform: rotate(-7deg);
}
.awards-hero__doc--2 {
  right: 0;
  top: 17%;
  z-index: 2;
  aspect-ratio: 3 / 4.15;
  transform: rotate(8deg);
}
.awards-hero__doc--3 {
  left: 22%;
  bottom: 0;
  z-index: 1;
  aspect-ratio: 3 / 4.15;
  transform: rotate(2deg);
  opacity: .9;
}
.awards-hero__doc:hover {
  z-index: 5;
  border-color: color-mix(in srgb, var(--awards-accent) 70%, white);
  transform: rotate(0deg) translateY(-10px) scale(1.03);
}
.awards-stats {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1px;
  border: 1px solid var(--awards-line);
  border-radius: 22px;
  overflow: hidden;
  background: var(--awards-line);
}
.awards-stats span {
  min-height: 116px;
  padding: 22px;
  display: grid;
  align-content: end;
  gap: 10px;
  background: rgba(255,255,255,.045);
}
.awards-stats b {
  font-family: var(--display);
  font-size: clamp(30px, 4vw, 68px);
  line-height: .84;
  letter-spacing: -.06em;
}
.awards-stats small {
  color: var(--awards-dim);
  font: 800 11px/1.2 var(--mono);
  letter-spacing: .12em;
  text-transform: uppercase;
}
.awards-archive {
  position: relative;
  z-index: 1;
  width: min(calc(100% - 40px), 1480px);
  margin: 0 auto;
  padding: 0 0 clamp(90px, 12vw, 180px);
}
.awards-shelf {
  position: relative;
  scroll-margin-top: 110px;
  padding: clamp(74px, 9vw, 132px) 0;
  border-top: 1px solid var(--awards-line);
}
.awards-shelf__head {
  display: grid;
  grid-template-columns: .28fr minmax(0, .9fr) minmax(260px, .48fr) auto;
  gap: clamp(18px, 3vw, 42px);
  align-items: end;
  margin-bottom: clamp(34px, 5vw, 76px);
}
.awards-shelf__head span,
.awards-shelf__head strong {
  color: var(--awards-accent);
  font: 800 12px/1 var(--mono);
  letter-spacing: .16em;
  text-transform: uppercase;
}
.awards-shelf__head h2 {
  margin: 0;
  font-family: var(--display);
  font-size: clamp(42px, 6vw, 104px);
  line-height: .88;
  letter-spacing: -.07em;
  text-transform: uppercase;
}
.awards-shelf__head p {
  margin: 0;
  color: var(--awards-muted);
  font-size: clamp(16px, 1.15vw, 19px);
  line-height: 1.55;
}
.awards-grid {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: clamp(14px, 1.5vw, 22px);
  align-items: start;
}
.award-doc {
  grid-column: span 3;
  border-radius: 18px;
  transition: transform .3s var(--ease), filter .3s var(--ease);
}
.award-doc figure {
  margin: 0;
  border: 1px solid var(--awards-line);
  border-radius: inherit;
  overflow: hidden;
  background: var(--awards-panel);
  box-shadow: 0 22px 70px rgba(0,0,0,.28);
}
.award-doc img {
  aspect-ratio: 3 / 4.1;
  filter: saturate(.94) contrast(1.02);
  transition: transform .45s var(--ease), filter .3s var(--ease);
}
.award-doc figcaption {
  min-height: 94px;
  padding: 16px;
  display: grid;
  align-content: end;
  gap: 8px;
  border-top: 1px solid rgba(255,255,255,.1);
}
.award-doc figcaption span {
  color: var(--awards-accent);
  font: 800 11px/1 var(--mono);
  letter-spacing: .14em;
  text-transform: uppercase;
}
.award-doc figcaption b {
  color: var(--awards-ink);
  font: 800 clamp(16px, 1.25vw, 21px)/1.08 var(--sans);
  letter-spacing: -.03em;
}
.award-doc:hover {
  z-index: 4;
  filter: drop-shadow(0 24px 52px rgba(0,0,0,.35));
  transform: translateY(-8px) rotate(0deg) !important;
}
.award-doc:hover figure {
  border-color: color-mix(in srgb, var(--awards-accent) 66%, var(--awards-line));
}
.award-doc:hover img {
  filter: saturate(1.04) contrast(1.05);
  transform: scale(1.025);
}
.award-doc--0 { grid-column: span 4; transform: rotate(-1.8deg); }
.award-doc--1 { grid-column: span 3; margin-top: 44px; transform: rotate(1.3deg); }
.award-doc--2 { grid-column: span 5; transform: rotate(.5deg); }
.award-doc--3 { grid-column: span 3; transform: rotate(-.8deg); }
.award-doc--4 { grid-column: span 4; margin-top: -24px; transform: rotate(1.7deg); }
.award-doc--5 { grid-column: span 2; margin-top: 30px; transform: rotate(-1.1deg); }
.award-doc--6 { grid-column: span 3; transform: rotate(.9deg); }
.awards-shelf--raion .award-doc { grid-column: span 3; }
.awards-shelf--raion .award-doc--0,
.awards-shelf--raion .award-doc--3 { grid-column: span 4; }

@media (max-width: 1180px) {
  .awards-hero {
    grid-template-columns: 1fr;
    min-height: 0;
  }
  .awards-hero__stack {
    min-height: 560px;
  }
  .awards-shelf__head {
    grid-template-columns: 1fr;
    align-items: start;
  }
  .award-doc,
  .award-doc--0,
  .award-doc--1,
  .award-doc--2,
  .award-doc--3,
  .award-doc--4,
  .award-doc--5,
  .award-doc--6,
  .awards-shelf--raion .award-doc,
  .awards-shelf--raion .award-doc--0,
  .awards-shelf--raion .award-doc--3 {
    grid-column: span 4;
  }
}
@media (max-width: 820px) {
  .awards-hero,
  .awards-archive {
    width: min(100% - 28px, 1480px);
  }
  .awards-hero {
    padding-top: 112px;
  }
  .awards-hero h1 {
    font-size: clamp(58px, 20vw, 132px);
  }
  .awards-hero__stack {
    min-height: 470px;
  }
  .awards-hero__doc {
    width: min(66%, 310px);
    border-radius: 14px;
  }
  .awards-stats {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .awards-stats span {
    min-height: 104px;
  }
  .award-doc,
  .award-doc--0,
  .award-doc--1,
  .award-doc--2,
  .award-doc--3,
  .award-doc--4,
  .award-doc--5,
  .award-doc--6,
  .awards-shelf--raion .award-doc,
  .awards-shelf--raion .award-doc--0,
  .awards-shelf--raion .award-doc--3 {
    grid-column: span 6;
    margin-top: 0;
    transform: none;
  }
}
@media (max-width: 560px) {
  .awards-hero__nav {
    display: grid;
  }
  .awards-hero__nav a {
    justify-content: center;
  }
  .awards-hero__stack {
    min-height: 390px;
  }
  .awards-hero__doc--1 { left: 0; }
  .awards-hero__doc--2 { right: 0; top: 22%; }
  .awards-hero__doc--3 { left: 14%; }
  .awards-stats {
    grid-template-columns: 1fr;
  }
  .awards-grid {
    grid-template-columns: 1fr;
  }
  .award-doc,
  .award-doc--0,
  .award-doc--1,
  .award-doc--2,
  .award-doc--3,
  .award-doc--4,
  .award-doc--5,
  .award-doc--6,
  .awards-shelf--raion .award-doc,
  .awards-shelf--raion .award-doc--0,
  .awards-shelf--raion .award-doc--3 {
    grid-column: 1;
  }
  .award-doc figcaption {
    min-height: 82px;
  }
}

/* ------------------------------------------------ mobile story route */
@media (max-width: 720px) {
  body:has([data-page="about"]) .route-section {
    overflow: hidden;
  }
  body:has([data-page="about"]) .route-head {
    gap: 14px;
  }
  body:has([data-page="about"]) .route-head .display-xl {
    font-size: clamp(56px, 18vw, 96px);
    line-height: .82;
  }
  body:has([data-page="about"]) .route-board {
    max-width: min(100% - 28px, var(--maxw));
    margin-top: 30px;
    padding: 18px 0 28px;
  }
  body:has([data-page="about"]) .route-board::before {
    content: "";
    position: absolute;
    left: 25px;
    top: 110px;
    bottom: 46px;
    z-index: 0;
    width: 1px;
    background: linear-gradient(180deg, transparent, rgba(16,185,129,.72) 8%, rgba(16,185,129,.22) 78%, transparent);
    box-shadow: 0 0 26px rgba(16,185,129,.32);
  }
  body:has([data-page="about"]) .route-map-bg {
    inset: 0 auto 0 0;
    width: 92px;
    border-radius: 999px;
    opacity: .58;
  }
  body:has([data-page="about"]) .route-map-bg span:nth-child(1) {
    width: 190px;
    height: 72px;
    left: -88px;
    top: 4%;
  }
  body:has([data-page="about"]) .route-map-bg span:nth-child(2) {
    width: 210px;
    height: 84px;
    left: -116px;
    top: 42%;
  }
  body:has([data-page="about"]) .route-map-bg span:nth-child(3) {
    width: 180px;
    height: 74px;
    left: -82px;
    bottom: 6%;
  }
  body:has([data-page="about"]) .route-rail {
    display: block;
    left: -78px;
    top: 112px;
    width: 220px;
    height: calc(100% - 150px);
    z-index: 0;
    opacity: .9;
  }
  body:has([data-page="about"]) .route-rail-path {
    stroke-width: 4;
    stroke-dasharray: 10 18;
    stroke: rgba(16,185,129,.56);
  }
  body:has([data-page="about"]) .route-manifest {
    position: relative;
    z-index: 2;
    width: calc(100% - 56px);
    margin: 0 0 24px 56px;
    padding: 14px 16px;
    border-radius: 18px;
  }
  body:has([data-page="about"]) .route-manifest b {
    font-size: 18px;
  }
  body:has([data-page="about"]) .route-chapters {
    position: relative;
    z-index: 1;
    gap: 22px;
  }
  body:has([data-page="about"]) .route-chapter,
  body:has([data-page="about"]) .route-chapter.is-left,
  body:has([data-page="about"]) .route-chapter.is-right {
    display: grid;
    grid-template-columns: 52px minmax(0, 1fr);
    grid-template-rows: auto auto;
    gap: 10px 12px;
    min-height: 0;
    padding: 0 0 0 0;
  }
  body:has([data-page="about"]) .route-pin {
    grid-column: 1 !important;
    grid-row: 1 / span 2;
    align-self: start;
    justify-self: center;
    display: grid;
    gap: 8px;
    padding-top: 18px;
    color: var(--accent);
    text-align: center;
  }
  body:has([data-page="about"]) .route-pin span {
    writing-mode: vertical-rl;
    transform: rotate(180deg);
    font-size: 10px;
    letter-spacing: .16em;
  }
  body:has([data-page="about"]) .route-pin i {
    width: 18px;
    height: 18px;
    margin: 0;
    border-width: 2px;
    background: #050505;
    box-shadow: 0 0 0 7px rgba(16,185,129,.1), 0 0 28px rgba(16,185,129,.72);
  }
  body:has([data-page="about"]) .route-photo,
  body:has([data-page="about"]) .route-chapter.is-left .route-photo,
  body:has([data-page="about"]) .route-chapter.is-right .route-photo {
    grid-column: 2;
    grid-row: 1;
    min-height: 164px;
    aspect-ratio: 16 / 11;
    border-radius: 22px;
    transform: rotate(-1.5deg);
    box-shadow: 0 22px 70px rgba(0,0,0,.34);
  }
  body:has([data-page="about"]) .route-chapter:nth-child(even) .route-photo {
    transform: rotate(1.4deg);
  }
  body:has([data-page="about"]) .route-photo::after {
    inset: 9px;
    border-radius: 16px;
  }
  body:has([data-page="about"]) .route-photo figcaption {
    left: 10px;
    right: 10px;
    bottom: 10px;
    padding: 8px 10px;
    letter-spacing: .09em;
  }
  body:has([data-page="about"]) .route-photo figcaption b {
    max-width: 20ch;
  }
  body:has([data-page="about"]) .route-note,
  body:has([data-page="about"]) .route-chapter.is-left .route-note,
  body:has([data-page="about"]) .route-chapter.is-right .route-note {
    grid-column: 2;
    grid-row: 2;
    margin-top: -22px;
    margin-left: 14px;
    padding: 18px;
    border-radius: 22px;
    background:
      linear-gradient(180deg, rgba(255,255,255,.1), rgba(255,255,255,.035)),
      rgba(5,5,5,.64);
    backdrop-filter: blur(18px);
    -webkit-backdrop-filter: blur(18px);
  }
  body:has([data-page="about"]) .route-note__top {
    gap: 10px;
  }
  body:has([data-page="about"]) .route-note__top span,
  body:has([data-page="about"]) .route-note__top small {
    font-size: 9px;
  }
  body:has([data-page="about"]) .route-note h3 {
    margin: 14px 0 10px;
    font-size: clamp(24px, 8vw, 36px);
    line-height: .94;
  }
  body:has([data-page="about"]) .route-note p {
    font-size: 15px;
    line-height: 1.52;
  }
  body:has([data-page="about"]) .route-note__foot {
    margin-top: 15px;
    gap: 9px;
  }
  body:has([data-page="about"]) .route-note__foot i {
    flex: 1;
    width: auto;
    min-width: 24px;
  }
}

/* ------------------------------------------------ home digital diary redesign */
:root {
  --accent: #9cff6e;
  --accent-ink: #0d1110;
  --bg: #0d1110;
  --panel: #141a18;
  --panel-2: #1b2420;
  --card: #141a18;
  --card-2: #1b2420;
  --ink: #eef5ef;
  --ink-2: #9aa8a0;
  --ink-3: rgba(154,168,160,.72);
  --line: rgba(238,245,239,.12);
  --on-dark: #eef5ef;
  --on-dark-2: #9aa8a0;
  --dot-light: rgba(238,245,239,.055);
  --dot-dark: rgba(238,245,239,.065);
  --radius: 16px;
  --radius-lg: 24px;
  --ff-display: "Unbounded", "Space Grotesk", "Manrope", system-ui, sans-serif;
  --ff-head: "Onest", "Manrope", system-ui, sans-serif;
  --ff-body: "Inter", "IBM Plex Sans", system-ui, -apple-system, sans-serif;
  --ff-mono: "JetBrains Mono", ui-monospace, monospace;
}

:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 4px;
}

body {
  background:
    radial-gradient(circle at 18% 0%, rgba(156,255,110,.10), transparent 30%),
    radial-gradient(circle at 82% 12%, rgba(238,245,239,.055), transparent 25%),
    linear-gradient(180deg, #0d1110 0%, #111715 54%, #0d1110 100%);
  background-attachment: fixed;
}

body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  opacity: .42;
  background-image:
    linear-gradient(rgba(238,245,239,.055) 1px, transparent 1px),
    linear-gradient(90deg, rgba(238,245,239,.04) 1px, transparent 1px);
  background-size: 56px 56px;
  mask-image: linear-gradient(#000, transparent 78%);
  -webkit-mask-image: linear-gradient(#000, transparent 78%);
}

.home-diary {
  position: relative;
  overflow: hidden;
  padding: clamp(36px, 6vw, 88px) 0 clamp(28px, 5vw, 68px);
}

.home-diary::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background:
    radial-gradient(circle at 72% 38%, rgba(156,255,110,.16), transparent 24%),
    radial-gradient(circle at 46% 88%, rgba(238,245,239,.06), transparent 22%);
}

.home-diary__grid {
  display: grid;
  grid-template-columns: minmax(0, .92fr) minmax(360px, .78fr);
  align-items: center;
  gap: clamp(26px, 5vw, 84px);
  min-height: min(720px, calc(100dvh - 96px));
}

.home-diary__copy {
  max-width: 760px;
}

.home-kicker,
.home-section-head span,
.project-story__label {
  margin: 0;
  color: var(--accent);
  font-family: var(--ff-mono);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: .12em;
  text-transform: uppercase;
}

.home-diary h1 {
  max-width: 12ch;
  margin-top: 18px;
  font-family: var(--ff-display);
  font-size: clamp(42px, 7.2vw, 88px);
  line-height: .95;
  letter-spacing: -.055em;
  text-wrap: balance;
}

.home-diary__sub {
  max-width: 620px;
  margin: clamp(20px, 2.8vw, 32px) 0 0;
  color: var(--ink-2);
  font-size: clamp(17px, 1.45vw, 20px);
  line-height: 1.62;
}

.home-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: clamp(26px, 3.6vw, 42px);
}

.home-action {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-height: 48px;
  padding: 0 18px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: rgba(238,245,239,.045);
  color: var(--ink);
  font-family: var(--ff-head);
  font-size: 14px;
  font-weight: 700;
  white-space: nowrap;
  transition: transform .22s ease, border-color .22s ease, background .22s ease, color .22s ease;
}

.home-action--primary {
  border-color: transparent;
  background: var(--accent);
  color: var(--accent-ink);
}

.home-action span {
  transition: transform .22s ease;
}

.home-action:hover {
  transform: translateY(-2px);
  border-color: rgba(156,255,110,.48);
  background: rgba(156,255,110,.13);
}

.home-action--primary:hover {
  background: #b2ff8b;
  color: var(--accent-ink);
}

.home-action:hover span {
  transform: translate(4px, -1px);
}

.diary-terminal {
  position: relative;
  overflow: hidden;
  border: 1px solid rgba(238,245,239,.14);
  border-radius: var(--radius-lg);
  background:
    linear-gradient(180deg, rgba(238,245,239,.07), rgba(238,245,239,.025)),
    var(--panel);
  box-shadow:
    0 34px 110px rgba(0,0,0,.36),
    inset 0 1px 0 rgba(238,245,239,.08);
}

.diary-terminal::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: .44;
  background-image:
    linear-gradient(rgba(238,245,239,.045) 1px, transparent 1px),
    linear-gradient(90deg, rgba(238,245,239,.035) 1px, transparent 1px);
  background-size: 34px 34px;
}

.diary-terminal__bar {
  position: relative;
  z-index: 1;
  display: flex;
  gap: 8px;
  padding: 16px 18px;
  border-bottom: 1px solid var(--line);
}

.diary-terminal__bar span {
  width: 10px;
  height: 10px;
  border-radius: 999px;
  background: rgba(238,245,239,.24);
}

.diary-terminal__bar span:first-child {
  background: var(--accent);
  box-shadow: 0 0 20px rgba(156,255,110,.54);
}

.diary-terminal__body {
  position: relative;
  z-index: 1;
  display: grid;
  gap: 26px;
  padding: clamp(24px, 4vw, 46px);
}

.term-line {
  display: grid;
  gap: 8px;
  margin: 0;
  font-family: var(--ff-mono);
  opacity: 0;
  transform: translateY(12px);
  animation: termIn .54s ease forwards;
  animation-delay: calc(var(--i) * .18s + .18s);
}

.term-line span {
  color: var(--accent);
  font-size: 12px;
}

.term-line b {
  color: var(--ink);
  font-size: clamp(17px, 1.55vw, 21px);
  font-weight: 500;
  line-height: 1.45;
}

@keyframes termIn {
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.home-section-head {
  max-width: 780px;
  margin-bottom: clamp(22px, 3.4vw, 42px);
}

.home-section-head h2 {
  margin-top: 12px;
  font-size: clamp(28px, 4.2vw, 54px);
  line-height: 1;
  letter-spacing: -.045em;
  text-wrap: balance;
}

.home-section-head p {
  max-width: 62ch;
  margin: 14px 0 0;
  color: var(--ink-2);
  font-size: 16px;
  line-height: 1.64;
}

.direction-grid,
.project-story-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(14px, 2vw, 22px);
}

.project-story-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.direction-card,
.project-story,
.note-card,
.now-note {
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  background:
    radial-gradient(circle at 100% 0%, rgba(156,255,110,.09), transparent 34%),
    linear-gradient(180deg, rgba(238,245,239,.055), rgba(238,245,239,.022)),
    var(--panel);
}

.direction-card {
  position: relative;
  overflow: hidden;
  min-height: 250px;
  padding: clamp(22px, 2.8vw, 32px);
  transition: transform .22s ease, border-color .22s ease, background .22s ease;
}

.direction-card:hover {
  transform: translateY(-5px);
  border-color: rgba(156,255,110,.42);
}

.direction-card h3 {
  margin-top: 76px;
  font-size: clamp(24px, 2.4vw, 34px);
}

.direction-card p {
  margin: 12px 0 0;
  color: var(--ink-2);
  font-size: 15px;
  line-height: 1.58;
}

.direction-card__mark {
  position: absolute;
  top: 22px;
  left: 22px;
  width: 84px;
  height: 54px;
  color: var(--accent);
}

.direction-card--code .direction-card__mark {
  background-image:
    linear-gradient(currentColor 1px, transparent 1px),
    linear-gradient(90deg, currentColor 1px, transparent 1px);
  background-size: 14px 14px;
  opacity: .58;
}

.direction-card--code .direction-card__mark::after {
  content: "{}";
  position: absolute;
  right: -24px;
  top: 12px;
  font: 600 24px/1 var(--ff-mono);
}

.direction-card--explain .direction-card__mark i {
  position: absolute;
  left: 0;
  right: 0;
  height: 2px;
  border-radius: 99px;
  background: currentColor;
  opacity: .74;
}

.direction-card--explain .direction-card__mark i:nth-child(1) { top: 8px; width: 92%; }
.direction-card--explain .direction-card__mark i:nth-child(2) { top: 25px; width: 66%; }
.direction-card--explain .direction-card__mark i:nth-child(3) { top: 42px; width: 78%; }

.direction-card--experiment .direction-card__mark i {
  position: absolute;
  width: 9px;
  height: 9px;
  border-radius: 999px;
  background: currentColor;
  box-shadow: 0 0 24px rgba(156,255,110,.66);
}

.direction-card--experiment .direction-card__mark i:nth-child(1) { left: 6px; top: 35px; }
.direction-card--experiment .direction-card__mark i:nth-child(2) { left: 37px; top: 8px; }
.direction-card--experiment .direction-card__mark i:nth-child(3) { left: 70px; top: 38px; }
.direction-card--experiment .direction-card__mark::before {
  content: "";
  position: absolute;
  inset: 4px 0 0 7px;
  width: 70px;
  height: 40px;
  border: 1px solid currentColor;
  border-radius: 50%;
  transform: rotate(-15deg);
  opacity: .5;
}

.project-story {
  position: relative;
  overflow: hidden;
  min-height: 460px;
  display: grid;
  align-content: end;
  color: var(--ink);
  transform: none;
  transition: transform .25s ease, border-color .25s ease;
}

.project-story:hover,
.project-story:focus-visible {
  transform: translateY(-6px);
  border-color: rgba(156,255,110,.46);
}

.project-story__media {
  position: absolute;
  inset: 0;
  overflow: hidden;
  border-radius: inherit;
}

.project-story__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: .42;
  filter: saturate(.8) contrast(1.05);
  transition: transform .45s ease, opacity .25s ease;
}

.project-story:hover .project-story__media img {
  transform: scale(1.04);
  opacity: .24;
}

.project-story__media::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(13,17,16,.18), rgba(13,17,16,.88) 58%, rgba(13,17,16,.98));
}

.project-story__media span {
  position: absolute;
  top: 18px;
  left: 18px;
  z-index: 2;
  padding: 8px 12px;
  border: 1px solid rgba(238,245,239,.16);
  border-radius: 999px;
  background: rgba(13,17,16,.62);
  color: var(--ink);
  font: 600 11px/1 var(--ff-mono);
  letter-spacing: .1em;
  text-transform: uppercase;
}

.project-story__main,
.project-story__layer {
  position: relative;
  z-index: 2;
  padding: clamp(22px, 3vw, 34px);
}

.project-story__main h3 {
  margin-top: 10px;
  font-size: clamp(28px, 3.1vw, 44px);
  letter-spacing: -.045em;
}

.project-story__main p {
  max-width: 34em;
  margin: 12px 0 0;
  color: var(--ink-2);
  line-height: 1.58;
}

.project-story__layer {
  position: absolute;
  inset: auto 14px 14px;
  border: 1px solid rgba(238,245,239,.12);
  border-radius: 20px;
  background: rgba(20,26,24,.88);
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
  opacity: 0;
  transform: translateY(18px);
  transition: opacity .25s ease, transform .25s ease;
}

.project-story:hover .project-story__layer,
.project-story:focus-visible .project-story__layer {
  opacity: 1;
  transform: translateY(0);
}

.project-story__layer dl {
  display: grid;
  gap: 5px;
  margin: 0;
}

.project-story__layer dt {
  margin-top: 10px;
  color: var(--accent);
  font: 600 12px/1.2 var(--ff-mono);
}

.project-story__layer dt:first-child {
  margin-top: 0;
}

.project-story__layer dd {
  margin: 0;
  color: var(--ink);
  font-size: 14px;
  line-height: 1.48;
}

.project-story__go {
  position: absolute;
  right: 18px;
  top: 18px;
  color: var(--accent);
  font-size: 18px;
}

.home-timeline {
  position: relative;
  overflow: hidden;
}

.home-timeline .wrap {
  position: relative;
}

.path-circuit {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(260px, 340px);
  gap: clamp(18px, 3vw, 30px);
  align-items: stretch;
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  background:
    radial-gradient(circle at 16% 14%, rgba(16,185,129,.16), transparent 30%),
    radial-gradient(circle at 88% 74%, rgba(156,255,110,.11), transparent 27%),
    linear-gradient(180deg, rgba(238,245,239,.055), rgba(238,245,239,.02)),
    #101713;
  padding: clamp(16px, 2.6vw, 26px);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.025), 0 26px 90px rgba(0,0,0,.28);
}

.path-circuit::before {
  content: "";
  position: absolute;
  inset: 14px;
  pointer-events: none;
  border: 1px solid rgba(16,185,129,.14);
  border-radius: calc(var(--radius-lg) - 8px);
}

.path-circuit__board {
  position: relative;
  min-height: clamp(430px, 48vw, 560px);
  overflow: hidden;
  border: 1px solid rgba(238,245,239,.11);
  border-radius: 18px;
  background:
    linear-gradient(90deg, rgba(238,245,239,.032) 1px, transparent 1px),
    linear-gradient(rgba(238,245,239,.032) 1px, transparent 1px),
    radial-gradient(circle at 50% 50%, rgba(16,185,129,.08), transparent 52%),
    #0b1310;
  background-size: 32px 32px, 32px 32px, auto, auto;
}

.path-circuit__svg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  color: var(--accent);
}

.path-circuit__trace {
  fill: none;
  stroke-linecap: round;
  stroke-linejoin: round;
  vector-effect: non-scaling-stroke;
}

.path-circuit__trace--base {
  stroke: rgba(238,245,239,.14);
  stroke-width: 2.1;
}

.path-circuit__trace--live {
  stroke: var(--accent);
  stroke-width: 2.6;
  stroke-dasharray: 240;
  stroke-dashoffset: calc(240 - (var(--path-progress, 0) * 240));
  filter: url(#pcbGlow);
  opacity: .95;
}

.path-circuit__vias circle {
  fill: #0b1310;
  stroke: rgba(156,255,110,.52);
  stroke-width: .65;
  vector-effect: non-scaling-stroke;
}

.path-circuit__node {
  position: absolute;
  left: var(--x);
  top: var(--y);
  z-index: 2;
  width: clamp(118px, 13vw, 154px);
  min-height: 78px;
  display: grid;
  gap: 7px;
  align-content: center;
  border: 1px solid rgba(238,245,239,.16);
  border-radius: 10px;
  padding: 14px 14px 13px;
  background:
    linear-gradient(180deg, rgba(238,245,239,.08), rgba(238,245,239,.025)),
    rgba(9,18,14,.92);
  color: var(--ink);
  cursor: pointer;
  font: inherit;
  text-align: left;
  transform: translate(-50%, -50%);
  box-shadow: 0 14px 36px rgba(0,0,0,.28);
  transition: border-color .2s ease, box-shadow .2s ease, transform .2s ease, background .2s ease;
}

.path-circuit__node::before,
.path-circuit__node::after {
  content: "";
  position: absolute;
  left: 14px;
  right: 14px;
  height: 4px;
  background: repeating-linear-gradient(90deg, rgba(156,255,110,.52) 0 5px, transparent 5px 10px);
  opacity: .45;
}

.path-circuit__node::before { top: -5px; }
.path-circuit__node::after { bottom: -5px; }

.path-circuit__node:hover,
.path-circuit__node:focus-visible,
.path-circuit__node.is-active {
  border-color: rgba(156,255,110,.68);
  background:
    radial-gradient(circle at 100% 0%, rgba(156,255,110,.16), transparent 34%),
    linear-gradient(180deg, rgba(238,245,239,.1), rgba(238,245,239,.035)),
    rgba(10,24,17,.96);
  box-shadow: 0 18px 52px rgba(0,0,0,.34), 0 0 30px rgba(16,185,129,.16);
  transform: translate(-50%, -50%) scale(1.025);
}

.path-circuit__node:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 4px;
}

.path-circuit__pin {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 18px;
  height: 18px;
  border: 2px solid rgba(156,255,110,.72);
  border-radius: 999px;
  background: #0b1310;
  transform: translate(-50%, -50%);
  box-shadow: 0 0 0 7px rgba(16,185,129,.08);
  opacity: .28;
}

.path-circuit__node.is-active .path-circuit__pin {
  background: var(--accent);
  box-shadow: 0 0 0 8px rgba(16,185,129,.13), 0 0 28px rgba(16,185,129,.45);
  opacity: .75;
}

.path-circuit__node small,
.path-circuit__panel small {
  color: var(--accent);
  font: 600 12px/1 var(--ff-mono);
  letter-spacing: .12em;
  text-transform: uppercase;
}

.path-circuit__node strong {
  position: relative;
  z-index: 1;
  font-family: var(--ff-head);
  font-size: clamp(14px, 1.35vw, 18px);
  line-height: 1.14;
  letter-spacing: 0;
}

.path-circuit__panel {
  position: relative;
  z-index: 1;
  display: grid;
  align-content: end;
  border: 1px solid rgba(238,245,239,.12);
  border-radius: 18px;
  padding: clamp(22px, 3vw, 30px);
  background:
    radial-gradient(circle at 90% 12%, rgba(16,185,129,.14), transparent 34%),
    linear-gradient(180deg, rgba(238,245,239,.07), rgba(238,245,239,.025)),
    rgba(8,13,11,.78);
}

.path-circuit__panel h3 {
  margin-top: 14px;
  font-size: clamp(28px, 3vw, 42px);
  letter-spacing: -.045em;
}

.path-circuit__panel p {
  margin: 14px 0 0;
  color: var(--ink-2);
  line-height: 1.58;
}

.now-note {
  position: relative;
  max-width: 880px;
  margin-left: auto;
  padding: clamp(28px, 4vw, 46px);
  box-shadow: 0 24px 90px rgba(0,0,0,.22);
}

.now-note__pin {
  position: absolute;
  top: 22px;
  right: 24px;
  width: 44px;
  height: 44px;
  border: 1px solid rgba(156,255,110,.42);
  border-radius: 999px;
  background:
    radial-gradient(circle, var(--accent) 0 4px, transparent 5px),
    rgba(156,255,110,.08);
}

.now-note h2 {
  max-width: 14ch;
  font-size: clamp(28px, 3.8vw, 48px);
}

.now-note ul {
  display: grid;
  gap: 12px;
  margin: 24px 0 0;
  padding: 0;
  list-style: none;
}

.now-note li {
  position: relative;
  padding-left: 24px;
  color: var(--ink-2);
  line-height: 1.58;
  opacity: 0;
  transform: translateY(10px);
}

.now-note.is-in li {
  animation: noteItemIn .48s ease forwards;
}

.now-note.is-in li:nth-child(2) { animation-delay: .08s; }
.now-note.is-in li:nth-child(3) { animation-delay: .16s; }
.now-note.is-in li:nth-child(4) { animation-delay: .24s; }

.now-note li::before {
  content: "";
  position: absolute;
  left: 0;
  top: .78em;
  width: 10px;
  height: 2px;
  border-radius: 99px;
  background: var(--accent);
}

@keyframes noteItemIn {
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.note-card {
  min-height: 230px;
  padding: 4px;
}

.note-card .card__body {
  padding: 20px;
}

.note-card .card__body h3 {
  font-size: 22px;
}

.home-about {
  padding-top: clamp(46px, 7vw, 90px);
}

.home-directions,
.home-projects,
.home-timeline,
.home-now,
#library,
.home-about {
  content-visibility: auto;
  contain-intrinsic-size: 1px 720px;
}

[data-home-reveal],
.project-story,
.path-circuit__node {
  will-change: transform, opacity;
}

[data-home-reveal] {
  opacity: 0;
  transform: translateY(16px);
  transition: opacity .5s ease, transform .5s ease;
}

[data-home-reveal].is-in {
  opacity: 1;
  transform: translateY(0);
}

.reveal {
  opacity: 0;
  transform: translateY(16px);
}

.reveal.is-in {
  opacity: 1;
  transform: translateY(0);
}

@media (max-width: 980px) {
  .home-diary__grid,
  .direction-grid,
  .project-story-grid {
    grid-template-columns: 1fr;
  }

  .home-diary__grid {
    min-height: 0;
  }

  .home-diary h1 {
    max-width: 11ch;
  }

  .project-story {
    min-height: 0;
    padding-top: 280px;
  }

  .project-story__layer {
    position: relative;
    inset: auto;
    margin: 0 14px 14px;
    opacity: 1;
    transform: none;
  }
}

@media (max-width: 720px) {
  .home-diary {
    padding-top: 34px;
  }

  .home-diary h1 {
    font-size: clamp(38px, 13vw, 58px);
  }

  .home-actions {
    display: grid;
  }

  .home-action {
    width: 100%;
  }

  .diary-terminal__body {
    gap: 20px;
    padding: 22px;
  }

  .direction-card {
    min-height: 220px;
  }

  .project-story {
    padding-top: 220px;
  }

  .project-story__main,
  .project-story__layer {
    padding: 20px;
  }

  .project-story__main h3 {
    font-size: 28px;
  }

  .path-circuit {
    grid-template-columns: 1fr;
    padding: 14px;
  }

  .path-circuit__board {
    min-height: 620px;
  }

  .path-circuit__node {
    width: min(148px, 42vw);
    min-height: 70px;
    padding: 12px;
  }

  .path-circuit__node:nth-of-type(1) { --x: 28% !important; --y: 10% !important; }
  .path-circuit__node:nth-of-type(2) { --x: 72% !important; --y: 23% !important; }
  .path-circuit__node:nth-of-type(3) { --x: 28% !important; --y: 36% !important; }
  .path-circuit__node:nth-of-type(4) { --x: 72% !important; --y: 49% !important; }
  .path-circuit__node:nth-of-type(5) { --x: 28% !important; --y: 62% !important; }
  .path-circuit__node:nth-of-type(6) { --x: 72% !important; --y: 75% !important; }
  .path-circuit__node:nth-of-type(7) { --x: 50% !important; --y: 90% !important; }

  .path-circuit__node strong {
    font-size: 14px;
  }

  .path-circuit__panel {
    min-height: 220px;
  }

  .now-note {
    padding: 24px 20px;
  }

  .now-note__pin {
    display: none;
  }
}

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

  [data-home-reveal],
  .project-story,
  .path-circuit__node,
  .reveal,
  .term-line,
  .now-note li {
    opacity: 1 !important;
    transform: none !important;
  }
}

html.perf-lite .home-directions,
html.perf-lite .home-projects,
html.perf-lite .home-timeline,
html.perf-lite .home-now,
html.perf-lite #library,
html.perf-lite .home-about {
  contain-intrinsic-size: 1px 560px;
}

html.perf-lite [data-home-reveal],
html.perf-lite .project-story,
html.perf-lite .path-circuit__node,
html.perf-lite .reveal,
html.perf-lite .term-line,
html.perf-lite .now-note li {
  opacity: 1 !important;
  transform: none !important;
  animation: none !important;
  transition: none !important;
  will-change: auto;
}

html.perf-lite .diary-terminal,
html.perf-lite .direction-card,
html.perf-lite .project-story,
html.perf-lite .note-card,
html.perf-lite .now-note,
html.perf-lite .path-circuit,
html.perf-lite .path-circuit__node {
  box-shadow: none;
}

html.perf-lite .diary-terminal::before,
html.perf-lite .path-circuit::before {
  opacity: .18;
}

html.perf-lite .project-story__media img {
  filter: none;
  transition: none;
}

html.perf-lite .project-story:hover,
html.perf-lite .project-story:focus-visible,
html.perf-lite .direction-card:hover,
html.perf-lite .path-circuit__node:hover,
html.perf-lite .path-circuit__node:focus-visible,
html.perf-lite .path-circuit__node.is-active {
  transform: none;
}

html.perf-lite .project-story__layer {
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}

html.perf-lite .path-circuit__trace--live {
  filter: none;
  stroke-dashoffset: 0;
}

html.perf-lite .path-circuit__pin,
html.perf-lite .path-circuit__node.is-active .path-circuit__pin,
html.perf-lite .direction-card--experiment .direction-card__mark i,
html.perf-lite .diary-terminal__bar span:first-child {
  box-shadow: none;
}

/* ------------------------------------------------ legal pages and cookie notice */
.foot__legal button,
.legal-summary button,
.cookie-btn {
  font: inherit;
}

.foot__legal button {
  appearance: none;
  border: 0;
  padding: 0;
  background: transparent;
  color: var(--ink-3);
  cursor: pointer;
  font-size: 13.5px;
  transition: color .15s;
}

.foot__legal button:hover {
  color: var(--ink);
}

.legal-page {
  padding: clamp(88px, 11vw, 150px) 0 clamp(64px, 9vw, 120px);
}

.legal-page__in {
  max-width: 1180px;
}

.legal-hero {
  max-width: 820px;
  margin-bottom: clamp(28px, 5vw, 58px);
}

.legal-hero > p:first-child,
.legal-hero span {
  display: block;
  margin: 0 0 14px;
  color: var(--accent);
  font-family: var(--ff-mono);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
}

.legal-hero h1 {
  font-family: var(--ff-display);
  font-size: clamp(44px, 7vw, 92px);
  line-height: .92;
  letter-spacing: -.06em;
}

.legal-hero span {
  margin-top: 20px;
  color: var(--ink-3);
}

.legal-hero__lead {
  max-width: 62ch;
  margin: 20px 0 0;
  color: var(--ink-2);
  font-size: clamp(17px, 1.35vw, 20px);
  line-height: 1.62;
}

.legal-layout {
  display: grid;
  grid-template-columns: 250px minmax(0, 1fr);
  gap: clamp(22px, 4vw, 54px);
  align-items: start;
}

.legal-summary {
  position: sticky;
  top: 108px;
  display: grid;
  gap: 8px;
  padding: 14px;
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  background:
    linear-gradient(180deg, rgba(238,245,239,.055), rgba(238,245,239,.022)),
    var(--panel);
}

.legal-summary a,
.legal-summary button {
  display: flex;
  width: 100%;
  min-height: 42px;
  align-items: center;
  border: 1px solid transparent;
  border-radius: 12px;
  padding: 10px 12px;
  background: transparent;
  color: var(--ink-2);
  cursor: pointer;
  font-family: var(--ff-head);
  font-size: 14px;
  font-weight: 700;
  text-align: left;
}

.legal-summary a:hover,
.legal-summary button:hover,
.legal-summary a.is-active {
  border-color: rgba(156,255,110,.28);
  background: rgba(156,255,110,.10);
  color: var(--ink);
}

.legal-card {
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  background:
    radial-gradient(circle at 100% 0%, rgba(156,255,110,.08), transparent 34%),
    linear-gradient(180deg, rgba(238,245,239,.055), rgba(238,245,239,.018)),
    var(--panel);
  padding: clamp(24px, 4vw, 48px);
}

.legal-disclaimer {
  margin: 0 0 34px;
  border: 1px solid rgba(156,255,110,.25);
  border-radius: 16px;
  padding: 16px 18px;
  background: rgba(156,255,110,.08);
  color: var(--ink);
}

.legal-card section + section {
  margin-top: clamp(28px, 4vw, 44px);
  padding-top: clamp(24px, 3vw, 34px);
  border-top: 1px solid var(--line);
}

.legal-card h2 {
  margin: 0 0 14px;
  font-size: clamp(24px, 2.6vw, 34px);
  letter-spacing: -.035em;
}

.legal-card p {
  max-width: 76ch;
  margin: 0 0 12px;
  color: var(--ink-2);
  font-size: 16px;
  line-height: 1.7;
}

.legal-card p:last-child {
  margin-bottom: 0;
}

.cookie-banner {
  position: fixed;
  left: max(16px, env(safe-area-inset-left));
  right: max(16px, env(safe-area-inset-right));
  bottom: max(16px, env(safe-area-inset-bottom));
  z-index: 120;
  width: min(980px, calc(100% - 32px));
  margin: 0 auto;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 18px;
  align-items: center;
  border: 1px solid rgba(238,245,239,.18);
  border-radius: 22px;
  padding: 18px;
  background:
    linear-gradient(180deg, rgba(238,245,239,.08), rgba(238,245,239,.035)),
    rgba(13,17,16,.94);
  color: var(--ink);
  box-shadow: 0 28px 100px rgba(0,0,0,.48);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
}

.cookie-banner[hidden] {
  display: none !important;
}

.cookie-banner__copy {
  display: grid;
  gap: 6px;
}

.cookie-banner__copy p {
  margin: 0;
  color: var(--ink);
  font-family: var(--ff-head);
  font-size: 16px;
  font-weight: 800;
}

.cookie-banner__copy span {
  color: var(--ink-2);
  font-size: 14px;
  line-height: 1.55;
}

.cookie-banner__copy a {
  color: var(--accent);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
}

.cookie-banner__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  justify-content: flex-end;
}

.cookie-btn {
  min-height: 44px;
  border-radius: 999px;
  padding: 0 16px;
  border: 1px solid var(--line);
  cursor: pointer;
  font-family: var(--ff-head);
  font-size: 13px;
  font-weight: 800;
  white-space: nowrap;
  transition: transform .18s ease, background .18s ease, border-color .18s ease;
}

.cookie-btn:hover {
  transform: translateY(-1px);
}

.cookie-btn--ghost {
  background: rgba(238,245,239,.045);
  color: var(--ink);
}

.cookie-btn--ghost:hover {
  border-color: rgba(238,245,239,.34);
}

.cookie-btn--primary {
  border-color: transparent;
  background: var(--accent);
  color: var(--accent-ink);
}

.cookie-btn--primary:hover {
  background: #b2ff8b;
}

@media (max-width: 820px) {
  .legal-layout {
    grid-template-columns: 1fr;
  }

  .legal-summary {
    position: static;
  }

  .cookie-banner {
    grid-template-columns: 1fr;
  }

  .cookie-banner__actions {
    display: grid;
    grid-template-columns: 1fr;
  }
}

.foot .foot__in {
  max-width: var(--maxw);
  width: min(100%, var(--maxw));
  margin: 0 auto;
  padding: 30px 24px;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 18px;
}

.foot .foot__top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  flex-wrap: wrap;
}

.foot .foot__legal {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 22px;
  padding-top: 18px;
  border-top: 1px solid var(--line);
}

.foot .foot__legal a,
.foot .foot__legal button {
  color: var(--ink-3);
  font-family: var(--ff-head);
  font-size: 13.5px;
  font-weight: 600;
  line-height: 1.3;
}

.foot .foot__legalnote {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.foot .foot__tag {
  margin-left: 0;
  width: auto;
}

.foot-stats {
  position: relative;
  overflow: hidden;
  width: max-content;
  max-width: 100%;
  border: 1px solid rgba(238,245,239,.12);
  border-radius: 999px;
  background: rgba(238,245,239,.035);
}

.foot-stats::before {
  content: none;
}

.foot-stats__grid {
  position: relative;
  z-index: 1;
}

.foot-stats__grid {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
}

.foot-stat {
  min-width: 0;
  min-height: 36px;
  display: inline-flex;
  align-items: baseline;
  gap: 7px;
  padding: 8px 12px;
  border-right: 1px solid var(--line);
}

.foot-stat:last-child {
  border-right: 0;
}

.foot-stat b {
  color: var(--ink);
  font-family: var(--ff-mono);
  font-size: 13px;
  line-height: 1;
  letter-spacing: 0;
  font-variant-numeric: tabular-nums;
  overflow-wrap: anywhere;
}

.foot-stat small {
  color: var(--ink-3);
  font-family: var(--ff-mono);
  font-size: 10px;
  font-weight: 800;
  letter-spacing: .1em;
  text-transform: uppercase;
}

.foot-stat--online b {
  color: var(--accent);
  text-shadow: 0 0 18px rgba(156,255,110,.28);
}

@media (max-width: 560px) {
  .foot-stats {
    width: 100%;
    border-radius: 16px;
  }

  .foot-stats__grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .foot-stat {
    justify-content: center;
    border-right: 1px solid var(--line);
  }

  .foot-stat:last-child {
    border-right: 0;
  }
}

/* ============================================================
   Mobile overflow hard fix
   Вставить в самый конец style.css
   ============================================================ */

html,
body {
  width: 100%;
  max-width: 100%;
  overflow-x: clip;
}

@supports not (overflow-x: clip) {
  html,
  body {
    overflow-x: hidden;
  }
}

*,
*::before,
*::after {
  min-width: 0;
}

img,
video,
svg,
canvas,
iframe {
  max-width: 100%;
}

/* Общие контейнеры */
.wrap,
.reading,
.nav__in,
.foot__in,
.site-main,
.section,
.story-page,
.story-hero,
.story-hero__in,
.story-chapters,
.story-section,
.story-route,
.story-route__stage,
.learning-route,
.route-cinema,
.experience-shell,
.about-hero,
.hero-layout,
.story-layout,
.philosophy-grid,
.blog-grid,
.skills-head {
  max-width: 100%;
  min-width: 0;
}

/* Фикс для мобильной навигации */
@media (max-width: 720px) {
  .nav {
    left: 0;
    right: 0;
    width: 100%;
  }

  .nav__in {
    width: calc(100% - 20px);
    max-width: calc(100% - 20px);
    gap: 10px;
  }

  .brand {
    min-width: 0;
  }

  .brand__word {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .lang-switch {
    flex: none;
  }

  .drawer {
    max-width: calc(100vw - 24px);
  }
}

/* Hero / story sections */
@media (max-width: 980px) {
  .story-hero__in,
  .story-section--split,
  .story-duo,
  .story-stack__sticky,
  .story-route__stage,
  .hero-layout,
  .story-layout,
  .philosophy-grid,
  .blog-grid,
  .skills-head {
    grid-template-columns: 1fr !important;
  }
}

@media (max-width: 720px) {
  .hero__panel,
  .story-hero,
  .about-hero {
    overflow: hidden;
  }

  .hero__l,
  .story-hero__copy,
  .story-panel__body,
  .learning-step__copy,
  .route-cinema__copy {
    max-width: 100%;
    min-width: 0;
  }

  .hero h1,
  .hero-title,
  .story-hero h1,
  .story-section h2,
  .story-section__head h2,
  .display-xl,
  .display-lg,
  .display-md,
  .footer-mega {
    overflow-wrap: anywhere;
    word-break: normal;
    text-wrap: balance;
  }

  .hero h1 .k {
    white-space: normal !important;
  }
}

/* Абсолютные декоративные элементы, которые могут торчать за экран */
@media (max-width: 720px) {
  .story-hero__sun,
  .story-final__panel::after,
  .mission-card,
  .scroll-indicator {
    max-width: 100%;
  }

  .story-hero__sun {
    right: -28vw;
    width: 90vw;
  }

  .story-final__panel::after {
    right: -24%;
    width: 70%;
  }
}

/* Learning route — самый вероятный источник выезда */
@media (max-width: 560px) {
  .learning-route__path {
    overflow: hidden;
  }

  .learning-step,
  .learning-step--1,
  .learning-step--2,
  .learning-step--3,
  .learning-step--4,
  .learning-step--5,
  .learning-step--6,
  .learning-step--7 {
    left: 0 !important;
    right: auto !important;
    width: 100% !important;
    max-width: 100% !important;
    grid-template-columns: 58px minmax(0, 1fr) !important;
    transform: translate3d(0, calc(var(--step-shift, 0px) + var(--route-shift) * var(--depth, .08)), 0);
  }

  .learning-step__copy {
    max-width: 100%;
  }
}

/* Route cinema */
@media (max-width: 560px) {
  .route-cinema {
    overflow: hidden !important;
  }

  .route-cinema__copy {
    width: 100%;
    max-width: 100%;
  }

  .route-cinema__copy h3,
  .route-cinema__copy p {
    max-width: 100%;
  }
}

/* Карточки/таблицы/админка на всякий случай */
@media (max-width: 720px) {
  .admin-shell,
  .cms-editor,
  .admin-grid,
  .editor-layout,
  .cms-row,
  .traffic-lab,
  .ip-row {
    width: 100% !important;
    max-width: 100% !important;
    grid-template-columns: 1fr !important;
  }

  .cms-row,
  .ip-row {
    overflow-wrap: anywhere;
  }
}

/* Cookie banner/buttons */
@media (max-width: 560px) {
  .cookie-banner {
    left: 12px;
    right: 12px;
    width: auto;
    max-width: calc(100vw - 24px);
  }

  .cookie-btn {
    width: 100%;
    white-space: normal;
  }
}