/* chris.ws - one stylesheet for every page except /guidance/ (which has its own).
   Layout: quiet single column; three doors; stream below.
   Spacing follows one scale: 8 / 16 / 24 / 32 / 48 / 72 / 96. */
: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;
  /* Gold for text and small marks. #C8921E is too light to read on paper, so light mode
     uses the deep gold already in the Honey set (#8E6410, from /guidance/). */
  --gold-text:#8E6410;
  /* Text on gold buttons: always dark ink, in both themes. */
  --on-gold:#1F2430;
  --rule:color-mix(in srgb, var(--ink) 16%, transparent);
  --display:"Fraunces", Georgia, serif;
  --body:"Albert Sans", -apple-system, "Segoe UI", sans-serif;
  --section:72px;
}
@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; --gold-text:#E0AE45; color-scheme:dark;
  }
}
:root[data-theme="dark"]{
  --paper:#141820; --ink:#E9EAE4; --moss:#A9C4DF; --gold:#E0AE45; --sage:#8FA3B8;
  --line:#2A3140; --card:#1B2130; --soft:#9AA3B2; --gold-text:#E0AE45; 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;
  -webkit-font-smoothing:antialiased;
  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}
:focus-visible{outline:2px solid var(--gold-text); outline-offset:3px; border-radius:6px}

/* Quiet links: ink text, gold underline. Used for small text links site-wide. */
.section-head a, .all-notes a, footer a, .note-page .content a, .note-page .source a{
  color:var(--ink); text-decoration:underline; text-decoration-color:var(--gold);
  text-decoration-thickness:1.5px; text-underline-offset:4px; font-weight:500;
}
.section-head a:hover, .all-notes a:hover, footer a:hover, .note-page .content a:hover, .note-page .source a:hover{color:var(--gold-text)}

/* Nav */
nav{display:flex; align-items:center; justify-content:space-between; gap:12px 24px; padding-block:28px 0; flex-wrap:wrap}
.wordmark{font-family:var(--display); font-weight:600; font-size:1.25rem; color:var(--ink); text-decoration:none; letter-spacing:-.01em}
.wordmark span{color:var(--gold-text)}
nav ul{display:flex; gap:24px; list-style:none; padding:0; flex-wrap:wrap; align-items:center}
nav ul a{color:var(--ink); text-decoration:none; font-size:.94rem; padding-block:4px;
  text-decoration-line:underline; text-decoration-color:transparent; text-decoration-thickness:1.5px; text-underline-offset:6px;
  transition:text-decoration-color .15s ease}
nav ul a:hover, nav ul a[aria-current]{text-decoration-color:var(--gold)}
.theme-toggle{
  background:transparent; border:1px solid var(--rule); color:var(--ink);
  width:36px; height:36px; border-radius:50%; cursor:pointer;
  display:inline-flex; align-items:center; justify-content:center;
  transition:border-color .15s ease, color .15s ease;
}
.theme-toggle:hover{border-color:var(--gold); color:var(--gold-text)}
.theme-toggle:focus-visible{border-radius:50%}
.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: portrait ring and text share a bottom line (the last line of the greeting). */
.hero{display:grid; grid-template-columns:168px minmax(0,1fr); gap:48px; align-items:end; padding-block:96px var(--section)}
.portrait{width:168px; height:168px; border-radius:50%; border:2px solid var(--gold); padding:6px; margin-bottom:6px}
.portrait img{width:100%; height:100%; border-radius:50%; object-fit:cover; display:block}
.hero-text{min-width:0}
h1{font-family:var(--display); font-weight:400; font-size:clamp(2.4rem,6vw,3.4rem); line-height:1.08; letter-spacing:-.015em; text-wrap:balance; color:var(--ink)}
.hello{margin-top:16px; max-width:54ch; font-size:1.08rem; line-height:1.65; text-wrap:pretty}
.hello em{font-style:normal; color:var(--gold-text)}
.hero.page{display:block; padding-block:88px var(--section)}
.hero.page .hello{font-size:1.12rem; margin-top:20px}
.kicker{display:block; font-size:.9rem; font-weight:500; color:var(--gold-text); letter-spacing:.01em}
.hero .kicker + h1{margin-top:12px}
.hero-actions{margin-top:32px; display:flex; gap:12px; flex-wrap:wrap}

/* Buttons */
.btn{
  display:inline-flex; align-items:center; justify-content:center; min-height:44px;
  text-decoration:none; font-family:var(--body); font-weight:600; font-size:.95rem; line-height:1.2;
  padding:11px 22px; border-radius:999px; cursor:pointer;
  background:var(--moss); color:var(--paper); border:1px solid var(--moss);
  transition:background-color .15s ease, border-color .15s ease, filter .15s ease;
}
.btn:hover{filter:brightness(.93)}
.btn.ghost{background:transparent; color:var(--ink); border-color:var(--rule)}
.btn.ghost:hover{filter:none; border-color:var(--gold); background:color-mix(in srgb, var(--gold) 8%, transparent)}
.btn.accent{background:var(--gold); border-color:var(--gold); color:var(--on-gold)}
:root[data-theme="dark"] .btn:hover{filter:brightness(1.08)}
@media (prefers-color-scheme: dark){ :root:not([data-theme="light"]) .btn:hover{filter:brightness(1.08)} }
:root[data-theme="dark"] .btn.ghost:hover{filter:none}
@media (prefers-color-scheme: dark){ :root:not([data-theme="light"]) .btn.ghost:hover{filter:none} }

/* Doors: three equals. Same padding, same heading size, buttons on one line at the bottom. */
.doors{display:grid; grid-template-columns:repeat(3, minmax(0,1fr)); gap:20px; padding-block:0 var(--section)}
.door{background:var(--card); border:1px solid var(--line); border-radius:16px; padding:32px 28px 28px; display:flex; flex-direction:column; min-width:0}
.door .kicker{margin-bottom:8px}
.door h2{font-family:var(--display); font-weight:400; font-size:1.75rem; line-height:1.15; letter-spacing:-.01em}
.door p{color:var(--soft); font-size:.98rem; line-height:1.6; margin-top:12px}
.door .cta{margin-top:auto; padding-top:28px}

/* Sections */
.section{padding-block:0 var(--section)}
.section-head{display:flex; align-items:baseline; justify-content:space-between; gap:16px; border-bottom:1px solid var(--line); padding-bottom:16px; flex-wrap:wrap}
.section-head h2{font-family:var(--display); font-weight:400; font-size:1.875rem; line-height:1.2; letter-spacing:-.01em}
.section-head a{font-size:.92rem}

/* Offers and steps (AI page) share one rhythm: 32px under the head, 24px to the title,
   12px to the text, 48px between rows. Offers carry a gold rule, so their head drops its own. */
#offers .section-head{border-bottom:0; padding-bottom:0}
.offers{display:grid; grid-template-columns:repeat(2, minmax(0,1fr)); gap:48px 40px; padding-top:32px}
.offer{min-width:0; padding-top:24px; border-top:2px solid var(--gold)}
.offer h3{font-family:var(--display); font-weight:400; font-size:1.4rem; line-height:1.25; text-wrap:balance}
.offer p{color:var(--soft); font-size:.98rem; line-height:1.6; margin-top:12px; max-width:46ch}

.steps{display:grid; grid-template-columns:repeat(3, minmax(0,1fr)); gap:48px 40px; padding-top:32px}
.step{min-width:0}
.step .num{font-family:var(--display); color:var(--gold-text); font-size:1.4rem; line-height:1.25}
.step h3{font-family:var(--display); font-weight:400; font-size:1.4rem; line-height:1.25; margin-top:4px}
.step p{color:var(--soft); font-size:.98rem; line-height:1.6; margin-top:12px; max-width:40ch}

/* Projects */
.built-grid{display:grid; grid-template-columns:repeat(auto-fit,minmax(250px,1fr)); gap:16px; padding-top:32px}
.project{display:flex; flex-direction:column; min-width:0; background:var(--card); border:1px solid var(--line); border-radius:16px; padding:24px 24px 20px; text-decoration:none; color:var(--ink); transition:border-color .15s ease}
.project:hover{border-color:var(--gold)}
.project h3{font-family:var(--display); font-weight:400; font-size:1.3rem; line-height:1.25}
.project p{font-size:.92rem; line-height:1.55; color:var(--soft); margin-top:8px; max-width:44ch}
.project-link{margin-top:auto; padding-top:16px; font-size:.85rem; font-weight:500; color:var(--gold-text)}

/* Closing (AI page): a landing, not a card. Open space, a short gold rule, larger type. */
.closing{padding-block:24px 96px; display:flex; flex-direction:column; align-items:flex-start}
.closing::before{content:""; width:48px; height:2px; background:var(--gold); margin-bottom:32px}
.closing h2{font-family:var(--display); font-weight:400; font-size:clamp(1.9rem,4.4vw,2.6rem); line-height:1.15; letter-spacing:-.015em; text-wrap:balance; max-width:22ch}
.closing p{color:var(--soft); font-size:1.08rem; max-width:52ch; margin-top:16px}
.closing .btn{margin-top:32px}

/* Notes list */
.note{display:flex; gap:8px 24px; align-items:baseline; padding-block:20px; border-bottom:1px solid var(--line); flex-wrap:wrap}
.note:hover .note-title{color:var(--gold-text)}
.tag{font-size:.7rem; letter-spacing:.12em; text-transform:uppercase; font-weight:600; color:var(--soft); flex:0 0 96px}
.note-body{flex:1 1 240px; min-width:0}
.note-title{font-family:var(--display); font-size:1.2rem; font-weight:400; color:var(--ink); text-decoration:none; line-height:1.3}
.note-sub{font-size:.92rem; color:var(--soft); margin-top:4px; max-width:60ch}
.note-date{font-size:.82rem; color:var(--soft); flex:0 0 auto; font-variant-numeric:tabular-nums}
.all-notes{padding-top:24px}
.all-notes a{font-size:.95rem}
.empty{padding-block:24px; color:var(--soft)}
.page-head{padding-block:72px var(--section)}

/* Notes list pages (/notes/, category, tag) */
.notes-list .section-head h1{font-family:var(--display); font-weight:400; font-size:clamp(2rem,5vw,2.6rem); line-height:1.15; letter-spacing:-.015em}
.list-intro{color:var(--soft); font-size:1.05rem; max-width:52ch; padding-top:20px}

/* Single note. Running text stays at a readable 68 characters. */
.note-page{padding-block:72px var(--section); max-width:68ch}
.note-page h1{text-wrap:balance}
.note-page .meta{display:flex; gap:8px 10px; align-items:baseline; flex-wrap:wrap; margin-top:20px; padding-bottom:28px; border-bottom:1px solid var(--line); font-size:.88rem; color:var(--soft); font-variant-numeric:tabular-nums}
.note-page .meta a{color:var(--soft); text-decoration:none}
.note-page .meta a:hover{color:var(--gold-text)}
.meta-cat{font-size:.7rem; letter-spacing:.12em; text-transform:uppercase; font-weight:600}
.note-page .meta .dot{color:var(--sage)}
.note-tags{list-style:none; margin:0; padding:0; display:inline-flex; flex-wrap:wrap; gap:6px}
.note-tags li{list-style:none; margin:0; padding:0}
.note-page .meta .note-tags a{display:inline-block; font-size:.8rem; line-height:1.4; padding:2px 10px; border:1px solid var(--line); border-radius:999px; color:var(--soft)}
.note-page .meta .note-tags a:hover{border-color:var(--gold); color:var(--gold-text)}
.note-page .content{padding-top:32px}
.note-page .content > * + *{margin-top:1.1em}
.note-page .content h2, .note-page .content h3, .note-page .content h4{font-family:var(--display); font-weight:400; line-height:1.25; letter-spacing:-.01em; text-wrap:balance}
.note-page .content h2{font-size:1.6rem; margin-top:2em}
.note-page .content h3{font-size:1.3rem; margin-top:1.8em}
.note-page .content h4{font-size:1.1rem; margin-top:1.6em}
.note-page .content :is(h2,h3,h4) + *{margin-top:.6em}
.note-page .content strong{font-weight:600}
.note-page .content ul, .note-page .content ol{padding-left:1.4em}
.note-page .content li + li{margin-top:.4em}
.note-page .content li::marker{color:var(--gold-text)}
.note-page .content blockquote{border-left:2px solid var(--gold); padding:2px 0 2px 20px; font-family:var(--display); font-size:1.15rem; line-height:1.55; color:var(--ink)}
.note-page .content blockquote > * + *{margin-top:.8em}
.note-page .content hr{border:0; border-top:1px solid var(--line); margin-block:2em}
.note-page .content code{font-size:.9em; background:var(--card); border:1px solid var(--line); border-radius:4px; padding:1px 5px}
.note-page .content img{max-width:100%; height:auto; border-radius:8px}
.note-page .source{margin-top:48px; font-size:.9rem; color:var(--soft)}
.note-page .all-notes{padding-top:40px}
.note-nav{display:grid; grid-template-columns:repeat(2, minmax(0,1fr)); gap:20px; margin-top:32px; padding-top:24px; border-top:1px solid var(--line)}
.note-nav a{display:flex; flex-direction:column; gap:4px; font-family:var(--display); font-size:1.1rem; line-height:1.3; color:var(--ink); text-decoration:none; min-width:0}
.note-nav a span{font-family:var(--body); font-size:.82rem; color:var(--soft)}
.note-nav a:hover{color:var(--gold-text)}
.note-nav .next{grid-column:2; text-align:right}

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

/* Tablet: doors and steps stack, offers stay two-up until phone width. */
@media (max-width:760px){
  .doors{grid-template-columns:1fr; gap:16px}
  .steps{grid-template-columns:1fr; gap:32px}
}
@media (max-width:560px){
  :root{--section:56px}
  nav{padding-top:20px}
  nav ul{gap:18px}
  .hero{grid-template-columns:1fr; gap:28px; padding-top:48px; align-items:start}
  .portrait{width:120px; height:120px; padding:5px; margin:0}
  .hero.page{padding-top:56px}
  .door{padding:28px 24px 24px}
  .door .cta{padding-top:24px}
  .offers{grid-template-columns:1fr; gap:32px}
  .closing{padding-bottom:72px}
  .tag{flex-basis:100%}
  .note-page{padding-top:48px}
  .note-nav{grid-template-columns:1fr}
  .note-nav .next{grid-column:1; text-align:left}
}

/* One entrance on load, nothing on scroll. */
@media (prefers-reduced-motion: no-preference){
  .reveal{opacity:0; transform:translateY(10px); animation:rise .6s ease forwards}
  .reveal.d1{animation-delay:.06s}.reveal.d2{animation-delay:.12s}.reveal.d3{animation-delay:.18s}
  @keyframes rise{to{opacity:1; transform:none}}
}