/* TYNKIN — the reading experience. Design system per the Fable-5 vision (tynkin/VISION.md).
   North star: get out of the way of the words. Light = paper between the rides; dark = the night drive. */

:root{
  --paper:#FAF6EE;      /* warm off-white — paper, not gray */
  --ink:#25211B;        /* warm near-black, never #000 */
  --soft:#6E6557;       /* dates, metadata, footer */
  --hair:#E7DFCE;       /* rules, the route line */
  --accent:#A8542F;     /* terracotta / road-dust — the ONE accent */
  --measure:34em;       /* ~65ch — the single most important number here */
}
@media (prefers-color-scheme: dark){
  :root{ --paper:#181512; --ink:#E9E2D4; --soft:#9d9482; --hair:#332c23; --accent:#c9713f; }
}

*{ box-sizing:border-box }
html{ -webkit-text-size-adjust:100% }
body{
  margin:0; background:var(--paper); color:var(--ink);
  font-family:Charter,"Iowan Old Style",Georgia,"Times New Roman",serif;
  font-size:18px; line-height:1.7;
  -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
}
@media (min-width:700px){ body{ font-size:20px; line-height:1.75 } }

.wrap{ max-width:var(--measure); margin:0 auto; padding:1.25rem }
@media (min-width:700px){ .wrap{ padding:2.5rem 1.25rem 4rem } }

a{ color:inherit; text-decoration:none }
a:hover{ text-decoration:underline; text-decoration-color:var(--accent); text-underline-offset:3px }

/* ── masthead: a small literary journal's running head, not a logo shout ── */
.masthead{ text-align:center; padding:1.5rem 0 .25rem }
.masthead a{ font-size:clamp(0.525rem, 2.45vw, 1.1375rem); letter-spacing:.34em; text-transform:uppercase; color:var(--accent); font-weight:700 } /* running-head TYNKIN */
.masthead a:hover{ text-decoration:none; opacity:.75 }
.article-underline a, .prose a{ text-decoration:underline; text-decoration-color:var(--hair); text-underline-offset:2px }
/* homepage hero wordmark: BIG — ~4x the tagline; fluid so it never overflows the reading column. */
.masthead.hero{ padding:.25rem 0 0 }              /* the big wordmark carries its own weight — no running-head top pad */
.brand-h1{ margin:0; line-height:.92; padding:0 }
.brand-h1 a{ font-size:clamp(1.18rem, 5.49vw, 2.55rem); letter-spacing:.1em; color:var(--accent); font-weight:700 }
.tagline{ text-align:center; color:var(--soft); font-style:italic; font-size:clamp(.75rem, 3.4vw, 1.6rem); line-height:1.35; margin:.85rem 0 .5rem }

/* ── homepage: the tale index IS a route (a transit map of his stories) ── */
.route{ list-style:none; margin:2.5rem 0 0; padding:0; border-left:1px solid var(--hair) }
.stop{ position:relative; padding:0 0 2rem 1.6rem }
.stop::before{                      /* the dot on the line */
  content:""; position:absolute; left:-5px; top:.5rem; width:9px; height:9px; border-radius:50%;
  background:var(--paper); border:1.5px solid var(--soft);
}
.stop.latest::before{ background:var(--accent); border-color:var(--accent) } /* newest = filled */
.stop .date{ font-size:13px; color:var(--soft); letter-spacing:.02em }
.stop .title{ display:block; font-size:24px; line-height:1.25; margin:.15rem 0 .35rem; color:var(--ink) }
.stop .dek{ color:var(--soft); font-size:16px; line-height:1.5 }
.stop .voices{ font-size:13px; color:var(--soft); margin-top:.4rem }

/* ── a single tale ── */
.series{ text-align:center; font-size:12px; letter-spacing:.18em; text-transform:uppercase; color:var(--accent); margin:.75rem 0 .4rem }
.tale-title{ font-size:30px; line-height:1.2; text-align:center; margin:3.5rem 0 .8rem; font-weight:600 }
@media (min-width:700px){ .tale-title{ font-size:38px } }
.tale-subtitle{ text-align:center; color:var(--soft); font-style:italic; font-size:21px; line-height:1.3; margin:.1rem 0 .7rem }
@media (min-width:700px){ .tale-subtitle{ font-size:24px } }
.tale-meta{ text-align:center; color:var(--soft); font-size:14px; margin:0 0 2.2rem }

.tale{ }
.tale p{ margin:0 0 1.5rem; text-indent:0 }    /* ARTICLE paragraphs: clear space between, no indent (space OR indent, not both) */
.tale > p:first-of-type::first-letter{         /* drop cap, in the accent */
  float:left; font-size:3.1em; line-height:.82; padding:.02em .08em 0 0; color:var(--accent); font-weight:600;
}
.tale em{ font-style:italic }
.tale strong{ font-weight:600 }
.tale img{ max-width:100%; height:auto }
.tale-cover{ margin:0 0 3.6rem }
.tale-cover img{ display:block; width:100%; height:auto; border-radius:10px }
.tale blockquote{ margin:1.2rem 0; padding-left:1rem; border-left:2px solid var(--hair); color:var(--soft); font-style:italic }
.tale blockquote p{ text-indent:0 }

/* section break inside a tale: dots joined by a thin line, not *** */
.tale hr{ border:0; text-align:center; margin:1.8rem 0 }
.tale hr::before{ content:"·  —  ·  —  ·"; color:var(--hair); letter-spacing:.1em; font-size:16px }

/* ── the SEAM: the tale's closing question falls into the discussion as one motion ── */
.seam{ border-left:1px solid var(--hair); margin:2.4rem 0 0; padding:0 0 0 1.6rem; position:relative }
.seam::before{ content:""; position:absolute; left:-5px; top:.3rem; width:9px; height:9px; border-radius:50%; background:var(--accent); border:1.5px solid var(--accent) }
.question{ font-size:22px; line-height:1.4; color:var(--ink); margin:0 0 1.4rem; font-style:italic }
.turn h2{ font-size:13px; letter-spacing:.16em; text-transform:uppercase; color:var(--soft); margin:0 0 .6rem }
.turn .soon{ color:var(--soft); font-size:16px; line-height:1.55 }

/* subscribe — "save me a seat" */
.seat{ margin:2.8rem 0 0; padding:1.4rem 1.5rem; background:transparent; border:1px dashed var(--hair); border-radius:12px; text-align:center }
.seat p{ margin:0 0 .3rem; font-size:16px }
.seat .soon{ color:var(--soft); font-size:14px }

/* ── footer: the quiet dedication lives here ── */
/* share: pill buttons in the hairline + accent of the rest of the page. Bottom = icon and name; top = icons only. */
.share{ margin:2.6rem 0 0; text-align:center }
.share-h{ margin:0 0 .85rem; font-size:12px; letter-spacing:.18em; text-transform:uppercase; color:var(--accent) }
.share-row{ display:flex; flex-wrap:wrap; justify-content:center; gap:.55rem }
.sbtn{ display:inline-flex; align-items:center; gap:.5rem; padding:.6rem 1.05rem; border:1px solid color-mix(in srgb, var(--accent) 35%, var(--hair)); border-radius:999px;
  color:var(--ink); font-size:15px; line-height:1; text-decoration:none; transition:border-color .15s, color .15s, background-color .15s }
.sbtn svg{ width:17px; height:17px; flex:none; color:var(--accent) }
.sbtn:hover{ text-decoration:none; border-color:var(--accent); color:var(--accent); background:color-mix(in srgb, var(--accent) 8%, transparent) }
.sbtn:focus-visible{ outline:2px solid var(--accent); outline-offset:2px }
.share.top{ display:flex; align-items:center; justify-content:center; flex-wrap:wrap; gap:.45rem; margin:-1.1rem 0 2.2rem }
.share.top .share-h{ margin:0 .35rem 0 0 }
.share.top .sbtn{ width:38px; height:38px; padding:0; justify-content:center }
.share.top .sbtn span{ position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap }

/* ── comments: part of the tale, not a web widget ── */
.clist{ list-style:none; margin:1.3rem 0 0; padding:0 }
.citem{ margin:0 0 1.3rem; padding:0 0 1.3rem; border-bottom:1px solid var(--hair) }
.citem:last-child{ border-bottom:0 }
.cwho{ font-weight:600; font-size:15px; color:var(--ink) }
.ctext{ white-space:pre-wrap; color:var(--ink); font-size:16px; line-height:1.6; margin-top:.2rem }
/* the comment form: quiet and paper-toned, so writing a reply feels like adding a page to the tale */
.cform{ margin:2rem 0 0; display:flex; flex-direction:column; gap:1.1rem; max-width:30em }
.cform .cf{ display:flex; flex-direction:column; gap:.4rem; font-size:12px; letter-spacing:.14em; text-transform:uppercase; color:var(--soft) }
.cform input, .cform textarea{
  font-family:inherit; font-size:16px; letter-spacing:normal; text-transform:none; line-height:1.6;
  color:var(--ink); background:var(--paper); border:1px solid var(--hair); border-radius:10px; padding:.7rem .85rem;
  transition:border-color .15s ease, box-shadow .15s ease;
}
.cform input[name="name"]{ max-width:20em }
.cform input[name="email"]{ max-width:20em }
/* the writer's own turns, posted from /admin */
.citem.cauthor .cwho::after{ content:" · author"; color:var(--accent); font-weight:normal }
/* comment count beside each tale on the homepage, filled by functions/index.js */
.ccount:not(:empty){ display:block; margin-top:.3rem; font-size:13px; color:var(--soft) }
.cform input:hover, .cform textarea:hover{ border-color:var(--soft) }
.cform input:focus, .cform textarea:focus{
  outline:none; border-color:var(--accent);
  box-shadow:0 0 0 3px color-mix(in srgb, var(--accent) 20%, transparent);
}
.cform textarea{ resize:vertical; min-height:6.5em }
.cform button{
  align-self:flex-start; font-family:inherit; font-size:15px; font-weight:600; letter-spacing:.01em;
  color:var(--paper); background:var(--accent); border:0; border-radius:10px; padding:.68rem 1.5rem; cursor:pointer;
  transition:opacity .15s ease, transform .08s ease;
}
.cform button:hover{ opacity:.92 }
.cform button:active{ transform:translateY(1px) }
.cnote{ font-size:13px; font-style:italic; color:var(--soft); margin:.1rem 0 0 }
/* honeypot: off-screen (not display:none — some bots skip those), never shown to humans, never focused */
.hp{ position:absolute; left:-9999px; width:1px; height:1px; overflow:hidden }

/* subscribe box */
.ssub{ color:var(--soft); font-size:15px; margin:.2rem 0 .8rem }
.sform{ display:flex; gap:.5rem; flex-wrap:wrap; justify-content:center }
.sform input[type=email], .sform input[type=text]{ font:inherit; font-size:16px; color:var(--ink); background:var(--paper); border:1px solid var(--hair); border-radius:8px; padding:.55rem .7rem; min-width:14em; flex:1 1 14em }
.sform input:focus{ outline:2px solid var(--accent); outline-offset:1px; border-color:var(--accent) }
.sform button{ font:inherit; font-size:15px; color:var(--paper); background:var(--accent); border:0; border-radius:8px; padding:.55rem 1.2rem; cursor:pointer }
.sform button:hover{ opacity:.9 }
.ssmall{ font-size:12px; color:var(--soft); margin:.6rem 0 0 }
/* One-tap subscribe (Google, LinkedIn, Facebook, X) above the email form: the share pills, a line on what is
   taken, then a hairline "or with your email" divider into the form that was already there. */
.auth{ margin:.9rem 0 0 }
.auth-h{ margin:0 0 .7rem; font-size:12px; letter-spacing:.18em; text-transform:uppercase; color:var(--accent) }
.auth .ssmall{ margin:.7rem 0 0 }
.auth-or{ display:flex; align-items:center; gap:.8rem; margin:1.1rem 0 .9rem; font-size:13px; color:var(--soft) }
.auth-or::before, .auth-or::after{ content:""; flex:1; border-top:1px solid var(--hair) }
.seatpage .auth .share-row{ justify-content:flex-start }
.seatpage .auth-h{ font-size:13px }
.copyright{ margin-top:.8rem; font-size:12px; color:var(--soft); opacity:.85; max-width:34em; margin-left:auto; margin-right:auto; line-height:1.5 }
.foot{ margin:3.5rem 0 0; padding-top:1.4rem; border-top:1px solid var(--hair); text-align:center; color:var(--soft); font-size:13px; line-height:1.8 }
.foot .route-line{ letter-spacing:.15em; color:var(--soft) }
.foot .route-line .z{ color:var(--accent) }
.foot a{ color:var(--soft) } .foot a:hover{ color:var(--accent) }

/* about + plain pages */
.prose{ }
.prose p{ margin:0 0 1.1rem } .prose h1{ font-size:30px; margin:0 0 1rem } .prose em{ font-style:italic }

/* tip jar (2026-08-27) — the /support/ page's three destinations. Built from the existing button tokens
   (.cform button) rather than a new palette, so there is one accent on this site and it stays that way. */
.tips{ display:flex; flex-wrap:wrap; gap:.9rem; margin:1.8rem 0 .4rem }
.tip{
  display:flex; flex-direction:column; gap:.15rem; min-width:9.5em;
  font-family:inherit; text-decoration:none; color:var(--paper); background:var(--accent);
  border-radius:10px; padding:.7rem 1.4rem;
  transition:opacity .15s ease, transform .08s ease;
}
.tip:hover{ opacity:.92 }
.tip:active{ transform:translateY(1px) }
.tip-name{ font-size:15px; font-weight:600; letter-spacing:.01em }
.tip-sub{ font-size:12.5px; opacity:.85; letter-spacing:.02em }
/* .prose a underlines every link; these are buttons, so opt them out explicitly. */
.prose .tip{ text-decoration:none }
/* Zelle is not a button because it is not a link (see supportPage). It is an instruction, so it reads as one. */
.zelle{ margin-top:1.4rem; padding-left:.9rem; border-left:2px solid var(--hair) }

/* Top nav (2026-08-27). The site had none: About/Contact/Support lived only in the footer, below every tale,
   so a reader looking for a way to write to him had to scroll the whole page to find small grey type. Quiet
   enough not to compete with the words (VISION: get out of the way), present enough to be seen without
   scrolling. */
.topnav{ margin-top:.9rem; font-size:12.5px; letter-spacing:.08em; text-transform:uppercase; white-space:nowrap }
/* ⚠ THE SIZE MUST BE SET ON THE LINK, NOT THE CONTAINER, and it must out-specify `.masthead a`.
   `.masthead a` carries the TYNKIN WORDMARK's clamp(0.525rem, 2.45vw, 1.1375rem) and applies to EVERY <a>
   inside the masthead, nav items included, so they all computed to 18.2px while `.topnav{font-size}` sat
   there doing nothing. Caught 2026-08-29 only by reading getComputedStyle in a real browser after the
   chairman said he saw no change and was right. `.masthead .topnav a` is (0,2,1) and beats `.masthead a`
   at (0,1,1). */
.masthead .topnav a{ color:var(--accent); text-decoration:none; margin:0 .55rem; font-size:12.5px; font-weight:600 }
.masthead.hero .topnav a{ font-size:13px }
/* 2026-10-15, his ask: the nav was ink-black spaced capitals and "many people do not see it as links". Now it is
   the accent, the colour every link on the site already has, a touch heavier, with an underline on hover so the
   hand gets an answer. Still no pills or fills (his 2026-08-29 ruling on "Save me a seat" stands). */
.topnav a{ color:var(--accent); text-decoration:none; margin:0 .55rem }
.topnav a:first-child{ margin-left:0 }
.topnav a:hover, .masthead .topnav a:hover{ opacity:1; text-decoration:underline; text-decoration-thickness:1px; text-underline-offset:4px }
/* The site's share icons right under the nav (every page but a tale, which has its own row under its title). */
.masthead + .share.top{ margin:.9rem 0 1.6rem }
.masthead.hero + .share.top{ margin:1.1rem 0 1.4rem }

/* "Save me a seat" is a NAV ITEM LIKE ANY OTHER. It briefly had a pill border and an orange hover fill;
   the chairman removed both on 2026-08-29: "it has round border around it and orange background on a mouse
   hover...none or it is needed". It only needs not to wrap. */
.topnav a.nav-seat{ white-space:nowrap }

/* The seat page: the form is the point, so it gets room and a real target size. */
.seatpage .seat-lede{ font-size:1.15rem; color:var(--ink); margin-bottom:1.4rem }
.sform-big{ justify-content:flex-start; margin:.2rem 0 .5rem }
.sform-big input[type=email], .sform-big input[type=text]{ min-width:18em; padding:.75rem .9rem }
.sform-big button{ padding:.75rem 1.4rem; font-size:16px }

.masthead.hero .topnav{ margin-top:1.5rem; font-size:13px }
@media (max-width:560px){ .topnav{ letter-spacing:.04em; white-space:normal } .masthead .topnav a{ margin:0 .4rem; font-size:12px } .masthead.hero .topnav a{ font-size:12px } }

/* About-page portrait (2026-08-27). Floated so the opening paragraphs wrap around it rather than being pushed
   down the page; stacked above the text on a narrow screen where a float would squeeze the measure. */
.prose .portrait{ float:right; width:128px; height:128px; border-radius:50%; object-fit:cover;
  margin:.2rem 0 1rem 1.6rem; border:1px solid var(--hair) }
@media (max-width:560px){
  .prose .portrait{ float:none; display:block; margin:.4rem auto 1.4rem; width:132px; height:132px }
}

/* ── the novel draft reading page (2026-08-31) ───────────────────────────────
   Draft-only surface: /novel/trip-to-morocco/, emitted solely on an
   INCLUDE_DRAFTS build. Kept visually quieter than a published tale, because
   it IS quieter — unfinished work the author is reading to hear his own voice
   back, not a piece asking to be shared. */
.novel-kicker{font-size:.72rem;letter-spacing:.13em;text-transform:uppercase;
  opacity:.55;margin:0 0 .6rem}
.novel-note{font-size:.9rem;opacity:.65;font-style:italic;margin:.2rem 0 2.4rem;
  padding-bottom:1.4rem;border-bottom:1px solid rgba(0,0,0,.1)}
.novel .chapter{margin:0 0 3.2rem}
.novel .chapter + .chapter{padding-top:2.4rem;border-top:1px solid rgba(0,0,0,.08)}
/* The Serbian title above each chapter. It is the original's name and it stays
   visible: the English is a translation, and a translation that hides what it
   translated is pretending to be the thing itself. */
.ch-sr{font-size:.72rem;letter-spacing:.16em;text-transform:uppercase;opacity:.45;
  margin:0 0 .35rem}
.novel .chapter h1{margin-top:0}

/* His drawings, placed in the novel draft page by tynkin/novel/illustrations/placement.json.
   Grey pencil on white: they need air around them and a ceiling, or the big ones swamp a paragraph. */
.tale.novel img { display:block; margin:2.5rem auto; max-width:min(100%,520px); height:auto; }

/* next stop: the tale before and after this one */
.nextstop{ display:flex; justify-content:space-between; gap:1rem; margin:2.4rem 0 0; font-size:14px }
.nextstop a{ color:var(--accent); text-decoration:none; max-width:48% }
.nextstop a:last-child{ text-align:right }
.nextstop a:hover{ text-decoration:underline }