:root {
  --ink: #14201d;
  --ink-soft: #43514d;
  --paper: #f2f3ef;
  --paper-deep: #e7e9e3;
  --line: rgba(20, 32, 29, .15);
  --mint: #a5ddd2;
  --cyan: #76c6e6;
  --acid: #d9ff42;
  --tag-bg: #e8ede6;
  --serif: "PingFang SC", "Microsoft YaHei", "Hiragino Sans GB", Inter, "Helvetica Neue", Arial, sans-serif;
  --sans: "PingFang SC", "Microsoft YaHei", "Hiragino Sans GB", Inter, "Helvetica Neue", Arial, sans-serif;
  --mono: "SFMono-Regular", Consolas, "Liberation Mono", monospace;
}

* { box-sizing: border-box; }
html { background: var(--paper); scroll-behavior: smooth; }
body { margin: 0; color: var(--ink); background: var(--paper); font-family: var(--sans); font-size: 18px; }
body::before { position: fixed; z-index: 20; inset: 0; pointer-events: none; opacity: .035; content: ""; background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.75' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noise)'/%3E%3C/svg%3E"); mix-blend-mode: multiply; }
a { color: inherit; text-decoration: none; }
button { color: inherit; font: inherit; }
img { display: block; max-width: 100%; }

.site-header { position: relative; z-index: 10; display: flex; align-items: center; justify-content: space-between; width: min(1380px, calc(100% - 48px)); min-height: 88px; margin: 0 auto; }
.site-header--home { color: #f7f9f4; }
.brand { font: 700 15px/1 var(--sans); letter-spacing: .15em; }
.brand em { font: 400 17px/1 var(--serif); letter-spacing: -.03em; }
.site-nav { display: flex; align-items: center; gap: 7px; padding: 6px; border: 1px solid var(--line); border-radius: 999px; background: rgba(255,255,255,.47); backdrop-filter: blur(13px); }
.site-nav a { padding: 11px 16px; border-radius: 999px; color: var(--ink-soft); font-size: 14px; transition: color .2s, background .2s; }
.site-nav a:hover, .site-nav a.is-active { color: var(--ink); background: rgba(20,32,29,.09); }
.site-header--home .site-nav { border-color: rgba(255,255,255,.23); background: rgba(18,29,27,.34); }
.site-header--home .site-nav a { color: rgba(247,249,244,.75); }
.site-header--home .site-nav a:hover, .site-header--home .site-nav a.is-active { color: #fff; background: rgba(255,255,255,.15); }
.menu-toggle { display: none; border: 0; color: inherit; background: transparent; font: 12px/1 var(--mono); letter-spacing: .08em; }

.page-home { min-height: 100vh; color: #f7f9f4; background: #101917; }
.ambient { position: fixed; z-index: 0; width: 55vw; height: 55vw; border-radius: 50%; filter: blur(75px); opacity: .22; pointer-events: none; }
.ambient-a { top: -20vw; right: -8vw; background: #186b77; }
.ambient-b { bottom: -35vw; left: -25vw; background: #68853d; }
.home-hero, .home-intro, .home-routes { position: relative; z-index: 1; }
.home-hero { display: grid; grid-template-columns: minmax(0, 1fr) minmax(280px, .72fr); gap: clamp(32px, 5vw, 72px); align-items: center; width: min(1080px, calc(100% - 48px)); margin: 0 auto; padding: 40px 0 60px; }
.eyebrow { margin: 0; font: 13px/1.2 var(--sans); letter-spacing: .03em; }
.hero-copy .eyebrow { color: var(--acid); }
h1, h2, h3, p { margin-top: 0; }
.hero-copy h1 { max-width: 580px; margin: 12px 0; font: 500 clamp(2rem, 3.5vw, 3.2rem)/1.08 var(--serif); letter-spacing: -.03em; }
.hero-copy h1 em { color: var(--mint); }
.hero-summary { max-width: 500px; margin-bottom: 31px; color: rgba(247,249,244,.76); font-size: 18px; line-height: 1.9; }
.hero-actions { display: flex; align-items: center; gap: 23px; }
.button { display: inline-flex; align-items: center; gap: 23px; padding: 14px 17px 14px 19px; font: 13px/1 var(--mono); letter-spacing: .05em; transition: transform .2s, background .2s; }
.button:hover { transform: translateY(-2px); }
.button--ink { color: var(--ink); background: var(--acid); }
.button span { font-size: 17px; }
.text-link { display: inline-flex; align-items: center; gap: 10px; padding-bottom: 6px; border-bottom: 1px solid currentColor; font: 13px/1.2 var(--mono); letter-spacing: .04em; transition: gap .2s; }
.text-link:hover { gap: 16px; }
.hero-frame { position: relative; margin: 0; padding: 10px; background: rgba(255,255,255,.1); box-shadow: 25px 28px 0 rgba(0,0,0,.18); transform: rotate(2.5deg); }
.hero-frame img { width: 100%; aspect-ratio: 16 / 10; object-fit: contain; background: #111917; }
.hero-frame figcaption { position: absolute; right: 14px; bottom: -26px; color: rgba(247,249,244,.6); font: 9px/1 var(--mono); letter-spacing: .1em; }
.hero-stats { grid-column: 1 / -1; margin-top: 32px; display: flex; gap: clamp(24px, 4vw, 65px); }
.hero-stats p { display: grid; gap: 7px; margin: 0; }
.hero-stats strong { color: var(--acid); font: 400 clamp(1.7rem, 2.5vw, 2.7rem)/1 var(--serif); letter-spacing: -.06em; }
.hero-stats span { color: rgba(247,249,244,.57); font-size: 12px; letter-spacing: .05em; }
.section-wrap { width: min(1180px, calc(100% - 48px)); margin: 0 auto; }
.home-intro { padding: 48px 0; border-top: 1px solid rgba(255,255,255,.17); }
.home-intro .eyebrow { color: rgba(247,249,244,.55); }
.split-heading { display: grid; grid-template-columns: 1.35fr .65fr; gap: 5vw; align-items: end; margin-top: 28px; }
.split-heading h2, .page-heading h1 { margin: 0; font: 500 clamp(1.8rem, 3vw, 2.8rem)/1.06 var(--serif); letter-spacing: -.03em; }
.split-heading > div { max-width: 430px; color: rgba(247,249,244,.72); font-size: 17px; line-height: 1.9; }
.split-heading .text-link { margin-top: 11px; color: var(--acid); }
.home-routes { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; padding-bottom: 72px; }
.route-card { position: relative; display: flex; flex-direction: column; min-height: 210px; padding: 22px; overflow: hidden; color: var(--ink); background: var(--paper); transition: transform .25s, box-shadow .25s; }
.route-card:hover { transform: translateY(-7px); box-shadow: 12px 14px 0 rgba(0,0,0,.18); }
.route-card--film { background: #b2ddd1; }
.route-card--notes { background: #e7ebd8; }
.route-card--blog { color: #f7f9f4; background: #303e39; }
.route-card .eyebrow { color: currentColor; opacity: .62; }
.route-card strong { max-width: 250px; margin-top: auto; font: 500 clamp(2rem, 3.1vw, 3.2rem)/.94 var(--serif); letter-spacing: -.06em; }
.route-card p { max-width: 290px; margin: 17px 0 0; font-size: 16px; line-height: 1.75; }
.route-card i { position: absolute; top: 21px; right: 24px; font: 26px/1 var(--serif); font-style: normal; }

.site-footer { position: relative; z-index: 1; display: flex; justify-content: space-between; width: min(1380px, calc(100% - 48px)); margin: 0 auto; padding: 20px 0; border-top: 1px solid var(--line); color: var(--ink-soft); font: 11px/1.2 var(--mono); letter-spacing: .07em; }
.page-home .site-footer { color: rgba(247,249,244,.54); border-color: rgba(255,255,255,.17); }

/* Inner pages */
.page-main { padding: 32px 0 56px; }
.page-heading { width: min(1080px, calc(100% - 48px)); margin: 24px auto 40px; }
.page-heading .eyebrow { margin-bottom: 24px; color: #678078; }
.page-heading h1 em { color: #5a9b8d; }
.page-heading > p:last-child { max-width: 680px; margin: 25px 0 0; color: var(--ink-soft); font-size: 19px; line-height: 1.85; }

.showreel-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 52px 24px; width: min(1180px, calc(100% - 48px)); margin: 0 auto; }
.work-card { min-width: 0; }
.work-media { position: relative; display: block; width: 100%; aspect-ratio: 16 / 10; overflow: hidden; border: 0; padding: 0; background: #d7ddd7; cursor: pointer; text-align: left; }
.work-media img { width: 100%; height: 100%; object-fit: contain; background: #101917; transition: transform .6s cubic-bezier(.16,.75,.25,1), filter .35s; }
.work-trigger::after { position: absolute; inset: 0; display: grid; place-items: center; color: #fff; background: rgba(10,18,16,.48); content: "查看详情"; font: 14px/1 var(--mono); letter-spacing: .06em; opacity: 0; transition: opacity .25s; }
.work-trigger:hover img { transform: scale(1.035); filter: brightness(.72); }
.work-trigger:hover::after { opacity: 1; }
.work-placeholder { display: grid; place-items: end start; padding: 30px; color: #edf3eb; background: linear-gradient(135deg, #3d514d, #728f7d); }
.work-placeholder--blue { background: linear-gradient(135deg, #244b5a, #5f94a4); }
.work-placeholder strong { max-width: 310px; font: 500 clamp(1.8rem, 3.5vw, 3.2rem)/1.05 var(--serif); letter-spacing: -.04em; }
.work-copy { padding: 19px 5px 0; border-left: 3px solid var(--paper-deep); padding-left: 14px; }
.work-card:nth-child(odd) .work-copy { border-left-color: var(--mint); }
.work-card:nth-child(even) .work-copy { border-left-color: #cadcc8; }
.work-label { display: flex; justify-content: space-between; gap: 16px; margin: 0 0 12px; color: #65716c; font: 13px/1.35 var(--sans); letter-spacing: 0; }
.work-copy h2 { margin: 0; font: 500 clamp(1.4rem, 2.4vw, 2rem)/1.1 var(--serif); letter-spacing: -.03em; }
.work-copy > p { max-width: 575px; margin: 15px 0 0; color: var(--ink-soft); font-size: 18px; line-height: 1.82; }
.work-role { margin: 17px 0 0; color: #5a7068; font: 13px/1.65 var(--sans); letter-spacing: 0; }
.work-role b { color: var(--ink); font-weight: 400; }

.showreel-page, body > .site-header, body > .site-footer { transition: filter .35s, transform .35s, opacity .35s; }
body.detail-open { overflow: hidden; }
body.detail-open .showreel-page, body.detail-open > .site-header, body.detail-open > .site-footer { filter: blur(14px); transform: scale(.985); opacity: .46; }
.work-detail { position: fixed; z-index: 50; inset: 0; display: grid; place-items: stretch; padding: clamp(22px, 4vw, 62px); perspective: 1400px; }
.work-detail[hidden] { display: none; }
.work-detail__backdrop { position: absolute; inset: 0; background: rgba(8, 14, 13, .58); backdrop-filter: blur(24px); }
.work-detail__panel { position: relative; display: grid; grid-template-columns: minmax(260px, .64fr) minmax(0, 1.36fr); gap: clamp(30px, 5vw, 78px); width: min(1320px, 100%); max-height: calc(100svh - clamp(44px, 8vw, 124px)); margin: auto; overflow: auto; color: #f7f9f4; background: transparent; border: 0; box-shadow: none; outline: 0; animation: detailPanelIn .38s cubic-bezier(.16,.75,.25,1) both; }
.work-detail__close { position: fixed; z-index: 3; top: 24px; right: 24px; width: 48px; height: 48px; border: 1px solid rgba(255,255,255,.28); border-radius: 50%; color: #f7f9f4; background: rgba(10,18,16,.36); cursor: pointer; font-size: 31px; line-height: 1; transition: transform .2s, background .2s; }
.work-detail__close:hover { transform: rotate(90deg); background: rgba(255,255,255,.16); }
.work-detail__cover { align-self: center; margin: 0; transform-style: preserve-3d; animation: detailCoverIn .48s cubic-bezier(.16,.75,.25,1) both; }
.work-detail__cover img { width: auto; max-width: min(100%, 430px); max-height: 72svh; object-fit: contain; box-shadow: 18px 22px 0 rgba(0,0,0,.28), 0 34px 80px rgba(0,0,0,.34); transform: rotateY(-13deg) rotateZ(-1.5deg); background: #101917; }
.work-detail__cover.is-placeholder { display: grid; place-items: end start; width: min(100%, 430px); min-height: 430px; padding: 32px; background: linear-gradient(135deg, #2e413d, #6c8d7a); box-shadow: 18px 22px 0 rgba(0,0,0,.26), 0 34px 80px rgba(0,0,0,.32); transform: rotateY(-13deg) rotateZ(-1.5deg); }
.work-detail__cover.is-placeholder strong { max-width: 320px; color: #f7f9f4; font: 500 clamp(1.8rem, 3.5vw, 2.8rem)/1.05 var(--serif); letter-spacing: -.04em; }
.work-detail__content { min-width: 0; animation: detailContentIn .55s .08s cubic-bezier(.16,.75,.25,1) both; }
.work-detail__meta { margin: 0 0 14px; color: var(--acid); font: 16px/1.4 var(--sans); letter-spacing: 0; }
.work-detail__content h2 { max-width: 760px; margin: 0 0 20px; padding-bottom: 16px; border-bottom: 2px solid var(--acid); font: 500 clamp(1.8rem, 3.5vw, 2.8rem)/1.08 var(--serif); letter-spacing: -.03em; }
.work-detail__gallery { columns: 3 190px; column-gap: 12px; margin: 0 0 24px; }
.work-detail__gallery img { display: block; width: 100%; height: auto; break-inside: avoid; margin: 0 0 12px; object-fit: contain; background: rgba(255,255,255,.08); box-shadow: 0 14px 34px rgba(0,0,0,.22); cursor: pointer; transition: transform .4s cubic-bezier(.34,1.56,.64,1), filter .35s; animation: detailThumbIn .45s cubic-bezier(.16,.75,.25,1) both; }
.work-detail__gallery:hover img { transform: scale(.92); filter: brightness(.72); }
.work-detail__gallery:hover img:hover { transform: scale(1.04); filter: brightness(1); box-shadow: 0 24px 48px rgba(0,0,0,.5); z-index: 2; position: relative; }
.work-detail__gallery img:nth-child(3n + 1) { width: 92%; margin-left: auto; }
.work-detail__gallery img:nth-child(4n + 2) { width: 100%; }
.work-detail__gallery img:nth-child(5n + 3) { width: 78%; }
.work-detail__gallery img:nth-child(2) { animation-delay: .05s; }
.work-detail__gallery img:nth-child(3) { animation-delay: .1s; }
.work-detail__gallery img:nth-child(4) { animation-delay: .15s; }
.work-detail__gallery img:nth-child(5) { animation-delay: .2s; }
.work-detail__gallery img:nth-child(6) { animation-delay: .25s; }
.work-detail__empty { grid-column: 1 / -1; margin: 0; padding: 26px; border: 1px solid rgba(255,255,255,.16); color: rgba(247,249,244,.68); background: rgba(255,255,255,.06); font-size: 16px; }
.work-detail__intro { max-width: 820px; margin: 0 0 20px; color: rgba(247,249,244,.86); font-size: 20px; line-height: 1.9; }
.work-detail__facts { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 0; margin: 0 0 26px; }
.work-detail__facts div { padding: 14px 16px; border-left: 2px solid rgba(255,255,255,.12); }
.work-detail__facts div:first-child { border-left: 0; padding-left: 0; }
.work-detail__facts dt { margin: 0 0 7px; color: rgba(247,249,244,.58); font-size: 15px; }
.work-detail__facts dd { margin: 0; color: rgba(247,249,244,.9); font: 500 19px/1.55 var(--serif); }
.work-detail__link[hidden] { display: none; }

/* Lightbox — card-style popup, ~3/5 screen */
.lightbox { position: fixed; z-index: 60; inset: 0; display: grid; place-items: center; padding: 60px; }
.lightbox[hidden] { display: none; }
.lightbox__backdrop { position: absolute; inset: 0; background: rgba(8,14,13,.72); backdrop-filter: blur(14px); cursor: pointer; }
.lightbox__close { position: fixed; z-index: 3; top: 18px; right: 18px; width: 40px; height: 40px; border: 1px solid rgba(255,255,255,.28); border-radius: 50%; color: #f7f9f4; background: rgba(10,18,16,.36); cursor: pointer; font-size: 24px; line-height: 1; transition: transform .2s, background .2s; }
.lightbox__close:hover { transform: rotate(90deg); background: rgba(255,255,255,.16); }
.lightbox__image { position: relative; z-index: 1; max-width: 62vw; max-height: 66vh; object-fit: contain; border-radius: 8px; background: #111; box-shadow: 0 20px 54px rgba(0,0,0,.42); animation: detailPanelIn .35s cubic-bezier(.16,.75,.25,1) both; }

@keyframes detailPanelIn {
  from { opacity: 0; transform: translateY(22px) scale(.97); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}
@keyframes detailCoverIn {
  from { opacity: 0; transform: translateX(90px) rotateY(32deg) scale(.82); }
  to { opacity: 1; transform: translateX(0) rotateY(0) scale(1); }
}
@keyframes detailContentIn {
  from { opacity: 0; transform: translateX(32px); }
  to { opacity: 1; transform: translateX(0); }
}
@keyframes detailThumbIn {
  from { opacity: 0; transform: translateY(18px); }
  to { opacity: 1; transform: translateY(0); }
}

.empty-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; width: min(1180px, calc(100% - 48px)); margin: 0 auto; }
.empty-card { min-height: 260px; padding: 28px; border: 1px solid var(--line); background: rgba(255,255,255,.42); }
.empty-card .eyebrow { color: #668077; }
.empty-card h2 { margin: 58px 0 12px; font: 500 clamp(2rem, 3vw, 3.1rem)/.95 var(--serif); letter-spacing: -.06em; }
.empty-card p { max-width: 390px; margin: 0; color: var(--ink-soft); font-size: 17px; line-height: 1.75; }
.empty-card--wide { grid-column: span 2; min-height: 190px; color: #eff3ec; background: #25322e; }
.empty-card--wide .eyebrow { color: var(--mint); }
.empty-card--wide p { color: rgba(239,243,236,.75); }

.about-layout { display: grid; grid-template-columns: .75fr 1.25fr; gap: clamp(45px, 11vw, 160px); width: min(1040px, calc(100% - 48px)); margin: 0 auto; }
.about-aside { padding-top: 5px; }
.about-aside img { width: 100%; aspect-ratio: auto; object-fit: contain; filter: saturate(.94); background: var(--paper-deep); }
.about-aside p { margin: 14px 0 0; color: #66736d; font-size: 15px; line-height: 1.5; }
.about-copy > p { max-width: 690px; margin-bottom: 22px; color: var(--ink-soft); font-size: 19px; line-height: 1.95; }
.about-copy h2 { margin: 57px 0 18px; font: 500 2.25rem/1 var(--serif); letter-spacing: -.05em; }
.facts { display: grid; grid-template-columns: repeat(2, 1fr); gap: 0 30px; border-top: 1px solid var(--line); }
.facts div { padding: 17px 0; border-bottom: 1px solid var(--line); }
.facts span { display: block; color: #67736d; font-size: 15px; line-height: 1.35; }
.facts strong { display: block; margin-top: 7px; font: 500 21px/1.45 var(--serif); }
.contact-block { margin-top: 58px; padding: 26px; color: #eff4ec; background: #24322e; }
.contact-block p { margin: 0 0 14px; color: var(--mint); font-size: 15px; line-height: 1.3; }
.contact-block a { display: block; width: fit-content; margin-top: 9px; border-bottom: 1px solid rgba(239,244,236,.5); font: 500 clamp(1.1rem, 2vw, 1.5rem)/1.45 var(--serif); }

.timeline { width: min(920px, calc(100% - 48px)); margin: 0 auto; border-top: 1px solid var(--line); }
.timeline-item { display: grid; grid-template-columns: 130px 1fr auto; gap: 24px; align-items: center; min-height: 97px; border-bottom: 1px solid var(--line); }
.timeline-item time, .timeline-item span { color: #6b7771; font-size: 14px; line-height: 1.35; }
.timeline-item strong { font: 500 clamp(1.35rem, 2.2vw, 2rem)/1.1 var(--serif); letter-spacing: -.045em; }
.timeline-item--empty { color: #738078; }

/* ================================================
   JOURNAL — 时间线目录 + 文章详情模式
   ================================================ */

.journal-layout {
  width: min(800px, calc(100% - 48px));
  margin: 0 auto;
}

/* ---- Timeline mode (default) ---- */
.journal-list {
  display: grid;
  gap: 0;
}

.journal-year {
  padding: 32px 0 10px;
  color: var(--ink);
  font: 500 36px/1 var(--serif);
  letter-spacing: -.03em;
}
.journal-year:first-child { padding-top: 0; }

.journal-item {
  display: flex;
  align-items: baseline;
  gap: 14px;
  width: 100%;
  padding: 12px 0;
  border: 0;
  border-top: 1px solid var(--line);
  color: var(--ink-soft);
  background: transparent;
  cursor: pointer;
  text-align: left;
  transition: color .2s, padding-left .2s;
  border-radius: 4px;
}
.journal-item:last-child { border-bottom: 1px solid var(--line); }
.journal-item:hover,
.journal-item.is-active {
  padding-left: 14px;
  color: var(--ink);
}
.journal-item time {
  flex-shrink: 0;
  width: 42px;
  color: #9aa8a3;
  font: 13px/1 var(--mono);
  letter-spacing: .02em;
}
.journal-item strong {
  flex-shrink: 0;
  font: 500 18px/1.3 var(--serif);
  letter-spacing: -.02em;
  margin-right: 10px;
}
.journal-item > span:not(.journal-tags) { display: none; }
.journal-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
  margin-left: auto;
}
.journal-tags i {
  display: inline-block;
  padding: 1px 7px;
  border-radius: 3px;
  background: var(--tag-bg);
  color: #6b9280;
  font: 10px/1.4 var(--sans);
  font-style: normal;
}
.journal-item:hover .journal-tags i { background: #d4e4db; color: #3d5c4f; }

/* ---- Article mode ---- */
.markdown-article { display: none; min-width: 0; color: var(--ink); }
.journal-toc { display: none; }

.journal-mode-article .journal-list { display: none; position: absolute; }
.journal-mode-article .markdown-article { display: block; grid-column: 1; }
.journal-mode-article .journal-toc { display: block; grid-column: 2; }
.journal-mode-article .journal-back { grid-column: 1; }
.journal-back {
  display: none;
  margin-bottom: 32px;
  padding: 0;
  border: 0;
  color: #427c70;
  background: transparent;
  font: 13px/1 var(--mono);
  letter-spacing: .04em;
  cursor: pointer;
  transition: color .15s;
}
.journal-back:hover { color: #2a5a4f; }
.journal-mode-article .journal-back { display: inline-block; }

.journal-date {
  margin: 0 0 12px;
  color: #9aa8a3;
  font: 13px/1 var(--mono);
  letter-spacing: .04em;
}
.markdown-article h1 {
  margin: 0 0 24px;
  font: 500 clamp(1.8rem, 3.5vw, 2.8rem)/1.08 var(--serif);
  letter-spacing: -.03em;
}
.markdown-article h2 {
  margin: 40px 0 14px;
  padding-top: 14px;
  border-top: 1px solid var(--line);
  font: 500 clamp(1.4rem, 2.5vw, 1.8rem)/1.15 var(--serif);
  letter-spacing: -.03em;
  scroll-margin-top: 24px;
}
.markdown-article h2:first-of-type { border-top: 0; padding-top: 0; margin-top: 28px; }
.markdown-article p,
.markdown-article li {
  color: var(--ink-soft);
  font-size: 18px;
  line-height: 1.9;
}
.markdown-article ul { margin: 14px 0 22px; padding-left: 1.2em; }
.markdown-article li { margin-bottom: 6px; }
.markdown-article img {
  width: auto; max-width: 100%; height: auto;
  margin: 28px 0; border-radius: 6px;
  background: var(--paper-deep); box-shadow: 0 2px 12px rgba(0,0,0,.06);
}
.markdown-article a { border-bottom: 1px solid currentColor; color: #427c70; transition: color .15s; }
.markdown-article a:hover { color: #2a5a4f; }
.markdown-article code { padding: 2px 7px; border-radius: 4px; background: var(--paper-deep); font-size: .88em; color: #4a6559; }
.markdown-article strong { color: var(--ink); }
.journal-loading { color: var(--ink-soft); font-size: 17px; line-height: 1.8; }

/* ---- TOC (article mode) ---- */
.journal-mode-article .journal-layout {
  display: grid;
  grid-template-columns: 1fr 200px;
  gap: 56px;
  width: min(960px, calc(100% - 48px));
  align-items: start;
}
.journal-mode-article .journal-back { grid-column: 1; }
.journal-toc {
  position: sticky;
  top: 24px;
  padding: 20px 16px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: rgba(255,255,255,.5);
  backdrop-filter: blur(6px);
}
.journal-toc:empty { display: none; }
.toc-heading { margin: 0 0 14px; color: var(--ink-soft); font: 600 13px/1 var(--sans); letter-spacing: .06em; text-transform: uppercase; }
.toc-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; }
.toc-item { margin: 0; }
.toc-item a { display: block; padding: 5px 8px; border-radius: 5px; color: var(--ink-soft); font-size: 14px; line-height: 1.5; transition: color .15s, background .15s, padding-left .15s; }
.toc-item a:hover { color: var(--ink); background: rgba(20,32,29,.06); padding-left: 12px; }
.toc-lvl-1 a { font-weight: 500; }
.toc-lvl-2 a { padding-left: 18px; font-size: 13px; }
.toc-lvl-2 a:hover { padding-left: 22px; }

/* ---- Responsive ---- */
@media (max-width: 1020px) {}

@media (max-width: 760px) {
  .site-header { width: calc(100% - 36px); min-height: 70px; }
  .menu-toggle { display: block; }
  .site-nav { position: absolute; top: 62px; right: 0; display: none; width: min(260px, 80vw); padding: 8px; border-radius: 15px; background: rgba(242,243,239,.96); box-shadow: 0 12px 40px rgba(0,0,0,.12); }
  .site-nav.is-open { display: grid; }
  .site-nav a { padding: 11px 12px; }
  .site-header--home .site-nav { border-color: var(--line); background: rgba(242,243,239,.96); }
  .site-header--home .site-nav a, .site-header--home .site-nav a:hover, .site-header--home .site-nav a.is-active { color: var(--ink); }
  .home-hero { display: block; width: calc(100% - 36px); padding: 56px 0 48px; }
  .hero-copy h1 { margin: 20px 0; font-size: clamp(2rem, 8vw, 3rem); }
  .hero-summary { font-size: 17px; }
  .hero-frame { width: min(100%, 420px); margin: 66px auto 0; }
  .hero-stats { gap: 18px; margin-top: 36px; }
  .hero-stats strong { font-size: 1.75rem; }
  .section-wrap, .page-heading, .showreel-grid, .empty-grid, .about-layout, .timeline { width: calc(100% - 36px); }
  .home-intro { padding: 83px 0; }
  .split-heading { grid-template-columns: 1fr; gap: 31px; margin-top: 32px; }
  .split-heading h2, .page-heading h1 { font-size: clamp(2.75rem, 12vw, 4.25rem); }
  .split-heading > div, .page-heading > p:last-child { font-size: 17px; }
  .home-routes, .showreel-grid, .empty-grid { grid-template-columns: 1fr; }
  .home-routes { padding-bottom: 80px; }
  .route-card { min-height: 230px; }
  .site-footer { width: calc(100% - 36px); gap: 14px; padding: 18px 0; font-size: 10px; }
  .site-footer span:last-child { text-align: right; }
  .page-main { padding: 28px 0 75px; }
  .page-heading { margin: 41px auto 55px; }
  .showreel-grid { gap: 42px; }
  .work-copy > p { font-size: 16px; }
  .work-placeholder strong { font-size: 2.2rem; }
  .work-detail { padding: 16px; align-items: end; }
  .work-detail__panel { grid-template-columns: 1fr; gap: 25px; max-height: calc(100svh - 32px); width: 100%; }
  .work-detail__close { top: 16px; right: 16px; width: 42px; height: 42px; }
  .work-detail__cover img { max-width: 100%; max-height: 38svh; transform: rotateY(-5deg) rotateZ(-1deg); }
  .work-detail__cover.is-placeholder { min-height: 260px; transform: rotateY(-5deg) rotateZ(-1deg); }
  .work-detail__content h2 { font-size: clamp(1.6rem, 8vw, 2.2rem); }
  .work-detail__gallery { columns: 2 130px; column-gap: 9px; }
  .work-detail__gallery img { margin-bottom: 9px; }
  .work-detail__intro { font-size: 16px; }
  .work-detail__facts { grid-template-columns: 1fr; }
  .work-detail__facts div { border-left: 0; padding: 12px 0; border-bottom: 1px solid rgba(255,255,255,.1); }
  .work-detail__facts div:last-child { border-bottom: 0; }
  .empty-card--wide { grid-column: auto; }
  .about-layout { grid-template-columns: 1fr; gap: 43px; }
  .about-aside { max-width: 330px; }
  .about-copy > p { font-size: 17px; }
  .facts { gap: 0 18px; }
  .facts strong { font-size: 18px; }
  .journal-layout { width: calc(100% - 36px); }
  .journal-mode-article .journal-layout { grid-template-columns: 1fr; gap: 24px; }
  .journal-list { position: static; }
  .journal-item strong { font-size: 16px; }
  .journal-item time { width: 36px; font-size: 12px; }
  .journal-toc { display: none; }
  .journal-mode-article .journal-toc { display: none; }
  .markdown-article p, .markdown-article li { font-size: 17px; }
  .markdown-article h1 { font-size: clamp(2rem, 8vw, 2.8rem); }
  .timeline-item { grid-template-columns: 1fr auto; gap: 9px; padding: 17px 0; }
  .timeline-item time { grid-column: 1; }
  .timeline-item strong { grid-row: 2; font-size: 1.45rem; }
  .timeline-item span { grid-column: 2; grid-row: 1 / span 2; align-self: center; }
}