:root{
  --text-xs:clamp(0.75rem,0.7rem + 0.25vw,0.875rem);
  --text-sm:clamp(0.875rem,0.8rem + 0.35vw,1rem);
  --text-base:clamp(1rem,0.95rem + 0.25vw,1.125rem);
  --text-lg:clamp(1.125rem,1rem + 0.75vw,1.5rem);
  --text-xl:clamp(1.5rem,1.2rem + 1.25vw,2.25rem);
  --text-2xl:clamp(2rem,1.2rem + 2.5vw,3.5rem);
  --text-hero:clamp(3rem,0.5rem + 7vw,7rem);
  --space-1:.25rem;--space-2:.5rem;--space-3:.75rem;--space-4:1rem;--space-5:1.25rem;--space-6:1.5rem;--space-8:2rem;--space-10:2.5rem;--space-12:3rem;--space-16:4rem;--space-20:5rem;--space-24:6rem;--space-32:8rem;
  --radius-sm:.375rem;--radius-md:.5rem;--radius-lg:.75rem;--radius-full:9999px;
  --transition-interactive:180ms cubic-bezier(.16,1,.3,1);
  --content-narrow:640px;--content-default:960px;--content-wide:1160px;
  --font-display:'Erode','Georgia',serif;
  --font-body:'Source Serif 4','Georgia',serif;
}
:root,[data-theme='light']{
  --color-bg:#f5f0e9;--color-surface:#faf6ef;--color-surface-offset:#ede5da;
  --color-divider:#e0d6c8;--color-border:#d6c9b8;
  --color-text:#211a19;--color-text-muted:#5f5552;--color-text-faint:#8c807b;
  --color-primary:#8c3a30;--color-primary-hover:#6b2a22;--color-primary-highlight:#f0dcd4;
  --color-text-inverse:#faf6ef;
}
[data-theme='dark']{
  --color-bg:#141010;--color-surface:#1b1514;--color-surface-offset:#221a19;
  --color-divider:#2a2120;--color-border:#3a2d2b;
  --color-text:#ebe3d8;--color-text-muted:#b0a49d;--color-text-faint:#7c706a;
  --color-primary:#e8a08a;--color-primary-hover:#f2bba9;--color-primary-highlight:#33201c;
  --color-text-inverse:#141010;
}
@media (prefers-color-scheme:dark){
  :root:not([data-theme='light']){
    --color-bg:#141010;--color-surface:#1b1514;--color-surface-offset:#221a19;
    --color-divider:#2a2120;--color-border:#3a2d2b;
    --color-text:#ebe3d8;--color-text-muted:#b0a49d;--color-text-faint:#7c706a;
    --color-primary:#e8a08a;--color-primary-hover:#f2bba9;--color-primary-highlight:#33201c;
    --color-text-inverse:#141010;
  }
}

.skip{position:absolute;left:var(--space-4);top:-4rem;background:var(--color-primary);color:var(--color-text-inverse);padding:var(--space-2) var(--space-4);border-radius:var(--radius-sm);z-index:20;font-size:var(--text-sm)}
.skip:focus{top:var(--space-4)}

.wrap{width:min(100% - var(--space-12),var(--content-wide));margin-inline:auto}
@media (max-width:480px){.wrap{width:min(100% - var(--space-8),var(--content-wide))}}

/* header */
.site-header{position:sticky;top:0;z-index:10;background:oklch(from var(--color-bg) l c h / .88);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px)}
.header-inner{display:flex;align-items:center;justify-content:space-between;gap:var(--space-4);min-height:4rem}
.brand{display:inline-flex;align-items:center;gap:var(--space-3);color:var(--color-text);text-decoration:none;font-family:var(--font-display);font-weight:500;font-size:var(--text-lg);letter-spacing:.005em}
.nav{display:flex;align-items:center;gap:var(--space-6)}
.nav a{font-size:var(--text-sm);color:var(--color-text-muted);text-decoration:none;padding:var(--space-2) 0;border-bottom:1px solid transparent;min-height:44px;display:inline-flex;align-items:center}
.nav a:hover{color:var(--color-text)}
.nav a[aria-current='page']{color:var(--color-text);border-bottom-color:var(--color-primary)}
.theme-toggle{width:44px;height:44px;display:inline-flex;align-items:center;justify-content:center;border-radius:var(--radius-full);color:var(--color-text-muted)}
.theme-toggle:hover{color:var(--color-text);background:var(--color-surface-offset)}
.theme-toggle svg{width:20px;height:20px}
@media (max-width:520px){.nav{gap:var(--space-4)}}

/* hero */
.hero{padding-block:clamp(var(--space-12),8vw,var(--space-24)) clamp(var(--space-12),8vw,var(--space-24));background:radial-gradient(ellipse 70% 80% at 85% 30%,oklch(from var(--color-primary) l c h / .14),transparent 70%)}
.hero-grid{display:grid;grid-template-columns:minmax(0,1fr);gap:var(--space-8)}
.hero h1{font-family:var(--font-display);font-weight:400;font-size:var(--text-hero);line-height:1.02;letter-spacing:-.012em;max-width:12ch}
.hero h1 em{font-style:italic;color:var(--color-primary)}
.hero-lede{font-size:var(--text-lg);line-height:1.5;color:var(--color-text-muted);max-width:34ch}
.hero-actions{display:flex;flex-wrap:wrap;gap:var(--space-6);align-items:center;margin-top:var(--space-2)}
.link-arrow{display:inline-flex;align-items:center;gap:var(--space-2);color:var(--color-primary);text-decoration:none;font-size:var(--text-sm);font-weight:600;min-height:44px;align-self:center}
.link-arrow:hover{color:var(--color-primary-hover);text-decoration:underline;text-underline-offset:4px}
.btn{display:inline-flex;align-items:center;justify-content:center;min-height:48px;padding:0 var(--space-8);border-radius:var(--radius-full);background:var(--color-primary);color:var(--color-text-inverse);font-weight:600;font-size:var(--text-sm);text-decoration:none}
.btn:hover{background:var(--color-primary-hover)}
.portrait{width:100%;max-width:480px;aspect-ratio:4/5;overflow:hidden;border-radius:240px 240px var(--radius-lg) var(--radius-lg);background:var(--color-surface-offset);box-shadow:0 20px 50px oklch(from var(--color-primary) l c h / .18)}
.portrait img{width:100%;height:100%;object-fit:cover;object-position:46% 40%}
@media (min-width:900px){
  .hero-grid{grid-template-columns:minmax(0,1fr) minmax(0,1fr);align-items:center;gap:var(--space-16)}
  .portrait{justify-self:end}
}

/* sections */
.section{padding-block:clamp(var(--space-12),7vw,var(--space-20))}
.section.band{background:var(--color-surface-offset)}
.eyebrow{font-size:var(--text-xs);letter-spacing:.14em;text-transform:uppercase;color:var(--color-text-faint);font-weight:600;margin-bottom:var(--space-4)}
.section h2{font-family:var(--font-display);font-weight:400;font-size:var(--text-xl);margin-bottom:var(--space-6)}
.split{display:grid;gap:var(--space-8)}
@media (min-width:860px){.split{grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:var(--space-16)}}
.prose p+p{margin-top:var(--space-5)}
.prose p{color:var(--color-text)}
.pull{font-family:var(--font-display);font-size:var(--text-xl);line-height:1.3;max-width:22ch;font-weight:400}

.themes{display:grid;gap:0;margin-top:var(--space-2)}
.theme-item-unused{display:grid;grid-template-columns:3rem 1fr;gap:var(--space-4);padding-block:var(--space-6);border-top:1px solid var(--color-divider)}
.theme-item:first-child{border-top:none;padding-top:0}
.theme-item .n{font-family:var(--font-display);color:var(--color-primary);font-size:var(--text-lg)}
.theme-item h3{font-family:var(--font-display);font-weight:500;font-size:var(--text-lg);margin-bottom:var(--space-2)}
.theme-item p{color:var(--color-text-muted);font-size:var(--text-base)}

/* writing list / empty state */
.empty{border:1px solid var(--color-border);background:var(--color-surface);border-radius:var(--radius-lg);padding:clamp(var(--space-8),5vw,var(--space-16));display:grid;gap:var(--space-4);max-width:var(--content-default)}
.empty h3{font-family:var(--font-display);font-weight:400;font-size:var(--text-xl)}
.empty p{color:var(--color-text-muted)}
.entries{list-style:none}
.entry{border-top:1px solid var(--color-divider);padding-block:var(--space-6)}
.entry a{display:grid;gap:var(--space-2);text-decoration:none;color:inherit}
.entry h3{font-family:var(--font-display);font-weight:400;font-size:var(--text-xl)}
.entry:hover h3{color:var(--color-primary)}
.entry .meta{font-size:var(--text-xs);color:var(--color-text-faint);letter-spacing:.06em}

/* page heads */
.page-head{padding-block:clamp(var(--space-12),9vw,var(--space-24)) clamp(var(--space-8),5vw,var(--space-12))}
.page-head h1{font-family:var(--font-display);font-weight:400;font-size:var(--text-2xl);line-height:1.05;max-width:16ch}
.page-head p{margin-top:var(--space-6);font-size:var(--text-lg);color:var(--color-text-muted);max-width:40ch;line-height:1.5}
.article-body{padding-bottom:clamp(var(--space-12),8vw,var(--space-24))}
.article-body .prose{max-width:var(--content-narrow)}

/* footer */
.site-footer{background:var(--color-surface-offset);padding-block:var(--space-12);margin-top:var(--space-8)}
.footer-inner{display:grid;gap:var(--space-4);color:var(--color-text-muted);font-size:var(--text-sm)}
.footer-inner .brand{font-size:var(--text-base)}
.footer-inner p{max-width:60ch}
.footer-links{display:flex;gap:var(--space-6);flex-wrap:wrap}
.footer-links a{color:var(--color-text-muted);text-decoration:none;min-height:44px;display:inline-flex;align-items:center}
.footer-links a:hover{color:var(--color-text)}

/* gentle entrance */
@media (prefers-reduced-motion:no-preference){
  .rise{opacity:0;transform:translateY(8px);animation:rise .7s cubic-bezier(.16,1,.3,1) forwards}
  .rise.d1{animation-delay:.08s}.rise.d2{animation-delay:.18s}.rise.d3{animation-delay:.28s}
  @keyframes rise{to{opacity:1;transform:none}}
}

/* essay */
.essay{padding-block:clamp(var(--space-8),5vw,var(--space-16)) clamp(var(--space-12),8vw,var(--space-24))}
.back{display:inline-flex;align-items:center;gap:var(--space-2);color:var(--color-text-muted);text-decoration:none;font-size:var(--text-sm);min-height:44px}
.back:hover{color:var(--color-primary)}
.essay-head{max-width:var(--content-narrow);padding-block:var(--space-8) var(--space-10)}
.essay-head h1{font-family:var(--font-display);font-weight:400;font-size:var(--text-2xl);line-height:1.08}
.byline{margin-top:var(--space-5);color:var(--color-text-muted);font-size:var(--text-sm)}
.essay-body{max-width:var(--content-narrow)}
.essay-body p{max-width:none;font-size:var(--text-base);line-height:1.75}
.essay-body p+p{margin-top:var(--space-6)}
.essay-end{max-width:var(--content-narrow);margin-top:var(--space-16);padding-top:var(--space-8);border-top:1px solid var(--color-divider);display:grid;gap:var(--space-4);color:var(--color-text-muted)}
.entry p{color:var(--color-text-muted);max-width:60ch;font-size:var(--text-base)}
.entries{max-width:var(--content-default)}
.entry:last-child{border-bottom:1px solid var(--color-divider)}

.photo{margin-top:var(--space-8)}
.photo img{width:100%;height:auto;border-radius:var(--radius-lg);background:var(--color-surface-offset)}
.about-split .portrait-photo{margin-top:0;max-width:420px}
.about-split .portrait-photo img{border-radius:200px 200px var(--radius-lg) var(--radius-lg)}
@media (max-width:859px){.about-split .portrait-photo{order:2}}
.entries{max-width:var(--content-default)}
.entry{border-top:none;background:var(--color-surface);border-radius:var(--radius-lg);padding:var(--space-6) var(--space-8);margin-bottom:var(--space-4);box-shadow:0 1px 0 var(--color-divider)}
.entry:last-child{border-bottom:none}
.essay-end{border-top:none;background:var(--color-surface-offset);border-radius:var(--radius-lg);padding:var(--space-8)}
.page-head h1{font-size:var(--text-2xl)}
.more-soon{margin-top:var(--space-8);font-family:var(--font-display);font-size:var(--text-lg);color:var(--color-text-muted);font-style:italic}
.foot-note{margin-top:var(--space-3);font-size:var(--text-sm);color:var(--color-text-muted);font-style:italic}

/* Contact */
.contact{border-top:1px solid var(--color-divider);padding-block:clamp(var(--space-12),8vw,var(--space-20))}
.contact-inner{max-width:var(--content-narrow);display:grid;gap:var(--space-8)}
.contact-intro h2{font-family:var(--font-display);font-weight:400;font-size:var(--text-xl);margin-bottom:var(--space-4)}
.contact-intro p{color:var(--color-text-muted);line-height:1.6;max-width:52ch}
.contact-form{display:grid;gap:var(--space-5)}
.field{display:grid;gap:var(--space-2)}
.field label{font-size:var(--text-sm);color:var(--color-text-muted);font-weight:600;letter-spacing:.02em}
.field input,.field textarea{width:100%;font:inherit;font-size:var(--text-base);color:var(--color-text);background:var(--color-surface);border:1px solid var(--color-border);border-radius:var(--radius-md);padding:var(--space-3) var(--space-4);min-height:48px;transition:border-color .15s ease,box-shadow .15s ease}
.field textarea{resize:vertical;min-height:9rem;line-height:1.55}
.field input:focus,.field textarea:focus{outline:none;border-color:var(--color-primary);box-shadow:0 0 0 3px oklch(from var(--color-primary) l c h / .18)}
.hp{position:absolute;left:-9999px;width:1px;height:1px;opacity:0}
.form-foot{display:flex;flex-wrap:wrap;align-items:center;gap:var(--space-5)}
.form-note{font-size:var(--text-sm);color:var(--color-text-muted);margin:0}
.form-note.ok{color:var(--color-text)}
.contact-direct{font-size:var(--text-sm);color:var(--color-text-muted)}
.contact-direct a{color:var(--color-primary);text-decoration:none;border-bottom:1px solid transparent}
.contact-direct a:hover{border-bottom-color:currentColor}