/* paper.css: one palette for every page on hmaxmiller.com.
   Load it after a page's own <style> so these tokens win.
   The rule: gold where you meet Harrison (the homepage hero, the end of a piece,
   contact); cream where you read. Type is near-black, never ink-brown. */
:root{
  --bg:#FBF9F5; --bg-2:#F3F0EA; --surface:#FFFFFF; --rule:#E3DDD5;
  --ink:#1C1917; --read:#26221E; --soft:#3F3A35; --mute:#5C554E;
  --accent:#A4471F; --accent-ink:#8B320B; --on-ink:#FBF9F5; --stat:#1C1917; --tint:rgba(28,25,23,.06);
  --glow:rgba(255,250,236,.9);
  --paper-gold:#F5EBD6; --paper-band:#EFE0C0; --paper-end:#F5EBD6;
}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]){
  --bg:#1B1410; --bg-2:#241A13; --surface:#251C16; --rule:#43352B;
  --ink:#F7F1EA; --read:#E8E0D6; --soft:#D4CBC0; --mute:#B8AEA2;
  --accent:#E3895A; --accent-ink:#EE9C70; --on-ink:#1B1410; --stat:#F7F1EA; --tint:rgba(247,241,234,.08);
  --glow:rgba(201,151,82,.14);
  --paper-gold:#1B1410; --paper-band:#241A13; --paper-end:#241910}}
:root[data-theme="dark"]{
  --bg:#1B1410; --bg-2:#241A13; --surface:#251C16; --rule:#43352B;
  --ink:#F7F1EA; --read:#E8E0D6; --soft:#D4CBC0; --mute:#B8AEA2;
  --accent:#E3895A; --accent-ink:#EE9C70; --on-ink:#1B1410; --stat:#F7F1EA; --tint:rgba(247,241,234,.08);
  --glow:rgba(201,151,82,.14);
  --paper-gold:#1B1410; --paper-band:#241A13; --paper-end:#241910}
html{background-color:var(--bg)}

/* header: wraps instead of running off the screen at large text sizes */
.top{flex-wrap:wrap; row-gap:.7rem}
.name{white-space:normal; min-width:0}
.top nav{flex-wrap:wrap; row-gap:.5rem}
@media (pointer:coarse){ .theme{width:2.75rem; height:2.75rem} .top nav a.pill{padding:.55rem 1.1rem} }

/* homepage: gold hero settles into cream, then ripens back to gold at contact.
   Each layer is anchored (top 64rem, bottom 36rem), so it holds at any page height. */
body.home{
  background-color:var(--bg);
  background-image:
    radial-gradient(58rem 32rem at 8% 0%, var(--glow), transparent 70%),
    linear-gradient(180deg, var(--paper-gold) 0, var(--paper-band) 26rem, var(--bg) 64rem),
    linear-gradient(180deg, var(--bg) 0, var(--paper-end) 100%);
  background-size:100% 64rem, 100% 64rem, 100% 36rem;
  background-position:0 0, 0 0, 0 100%;
  background-repeat:no-repeat;
}
body.home .story .body, body.home .contact .lede{color:var(--read)}
@media (prefers-contrast:more){ body.home{background-image:none} }

/* long words and grids never push past the screen, even at 200% text */
.quotes, .quotes > *, .quotes figure, .stall article, .case, .record > *{min-width:0}
blockquote, .case p, .stall p{overflow-wrap:break-word; hyphens:auto}
.flow .st{flex-wrap:wrap; max-width:100%}
.contact > *, .hero > *{min-width:0}
h1, h2, h3{overflow-wrap:break-word; hyphens:auto}

/* skip link, same on every page */
.skip{position:absolute; left:1rem; top:-4rem; z-index:10; background:var(--ink); color:var(--on-ink); font-family:var(--sans); font-size:1rem; padding:.6rem 1rem; border-radius:8px; text-decoration:none}
.skip:focus{top:1rem}

/* homepage: writing */
.posts{display:grid; gap:clamp(1rem,2.5vw,1.6rem); max-width:46rem}
.post{position:relative; background:var(--surface); border:1px solid var(--rule); border-radius:14px; padding:clamp(1.4rem,2.6vw,1.9rem); transition:border-color .15s}
.post:hover{border-color:var(--soft)}
.post-meta{display:flex; flex-wrap:wrap; align-items:baseline; gap:.3rem 1rem; margin:0 0 .7rem; font-family:var(--sans); font-size:.94rem; color:var(--mute)}
.post-meta .tag{font-family:var(--type); font-size:.9rem; color:var(--accent-ink)}
.post h3{font-size:clamp(1.3rem,2.4vw,1.6rem); line-height:1.25; margin:0 0 .6rem}
.post h3 a{color:var(--ink); text-decoration:none}
.post h3 a::after{content:""; position:absolute; inset:0; border-radius:14px}
.post h3 a:focus-visible{outline:none}
.post:has(a:focus-visible){outline:2px solid var(--accent); outline-offset:3px}
.post p{margin:0; color:var(--soft)}
.post .post-go{margin-top:1.1rem; font-family:var(--sans); font-weight:500; font-size:.98rem; color:var(--accent-ink)}
.post .post-go span{display:inline-block; transition:transform .15s}
.post:hover .post-go span{transform:translateX(3px)}
@media (prefers-reduced-motion:reduce){ .post .post-go span{transition:none} }

/* homepage: track record labels line up across a row, whatever the caption length */
body.home .record > div{display:flex; flex-direction:column}
body.home .record .co{margin-top:auto}
body.home .record .what{margin-bottom:.9rem}

/* articles: long source titles and repo paths break instead of running off the page */
.fine li, .fine a{overflow-wrap:anywhere}

/* article eyebrow (Explainer, Analysis): terracotta, like the matching tag on the homepage post card.
   The homepage hero eyebrow stays grey because the hero already spends its terracotta. */
.article .eyebrow{color:var(--accent-ink)}