/* exfucina.org — shell and templates.
   Palette "Lapis" (fnp-ops-ij2gb.1.6, DD 2 Oct 2026: «voglio anche una palette di
   colori decente», then «mi piace lapis»): cool paper and blue-black ink, one
   lapis accent for links and marks. Light by default, dark when the reader's system asks for it. Every
   text/background pair measured at WCAG AA or better (see the table), and every
   text element at APCA Lc 75 or better in both modes (V6); the full table is in plan/weeks/W40/ij2gb.1.6.md §5.
   Typography follows V4: Cardo for reading, Source Sans 3 for utility only. */

:root {
  color-scheme: light dark;
  --bg: #F4F5F7;
  --surface: #E9ECF0;
  --text: #141C26;
  --muted: #445060;
  --rule: #CDD3DB;
  --accent: #1D4F91;       /* marks: rules, underlines, focus */
  --accent-text: #1D4F91;  /* accent used as text */
  --tint: #E7EDF6;         /* lapis wash: shelf tiles, shelf headers */
  --band: #1D4F91;         /* the masthead band */
  --band-text: #FFFFFF;
  /* One tint per shelf, four low-chroma tones of one family with Lapis (DD, 2 Oct 2026):
     lapis, slate-teal, ochre, rose. Header text on each at WCAG AA and APCA Lc 75. */
  --shelf-1: #E4EBF5;
  --shelf-2: #E4F0EE;
  --shelf-3: #F1EADB;
  --shelf-4: #F6EAEB;
}

@media (prefers-color-scheme: dark) {
  :root {
    --bg: #0E141C;
    --surface: #172030;
    --text: #F3F6FA;         /* brighter than the first Lapis dark (#E5EBF2): titles stand above the muted tone (DD, 2 Oct 2026) */
    --muted: #CBD4DF;
    --rule: #2C3744;
    --accent: #8CB6F2;
    --accent-text: #BCD4F7;
    --tint: #15233A;
    --band: #1B3A66;
    --band-text: #E5EBF2;
    --shelf-1: #172540;
    --shelf-2: #112A29;
    --shelf-3: #302616;
    --shelf-4: #33202A;
  }
}

* { box-sizing: border-box; }

html { background: var(--bg); }

body {
  background: var(--bg);
  color: var(--text);
  margin: 0;
  font-family: 'Cardo', Georgia, serif;
  font-size: 1.125rem;
  line-height: 1.7;
  text-align: left;
  hyphens: none;
}

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

.wrap { max-width: 44rem; margin: 0 auto; padding: 3rem 1.5rem 5rem; }

header.site { padding: 2.5rem 1.5rem 0; }
header.site .name {
  font-family: 'Source Sans 3', system-ui, sans-serif;
  font-size: 0.8rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--muted);
}
header.site .name a { color: var(--accent-text); }

h1 { font-size: 2.4rem; line-height: 1.25; margin: 0.6em 0 0.3em; font-weight: 600; }
h2 { font-size: 1.7rem; line-height: 1.3; margin: 2.2em 0 0.6em; font-weight: 600; }
h3 { font-size: 1.25rem; margin: 1.6em 0 0.5em; font-weight: 600; }

p { margin: 0 0 1.2em; }
p.closing { font-style: italic; }
p.lede {
  font-family: 'Source Sans 3', system-ui, sans-serif;
  font-size: 1.1rem;
  color: var(--muted);
}

blockquote {
  margin: 2em 0;
  padding-left: 1.2em;
  border-left: 2px solid var(--accent);
  font-style: italic;
  color: var(--text);
}

aside {
  background: var(--surface);
  margin: 1.6em 0;
  padding: 1em 1.2em;
  border: 1px solid var(--rule);
  font-size: 0.98rem;
  color: var(--muted);
}

nav.toc {
  font-family: 'Source Sans 3', system-ui, sans-serif;
  font-size: 0.95rem;
  border: 1px solid var(--rule);
  padding: 1.2em 1.4em;
  margin: 2em 0;
}
nav.toc h2 {
  font-family: 'Source Sans 3', system-ui, sans-serif;
  font-size: 0.8rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--muted);
  margin: 0 0 0.8em;
}
nav.toc ol { list-style: none; margin: 0; padding: 0; }
nav.toc li { margin: 0.3em 0; }
nav.toc span { color: var(--muted); margin-right: 0.6em; font-variant-numeric: tabular-nums; }

.table-wrap { overflow-x: auto; margin: 1.6em 0; -webkit-overflow-scrolling: touch; }
table {
  font-family: 'Source Sans 3', system-ui, sans-serif;
  font-size: 0.92rem;
  border-collapse: collapse;
  width: 100%;
  min-width: 30rem;
}
th, td { text-align: left; padding: 0.5em 0.8em; border-bottom: 1px solid var(--rule); white-space: nowrap; }
th { color: var(--muted); font-weight: 600; }

.label {
  font-family: 'Source Sans 3', system-ui, sans-serif;
  font-size: 0.8rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--muted);
}

.langs {
  font-family: 'Source Sans 3', system-ui, sans-serif;
  font-size: 0.95rem;
  color: var(--muted);
}

footer.essay-footer, footer.essay {
  margin-top: 3em;
  padding-top: 2em;
  border-top: 1px solid var(--rule);
}

footer.site {
  font-family: 'Source Sans 3', system-ui, sans-serif;
  font-size: 0.9rem;
  color: var(--muted);
  border-top: 1px solid var(--rule);
  padding: 2em 1.5rem 3rem;
}
footer.site .wrap { padding-top: 0; padding-bottom: 0; }
footer.site .colophon a { color: var(--muted); }
footer.site .note { margin-top: 0.6em; }

@media (max-width: 30rem) {
  body { font-size: 1.05rem; }
  h1 { font-size: 1.9rem; }
  .wrap { padding: 2rem 1.25rem 3.5rem; }
}

/* ------------------------------------------------------------------
   Templates (fnp-ops-unh8m.5.3): essay, index, page.
   Everything above this line is the live shell, unchanged. Same
   tokens (the Lapis palette above), Cardo for text
   and titles, Source Sans 3 for utility only (V4), APCA checked (V6).
   ------------------------------------------------------------------ */

:root {
  --measure: 30.5em;        /* V4: 62-70 characters per line — measured with Playwright: median 67 per full line (Cardo 18px) */
  --leading: 1.6;           /* V4: leading 1.6 on the long text */
  --section-air: 100svh;    /* V4: at least one screen height between major sections */
  --utility: 'Source Sans 3', system-ui, sans-serif;
}

.skip {
  position: absolute; left: -999px; top: 0.75rem;
  font-family: var(--utility); font-size: 0.95rem;
  background: var(--bg); color: var(--text); padding: 0.5em 0.9em;
}
.skip:focus { left: 1rem; }

a:focus-visible, .skip:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
header.site .name a { text-decoration: none; }
header.site .name a:hover { text-decoration: underline; }

.draft-banner {
  font-family: var(--utility); font-size: 0.9rem; color: var(--text);
  border: 1px dashed var(--muted); margin: 0; padding: 0.6em 1.5rem;
}

/* Utility text: meta, byline, status, source, link notes */
.byline, dl.meta, .source, .revised-note, .card-meta, .link-note,
.essay-foot h2, .foot-nav, .themes-intro, .how-to-read dt {
  font-family: var(--utility);
}

/* --- essay ---------------------------------------------------------- */
.essay-head { margin: 0 0 2.5rem; }
.essay-head .theme-link { margin: 0; }
.essay-head .theme-link a { color: var(--accent-text); text-decoration: none; }
.essay-head .theme-link a:hover { text-decoration: underline; }
.essay-head h1 { font-size: 2.6rem; line-height: 1.2; letter-spacing: 0.01em; margin: 0.35em 0 0.25em; }
.essay-head .subtitle { font-size: 1.3rem; font-style: italic; color: var(--muted); margin: 0 0 1.2em; }

.byline { font-size: 1rem; color: var(--muted); margin: 0 0 0.4em; }
dl.meta { display: flex; flex-wrap: wrap; gap: 0.3em 1.6em; font-size: 0.9rem; margin: 0 0 1em; }
dl.meta div { display: flex; gap: 0.45em; }
dl.meta dt { color: var(--muted); }
dl.meta dd { margin: 0; color: var(--muted); }  /* meta muted and small, below title and subtitle (DD, 2 Oct 2026) */
.status { font-weight: 600; }
time { white-space: nowrap; }

.return { font-family: var(--utility); font-size: 0.98rem; color: var(--muted); margin: 0 0 0.9em; }
.return a { color: var(--text); }

.source, .revised-note { font-size: 0.95rem; color: var(--muted); max-width: var(--measure); margin: 0 0 0.6em; }
.source .label, .revised-note .label { margin-right: 0.5em; }
.source cite { font-style: italic; color: var(--text); }

aside.context-note { max-width: var(--measure); margin: 0 0 2.5rem; }
aside.context-note p:last-child { margin-bottom: 0; }

.essay-body { max-width: var(--measure); line-height: var(--leading); }
.essay-body h2, .essay-body h3 { line-height: 1.3; }

.essay-foot { max-width: var(--measure); margin-top: 3.5rem; padding-top: 2rem; border-top: 1px solid var(--rule); }
.essay-foot nav + nav { margin-top: 2rem; }
.essay-foot h2 {
  font-size: 0.8rem; letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--muted); margin: 0 0 0.8em; font-weight: 600;
}
.essay-foot ul, .link-list { list-style: none; margin: 0; padding: 0; }
.essay-foot li, .link-list li { margin: 0 0 0.6em; }
.link-note { font-size: 0.9rem; color: var(--muted); }

/* --- index (home) ---------------------------------------------------- */
.home-head h1 { font-size: 2.6rem; letter-spacing: 0.01em; margin-top: 0.4em; }
.home-head .home-lede { max-width: var(--measure); font-size: 1.2rem; line-height: var(--leading); }

.how-to-read { max-width: var(--measure); margin: 2.5rem 0 0; padding: 1.4em 1.5em; border: 1px solid var(--rule); background: var(--surface); }
.how-to-read h2 { margin: 0 0 0.9em; }
.how-to-read dl.statuses { margin: 0 0 1.2em; }
.how-to-read dl.statuses div { margin: 0 0 0.5em; }
.how-to-read dt { display: inline; font-weight: 600; font-size: 0.95rem; }
.how-to-read dt::after { content: "\a0\2014\a0"; font-weight: 400; }
.how-to-read dd { display: inline; margin: 0; }
.how-to-read p:last-child { margin-bottom: 0; }

.themes > h2 { margin-top: 3.5rem; }
.themes-intro { font-size: 0.95rem; color: var(--muted); }
.theme { margin-top: 2.5rem; }
.theme + .theme { margin-top: 2.5rem; padding-top: 2.5rem; border-top: 1px solid var(--accent); }  /* was var(--section-air), a screen of blank: DD, 2 Oct 2026, «una elegante riga orizzontale» */
.theme h3 { font-size: 1.6rem; margin: 0 0 0.4em; }
.theme-intro { max-width: var(--measure); color: var(--muted); }

ol.cards { list-style: none; margin: 1.2em 0 0; padding: 0; }
.card { border-top: 1px solid var(--rule); padding: 1.4em 0 0.6em; }
.card h4 { font-size: 1.4rem; line-height: 1.3; margin: 0 0 0.35em; font-weight: 600; }
.card h4 a { text-decoration: none; }
.card h4 a:hover { text-decoration: underline; }
.card-meta { font-size: 0.92rem; color: var(--muted); margin: 0 0 0.6em; }
.card-dek { max-width: var(--measure); margin: 0 0 0.6em; }
.empty { font-style: italic; color: var(--muted); }

/* --- plain page (about, colophon) ------------------------------------ */
.page { max-width: var(--measure); line-height: var(--leading); }
.link-list { margin-top: 1.8em; font-family: var(--utility); font-size: 0.98rem; }

footer.site .foot-nav { margin-top: 0.6em; }
footer.site .foot-nav a { color: var(--muted); }
footer.site p.note-author { margin: 0; color: var(--text); font-size: 0.95rem; }
footer.site p.note { margin: 0.25em 0 0; font-size: 0.85rem; color: var(--muted); }

@media (max-width: 30rem) {
  .essay-head h1, .home-head h1 { font-size: 2rem; }
  .essay-head .subtitle { font-size: 1.15rem; }
  .how-to-read { padding: 1.1em 1.1em; }
}

/* ------------------------------------------------------------------
   v2 (fnp-ops-ij2gb.1.6): code and diagrams, the shelf overview,
   accent marks. Same tokens.
   ------------------------------------------------------------------ */

.status { color: var(--accent-text); }
.essay-body h2 { border-top: 1px solid var(--rule); padding-top: 1.2em; }
.essay-body h2::first-letter { color: var(--accent-text); }

pre {
  background: var(--surface);
  border: 1px solid var(--rule);
  border-radius: 4px;
  padding: 1em 1.1em;
  margin: 1.6em 0;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  max-width: 100%;
  font-size: 0.78rem;
  line-height: 1.35;
}
code { font-family: 'SFMono-Regular', Menlo, Consolas, 'Liberation Mono', monospace; font-size: 0.88em; }
pre code { font-size: inherit; }
.essay-body ol, .essay-body ul { padding-left: 1.4em; }
.essay-body li { margin: 0 0 0.5em; }
.essay-body table td, .essay-body table th { white-space: normal; }

.card h4 a:hover { color: var(--accent-text); }

/* ------------------------------------------------------------------
   v2.1 (fnp-ops-ij2gb.1.6 §8, DD 2 Oct 2026: «non si capiscono le diverse
   parti»): the home is built around the shelves, and Lapis carries the
   structure (masthead band, shelf numerals, card edges). Same tokens.
   ------------------------------------------------------------------ */

.visually-hidden { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

header.site { padding: 0; background: var(--band); border-bottom: 4px solid var(--accent); }
header.site .site-inner { max-width: 68rem; margin: 0 auto; padding: 0.9rem 1.5rem; }
header.site .name { font-size: 0.95rem; letter-spacing: 0.22em; font-weight: 600; color: var(--band-text); }
header.site .name a { color: var(--band-text); }
body:not(.home) header.site .site-inner { max-width: 44rem; }

/* --- home: the shelves ------------------------------------------------ */
body.home .wrap { max-width: 68rem; }
body.home .home-head { max-width: 44rem; }

.shelf-map { margin: 2.5rem 0 0; }
.shelf-map h2 { margin: 0 0 0.3em; }
.shelf-map-intro { font-family: var(--utility); font-size: 0.95rem; color: var(--muted); margin: 0 0 1rem; }
.shelf-map ol { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 9.5rem), 1fr)); gap: 0.9rem; }
.shelf-map a {
  display: flex; flex-direction: column; gap: 0.35rem; height: 100%;
  padding: 1rem 1.1rem 1.1rem; background: var(--shelf-bg, var(--tint)); border-top: 4px solid var(--accent);
  color: var(--text); text-decoration: none;
}
.shelf-map a:hover .tile-name { text-decoration: underline; text-decoration-color: var(--accent); }
.tile-num { font-size: 1.5rem; line-height: 1; color: var(--accent-text); font-weight: 700; }
.tile-name { font-size: 1.15rem; line-height: 1.3; font-weight: 600; }
.tile-count { font-family: var(--utility); font-size: 0.9rem; color: var(--text); margin-top: auto; }

.themes { margin-top: 3.5rem; }
/* Layout «contents» (DD chose between two on the preview, 2 Oct 2026): the shelf on the
   left in lapis, its essays as rows on the right, a lapis hairline between shelves. */
.theme { margin-top: 0; scroll-margin-top: 1rem; display: grid; grid-template-columns: 17rem 1fr; column-gap: 2.5rem; }
.theme-head { align-self: start; position: sticky; top: 1rem; padding: 1.1rem 1.2rem 1.2rem; border-radius: 4px; background: var(--shelf-bg, var(--tint)); }
.shelf-1 { --shelf-bg: var(--shelf-1); }
.shelf-2 { --shelf-bg: var(--shelf-2); }
.shelf-3 { --shelf-bg: var(--shelf-3); }
.shelf-4 { --shelf-bg: var(--shelf-4); }
.theme-num { margin: 0 0 0.3em; font-size: 1.1rem; letter-spacing: 0.12em; line-height: 1; font-weight: 700; color: var(--accent-text); }
.theme-head h3 { margin: 0; font-size: 1.45rem; line-height: 1.25; }
.theme-head .theme-intro { margin: 0.5em 0 0; color: var(--text); font-size: 0.98rem; line-height: 1.5; }
.theme-count { margin: 0.6em 0 0; font-family: var(--utility); font-size: 0.85rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--text); }

ol.cards { margin: 0; }
.card { border-top: 0; border-bottom: 1px solid var(--rule); padding: 0 0 1rem; margin: 0 0 1rem; }
.card:last-child { border-bottom: 0; margin-bottom: 0; }
.card h4 { margin: 0 0 0.25em; }

/* Hierarchy by colour as well as size and weight (DD, 2 Oct 2026: «tutti font bianchi
   dappertutto»): shelf name in lapis, essay title strong text and bold, dek muted, italic, smaller. */
.theme-head h3 { color: var(--accent-text); }
.tile-name { color: var(--accent-text); }
.card h4 { font-size: 1.3rem; font-weight: 700; color: var(--text); }
.card h4 a { color: var(--text); }
.card-dek { margin: 0; font-size: 1rem; font-style: italic; line-height: 1.5; color: var(--muted); }

body.home .how-to-read { max-width: 44rem; margin-top: 4.5rem; }

@media (max-width: 30rem) {
  header.site .site-inner { padding: 0.8rem 1.25rem; }
}
@media (max-width: 48rem) {
  .theme { display: block; }
  .theme-head { position: static; margin-bottom: 1.2rem; }
}

/* --- links (DD, 2 Oct 2026: «i link sottolineati... blahhh») ------------
   No underline at rest. In running text a link is told apart by colour (the
   lapis accent-text) AND by weight, so colour is never the only cue (WCAG 1.4.1,
   technique G182): a 3:1 contrast against the body text was measured and is
   out of reach at the site's APCA Lc 75 (the colours that reach it read Lc 66
   light, Lc 40 dark). Hover and keyboard focus add the underline; focus keeps
   its outline. On the landing the whole card is the link. */
a { color: var(--accent-text); text-decoration: none; }
a:hover, a:focus-visible { text-decoration: underline; text-decoration-color: var(--accent); text-decoration-thickness: 1px; text-underline-offset: 3px; }
.essay-body a, .page a, aside a, .how-to-read a, blockquote a { font-weight: 700; }
.byline a, .source a, .return a, .link-note a { font-weight: 600; }
.related a, .context a, .provenance a { font-weight: 600; }
footer.site .foot-nav a, nav.toc a { color: var(--accent-text); }

.card { position: relative; transition: border-color 0.15s; }
.card h4 a { color: var(--text); }
.card h4 a::after { content: ""; position: absolute; inset: 0; }
.card:hover h4 a, .card h4 a:focus-visible { text-decoration: underline; text-decoration-color: var(--accent); }
.card:focus-within { outline: 2px solid var(--accent); outline-offset: 4px; }
.shelf-map a:hover, .shelf-map a:focus-visible { text-decoration: none; }