/* dotmd: una colonna di testo, come una pagina di libro. */

:root {
  --bg: #f6f1e7;
  --paper: #fbf8f1;
  --fg: #2b2520;
  --soft: #5a5047;
  --muted: #968a7b;
  --rule: #e2d9c8;
  --accent: #9a3b26;
  --accent-soft: rgba(154, 59, 38, .09);
  --measure: 42rem;
  color-scheme: light;
}

/* scuro: segue il sistema, a meno che il bottone non abbia scelto altrimenti */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg: #1e1c19;
    --paper: #262320;
    --fg: #cdc5b6;
    --soft: #aaa192;
    --muted: #857c6f;
    --rule: #3a3530;
    --accent: #d08a70;
    --accent-soft: rgba(208, 138, 112, .11);
    color-scheme: dark;
  }
}
:root[data-theme="dark"] {
  --bg: #1e1c19;
  --paper: #262320;
  --fg: #cdc5b6;
  --soft: #aaa192;
  --muted: #857c6f;
  --rule: #3a3530;
  --accent: #d08a70;
  --accent-soft: rgba(208, 138, 112, .11);
  color-scheme: dark;
}

*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--fg);
  font-family: var(--font);
  font-size: 1.09rem;
  line-height: 1.72;
  font-optical-sizing: auto;
  font-kerning: normal;
  font-variant-ligatures: common-ligatures;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  hanging-punctuation: first;
}

::selection { background: var(--accent); color: var(--paper); }

main {
  max-width: var(--measure);
  margin: 0 auto;
  padding: 3.5rem 1.25rem 3rem;
}

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

h1 {
  font-weight: 450;
  line-height: 1.15;
  letter-spacing: -.012em;
  margin: 0;
  text-wrap: balance;
}

.sep { color: var(--rule); margin: 0 .15em; }
.draft { font-style: italic; color: var(--accent); }

/* maiuscoletto per le etichette dell'interfaccia */
.meta, .entry-meta, .year h2, .comments h2, .share .label, .pager span,
.home-link, .lang-switch, .site-footer {
  font-variant-caps: all-small-caps;
  letter-spacing: .07em;
  font-variant-numeric: oldstyle-nums;
}

.orn {
  display: block;
  text-align: center;
  color: var(--accent);
  font-size: 1.1rem;
  line-height: 1;
  opacity: .85;
}

.draft-banner {
  margin: 0 0 2.5rem;
  padding: .45rem .8rem;
  font-size: .8rem;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--accent);
  background: var(--accent-soft);
  border: 1px dashed var(--accent);
  border-radius: 4px;
  text-align: center;
}

/* --- home --- */

.masthead {
  text-align: center;
  margin: 0 0 3.5rem;
}
.masthead h1 {
  font-size: 3rem;
  font-weight: 400;
  font-style: italic;
  letter-spacing: -.01em;
}
.masthead p {
  margin: .35rem 0 1.4rem;
  color: var(--soft);
  font-variant-caps: all-small-caps;
  letter-spacing: .12em;
  font-size: 1.05rem;
}

.year { margin-bottom: 2.5rem; }
.year h2 {
  display: flex;
  align-items: center;
  gap: .9rem;
  margin: 0 0 1.4rem;
  font-size: 1rem;
  font-weight: 500;
  color: var(--accent);
}
.year h2::after { content: ""; flex: 1; border-top: 1px solid var(--rule); }

.posts { list-style: none; margin: 0; padding: 0; }
.posts li { margin: 0 0 2rem; }
.posts .title {
  font-size: 1.45rem;
  line-height: 1.25;
  color: var(--fg);
  text-decoration: none;
  transition: color .15s;
}
.posts .title:hover { color: var(--accent); }
.excerpt {
  margin: .3rem 0 .35rem;
  color: var(--soft);
  font-style: italic;
  font-size: 1.02rem;
  line-height: 1.55;
}
.entry-meta { margin: 0; color: var(--muted); font-size: .95rem; }
.langs a {
  color: var(--accent);
  text-decoration: none;
  margin-right: .45em;
}
.langs a:hover { text-decoration: underline; }
.empty { text-align: center; color: var(--muted); font-style: italic; }

/* --- racconto --- */

.topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: 2.2rem;
  margin-bottom: 2.4rem;
}
.home .topbar { margin-bottom: 0; }
.theme-toggle {
  display: none;
  align-items: center;
  justify-content: center;
  width: 2.2rem;
  height: 2.2rem;
  margin-right: -.4rem;
  padding: 0;
  color: var(--muted);
  background: none;
  border: 1px solid transparent;
  border-radius: 999px;
  cursor: pointer;
  transition: color .15s, border-color .15s, background .15s;
}
.has-js .theme-toggle { display: inline-flex; }
@media (hover: hover) {
  .theme-toggle:hover { color: var(--accent); border-color: var(--rule); background: var(--paper); }
}
.theme-toggle .icon-sun { display: none; }
:root[data-theme="dark"] .theme-toggle .icon-sun { display: block; }
:root[data-theme="dark"] .theme-toggle .icon-moon { display: none; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .theme-toggle .icon-sun { display: block; }
  :root:not([data-theme="light"]) .theme-toggle .icon-moon { display: none; }
}
body { transition: background-color .25s, color .25s; }

.home-link { font-size: 1rem; }
.home-link a { color: var(--muted); text-decoration: none; transition: color .15s; }
.home-link a:hover { color: var(--accent); }

.story-head { text-align: center; margin-bottom: 2.8rem; }
.story-head h1 { font-size: 2.35rem; margin-bottom: .7rem; }
.mono {
  font-family: ui-monospace, "SF Mono", Menlo, Consolas, "Liberation Mono", monospace;
  font-weight: 500;
  letter-spacing: -.02em;
}
.story-head h1.mono { font-size: 1.85rem; line-height: 1.3; }
.posts .title.mono { font-size: 1.2rem; }
.story-head .meta { margin: 0; color: var(--muted); font-size: 1rem; }
.story-head .orn { margin-top: 1.6rem; }

.lang-switch {
  display: inline-flex;
  margin: 1rem 0 0;
  padding: .15rem;
  font-size: .95rem;
  border: 1px solid var(--rule);
  border-radius: 999px;
}
.lang-switch a, .lang-switch span {
  padding: .1rem .85rem;
  border-radius: 999px;
  text-decoration: none;
}
.lang-switch a { color: var(--muted); }
.lang-switch a:hover { color: var(--accent); }
.lang-switch [aria-current] { background: var(--accent-soft); color: var(--accent); }

.text p { margin: 0; text-wrap: pretty; }

/* giustificato + sillabazione solo con colonna larga (~75 caratteri): sul telefono,
   con ~40 caratteri per riga, verrebbero i "fiumi" bianchi. La lingua della
   sillabazione viene da <article lang="..."> */
@media (min-width: 45rem) {
  .text p {
    text-align: justify;
    -webkit-hyphens: auto;
    hyphens: auto;
    hyphenate-limit-chars: 6 3 3;
  }
}
/* paragrafi separati da uno spazio (piu' leggibile su schermo del rientro da libro) */
.text p + p { margin-top: .85em; }

/* sezioni del racconto (## I, ## II...): numero centrato, come un capitolo */
.text h2 {
  margin: 3.2rem 0 1.6rem;
  text-align: center;
  font-size: 1.15rem;
  font-weight: 500;
  letter-spacing: .18em;
  color: var(--accent);
}
.text > h2:first-child { margin-top: 0; }
.text h2 + p { text-indent: 0; }
.text h2 + p::first-line { font-variant-caps: small-caps; letter-spacing: .03em; }

/* blocchi di codice / terminale */
.text code {
  font-family: ui-monospace, "SF Mono", Menlo, Consolas, "Liberation Mono", monospace;
  font-size: .8em;
  padding: .08em .3em;
  background: var(--accent-soft);
  border-radius: 3px;
  display: inline-block;   /* nel testo giustificato non si allarga */
  text-indent: 0;          /* altrimenti eredita il rientro del paragrafo */
  line-height: 1.35;
}
.text pre {
  margin: 1.5em 0;
  padding: .9rem 1.1rem;
  overflow-x: auto;
  background: var(--paper);
  border: 1px solid var(--rule);
  border-left: 3px solid var(--accent);
  border-radius: 4px;
  font-size: .82rem;
  line-height: 1.55;
}
.text pre code { display: inline; padding: 0; background: none; font-size: inherit; line-height: inherit; white-space: pre; }
.text pre + p { text-indent: 0; }
.text pre a { color: var(--accent); text-decoration: underline; text-underline-offset: .25em; }
.text pre a:hover { text-decoration-thickness: 2px; }
.text .cursor {
  display: inline-block;
  width: .55em;
  height: 1.05em;
  margin-left: .2em;
  vertical-align: -.15em;
  background: var(--accent);
  animation: blink 1.1s steps(1) infinite;
}
@keyframes blink { 50% { opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .text .cursor { animation: none; } }

/* link a un file vero (es. README.md) */
.text .file-link { text-align: center; text-indent: 0; margin: 1.2rem 0; }
.text .file-link a {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  padding: .55rem 1.2rem;
  font-family: ui-monospace, "SF Mono", Menlo, Consolas, "Liberation Mono", monospace;
  font-size: .9rem;
  color: var(--accent);
  text-decoration: none;
  background: var(--paper);
  border: 1px solid var(--rule);
  border-radius: 4px;
  transition: border-color .15s;
}
.text .file-link a::before { content: "📄"; font-size: 1rem; }
.text .file-link a:hover { border-color: var(--accent); }

/* capolettera e prima riga in maiuscoletto, come nei libri */
.text > h2:first-child + p::first-letter,
.text > p:first-child::first-letter {
  float: left;
  font-size: 3.55em;
  line-height: .82;
  padding: .07em .09em 0 0;
  color: var(--accent);
  font-weight: 400;
}
.text > h2:first-child + p::first-line,
.text > p:first-child::first-line {
  font-variant-caps: small-caps;
  letter-spacing: .03em;
}

.text blockquote {
  margin: 1.4em 0;
  padding: 0 0 0 1.2em;
  border-left: 2px solid var(--rule);
  color: var(--soft);
  font-style: italic;
}
.text blockquote p + p { text-indent: 0; margin-top: .8em; }
.text ul, .text ol { margin: 1em 0; padding-left: 1.4em; }

/* "---" nel markdown = cambio di scena */
.text hr {
  border: 0;
  margin: 2.4em 0;
  text-align: center;
  color: var(--accent);
}
.text hr::after { content: "⁂"; font-size: 1.1rem; }
.text hr + p { text-indent: 0; }
.text hr + p::first-line { font-variant-caps: small-caps; letter-spacing: .03em; }

.text figure { margin: 2.4em -0.5rem; }
.text img { display: block; max-width: 100%; height: auto; margin: 0 auto; border-radius: 3px; }
.text figcaption {
  margin-top: .7em;
  text-align: center;
  font-style: italic;
  font-size: .92rem;
  color: var(--muted);
}
.text figure + p { text-indent: 0; }

.text .footnote { margin-top: 3em; font-size: .9rem; color: var(--muted); }
.text .footnote hr { display: none; }

.end {
  text-align: center;
  color: var(--accent);
  margin: 3.2rem 0 2.6rem;
  font-size: 1.1rem;
}

.share {
  margin: 0;
  text-align: center;
  font-size: .95rem;
  color: var(--muted);
  line-height: 2;
}
.share .label { display: block; color: var(--muted); font-size: .95rem; line-height: 1.4; }
.share a { color: var(--soft); text-decoration: none; }
.share a:hover { color: var(--accent); text-decoration: underline; }
.share button {
  font: inherit;
  color: var(--soft);
  background: none;
  border: 0;
  padding: 0;
  cursor: pointer;
}
.share button:hover { color: var(--accent); text-decoration: underline; }
.js-only, #native-share { display: none; }
.has-js .js-only { display: inline; }
.has-js #native-share:not([hidden]) {
  display: inline-block;
  margin-top: .9rem;
  padding: .45rem 1.3rem;
  font-size: 1rem;
  color: var(--accent);
  background: var(--accent-soft);
  border-radius: 999px;
  text-decoration: none;
}

/* --- commenti --- */

.comments {
  margin-top: 3.5rem;
  padding: 1.8rem 1.6rem 1.6rem;
  background: var(--paper);
  border: 1px solid var(--rule);
  border-radius: 6px;
}
.comments h2 {
  font-size: 1.05rem;
  font-weight: 500;
  color: var(--accent);
  margin: 0 0 1.3rem;
}
.comment {
  margin: 0 0 1.6rem;
  padding-left: 1rem;
  border-left: 2px solid var(--accent-soft);
  font-size: 1.02rem;
  line-height: 1.6;
}
.comment p { margin: 0 0 .55em; white-space: pre-line; overflow-wrap: anywhere; }
.comment .comment-meta { margin-bottom: .2rem; font-size: .88rem; color: var(--muted); font-style: italic; }

.notice {
  display: none;
  margin: 0 0 1.2rem;
  padding: .7rem 1rem;
  font-style: italic;
  color: var(--accent);
  background: var(--accent-soft);
  border-radius: 4px;
}
.notice:target { display: block; }

.comments form { margin: 0; }
.comments label {
  display: block;
  margin-bottom: 1.1rem;
  color: var(--soft);
  font-size: .95rem;
}
.comments label span { color: var(--muted); font-style: italic; }
.comments input, .comments textarea {
  display: block;
  width: 100%;
  margin-top: .35rem;
  padding: .7rem .85rem;
  font: inherit;
  font-size: 1.05rem;   /* >=16px: iOS non zooma quando si tocca il campo */
  color: var(--fg);
  background: var(--bg);
  border: 1px solid var(--rule);
  border-radius: 4px;
  -webkit-appearance: none;
  appearance: none;
  transition: border-color .15s, box-shadow .15s;
}
.comments input:focus, .comments textarea:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-soft);
}
.comments textarea { resize: vertical; min-height: 9rem; line-height: 1.55; }
.comments .hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.form-foot {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .6rem 1rem;
  margin: 0;
  color: var(--muted);
  font-size: .9rem;
  font-style: italic;
}
.comments button {
  font: inherit;
  font-size: 1rem;
  font-style: normal;
  color: var(--paper);
  background: var(--accent);
  border: 0;
  border-radius: 999px;
  padding: .5rem 1.6rem;
  cursor: pointer;
  transition: filter .15s;
}
.comments button:hover { filter: brightness(1.1); }

/* --- navigazione --- */

.pager {
  display: flex;
  justify-content: space-between;
  gap: 1.5rem;
  margin-top: 3rem;
  padding-top: 1.6rem;
  border-top: 1px solid var(--rule);
}
.pager a {
  max-width: 48%;
  color: var(--fg);
  text-decoration: none;
  line-height: 1.35;
  transition: color .15s;
}
.pager a:hover { color: var(--accent); }
.pager span { display: block; font-size: .9rem; color: var(--muted); margin-bottom: .25rem; }
.pager .newer { margin-left: auto; text-align: right; }

.site-footer {
  margin-top: 4rem;
  text-align: center;
  font-size: .95rem;
  color: var(--muted);
}
.site-footer p { margin: .8rem 0 0; }
.site-footer a { color: var(--muted); }
.site-footer a:hover { color: var(--accent); }

@media (max-width: 30rem) {
  body { font-size: 1.125rem; }
  main { padding-top: 2.2rem; }
  .masthead h1 { font-size: 2.6rem; }
  .story-head h1 { font-size: 2.05rem; }
  .story-head h1.mono { font-size: 1.45rem; }
  .comments { margin-left: -.5rem; margin-right: -.5rem; padding: 1.4rem 1.1rem; }
  .text figure { margin-left: 0; margin-right: 0; }
}