@font-face { font-family: 'PT Sans'; font-style: normal; font-weight: 400; font-display: block; src: url('../assets/fonts/PT_Sans-Web-Regular.woff2') format('woff2'); }
@font-face { font-family: 'PT Sans'; font-style: normal; font-weight: 700; font-display: block; src: url('../assets/fonts/PT_Sans-Web-Bold.woff2') format('woff2'); }
@font-face { font-family: 'PT Sans'; font-style: italic; font-weight: 400; font-display: block; src: url('../assets/fonts/PT_Sans-Web-Italic.woff2') format('woff2'); }
@font-face { font-family: 'PT Sans'; font-style: italic; font-weight: 700; font-display: block; src: url('../assets/fonts/PT_Sans-Web-BoldItalic.woff2') format('woff2'); }
/* Quiet humanist typography, based on the selected PT Sans reference. */
:root {
  --paper: #f6f5f1;
  --ink: #3d3d3d;
  --heading: #303030;
  --muted: #626262;
  --accent: #4f6879;
  --line: #e5e5e5;
  --link-line: #bcc7cf;
  --reading: 640px;
  --text-font: 'PT Sans', 'PingFang TC', 'Microsoft JhengHei', sans-serif;
  color-scheme: light;
}
* { box-sizing: border-box; }
html { scroll-padding-top: 28px; }
body { margin: 0; background: var(--paper); color: var(--ink); font-family: var(--text-font); }
.shell { max-width: calc(var(--reading) + 64px); margin: auto; padding: 48px 32px 30px; }
a { color: var(--accent); text-decoration-color: var(--link-line); text-underline-offset: 3px; }
a:hover { color: var(--ink); text-decoration-color: currentColor; }
a:focus-visible, summary:focus-visible { outline: 2px solid var(--accent); outline-offset: 5px; }
.topbar { margin-bottom: 38px; }
.brand { color: var(--ink); font-size: 28px; font-weight: bold; letter-spacing: 0; line-height: 1.35; text-decoration: none; }
nav { display: flex; flex-wrap: wrap; column-gap: 21px; row-gap: 9px; margin-top: 14px; }
nav a { font-size: 14px; line-height: 1.6; color: var(--muted); text-decoration: none; }
nav a[aria-current] { color: var(--ink); text-decoration: underline; }
h1 { font-size: 27px; line-height: 1.4; margin: 0 0 20px; }
.description { color: var(--muted); font-size: 16px; line-height: 1.7; margin: 0 0 28px; }
.prose { font-size: 18px; line-height: 1.65; overflow-wrap: anywhere; }
.prose p { margin: 0 0 18px; }
.prose h2 { font-size: 22px; line-height: 1.4; margin: 34px 0 14px; }
.prose h3 { font-size: 19px; line-height: 1.5; margin: 28px 0 12px; }
.prose h4 { font-size: 18px; margin: 24px 0 12px; }
/* One 28px indentation step for both lists and disclosure rows. */
.prose ul, .prose ol { padding-left: 28px; margin: 0 0 18px; }
.prose ul { list-style: none; }
.prose li { position: relative; margin: 6px 0; line-height: 1.6; }
.prose ul > li::before {
  content: ''; position: absolute; left: -19px; top: .64em;
  width: 5px; height: 5px; border-radius: 50%; background: currentColor;
}
.prose ul ul > li::before { background: transparent; border: 1px solid currentColor; }
.prose ul ul ul > li::before { border: 0; border-radius: 0; background: currentColor; }
.prose li > p { margin: 0; }
.prose li > p + p { margin-top: 8px; }
.prose li > ul, .prose li > ol { margin: 6px 0; }
.prose li > :last-child { margin-bottom: 0; }
.prose hr { border: 0; border-top: 1px solid var(--line); margin: 24px 0; }
/* Imported Notion pages put dividers immediately after section headings. */
.prose h2 + hr, .prose h3 + hr { display: none; }
.prose blockquote { border-left: 1px solid #cdc7be; padding: 0 0 0 21px; margin: 22px 0; color: #625d55; }
.prose blockquote p:last-child { margin-bottom: 0; }
.prose img { max-width: 100%; height: auto; }
.post .prose > p:first-child > img { max-width: min(240px, 100%); }
.prose details { margin: 6px 0; padding: 0 0 0 28px; }
.prose summary, .toc summary {
  display: block; position: relative; list-style: none;
  cursor: pointer; line-height: 1.6; border-radius: 3px;
}
.prose summary::-webkit-details-marker, .toc summary::-webkit-details-marker { display: none; }
.prose summary::before, .toc summary::before {
  content: ''; position: absolute; left: -19px; top: .58em;
  width: 0; height: 0; border-top: 4px solid transparent;
  border-bottom: 4px solid transparent; border-left: 6px solid #817b72;
  transform-origin: 3px 4px;
}
.prose details[open] > summary::before, .toc[open] > summary::before { transform: rotate(90deg); }
.prose summary:hover, .toc summary:hover { background: #eeeae366; }
.prose details[open] > summary { margin-bottom: 12px; }
.prose details > blockquote { margin: 14px 0; }
.prose details > p { margin-bottom: 12px; }
.prose pre { overflow: auto; background: #f0ede7; padding: 18px; font-size: 14px; }
.prose code { font-family: ui-monospace, monospace; font-size: .85em; }
.prose table { display: block; max-width: 100%; overflow-x: auto; border-collapse: collapse; }
.prose th, .prose td { padding: 8px 12px; border-bottom: 1px solid var(--line); text-align: left; }
.toc { color: var(--muted); font-size: 14px; line-height: 1.6; margin-bottom: 27px; }
.toc { padding-left: 24px; }
.toc ul { padding-left: 22px; }
.toc li { margin: 5px 0; }
.entries { margin-top: 32px; }
.entry { margin: 0 0 28px; }
.entry h2 { font-size: 22px; line-height: 1.4; margin: 0 0 9px; }
.entry h2 a { color: var(--ink); text-decoration-thickness: 1px; }
.entry p { font-size: 17px; line-height: 1.7; margin: 0; }
.post-end { display: flex; justify-content: space-between; flex-wrap: wrap; gap: 12px; margin-top: 42px; color: var(--muted); font-size: 13px; }
footer { margin-top: 47px; border-top: 1px solid var(--line); padding-top: 20px; font-size: 13px; color: var(--muted); }
footer a { color: var(--muted); }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; }
.skip { position: absolute; top: -100px; }
.skip:focus { top: 8px; background: var(--paper); padding: 10px; }
@media (max-width: 600px) {
  .shell { padding: 30px 25px; }
  .brand { font-size: 26px; }
  .topbar { margin-bottom: 30px; }
  nav { column-gap: 18px; }

}

/* Separate heading weight from the softer body tone. */
.brand, h1, .prose h2, .prose h3, .prose h4, .entry h2 a { color: var(--heading); }
.prose strong { color: #424242; }
.prose blockquote { color: #4c4c4c; border-left-color: #d6d6d6; }

/* Disclosure hierarchy and a quiet, directly accessible section index. */
.toggle-list { margin: 8px 0 20px; }
.toggle-list .toggle-list { margin: 6px 0; }
.prose .list-toggle { margin: 7px 0; }
.prose .toggle-body > :first-child { margin-top: 0; }
.prose .toggle-body > :last-child { margin-bottom: 0; }
.prose summary a { text-decoration-thickness: 1px; }
.prose summary::after { content: ''; position: absolute; left: -27px; top: 0; width: 25px; height: 100%; min-height: 28px; }
nav.toc { display: block; margin: 0 0 30px; padding: 14px 0 15px; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); font-size: 14px; }
.toc-label { display: block; color: var(--heading); font-weight: 700; margin-bottom: 6px; }
nav.toc ul { display: flex; flex-wrap: wrap; gap: 5px 20px; list-style: none; margin: 0; padding: 0; }
nav.toc li { margin: 0; }
nav.toc a { font-size: 14px; color: #536575; text-decoration: none; }
nav.toc a:hover { text-decoration: underline; }

/* Rounded disclosure stroke, matching the softer type rather than a solid triangle. */
.prose summary::before {
  width: 16px; height: 16px; left: -23px; top: .36em; border: 0;
  background: center / 16px 16px no-repeat url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16'%3E%3Cpath d='M6 4.5 9.5 8 6 11.5' fill='none' stroke='%23777976' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  transform-origin: center;
}
.prose .leaf-list { margin: 6px 0; padding-left: 28px; }
.prose .leaf-list > li::before { width: 4px; height: 4px; border: 0; border-radius: 50%; background: #777976; }
.topbar { padding-bottom: 23px; border-bottom: 1px solid var(--line); margin-bottom: 31px; }
.brand { font-size: 23px; }
.topbar nav { margin-top: 11px; }
.page-heading h1 { font-size: 30px; margin-bottom: 13px; }
.page-intro p { margin-bottom: 0; }
.page-intro { margin-bottom: 23px; }
nav.toc { display: grid; grid-template-columns: 80px 1fr; gap: 12px; border-top: 0; border-bottom: 0; padding: 0 0 24px; margin: 0 0 8px; }
nav.toc .toc-label { font-size: 13px; font-weight: 400; color: var(--muted); padding-top: 2px; }
nav.toc ul { display: grid; grid-template-columns: 1fr 1fr; gap: 5px 18px; }
nav.toc a { font-size: 14px; }
@media(max-width:600px) {
  .brand { font-size: 23px; }
  nav.toc { grid-template-columns: 1fr; gap: 5px; }
  nav.toc ul { grid-template-columns: 1fr; gap: 4px; }
}

/* Page identity lives in the page, while the site header is navigation only. */
.topbar { margin-bottom: 30px; padding-bottom: 19px; }
.topbar nav { margin-top: 0; }
.page-heading h1 { margin-bottom: 22px; }
.home .page-heading h1 { font-size: 30px; }
.page-overview {
  display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr);
  gap: 24px; align-items: start; margin: 0 0 30px; padding: 23px 25px;
  border: 1px solid #e1e4de; border-radius: 14px; background: #eeefea;
}
.overview-description { font-size: 16px; line-height: 1.65; color: #4c5450; }
.overview-description p { margin: 0; }
.page-overview nav.toc { display: block; border: 0; border-left: 1px solid #dfe4e1; padding: 0 0 0 23px; margin: 0; }
.page-overview .toc-label { margin-bottom: 9px; padding: 0; font-size: 12px; font-weight: 700; color: #69716c; }
.page-overview nav.toc ul { display: flex; flex-direction: column; gap: 5px; }
.page-overview nav.toc a { font-size: 14px; line-height: 1.5; color: #455b50; }
.page-overview.without-toc { grid-template-columns: 1fr; }
.prose img { border-radius: 12px; }
@media(max-width:540px) {
  .page-overview { grid-template-columns: 1fr; padding: 20px; gap: 18px; }
  .page-overview nav.toc { border-left: 0; border-top: 1px solid #dfe4e1; padding: 16px 0 0; }
}

/* Consistent reading rhythm and a vertically arranged introduction. */
.prose { line-height: 1.8; }
.prose p { margin-bottom: 23px; }
.prose li { line-height: 1.75; margin: 10px 0; }
.prose summary { line-height: 1.75; }
.prose .list-toggle { margin: 11px 0; }
.prose details[open] > summary { margin-bottom: 15px; }
.prose .toggle-body { padding-top: 2px; padding-bottom: 5px; }
.prose .toggle-list { margin-bottom: 25px; }
.prose .toggle-list .toggle-list { margin: 8px 0; }
.prose h2 { margin-top: 42px; margin-bottom: 19px; }
.page-overview { display: block; padding: 23px 25px; }
.page-overview .overview-description {
  margin: 0; padding: 1px 0 1px 16px; border-left: 3px solid #ccd7cf;
  font-size: 17px; line-height: 1.75; color: #49554d;
}
.page-overview nav.toc { border-left: 0; border-top: 1px solid #dfe4e1; margin-top: 20px; padding: 17px 0 0; }
.page-overview nav.toc ul { display: flex; flex-direction: row; flex-wrap: wrap; gap: 7px 22px; }
.home .intro img { display: block; width: 190px; max-width: 100%; height: auto; border-radius: 12px; margin-top: 25px; }
@media(max-width:540px) {
  .page-overview { padding: 20px; }
  .home .intro img { width: 170px; }
}

/* Description precedes the contents panel; contents always read vertically. */
.post > .overview-description {
  margin: -4px 0 24px; padding: 0 0 0 15px;
  border-left: 3px solid #ccd7cf; color: #49554d;
  font-size: 17px; line-height: 1.7;
}
.post > .overview-description p { margin: 0; }
.page-overview { padding: 20px 24px; margin-bottom: 28px; }
.page-overview nav.toc { margin: 0; padding: 0; border: 0; }
.page-overview nav.toc ul { display: flex; flex-direction: column; flex-wrap: nowrap; gap: 5px; }
/* Parent/child spacing is intentionally tighter than spacing between sections. */
.prose { line-height: 1.7; }
.prose p { margin-bottom: 18px; }
.prose li, .prose summary { line-height: 1.65; }
.prose li { margin: 5px 0; }
.prose .list-toggle, .prose details { margin: 5px 0; }
.prose details[open] > summary { margin-bottom: 4px; }
.prose .toggle-body { padding: 0; display: flow-root; }
.prose .toggle-list { margin: 6px 0 16px; }
.prose .toggle-list .toggle-list { margin: 4px 0; }
.prose .toggle-body > :first-child { margin-top: 0; }
.prose .toggle-body > :last-child { margin-bottom: 0; }
.prose .leaf-list { margin: 4px 0; }
.prose h2 { margin: 32px 0 13px; }

.page-overview nav.toc .toc-label {
  font-size: 12px; font-weight: 700; letter-spacing: .09em;
  text-transform: uppercase; color: #424c46; margin-bottom: 13px;
}
.home .intro > blockquote {
  margin: 0 0 25px; padding: 0 0 0 15px;
  border-left: 3px solid #ccd7cf; color: #49554d;
}
.shell { padding-bottom: 60px; }

/* Writing index: a nested directory and quiet editorial selection. */
.page-overview nav.writing-toc > ul { gap: 16px; }
.writing-toc .toc-category-title { font-weight: 700; color: #394a42; }
.page-overview nav.writing-toc .toc-category > ul {
  display: flex; flex-direction: column; gap: 7px;
  margin: 9px 0 0 0; padding: 0 0 0 16px;
  border-left: 1px solid #dce2dd; list-style: none;
}
.writing-toc .toc-category li { line-height: 1.45; }
/* Selected writing is distinguished through typography alone. */
.prose .writing-entry > summary a { font-weight: 400; }
.prose a.is-selected,
.page-overview nav.writing-toc a.is-selected,
.prose .writing-entry.is-selected > summary a {
  color: #a04432;
  font-weight: 700;
}

.video-embed { margin: 14px 0 8px; aspect-ratio: 16 / 9; }
.video-embed iframe { display: block; width: 100%; height: 100%; border: 0; border-radius: 12px; }

/* A compact personal introduction and an aligned directory. */
.home-introduction {
  display: grid; grid-template-columns: minmax(0, 1fr) 136px;
  gap: 32px; align-items: center; padding: 12px 0 32px;
}
.home .home-introduction h1 { font-size: 28px; line-height: 1.25; margin: 0 0 21px; }
.home .intro > blockquote { margin: 0; font-size: 18px; line-height: 1.65; }
.home .intro > blockquote p { margin: 0; }
.home-portrait img { display: block; width: 100%; height: auto; border-radius: 12px; }
.home .entries { margin-top: 12px; border-top: 1px solid #e5e7e3; }
.home .entry { display: grid; grid-template-columns: 108px minmax(0, 1fr); gap: 20px; align-items: baseline; margin: 0; padding: 19px 0; border-bottom: 1px solid #e5e7e3; }
.home .entry h2 { font-size: 19px; margin: 0; }
.home .entry h2 a { text-decoration: none; }
.home .entry h2 a:hover { text-decoration: underline; text-underline-offset: 4px; }
.home .entry p { font-size: 17px; color: #565d58; line-height: 1.55; }
@media (max-width: 540px) {
  .home-introduction { grid-template-columns: minmax(0, 1fr) 88px; gap: 18px; align-items: start; padding-top: 5px; }
  .home .home-introduction h1 { font-size: 25px; }
  .home .intro > blockquote { font-size: 16px; }
  .home .entry { grid-template-columns: 78px minmax(0, 1fr); gap: 16px; padding: 17px 0; }
}

/* Keep the portrait beside the name, with the statement on its own row. */
.home-introduction {
  grid-template-columns: 76px minmax(0, 1fr);
  column-gap: 20px; row-gap: 24px; align-items: center;
}
.home-introduction > div:first-child { display: contents; }
.home-introduction .home-portrait { grid-column: 1; grid-row: 1; }
.home-introduction .page-heading { grid-column: 2; grid-row: 1; }
.home .home-introduction h1 { margin: 0; }
.home-introduction .intro { grid-column: 1 / -1; grid-row: 2; }
.home-portrait img { width: 76px; border-radius: 10px; }
@media (max-width: 540px) {
  .home-introduction { grid-template-columns: 64px minmax(0, 1fr); column-gap: 16px; row-gap: 22px; align-items: center; }
  .home-portrait img { width: 64px; }
}

/* A single reading axis for the personal introduction. */
.home-introduction {
  display: flex; flex-direction: column; align-items: flex-start;
  gap: 0; padding: 4px 0 30px;
}
.home-introduction .home-portrait { order: -1; margin: 0 0 22px; }
.home-portrait img { width: 108px; height: auto; border-radius: 11px; }
.home .home-introduction .page-heading { margin: 0 0 20px; }
.home .home-introduction h1 { margin: 0; }
.home-introduction .intro { width: 100%; }
@media (max-width: 540px) {
  .home-portrait img { width: 96px; }
}

/* Theme control stays separate from page navigation. */
.topbar { display: flex; align-items: center; gap: 16px; }
.topbar nav { flex: 1; }
.theme-toggle { display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; width: 36px; height: 36px; color: var(--muted); background: transparent; border: 0; border-radius: 8px; padding: 8px; cursor: pointer; }
.theme-toggle[hidden] { display: inline-flex; visibility: hidden; }
.theme-toggle svg { width: 20px; height: 20px; }
.theme-toggle:hover { color: var(--heading); background: var(--line); }
.theme-toggle:focus-visible { outline: 2px solid var(--accent); outline-offset: 4px; }
:root[data-theme="dark"] {
  color-scheme: dark; --paper: #252925; --ink: #d5d9d5;
  --heading: #edf0eb; --muted: #adb5ae; --accent: #a5c1d2;
  --line: #39413b; --link-line: #607684;
}
[data-theme="dark"] .prose strong { color: #e0e5df; }
[data-theme="dark"] .page-overview { background: #2d332e; border-color: var(--line); }
[data-theme="dark"] .page-overview nav.toc a { color: #b8ccbe; }
[data-theme="dark"] .page-overview nav.toc .toc-label { color: #d2ddd3; }
[data-theme="dark"] .post > .overview-description,
[data-theme="dark"] .home .intro > blockquote,
[data-theme="dark"] .prose blockquote { color: #bfcbc1; border-left-color: #566b5b; }
[data-theme="dark"] .prose summary:hover { background: #ffffff08; }
[data-theme="dark"] .prose summary::before { filter: brightness(1.5); }
[data-theme="dark"] .prose .leaf-list > li::before { background: #a6b0a7; }
[data-theme="dark"] .prose pre { background: #303630; }
[data-theme="dark"] .prose a.is-selected,
[data-theme="dark"] .prose .writing-entry.is-selected > summary a { color: #eca28c; }
[data-theme="dark"] .home .entries,
[data-theme="dark"] .home .entry { border-color: var(--line); }
[data-theme="dark"] .home .entry p { color: #bfc7c0; }

/* Keep mobile navigation on one line, with the theme control always visible. */
@media (max-width: 600px) {
  .topbar { display: flex; gap: 10px; padding-bottom: 14px; }
  .topbar nav { display: flex; flex: 1; min-width: 0; flex-wrap: nowrap; gap: 20px; overflow-x: auto; scrollbar-width: none; }
  .topbar nav::-webkit-scrollbar { display: none; }
  .topbar nav a { display: flex; flex-shrink: 0; align-items: center; min-height: 44px; white-space: nowrap; }
  .topbar .theme-toggle { width: 44px; height: 44px; }
}

/* Keep navigation available while reading, with room for anchor targets. */
html { scroll-padding-top: 100px; }
.topbar {
  position: sticky;
  top: -12px;
  z-index: 20;
  padding-top: 16px;
  padding-bottom: 4px;
  margin-top: -16px;
  background: var(--paper);
  box-shadow: 0 -16px 0 var(--paper);
}

@media (max-width: 600px) {
  .topbar { display: grid; grid-template-columns: minmax(0, 1fr) 54px; gap: 12px; }
  .topbar nav { width: 100%; padding-right: 8px; }
  .topbar .theme-toggle {
    width: 54px;
    border-left: 1px solid var(--line);
    border-radius: 0;
    background: var(--paper);
  }
}

/* A viewport-anchored mobile bar owns the iPhone safe area. */
@media (max-width: 600px), (pointer: coarse) and (max-height: 600px) {
  html { scroll-padding-top: calc(69px + env(safe-area-inset-top, 0px)); }
  .shell {
    padding-top: calc(83px + env(safe-area-inset-top, 0px));
    padding-left: max(25px, env(safe-area-inset-left, 0px));
    padding-right: max(25px, env(safe-area-inset-right, 0px));
    padding-bottom: calc(60px + env(safe-area-inset-bottom, 0px));
  }
  .topbar {
    position: fixed;
    inset: 0 0 auto;
    display: grid;
    grid-template-columns: minmax(0, 1fr) 54px;
    gap: 12px;
    margin: 0;
    padding: calc(4px + env(safe-area-inset-top, 0px)) max(25px, env(safe-area-inset-right, 0px)) 4px max(25px, env(safe-area-inset-left, 0px));
    box-shadow: none;
  }
  .topbar nav { min-width: 0; flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; }
  .topbar nav a { flex-shrink: 0; display: flex; align-items: center; min-height: 44px; }
  .topbar .theme-toggle { width: 54px; height: 44px; }
}

.nav-more { display: none; }
@media (max-width: 600px), (pointer: coarse) and (max-height: 600px) {
  .topbar { grid-template-columns: minmax(0, 1fr) 28px 44px; gap: 6px; }
  .topbar .theme-toggle { grid-column: 3; width: 44px; }
  .nav-more {
    display: flex; align-items: center; justify-content: center;
    grid-column: 2; grid-row: 1; width: 28px; height: 44px;
    padding: 4px; border: 0; background: transparent; color: var(--accent); cursor: pointer;
  }
  .nav-more[hidden] { display: flex; visibility: hidden; }
  .nav-more svg { width: 18px; height: 18px; }
  .nav-more.at-end svg { transform: rotate(180deg); }
  .nav-more:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }
}

.image-carousel { margin: 26px 0 30px; }
.carousel-images { aspect-ratio: 8 / 5; overflow: hidden; border: 1px solid var(--line); border-radius: 10px; background: var(--paper); }
.carousel-slide { display: block; height: 100%; }
.carousel-slide[hidden], .carousel-controls[hidden] { display: none; }
.prose .carousel-slide img { display: block; width: 100%; height: 100%; margin: 0; object-fit: contain; border-radius: 0; }
.carousel-controls { display: flex; align-items: center; justify-content: center; gap: 8px; margin-top: 6px; }
.carousel-controls button { display: grid; place-items: center; width: 36px; height: 36px; padding: 0; border: 0; background: transparent; color: var(--muted); font: inherit; cursor: pointer; border-radius: 6px; }
.carousel-controls button:hover { background: var(--line); color: var(--ink); }
.carousel-controls button:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.carousel-dots { display: flex; }
.carousel-dots button { width: 28px; }
.carousel-dots span { width: 6px; height: 6px; border-radius: 50%; background: var(--muted); opacity: .35; }
.carousel-dots [aria-pressed="true"] span { opacity: 1; background: var(--accent); }

.image-viewer { position: fixed; inset: 0; width: 100%; max-width: none; height: 100%; max-height: none; margin: 0; padding: max(56px, env(safe-area-inset-top)) 16px max(70px, env(safe-area-inset-bottom)); border: 0; background: #161816; color: #fff; }
.image-viewer[open] { display: flex; align-items: center; justify-content: center; }
.image-viewer::backdrop { background: #161816; }
.image-viewer img { display: block; max-width: 100%; max-height: 100%; object-fit: contain; }
.image-viewer button { width: 44px; height: 44px; border: 0; border-radius: 8px; background: #ffffff14; color: #fff; font: inherit; font-size: 26px; cursor: pointer; }
.image-viewer button:hover { background: #ffffff28; }
.image-viewer button:focus-visible { outline: 2px solid white; outline-offset: 3px; }
.viewer-close { position: absolute; top: max(8px, env(safe-area-inset-top)); right: max(16px, env(safe-area-inset-right)); }
.viewer-controls { position: absolute; bottom: max(12px, env(safe-area-inset-bottom)); display: flex; align-items: center; gap: 24px; }
.viewer-controls span { min-width: 48px; text-align: center; }

.portrait-album { width: 108px; }
.portrait-switch { position: relative; display: block; width: 100%; padding: 0; border: 0; background: none; cursor: pointer; border-radius: 11px; overflow: hidden; touch-action: pan-y; }
.home-portrait .portrait-switch img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; object-position: center top; }
.home-portrait .portrait-switch .portrait-recent { position: absolute; inset: 0; height: 100%; opacity: 0; transition: opacity 320ms ease; }
.portrait-album.is-recent .portrait-recent { opacity: 1; }
.portrait-years { display: flex; justify-content: space-between; gap: 8px; margin-top: 4px; }
.portrait-years button { padding: 6px 0; border: 0; background: none; font: inherit; font-size: 13px; color: var(--muted); cursor: pointer; opacity: .55; }
.portrait-years button[aria-pressed="true"] { opacity: 1; color: var(--ink); text-decoration: underline; text-underline-offset: 4px; text-decoration-color: var(--link-line); }
.portrait-years button:hover { opacity: 1; }
.portrait-album button:focus-visible { outline: 2px solid var(--accent); outline-offset: 4px; }
@media (max-width: 600px) { .portrait-album { width: 96px; } }
@media (prefers-reduced-motion: reduce) { .home-portrait .portrait-switch .portrait-recent { transition: none; } }
/* Match the portrait scale while keeping the original image intact. */
.home-portrait .portrait-switch img:first-child { transform: scale(1.4); transform-origin: 35% 0%; }

/* Reserve the scrollbar gutter when opening overlays and switching pages. */
html { scrollbar-gutter: stable; }

/* Controls should feel like controls, while article text stays selectable. */
.prose summary, .toc summary { -webkit-user-select: none; user-select: none; touch-action: manipulation; }
button { touch-action: manipulation; }
button:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
.prose summary::before { transition: transform 160ms ease; }
@media (hover: hover) {
  button, .prose summary { transition: background-color 140ms ease, color 140ms ease; }
}
@media (pointer: coarse) {
  .prose summary { min-height: 44px; padding-top: 5px; padding-bottom: 5px; }
  .carousel-controls button, .carousel-dots button { min-width: 44px; min-height: 44px; }
  .portrait-years button { min-width: 44px; min-height: 44px; }
  .prose summary:hover, .toc summary:hover { background: transparent; }
  [data-theme="dark"] .prose summary:hover { background: transparent; }
}
@media (prefers-reduced-motion: reduce) {
  .prose summary::before, button, .prose summary { transition: none; }
}

/* The whole directory row is one link and one keyboard stop. */
.home a.entry { color: inherit; text-decoration: none; border-radius: 0; }
.home a.entry p { margin: 0; }
.home a.entry:focus-visible { outline-offset: 5px; }
@media (hover: hover) {
  .home a.entry:hover h2 { color: var(--accent); }
  .home a.entry:hover { background: color-mix(in srgb, var(--ink) 3%, transparent); }
}
.back-to-top { position: fixed; right: max(16px, env(safe-area-inset-right)); bottom: max(18px, env(safe-area-inset-bottom)); z-index: 15; display: grid; place-items: center; width: 44px; height: 44px; border: 1px solid var(--line); border-radius: 50%; color: var(--muted); background: var(--paper); cursor: pointer; box-shadow: 0 2px 10px #00000008; }
.back-to-top[hidden] { display: none; }
.back-to-top:hover { color: var(--ink); }
.carousel-images { touch-action: pan-y pinch-zoom; }
.carousel-slide:focus-visible { outline-offset: -4px; }
/* Avoid accidental native image dragging when interacting with galleries. */
.carousel-slide img, .portrait-switch img { -webkit-user-drag: none; user-select: none; }

.mobile-brand, .mobile-menu-toggle { display: none; }
.selection-note { color: var(--muted); font-size: 14px; line-height: 1.6; margin: 26px 0 20px; }
.portrait-years { justify-content: flex-start; gap: 14px; }
.portrait-years button { font-size: 12px; opacity: .45; }
.portrait-years button[aria-pressed="true"] { color: var(--muted); opacity: .8; text-decoration: none; }
@media (hover: hover) {
  .portrait-album:hover .portrait-years button, .portrait-album:focus-within .portrait-years button { opacity: 1; }
}
@media (max-width: 600px), (pointer: coarse) and (max-height: 600px) {
  .topbar { grid-template-columns: minmax(0, 1fr) auto 44px; gap: 12px; }
  .mobile-brand { display: flex; align-items: center; min-height: 44px; color: var(--heading); text-decoration: none; font-size: 17px; }
  .mobile-menu-toggle { display: flex; gap: 8px; align-items: center; justify-content: center; min-height: 44px; padding: 0 8px; border: 0; background: transparent; color: var(--ink); font: inherit; font-size: 16px; cursor: pointer; }
  .mobile-menu-toggle[aria-expanded="true"] svg { transform: rotate(180deg); }
  .topbar .theme-toggle { grid-column: 3; grid-row: 1; border: 0; }
  .topbar nav { display: none; }
  .topbar.menu-open nav { display: grid; grid-template-columns: 1fr 1fr; grid-column: 1 / -1; gap: 4px 16px; width: 100%; padding: 12px 0 16px; border-top: 1px solid var(--line); max-height: 65dvh; overflow-y: auto; }
  .topbar.menu-open nav a { padding: 4px 12px; border-radius: 6px; }
  .topbar.menu-open nav a[aria-current="page"] { background: color-mix(in srgb, var(--ink) 6%, transparent); text-decoration: none; }
}

/* Consistent interaction feedback without moving reading content. */
:root { --interaction-duration: 150ms; --interaction-easing: cubic-bezier(.2,.7,.2,1); }
button, a, summary { -webkit-tap-highlight-color: transparent; }
@media (hover: hover) {
  a { transition: color var(--interaction-duration) var(--interaction-easing), text-decoration-color var(--interaction-duration) var(--interaction-easing); }
  button, .prose summary { transition: background-color var(--interaction-duration) var(--interaction-easing), color var(--interaction-duration) var(--interaction-easing), box-shadow var(--interaction-duration) var(--interaction-easing); }
  .home a.entry { transition: background-color var(--interaction-duration) var(--interaction-easing); }
  .mobile-menu-toggle:hover, .carousel-controls button:hover, .portrait-years button:hover { color: var(--heading); }
}
.prose summary:active, .mobile-menu-toggle:active, .theme-toggle:active,
.carousel-controls button:active, .back-to-top:active { background: color-mix(in srgb, var(--ink) 9%, transparent); }
.home a.entry:active { background: color-mix(in srgb, var(--ink) 6%, transparent); }
.prose a:active { color: var(--heading); text-decoration-color: currentColor; }
.image-viewer button:active { background: #ffffff38; }
.portrait-switch:active { filter: brightness(.96); }
.mobile-menu-toggle svg { transition: transform 180ms var(--interaction-easing); }
@media (hover: none) {
  .theme-toggle:hover, .carousel-controls button:hover { background: transparent; }
  .theme-toggle:active, .carousel-controls button:active { background: color-mix(in srgb, var(--ink) 9%, transparent); }
}
@media (prefers-reduced-motion: no-preference) {
  .topbar.menu-open nav { animation: menu-reveal 140ms ease-out; }
  .image-viewer[open] { animation: viewer-reveal 150ms ease-out; }
  @keyframes menu-reveal { from { opacity: 0; } to { opacity: 1; } }
  @keyframes viewer-reveal { from { opacity: .6; } to { opacity: 1; } }
}
@media (prefers-reduced-motion: reduce) {
  a, button, summary, .mobile-menu-toggle svg { transition: none !important; }
}

/* Native cross-document transitions preserve normal links and browser history. */
@view-transition { navigation: auto; }
.topbar { view-transition-name: site-navigation; }
@media (prefers-reduced-motion: no-preference) {
  ::view-transition-old(root) { animation: page-out 100ms ease-out both; }
  ::view-transition-new(root) { animation: page-in 180ms ease-out both; }
  ::view-transition-old(site-navigation),
  ::view-transition-new(site-navigation) { animation: none; mix-blend-mode: normal; }
  main { animation: initial-page-in 180ms ease-out; }
  @keyframes page-out { to { opacity: 0; } }
  @keyframes page-in { from { opacity: 0; } to { opacity: 1; } }
  @keyframes initial-page-in { from { opacity: .8; } to { opacity: 1; } }
}
@media (prefers-reduced-motion: reduce) {
  ::view-transition-group(*), ::view-transition-old(*), ::view-transition-new(*) { animation: none !important; }
}

/* Contents links have a generous target without changing their visual hierarchy. */
nav.toc a { border-radius: 4px; }
nav.toc a:active { background: color-mix(in srgb, var(--ink) 7%, transparent); }
@media (hover: hover) {
  nav.toc a:hover { color: var(--heading); text-decoration-color: currentColor; }
}
@media (pointer: coarse) {
  nav.toc a { display: block; min-height: 44px; padding-top: 8px; padding-bottom: 8px; }
}

.prose .katex { font-size: 1.05em; }
.prose .katex-display { overflow-x: auto; overflow-y: hidden; padding: 8px 0; }

/* Project dates remain secondary to the project titles. */
.prose .project-date, .prose .media-date, .prose .article-date {
  margin-inline-start: .75em;
  font-size: .72em;
  font-weight: 400;
  color: #9da09b;
  white-space: nowrap;
}
[data-theme="dark"] .prose :is(.project-date, .media-date, .article-date) { color: #768078; }
.prose .project-date a { color: inherit; text-decoration-color: color-mix(in srgb, currentColor 35%, transparent); }
.prose .project-date a:hover, .prose .project-date a:focus-visible { color: var(--accent); }

/* Align project media with the text inside each project's bullet list. */
.prose .project-list > details > .toggle-body > .project-media {
  margin: 24px 0 28px 28px;
}
.prose .project-media img { display: block; width: 100%; }
.prose .project-list > details > .toggle-body > .project-media-link {
  margin: -16px 0 28px 28px;
  font-size: .85em;
}

/* Keep mobile text sizing predictable without disabling pinch zoom. */
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
@media (max-width: 600px) {
  /* Deep book/project lists should not consume the narrow reading column. */
  .prose details { padding-left: 20px; }
  .prose ul, .prose ol, .prose .leaf-list { padding-left: 20px; }
  .prose summary::before { left: -20px; }
  .prose summary::after { left: -20px; width: 20px; }
  .prose ul > li::before { left: -14px; }
  .prose blockquote { padding-left: 12px; }
  .prose li > p { margin-bottom: 0; }
  .prose li > p + p { margin-top: 8px; }
  .prose .project-list > details > .toggle-body > .project-media {
    margin: 20px 0 24px 20px;
  }
  .prose .project-list > details > .toggle-body > .project-media-link {
    margin: -12px 0 24px 20px;
  }
}
@media (pointer: coarse) {
  /* Match the disclosure arrow to the padded first line of its label. */
  .prose summary::before { top: calc(.36em + 5px); }
}

/* Book lists share the site's typography and disclosure language. */
.prose .book-shelf { margin: 0 0 40px; }
.prose .book-shelf > hr { display: none; }
.prose .book-shelf .toggle-list,
.prose .book-shelf .leaf-list { padding: 0; margin: 0; }
.prose .book-category { margin: 28px 0; }
.prose .book-category > h3 { font-size: 18px; margin: 0 0 12px; color: var(--heading); }
.prose .book-shelf .book-entry { padding: 9px 0 9px 22px; margin: 0; line-height: 1.5; }
.prose .book-shelf li.book-entry::before { display: none; }
.prose .book-shelf .book-entry > summary { padding: 0; line-height: 1.5; }
.prose .book-shelf .book-entry > summary::before { left: -22px; right: auto; top: .36em; opacity: 1; }
.prose .book-shelf .book-entry > summary::after { left: -22px; width: 22px; }
.prose .book-shelf .book-title { font-family: inherit; font-size: 1em; font-style: italic; font-weight: 400; color: var(--ink); }
.prose .book-shelf details.book-entry > summary .book-title { color: var(--accent); }
.prose .book-shelf .book-author { display: block; font-size: 13px; font-weight: 400; color: var(--muted); line-height: 1.5; margin-top: 3px; }
.prose .book-shelf .book-entry[open] > summary { margin-bottom: 16px; }
.prose .book-shelf .book-entry > .toggle-body { padding: 0 0 8px; }
@media (max-width: 600px) {
  .prose .book-category { margin: 26px 0; }
  .prose .book-shelf .book-entry > summary { min-height: 44px; }
}

.prose .book-shelf .resource-title { font-style: normal; }

/* Shared section hierarchy and disclosure interaction across the site. */
.prose .index-category { margin: 28px 0; }
.prose .index-category > h2 { font-size: 22px; line-height: 1.4; font-weight: 700; margin: 0 0 13px; }
.prose .index-category > h3 { font-size: 18px; line-height: 1.5; font-weight: 700; margin: 0 0 12px; }
.prose .disclosure-title { color: var(--accent); }
.prose .writing-entry.is-selected > summary .disclosure-title { color: #a04432; font-weight: 700; }
[data-theme="dark"] .prose .writing-entry.is-selected > summary .disclosure-title { color: #eca28c; }
.prose .disclosure-sources { font-size: .85em; margin-bottom: 14px; }
.image-zoom { display: block; cursor: zoom-in; border-radius: 12px; }
@media (max-width: 600px), (pointer: coarse) {
  .prose summary { box-sizing: border-box; min-height: 44px; padding: 7px 0; }
  .prose summary::before { top: calc(.36em + 7px); }
  .prose details { margin-top: 0; margin-bottom: 0; }
  .prose .book-shelf .book-entry { padding-top: 0; padding-bottom: 0; }
  .prose .book-shelf .book-entry > summary,
  .prose .book-shelf li.book-entry { min-height: 44px; padding-top: 7px; padding-bottom: 7px; }
  .prose .book-shelf .book-entry > summary::before { top: calc(.36em + 7px); }
  .prose .index-category .leaf-list > li { margin: 0; padding-top: 7px; padding-bottom: 7px; min-height: 44px; }
  .prose .index-category .leaf-list > li::before { top: calc(.64em + 7px); }
}

.prose .project-list > details > .toggle-body > .project-links { margin: 6px 0 16px 0; }
@media (max-width: 600px) {
  .prose .project-list > details > .toggle-body > .project-links { margin-left: 0; }
}

/* Keep an expanded writing preview together, with its action after the context. */
.prose .writing-entry > .toggle-body {
  font-size: 16px;
  line-height: 1.6;
  color: var(--muted);
  padding: 4px 0 16px;
}
.prose .writing-entry > .toggle-body > p { margin: 0 0 8px; }
.prose .writing-entry > .toggle-body > .disclosure-sources {
  font-size: 14px;
  margin: 8px 0 0;
}
.prose .writing-entry[open] > summary { margin-bottom: 4px; }
@media (pointer: coarse) {
  .prose .writing-entry .disclosure-sources a { display: inline-flex; align-items: center; min-height: 44px; }
}


.prose .education-entry { margin: 12px 0; }
.prose .education-detail { display: block; font-size: 14px; font-weight: 400; color: var(--muted); line-height: 1.5; margin-top: 3px; }