:root {
  --site-bg: #f8f5f1; --paper: #f6eddf; --paper-light: #faf5ec;
  --paper-edge: #e5d5bd; --book-ink: #34271f; --book-muted: #756457;
  --book-accent: #b98a52; --book-accent-dark: #805b36; --white: #fffdfa;
  --soft-border: #dfd2c2; --shadow-soft: rgba(63,43,29,.08); --shadow-medium: rgba(63,43,29,.14);
  --font-display: 'Playfair Display', Georgia, serif;
  --font-reading: 'Source Serif 4', Georgia, 'Times New Roman', serif;
  --font-ui: Inter, system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --font-document: 'IBM Plex Mono', 'Courier New', monospace;
  --reader-width: 680px; --book-width: 880px; --site-width: 1120px;
  --space-xs: .35rem; --space-sm: .7rem; --space-md: 1.25rem; --space-lg: 2rem; --space-xl: 3.5rem;
}
* {box-sizing:border-box}
html {scroll-padding-top:1rem}
body {margin:0;background:var(--site-bg);color:var(--book-ink);font-family:var(--font-ui);line-height:1.65;-webkit-font-smoothing:antialiased;overflow-wrap:anywhere}
[hidden] {display:none!important}
a {color:var(--book-accent-dark);text-underline-offset:.22em}
a:hover {text-decoration-thickness:2px}
button,input {font:inherit}
button,a,input {touch-action:manipulation}
button {cursor:pointer}
button:disabled {cursor:not-allowed}
:focus-visible {outline:3px solid var(--book-accent-dark);outline-offset:4px}
img {max-width:100%;height:auto;display:block}
h1,h2,h3 {font-family:var(--font-display);font-weight:500;line-height:1.2;text-wrap:balance}
h1 {font-size:clamp(2.35rem,5vw,4.3rem);letter-spacing:-.035em;margin:.5rem 0 1.5rem}
h2 {font-size:clamp(1.75rem,3vw,2.5rem);letter-spacing:-.02em}
h3 {font-size:1.4rem}
p {margin:0 0 1.25rem}
.container {width:min(calc(100% - 3rem),var(--site-width));margin-inline:auto}
.skip-link {position:absolute;left:1rem;top:0;transform:translateY(-150%);padding:.7rem 1rem;background:var(--white);z-index:10}
.skip-link:focus {transform:translateY(0)}
.site-header {border-bottom:1px solid var(--soft-border);background:var(--site-bg)}
.header-inner {display:flex;align-items:center;justify-content:space-between;gap:1rem;padding:1.15rem 0}
.brand {font-family:var(--font-display);font-weight:600;letter-spacing:.08em;font-size:1.25rem;color:var(--book-ink);text-decoration:none;white-space:nowrap}
.site-nav {display:flex;flex-wrap:wrap;gap:.25rem .65rem}
.site-nav a {display:inline-flex;align-items:center;min-height:44px;padding:.45rem .7rem;text-decoration:none;font-size:.85rem;color:var(--book-ink)}
.site-nav a[aria-current=page] {text-decoration:underline;text-decoration-color:var(--book-accent-dark)}
.site-footer {border-top:1px solid var(--soft-border);margin-top:4rem;padding:2rem 0;font-size:.8rem;color:var(--book-muted)}
.footer-inner {display:flex;justify-content:space-between;align-items:start;gap:1rem;flex-wrap:wrap}
.site-footer p {margin:.35rem 0}
.site-footer a {display:inline-block;padding:.5rem .6rem;min-height:44px}
.eyebrow {font-family:var(--font-ui);font-size:.7rem;letter-spacing:.14em;text-transform:uppercase;font-weight:600;color:var(--book-muted)}
.small,.metadata {font-family:var(--font-ui);font-size:.8rem;color:var(--book-muted)}
.lead {font-family:var(--font-reading);font-size:clamp(1.15rem,2vw,1.4rem);line-height:1.65;max-width:38rem}
.button {display:inline-flex;align-items:center;justify-content:center;min-height:48px;padding:.8rem 1.3rem;border:1px solid var(--book-accent-dark);background:var(--book-accent-dark);color:var(--white);text-decoration:none;font-size:.85rem;font-weight:600;border-radius:2px}
.button:hover {background:var(--book-ink);border-color:var(--book-ink)}
.button.secondary {background:transparent;color:var(--book-accent-dark)}
.button.secondary:hover {background:var(--paper)}
.actions {display:flex;flex-wrap:wrap;gap:.8rem;align-items:center;margin-top:1.75rem}
.hero {position:relative;margin-top:2rem;padding:5rem 4rem 4rem;background:linear-gradient(120deg,#f3e7d4,#eee0ca);border:1px solid var(--paper-edge);isolation:isolate}
.hero::after {content:'';position:absolute;z-index:-1;right:0;top:0;width:24%;height:8rem;opacity:.55;background:repeating-linear-gradient(45deg,transparent 0 24px,var(--white) 24px 27px,transparent 27px 52px),repeating-linear-gradient(-45deg,transparent 0 24px,var(--white) 24px 27px,transparent 27px 52px);mask-image:linear-gradient(to left,#000,transparent)}
.hero h1 {font-size:clamp(2.45rem,7vw,5.6rem);letter-spacing:.01em;margin:1.3rem 0 .75rem}
.hero .subtitle {font-family:var(--font-display);font-size:clamp(1.4rem,3vw,2.1rem);margin-bottom:1.5rem}
.hero .hero-foot {margin:2.7rem 0 0;padding-top:1.1rem;border-top:1px solid var(--paper-edge);max-width:38rem}
.home-intro {display:grid;grid-template-columns:1fr 1fr;gap:4rem;padding:4.5rem 0 1rem}
.home-intro h2 {margin-top:.7rem}
.home-intro .lead {font-size:1.2rem}
.page-heading {max-width:var(--reader-width);padding:3.5rem 0 1.5rem}
.page-heading h1 {margin-top:.8rem}
.notice {padding:1rem 1.25rem;border-left:2px solid var(--paper-edge);background:var(--paper-light);font-size:.85rem;max-width:var(--reader-width);margin:1.5rem 0}
.notice strong {display:block;margin-bottom:.3rem}
.resume {margin:1.5rem 0;padding:1rem 0;border-block:1px solid var(--soft-border);max-width:var(--reader-width)}
.resume p {margin-bottom:.6rem}
.resume a {display:inline-block;min-height:44px;padding:.5rem 0}
.index-list {list-style:none;padding:0;margin:1.5rem 0 2rem;max-width:var(--book-width);border-top:1px solid var(--soft-border)}
.index-list li {border-bottom:1px solid var(--soft-border)}
.index-list a {display:grid;grid-template-columns:3rem 1fr auto;gap:1rem;padding:1.5rem .25rem;align-items:center;text-decoration:none;color:var(--book-ink)}
.index-list a:hover {background:var(--paper-light)}
.index-list .item-title {display:block;font-family:var(--font-display);font-size:clamp(1.1rem,2vw,1.5rem);line-height:1.4}
.index-number {font-family:var(--font-display);font-size:1.5rem;color:var(--book-accent-dark)}
.current-position {display:block;color:var(--book-accent-dark);font-size:.8rem;font-weight:600}
.prose {max-width:var(--reader-width);font-family:var(--font-reading);font-size:1.15rem;line-height:1.8}
.prose h2 {margin-top:2rem}
@media(max-width:600px) {
 .container {width:calc(100% - 2rem)}
 .header-inner {display:block;padding:.8rem 0 .3rem}
 .site-nav {margin-top:.3rem;gap:0;justify-content:space-between}
 .site-nav a {padding:.5rem .3rem;font-size:.8rem}
 .hero {margin-top:1rem;padding:2.5rem 1.3rem 1.5rem}
 .hero::after {width:40%}
 .hero h1 {font-size:clamp(2rem,9vw,3.4rem)}
 .home-intro {grid-template-columns:1fr;gap:1.5rem;padding-top:2.5rem}
 .page-heading {padding-top:2rem}
 .index-list a {grid-template-columns:2rem 1fr auto;gap:.65rem}
 .actions .button {width:100%}
 .site-footer {margin-top:2.5rem}
}
@media(prefers-reduced-motion:reduce) {*,*::before,*::after {scroll-behavior:auto!important;animation:none!important;transition:none!important}}