/* ============================================================
   Skin: "napoleon" — napoleon.today, Craig's anti-guru productivity app (2026).
   The app's own "honest ledger" design language, ported faithfully: warm paper,
   warm ink, oxblood + brass, hairline rules, monospaced data, and the real iA
   Writer fonts (body/data/label) with Instrument Serif for the display moments.
   Paper mode only. Design direction is Napoleon's own (approved 2026-07-01).
   ============================================================ */

/* --- The real type. iA Writer fonts (OFL, credited) + Instrument Serif (OFL). --- */
@font-face { font-family:"iA Quattro"; src:url("/fonts/ia/iAWriterQuattroS-Regular.ttf") format("truetype"); font-weight:400; font-style:normal; font-display:swap; }
@font-face { font-family:"iA Quattro"; src:url("/fonts/ia/iAWriterQuattroS-Bold.ttf") format("truetype"); font-weight:700; font-style:normal; font-display:swap; }
@font-face { font-family:"iA Quattro"; src:url("/fonts/ia/iAWriterQuattroS-Italic.ttf") format("truetype"); font-weight:400; font-style:italic; font-display:swap; }
@font-face { font-family:"iA Quattro"; src:url("/fonts/ia/iAWriterQuattroS-BoldItalic.ttf") format("truetype"); font-weight:700; font-style:italic; font-display:swap; }
@font-face { font-family:"iA Mono"; src:url("/fonts/ia/iAWriterMonoS-Regular.ttf") format("truetype"); font-weight:400; font-style:normal; font-display:swap; }
@font-face { font-family:"iA Mono"; src:url("/fonts/ia/iAWriterMonoS-Bold.ttf") format("truetype"); font-weight:700; font-style:normal; font-display:swap; }
@font-face { font-family:"iA Duo"; src:url("/fonts/ia/iAWriterDuoS-Regular.ttf") format("truetype"); font-weight:400; font-style:normal; font-display:swap; }
@font-face { font-family:"Instrument Serif"; src:url("/fonts/instrument/InstrumentSerif-Regular.ttf") format("truetype"); font-weight:400; font-style:normal; font-display:swap; }
@font-face { font-family:"Instrument Serif"; src:url("/fonts/instrument/InstrumentSerif-Italic.ttf") format("truetype"); font-weight:400; font-style:italic; font-display:swap; }

.skin-napoleon {
  --paper:#F4EFE4; --paper-raised:#FBF8F0;
  --ink:#211E17; --ink-soft:#5A554A; --rule:#D8D0BF;
  --oxblood:#9E3B2E; --oxblood-strong:#7E2C22; --brass:#B0894E;
  --font-ui:"iA Quattro", ui-sans-serif, system-ui, sans-serif;
  --font-mono:"iA Mono", ui-monospace, "IBM Plex Mono", monospace;
  --font-label:"iA Duo", var(--font-ui);
  --font-display:"Instrument Serif", Georgia, "Times New Roman", serif;
  background: var(--paper); color: var(--ink);
  font-family: var(--font-ui); -webkit-font-smoothing: antialiased;
}

/* Warm surround + chrome so the faux-browser matches the paper inside */
body.skin-napoleon { background: #14110a; }
.skin-napoleon .skin-exit { background: #1B1913; color: #A49C88; }
.skin-napoleon .skin-exit a { color: #F4EFE4; }
.skin-napoleon .skin-note { color: #7d7666; }
.skin-napoleon .winframe { max-width: 1320px; background: var(--paper); box-shadow: 0 20px 55px rgba(0,0,0,.45); }
.skin-napoleon .winbar { background: linear-gradient(#f3eee2, #e7ddca); border-bottom: 1px solid var(--rule); }
.skin-napoleon .addr { background: #fbf8f0; border-color: #cfc6b2; color: #5A554A; }
.skin-napoleon .addr .lock { color: #5F6B3A; }
.skin-napoleon .reload { color: #8a8268; }
.skin-napoleon .viewport { background: var(--paper); overflow: hidden; }  /* contains the content's top margin (no white gap) */

.skin-napoleon .site { max-width: 1220px; margin: 0 auto; padding: 0 60px 8px; }
.skin-napoleon .masthead { display: none; }      /* the hero shortcode is the masthead */
.skin-napoleon .period-links { display: none; }   /* CTA lives in the hero; links stay for the SERP row */

/* ---- HERO (rendered by the napoleon-hero shortcode) ---- */
.skin-napoleon .np-hero { padding: 40px 0 56px; }
.skin-napoleon .np-nav { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding-bottom: 20px; margin-bottom: 44px; border-bottom: 1px solid var(--rule); }
.skin-napoleon .np-word { font-family: var(--font-mono); font-weight: 700; text-transform: uppercase; letter-spacing: .18em; font-size: 15px; color: var(--ink); }
.skin-napoleon .np-word .mark { color: var(--oxblood); }
.skin-napoleon .np-hero a { border-bottom: 0; }   /* hero links aren't body links */
.skin-napoleon .np-hero .np-navlink { font-family: var(--font-mono); text-transform: uppercase; letter-spacing: .13em; font-size: 12px; color: var(--ink-soft); text-decoration: none; }
.skin-napoleon .np-hero .np-navlink:hover { color: var(--oxblood); }

.skin-napoleon .np-heromain { display: grid; grid-template-columns: 1fr minmax(400px, 500px); gap: 72px; align-items: start; }
.skin-napoleon .np-eyebrow { font-family: var(--font-mono); text-transform: uppercase; letter-spacing: .16em; font-size: 12px; color: var(--oxblood); margin: 0 0 16px; }
.skin-napoleon .np-h1 { font-family: var(--font-display); font-weight: 400; font-size: 3.6rem; line-height: 1.0; letter-spacing: .3px; color: var(--ink); margin: 0 0 20px; }
.skin-napoleon .np-tag { font-family: var(--font-display); font-size: 1.55rem; line-height: 1.2; color: var(--ink); margin: 0 0 20px; }
.skin-napoleon .np-tag span { color: var(--oxblood); }
.skin-napoleon .np-lede { font-size: 15.5px; line-height: 1.6; color: var(--ink-soft); margin: 0 0 26px; max-width: 42ch; }
.skin-napoleon .np-hero .np-cta { display: inline-block; font-family: var(--font-ui); font-weight: 700; font-size: 15px; background: var(--oxblood); color: #FBF8F0; text-decoration: none; border-radius: 2px; padding: 11px 22px; }
.skin-napoleon .np-hero .np-cta:hover { background: var(--oxblood-strong); }

/* the "Today" ledger card */
.skin-napoleon .np-card { background: var(--paper-raised); border: 1px solid var(--rule); border-radius: 8px; overflow: hidden; }
.skin-napoleon .np-card-bar { font-family: var(--font-mono); font-size: 12px; color: var(--ink-soft); padding: 12px 20px; border-bottom: 1px solid var(--rule); }
.skin-napoleon .np-card-body { padding: 20px 22px 22px; }
.skin-napoleon .np-todaysfor { border-left: 3px solid var(--brass); padding-left: 14px; margin: 2px 0 16px; }
.skin-napoleon .np-tf-label { font-family: var(--font-mono); text-transform: uppercase; letter-spacing: .12em; font-size: 11px; color: var(--ink-soft); }
.skin-napoleon .np-tf-goal { font-family: var(--font-display); font-size: 1.35rem; }
.skin-napoleon .np-chips { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 8px; }
.skin-napoleon .np-chip { font-family: var(--font-mono); font-size: 11.5px; text-transform: uppercase; letter-spacing: .06em; border: 1px solid var(--rule); border-radius: 999px; padding: 5px 12px; color: var(--ink-soft); }
.skin-napoleon .np-chip.done { color: var(--oxblood); border-color: var(--oxblood); }
.skin-napoleon .np-chip.lens { background: var(--oxblood); color: #FBF8F0; border-color: var(--oxblood); font-weight: 700; }
.skin-napoleon .np-sub { font-family: var(--font-mono); text-transform: uppercase; letter-spacing: .12em; font-size: 11px; color: var(--ink-soft); margin: 18px 0 2px; }
.skin-napoleon .np-tasks { list-style: none; margin: 0; padding: 0; }
.skin-napoleon .np-task { display: flex; align-items: center; gap: 12px; padding: 11px 0; border-bottom: 1px solid var(--rule); }
.skin-napoleon .np-task:last-child { border-bottom: 0; }
.skin-napoleon .np-rank { font-family: var(--font-mono); color: var(--ink-soft); width: 1.2em; }
.skin-napoleon .np-box { width: 15px; height: 15px; flex: 0 0 auto; border: 1.5px solid var(--ink-soft); border-radius: 2px; position: relative; }
.skin-napoleon .np-task.done .np-box { background: var(--oxblood); border-color: var(--oxblood); }
.skin-napoleon .np-task.done .np-box::after { content: "\2713"; position: absolute; inset: 0; color: #FBF8F0; font-size: 11px; display: flex; align-items: center; justify-content: center; }
.skin-napoleon .np-ttl { flex: 1; font-size: 15px; }
.skin-napoleon .np-task.done .np-ttl { color: var(--ink-soft); text-decoration: line-through; text-decoration-color: var(--oxblood); }
.skin-napoleon .np-frog { font-family: var(--font-mono); font-size: 10.5px; text-transform: uppercase; letter-spacing: .06em; color: var(--oxblood); border: 1px solid var(--oxblood); border-radius: 999px; padding: 2px 9px; }

/* ---- Craig's story (the body prose) ---- */
.skin-napoleon .content { max-width: 900px; margin: 60px auto 0; }
.skin-napoleon .content > p { font-size: 18px; line-height: 1.72; color: var(--ink); margin: 0 0 1.3em; }
.skin-napoleon .content > p:first-of-type { font-size: 20px; color: var(--ink); }
.skin-napoleon .content a { color: var(--oxblood); text-decoration: none; border-bottom: 1px solid rgba(158,59,46,.35); }
.skin-napoleon .content a:hover { border-bottom-color: var(--oxblood); }
.skin-napoleon .content em { font-style: italic; }
.skin-napoleon .content h2 { font-family: var(--font-display); font-weight: 400; font-size: 1.9rem; color: var(--ink); margin: 1.7em 0 .4em; padding-bottom: .2em; border-bottom: 2px solid var(--ink); }
.skin-napoleon .content blockquote { border-left: 3px solid var(--oxblood); margin: 1.4em 0; padding: 2px 0 2px 18px; color: var(--ink-soft); font-family: var(--font-display); font-size: 1.3rem; line-height: 1.3; }
.skin-napoleon .content blockquote p { margin: 0; }

/* ---- Gallery: Napoleon's own plates, as ledger cards ---- */
.skin-napoleon .period-gallery { display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: 22px; max-width: 1100px; margin: 40px auto 0; }
.skin-napoleon .tile { margin: 0; border: 1px solid var(--rule); border-radius: 4px; overflow: hidden; background: var(--paper-raised); }
.skin-napoleon .tile a { display: block; }
.skin-napoleon .tile img { display: block; width: 100%; height: auto; }
.skin-napoleon .tile figcaption { font-family: var(--font-mono); font-size: 11.5px; color: var(--ink-soft); padding: 9px 13px; border-top: 1px solid var(--rule); }

/* ---- Footer / colophon ---- */
.skin-napoleon .period-foot { font-family: var(--font-mono); font-size: 12px; color: var(--ink-soft); text-align: center; padding: 30px 0 34px; margin-top: 36px; border-top: 1px solid var(--rule); }
.skin-napoleon .period-foot a { color: var(--oxblood); }

@media (max-width: 760px) {
  .skin-napoleon .site { padding: 0 18px 8px; }
  .skin-napoleon .np-heromain { grid-template-columns: 1fr; gap: 34px; }
  .skin-napoleon .np-h1 { font-size: 2.5rem; }
}