/* billsimmons.net : the 2026-09 redesign: a publication first, a personal site second.
   Zero build, zero webfonts, zero tracking. System serif for reading, mono for meta.
   Pages still on the older look (book, bio, workshop) use style.css; this file is for
   index.html and writing/post.html. Fold the two together once the redesign is approved. */

:root{
  --bg:#faf8f4;
  --bg2:#f2efe8;
  --ink:#1b1a17;
  --muted:#5d5952;
  --faint:#8c877e;
  --line:#e2ddd3;
  --accent:#1f3d5c;
  --accent-ink:#152c43;
  --kicker:#a8460f;
  --field:#ffffff;
  --serif:"Iowan Old Style","Palatino Linotype",Palatino,"Book Antiqua",Georgia,"Times New Roman",serif;
  --sans:-apple-system,BlinkMacSystemFont,"Helvetica Neue",Helvetica,Arial,sans-serif;
  --small:-apple-system,BlinkMacSystemFont,"Helvetica Neue",Helvetica,Arial,sans-serif;
  --code:"SF Mono",SFMono-Regular,Menlo,Consolas,"Liberation Mono",monospace;
  --measure:700px;
  --wide:940px;
}

*{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{margin:0;background:var(--bg);color:var(--ink);font:18px/1.6 var(--serif);-webkit-font-smoothing:antialiased}
img{max-width:100%;height:auto}
a{color:var(--accent);text-decoration:none}
a:hover{color:var(--accent-ink);text-decoration:underline}
.page{max-width:var(--wide);margin:0 auto;padding:0 22px}
.narrow{max-width:var(--measure);margin-left:auto;margin-right:auto}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* ---- masthead (home): photo, name, positioning line, menu ---- */
.masthead{display:grid;grid-template-columns:124px 1fr auto;gap:22px 26px;align-items:center;padding:40px 0 26px;border-bottom:1px solid var(--line);position:relative}
.mast-photo{width:124px;height:auto;border-radius:8px;border:1px solid var(--line);display:block}
.masthead h1{font-size:2.3rem;font-weight:600;letter-spacing:-.018em;line-height:1.05;margin:0}
.masthead h1 a{color:var(--ink)}
.masthead h1 a:hover{text-decoration:none}
.idline{font-family:var(--small);font-size:.82rem;color:var(--faint);margin:8px 0 0;line-height:1.6}
.promise{font-size:1.15rem;line-height:1.5;color:var(--muted);max-width:640px;margin:12px 0 0}
.menu-btn{grid-column:3;justify-self:end;align-self:start;width:44px;height:44px;border:1px solid var(--line);border-radius:6px;background:var(--field);cursor:pointer;display:flex;flex-direction:column;justify-content:center;align-items:center;gap:5px;padding:0}
.menu-btn span{display:block;width:20px;height:2px;background:var(--ink);border-radius:1px}
.menu-btn:hover{border-color:var(--muted)}
.menu-btn[aria-expanded="true"] span:nth-child(1){transform:translateY(7px) rotate(45deg)}
.menu-btn[aria-expanded="true"] span:nth-child(2){opacity:0}
.menu-btn[aria-expanded="true"] span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}
.menu{position:absolute;right:0;top:92px;z-index:20;min-width:200px;background:var(--field);border:1px solid var(--line);border-radius:8px;box-shadow:0 12px 30px rgba(0,0,0,.10);padding:8px 0;font-family:var(--small);font-size:.95rem}
.menu a{display:block;padding:9px 18px;color:var(--ink)}
.menu a:hover{background:var(--bg2);text-decoration:none}
@media (max-width:600px){
  .masthead{grid-template-columns:1fr auto;gap:14px 12px;padding-top:26px}
  .mast-photo{grid-column:1;width:96px;height:auto}
  .menu-btn{grid-column:2;grid-row:1}
  .mast-text{grid-column:1 / -1}
  .masthead h1{font-size:1.9rem}
  .promise{font-size:1.05rem}
  .menu{top:80px}
}

/* ---- subscribe ---- */
form.subscribe{display:flex;flex-wrap:wrap;gap:8px;max-width:520px;margin:28px auto 0}
form.subscribe input[type=email]{flex:1 1 220px;min-width:0;font:16px var(--sans);padding:12px 14px;border:1px solid var(--line);border-radius:6px;background:var(--field);color:var(--ink)}
form.subscribe input[type=email]:focus{outline:2px solid var(--accent);outline-offset:0;border-color:var(--accent)}
form.subscribe button{font:600 15px var(--sans);padding:12px 20px;border:1px solid var(--accent);border-radius:6px;background:var(--accent);color:#fff;cursor:pointer;white-space:nowrap}
form.subscribe button:hover{background:var(--accent-ink);border-color:var(--accent-ink)}
.fine{font-family:var(--small);font-size:.74rem;line-height:1.6;color:var(--faint);margin:10px auto 0;max-width:520px}
.form-note{font-family:var(--small);font-size:.82rem;line-height:1.6;margin:10px auto 0;max-width:520px;color:var(--muted)}
.form-note.error{color:#a1301c}
.hp-field{display:none!important}

/* ---- the "now" panel ---- */
.now{margin:34px auto 0;max-width:var(--measure);padding:20px 24px;border:1px solid var(--line);border-left:3px solid var(--accent);border-radius:6px;background:var(--bg2)}
.kicker{font-family:var(--small);font-size:.74rem;font-weight:600;text-transform:uppercase;letter-spacing:.14em;color:var(--kicker);margin:0 0 8px}
.now-h{font-size:1.45rem;font-weight:600;letter-spacing:-.012em;line-height:1.2;margin:0 0 10px}
.now p{margin:0;font-size:1.02rem;line-height:1.6}
.now p.ask{margin-top:16px;font-weight:600}
.now form.subscribe{margin:12px 0 0;max-width:none}
.now .fine{margin-left:0;margin-right:0;max-width:none}
.now p+p{margin-top:.7em}

/* ---- sections ---- */
section{margin-top:52px;padding-top:34px;border-top:1px solid var(--line)}
section h2{font-size:1.5rem;font-weight:600;letter-spacing:-.012em;line-height:1.2;margin:0 0 6px}
.lede{color:var(--muted);font-size:1rem;margin:0 0 24px}
.lede a{text-decoration:underline;text-decoration-color:var(--line);text-underline-offset:3px}
.small{font-size:.94rem}
.muted{color:var(--muted)}
.note{font-family:var(--small);font-size:.76rem;color:var(--faint)}

/* ---- plain lists (building, speaking) ---- */
section .kicker{margin:18px 0 8px}
section .kicker:first-of-type{margin-top:0}
section .plist+.note{margin-top:4px;display:block}
.plist{margin:0;padding:0;list-style:none}
.plist li{margin:0 0 16px;font-size:1.02rem;line-height:1.6}
.plist strong{font-weight:600}
.plist .note{margin-left:2px}

/* ---- about ---- */
.about p{margin:.9em 0;font-size:1.02rem}
.about p:first-of-type{margin-top:0}

/* ---- post page ---- */
.bar{display:flex;justify-content:space-between;align-items:baseline;gap:16px;padding:28px 0 14px;border-bottom:1px solid var(--line)}
.wordmark{font-weight:600;color:var(--ink);font-size:1.12rem;letter-spacing:-.01em}
.wordmark:hover{text-decoration:none;color:var(--ink)}
.bar nav{font-family:var(--small);font-size:.78rem;color:var(--faint);text-align:right}
.bar nav a{margin-left:10px}
.back{font-family:var(--small);font-size:.78rem;display:inline-block;margin:28px 0 0}
.prose{max-width:var(--measure);margin:18px auto 0}
.prose h1{font-size:2.05rem;line-height:1.18;letter-spacing:-.018em;font-weight:600;margin:0 0 12px}
.prose h2{font-size:1.3rem;margin:1.6em 0 .4em}
.prose h3{font-size:1.1rem;margin:1.4em 0 .3em}
.prose p,.prose li{font-size:1.1rem;line-height:1.7}
.prose p{margin:1.05em 0}
.prose ul,.prose ol{padding-left:1.4em}
.prose blockquote{border-left:3px solid var(--line);margin:1.2em 0;padding:.1em 0 .1em 18px;color:var(--muted)}
.prose code{font-family:var(--code);font-size:.85em;background:var(--bg2);border:1px solid var(--line);border-radius:3px;padding:1px 5px}
.prose a{text-decoration:underline;text-decoration-color:var(--line);text-underline-offset:3px}
.prose a:hover{text-decoration-color:currentColor}
.postmeta{font-family:var(--small);font-size:.76rem;color:var(--faint);margin:0 0 30px}
figure.postimg{margin:1.8rem 0 0}
figure.postimg img{display:block;width:100%;height:auto;border:1px solid var(--line);border-radius:6px}
.related{margin-top:36px;padding-top:16px;border-top:1px solid var(--line)}
.related .note{margin:0 0 8px}
.after{max-width:var(--measure);margin:44px auto 0}
.after-line{font-size:.98rem;color:var(--muted);margin:0 0 6px}
.after-line a{text-decoration:underline;text-decoration-color:var(--line);text-underline-offset:3px}
.pager{display:flex;justify-content:space-between;gap:24px;margin-top:30px;font-size:.98rem;line-height:1.4}
.pager a{display:block;max-width:48%}
.pager .note{display:block;margin-bottom:3px}
.pager .next{text-align:right;margin-left:auto}

/* ---- footer ---- */
footer{margin:76px 0 48px;border-top:1px solid var(--line);padding-top:18px;font-family:var(--small);font-size:.76rem;color:var(--faint);line-height:1.8}
footer a{color:var(--faint);text-decoration:underline}
footer a:hover{color:var(--muted)}

/* ---- small screens ---- */
@media (max-width:600px){
  body{font-size:17px}
  .nameplate{padding-top:46px}
  .nameplate h1{font-size:2.15rem}
  .promise{font-size:1.1rem}
    .prose h1{font-size:1.7rem}
  .bar{flex-direction:column;align-items:flex-start;gap:8px}
  .bar nav{text-align:left}
  .bar nav a{margin:0 10px 0 0}
}


/* ---- writing: the home block and the archive page (2026-09) ----
   Appended after the page rules. Replaces .start and .cards, which are gone.
   Every class is prefixed w- so nothing above can collide with it. */

/* shared */
.w-date{font-family:var(--small);font-size:.74rem;color:var(--faint);white-space:nowrap}
.w-n{font-family:var(--small);font-size:.74rem;font-weight:400;letter-spacing:0;color:var(--faint);margin-left:6px}

/* home: the latest piece as one headline card. The picture is a supporting thumbnail:
   a fixed side column on wide screens, a small square beside the summary on phones. */
.w-latest{display:grid;grid-template-columns:minmax(0,1fr);grid-template-areas:"kicker" "head" "sum";align-items:start;margin:0 0 20px;padding:0 0 22px;border-bottom:1px solid var(--line)}
.w-latest:empty{display:none}
.w-latest.w-has-img{grid-template-columns:minmax(0,1fr) 176px;grid-template-rows:auto auto 1fr;grid-template-areas:"kicker img" "head img" "sum img";column-gap:30px}
.w-kicker{grid-area:kicker;font-family:var(--small);font-size:.72rem;text-transform:uppercase;letter-spacing:.09em;color:var(--accent);margin:0 0 10px}
.w-kicker time{color:var(--faint)}
.w-headline{grid-area:head;font-size:1.9rem;line-height:1.15;font-weight:600;letter-spacing:-.02em;margin:0 0 12px}
.w-headline a{color:var(--ink)}
.w-headline a:hover{color:var(--accent-ink);text-decoration:none}
.w-sum{grid-area:sum;margin:0;color:var(--muted);font-size:1.06rem;line-height:1.5;max-width:640px}
.w-latest-img{grid-area:img;display:block;width:176px;height:176px;margin-top:2px;border:1px solid var(--line);border-radius:6px;overflow:hidden;background:var(--bg2)}
.w-latest-img img{display:block;width:100%;height:100%;object-fit:cover;object-position:center top}

/* home: the next five as a tight list, then one line into the archive */
.w-list{list-style:none;margin:0;padding:0}
.w-list:empty{display:none}
.w-list li{display:grid;grid-template-columns:104px minmax(0,1fr);column-gap:14px;align-items:baseline;padding:9px 0;border-bottom:1px solid var(--line)}
.w-list li:last-child{border-bottom:0}
.w-list a{color:var(--ink);font-size:1.04rem;line-height:1.35}
.w-list a:hover{color:var(--accent-ink)}
.w-all{margin:16px 0 0;font-size:1.02rem}

/* archive page: /writing/ */
.w-archive{margin-top:30px}
.w-title{font-size:2.05rem;line-height:1.18;letter-spacing:-.018em;font-weight:600;margin:0 0 8px}
.w-lede{color:var(--muted);font-size:1.02rem;line-height:1.5;margin:0}
.w-lede a{text-decoration:underline;text-decoration-color:var(--line);text-underline-offset:3px}
.w-stats{font-family:var(--small);font-size:.74rem;color:var(--faint);margin:10px 0 0}
.w-stats:empty{display:none}
.w-jump{display:flex;flex-wrap:wrap;gap:6px 22px;margin:22px 0 0;padding:12px 0;border-top:1px solid var(--line);border-bottom:1px solid var(--line);font-family:var(--small);font-size:.78rem}
.w-jump:empty{display:none}
.w-jump .w-n{margin-left:5px}
.w-group{margin-top:40px;padding-top:0;border-top:0;scroll-margin-top:16px}
.w-group h2{font-size:1.32rem;font-weight:600;letter-spacing:-.012em;line-height:1.2;margin:0}
.w-desc{color:var(--muted);font-size:.98rem;line-height:1.5;margin:4px 0 0}
.w-rows{list-style:none;margin:14px 0 0;padding:0;border-top:1px solid var(--line)}
.w-row{display:grid;grid-template-columns:minmax(0,1fr);column-gap:18px;align-items:start;padding:14px 0;border-bottom:1px solid var(--line)}
.w-row.w-has-img{grid-template-columns:minmax(0,1fr) 72px}
.w-row h3{font-size:1.12rem;line-height:1.3;font-weight:600;letter-spacing:-.01em;margin:0 0 5px}
.w-row h3 a{color:var(--ink)}
.w-row h3 a:hover{color:var(--accent-ink)}
.w-row-line{margin:0;color:var(--muted);font-size:.94rem;line-height:1.5}
.w-row-line .w-date{margin-right:10px}
.w-thumb{display:block;width:72px;height:72px;border:1px solid var(--line);border-radius:6px;overflow:hidden;background:var(--bg2)}
.w-thumb img{display:block;width:100%;height:100%;object-fit:cover;object-position:center top}

@media (min-width:601px){
  .w-jump{position:sticky;top:0;z-index:2;background:var(--bg)}
  .w-group{scroll-margin-top:54px}
}
@media (max-width:600px){
  .w-latest.w-has-img{grid-template-columns:minmax(0,1fr) 88px;grid-template-rows:auto auto auto;grid-template-areas:"kicker kicker" "head head" "sum img";column-gap:16px}
  .w-latest-img{width:88px;height:88px}
  .w-headline{font-size:1.5rem}
  .w-sum{font-size:1rem}
  .w-list li{grid-template-columns:minmax(0,1fr);row-gap:2px}
  .w-title{font-size:1.7rem}
  .w-row.w-has-img{grid-template-columns:minmax(0,1fr) 64px;column-gap:14px}
  .w-thumb{width:64px;height:64px}
}

/* ---- the agency grammar: hero, problem, what, record ---- */
.hero{margin:34px 0 0;padding:26px 28px 24px;border:1px solid var(--line);border-left:4px solid var(--accent);border-radius:8px;background:var(--bg2)}
@media (max-width:600px){.hero{padding:20px 18px 18px}}
.hero .kicker{margin-bottom:10px}
.hero-h{font-size:2.15rem;line-height:1.12;letter-spacing:-.02em;font-weight:600;margin:0 0 14px}
.hero-p{font-size:1.12rem;line-height:1.55;color:var(--muted);margin:0}
.hero .ask{margin:22px 0 0;font-weight:600;font-size:1.02rem;line-height:1.5}
.hero form.subscribe{margin:12px 0 0;max-width:none}
.hero .fine{margin-left:0;margin-right:0;max-width:none}
section.agency{margin-top:52px;padding-top:34px;border-top:1px solid var(--line)}
section.agency .kicker{margin-bottom:8px}
section.agency h2{font-size:1.5rem;margin-bottom:18px}
.grid3{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:18px}
.grid3 li{border:1px solid var(--line);border-radius:6px;background:var(--bg2);padding:18px 20px 16px}
.grid3 h3{font-size:1.1rem;line-height:1.3;font-weight:600;letter-spacing:-.01em;margin:0 0 8px}
.grid3 p{margin:0;font-size:.96rem;line-height:1.55;color:var(--muted)}
#what .grid3 h3{font-family:var(--small);font-size:.78rem;text-transform:uppercase;letter-spacing:.09em;color:var(--accent);margin-bottom:10px}
#what .grid3 p{color:var(--ink);font-size:1rem}
.who{margin:22px 0 0;font-size:1.02rem;line-height:1.6}
.numbers{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(auto-fit,minmax(170px,1fr));gap:16px}
.numbers.mini{margin:14px 0 4px;gap:14px;grid-template-columns:repeat(auto-fit,minmax(150px,1fr))}
.numbers.mini .num{font-size:1.3rem}
.numbers.mini .lab{font-size:.84rem}
.numbers.mini li{border-top-width:1px;border-top-color:var(--line);padding-top:8px}
.numbers li{border-top:2px solid var(--accent);padding-top:10px}
.numbers .num{display:block;font-size:1.7rem;font-weight:600;letter-spacing:-.02em;line-height:1.1}
.numbers .lab{display:block;font-size:.9rem;line-height:1.45;color:var(--muted);margin-top:6px}
@media (max-width:600px){.hero-h{font-size:1.65rem}.numbers .num{font-size:1.45rem}}