:root { --fg:#1a1a1a; --muted:#6b6b6b; --line:#d9d6cf; --bg:#fffefb; --link:#1a4fd6; --err:#b3261e; --ok:#1d6b34; }
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
body { margin: 0; background: var(--bg); color: var(--fg); font-family: Georgia, "Times New Roman", serif; }

/* Layout (patrickcollison.com-style): fixed narrow menu on the LEFT, plain text column to its right.
   Each section is its own page; the current page's link is marked server-side with .is-active.
   Collapses to a top row of links on small screens. */
#menu { position: fixed; top: 1.9rem; left: 1.5rem; width: 10.5rem; text-align: left;
  font-size: .95rem; line-height: 1.55; }               /* menu size unchanged from v3 */
#menu .title { display: block; font-weight: bold; margin-bottom: .35rem; cursor: default; color: var(--fg); }
#menu ul { list-style: none; margin: 0; padding: 0; }
#menu a { color: var(--link); text-decoration: none; }
#menu a:hover { text-decoration: underline; }
#menu a.is-active { color: var(--fg); font-weight: bold; text-decoration: underline; text-underline-offset: 3px; }

/* Main reading text: smaller + tighter than v3 (was 17px/1.6). */
main, footer { font-size: 15px; line-height: 1.5; max-width: 39em; margin-left: 14.5rem; margin-right: 1.5rem; }
main { padding-top: 1.75rem; }   /* aligns h1 with the menu's name */
h1 { font-size: 1.05em; font-weight: bold; margin: 0 0 .7em; line-height: 1.4; }
h2 { font-size: 1em; font-weight: bold; margin: 0 0 .8em; }
p { margin: 0 0 .75em; }
a { color: var(--link); text-underline-offset: 2px; }
a:hover { text-decoration-thickness: 2px; }
:focus-visible { outline: 2px solid var(--link); outline-offset: 2px; }
.list, .items { margin: 0 0 .75em; padding-left: 1.25em; }
.list li { margin: 0; }
.items li { margin: 0 0 .4em; }
.sub { margin-top: 1.6em; padding-top: 1.3em; border-top: 1px solid var(--line); scroll-margin-top: 1rem; }
.sub-title { color: var(--muted); font-style: italic; margin-top: -.35em; }
.soon { color: var(--muted); }

@media (max-width: 860px) {
  main, footer { max-width: 36rem; margin: 0 auto; padding: 0 1.25rem; }
  main { padding-top: 1rem; }
  #menu { position: static; width: auto; text-align: left; max-width: 36rem; margin: 0 auto;
    padding: 1.5rem 1.25rem .75rem; border-bottom: 1px solid var(--line); }
  #menu .title { font-size: 1.1rem; margin-bottom: .4rem; }
  #menu ul { display: flex; flex-wrap: wrap; gap: .15rem 1rem; }
}

form { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; }
.field { margin-bottom: .75em; }
label { display: block; font-size: .93em; margin-bottom: .25em; }
.hint { color: var(--muted); font-size: .9em; }
input, textarea { width: 100%; font: inherit; color: inherit; background: #fff;
  border: 1px solid #bdb9b0; border-radius: 3px; padding: .45em .6em; }
textarea { resize: vertical; min-height: 4em; }
input:focus, textarea:focus { outline: 2px solid var(--link); outline-offset: 0; border-color: var(--link); }
[aria-invalid="true"] { border-color: var(--err); }
.err { display: block; color: var(--err); font-size: .9em; margin-top: .2em; }
button { font: inherit; cursor: pointer; background: var(--fg); color: #fff; border: 1px solid var(--fg);
  border-radius: 3px; padding: .5em 1.15em; }
button:hover { background: #000; }
button[disabled] { opacity: .6; cursor: progress; }
.form-msg { margin: .6em 0 0; font-size: .95em; min-height: 1px; }
.form-msg:empty { margin: 0; }
.form-msg.is-ok { color: var(--ok); }
.form-msg.is-err { color: var(--err); }
.inline { display: flex; flex-wrap: wrap; gap: .5em; align-items: flex-start; }
.inline .field { flex: 1 1 14em; margin: 0; }
.inline .form-msg { flex-basis: 100%; margin-top: .2em; }
form.is-done .field, form.is-done button { display: none; }
/* Phones: keep inputs at 16px so iOS Safari doesn't zoom in on focus. */
@media (max-width: 860px) { input, textarea, button { font-size: 16px; } }

.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }

footer { margin-top: 2.5rem; padding-bottom: 2.5rem; color: var(--muted); font-size: 13px; }
footer p { margin: 0 0 .3em; }
footer a { color: var(--muted); }

/* v5: About / Tweets content */
.about h2 { margin: 1.2em 0 .6em; }
.tweets { list-style: none; margin: 0; padding: 0; }
.tweets li { margin: 0 0 1em; }
.tweets .handle { font-weight: bold; }

/* v6: Cigars list (compact) */
.cigars { margin: 0 0 .75em; padding-left: 2em; font-size: 14px; line-height: 1.35; }
.cigars li { margin: 0 0 .3em; padding-left: .15em; }

.portrait { display: block; width: 170px; height: 170px; aspect-ratio: 1 / 1; object-fit: cover; margin: 0 0 1.2em; }