/* Layout: quiet single column; three doors; stream below. */
:root{
  /* Palette: Honey. Warm white, honey-gold accent, slate blue for buttons. */
  --paper:#FBFAF6; --ink:#1F2430; --moss:#3E5A78; --gold:#C8921E; --sage:#7F93AA;
  --line:#E4E2DA; --card:#FFFFFF; --soft:#6B7280;
  --display:"Fraunces", Georgia, serif;
  --body:"Albert Sans", -apple-system, "Segoe UI", sans-serif;
}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    --paper:#141820; --ink:#E9EAE4; --moss:#A9C4DF; --gold:#E0AE45; --sage:#8FA3B8;
    --line:#2A3140; --card:#1B2130; --soft:#9AA3B2; color-scheme:dark;
  }
}
:root[data-theme="dark"]{
  --paper:#141820; --ink:#E9EAE4; --moss:#A9C4DF; --gold:#E0AE45; --sage:#8FA3B8;
  --line:#2A3140; --card:#1B2130; --soft:#9AA3B2; color-scheme:dark;
}

*{box-sizing:border-box;margin:0}
html{color-scheme:light}
body{
  background:var(--paper); color:var(--ink);
  font-family:var(--body); font-size:17px; line-height:1.65;
  padding-left:max(16px, env(safe-area-inset-left, 0px));
  padding-right:max(16px, env(safe-area-inset-right, 0px));
  padding-block:0;
}
.wrap{max-width:860px; margin:0 auto}

/* Nav */
nav{display:flex; align-items:center; justify-content:space-between; gap:16px; padding-block:28px 8px; flex-wrap:wrap}
.wordmark{font-family:var(--display); font-weight:600; font-size:1.25rem; color:var(--ink); text-decoration:none}
.wordmark span{color:var(--gold)}
nav ul{display:flex; gap:22px; list-style:none; padding:0; flex-wrap:wrap; align-items:center}
nav a{color:var(--ink); text-decoration:none; font-size:.92rem; letter-spacing:.02em}
nav a:hover, nav a:focus-visible, nav a[aria-current]{color:var(--gold)}
.theme-toggle{
  background:transparent; border:1px solid var(--line); color:var(--ink);
  width:36px; height:36px; border-radius:50%; cursor:pointer;
  display:inline-flex; align-items:center; justify-content:center;
}
.theme-toggle:hover,.theme-toggle:focus-visible{border-color:var(--gold); color:var(--gold)}
.theme-toggle .icon-sun{display:none}
.theme-toggle .icon-moon{display:block}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]) .theme-toggle .icon-sun{display:block}
  :root:not([data-theme="light"]) .theme-toggle .icon-moon{display:none}
}
:root[data-theme="dark"] .theme-toggle .icon-sun{display:block}
:root[data-theme="dark"] .theme-toggle .icon-moon{display:none}
:root[data-theme="light"] .theme-toggle .icon-sun{display:none}
:root[data-theme="light"] .theme-toggle .icon-moon{display:block}

/* Hero */
.hero{display:flex; gap:40px; align-items:center; padding-block:56px 48px; flex-wrap:wrap}
.portrait{width:168px; height:168px; border-radius:50%; flex:0 0 auto; border:2px solid var(--gold); padding:6px}
.portrait .ph{
  width:100%; height:100%; border-radius:50%;
  background:radial-gradient(circle at 35% 30%, var(--sage), var(--moss));
  display:flex; align-items:center; justify-content:center;
  color:var(--paper); font-size:.7rem; letter-spacing:.14em; text-transform:uppercase; text-align:center; padding:12px;
}
.hero-text{flex:1 1 320px; min-width:0}
h1{font-family:var(--display); font-weight:500; font-size:clamp(2.2rem,6vw,3.2rem); line-height:1.1; text-wrap:balance; color:var(--ink)}
.hello{margin-top:18px; max-width:56ch; font-size:1.06rem}
.hello em{font-style:normal; color:var(--gold)}
.hero.page{padding-block:48px 40px}
.hero.page .hello{font-size:1.12rem}

/* Doors */
.doors{display:grid; grid-template-columns:repeat(auto-fit,minmax(240px,1fr)); gap:20px; padding-block:8px 64px}
.door{background:var(--card); border:1px solid var(--line); border-radius:14px; padding:30px 28px; display:flex; flex-direction:column; gap:14px; min-width:0}
.kicker{font-size:.72rem; letter-spacing:.16em; text-transform:uppercase; color:var(--gold); font-weight:600}
.door h2{font-family:var(--display); font-weight:500; font-size:1.55rem; line-height:1.2; text-wrap:balance}
.door p{color:var(--soft); font-size:.98rem; max-width:48ch}
.door .cta{margin-top:auto; padding-top:8px}
.btn{display:inline-block; text-decoration:none; font-weight:600; font-size:.95rem; padding:11px 22px; border-radius:999px; background:var(--moss); color:var(--paper); border:1px solid var(--moss); cursor:pointer; font-family:var(--body)}
.btn:hover,.btn:focus-visible{opacity:.88}
.btn.ghost{background:transparent; color:var(--ink); border:1px solid var(--line)}
.btn.accent{background:var(--gold); border-color:var(--gold); color:#fff}
@media (prefers-color-scheme: dark){ :root:not([data-theme="light"]) .btn.accent{color:#1B140A} }
:root[data-theme="dark"] .btn.accent{color:#1B140A}

/* Section heads and lists */
.section{padding-block:0 64px}
.section-head{display:flex; align-items:baseline; justify-content:space-between; gap:16px; border-bottom:1px solid var(--line); padding-bottom:14px; flex-wrap:wrap}
.section-head h2{font-family:var(--display); font-weight:500; font-size:1.7rem}
.section-head a{color:var(--gold); text-decoration:none; font-size:.92rem; font-weight:600}
.sample-note{font-size:.78rem; color:var(--soft); letter-spacing:.04em}

/* Offers (AI page) */
.offers{display:grid; grid-template-columns:repeat(auto-fit,minmax(300px,1fr)); gap:18px; padding-top:22px}
.offer{display:flex; flex-direction:column; gap:10px; min-width:0; padding:26px 0 0; border-top:2px solid var(--gold)}
.offer h3{font-family:var(--display); font-weight:500; font-size:1.4rem; line-height:1.2; text-wrap:balance}
.offer p{color:var(--soft); font-size:.98rem; max-width:46ch}

/* How I work */
.steps{display:grid; grid-template-columns:repeat(auto-fit,minmax(220px,1fr)); gap:18px; padding-top:22px}
.step{min-width:0}
.step .num{font-family:var(--display); color:var(--gold); font-size:2rem; line-height:1}
.step h3{font-family:var(--display); font-weight:500; font-size:1.2rem; margin-top:6px}
.step p{color:var(--soft); font-size:.95rem; margin-top:4px; max-width:40ch}

/* Projects */
.built-grid{display:grid; grid-template-columns:repeat(auto-fit,minmax(250px,1fr)); gap:16px; padding-top:22px}
.project{display:flex; flex-direction:column; gap:8px; min-width:0; background:var(--card); border:1px solid var(--line); border-radius:14px; padding:22px 22px 18px; text-decoration:none; color:var(--ink)}
.project:hover,.project:focus-visible{border-color:var(--gold)}
.project h3{font-family:var(--display); font-weight:500; font-size:1.25rem}
.project p{font-size:.92rem; color:var(--soft); max-width:44ch}
.project-link{margin-top:auto; padding-top:10px; font-size:.8rem; font-weight:600; color:var(--gold); letter-spacing:.03em}

/* Closing CTA */
.closing{background:var(--card); border:1px solid var(--line); border-radius:16px; padding:34px 30px; display:flex; flex-direction:column; gap:14px; align-items:flex-start; margin-bottom:64px}
.closing h2{font-family:var(--display); font-weight:500; font-size:1.7rem; text-wrap:balance}
.closing p{color:var(--soft); max-width:52ch}

/* Recently */
.note{display:flex; gap:18px; align-items:baseline; padding-block:20px; border-bottom:1px solid var(--line); flex-wrap:wrap}
.note:hover .note-title{color:var(--gold)}
.tag{font-size:.68rem; letter-spacing:.14em; text-transform:uppercase; font-weight:600; color:var(--sage); flex:0 0 96px}
.note-body{flex:1 1 240px; min-width:0}
.note-title{font-family:var(--display); font-size:1.18rem; font-weight:500; color:var(--ink); text-decoration:none; line-height:1.3}
.note-sub{font-size:.9rem; color:var(--soft); margin-top:4px; max-width:60ch}
.note-date{font-size:.8rem; color:var(--soft); flex:0 0 auto; font-variant-numeric:tabular-nums}
.all-notes{padding-top:18px}
.all-notes a{color:var(--gold); text-decoration:none; font-weight:600; font-size:.95rem}

/* Footer */
footer{border-top:1px solid var(--line); padding-block:34px 56px; display:flex; justify-content:space-between; gap:16px; flex-wrap:wrap; color:var(--soft); font-size:.9rem}
footer a{color:var(--gold); text-decoration:none; font-weight:600}


@media (max-width:560px){
  .hero{gap:26px; padding-block:40px 36px}
  .portrait{width:132px; height:132px}
  .tag{flex-basis:100%}
}
@media (prefers-reduced-motion: no-preference){
  .reveal{opacity:0; transform:translateY(14px); animation:rise .7s ease forwards}
  .reveal.d1{animation-delay:.08s}.reveal.d2{animation-delay:.16s}.reveal.d3{animation-delay:.24s}
  @keyframes rise{to{opacity:1; transform:none}}
}

/* Added in the Eleventy build */
.portrait img{width:100%; height:100%; border-radius:50%; object-fit:cover; display:block}
.hero .kicker + h1{margin-top:10px}
.hero-actions{margin-top:22px; display:flex; gap:12px; flex-wrap:wrap}
.empty{padding-block:20px; color:var(--soft)}
.page-head{padding-block:56px 28px}
.note-page{padding-block:56px 72px; max-width:68ch}
.note-page .meta{display:flex; gap:18px; align-items:baseline; flex-wrap:wrap; margin-bottom:14px}
.note-page h1{margin-bottom:28px}
.note-page .content > * + *{margin-top:1em}
.note-page .content a{color:var(--gold)}
.note-page .source{margin-top:40px; font-size:.9rem; color:var(--soft)}
.note-page .source a{color:var(--gold)}