/* =====================================================================
   OneDollar Sites - screen.css
   The public publishing theme for the OneDollar suite (Ghost 5.x).
   Design language: "OS direction" + "Expensive Editorial".
   Warm-paper canvas, Fraunces display, Inter body, JetBrains Mono labels.
   Sites identity = the cyan --g-sites gradient (flooding the header band),
   accent #1f8fe0, on-gradient text #04293a.

   This is the design's "PUBLIC SITE" <style> block (from OneDollar Sites.html)
   ported back, with the demo `.site-stage` prefix stripped and its base rules
   moved onto the real document so the page itself scrolls. No build step.
   ===================================================================== */

/* ---------------------------------------------------------------------
   1. TOKENS  (verbatim from OneDollar Sites.html :root, Sites bound)
   --------------------------------------------------------------------- */
:root {
  --canvas:#eceae6; --surface:#ffffff; --ink:#0a0a0a; --ink-2:#5a5a57;
  --muted:#9a9a98; --muted-2:#c9c8c4; --hair:#ececec; --hair-2:#e0e0dd; --soft:#faf9f7;

  --font-sans:'Inter',system-ui,-apple-system,"Segoe UI",sans-serif;
  --font-serif:'Fraunces',Georgia,"Times New Roman",serif;
  --font-mono:'JetBrains Mono',ui-monospace,"SF Mono",Menlo,monospace;

  /* Sites identity (cyan) */
  --g-sites:radial-gradient(circle at 84% 12%,#caf6ff 0%,transparent 54%),linear-gradient(120deg,#4facfe 0%,#00e1f0 100%);
  --accent:#1f8fe0; --accent-2:#1573bd; --accent-soft:#e4f1fc; --fg:#04293a;

  --pos:#16894a; --neg:#d23b3b; --warn:#b9791a;

  --wrap:1180px; --wrap-narrow:720px; --wrap-wide:1100px;
}

/* ---------------------------------------------------------------------
   2. BASE  (the demo's .site-stage rules live on the real document here)
   --------------------------------------------------------------------- */
*,*::before,*::after { box-sizing:border-box; }
html { -webkit-text-size-adjust:100%; scroll-behavior:smooth; }
body {
  margin:0;
  background:var(--canvas); color:var(--ink);
  font-family:var(--font-sans); font-size:18px; line-height:1.6;
  -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
  background-image:radial-gradient(circle at 1px 1px,rgba(10,10,10,.045) 1px,transparent 0);
  background-size:22px 22px;
}
img { max-width:100%; height:auto; display:block; }
a { color:var(--accent); text-decoration:none; }
a:hover { text-decoration:underline; }
h1,h2,h3,h4 { font-family:var(--font-serif); letter-spacing:-.015em; font-weight:500; line-height:1.12; margin:0 0 .4em; color:var(--ink); }
p { margin:0 0 1em; }
::selection { background:var(--ink); color:#fff; }
:focus-visible { outline:2px solid var(--accent); outline-offset:2px; }
button { font-family:inherit; }
::-webkit-scrollbar { width:10px; height:10px; }
::-webkit-scrollbar-thumb { background:#e3e3e0; border:3px solid var(--surface); border-radius:99px; }

/* ---------------------------------------------------------------------
   3. SHARED UTILITIES (OneDollar)
   --------------------------------------------------------------------- */
.wrap { width:100%; max-width:var(--wrap); margin-inline:auto; padding-inline:clamp(20px,5vw,48px); }
.wrap--narrow { max-width:var(--wrap-narrow); }
.wrap--wide { max-width:var(--wrap-wide); }

.od-serif { font-family:var(--font-serif); }
.od-mono  { font-family:var(--font-mono); }
.od-label { font-family:var(--font-mono); font-size:11px; font-weight:500; letter-spacing:.14em; text-transform:uppercase; color:var(--muted); }
.od-label a { color:inherit; text-decoration:none; }
.od-gradient { background:var(--g-sites); color:var(--fg); }
.od-card { background:var(--surface); border:1px solid var(--hair); border-radius:14px; box-shadow:0 1px 3px rgba(10,10,10,.07); }
.dot { color:var(--muted-2); margin-inline:.5em; }

.od-pill {
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  background:var(--surface); border:1px solid var(--hair-2); border-radius:999px;
  padding:11px 22px; font-family:var(--font-sans); font-weight:600; font-size:12px;
  letter-spacing:.04em; text-transform:uppercase; white-space:nowrap; color:var(--ink);
  cursor:pointer; transition:transform .13s,box-shadow .13s,background .13s;
}
.od-pill:hover { transform:translateY(-1px); box-shadow:0 6px 18px rgba(10,10,10,.12); text-decoration:none; }
.od-pill--ink    { background:var(--ink); border-color:transparent; color:#fff; }
.od-pill--accent { background:var(--accent); border-color:transparent; color:#fff; }
.od-pill.is-disabled { opacity:.4; pointer-events:none; }

.od-mark {
  display:inline-flex; align-items:center; justify-content:center;
  width:36px; height:36px; border-radius:50%; flex:0 0 auto;
  background:var(--ink); color:#fff; font-family:var(--font-mono); font-weight:700; font-size:13px;
}

/* ---------------------------------------------------------------------
   4. HEADER  (gradient Sites band)
   --------------------------------------------------------------------- */
.site-header { background:var(--g-sites); color:var(--fg); position:sticky; top:0; z-index:40; box-shadow:0 1px 0 rgba(4,41,58,.08); }
body.minimal-header .site-header { background:var(--surface); color:var(--ink); border-bottom:1px solid var(--hair-2); }
.site-header__inner { display:flex; align-items:center; justify-content:space-between; min-height:72px; gap:24px; }

.lockup { display:inline-flex; align-items:center; gap:12px; color:inherit; }
.lockup:hover { text-decoration:none; }
.lockup__words { display:flex; align-items:baseline; gap:8px; line-height:1; }
.lockup__brand { font-family:var(--font-mono); font-weight:700; font-size:18px; letter-spacing:-.01em; }
.lockup__brand .ink { color:var(--fg); }
.lockup__brand .muted { color:rgba(4,41,58,.55); }
.lockup__app { font-family:var(--font-mono); font-weight:500; font-size:11px; letter-spacing:.14em; text-transform:uppercase; color:var(--fg); border:1px solid rgba(4,41,58,.28); border-radius:999px; padding:3px 10px; }
body.minimal-header .lockup__brand .ink { color:var(--ink); }
body.minimal-header .lockup__brand .muted { color:var(--muted); }
body.minimal-header .lockup__app { color:var(--ink); border-color:var(--hair-2); }

.site-nav { display:flex; align-items:center; gap:8px; }
.site-nav__list { display:flex; align-items:center; gap:4px; list-style:none; margin:0; padding:0; }
.site-nav__item a { display:inline-block; color:inherit; padding:8px 14px; border-radius:999px; font-family:var(--font-mono); font-size:12px; letter-spacing:.06em; text-transform:uppercase; font-weight:500; transition:background .13s; }
.site-nav__item a:hover { background:rgba(4,41,58,.10); text-decoration:none; }
.site-nav__item.is-active a { background:rgba(4,41,58,.16); }
body.minimal-header .site-nav__item a:hover { background:var(--soft); }
.site-nav__cta { margin-left:8px; }

.nav-toggle { display:none; flex-direction:column; gap:5px; background:none; border:0; cursor:pointer; padding:8px; color:inherit; }
.nav-toggle span { width:22px; height:2px; background:currentColor; border-radius:2px; transition:transform .2s ease, opacity .2s ease; }

/* ---------------------------------------------------------------------
   5. MAIN / SECTION HEADS
   --------------------------------------------------------------------- */
.site-main { display:block; padding-block:clamp(32px,5vw,64px) clamp(48px,8vw,90px); }
.section-head { display:flex; align-items:center; gap:20px; margin:0 0 28px; }
.section-head__title { font-size:clamp(22px,3vw,30px); margin:0; }
.section-head__rule { flex:1; height:1px; background:var(--hair-2); }

/* ---------------------------------------------------------------------
   6. HERO  (home)
   --------------------------------------------------------------------- */
.hero { padding-block:clamp(24px,5vw,60px) clamp(20px,3vw,36px); }
.hero__inner { max-width:860px; }
.hero__eyebrow { margin:0 0 18px; color:var(--accent); }
.hero__title { font-size:clamp(40px,7vw,80px); line-height:1.02; margin:0 0 .35em; font-weight:400; letter-spacing:-.02em; }
.hero__sub { font-size:clamp(17px,2.2vw,21px); color:var(--ink-2); max-width:60ch; margin:0 0 28px; }
.hero__cta { display:flex; flex-wrap:wrap; gap:12px; }

/* ---------------------------------------------------------------------
   7. LEAD / FEATURED CARD  (home)
   --------------------------------------------------------------------- */
.lead { margin:0 0 clamp(40px,6vw,60px); }
.lead-card { display:grid; grid-template-columns:1.15fr 1fr; gap:0; background:var(--surface); border:1px solid var(--hair); border-radius:20px; overflow:hidden; box-shadow:0 6px 18px rgba(10,10,10,.08); }
.lead-card__media { display:block; aspect-ratio:4/3; background:var(--soft); }
.lead-card__image { width:100%; height:100%; object-fit:cover; }
.lead-card__media-fallback { display:flex; align-items:center; justify-content:center; width:100%; height:100%; min-height:280px; }
.lead-card__media-fallback svg { width:30%; height:30%; opacity:.85; }
.lead-card__body { padding:clamp(24px,3vw,44px); display:flex; flex-direction:column; justify-content:center; }
.lead-card__tags { margin:0 0 16px; color:var(--ink-2); display:flex; align-items:center; gap:8px; }
.lead-card__tags a { color:var(--accent); }
.lead-card__title { font-size:clamp(26px,3.5vw,40px); margin:0 0 .4em; }
.lead-card__title a { color:var(--ink); }
.lead-card__title a:hover { color:var(--accent); text-decoration:none; }
.lead-card__excerpt { color:var(--ink-2); font-size:17px; margin:0 0 20px; }
.lead-card__foot { color:var(--muted); }
.post-card__star { color:var(--accent); font-weight:700; }

/* ---------------------------------------------------------------------
   8. POST GRID + CARDS
   --------------------------------------------------------------------- */
.post-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(320px,1fr)); gap:clamp(24px,3vw,40px); }
.post-card { display:flex; flex-direction:column; }
.post-card__media { display:block; aspect-ratio:16/10; border-radius:14px; overflow:hidden; background:var(--soft); border:1px solid var(--hair); margin:0 0 18px; }
.post-card__image { width:100%; height:100%; object-fit:cover; transition:transform .4s ease; }
.post-card:hover .post-card__image { transform:scale(1.04); }
.post-card__media-fallback { display:flex; align-items:center; justify-content:center; width:100%; height:100%; }
.post-card__media-fallback svg { width:34%; height:34%; opacity:.9; }
.post-card__body { display:flex; flex-direction:column; flex:1; }
.post-card__tags { display:flex; align-items:center; gap:8px; margin:0 0 12px; color:var(--ink-2); }
.post-card__tag { color:var(--accent); }
.post-card__title { font-size:clamp(20px,2.2vw,25px); margin:0 0 .4em; }
.post-card__title a { color:var(--ink); }
.post-card__title a:hover { color:var(--accent); text-decoration:none; }
.post-card__excerpt { color:var(--ink-2); font-size:15.5px; margin:0 0 18px; flex:1; }
.post-card__foot { color:var(--muted); display:flex; align-items:center; flex-wrap:wrap; }
.post-card__author { color:var(--ink-2); }

/* ---------------------------------------------------------------------
   9. PAGINATION
   --------------------------------------------------------------------- */
.pagination { display:flex; align-items:center; justify-content:center; gap:18px; margin-top:clamp(40px,6vw,64px); }
.pagination__count { color:var(--muted); }

/* ---------------------------------------------------------------------
   10. SINGLE POST / PAGE
   --------------------------------------------------------------------- */
.article-header { padding-top:clamp(8px,2vw,24px); text-align:center; }
.article-header__meta { display:flex; align-items:center; justify-content:center; flex-wrap:wrap; gap:0; margin:0 0 22px; color:var(--ink-2); }
.article-header__tag { color:var(--accent); }
.article-header__title { font-size:clamp(34px,5.2vw,58px); line-height:1.05; font-weight:400; margin:0 auto .35em; max-width:16ch; }
.article-header__excerpt { font-size:clamp(18px,2.4vw,22px); color:var(--ink-2); max-width:60ch; margin:0 auto 28px; }
.article-header__byline { display:inline-flex; align-items:center; gap:10px; margin:6px 0 0; }
.byline__avatar { width:34px; height:34px; border-radius:50%; object-fit:cover; }
.byline__avatar--fallback { display:inline-flex; align-items:center; justify-content:center; font-family:var(--font-mono); font-weight:700; font-size:13px; }
.byline__name { font-weight:600; font-size:15px; }

.article-feature { margin:clamp(32px,5vw,56px) auto; }
.article-feature__image { width:100%; border-radius:20px; box-shadow:0 6px 18px rgba(10,10,10,.08); }
.article-feature__fallback { width:100%; aspect-ratio:16/8; border-radius:20px; display:flex; align-items:center; justify-content:center; border:1px solid var(--hair-2); background:repeating-linear-gradient(135deg,#f3f2ef 0 16px,#eceae6 16px 32px); }
.article-feature__fallback .ef-tag { font-family:var(--font-mono); font-size:10.5px; letter-spacing:.1em; text-transform:uppercase; color:var(--muted); background:var(--surface); border:1px solid var(--hair-2); border-radius:99px; padding:7px 14px; }
.article-feature figcaption { text-align:center; margin-top:12px; color:var(--muted); }

.article-content { margin-top:clamp(24px,4vw,40px); }

/* Ghost content (Koenig editor output) */
.gh-content { font-size:19px; line-height:1.75; color:#1a1a18; }
.gh-content > * { margin:0 0 1.5em; }
.gh-content > :last-child { margin-bottom:0; }
.gh-content p { font-family:var(--font-sans); }
.gh-content h2 { font-family:var(--font-serif); font-size:clamp(26px,3.4vw,34px); margin:1.5em 0 .5em; font-weight:500; }
.gh-content h3 { font-family:var(--font-serif); font-size:clamp(21px,2.6vw,26px); margin:1.4em 0 .4em; font-weight:500; }
.gh-content h4 { font-family:var(--font-serif); font-size:20px; margin:1.3em 0 .4em; font-weight:500; }
.gh-content a { color:var(--accent); text-decoration:underline; text-underline-offset:2px; text-decoration-thickness:1px; }
.gh-content strong { font-weight:600; color:var(--ink); }
.gh-content img,.gh-content video { border-radius:14px; }
.gh-content blockquote { margin:1.6em 0; padding:6px 0 6px 24px; border-left:3px solid var(--accent); font-family:var(--font-serif); font-size:clamp(21px,2.6vw,26px); font-style:italic; color:var(--ink); }
.gh-content ul,.gh-content ol { padding-left:1.3em; }
.gh-content li { margin:0 0 .5em; }
.gh-content hr { border:0; height:1px; background:var(--hair-2); margin:2.2em 0; }
.gh-content figure { margin:0 0 1.8em; }
.gh-content code { font-family:var(--font-mono); font-size:.86em; background:var(--soft); border:1px solid var(--hair-2); border-radius:6px; padding:2px 6px; }
.gh-content pre { background:#0f1419; color:#e6e6e6; font-family:var(--font-mono); font-size:14.5px; padding:20px 22px; border-radius:14px; overflow:auto; line-height:1.6; }
.gh-content pre code { background:none; border:0; padding:0; color:inherit; font-size:inherit; }
.gh-content figcaption { text-align:center; color:var(--muted); font-size:14px; margin-top:10px; font-family:var(--font-sans); }
/* graceful image fallback (when a Koenig image has no src) */
.gh-content .kg-image-fallback { width:100%; aspect-ratio:16/9; border-radius:14px; display:flex; align-items:center; justify-content:center; border:1px solid var(--hair-2); background:repeating-linear-gradient(135deg,#f3f2ef 0 16px,#eceae6 16px 32px); }
.gh-content .kg-image-fallback .ef-tag { font-family:var(--font-mono); font-size:10px; letter-spacing:.1em; text-transform:uppercase; color:var(--muted); background:var(--surface); border:1px solid var(--hair-2); border-radius:99px; padding:6px 13px; }
/* Koenig width cards */
.gh-content .kg-width-wide { width:min(1040px,92vw); margin-inline:calc(50% - min(520px,46vw)); }
.gh-content .kg-width-full { width:96vw; margin-inline:calc(50% - 48vw); }
.gh-content .kg-card { margin-block:2em; }
.gh-content .kg-bookmark-card { border:1px solid var(--hair-2); border-radius:14px; overflow:hidden; }

.article-footer { margin-top:clamp(40px,6vw,60px); }
.article-footer__tags { display:flex; flex-wrap:wrap; gap:10px; margin:0 0 36px; }
.article-tag { font-size:11px; padding:8px 16px; }

.author-bio { display:flex; gap:20px; align-items:center; padding:24px 26px; }
.author-bio__avatar { width:56px; height:56px; border-radius:50%; object-fit:cover; flex:0 0 auto; }
.author-bio__avatar--fallback { display:inline-flex; align-items:center; justify-content:center; font-family:var(--font-mono); font-weight:700; font-size:18px; }
.author-bio__name { font-size:22px; margin:.1em 0 .25em; }
.author-bio__desc { color:var(--ink-2); font-size:15.5px; margin:0; }

.read-next { margin-top:clamp(56px,8vw,90px); }

/* ---------------------------------------------------------------------
   11. ARCHIVE HEADERS (tag / author)
   --------------------------------------------------------------------- */
.archive-head { padding:clamp(8px,2vw,20px) 0 clamp(28px,4vw,44px); text-align:center; }
.archive-head__inner .od-label { color:var(--accent); }
.archive-head__title { font-size:clamp(34px,5vw,56px); font-weight:400; margin:.1em 0 .3em; }
.archive-head__desc { color:var(--ink-2); max-width:56ch; margin:0 auto 14px; font-size:17px; }
.archive-head__count { color:var(--muted); }
.archive-head__inner--author { display:flex; flex-direction:column; align-items:center; }
.archive-head__avatar { width:84px; height:84px; border-radius:50%; object-fit:cover; margin:0 0 18px; }
.archive-head__avatar--fallback { display:inline-flex; align-items:center; justify-content:center; font-family:var(--font-mono); font-weight:700; font-size:30px; }

/* ---------------------------------------------------------------------
   12. ERROR
   --------------------------------------------------------------------- */
.error { min-height:54vh; display:flex; align-items:center; justify-content:center; text-align:center; }
.error__code { font-size:clamp(80px,18vw,180px); line-height:1; color:var(--accent); font-weight:400; margin:0; }
.error__title { font-size:clamp(24px,4vw,38px); font-weight:400; margin:.1em 0 .3em; }
.error__sub { color:var(--ink-2); margin:0 0 26px; }

/* ---------------------------------------------------------------------
   13. FOOTER
   --------------------------------------------------------------------- */
.site-footer { border-top:1px solid var(--hair-2); background:var(--soft); padding-block:clamp(40px,6vw,60px); }
.site-footer__inner { display:flex; flex-wrap:wrap; align-items:flex-start; justify-content:space-between; gap:32px; }
.lockup--footer .lockup__brand .ink { color:var(--ink); }
.lockup--footer .lockup__brand .muted { color:var(--muted); }
.lockup--footer .lockup__app { color:var(--ink); border-color:var(--hair-2); }
.site-footer__tagline { font-size:clamp(20px,2.6vw,26px); color:var(--ink); margin:18px 0 0; font-weight:400; max-width:18ch; }
.site-footer__nav { display:flex; flex-direction:column; gap:10px; }
.site-footer__nav a { color:var(--ink-2); font-family:var(--font-mono); font-size:12px; letter-spacing:.06em; text-transform:uppercase; }
.site-footer__nav a:hover { color:var(--accent); text-decoration:none; }
.site-footer__meta { display:flex; align-items:center; flex-wrap:wrap; gap:4px; width:100%; padding-top:24px; margin-top:8px; border-top:1px solid var(--hair-2); color:var(--muted); }
.site-footer__meta a { color:var(--ink-2); }

/* ---------------------------------------------------------------------
   14. RESPONSIVE
   --------------------------------------------------------------------- */
@media (max-width:820px) {
  .lead-card { grid-template-columns:1fr; }
  .lead-card__media { aspect-ratio:16/9; }
}
@media (max-width:680px) {
  body { font-size:17px; }
  .nav-toggle { display:flex; }
  .site-nav__list { display:none; }
  .site-nav__cta { display:none; }
  .site-nav.is-open { position:absolute; left:0; right:0; top:100%; flex-direction:column; align-items:stretch;
    background:var(--surface); padding:16px clamp(20px,5vw,48px); gap:6px; box-shadow:0 18px 44px rgba(10,10,10,.18); }
  .site-nav.is-open .site-nav__list { display:flex; flex-direction:column; align-items:stretch; }
  .site-nav.is-open .site-nav__item a { color:var(--ink); }
  .site-nav.is-open .site-nav__cta { display:inline-flex; margin:8px 0 0; }
  .post-grid { grid-template-columns:1fr; }
}