/* ── Design tokens ── */
:root {
  --bg: oklch(.075 0 0);
  --surface: oklch(.12 0 0);
  --ink: oklch(.94 .005 260);
  --muted: oklch(.65 .015 260);
  --rule: oklch(.28 .01 260);
  --primary: oklch(.49 .18 4);
  --accent: oklch(.76 .1 220);
  --max: 1200px;
  --gap: clamp(20px, 4vw, 48px);
}

/* ── Reset ── */
*, *::before, *::after { box-sizing: border-box; margin: 0; }
html { scroll-behavior: smooth; }
body {
  background: var(--bg);
  color: var(--ink);
  font-family: Manrope, "Noto Sans SC", sans-serif;
  line-height: 1.55;
}
a { color: inherit; text-decoration: none; }
img { display: block; max-width: 100%; }

/* ── Noise overlay ── */
.noise {
  position: fixed; inset: 0;
  pointer-events: none; opacity: .06; z-index: 1;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.9'/%3E%3C/svg%3E");
}

/* ── Particle canvas ── */
#particles {
  position: fixed; inset: 0;
  width: 100%; height: 100%;
  pointer-events: none; z-index: 0; opacity: .55;
}

/* ── Shared layering ── */
.topbar, main, footer { position: relative; z-index: 2; }

/* ── Top bar ── */
.topbar {
  width: min(var(--max), calc(100% - var(--gap)));
  height: 80px; margin: auto;
  display: flex; align-items: center; justify-content: space-between;
  border-bottom: 1px solid var(--rule);
}
.wordmark { font-weight: 800; letter-spacing: -.06em; font-size: 1.05rem; }
.wordmark span { color: var(--primary); padding: 0 .08em; }
.topbar nav { display: flex; gap: 28px; font-size: .78rem; color: var(--muted); }
.topbar nav a:hover { color: var(--ink); }
.language {
  border: 1px solid var(--rule); border-radius: 100px;
  background: transparent; color: var(--ink);
  padding: 6px 10px; display: flex; align-items: center; gap: 7px;
  font: 600 .68rem Manrope; cursor: pointer;
}
.language i { height: 4px; width: 4px; border-radius: 50%; background: var(--primary); }

/* ── Typography helpers ── */
.signal {
  font-size: .68rem; font-weight: 700;
  letter-spacing: .12em; text-transform: uppercase;
  color: var(--accent); margin-bottom: 20px;
}
h1, h2 { font-weight: 700; letter-spacing: -.05em; line-height: 1.05; text-wrap: balance; }
h1 em, h2 em { font-style: normal; color: var(--primary); }
.body-copy { max-width: 52ch; font-size: 1rem; color: var(--muted); margin-top: 28px; }

/* ── Hero ── */
.hero {
  width: min(var(--max), calc(100% - var(--gap)));
  min-height: calc(100vh - 80px); margin: auto;
  display: grid; grid-template-columns: 1.1fr .9fr;
  align-items: center; gap: 3rem;
  padding: 6vh 0 10vh; position: relative;
}
.hero h1 { font-size: clamp(3rem, 6vw, 5.5rem); max-width: 12ch; }
.intro { font-size: 1rem; color: var(--muted); max-width: 48ch; margin: 28px 0; }
.hero-actions { display: flex; gap: 24px; align-items: center; }
.button {
  display: inline-block; background: var(--primary);
  padding: 13px 18px; color: oklch(.98 0 0);
  font-weight: 700; font-size: .8rem; transition: background .25s;
}
.button:hover { background: oklch(.55 .18 4); }
.button b, .quiet-link b { padding-left: 8px; }
.quiet-link { font-size: .8rem; font-weight: 700; color: var(--muted); transition: color .2s; }
.quiet-link:hover { color: var(--ink); }

/* Portrait */
.portrait-wrap {
  position: relative;
  height: min(55vw, 560px);
  display: flex; justify-content: center; align-items: flex-end;
}
.portrait {
  max-height: 88%; max-width: 90%; object-fit: contain;
  position: relative; z-index: 1;
  filter: grayscale(.15) contrast(1.06);
}
.orbit { position: absolute; border: 1px solid oklch(.35 .02 260); border-radius: 50%; transform: rotate(-22deg); }
.orbit-one { height: 82%; width: 80%; bottom: 4%; left: 8%; }
.orbit-two { height: 58%; width: 106%; bottom: 18%; left: -3%; border-color: oklch(.36 .07 4); }
.portrait-signal {
  position: absolute; z-index: 2; right: 0; top: 14%;
  display: flex; align-items: flex-start; gap: 10px;
  font-size: .58rem; letter-spacing: .11em; line-height: 1.35;
}
.portrait-signal span:first-child { color: var(--primary); font-size: 1.5rem; font-weight: 800; line-height: .8; }
.portrait-caption {
  position: absolute; left: 0; bottom: 0; z-index: 2;
  font-size: .65rem; letter-spacing: .12em; font-weight: 800;
}
.portrait-caption span { color: var(--muted); font-size: .54rem; }

/* Hero foot */
.hero-foot {
  position: absolute; bottom: 24px; width: 100%;
  display: flex; align-items: center; gap: 12px;
  font-size: .6rem; letter-spacing: .1em; color: var(--muted);
}
.hero-foot .line { height: 1px; flex: 1; background: var(--rule); }

/* ── Statement ── */
.statement {
  width: min(var(--max), calc(100% - var(--gap)));
  margin: auto; padding: 100px 0 120px;
  border-top: 1px solid var(--rule);
}
.statement h2 { font-size: clamp(2.5rem, 5vw, 4.8rem); }

/* ── Section head ── */
.section-head { margin-bottom: 60px; }
.section-head h2 { font-size: clamp(2.5rem, 5vw, 4.8rem); }

/* ── Work section ── */
.work-section {
  width: 100%; padding: 100px 0;
  background: var(--surface);
  padding-left: max(24px, calc((100% - var(--max)) / 2));
  padding-right: max(24px, calc((100% - var(--max)) / 2));
}
.work-list { border-top: 1px solid var(--rule); }
.work-item a {
  display: grid; grid-template-columns: 48px 1fr auto 28px;
  gap: 1rem; align-items: center;
  border-bottom: 1px solid var(--rule); padding: 24px 0;
  transition: padding .35s ease, background .35s ease;
}
.work-item a:hover { padding-left: 14px; background: oklch(.15 .01 4); }
.project-no { font-size: .75rem; color: var(--primary); font-weight: 700; }
.project-main h3 { font-size: 1.2rem; letter-spacing: -.035em; }
.project-main p { font-size: .82rem; color: var(--muted); margin-top: 5px; max-width: 55ch; }
.tags { display: flex; gap: 6px; flex-wrap: wrap; }
.tags span { font-size: .58rem; color: var(--muted); border: 1px solid var(--rule); padding: 4px 7px; }
.arrow { font-size: 1.3rem; font-weight: 400; }

/* ── Honors section ── */
.honors-section {
  width: min(var(--max), calc(100% - var(--gap)));
  margin: auto; padding: 120px 0 40px;
}
.honor-grid {
  display: grid;
  grid-template-columns: 1.3fr 1fr 1fr;
  gap: 16px; margin-bottom: 60px;
}
.honor-card {
  position: relative; padding: 24px;
  min-height: 280px;
  background: linear-gradient(145deg, oklch(.14 .01 4), var(--surface));
  border: 1px solid var(--rule);
  display: flex; flex-direction: column; justify-content: space-between;
}
.honor-card.large { grid-column: span 1; }
.honor-year { font-weight: 800; color: var(--primary); font-size: .76rem; }
.honor-kind { color: var(--accent); font-size: .6rem; font-weight: 800; letter-spacing: .11em; margin-bottom: 10px; }
.honor-card h3 { font-size: clamp(1.3rem, 2vw, 1.85rem); line-height: 1.08; letter-spacing: -.04em; }
.honor-note { font-size: .78rem; color: var(--muted); max-width: 30ch; }

/* ── Photo rail ── */
.honor-rail { margin-bottom: 40px; }
.photo-rail {
  min-width: 0; overflow-x: auto;
  scroll-snap-type: x mandatory;
  scrollbar-width: thin; scrollbar-color: var(--primary) var(--surface);
  padding: 4px 0 14px;
}
.rail-track { display: flex; gap: 14px; width: max-content; padding-right: 20px; will-change: transform; }
.rail-card {
  position: relative; flex: 0 0 clamp(240px, 28vw, 340px);
  height: 380px; padding: 0;
  border: 1px solid var(--rule); background: var(--surface);
  color: var(--ink); text-align: left; overflow: hidden;
  cursor: pointer; scroll-snap-align: start;
}
.rail-card img {
  display: block; width: 100%; height: 100%;
  object-fit: cover; filter: grayscale(.5) contrast(1.06);
  transition: transform .6s cubic-bezier(.16,1,.3,1), filter .4s;
}
.rail-card::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(180deg, transparent 40%, oklch(.06 0 0/.92) 100%);
  pointer-events: none;
}
.rail-card strong, .rail-card em { position: absolute; z-index: 1; left: 16px; right: 16px; }
.rail-card strong { bottom: 36px; font-size: 1rem; letter-spacing: -.03em; }
.rail-card em { bottom: 14px; color: var(--accent); font: 700 .56rem Manrope, "Noto Sans SC", sans-serif; letter-spacing: .1em; font-style: normal; }
.rail-card:hover img, .rail-card:focus-visible img { filter: grayscale(0); transform: scale(1.05); }
.rail-card:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }

/* ── Gallery section ── */
.gallery-section {
  width: min(var(--max), calc(100% - var(--gap)));
  margin: auto; padding: 90px 0 120px;
  display: grid; grid-template-columns: 32% 1fr; gap: 6%;
}
.gallery-copy h2 { font-size: clamp(2.5rem, 5vw, 4.8rem); }
.gallery-area { min-width: 0; }
.gallery-filter { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 16px; }
.gallery-filter button {
  border: 1px solid var(--rule); background: transparent;
  color: var(--muted); font: 700 .62rem Manrope, "Noto Sans SC", sans-serif;
  letter-spacing: .07em; padding: 6px 10px; cursor: pointer;
  transition: color .2s, border-color .2s, background .2s;
}
.gallery-filter button.active, .gallery-filter button:hover {
  color: var(--ink); border-color: var(--primary); background: oklch(.22 .07 4);
}
.gallery {
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}
.gallery-item {
  margin: 0; min-width: 0; background: var(--surface); padding: 6px;
  overflow: hidden;
}
.gallery-item img {
  display: block; width: 100%; height: 260px;
  object-fit: cover; background: oklch(.1 0 0);
  transition: transform .5s cubic-bezier(.16,1,.3,1), filter .4s;
  filter: grayscale(.2);
}
.gallery-item:hover img { transform: scale(1.03); filter: grayscale(0); }
.gallery-item figcaption { font-size: .6rem; color: var(--muted); letter-spacing: .08em; padding: 8px 4px 2px; }
.gallery-item:first-child { grid-row: span 2; }
.gallery-item:first-child img { height: 100%; min-height: 260px; }

/* ── Detail dialog ── */
.detail-dialog {
  width: min(860px, calc(100% - 32px)); padding: 0;
  border: 1px solid var(--rule); background: var(--surface); color: var(--ink);
}
.detail-dialog::backdrop { background: oklch(.03 0 0/.82); backdrop-filter: blur(7px); }
.detail-dialog img { display: block; width: 100%; max-height: 52vh; object-fit: contain; background: var(--bg); }
.dialog-copy { padding: 24px clamp(20px, 4vw, 40px) 32px; }
.dialog-copy > p:first-child { margin-bottom: 8px; color: var(--accent); font-size: .64rem; font-weight: 800; letter-spacing: .1em; }
.dialog-copy h2 { font-size: clamp(1.8rem, 4.5vw, 3.8rem); }
.dialog-copy > p:not(:first-child) { max-width: 50ch; color: var(--muted); }
.dialog-close {
  position: absolute; top: 12px; right: 12px;
  width: 36px; height: 36px; border: 1px solid var(--rule); border-radius: 50%;
  background: oklch(.08 0 0/.8); color: var(--ink);
  font-size: 1.5rem; line-height: 1; cursor: pointer; z-index: 1;
}
.wechat-detail {
  margin-top: 20px; padding-top: 16px;
  border-top: 1px solid var(--rule);
  display: flex; gap: 10px; align-items: center;
}
.wechat-detail span { font-size: .6rem; letter-spacing: .12em; color: var(--accent); font-weight: 800; }
.wechat-detail strong { font-size: .95rem; }

/* ── Footer ── */
footer {
  border-top: 1px solid var(--rule);
  width: min(var(--max), calc(100% - var(--gap)));
  margin: auto; padding: 44px 0 32px;
  display: flex; flex-wrap: wrap; align-items: end; gap: 20px;
}
footer p { font-size: 1.15rem; letter-spacing: -.03em; max-width: 26ch; flex: 1 1 100%; }
.contact-links { display: flex; gap: 18px; flex-wrap: wrap; }
.contact-links a { color: var(--accent); font-size: .75rem; font-weight: 700; transition: color .2s; }
.contact-links a:hover { color: var(--ink); }
footer > span { font-size: .6rem; color: var(--muted); letter-spacing: .08em; margin-left: auto; }

/* ── Scroll reveal ── */
.reveal {
  animation: rise .7s both;
  animation-timeline: view();
  animation-range: entry 0% cover 28%;
}
@keyframes rise { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: none; } }

/* ── Reduced motion ── */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior: auto !important; animation: none !important; transition: none !important; }
}

/* ── Mobile ── */
@media (max-width: 760px) {
  :root { --gap: 32px; }

  .topbar { height: 68px; position: sticky; top: 0; background: var(--bg); z-index: 10; }
  .topbar nav { display: none; }

  /* Hero: stack portrait above copy */
  .hero {
    grid-template-columns: 1fr;
    padding: 48px 0 80px; gap: 24px;
  }
  .hero-copy { order: 2; }
  .portrait-wrap { order: 1; height: 320px; }
  .hero h1 { font-size: clamp(2.6rem, 12vw, 4rem); max-width: none; }
  .intro { max-width: 100%; }
  .hero-foot { bottom: 20px; }

  /* Statement */
  .statement { padding: 70px 0 80px; }
  .statement h2 { font-size: clamp(2.2rem, 10vw, 3.5rem); }

  /* Work */
  .work-section { padding: 70px 0; }
  .section-head { margin-bottom: 36px; }
  .section-head h2 { font-size: clamp(2.2rem, 10vw, 3.5rem); }
  .work-item a { grid-template-columns: 36px 1fr 24px; padding: 20px 0; }
  .tags { display: none; }
  .project-main h3 { font-size: 1rem; }
  .project-main p { font-size: .75rem; }

  /* Honors */
  .honors-section { padding: 70px 0 24px; }
  .honor-grid { grid-template-columns: 1fr 1fr; gap: 10px; margin-bottom: 40px; }
  .honor-card { min-height: 200px; padding: 18px; }
  .honor-card.large { grid-column: span 2; }
  .honor-card h3 { font-size: 1.2rem; }
  .honor-note { font-size: .72rem; }
  .honor-rail { margin-bottom: 20px; }
  .rail-card { height: 300px; flex-basis: 76vw; }

  /* Gallery */
  .gallery-section { grid-template-columns: 1fr; gap: 32px; padding: 60px 0 80px; }
  .gallery-copy h2 { font-size: clamp(2.2rem, 10vw, 3.5rem); }
  .gallery { gap: 8px; }
  .gallery-item { padding: 4px; }
  .gallery-item img { height: 150px; }
  .gallery-item:first-child img { min-height: 150px; }
  .gallery-item figcaption { font-size: .52rem; padding: 6px 2px; }
  .gallery-filter { margin-bottom: 10px; }
  .gallery-filter button { padding: 6px 8px; }

  /* Footer */
  footer { padding: 32px 0 24px; align-items: start; }
  footer p { flex: 1 1 100%; }

  /* Dialog */
  .detail-dialog { width: calc(100% - 20px); }
}

/* Education, credentials, ordered rails, and developer mode */
.profile-section{width:min(var(--max),calc(100% - var(--gap)));margin:auto;padding:80px 0 30px;border-top:1px solid var(--rule)}.profile-grid{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(280px,.85fr);gap:clamp(28px,6vw,84px);align-items:start}.profile-label{color:var(--accent);font-size:.63rem;font-weight:800;letter-spacing:.12em;margin-bottom:14px}.education-card{padding:2px 0 26px;border-bottom:1px solid var(--rule)}.education-card h3{font-size:clamp(1.5rem,2.6vw,2.2rem);letter-spacing:-.045em;line-height:1.08}.education-card>p:last-child{max-width:38ch;margin-top:14px;color:var(--muted);font-size:.84rem}.credential-badges{display:flex;gap:10px;flex-wrap:wrap}.credential-badge{border:1px solid var(--accent);color:var(--ink);padding:10px 13px;font-size:.72rem;font-weight:700;letter-spacing:.04em}.credential-badge.is-empty{border-style:dashed;color:var(--muted);font-weight:500}.honor-rail.photo-rail,.gallery-area.photo-rail{overflow:hidden;scroll-snap-type:none}.honor-rail .rail-card img{object-fit:contain;background:oklch(.085 .01 260)}.gallery-area.photo-rail .gallery{display:flex;gap:14px;width:max-content;padding-right:20px}.gallery-area.photo-rail .gallery-item{flex:0 0 clamp(240px,28vw,340px);height:380px;padding:0;position:relative;border:1px solid var(--rule);background:var(--surface)}.gallery-area.photo-rail .gallery-item:first-child{grid-row:auto}.gallery-area.photo-rail .gallery-item img,.gallery-area.photo-rail .gallery-item:first-child img{width:100%;height:100%;min-height:0;object-fit:cover}.gallery-area.photo-rail .gallery-item figcaption{position:absolute;z-index:2;left:16px;right:16px;bottom:14px;padding:0;color:var(--accent);font-size:.58rem;font-weight:700}.gallery-area.photo-rail .gallery-item::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,transparent 45%,oklch(.06 0 0/.85));pointer-events:none}.developer-dialog{width:min(460px,calc(100% - 32px));padding:30px;border:1px solid var(--rule);background:var(--surface);color:var(--ink)}.developer-dialog::backdrop{background:oklch(.03 0 0/.82);backdrop-filter:blur(7px)}.developer-dialog h2{font-size:2rem}.developer-dialog p:not(.profile-label){margin:15px 0 24px;color:var(--muted)}.developer-dialog .dialog-close{position:absolute;right:12px;top:12px}@media(max-width:760px){.profile-section{width:calc(100% - 32px);padding:64px 0 20px}.profile-grid{grid-template-columns:1fr;gap:34px}.gallery-area.photo-rail .gallery-item{flex-basis:78vw;height:350px}}
.developer-login{display:grid;gap:12px}.developer-login label{display:grid;gap:7px;color:var(--muted);font-size:.76rem}.developer-login input{width:100%;border:1px solid var(--rule);background:var(--bg);color:var(--ink);padding:11px}.developer-status{min-height:1.5em;color:var(--accent)!important;font-size:.78rem}

/* Full honor story, stable typography, profile entries, and contact refinements */
.wordmark,.signal,h1,h2,h3,.credential-badge,footer p{word-break:keep-all;overflow-wrap:normal}.portrait{transform:translateY(-6%)}.education-entry{padding:18px 0;border-bottom:1px solid var(--rule)}.education-entry:first-child{padding-top:0}.education-entry:last-child{border-bottom:0}.education-entry h3{font-size:clamp(1.25rem,2vw,1.75rem)}.education-entry p{margin-top:7px;color:var(--muted);font-size:.78rem;letter-spacing:.04em}.detail-dialog.is-honor{width:100vw;height:100dvh;max-width:none;max-height:none;border:0;margin:0}.detail-dialog.is-honor[open]{display:grid;grid-template-columns:minmax(0,1.65fr) minmax(320px,.75fr)}.detail-dialog.is-honor img{width:100%;height:100dvh;max-height:none;object-fit:contain;background:oklch(.045 0 0)}.detail-dialog.is-honor .dialog-copy{display:flex;flex-direction:column;justify-content:center;padding:clamp(32px,6vw,84px)}.detail-dialog.is-honor .dialog-copy h2{font-size:clamp(2.5rem,5vw,5.2rem)}footer{flex-wrap:nowrap}footer p{max-width:none;white-space:nowrap;flex:1 1 auto;font-size:clamp(.78rem,1.6vw,1.15rem)}.contact-links{flex-wrap:nowrap}.contact-links a{white-space:nowrap}#wechat-copy{cursor:pointer}@media(max-width:760px){.portrait{transform:translateY(-8%)}.detail-dialog.is-honor[open]{grid-template-columns:1fr;grid-template-rows:minmax(0,58dvh) auto;overflow:auto}.detail-dialog.is-honor img{height:58dvh}.detail-dialog.is-honor .dialog-copy{padding:24px 20px 34px}.detail-dialog.is-honor .dialog-copy h2{font-size:2.2rem}footer{display:grid;grid-template-columns:1fr auto;gap:16px 12px}footer p{grid-column:1/-1;font-size:clamp(.68rem,3.15vw,.88rem)}.contact-links{gap:11px}.contact-links a{font-size:.64rem}}
/* Single-line section titles; hero remains deliberately split. */
.statement h2,.section-head h2,.gallery-copy h2{white-space:nowrap;text-wrap:nowrap;font-size:clamp(1rem,5vw,4.8rem)}html[lang='en'] .statement h2,html[lang='en'] .section-head h2,html[lang='en'] .gallery-copy h2{font-size:clamp(.72rem,4vw,4rem)}@media(max-width:760px){.statement h2,.section-head h2,.gallery-copy h2{font-size:clamp(1rem,5.25vw,2.2rem)}html[lang='en'] .statement h2,html[lang='en'] .section-head h2,html[lang='en'] .gallery-copy h2{font-size:clamp(.68rem,3.65vw,1.6rem)}}

/* Life rail mirrors the honors section layout. */
.gallery-section.rail-section{display:block;padding:120px 0}.gallery-section.rail-section .section-head{margin-bottom:60px}.gallery-section.rail-section .gallery-area{width:100%}@media(max-width:760px){.gallery-section.rail-section{padding:70px 0 80px}.gallery-section.rail-section .section-head{margin-bottom:36px}}

/* Keep the portrait fully inside its visual frame. */
.portrait-wrap{overflow:hidden;align-items:center}.portrait{max-height:76%;max-width:82%;transform:none}.portrait-caption{bottom:10px}@media(max-width:760px){.portrait{max-height:74%;max-width:78%;transform:none}.portrait-caption{bottom:4px}}

/* Strong, consistent chapter headers and visible section boundaries. */
.hero h1{max-width:none;font-size:clamp(4rem,8vw,7rem);letter-spacing:-.06em}.hero-copy>.signal{margin-bottom:18px}.profile-section,.honors-section,.gallery-section.rail-section{border-top:1px solid var(--rule)}.section-head{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:end;gap:24px;padding:28px 0 24px;margin-bottom:48px;border-bottom:1px solid var(--rule)}.section-head h2{grid-column:1;grid-row:1;font-size:clamp(2.6rem,5vw,4.8rem);white-space:nowrap}.section-head>.signal{grid-column:2;grid-row:1;margin:0 0 7px;color:var(--accent);text-align:right}.gallery-section.rail-section{background:var(--surface);box-shadow:0 0 0 100vmax var(--surface);clip-path:inset(0 -100vmax)}@media(max-width:760px){.hero h1{font-size:clamp(3.4rem,18vw,5.2rem)}.section-head{grid-template-columns:1fr;padding:20px 0 18px;margin-bottom:32px;gap:8px}.section-head h2{grid-column:1;grid-row:1;font-size:clamp(2rem,10vw,3rem)}.section-head>.signal{grid-column:1;grid-row:2;text-align:left;margin:0;font-size:.58rem}}

/* Restored expressive titles with blue chapter labels and a left-to-right light sweep. */
.hero h1{font-size:clamp(3rem,6vw,5.5rem);max-width:12ch;letter-spacing:-.05em}.section-head{display:block;padding:0;border-bottom:0;margin-bottom:60px}.section-head h2{display:block;font-size:clamp(1rem,5vw,4.8rem);white-space:nowrap}.signal{position:relative;display:inline-flex;align-items:center;width:max-content;padding:0 38px 10px 0;margin-bottom:20px;color:var(--accent);overflow:hidden}.signal::before{content:'';position:absolute;left:0;right:0;bottom:1px;height:1px;background:oklch(.35 .055 220)}.signal::after{content:'';position:absolute;bottom:0;left:-55%;width:48%;height:3px;background:linear-gradient(90deg,transparent,oklch(.72 .16 220/.75),oklch(.96 .04 220),transparent);filter:drop-shadow(0 0 7px oklch(.76 .14 220));animation:signal-light-sweep 3s cubic-bezier(.45,0,.2,1) infinite}.gallery-section.rail-section{background:transparent;box-shadow:none;clip-path:none}@keyframes signal-light-sweep{0%{transform:translateX(0);opacity:0}12%{opacity:1}72%{opacity:1}100%{transform:translateX(340%);opacity:0}}@media(max-width:760px){.hero h1{font-size:clamp(2.6rem,12vw,4rem);max-width:none}.section-head{display:block;padding:0;margin-bottom:36px}.section-head h2{font-size:clamp(1rem,5.25vw,2.2rem)}.section-head>.signal{display:inline-flex;margin-bottom:16px;font-size:.68rem}}@media(prefers-reduced-motion:reduce){.signal::after{animation:none;left:52%;opacity:.8}}