/* Marina Current: shared editorial skin for indexes and long-form pages. */
:root {
  --mc-ground: #edf1ef;
  --mc-ground-deep: #dfe8e5;
  --mc-ink: #102f36;
  --mc-muted: #60757a;
  --mc-line: rgba(16, 47, 54, .18);
  --mc-line-strong: rgba(16, 47, 54, .62);
  --mc-sea: #0c6671;
  --mc-sea-dark: #083d48;
  --mc-sea-light: #c8dedb;
  --mc-display: "Helvetica Neue", "Neue Haas Grotesk Text Pro", "PingFang SC", "Microsoft YaHei", sans-serif;
  --mc-body: "Helvetica Neue", "PingFang SC", "Microsoft YaHei", Arial, sans-serif;
  --mc-serif: "Iowan Old Style", "Baskerville", Georgia, serif;
}

:root body:is(.site-index, .site-detail, .marina-inner) {
  --deep: var(--mc-ground);
  --panel: var(--mc-ground-deep);
  --ink: var(--mc-ink);
  --muted: var(--mc-muted);
  --faint: #73888c;
  --accent: var(--mc-sea);
  --line: var(--mc-line);
  --line-strong: var(--mc-line-strong);
  min-width: 320px;
  color: var(--mc-ink);
  background: var(--mc-ground);
  font-family: var(--mc-body);
}

body:is(.site-index, .site-detail, .marina-inner)::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -3;
  opacity: .22;
  pointer-events: none;
  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='.74' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.12'/%3E%3C/svg%3E");
}

body:is(.site-index, .site-detail) :is(.ocean, #soffit-sea) { display: none; }
body:is(.site-index, .site-detail) .reveal { opacity: 1; visibility: visible; transform: none; }
body:is(.site-index, .site-detail, .marina-inner) img { max-width: 100%; }
body:is(.site-index, .site-detail, .marina-inner) a { color: inherit; }
body:is(.site-index, .site-detail, .marina-inner) :is(a, button, summary):focus-visible { outline: 2px solid var(--mc-sea); outline-offset: 5px; }

/* One quiet shell across every route. */
body:is(.site-index, .site-detail) .site-header,
body.marina-inner .site-header {
  position: sticky;
  top: 0;
  z-index: 40;
  width: 100%;
  min-height: 76px;
  padding: 12px max(4vw, calc((100vw - 1380px) / 2));
  border-bottom: 1px solid var(--mc-line);
  color: var(--mc-ink);
  background: rgba(237, 241, 239, .92);
  backdrop-filter: blur(14px);
}

body:is(.site-index, .site-detail) .site-header .brand,
body.marina-inner .site-header .brand {
  display: inline-flex;
  align-items: baseline;
  gap: 8px;
  color: var(--mc-ink);
  font-family: var(--mc-serif);
  font-size: 1.18rem;
  font-weight: 600;
  letter-spacing: 0;
}

body:is(.site-index, .site-detail, .marina-inner) .brand i {
  color: var(--mc-sea);
  font-family: var(--mc-serif);
  font-size: .88rem;
  font-style: italic;
  font-weight: 400;
}

body:is(.site-index, .site-detail) .site-nav a,
body.marina-inner .nav-links a,
body:is(.site-index, .site-detail, .marina-inner) .footer-links a {
  color: var(--mc-muted);
  font-family: var(--mc-body);
  font-size: .68rem;
  font-weight: 600;
  letter-spacing: .1em;
}

body:is(.site-index, .site-detail) .site-nav a:hover,
body:is(.site-index, .site-detail) .site-nav a[aria-current="page"],
body.marina-inner .nav-links a:hover,
body.marina-inner .nav-links a[aria-current="page"] { color: var(--mc-sea); }

body:is(.site-index, .site-detail) .site-nav a[aria-current="page"]::after { background: var(--mc-sea); }
body:is(.site-index, .site-detail) .language-switch { border-color: var(--mc-line); background: transparent; }
body:is(.site-index, .site-detail) .language-switch a { color: var(--mc-muted); }
body:is(.site-index, .site-detail) .language-switch a:hover,
body:is(.site-index, .site-detail) .language-switch a[aria-current="page"] { color: var(--mc-ink); background: var(--mc-sea-light); }
body:is(.site-index, .site-detail) .mobile-menu { color: var(--mc-muted); background: transparent; }
body:is(.site-index, .site-detail) .mobile-panel {
  border-color: var(--mc-line);
  color: var(--mc-ink);
  background: rgba(237, 241, 239, .98);
  box-shadow: 7px 7px 0 var(--mc-sea-light);
}

body:is(.site-index, .site-detail) .wrap { width: min(calc(100% - 72px), 1380px); }
body.marina-inner .container { width: min(calc(100% - 72px), 1380px); }

/* Index heroes: editorial statement first, art as supporting evidence. */
body.site-index :is(.work-hero, .writing-hero, .skills-hero, .about-hero) {
  min-height: clamp(560px, 72dvh, 760px);
  padding-top: clamp(72px, 8vw, 118px);
  padding-bottom: clamp(58px, 7vw, 94px);
  border-bottom: 1px solid var(--mc-line-strong);
}

body.site-index main :is(.hero-copy, .skills-hero-copy, .about-hero-copy) h1 {
  max-width: 13ch;
  color: var(--mc-ink);
  font-family: var(--mc-display);
  font-size: clamp(3.8rem, 6.5vw, 6.6rem);
  font-weight: 500;
  line-height: .95;
  letter-spacing: -.065em;
  text-wrap: balance;
}

:root[lang="zh-CN"] body.site-index main :is(.hero-copy, .skills-hero-copy, .about-hero-copy) h1 { max-width: 11em; }
body.site-index :is(.eyebrow, .case-type, .provenance, .release-state) { color: var(--mc-sea); }
body.site-index main :is(.hero-copy, .skills-hero-copy, .about-hero-copy) > p:not(.eyebrow) { color: var(--mc-muted); }
body.site-index :is(.hero-figure, .hero-figure img, .about-figure img, .case-figure, .library-snapshot) { filter: none; }
body.site-index :is(.hero-figure, .about-figure) img { filter: drop-shadow(0 28px 42px rgba(8, 61, 72, .16)); }
body.work-index-page .work-hero .hero-figure,
body.writing-index-page .writing-hero .hero-figure { width: min(44vw, 590px); margin: 0; overflow: hidden; background: var(--mc-ground-deep); aspect-ratio: 3 / 2; pointer-events: none; }
body.work-index-page .work-hero .hero-figure img,
body.writing-index-page .writing-hero .hero-figure img { width: 100%; height: 100%; object-fit: contain; transform: none; animation: none; filter: none; }
body.about-page .about-hero .about-figure { width: min(34vw, 440px); margin: 0; pointer-events: none; }
body.about-page .about-hero .about-figure img { max-height: 650px; width: 100%; object-fit: contain; animation: none; }

body.site-index :is(.archive, .work-index, .candidate-index, .about-story, .about-practice, .about-recent, .about-boundary) {
  border-color: var(--mc-line-strong);
}

body.site-index :is(.archive-head, .section-head, .candidate-head) { border-color: var(--mc-line); }
body.site-index :is(.archive-head, .section-head, .candidate-head) h2 {
  color: var(--mc-ink);
  font-size: clamp(2.5rem, 4vw, 4.2rem);
  font-weight: 500;
  line-height: 1;
  letter-spacing: -.05em;
}

body.site-index :is(.filter, .skill-filters button) {
  border-color: var(--mc-line);
  color: var(--mc-muted);
  background: transparent;
}
body.site-index :is(.filter, .skill-filters button):hover,
body.site-index :is(.filter, .skill-filters button)[aria-pressed="true"] {
  border-color: var(--mc-sea);
  color: var(--mc-ink);
  background: var(--mc-sea-light);
}
body.work-index-page .work-index > .filters {
  border-top: 1px solid var(--mc-line);
  border-bottom: 1px solid var(--mc-line);
  background: rgba(237, 241, 239, .92);
}

body.site-index :is(.article-list, .article-row, .cases, .case, .skill-grid, .skill-card, .practice-lines article, .recent-list article) { border-color: var(--mc-line); }
body.site-index .article-row { color: var(--mc-muted); background: transparent; }
body.site-index .article-row:hover,
body.site-index .article-row[aria-current="true"] { color: var(--mc-ink); background: linear-gradient(90deg, rgba(12, 102, 113, .09), transparent 72%); }
body.site-index .article-preview {
  color: #f1f7f5;
  border-color: var(--mc-sea-dark);
  background: var(--mc-sea-dark);
  box-shadow: 10px 10px 0 var(--mc-sea-light);
}
body.site-index .article-preview :is(h3, .read-link) { color: #f1f7f5; }
body.site-index .article-preview :is(p, .preview-meta, .preview-status) { color: rgba(241, 247, 245, .72); }
body.site-index .article-preview .preview-watermark { color: rgba(200, 222, 219, .12); }

body.site-index .case,
body.site-index .skill-card,
body.site-index .library-snapshot {
  border-color: var(--mc-line);
  color: var(--mc-ink);
  background: rgba(223, 232, 229, .5);
  box-shadow: none;
}
body.site-index :is(.case-summary, .skill-card-body > p, .candidate-head p, .section-head p, .practice-lines p, .recent-list p) { color: var(--mc-muted); }
body.skills-page main :is(.skill-card-note, .skill-card-meta dt, .library-snapshot p, .release-loop p, .release-rules p, .rules-list p) { color: var(--mc-muted); }
body.skills-page .skills-primary-link { color: #f1f7f5; }
body.skills-page .library-snapshot .library-count { color: var(--mc-ink); }
body.site-index :is(.case-featured, .skill-featured) { border-color: var(--mc-sea); background: var(--mc-ground-deep); }
body.site-index :is(.system-map, .debug-evidence, .release-loop, .release-rules) { border-color: var(--mc-line); background: transparent; }
body.site-index .flow-node { border-color: var(--mc-line); color: var(--mc-ink); background: var(--mc-ground); }
body.work-index-page .primary-link { color: #f1f7f5; }
body.work-index-page .case:not(.case-featured) .case-copy { padding-bottom: 78px; }

/* About used to be a separate dark-ocean concept; keep its interactions, not the old theme. */
body.about-page main {
  color: var(--mc-ink);
  background: transparent;
}
body.about-page main .about-hero-copy .personal-hook,
body.about-page main .story-copy .story-lead { color: var(--mc-ink) !important; }
body.about-page main :is(.story-explanation, .personal-aside, .personal-aside p, .practice-intro p, .folder-content p, .recent-intro, .recent-list p, .about-boundary p, .about-next p) { color: var(--mc-muted) !important; }
body.about-page main :is(.personal-aside summary, .about-cta, .text-link) { color: var(--mc-sea); }
body.about-page main .about-hero { border-bottom: 1px solid var(--mc-line-strong) !important; }
body.about-page main :is(.about-story, .about-practice, .about-recent, .about-boundary) { border-bottom: 1px solid var(--mc-line) !important; }
body.about-page main .folder-stack::before,
body.about-page main .side-stage::before { opacity: .38; }
body.about-page main .folder-tab { color: var(--mc-muted); }
body.about-page main .is-open .folder-tab,
body.about-page main .is-open .folder-tab:hover { color: var(--mc-ink); }
body.about-page main .side-button { color: var(--mc-muted); }
body.about-page main .is-selected .side-button { color: var(--mc-ink); }
body.about-page main .side-stage { padding: 24px; background: var(--mc-sea-dark); }
body.about-page main .stage-label,
body.about-page main .stage-caption { color: rgba(241, 247, 245, .76); }
body.about-page .site-footer { color: var(--mc-ink); background: transparent; border-top: 1px solid var(--mc-line-strong); }

/* Long-form pages: spacious lead, calm reading measure, visible evidence blocks. */
body.site-detail :is(.article-hero, .case-hero) {
  min-height: 0;
  padding-top: clamp(72px, 8vw, 118px);
  padding-bottom: clamp(64px, 8vw, 104px);
  border-bottom: 1px solid var(--mc-line-strong);
}
body.site-detail :is(.article-hero, .case-hero) h1 {
  max-width: 18ch;
  color: var(--mc-ink);
  font-size: clamp(3.4rem, 5.6vw, 6rem);
  font-weight: 500;
  line-height: 1;
  letter-spacing: -.06em;
  text-wrap: balance;
}
:root[lang="zh-CN"] body.site-detail :is(.article-hero, .case-hero) h1 { max-width: 13em; }
body.site-detail :is(.article-category, .article-byline, .eyebrow, .section-label, .section-number) { color: var(--mc-sea); }
body.site-detail :is(.article-deck, .case-lead) { color: var(--mc-muted); }
body.case-page .case-facts .fact { color: #f1f7f5; }
body.case-page .case-facts .fact span { color: #9bd1cf; }
body.site-detail :is(.article-figure, .case-hero-figure) img { filter: drop-shadow(0 28px 42px rgba(8, 61, 72, .16)); }
body.site-detail .article-hero:not(:has(.article-figure)),
body.site-detail .case-hero:not(:has(.case-hero-figure)) { grid-template-columns: minmax(0, 1fr); min-height: clamp(480px, 65dvh, 680px); }
body.site-detail .article-hero:not(:has(.article-figure)) .article-hero-copy,
body.site-detail .case-hero:not(:has(.case-hero-figure)) .case-hero-copy { max-width: 900px; }
body.site-detail .article-figure { width: min(38vw, 520px); margin: 0; aspect-ratio: 3 / 2; overflow: hidden; background: var(--mc-ground-deep); pointer-events: none; }
body.site-detail .article-figure img { width: 100%; height: 100%; object-fit: contain; animation: none; filter: none; }

body.site-detail :is(.article-shell, .case-body) { color: var(--mc-ink); }
body.site-detail :is(.article-toc, .case-toc) a { border-color: var(--mc-line); color: var(--mc-muted); }
body.site-detail :is(.article-toc, .case-toc) a:hover,
body.site-detail :is(.article-toc, .case-toc) a.active { border-color: var(--mc-sea); color: var(--mc-ink); }
body.site-detail :is(.article-content, .case-content) :is(p, li, dd) { color: var(--mc-muted); }
body.site-detail :is(.article-content, .case-content) :is(h2, h3, strong) { color: var(--mc-ink); }
body.site-detail .article-content h2,
body.site-detail .case-content h2 { font-weight: 500; letter-spacing: -.045em; }
body.site-detail .article-content .direct-answer {
  border: 0;
  padding: clamp(26px, 4vw, 46px);
  color: #f1f7f5;
  background: var(--mc-sea-dark);
}
body.site-detail .article-content .direct-answer strong { display: block; margin-bottom: 12px; color: #9bd1cf; }
body.site-detail .article-content blockquote,
body.site-detail .pull-line { color: var(--mc-ink); border-color: var(--mc-sea); }
body.site-detail .markdown-content > p,
body.site-detail .markdown-content > ul,
body.site-detail .markdown-content > ol { color: var(--mc-muted); }
body.site-detail .markdown-content > h2,
body.site-detail .markdown-content > h3 { color: var(--mc-ink); border-color: var(--mc-line); }
body.site-detail.archive-article-page .article-hero h1.skill-article-title { max-width: 19ch; margin-bottom: 34px; font-size: clamp(40px, 3.7vw, 60px); line-height: 1.16; letter-spacing: -.035em; }
body.site-detail.archive-article-page .article-hero h1 .keep-together { white-space: nowrap; }
body.site-detail.archive-article-page .markdown-content table,
body.site-detail.archive-article-page .markdown-content td { color: var(--mc-muted); }
body.site-detail.archive-article-page .markdown-content th { color: var(--mc-ink); }
body.site-detail .markdown-content :is(a, li::marker) { color: var(--mc-sea); }
body.site-detail .markdown-content mark { color: var(--mc-ink); background: var(--mc-sea-light); }
body.site-detail .markdown-content figure img { border-color: var(--mc-line); background: var(--mc-ground-deep); }
body.site-detail :is(.system-figure, .evidence-grid > div, .process > div, .boundary article, .outcome, .truth-note, .state-split > div) {
  border-color: var(--mc-line);
  color: var(--mc-ink);
  background: rgba(223, 232, 229, .55);
}
body.site-detail :is(.next-read, .next-case) { border-color: var(--mc-line-strong); }

/* BaseLayout work story. */
body.marina-inner .site-header .nav { width: 100%; }
body.marina-inner .work-detail-hero { padding-top: clamp(64px, 8vw, 108px); }
body.marina-inner .work-detail-heading,
body.marina-inner .work-detail-meta,
body.marina-inner .work-hero-visual img,
body.marina-inner .work-detail-footer { border-color: var(--mc-line-strong); }
body.marina-inner .work-detail-heading h1,
body.marina-inner .work-detail-footer h2 { color: var(--mc-ink); font-weight: 500; }
body.marina-inner :is(.work-detail-summary, .work-detail-meta dd, .work-body p, .work-body li, .work-detail-footer > p) { color: var(--mc-muted); }
body.marina-inner :is(.eyebrow, .work-detail-meta dt, .work-toc span) { color: var(--mc-sea); }
body.marina-inner .work-hero-visual img { background: var(--mc-ground-deep); }

body:is(.site-index, .site-detail, .marina-inner) .site-footer {
  padding-block: 42px;
  border-top: 1px solid var(--mc-line-strong);
  color: var(--mc-ink);
  background: transparent;
}
body:is(.site-index, .site-detail, .marina-inner) .footer-inner > :first-child,
body:is(.site-index, .site-detail) .footer-inner > span { color: var(--mc-ink); font-family: var(--mc-serif); font-size: 1.1rem; font-weight: 600; }

@media (max-width: 900px) {
  body.site-index :is(.work-hero, .writing-hero, .skills-hero, .about-hero),
  body.site-detail :is(.article-hero, .case-hero) { grid-template-columns: minmax(0, 1fr) minmax(220px, .48fr); gap: 36px; }
  body.site-index .archive-layout { grid-template-columns: 1fr; }
  body.site-index .article-preview { min-height: 330px; }
  body.marina-inner .work-detail-meta { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  body.work-index-page .work-hero .hero-figure,
  body.writing-index-page .writing-hero .hero-figure,
  body.site-detail .article-figure { width: min(100%, 590px); margin: 24px 0 0; opacity: 1; }
  body.about-page .about-hero .about-figure { width: min(70vw, 350px); margin: 20px 0 0 auto; opacity: 1; }
}

@media (max-width: 680px) {
  body.site-detail.archive-article-page .article-hero h1.skill-article-title { font-size: clamp(27px, 8vw, 32px); line-height: 1.2; }
  body:is(.site-index, .site-detail) .site-header,
  body.marina-inner .site-header { min-height: 66px; padding: 8px 17px; }
  body:is(.site-index, .site-detail) .site-header .brand,
  body.marina-inner .site-header .brand { font-size: 1rem; }
  body:is(.site-index, .site-detail) .language-switch a { min-width: 34px; min-height: 44px; }
  body:is(.site-index, .site-detail) .mobile-menu { min-width: 52px; min-height: 44px; }
  body:is(.site-index, .site-detail) .mobile-panel { top: 66px; }
  body:is(.site-index, .site-detail) .wrap,
  body.marina-inner .container { width: min(calc(100% - 34px), 1380px); }
  body.site-index :is(.work-hero, .writing-hero, .skills-hero, .about-hero),
  body.site-detail :is(.article-hero, .case-hero) {
    grid-template-columns: 1fr;
    min-height: 0;
    padding-top: 54px;
    padding-bottom: 58px;
  }
  body.site-index main :is(.hero-copy, .skills-hero-copy, .about-hero-copy) h1,
  body.site-detail :is(.article-hero, .case-hero) h1 { font-size: clamp(3rem, 14vw, 4.35rem); }
  body.site-index :is(.hero-figure, .about-figure),
  body.site-detail :is(.article-figure, .case-hero-figure) { width: min(76vw, 340px); margin-inline: auto 0; }
  body.site-index :is(.archive, .work-index, .candidate-index, .about-story, .about-practice, .about-recent, .about-boundary) { padding-block: 72px; }
  body.site-index :is(.archive-head, .section-head, .candidate-head) { display: block; }
  body.site-index :is(.filters, .skill-filters) { justify-content: flex-start; margin-top: 28px; }
  body.site-index .article-row { grid-template-columns: 54px minmax(0, 1fr) 44px; }
  body.site-detail :is(.article-shell, .case-body) { grid-template-columns: 1fr; padding-block: 58px 84px; }
  body.site-detail :is(.article-toc, .case-toc) { position: static; }
  body.marina-inner .work-detail-meta { grid-template-columns: 1fr; }
  body.marina-inner .work-detail-meta div { border-right: 0; }
  body.marina-inner .work-detail-meta div + div { padding-left: 0; }
}

@media (prefers-reduced-motion: reduce) {
  body:is(.site-index, .site-detail, .marina-inner) *,
  body:is(.site-index, .site-detail, .marina-inner) *::before,
  body:is(.site-index, .site-detail, .marina-inner) *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}

/* About: a specific scene and a readable diagram in place of the floating figure and jellyfish. */
body.about-page .about-hero .about-figure {
  grid-column: 7 / 13;
  width: min(48vw, 680px);
  aspect-ratio: 3 / 2;
  justify-self: end;
  overflow: hidden;
  border: 1px solid var(--mc-line);
  background: radial-gradient(circle at 52% 42%, #e5f0ed, #c9dedb 68%, #adcacb);
  box-shadow: 18px 18px 0 var(--mc-sea-light);
}
body.about-page .about-hero .about-figure img {
  width: 100%;
  height: 100%;
  max-height: none;
  object-fit: cover;
  filter: none;
}
body.about-page .side-stage {
  min-height: 460px;
  padding: clamp(24px, 3vw, 42px);
  overflow: hidden;
  background: var(--mc-sea-dark);
}
body.about-page .stage-label {
  position: relative;
  z-index: 1;
  color: #a7d2d2;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .12em;
}
body.about-page .stage-canvas {
  position: relative;
  inset: auto;
  display: flex;
  flex: 1;
  align-items: center;
  width: 100%;
  min-height: 0;
  padding: 28px 0;
}
body.about-page .work-visual { width: 100%; }
body.about-page .work-visual-title {
  display: block;
  width: fit-content;
  margin-bottom: 32px;
  color: #f1f7f5;
  font-family: var(--mc-display);
  font-size: clamp(34px, 4vw, 56px);
  font-weight: 500;
  letter-spacing: -.055em;
  line-height: 1.05;
}
body.about-page .work-visual-steps {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 8px;
  padding-top: 18px;
  border-top: 1px solid #76a1a7;
}
body.about-page .work-visual-step {
  min-width: 0;
  padding: 13px 8px;
  border: 1px solid #79a5a9;
  color: #e7f3f1;
  font-size: clamp(10px, 1.1vw, 13px);
  font-weight: 600;
  line-height: 1.3;
  text-align: center;
  overflow-wrap: anywhere;
}
body.about-page .work-visual-step:first-child { color: var(--mc-sea-dark); background: #c8dedb; }
body.about-page .stage-caption { position: relative; z-index: 1; margin: 0; color: #bfd9dc; font-size: 14px; line-height: 1.6; }

/* The Skill detail uses a light reading surface and dark code panels. */
body.skill-detail-page :is(.state-heading p, .contract-heading p, .contract-rows dd, .state-flow li) { color: var(--mc-muted); }
body.skill-detail-page .state-flow li { font-size: 12px; font-weight: 600; letter-spacing: .02em; }
body.skill-detail-page .state-flow li:last-child { color: var(--mc-ink); }
body.skill-detail-page :is(.contract-source, .package-tree, .install-methods article, .starter-frame) {
  --muted: #b7d3dc;
  --ink: #f1f7f5;
  --faint: #a6bec7;
  --accent: #8bd7d2;
}

@media (max-width: 900px) {
  body.about-page .about-hero .about-figure { width: min(48vw, 530px); }
}
@media (max-width: 680px) {
  body.about-page main .about-hero { grid-template-rows: auto auto; }
  body.about-page .about-hero .about-figure {
    grid-column: 1 / -1;
    grid-row: 2;
    width: 100%;
    margin: 34px 0 0;
    transform: none;
    box-shadow: 9px 9px 0 var(--mc-sea-light);
  }
  body.about-page .about-hero .about-figure img { max-height: none; }
  body.about-page .side-stage { min-height: 300px; padding: 24px; }
  body.about-page .stage-canvas { padding: 22px 0; }
  body.about-page .work-visual-title { margin-bottom: 24px; font-size: 36px; }
  body.about-page .work-visual-step { font-size: 10px; padding: 11px 4px; }
}