/* ==================== 1. Tokens ==================== */
:root {
  color-scheme: light dark;
  --bg: #fbfbf9;
  --bg-2: #f1f1ed;
  --ink: #1c1f24;
  --ink-2: #5e6572;
  --rule: #d6d9dd;
  --rule-2: #e8eaec;
  --accent: #1f6f78;
  --accent-ink: #ffffff;
  --accent-soft: #e4f0f1;
  --focus: #c45c1e;
  --font-en: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  --font-fa: "Vazirmatn", "Inter", system-ui, Tahoma, Arial, sans-serif;
  --font: var(--font-en);
  --measure: 66ch;
  --rail: 2.25rem;       /* distance from content edge to the spine */
  --node: 0.75rem;       /* station diameter */
  --ease: cubic-bezier(.2,.7,.2,1);
  --dur: 560ms;
  --spine: 0;            /* 0..1, set by JS while scrolling */
  box-sizing: border-box;
}
:root[data-theme="dark"] {
  --bg: #121417;
  --bg-2: #191c20;
  --ink: #e8eaec;
  --ink-2: #9aa1aa;
  --rule: #2e333a;
  --rule-2: #23272d;
  --accent: #5fb3bc;
  --accent-ink: #0e1a1c;
  --accent-soft: #18292c;
  --focus: #f0a16a;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg: #121417; --bg-2: #191c20; --ink: #e8eaec; --ink-2: #9aa1aa;
    --rule: #2e333a; --rule-2: #23272d; --accent: #5fb3bc; --accent-ink: #0e1a1c;
    --accent-soft: #18292c; --focus: #f0a16a;
  }
}
:root[lang="fa"] { --font: var(--font-fa); }

/* ==================== 2. Fonts ==================== */
@font-face {
  font-family: "Inter";
  src: url("../fonts/Inter.woff2") format("woff2");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Vazirmatn";
  src: url("../fonts/Vazirmatn.woff2") format("woff2");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

/* ==================== 3. Base ==================== */
*, *::before, *::after { box-sizing: inherit; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--font);
  font-size: 1.0625rem;
  line-height: 1.6;
  font-feature-settings: "cv11", "ss01";
  -webkit-font-smoothing: antialiased;
}
:root[lang="fa"] body { line-height: 1.9; font-feature-settings: normal; }
h1, h2, h3 { margin: 0; line-height: 1.2; font-weight: 600; letter-spacing: -0.01em; }
:root[lang="fa"] :is(h1,h2,h3) { letter-spacing: 0; line-height: 1.5; }
p { margin: 0; }
ul, ol { margin: 0; padding: 0; list-style: none; }
[hidden] { display: none !important; }
a { color: inherit; text-decoration-color: var(--rule); text-underline-offset: 0.18em; }
a:hover { text-decoration-color: var(--accent); }
button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; }
:focus-visible { outline: 2px solid var(--focus); outline-offset: 3px; border-radius: 2px; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.skip { position: absolute; inset-inline-start: 1rem; top: -3rem; padding: .5rem .75rem; background: var(--accent); color: var(--accent-ink); border-radius: 4px; z-index: 50; }
.skip:focus { top: 1rem; }

/* ==================== 4. Header + progress ==================== */
.top {
  position: sticky; top: 0; z-index: 20;
  background: color-mix(in srgb, var(--bg) 88%, transparent);
  backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
  border-block-end: 1px solid var(--rule-2);
}
.top-inner {
  max-width: calc(var(--measure) + var(--rail) * 2 + 4rem);
  margin-inline: auto; padding: .55rem 1.25rem;
  display: flex; align-items: center; gap: .75rem;
}
.mono { display: inline-flex; align-items: center; gap: .5rem; min-height: 2.25rem; }
.mono { color: var(--ink); gap: .65rem; }
.mono svg { fill: currentColor; height: 1.55rem; width: auto; display: block; }
.mono .lg-mark { color: var(--accent); }
.mono .lg-name { height: 1.5rem; margin-block-start: .25rem; }
@media (max-width: 1099px) { .mono .lg-name { display: none; } }
.mono svg { opacity: 0; animation: fadeup .9s var(--ease) .15s forwards; } .mono .lg-name { animation-delay: .35s; }
:root.calm .mono svg { opacity: 1; animation: none; }
.top .tools { margin-inline-start: auto; display: flex; align-items: center; gap: .1rem; flex-wrap: nowrap; }
@media (max-width: 719px) { .tbtn { padding: 0 .45rem; } .top-inner { padding-inline: .9rem; gap: .5rem; } }
.tbtn {
  display: inline-flex; align-items: center; gap: .4rem;
  min-height: 2.25rem; padding: 0 .65rem; border-radius: 999px; white-space: nowrap;
  color: var(--ink-2); font-size: .9rem;
}
.tbtn:hover { color: var(--ink); background: var(--bg-2); }
.tbtn[aria-pressed="true"] { color: var(--accent); }
.tbtn svg { width: 1.1rem; height: 1.1rem; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.tbtn .lbl { display: none; }
@media (min-width: 720px) { .tbtn .lbl { display: inline; } }
body:not(.game) body.game .shelf { display: inline-flex; gap: .25rem; }
.shelf svg { width: 1.15rem; height: 1.15rem; opacity: .25; transition: opacity var(--dur), transform var(--dur) var(--ease); }
.shelf svg.on { opacity: 1; color: var(--accent); }

/* ==================== 5. Page frame + spine ==================== */
.frame {
  position: relative;
  max-width: calc(var(--measure) + var(--rail) * 2 + 4rem);
  margin-inline: auto;
  padding-inline: 1.25rem;
  padding-block: 0 5rem;
}
@media (min-width: 720px) { .frame { padding-inline: 2rem; } }
.spine {
  position: absolute; top: 0; bottom: 0;
  inset-inline-start: calc(1.25rem + var(--node) / 2);
  width: 1px; background: var(--rule-2); pointer-events: none;
}
@media (min-width: 720px) { .spine { inset-inline-start: calc(2rem + var(--node) / 2); } }
.spine::after {
  content: ""; position: absolute; inset: 0;
  background: var(--accent);
  transform-origin: top; transform: scaleY(var(--spine));
}
.on-rail { padding-inline-start: var(--rail); position: relative; }

/* ==================== 6. Hero ==================== */
.hero { padding-block: clamp(2.5rem, 9vh, 6rem) 2.25rem; }
.hero .photo { position: relative; margin: 0 0 1.5rem; width: 6rem; height: 6rem; opacity: 0; animation: fadeup .9s var(--ease) .1s forwards; }
.hero .photo img { width: 100%; height: 100%; border-radius: 50%; object-fit: cover; display: block; background: var(--bg-2); }
.hero .photo .orbit { position: absolute; inset: -8px; border-radius: 50%; border: 1.5px dashed var(--accent); opacity: .7; animation: spin 40s linear infinite; }
.hero .photo .orbit::after { content: ""; position: absolute; top: -5px; left: calc(50% - 4px); width: 8px; height: 8px; border-radius: 50%; background: var(--amber); }
@keyframes spin { to { transform: rotate(360deg); } }
@media (min-width: 900px) {
  .hero { display: grid; grid-template-columns: 1fr auto; grid-template-areas: "name photo" "role photo" "sentence photo" "hmore photo" "hsum photo" "meta photo" "lamp lamp" "stats stats"; column-gap: 3rem; align-items: start; }
  .hero > h1 { grid-area: name; } .hero > .role { grid-area: role; } .hero > .sentence { grid-area: sentence; } .hero > .meta { grid-area: meta; } .hero > .hero-more { grid-area: hmore; } .hero > .hero-sum { grid-area: hsum; }
  .hero > .lamp { grid-area: lamp; } .hero > .stats { grid-area: stats; }
  .hero .photo { grid-area: photo; width: 13rem; height: 13rem; margin: .5rem 0 0; align-self: center; }
  .hero .photo .orbit { inset: -14px; }
}
.hero h1 { font-size: clamp(2.2rem, 6vw, 3.6rem); font-weight: 650; letter-spacing: -0.025em; }
:root[lang="fa"] .hero h1 { letter-spacing: 0; font-weight: 700; }
.hero .role { margin-block-start: .5rem; font-size: clamp(1.05rem, 2.4vw, 1.3rem); color: var(--ink-2); }
.hero .sentence { margin-block-start: 1.6rem; font-size: clamp(1.15rem, 2.6vw, 1.5rem); max-width: 30ch; line-height: 1.4; }
:root[lang="fa"] .hero .sentence { line-height: 1.7; }
.hero .meta { margin-block-start: 1.25rem; color: var(--ink-2); font-size: .95rem; }
.hero .hint { margin-block-start: 2.25rem; font-size: .9rem; color: var(--ink-2); }

/* ==================== 7. Entry points (Layer 1 → 2 → 3) ==================== */

.entry { position: relative; }
.entry .station {
  position: absolute; top: 1.35rem;
  inset-inline-start: calc(var(--rail) * -1);
  width: var(--node); height: var(--node); border-radius: 50%;
  background: var(--bg); border: 1.5px solid var(--rule);
  transition: background var(--dur), border-color var(--dur), transform var(--dur) var(--ease);
}
.entry.seen .station, .entry.open .station { border-color: var(--accent); background: var(--accent); }
.entry.open .station { transform: scale(1.35); }
.entry > .toggle {
  display: flex; align-items: baseline; justify-content: space-between; gap: 1rem;
  width: 100%; padding: 1.05rem 0; text-align: start;
  font-size: clamp(1.15rem, 2.4vw, 1.35rem); font-weight: 560;
}
.entry > .toggle .n { color: var(--ink-2); font-weight: 400; font-size: .85em; font-variant-numeric: tabular-nums; min-width: 1.6em; }
.entry > .toggle .t { flex: 1; }
.entry > .toggle .chev { width: 1rem; height: 1rem; flex: none; align-self: center; fill: none; stroke: var(--ink-2); stroke-width: 1.8; stroke-linecap: round; transition: transform var(--dur) var(--ease); }
.entry.open > .toggle .chev { transform: rotate(180deg); stroke: var(--accent); }
.entry > .toggle:hover .t { color: var(--accent); }

/* smooth expand/collapse without layout jump */
.fold { display: grid; grid-template-rows: 0fr; transition: grid-template-rows var(--dur) var(--ease); }
.fold > div { overflow: hidden; min-height: 0; opacity: 0; transform: translateY(-6px); transition: opacity var(--dur) var(--ease), transform var(--dur) var(--ease); }
.open > .fold > div, .fold.open > div { opacity: 1; transform: none; }
.entry, .st, .section { scroll-margin-top: 5.5rem; }
.open > .fold, .fold.open { grid-template-rows: 1fr; }
.fold:not(.open):not(.open > .fold) > div { visibility: hidden; transition: visibility 0s linear var(--dur); }
.open > .fold > div, .fold.open > div { visibility: visible; transition: none; }

.summary { padding-block: 0 1.25rem; }
.summary p { max-width: var(--measure); color: var(--ink); }
.more {
  margin-block-start: .9rem; display: inline-flex; align-items: center; gap: .4rem;
  font-size: .95rem; color: var(--accent); font-weight: 520;
}
.more svg { width: .9rem; height: .9rem; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; transition: transform var(--dur) var(--ease); }
.more[aria-expanded="true"] svg { transform: rotate(45deg); }
.detail { padding-block: .9rem 0; }
.detail ul { display: grid; gap: .6rem; }
.detail li { position: relative; padding-inline-start: 1.1rem; }
.detail li.links { padding-inline-start: 1.1rem; }
.detail li {  color: var(--ink); }
.detail li:not(.links)::before { content: ""; position: absolute; inset-inline-start: 0; top: .72em; width: .45rem; height: 1px; background: var(--accent); }
:root[lang="fa"] .detail li::before { top: .9em; }

/* ==================== 8. Sections on the rail ==================== */
.section { margin-block-start: 5rem; }
.section > h2 { font-size: clamp(1.4rem, 3vw, 1.8rem); position: relative; }
.section > h2::before {
  content: ""; position: absolute; top: .55em;
  inset-inline-start: calc(var(--rail) * -1);
  width: var(--node); height: var(--node); border-radius: 50%;
  background: var(--bg); border: 1.5px solid var(--rule);
  transition: background var(--dur), border-color var(--dur);
}
.section.seen > h2::before { background: var(--accent); border-color: var(--accent); }
.section .lead { margin-block-start: .5rem; color: var(--ink-2); }

/* career stations */
.stations { margin-block-start: 1.5rem; }
.st { position: relative; border-block-start: 1px solid var(--rule-2); }
.st:last-child { border-block-end: 1px solid var(--rule-2); }
.st .station {
  position: absolute; top: 1.35rem; inset-inline-start: calc(var(--rail) * -1);
  width: var(--node); height: var(--node); border-radius: 50%;
  background: var(--bg); border: 1.5px solid var(--rule);
  transition: background var(--dur), border-color var(--dur), transform var(--dur) var(--ease);
}
.st.lit .station { border-color: var(--accent); }
.st.open .station { background: var(--accent); border-color: var(--accent); transform: scale(1.35); }
.st > .toggle { display: grid; grid-template-columns: 4.5rem minmax(0, 1fr); gap: .2rem 1rem; width: 100%; padding: 1rem .75rem 1rem 0; text-align: start; justify-items: start; align-items: baseline; }
.st > .toggle h3 { grid-column: 2; grid-row: 1; }
.st > .toggle .m { grid-column: 2; grid-row: 2; }
.st > .toggle .year { grid-column: 1; grid-row: 1; align-self: baseline; font-weight: 600; color: var(--accent); color: var(--ink-2); font-variant-numeric: tabular-nums; font-size: .9rem; padding-top: .25rem; }
.st > .toggle h3 { font-size: 1.1rem; font-weight: 560; }
.st > .toggle:hover h3 { color: var(--accent); }
.st > .toggle .m { color: var(--ink-2); font-size: .92rem; }
.st .detail { padding-block: 0 1.25rem; padding-inline: calc(4.5rem + 1rem) .75rem; }
@media (max-width: 519px) { .st > .toggle { grid-template-columns: 3.25rem minmax(0,1fr); gap: .2rem .6rem; } .st .detail { padding-inline-start: 0; } }

/* summary paragraph, skills, education, contact */
.prose { margin-block-start: 1rem; max-width: var(--measure); }
.skills { margin-block-start: 1.25rem; display: grid; gap: .9rem; }
.skills > div { display: grid; gap: .15rem; }
.skills dt { font-weight: 560; }
.skills dd { margin: 0; color: var(--ink-2); }
.plain { margin-block-start: 1rem; display: grid; gap: .5rem; }
.contact-list { margin-block-start: 1rem; display: grid; gap: .45rem; }
.contact-list a { font-weight: 520; }
.contact-list .k { color: var(--ink-2); display: inline-block; min-width: 5.5em; }
.note { margin-block-start: 3rem; color: var(--ink-2); font-size: .92rem; }
.note + .note { margin-block-start: .5rem; }
.print-contact { display: none; }

/* ==================== 9. Toast, badges, Easter egg ==================== */
.toast {
  position: fixed; inset-inline-end: 1rem; bottom: calc(1rem + env(safe-area-inset-bottom, 0px));
  display: flex; align-items: center; gap: .6rem;
  background: var(--ink); color: var(--bg); padding: .6rem .9rem; border-radius: 6px;
  font-size: .92rem; z-index: 40; max-width: min(22rem, calc(100vw - 2rem));
  transform: translateY(1rem); opacity: 0; pointer-events: none;
  transition: transform var(--dur) var(--ease), opacity var(--dur);
}
.toast.show { transform: none; opacity: 1; }
.toast svg { width: 1.2rem; height: 1.2rem; color: var(--accent); flex: none; }
.egg[open] { border: 0; border-radius: 8px; background: var(--bg); color: var(--ink); padding: 1.5rem; max-width: 26rem; box-shadow: 0 20px 60px rgba(0,0,0,.25); }
.egg::backdrop { background: rgba(0,0,0,.35); }
.egg p { margin-block-end: 1rem; }
.egg button { color: var(--accent); font-weight: 520; }

/* ==================== 10. Motion preferences + language transition ==================== */
:root.calm *, :root.calm *::before, :root.calm *::after { transition-duration: 0s !important; animation: none !important; }
:root.calm { scroll-behavior: auto; }

::view-transition-old(root), ::view-transition-new(root) { animation-duration: 320ms; }
body.swap { transition: opacity 180ms; opacity: 0; }

/* ==================== 11. Print: a complete CV ==================== */
@media print {
  :root, :root[data-theme="dark"], :root[data-theme="light"] { --ink: #000; --ink-2: #444; --accent: #1f6f78; --accent-soft: #e4f0f1; --accent-ink: #fff; --amber: #b97a1c; --bg: #fff; --bg-2: #f4f4f4; --rule: #999; --rule-2: #ccc; color-scheme: light; }
  html, body { background: #fff !important; color: #000; }
  body::before, #flow { display: none !important; }
  .hero h1 .w > span, .hero .role, .hero .sentence, .hero .meta, .hero .photo { opacity: 1 !important; transform: none !important; animation: none !important; }
  .entry { box-shadow: none !important; background: #fff !important; }
  .entry > .toggle .t, .entry > .toggle .k { grid-column: 1 !important; text-align: start; }
  html { scroll-behavior: auto; }
  body { font-size: 10.5pt; line-height: 1.45; -webkit-print-color-adjust: exact; print-color-adjust: exact; }
  .print-contact { display: block; margin-block-start: .6rem; color: #444; font-size: 9.5pt; }
  .top, .progress, .skip, .toast, .egg, .hint, .more, .chev, .spine, .note.gam { display: none !important; }
  .frame { max-width: none; padding: 0; }
  .on-rail { padding-inline-start: 0; }
  .station, .section > h2::before { display: none; }
  .hero { min-height: 0; padding-block: 0 1rem; }
  .hero h1 { font-size: 22pt; }
  .fold { grid-template-rows: 1fr !important; }
  .fold > div { visibility: visible !important; overflow: visible !important; }
  .section { margin-block-start: 1.4rem; break-inside: avoid; }
  .st, .entry { break-inside: avoid; }
  .entry > .toggle, .st > .toggle { padding: .5rem 0; }
  a[href^="http"]::after { content: " (" attr(href) ")"; font-size: .85em; color: #444; }
  .contact-list a[href^="mailto"]::after, .contact-list a[href^="tel"]::after { content: none; }
}

/* ==================== 12. v2: identity, motion, illustration ==================== */
:root { --amber: #d9962e; --amber-soft: #f6e9d2; --glow: rgba(31,111,120,.18); }
:root[data-theme="dark"] { --amber: #e8b25a; --amber-soft: #2a2416; --glow: rgba(95,179,188,.22); }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { --amber: #e8b25a; --amber-soft: #2a2416; --glow: rgba(95,179,188,.22); } }

/* paper grid behind everything, very faint */
body::before {
  content: ""; position: fixed; inset: 0; z-index: -1; pointer-events: none;
  background-image: radial-gradient(var(--rule) .6px, transparent .7px);
  background-size: 22px 22px; opacity: .55;
  mask-image: linear-gradient(to bottom, #000 0, #000 60vh, transparent 110vh);
  -webkit-mask-image: linear-gradient(to bottom, #000 0, #000 60vh, transparent 110vh);
}
/* monogram draws itself */
@keyframes draw { to { stroke-dashoffset: 0; } }

/* ---- hero ---- */
.hero { position: relative; isolation: isolate; padding-block: clamp(2rem, 7vh, 4.5rem) 1.5rem; }
#flow { position: absolute; inset: 0 -1.25rem; width: calc(100% + 2.5rem); height: 100%; z-index: -1; pointer-events: none; }
@media (min-width: 720px) { #flow { inset: 0 -2rem; width: calc(100% + 4rem); } }
.hero h1 .w { display: inline-block; overflow: hidden; vertical-align: bottom; }
.hero h1 .w > span { display: inline-block; transform: translateY(110%); animation: rise .7s var(--ease) forwards; animation-delay: calc(var(--i) * 90ms); }
@keyframes rise { to { transform: none; } }
.hero .role, .hero .sentence, .hero .meta, .hero .stats, .hero .pipe { opacity: 0; animation: fadeup .8s var(--ease) forwards; }
.hero .role { animation-delay: .35s } .hero .sentence { animation-delay: .5s } .hero .meta { animation-delay: .65s }
.hero .pipe { animation-delay: .8s } .hero .stats { animation-delay: 1.1s }
@keyframes fadeup { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }

/* pipeline schematic */
@media (max-width: 719px) { .pipe text { display: none; } .pipe { margin-block-start: 1.5rem; } }
.pipe { margin-block-start: 2.25rem; width: 100%; height: auto; display: block; overflow: visible; }
.pipe .ln { fill: none; stroke: var(--accent); stroke-width: 2; stroke-linecap: round; stroke-dasharray: 1400; stroke-dashoffset: 1400; animation: draw 2.2s var(--ease) .9s forwards; }
.pipe .src { fill: var(--ink-2); opacity: 0; animation: pop .5s var(--ease) forwards; }
.pipe .src:nth-of-type(1) { animation-delay: 1s } .pipe .src:nth-of-type(2) { animation-delay: 1.15s } .pipe .src:nth-of-type(3) { animation-delay: 1.3s }
.pipe .nd { fill: var(--bg); stroke: var(--accent); stroke-width: 2; transform-box: fill-box; transform-origin: center; transform: scale(0); animation: pop .6s var(--ease) forwards; }
.pipe .nd.n1 { animation-delay: 1.5s } .pipe .nd.n2 { animation-delay: 1.9s } .pipe .nd.n3 { animation-delay: 2.3s }
@keyframes pop { from { transform: scale(0); opacity: 0 } to { transform: scale(1); opacity: 1 } }
.pipe .bar { fill: var(--amber); transform-box: fill-box; transform-origin: bottom; transform: scaleY(0); animation: grow .7s var(--ease) forwards; }
.pipe .bar:nth-of-type(1) { animation-delay: 2.7s } .pipe .bar:nth-of-type(2) { animation-delay: 2.85s } .pipe .bar:nth-of-type(3) { animation-delay: 3s } .pipe .bar:nth-of-type(4) { animation-delay: 3.15s }
@keyframes grow { to { transform: scaleY(1); } }
.pipe text { fill: var(--ink-2); font-size: 19px; font-family: var(--font); opacity: 0; animation: fadeup .8s var(--ease) 2.4s forwards; }
.pipe .pk { fill: var(--amber); offset-path: path("M60 50 Q130 50 200 90 T420 90 T640 90 T860 90"); offset-rotate: 0deg; animation: travel 4.2s linear 3.4s infinite; opacity: 0; }
@keyframes travel { 0% { offset-distance: 0%; opacity: 0 } 6% { opacity: 1 } 92% { opacity: 1 } 100% { offset-distance: 100%; opacity: 0 } }
:root[dir="rtl"] .pipe { transform: scaleX(-1); }
:root[dir="rtl"] .pipe text { transform: scaleX(-1); transform-box: fill-box; transform-origin: center; }

/* stats */
.stats { margin-block-start: 1.75rem; display: grid; grid-template-columns: repeat(2, 1fr); gap: 1rem 2rem; max-width: 40rem; }
@media (min-width: 720px) { .stats { grid-template-columns: repeat(4, 1fr); } }
.stats b { display: block; direction: ltr; unicode-bidi: isolate; width: fit-content; font-size: clamp(1.6rem, 3.6vw, 2.2rem); font-weight: 600; letter-spacing: -0.02em; line-height: 1; color: var(--accent); font-variant-numeric: tabular-nums; }
:root[lang="fa"] .stats b { letter-spacing: 0; }
.stats span { color: var(--ink-2); font-size: .9rem; }

/* ---- entry cards ---- */
.entries { display: grid; gap: 1rem; margin-block-start: 1rem; }
@media (min-width: 720px) { .entries { grid-template-columns: 1fr 1fr; } .entries .entry.open { grid-column: 1 / -1; } }
.entry { border: 1px solid var(--rule); border-radius: 14px; background: var(--bg); overflow: hidden;
  transition: border-color var(--dur), box-shadow var(--dur), transform var(--dur) var(--ease); }
.entry:last-child { border-block-end: 1px solid var(--rule); }
.entry:hover { border-color: var(--accent); box-shadow: 0 12px 40px -18px var(--glow); transform: translateY(-2px); }
.entry.open { border-color: var(--accent); box-shadow: 0 16px 50px -20px var(--glow); }
.entry .station { display: none; }
.entry > .toggle { display: grid; justify-content: normal; grid-template-columns: 3.25rem 1fr auto; grid-template-rows: auto auto; gap: .15rem 1rem; align-items: center; padding: 1.1rem 1.2rem; }
.entry > .toggle .ico { grid-column: 1; grid-row: 1 / span 2; width: 3.25rem; height: 3.25rem; border-radius: 12px; background: var(--accent-soft); display: grid; place-items: center; transition: background var(--dur), transform var(--dur) var(--ease); }
.entry.open > .toggle .ico, .entry:hover > .toggle .ico { background: var(--accent); transform: rotate(-4deg); }
.entry > .toggle .ico svg { width: 2rem; height: 2rem; fill: none; stroke: var(--accent); stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.entry.open > .toggle .ico svg, .entry:hover > .toggle .ico svg { stroke: var(--accent-ink); }
.entry > .toggle .ico path, .entry > .toggle .ico circle, .entry > .toggle .ico rect { stroke-dasharray: 120; stroke-dashoffset: 120; }
.entry.in > .toggle .ico :is(path,circle,rect) { animation: draw 1.4s var(--ease) forwards; animation-delay: calc(var(--i, 0) * .15s + .2s); }
.entry:hover > .toggle .ico :is(path,circle,rect) { animation: draw 1.2s var(--ease) forwards; }
.entry > .toggle .t { grid-column: 2; grid-row: 1; font-size: 1.15rem; }
.entry > .toggle .k { grid-column: 2; grid-row: 2; color: var(--ink-2); font-size: .9rem; font-weight: 400; }
.entry > .toggle .chev { grid-column: 3; grid-row: 1 / span 2; }
.entry .summary { padding: 0 1.2rem 1.2rem calc(1.2rem + 3.25rem + 1rem); }
:root[dir="rtl"] .entry .summary { padding: 0 calc(1.2rem + 3.25rem + 1rem) 1.2rem 1.2rem; }
@media (max-width: 719px) { .entry .summary, :root[dir="rtl"] .entry .summary { padding: 0 1.2rem 1.2rem; } }

/* ---- career map ---- */
.map { margin-block-start: 1.5rem; display: none; }
@media (min-width: 720px) { .map { display: block; } }
.map svg { width: 100%; height: auto; overflow: visible; display: block; }
.map .rail { fill: none; stroke: var(--rule); stroke-width: 2; }
.map .trail { fill: none; stroke: var(--accent); stroke-width: 2.5; stroke-linecap: round; stroke-dasharray: 1200; stroke-dashoffset: 1200; }
.map.in .trail { animation: draw 2.4s var(--ease) .2s forwards; }
.map a { text-decoration: none; cursor: pointer; }
.map a:focus-visible { outline: none; }
.map a:focus-visible .dot { stroke: var(--focus); stroke-width: 4; }
.map .dot { fill: var(--bg); stroke: var(--accent); stroke-width: 2.5; transform-box: fill-box; transform-origin: center; transition: transform var(--dur) var(--ease), fill var(--dur); }
.map .ring { fill: none; stroke: var(--accent); stroke-width: 1.5; opacity: 0; transform-box: fill-box; transform-origin: center; }
.map.in .ring { animation: ring 2.8s ease-out infinite; animation-delay: calc(var(--i) * .5s); }
@keyframes ring { 0% { transform: scale(.6); opacity: .7 } 100% { transform: scale(2.4); opacity: 0 } }
.map a:hover .dot, .map a.active .dot { fill: var(--accent); transform: scale(1.3); }
.map .yr { font-family: var(--font); font-size: 13px; fill: var(--ink-2); }
.map .co { font-family: var(--font); font-size: 14px; font-weight: 600; fill: var(--ink); }
.map .ttl { font-family: var(--font); font-size: 12px; fill: var(--ink-2); }
.map .node { opacity: 0; transform: translateY(8px); transition: opacity .6s var(--ease), transform .6s var(--ease); transition-delay: calc(var(--i) * .3s + .4s); }
.map.in .node { opacity: 1; transform: none; }
:root[dir="rtl"] .map svg { transform: scaleX(-1); }
:root[dir="rtl"] .map text { transform: scaleX(-1); transform-box: fill-box; transform-origin: center; }
.st { transition: background var(--dur); border-radius: 10px; }
.st.open { background: linear-gradient(to right, var(--accent-soft), transparent 55%); }
:root[dir="rtl"] .st.open { background: linear-gradient(to left, var(--accent-soft), transparent 40%); }
.st .station::after { content: ""; position: absolute; inset: -6px; border-radius: 50%; border: 1.5px solid var(--accent); opacity: 0; transform: scale(.5); }
.st.open .station::after { animation: ring 1.6s ease-out 2; }

/* ---- reveal on scroll ---- */
.reveal { opacity: 0; transform: translateY(22px); transition: opacity .7s var(--ease), transform .7s var(--ease); }
.reveal.in { opacity: 1; transform: none; }
.reveal-stagger > * { opacity: 0; transform: translateY(14px); transition: opacity .55s var(--ease), transform .55s var(--ease); transition-delay: calc(var(--i, 0) * 70ms); }
.reveal-stagger.in > * { opacity: 1; transform: none; }

/* skills as chips */
.skills > div { display: block; }
.skills dd { display: flex; flex-wrap: wrap; gap: .4rem; margin-block-start: .45rem; }
.skills dd span { border: 1px solid var(--rule); border-radius: 999px; padding: .15rem .65rem; font-size: .88rem; color: var(--ink); background: var(--bg); transition: border-color var(--dur), background var(--dur), transform var(--dur) var(--ease); }
.skills dd span:hover { border-color: var(--accent); background: var(--accent-soft); transform: translateY(-1px); }

/* badges */
.shelf svg.on { animation: unlock .7s var(--ease); }
@keyframes unlock { 0% { transform: scale(.4) rotate(-20deg) } 60% { transform: scale(1.3) rotate(6deg) } 100% { transform: none } }
.toast { border-inline-start: 3px solid var(--amber); }

:root.calm .hero h1 .w > span, :root.calm .hero .role, :root.calm .hero .sentence, :root.calm .hero .meta, :root.calm .hero .stats, :root.calm .hero .pipe, :root.calm .pipe .ln, :root.calm .pipe .src, :root.calm .pipe .nd, :root.calm .pipe .bar, :root.calm .pipe text, :root.calm .mono path, :root.calm .map .trail, :root.calm .map .node { animation: none !important; opacity: 1 !important; transform: none !important; stroke-dashoffset: 0 !important; }
:root.calm .pipe .pk, :root.calm .map .ring { display: none; }
:root.calm .reveal, :root.calm .reveal-stagger > * { opacity: 1; transform: none; transition: none; }
:root.calm .entry > .toggle .ico :is(path, :root.calm circle, :root.calm rect), :root.calm .map .trail { stroke-dashoffset: 0; animation: none !important; }

@media print { #flow, .pipe, .map, .stats { display: none; } .entry { border: 0; border-radius: 0; } .entry > .toggle .ico { display: none; } .entry > .toggle { grid-template-columns: 1fr auto; padding: .5rem 0; } .entry .summary, :root[dir="rtl"] .entry .summary { padding: 0 0 .5rem; } .reveal, .reveal-stagger > *, .hero * { opacity: 1 !important; transform: none !important; } }

/* ---- side navigation (scroll-spy) ---- */
.side { display: none; }
@media (min-width: 980px) {
  :root { --fw: calc(var(--measure) + var(--rail) * 2 + 4rem); }
  .frame { margin-inline-start: max(12.5rem, calc((100% - var(--fw)) / 2)); margin-inline-end: auto; }
  .side { display: block; position: fixed; top: 50%; transform: translateY(-50%); inset-inline-start: max(1rem, calc((100% - var(--fw)) / 2 - 11.5rem)); width: 10.5rem; z-index: 10; }
  .side ol { position: relative; padding-inline-start: 1.25rem; }
  .side ol::before { content: ""; position: absolute; top: .6rem; bottom: .6rem; inset-inline-start: 4px; width: 1px; background: var(--rule); }
  .side .mark { position: absolute; inset-inline-start: 0; top: 0; width: 9px; height: 9px; border-radius: 50%; background: var(--accent); box-shadow: 0 0 0 4px var(--accent-soft); transform: translateY(var(--y, .6rem)); transition: transform .5s var(--ease); }
  .side a { display: block; padding: .3rem 0; font-size: .9rem; color: var(--ink-2); text-decoration: none; transition: color var(--dur), transform var(--dur) var(--ease); }
  .side a:hover { color: var(--ink); }
  .side a.active { color: var(--accent); font-weight: 560; transform: translateX(3px); }
  :root[dir="rtl"] .side a.active { transform: translateX(-3px); }
  }
@media print { .side { display: none; } }
/* link rows inside details */
.links { display: flex; flex-wrap: wrap; gap: .5rem; margin-block-start: .5rem; }
.links a { display: inline-flex; align-items: center; gap: .35rem; border: 1px solid var(--rule); border-radius: 999px; padding: .2rem .7rem; font-size: .88rem; text-decoration: none; transition: border-color var(--dur), background var(--dur), transform var(--dur) var(--ease); }
.links a:hover { border-color: var(--accent); background: var(--accent-soft); transform: translateY(-1px); }
.links a svg { width: .8rem; height: .8rem; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; }

/* ---- skill meters: five segments fill one by one when the group scrolls into view ---- */
.skills { margin-block-start: 1.5rem; display: grid; gap: 2rem 3rem; }

.sg h3 { font-size: 1rem; font-weight: 600; margin-block-end: .6rem; }
.sks { display: grid; gap: .1rem; }
.sk { display: grid; grid-template-columns: minmax(0,1fr) auto 6.5rem; align-items: center; gap: .75rem; padding: .35rem .5rem; margin-inline: -.5rem; border-radius: 8px; transition: background var(--dur); }
.sk:hover { background: var(--accent-soft); }
.sk .nm { font-size: .98rem; font-weight: 520; display: grid; gap: .1rem; }
.sk .nm small { font-size: .82rem; font-weight: 400; color: var(--ink-2); line-height: 1.45; }
.sk { padding-block: .6rem; }
.sks { gap: .25rem; }
.sk .lv { font-size: .8rem; color: var(--ink-2); text-align: end; opacity: 0; transform: translateX(-6px); transition: opacity .5s var(--ease), transform .5s var(--ease); transition-delay: 560ms; }
:root[dir="rtl"] .sk .lv { transform: translateX(6px); }
.sk.landed .lv { opacity: 1; transform: none; }
.sk[data-lv="5"] .lv { color: var(--amber); font-weight: 560; }
.meter { display: inline-flex; gap: 3px; }
.meter i { width: clamp(1rem, 4vw, 1.9rem); height: .4rem; border-radius: 2px; background: var(--rule-2); position: relative; overflow: hidden; }
.meter i::after { content: ""; position: absolute; inset: 0; background: var(--accent); border-radius: inherit; transform: scaleX(0); transform-origin: left; transition: transform .45s var(--ease); transition-delay: calc(var(--s) * 90ms + 80ms); }
:root[dir="rtl"] .meter i::after { transform-origin: right; }
.sk[data-lv="5"] .meter i::after { background: linear-gradient(90deg, var(--accent), var(--amber)); background-size: 600% 100%; }
.sk[data-lv="5"] .meter i:nth-child(1)::after { background-position: 0 0 } .sk[data-lv="5"] .meter i:nth-child(2)::after { background-position: 25% 0 }
.sk[data-lv="5"] .meter i:nth-child(3)::after { background-position: 50% 0 } .sk[data-lv="5"] .meter i:nth-child(4)::after { background-position: 75% 0 }
.sk[data-lv="5"] .meter i:nth-child(5)::after { background-position: 100% 0 }
.sk.landed[data-lv="2"] .meter i:nth-child(-n+2)::after,
.sk.landed[data-lv="3"] .meter i:nth-child(-n+3)::after,
.sk.landed[data-lv="4"] .meter i:nth-child(-n+4)::after,
.sk.landed[data-lv="5"] .meter i::after { transform: scaleX(1); }
.sk:hover .meter i::after { filter: brightness(1.12); }
:root.calm .meter i::after, :root.calm .sk .lv { transition: none !important; }
@media print {
  .skills { grid-template-columns: 1fr 1fr; gap: .8rem 2rem; } .sk { padding: .1rem 0; margin: 0; }
  .sk .lv { opacity: 1 !important; transform: none !important; }
  .sk[data-lv="2"] .meter i:nth-child(-n+2)::after, .sk[data-lv="3"] .meter i:nth-child(-n+3)::after,
  .sk[data-lv="4"] .meter i:nth-child(-n+4)::after, .sk[data-lv="5"] .meter i::after { transform: scaleX(1) !important; transition: none !important; }
}

/* ==================== 13. The lamp ==================== */
.lamp { position: relative; padding-block: 0 2.25rem; margin-block-start: .5rem; display: grid; justify-items: center; align-content: start; --g: 0; }
.lamp .halo { position: absolute; left: 50%; top: 62%; width: min(56rem, 160vw); aspect-ratio: 1; translate: -50% -50%; border-radius: 50%; pointer-events: none; z-index: -1;
  background: radial-gradient(circle, rgba(255,214,120,.55) 0%, rgba(255,190,90,.22) 18%, rgba(255,180,80,.08) 38%, transparent 62%);
  opacity: calc(var(--g) * .95); transform: scale(calc(.45 + var(--g) * .55)); transition: opacity .25s linear, transform .25s linear; }
:root[data-theme="light"] .lamp .halo { opacity: calc(var(--g) * .55); }
.swing { display: grid; justify-items: center; transform-origin: 50% 0; animation: sway 6s ease-in-out infinite; }
@keyframes sway { 0%,100% { rotate: -1.4deg } 50% { rotate: 1.4deg } }
.cord { display: block; width: 2px; height: clamp(3.5rem, 10vh, 6rem); background: linear-gradient(to bottom, transparent, var(--ink-2) 35%); opacity: .8; }
.bulb { display: block; width: 7.5rem; cursor: grab; touch-action: none; border-radius: 40% 40% 50% 50%; -webkit-tap-highlight-color: transparent; }
.bulb:active { cursor: grabbing; }
.bulb svg { width: 100%; height: auto; display: block; overflow: visible; filter: drop-shadow(0 calc(var(--g) * 0px) calc(var(--g) * 26px) rgba(255,200,90,calc(var(--g) * .9))); }
.bulb .glass-on { opacity: var(--g); }
.bulb .core { opacity: calc(var(--g) * var(--g)); }
.bulb .fil { stroke: color-mix(in srgb, #fff6d8 calc(var(--g) * 100%), #6b737a); }
.bulb .wire { stroke: color-mix(in srgb, #f0b45a calc(var(--g) * 100%), #9aa3ab); }
.bulb.flicker .core, .bulb.flicker .glass-on { animation: flicker .55s steps(1) both; }
@keyframes flicker { 0% { opacity: .2 } 18% { opacity: .9 } 30% { opacity: .35 } 48% { opacity: 1 } 62% { opacity: .6 } 100% { opacity: 1 } }
.lamp-hint { margin-block-start: .9rem; font-size: .85rem; color: var(--ink-2); opacity: 0; transition: opacity .6s var(--ease) .4s; }
.lamp.ready .lamp-hint { opacity: 1; }
/* header mini bulb */
#bulb-mini svg { fill: none; }
#bulb-mini .mg { fill: transparent; transition: fill .4s, stroke .4s; }
#bulb-mini[aria-pressed="true"] { color: var(--amber); }
#bulb-mini[aria-pressed="true"] .mg { fill: var(--amber); stroke: var(--amber); }
/* before the first light, the four paths wait in the dark */
:root.prelight .entry { opacity: .38; filter: saturate(0); transform: none; }
:root.prelight .entry:focus-within, :root.prelight .entry.open { opacity: 1; filter: none; }
.entry { transition: border-color var(--dur), box-shadow var(--dur), transform var(--dur) var(--ease), opacity .9s var(--ease), filter .9s var(--ease); }
.entry.lit { animation: litglow 1.4s var(--ease) both; animation-delay: calc(var(--i) * 160ms); }
@keyframes litglow { 0% { box-shadow: 0 0 0 0 rgba(255,196,90,0); border-color: var(--rule); } 35% { box-shadow: 0 0 0 4px rgba(255,196,90,.35), 0 18px 60px -12px rgba(255,190,80,.55); border-color: var(--amber); } 100% { box-shadow: 0 0 0 0 rgba(255,196,90,0); } }
:root.prelight .entries > .entry { transition-delay: 0s; }
.entries > .entry:nth-child(1) { --i: 0 } .entries > .entry:nth-child(2) { --i: 1 } .entries > .entry:nth-child(3) { --i: 2 } .entries > .entry:nth-child(4) { --i: 3 }
.entries > .entry { transition-delay: 0s, 0s, 0s, calc(var(--i) * 160ms), calc(var(--i) * 160ms); }
/* light spreading from the bulb (View Transitions) */
::view-transition-old(root), ::view-transition-new(root) { animation: none; mix-blend-mode: normal; }
.egg-lamp { display: block; width: 5.6rem; height: auto; margin: 0 auto 1rem; border-radius: 10px; background: #fff; padding: .3rem; }
.egg-sub { color: var(--ink-2); font-size: .9rem; }
:root.calm .swing { animation: none; }
:root.calm .lamp .halo, :root.calm .entry { transition: none !important; }
:root.calm .entry.lit, :root.calm .bulb.flicker .core, :root.calm .bulb.flicker .glass-on { animation: none !important; }
@media print { .lamp, #bulb-mini { display: none !important; } :root.prelight .entry { opacity: 1; filter: none; } }
@media (max-width: 479px) { .shelf { display: none; } .top-inner { gap: .35rem; } .tbtn { padding: 0 .38rem; } }

/* ==================== 14. Skills as an ETL: raw chips fly into place ==================== */
.skills { overflow-x: clip; }
html, body { overflow-x: clip; }
.sk .nm > span:first-child { justify-self: start; display: inline-block; border-radius: 999px; will-change: transform; position: relative; z-index: 1;
  transition: background .4s, box-shadow .4s, color .4s; }
.sk.raw .nm > span:first-child { background: var(--bg); box-shadow: 0 0 0 .4rem var(--bg), 0 0 0 calc(.4rem + 1px) var(--amber), 0 10px 24px -10px rgba(0,0,0,.35); }
.sk .nm small { transition: opacity .5s var(--ease) .15s; }
.sk.raw .nm small { opacity: 0; transition-delay: 0s; }
.sk.raw .meter, .sk.raw .lv { visibility: hidden; }
.sg h3 { transition: opacity .6s var(--ease); }
.sg.pending h3 { opacity: .25; }
.etl { display: flex; align-items: center; gap: 0; margin-block-start: 1rem; font-size: .82rem; color: var(--ink-2); }
.etl li { display: inline-flex; align-items: center; gap: .45rem; transition: color .4s; }
.etl li::before { content: ""; width: .55rem; height: .55rem; border-radius: 50%; border: 1.5px solid var(--rule); transition: background .4s, border-color .4s, transform .4s var(--ease); }
.etl li + li::after { content: none; }
.etl li + li { margin-inline-start: 2.4rem; position: relative; }
.etl li + li > span { display: none; }
.etl li + li::marker { content: none; }
.etl li:not(:first-child)::before { box-shadow: none; }
.etl li:not(:first-child) { background: linear-gradient(var(--rule), var(--rule)) no-repeat; background-size: 1.8rem 1px; background-position: calc(-2.1rem) 50%; }
:root[dir="rtl"] .etl li:not(:first-child) { background-position: calc(100% + 2.1rem) 50%; }
.etl li.on { color: var(--ink); font-weight: 560; }
.etl li.on::before { background: var(--amber); border-color: var(--amber); transform: scale(1.15); }
.etl li.done::before { background: var(--accent); border-color: var(--accent); }
:root.calm .sk .nm > span:first-child { transform: none !important; }
@media print { .etl { display: none; } .sk .nm > span:first-child { transform: none !important; box-shadow: none !important; } .sk .meter, .sk .lv { visibility: visible !important; } .sk .nm small { opacity: 1 !important; } }
@media (max-width: 559px) {
  .sk { grid-template-columns: auto 1fr; grid-template-areas: "nm nm" "meter lv"; row-gap: .45rem; }
  .sk .nm { grid-area: nm; } .sk .meter { grid-area: meter; } .sk .lv { grid-area: lv; text-align: start; }
}
.hero .hero-more { justify-self: start; margin-block-start: .9rem; opacity: 0; animation: fadeup .8s var(--ease) .58s forwards; }
.hero .hero-sum .prose { margin-block-start: .9rem; color: var(--ink-2); max-width: 60ch; }
:root.calm .hero .hero-more { opacity: 1; animation: none; }

/* ==================== 15. The door + the off-clock world ==================== */
.door-wrap { margin-block-start: 3.5rem; display: grid; justify-items: start; gap: .6rem; }
.door { position: relative; display: inline-flex; align-items: center; gap: .75rem; padding: .85rem 1.4rem .85rem .9rem; border-radius: 999px; color: #fff7ee; font-weight: 600; font-size: 1.05rem;
  background: linear-gradient(120deg, #2a2160, #8e3b6a 55%, #f08a4b); background-size: 180% 100%; box-shadow: 0 12px 34px -12px rgba(142,59,106,.7); transition: background-position .8s var(--ease), transform .4s var(--ease), box-shadow .4s; }
:root[dir="rtl"] .door { padding: .85rem .9rem .85rem 1.4rem; }
.door:hover { background-position: 100% 0; transform: translateY(-2px); box-shadow: 0 18px 44px -12px rgba(240,138,75,.7); }
.door-ico { width: 2.3rem; height: 2.3rem; border-radius: 50%; background: rgba(255,255,255,.16); display: grid; place-items: center; }
.door-ico svg { width: 1.35rem; height: 1.35rem; fill: #ffd28a; }
.door::after { content: ""; position: absolute; inset: -4px; border-radius: inherit; border: 1.5px solid rgba(240,138,75,.55); animation: doorpulse 2.6s ease-out infinite; pointer-events: none; }
@keyframes doorpulse { 0% { opacity: .9; transform: scale(1) } 100% { opacity: 0; transform: scale(1.12) } }
.door-sub { color: var(--ink-2); font-size: .9rem; }
:root.calm .door::after { animation: none; opacity: 0; }

.otc { position: fixed; inset: 0; z-index: 100; overflow-y: auto; overscroll-behavior: contain; background: #1b1642; color: #fff7ee; --otc-muted: rgba(255,247,238,.78); }
.otc-in { min-height: 100%; background: linear-gradient(172deg, #1b1642 0%, #2f1f5c 22%, #5b2a6b 45%, #a8445f 68%, #e9774c 86%, #f6a14f 100%); }
.otc-wrap { position: relative; max-width: 68rem; margin-inline: auto; padding: clamp(4.5rem, 10vh, 7rem) 1.4rem 4rem; }
.otc-close { position: fixed; top: calc(1rem + env(safe-area-inset-top, 0px)); inset-inline-end: 1rem; z-index: 2; width: 2.9rem; height: 2.9rem; border-radius: 50%; display: grid; place-items: center; background: rgba(255,255,255,.14); color: #fff; backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); transition: background .3s, transform .4s var(--ease); }
.otc-close:hover { background: rgba(255,255,255,.26); transform: rotate(90deg); }
.otc-close svg { width: 1.2rem; height: 1.2rem; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; }
.otc :focus-visible { outline-color: #ffd28a; }
.sun { position: absolute; top: 2.5rem; inset-inline-end: 6%; width: 7rem; height: 7rem; border-radius: 50%; background: radial-gradient(circle at 45% 40%, #fff3d1 0%, #ffd28a 38%, #f6a14f 62%); box-shadow: 0 0 60px 20px rgba(246,161,79,.35), 0 0 140px 60px rgba(246,161,79,.15); opacity: .9; pointer-events: none; z-index: 0; }
.otc-head { z-index: 1; }
@media (max-width: 640px) { .sun { width: 4.5rem; height: 4.5rem; top: 1.4rem; inset-inline-end: 4.5rem; } }
.otc-head { max-width: 40rem; position: relative; }
.otc-kicker { text-transform: uppercase; letter-spacing: .14em; font-size: .8rem; color: #ffd28a; }
:root[lang="fa"] .otc-kicker { letter-spacing: 0; }
.otc-head h2 { font-size: clamp(2.6rem, 8vw, 5rem); font-weight: 700; letter-spacing: -0.03em; margin-block: .3rem .6rem; line-height: 1.02; }
:root[lang="fa"] .otc-head h2 { letter-spacing: 0; line-height: 1.3; }
.otc-lead { font-size: clamp(1.1rem, 2.4vw, 1.35rem); color: var(--otc-muted); }
.otc-sec { display: grid; gap: 2rem; align-items: center; margin-block-start: clamp(3.5rem, 9vh, 6rem); }
@media (min-width: 860px) { .otc-sec { grid-template-columns: 1.05fr 1fr; gap: 3.5rem; } .otc-sec.flip .tx { order: 2; } }
.otc-sec h3 { font-size: clamp(1.5rem, 3.4vw, 2.1rem); font-weight: 650; margin-block-end: .6rem; }
.otc-sec p { color: var(--otc-muted); max-width: 34rem; }
.otc-sec, .otc-head { opacity: 0; transform: translateY(26px); transition: opacity .8s var(--ease), transform .8s var(--ease); }
.otc-sec.in, .otc-head.in { opacity: 1; transform: none; }
/* polaroids */
.polas { display: flex; justify-content: center; align-items: center; flex-wrap: wrap; }
.pola { margin: 0; background: #fffdf8; padding: .6rem .6rem 0; border-radius: 3px; box-shadow: 0 22px 44px -18px rgba(0,0,0,.55); rotate: var(--rot); transition: rotate .5s var(--ease), transform .5s var(--ease), box-shadow .5s; width: min(100%, 26rem); }
.pola:hover { rotate: 0deg; transform: translateY(-6px) scale(1.02); box-shadow: 0 30px 60px -18px rgba(0,0,0,.6); z-index: 2; }
.pola img { display: block; width: 100%; height: auto; aspect-ratio: auto; background: #e9e4dc; }
.pola figcaption { color: #3a2f2a; font-size: .85rem; padding: .55rem .2rem .7rem; text-align: center; }
.p3 .pola { width: min(48%, 15rem); }
.p3 .pola:nth-child(1) { width: min(100%, 26rem); margin-block-end: .8rem; }
.p3 .pola:nth-child(2) { margin-inline-end: -1rem; }
.otc-sec.in .pola { animation: drop .9s var(--ease) both; }
.otc-sec.in .pola:nth-child(2) { animation-delay: .15s } .otc-sec.in .pola:nth-child(3) { animation-delay: .3s }
@keyframes drop { from { opacity: 0; transform: translateY(-30px) rotate(calc(var(--rot) * -2)); } to { opacity: 1; transform: none; } }
/* peaks chart */
.peaks { width: 100%; height: auto; margin-block-start: 1.4rem; overflow: visible; }
.peaks .mt { fill: rgba(255,247,238,.08); stroke: #ffd28a; stroke-width: 2; stroke-linejoin: round; stroke-dasharray: 900; stroke-dashoffset: 900; transition: stroke-dashoffset 1.8s var(--ease), fill .8s; }
.peaks .m2 { stroke: #ffb38a; } .peaks .m3 { stroke: #ff9ec0; }
.in .peaks .mt { stroke-dashoffset: 0; fill: rgba(255,247,238,.13); }
.in .peaks .m2 { transition-delay: .25s; } .in .peaks .m3 { transition-delay: .5s; }
.peaks .grid { stroke: rgba(255,247,238,.35); stroke-dasharray: 4 6; } .peaks .base { stroke: rgba(255,247,238,.4); }
.peaks text { fill: #fff7ee; font-family: var(--font); }
.peaks .pn { font-size: 16px; font-weight: 650; } .peaks .ph { font-size: 14px; fill: #ffd28a; } .peaks .gl { font-size: 12px; fill: rgba(255,247,238,.6); }
.peaks .flag { stroke: #fff7ee; stroke-width: 1.5; fill: #f08a4b; opacity: 0; transform-box: fill-box; transform-origin: bottom left; transform: scaleY(0); transition: opacity .3s, transform .5s var(--ease); }
.in .peaks .flag { opacity: 1; transform: none; } .in .peaks .f1 { transition-delay: 1.6s } .in .peaks .f2 { transition-delay: 1.85s } .in .peaks .f3 { transition-delay: 2.1s }
/* route */
.route { width: 100%; height: auto; margin-block-start: 1.4rem; overflow: visible; }
.route .sea { fill: rgba(120,190,255,.16); } .route .seat { fill: rgba(200,230,255,.6); font-size: 14px; font-style: italic; font-family: var(--font); }
.route .coast { fill: none; stroke: #ffd28a; stroke-width: 2.5; stroke-dasharray: 900; stroke-dashoffset: 900; transition: stroke-dashoffset 2s var(--ease); }
.in .route .coast { stroke-dashoffset: 0; }
.route .city { fill: #fff7ee; } .route .ct { fill: #fff7ee; font-size: 15px; font-weight: 600; font-family: var(--font); }
.route .dl { fill: #ffd28a; font-size: 18px; font-weight: 700; font-family: var(--font); }
.route .days circle { fill: #ff9ec0; transform-box: fill-box; transform-origin: center; transform: scale(0); transition: transform .4s var(--ease); }
.in .route .days circle { transform: scale(1); }
.route .rider { offset-path: path("M30 46 C120 56 170 98 250 122 S420 162 520 150 S596 124 612 112"); offset-rotate: 0deg; opacity: 0; }
.route .rider circle { fill: #f08a4b; stroke: #fff7ee; stroke-width: 2; } .route .rider path { fill: none; stroke: #fff; stroke-width: 1.6; stroke-linecap: round; }
.in .route .rider { animation: ride 7s linear 2s infinite; }
@keyframes ride { 0% { offset-distance: 0%; opacity: 0 } 5% { opacity: 1 } 92% { opacity: 1 } 100% { offset-distance: 100%; opacity: 0 } }
/* teaching chips */
.tchips { display: flex; flex-wrap: wrap; gap: .5rem; margin-block-start: 1.2rem; }
.tchips li { padding: .35rem .85rem; border-radius: 999px; background: rgba(255,247,238,.12); border: 1px solid rgba(255,247,238,.25); font-size: .92rem; }
.tchips li.hot { background: #f08a4b; border-color: #f08a4b; color: #2a1408; font-weight: 600; }
/* basketball */
.ball { width: 8.5rem; height: auto; justify-self: center; overflow: visible; }
.ball .spin { transform-origin: 60px 52px; animation: spinball 1.1s linear infinite; }
@keyframes spinball { to { transform: rotate(360deg); } }
.ball .shadow { fill: rgba(40,10,0,.25); transform-box: fill-box; transform-origin: center; animation: shadowpulse 1.1s ease-in-out infinite; }
@keyframes shadowpulse { 50% { transform: scaleX(.85); opacity: .7; } }
:root.calm .ball .shadow { animation: none; }
.otc-foot { margin-block-start: 4.5rem; display: flex; flex-wrap: wrap; gap: .8rem; }
.otc-btn { display: inline-flex; align-items: center; gap: .55rem; padding: .75rem 1.25rem; border-radius: 999px; background: #fff7ee; color: #2a1408; font-weight: 600; text-decoration: none; transition: transform .3s var(--ease); }
.otc-btn:hover { transform: translateY(-2px); }
.otc-btn svg { width: 1.15rem; height: 1.15rem; fill: none; stroke: currentColor; stroke-width: 2; }
.otc-btn.ghost { background: transparent; color: #fff7ee; border: 1.5px solid rgba(255,247,238,.6); }
:root.calm .otc-sec, :root.calm .otc-head { opacity: 1; transform: none; transition: none; }
:root.calm .pola, :root.calm .ball .spin, :root.calm .route .rider { animation: none !important; }
:root.calm .peaks .mt, :root.calm .route .coast { stroke-dashoffset: 0; transition: none; }
:root.calm .peaks .flag, :root.calm .route .days circle { opacity: 1; transform: none; transition: none; }
@media print { .otc, .door-wrap { display: none !important; } }

/* ==================== 16. v10: logo, docking, section icons, lamp sentence ==================== */
/* docked identity */
.side-id { display: flex; align-items: center; gap: .7rem; margin-block-end: 1.4rem; text-decoration: none; color: var(--ink);
  opacity: 0; transform: translateY(6px) scale(.96); transform-origin: left center; pointer-events: none; transition: opacity .8s var(--ease), transform .8s var(--ease); }
.side-id img { width: 3.1rem; height: 3.1rem; border-radius: 50%; object-fit: cover; box-shadow: 0 0 0 2px var(--bg), 0 0 0 3.5px var(--accent); }
.side-id b { display: block; font-size: .95rem; font-weight: 650; line-height: 1.25; }
.side-id small { display: block; font-size: .75rem; color: var(--ink-2); line-height: 1.35; }
:root.docked .side-id { opacity: 1; transform: none; pointer-events: auto; }
.top-id { display: none; align-items: center; gap: .5rem; font-size: .9rem; opacity: 0; transform: translateY(-6px); transition: opacity .45s var(--ease), transform .45s var(--ease); }
.top-id img { width: 1.8rem; height: 1.8rem; border-radius: 50%; object-fit: cover; }
@media (max-width: 979px) { .top-id { display: inline-flex; } :root.docked .top-id { opacity: 1; transform: none; } :root.docked .mono { display: none; } }
@media (max-width: 479px) { .top-id b { display: none; } }
.ghost-photo { position: fixed; z-index: 30; border-radius: 50%; object-fit: cover; pointer-events: none; }
/* section icons */
.section > h2 { display: flex; align-items: center; gap: .7rem; }
.sico { flex: none; width: 2.3rem; height: 2.3rem; border-radius: 10px; background: var(--accent-soft); display: grid; place-items: center; transition: transform .5s var(--ease), background .4s; }
.sico svg { width: 1.35rem; height: 1.35rem; fill: none; stroke: var(--accent); stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.sico svg :is(path, rect, circle) { stroke-dasharray: 80; stroke-dashoffset: 80; }
.sico.drawn svg :is(path, rect, circle) { animation: draw 1.3s var(--ease) forwards; }
.sico.drawn svg :nth-child(2) { animation-delay: .2s } .sico.drawn svg :nth-child(3) { animation-delay: .4s } .sico.drawn svg :nth-child(4) { animation-delay: .55s }
.section > h2:hover .sico { transform: rotate(-6deg) scale(1.06); background: var(--accent); }
.section > h2:hover .sico svg { stroke: var(--accent-ink); }
.section > h2::before { top: 50%; translate: 0 -50%; }
:root.calm .sico svg :is(path, rect, circle) { stroke-dashoffset: 0; animation: none !important; }
.paths-sec { margin-block-start: 3.5rem; }
.paths-sec .entries { margin-block-start: 1.4rem; }
/* lamp sentence: dark line glows with the bulb, lit line arrives word by word */
.lamp-line { display: grid; margin-block-start: 1.6rem; max-width: 34ch; text-align: center; font-size: clamp(1.15rem, 2.6vw, 1.5rem); line-height: 1.45; }
:root[lang="fa"] .lamp-line { line-height: 1.8; }
.lamp-line > span { grid-area: 1 / 1; transition: opacity .7s var(--ease), filter .7s var(--ease); }
.lamp-line .dk { color: color-mix(in srgb, var(--ink) calc(35% + var(--g) * 55%), transparent); font-style: italic; text-shadow: 0 0 calc(var(--g) * 18px) rgba(255,200,90,calc(var(--g) * .55)); }
.lamp-line .lt { opacity: 0; font-weight: 560; }
.lamp-line .lt .wd { display: inline-block; opacity: 0; transform: translateY(8px); filter: blur(4px); transition: opacity .6s var(--ease), transform .6s var(--ease), filter .6s var(--ease); transition-delay: calc(var(--w) * 70ms + 250ms); }
.lamp.on .lamp-line .dk { opacity: 0; filter: blur(6px); }
.lamp.on .lamp-line .lt { opacity: 1; }
.lamp.on .lamp-line .lt .wd { opacity: 1; transform: none; filter: none; }
.lamp-line .lt .wd.key { color: var(--amber); }
.lamp-hint { margin-block-start: .7rem; font-size: .8rem; }
:root.calm .lamp-line .lt .wd { transition: none; }
/* teaching extras */
.otc-link { display: inline-flex; align-items: center; gap: .4rem; margin-block-start: 1rem; color: #ffd28a; font-weight: 600; text-decoration: none; border-bottom: 1px solid rgba(255,210,138,.5); }
.otc-link:hover { border-color: #ffd28a; }
.otc-link svg { width: .9rem; height: .9rem; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; }
.p2 .pola { width: min(62%, 19rem); }
.p2 .pola:nth-child(2) { margin-block-start: 4rem; margin-inline-start: -2.5rem; }
@media print { .side-id, .top-id, .lamp-line { display: none !important; } }
.print-only { display: none; }
@media print { .print-only { display: block !important; } }
.hero .hero-more { margin-block-start: 1.1rem; font-size: 1rem; }
.hero .meta { margin-block-start: 1.1rem; }

/* ---- v12: bicycle on the coast, ball on the fingertip ---- */
.route .bike { offset-path: path("M30 46 C120 56 170 98 250 122 S420 162 520 150 S596 124 612 112"); offset-rotate: auto; opacity: 0; }
.route .bike * { fill: none; stroke: #fff7ee; stroke-width: 1.3; stroke-linecap: round; stroke-linejoin: round; }
.route .bike .head { fill: #ffd28a; stroke: none; }
.route .bike .body { stroke: #ffd28a; stroke-width: 2.2; }
.route .bike .wheel { transform-box: fill-box; transform-origin: center; }
.in .route .bike { animation: ride 9s linear 2s infinite; }
.in .route .bike .wheel { animation: wheel .8s linear infinite; }
@keyframes wheel { to { rotate: 360deg; } }
:root.calm .route .bike { animation: none !important; opacity: 1; offset-distance: 50%; }
:root.calm .route .bike .wheel { animation: none !important; }
.hooper { position: relative; width: min(100%, 17rem); justify-self: center; }
.hooper img { display: block; width: 100%; height: auto; }
.hooper svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.otc-sec.in .hooper { animation: drop .9s var(--ease) both; --rot: 0deg; }
@media (max-width: 479px) { #print-btn { display: none; } }