/* CodyCross Svar: un solo foglio di stile (piano par. 5), in quattro sezioni:
   1. token, 2. base, 3. componenti, 4. pagine. La stampa sta in print.css. */

/* 1. CodyCross Svar: token del design system (piano par. 5).
   Contrasti calcolati su --c-bg. Nessun webfont. */
:root {
  --c-bg: #FBF8F1;
  --c-surface: #FFFFFF;
  --c-ink: #1B1F2A;
  --c-ink-2: #3D4352;
  --c-accent: #1F3F8F;
  --c-accent-strong: #162E6B;
  --c-accent-soft: #EEF1F8;
  --c-tile: #FFD45C;
  --c-tile-ink: #1B2D6B;
  --c-tile-edge: #E3A812;
  --c-tile-soft: #FFF3CF;
  --c-line: #E4DCCB;
  --c-border-ui: #6B6457;
  --c-hover: #F4EFE3;

  --font: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif;
  --fs-base: 1.125rem;
  --fs-meta: 1.0625rem;
  --fs-small: 1rem;
  --fs-h1: clamp(1.75rem, 1.5rem + 1.2vw, 2.375rem);
  --fs-h2: clamp(1.375rem, 1.25rem + .6vw, 1.75rem);
  --fs-h3: 1.1875rem;
  --lh: 1.6;
  --lh-tight: 1.25;

  --s-1: .25rem;
  --s-2: .5rem;
  --s-3: .75rem;
  --s-4: 1rem;
  --s-5: 1.25rem;
  --s-6: 1.5rem;
  --s-8: 2rem;
  --s-10: 2.5rem;
  --s-12: 3rem;
  --s-16: 4rem;

  --measure: 46rem;
  --wide: 72rem;
  --radius: 10px;
  --radius-sm: 6px;
  --tap: 3rem;
  --row: 3.5rem;
  --shadow: 0 1px 0 var(--c-line);
}

/* 2. Base: reset leggero, tipografia, link, focus, layout di pagina. */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--c-bg);
  color: var(--c-ink);
  font-family: var(--font);
  font-size: var(--fs-base);
  line-height: var(--lh);
  overflow-wrap: break-word;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}
@media (min-width: 768px) { :root { --fs-base: 1.1875rem; } }
@media (min-width: 1200px) { :root { --fs-base: 1.25rem; } }

h1, h2, h3 { line-height: var(--lh-tight); margin: 0 0 var(--s-4); text-wrap: balance; }
h1 { font-size: var(--fs-h1); font-weight: 700; letter-spacing: -.01em; }
h2 { font-size: var(--fs-h2); font-weight: 600; margin-top: var(--s-10); }
h3 { font-size: var(--fs-h3); font-weight: 600; margin-top: var(--s-6); }
p, ul, ol, dl { margin: 0 0 var(--s-4); }
ul, ol { padding-left: 1.4em; }
li + li { margin-top: var(--s-1); }
strong, b { font-weight: 700; }
img, svg { max-width: 100%; height: auto; }
hr { border: 0; border-top: 1px solid var(--c-line); margin: var(--s-8) 0; }
small { font-size: var(--fs-small); }

a { color: var(--c-accent); text-decoration: underline; text-decoration-thickness: .08em; text-underline-offset: .15em; }
a:hover { color: var(--c-accent-strong); text-decoration-thickness: .14em; }

:focus-visible { outline: 3px solid var(--c-accent); outline-offset: 2px; }
:focus:not(:focus-visible) { outline: none; }

button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; }

.skip-link {
  position: absolute; left: var(--s-2); top: var(--s-2); z-index: 10;
  padding: var(--s-3) var(--s-4); background: var(--c-accent); color: #fff; border-radius: var(--radius-sm);
  transform: translateY(-200%);
}
.skip-link:focus { transform: none; color: #fff; }

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

/* Colonna unica, calma: tutto allineato a sinistra nella stessa misura. */
.wrap { width: 100%; max-width: calc(var(--measure) + 2 * var(--s-5)); margin-inline: auto; padding-inline: var(--s-4); }
@media (min-width: 600px) { .wrap { padding-inline: var(--s-5); } }
.site-main { flex: 1 0 auto; padding-block: var(--s-6) var(--s-12); }
.site-main > :last-child { margin-bottom: 0; }

.lead { font-size: 1.1em; color: var(--c-ink); margin-bottom: var(--s-6); }
.muted { color: var(--c-ink-2); }
.meta { font-size: var(--fs-meta); color: var(--c-ink-2); }
.stack > * + * { margin-top: var(--s-4); }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition: none !important; animation: none !important; scroll-behavior: auto !important; }
}

/* 3. Componenti (contratto Twig nel piano par. 8.4). */

/* Header: non sticky, navigazione sempre visibile. */
.site-header { background: var(--c-surface); border-bottom: 1px solid var(--c-line); }
.site-header__inner {
  display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--s-3);
  padding-block: var(--s-4);
}
.brand {
  display: inline-flex; flex-wrap: wrap; align-items: center; column-gap: var(--s-3); row-gap: var(--s-1);
  min-height: var(--tap); color: var(--c-ink); text-decoration: none; justify-self: start;
}
.brand:hover { color: var(--c-ink); }
.brand img { display: block; width: auto; height: 2rem; }
.brand__tag { font-size: var(--fs-meta); color: var(--c-ink-2); font-weight: 600; }
.main-nav ul { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: var(--s-2); }
.main-nav li { margin: 0; }
.search--header { display: none; }
/* Da 960px una riga sola: logo più grande a sinistra, ricerca in mezzo (non in home), pillole a destra.
   Fino a 1199px il sottotitolo va sotto il logo, per lasciare spazio alla ricerca. */
@media (min-width: 960px) {
  .site-header__inner { grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; column-gap: var(--s-6); }
  .brand { grid-column: 1; flex-direction: column; align-items: flex-start; }
  .brand img { height: 2.5rem; }
  .search--header { display: block; grid-column: 2; justify-self: center; width: min(100%, 24rem); }
  .main-nav { grid-column: 3; justify-self: end; }
  .main-nav .nav-search { display: none; }
}
@media (min-width: 1200px) { .brand { flex-direction: row; align-items: center; } }
/* Sotto i 600px header compatto: il sottotitolo resta solo per i lettori di schermo (stesso nome
   del link a ogni larghezza), pillole strette su una riga a 360px; a 320px e con lo zoom vanno
   a capo. Bersagli sempre da 48px, 8px tra l'uno e l'altro. */
@media (max-width: 599.98px) {
  .site-header__inner { padding-block: var(--s-3) var(--s-4); }
  .brand__tag {
    position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0;
    overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
  }
  .main-nav .pill { padding-inline: .5em; }
}

/* Pillole e bottoni: bersagli da 48px. */
.pill, .btn, .button {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--s-2);
  min-height: var(--tap); padding: .45em 1.1em; border-radius: 999px;
  font-weight: 600; line-height: 1.2; text-align: center; text-decoration: none;
  border: 2px solid var(--c-accent);
}
.pill { color: var(--c-accent); background: var(--c-surface); }
.pill:hover { background: var(--c-accent-soft); color: var(--c-accent-strong); }
.pill[aria-current="page"] { background: var(--c-accent); color: #fff; }
.btn, .button { border-radius: var(--radius); }
.btn--primary { background: var(--c-accent); color: #fff; }
.btn--primary:hover { background: var(--c-accent-strong); border-color: var(--c-accent-strong); color: #fff; }
.btn--secondary, .button { background: var(--c-surface); color: var(--c-accent); }
.btn--secondary:hover, .button:hover { background: var(--c-accent-soft); color: var(--c-accent-strong); }

/* Ricerca */
.search { margin: 0; }
.search__label { display: block; font-weight: 600; margin-bottom: var(--s-2); }
.search__row { display: flex; flex-wrap: wrap; gap: var(--s-2); }
.search__input {
  flex: 1 1 12rem; min-width: 0; min-height: var(--tap); padding: .4em .75em;
  background: var(--c-surface); border: 2px solid var(--c-border-ui); border-radius: var(--radius);
}
.search__input:focus-visible { border-color: var(--c-accent); }
.search__row .btn { flex: 0 0 auto; padding-inline: 1.4em; }
.search--hero .search__input, .search--hero .btn { min-height: 3.5rem; }
.search--hero .search__label { font-size: var(--fs-h3); }
.search--header .search__input { padding-block: .25em; }

/* Breadcrumb: va a capo, mai scroll orizzontale. */
.breadcrumb { font-size: var(--fs-meta); margin-bottom: var(--s-4); }
.breadcrumb ol { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; align-items: center; column-gap: var(--s-2); }
.breadcrumb li { margin: 0; display: inline-flex; align-items: center; gap: var(--s-2); }
.breadcrumb a, .breadcrumb li > span:first-child { display: inline-flex; align-items: center; min-height: var(--tap); }
.breadcrumb a { padding-inline: .4rem; margin-inline: -.4rem; }
.breadcrumb__sep { color: var(--c-ink-2); }
.breadcrumb [aria-current="page"] { color: var(--c-ink-2); }
/* Sulle pagine risposta la voce corrente è già nell'h1. */
.breadcrumb--compact { font-size: 1.125rem; }
.breadcrumb--compact ol { flex-wrap: nowrap; column-gap: var(--s-1); }
.breadcrumb--compact li { flex: 0 1 auto; min-width: max-content; gap: var(--s-1); }
/* Il mondo o l'hub giornaliero può accorciarsi, i livelli brevi restano interi. */
.breadcrumb--compact li:nth-child(1) { min-width: calc(var(--tap) + 1rem); }
.breadcrumb--compact a, .breadcrumb--compact li > span:not(.breadcrumb__sep) {
  display: block; min-width: 0; padding-inline: 0; margin-inline: 0;
  line-height: var(--tap); overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
/* Bersaglio largo almeno 48px senza spazio vuoto: padding compensato da margine negativo. */
.breadcrumb--compact a { flex: 0 1 auto; padding-inline: .5rem; margin-inline: -.5rem; }
.breadcrumb--compact li:first-child a { padding-inline-start: 0; margin-inline-start: 0; }
.breadcrumb--compact .breadcrumb__sep { flex: 0 0 auto; }

/* Risposta: tessere gialle con container query. */
.answer {
  container-type: inline-size;
  background: var(--c-surface); border: 1px solid var(--c-line); border-radius: var(--radius);
  padding: var(--s-5) var(--s-4); margin-block: var(--s-6);
}
@media (min-width: 600px) { .answer { padding: var(--s-8) var(--s-8) var(--s-6); } }
.answer__title { font-size: var(--fs-meta); font-weight: 600; color: var(--c-ink-2); margin: 0 0 var(--s-4); }
.answer__tiles {
  --gap: .25rem;
  --t: max(1.75rem, min(3.25rem, calc((100cqi - (var(--n) - 1) * var(--gap) - 2px) / var(--n))));
  display: flex; flex-wrap: wrap; gap: var(--s-3) calc(var(--t) * .55);
  margin-bottom: var(--s-5);
}
.answer__word { display: flex; flex-wrap: wrap; gap: var(--gap); }
.tile {
  display: grid; place-items: center; width: var(--t); height: var(--t);
  padding-bottom: 3px; border-radius: calc(var(--t) * .16);
  background: var(--c-tile); color: var(--c-tile-ink); box-shadow: inset 0 -3px 0 var(--c-tile-edge);
  font-size: calc(var(--t) * .6); font-weight: 800; line-height: 1;
}
.answer__meta { display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--s-2) var(--s-3); margin-bottom: var(--s-5); }
.answer__text { font-size: max(1em, min(1.25em, 5.5cqi)); letter-spacing: .03em; overflow-wrap: anywhere; }
.answer__count {
  font-weight: 700; padding: .1em .6em; border-radius: var(--radius-sm);
  background: var(--c-tile-soft); color: var(--c-tile-ink); white-space: nowrap;
}
.answer__actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-3); }
.toast { margin: 0; min-height: 1.6em; font-weight: 600; color: var(--c-ink); }

/* Liste a righe intere cliccabili. */
.clue-list, .link-list, .group-list, .world-grid { list-style: none; margin: 0 0 var(--s-6); padding: 0; }
.clue-list, .link-list, .group-list {
  background: var(--c-surface); border: 1px solid var(--c-line); border-radius: var(--radius);
}
.clue-list > li, .link-list > li, .group-list > li { margin: 0; }
.clue-list > li + li, .link-list > li + li, .group-list > li + li { border-top: 1px solid var(--c-line); }
.row-link {
  display: flex; align-items: center; gap: var(--s-3); min-height: var(--row);
  padding: var(--s-3) var(--s-4); color: var(--c-ink); text-decoration: none;
}
.row-link::after { content: "›"; content: "›" / ""; flex: 0 0 auto; font-size: 1.4em; line-height: 1; color: var(--c-accent); }
.row-link:hover { background: var(--c-hover); color: var(--c-ink); }
.row-link:focus-visible { outline-offset: -3px; }
.row-link__body {
  flex: 1 1 auto; min-width: 0; display: flex; flex-wrap: wrap; align-items: baseline;
  justify-content: space-between; gap: var(--s-1) var(--s-4);
}
.row-link__main { flex: 1 1 20rem; min-width: 0; color: var(--c-accent); font-weight: 500; }
.row-link:hover .row-link__main { text-decoration: underline; text-underline-offset: .15em; }
.row-link__side { flex: 0 1 auto; min-width: 0; max-width: 100%; text-align: right; }
.row-link__answer { font-weight: 700; letter-spacing: .04em; overflow-wrap: anywhere; }
.row-link__count { font-size: var(--fs-meta); color: var(--c-ink-2); white-space: nowrap; }
.row-link__context { font-size: var(--fs-meta); color: var(--c-ink-2); }
/* Riga senza link: niente hover, testo nel colore normale; la freccia non si vede ma tiene
   il suo spazio, così la risposta resta allineata con le righe con link. */
.row-link.row-link--static::after { visibility: hidden; }
.row-link.row-link--static:hover { background: none; }
.row-link.row-link--static .row-link__main { color: var(--c-ink); }
.row-link.row-link--static:hover .row-link__main { text-decoration: none; }
@media (max-width: 599.98px) {
  .row-link__body { flex-direction: column; }
  .row-link__main, .row-link__side { flex: none; text-align: left; }
}

/* link-list con link semplici (senza .row-link): riga con area di tocco piena. */
.link-list > li:not(:has(> .row-link)) { min-height: var(--row); padding: var(--s-1) var(--s-4); }
/* Link fuori da una frase: bersaglio di almeno 48px. .link-solo per un link da solo in un paragrafo. */
.link-list > li > a:not(.row-link), .link-solo { display: inline-flex; align-items: center; min-height: var(--tap); }
.link-list > li > .meta { display: block; margin: 0 0 var(--s-2); }
@media (min-width: 600px) { .link-list > li > .meta { display: inline; margin: 0 0 0 var(--s-2); } }

/* Pager con etichette di testo. */
.pager { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--s-3); margin-block: var(--s-8); }
@media (min-width: 600px) { .pager { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.pager__link {
  display: flex; align-items: center; gap: var(--s-3); min-height: var(--row);
  padding: var(--s-3) var(--s-4); background: var(--c-surface); color: var(--c-ink); text-decoration: none;
  border: 2px solid var(--c-accent); border-radius: var(--radius);
}
.pager__link:hover { background: var(--c-accent-soft); color: var(--c-ink); }
.pager__link--next { flex-direction: row-reverse; text-align: right; }
@media (min-width: 600px) { .pager__link--next { grid-column: 2; } }
.pager__arrow { flex: 0 0 auto; font-size: 1.6em; line-height: 1; color: var(--c-accent); }
.pager__text { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; }
.pager__label { font-weight: 700; color: var(--c-accent); }
.pager__sub { font-size: var(--fs-meta); color: var(--c-ink-2); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* Griglia dei mondi: card da almeno 16rem, quindi 2 colonne nella colonna di lettura (404, ricerca).
   Nelle pagine larghe (home) 1 colonna, 2 da 600px, 3 da 960px: i 6 mondi fanno due righe piene. */
.world-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 16rem), 1fr)); gap: var(--s-3); }
.site-main--wide .world-grid { grid-template-columns: minmax(0, 1fr); }
@media (min-width: 600px) { .site-main--wide .world-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 960px) { .site-main--wide .world-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.world-grid > li { margin: 0; container-type: inline-size; }
.world-card {
  display: flex; align-items: center; gap: var(--s-4); height: 100%; min-height: 4.5rem;
  padding: var(--s-3) var(--s-4); background: var(--c-surface); color: var(--c-ink); text-decoration: none;
  border: 1px solid var(--c-line); border-radius: var(--radius);
}
.world-card:hover { border-color: var(--c-accent); background: var(--c-hover); color: var(--c-ink); }
.world-card__tile { --t: 2.75rem; flex: 0 0 auto; }
/* Illustrazione su carta --c-bg: nella card bianca resta un riquadro color carta, voluto, con gli angoli tondi.
   96px solo nelle card da 18rem in su, così accanto resta sempre posto per il nome intero. */
.world-card__art { flex: 0 0 auto; display: block; width: 4.5rem; height: 4.5rem; border-radius: var(--radius-sm); }
@container (min-width: 18rem) { .world-card__art { width: 6rem; height: 6rem; } }
.world-card__body { min-width: 0; display: flex; flex-direction: column; }
/* Un nome di mondo non si spezza mai a metà parola. */
.world-card__title { font-weight: 700; color: var(--c-accent); line-height: var(--lh-tight); overflow-wrap: normal; hyphens: manual; }
.world-card:hover .world-card__title { text-decoration: underline; text-underline-offset: .15em; }
.world-card__meta { font-size: var(--fs-meta); color: var(--c-ink-2); }

/* Riga del gruppo con i bottoni dei puzzle: da sola (righe sorelle) o dentro .group-list. */
.group-row { background: var(--c-surface); border: 1px solid var(--c-line); }
.group-row:first-of-type { border-radius: var(--radius) var(--radius) 0 0; }
.group-row:last-of-type { border-radius: 0 0 var(--radius) var(--radius); margin-bottom: var(--s-6); }
.group-row:only-of-type { border-radius: var(--radius); }
.group-row + .group-row { border-top: 0; }
.group-list .group-row { background: none; border: 0; border-radius: 0; margin: 0; }
.group-row { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--s-2) var(--s-4); padding: var(--s-3) var(--s-4); }
.group-row__title { margin: 0; font-size: 1em; font-weight: 700; }
.group-row__title a { display: inline-flex; align-items: center; min-height: var(--tap); }
.group-row__puzzles { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-2); }
.group-row__label { font-size: var(--fs-meta); color: var(--c-ink-2); margin-right: var(--s-1); }
@media (max-width: 479.98px) { .group-row__label { display: none; } }
.puzzle-buttons { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: var(--s-2); }
.puzzle-buttons li { margin: 0; }
.puzzle-btn {
  display: grid; place-items: center; width: var(--tap); height: var(--tap); padding-bottom: 3px;
  border-radius: var(--radius-sm); background: var(--c-tile); color: var(--c-tile-ink);
  box-shadow: inset 0 -3px 0 var(--c-tile-edge); font-weight: 800; font-size: 1.15em; text-decoration: none;
}
.puzzle-btn:hover { background: #FFC933; color: var(--c-tile-ink); }
a.puzzle-btn--soon { cursor: pointer; }
.group-row__note { flex-basis: 100%; margin: 0; font-size: var(--fs-meta); color: var(--c-ink-2); }
.jump { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-2) var(--s-3); margin-bottom: var(--s-6); }
.jump__label { font-size: var(--fs-meta); color: var(--c-ink-2); }
.puzzle-btn--soon { background: transparent; box-shadow: none; border: 2px dashed var(--c-border-ui); color: var(--c-ink-2); font-weight: 600; cursor: default; }
/* Puzzle corrente (pagina del puzzle): tessera rovesciata, lettera gialla su blu notte (9,1:1), senza link. */
.puzzle-btn--current { background: var(--c-tile-ink); color: var(--c-tile); box-shadow: none; cursor: default; }
.group-puzzles { margin-bottom: var(--s-6); }
.group-puzzles__note { margin: var(--s-3) 0 0; font-size: var(--fs-meta); color: var(--c-ink-2); }

/* Uppdaterad */
.updated { font-size: var(--fs-meta); color: var(--c-ink-2); margin-block: var(--s-6); }

/* Annuncio: spazio riservato, mai nascosto. */
.ad-slot { margin-block: var(--s-8); min-height: 300px; }
@media (min-width: 768px) { .ad-slot { min-height: 280px; } }
.ad-slot__label { display: block; font-size: var(--fs-small); color: var(--c-ink-2); margin-bottom: var(--s-1); }
.ad-slot--preview { border: 2px dashed var(--c-line); border-radius: var(--radius); padding: var(--s-2) var(--s-3); }

/* Consenso: bottom sheet con bottoni di pari peso. */
.consent {
  width: 100%; max-width: calc(var(--measure) + 2 * var(--s-5)); max-height: 90vh; margin: auto auto 0;
  padding: var(--s-6) var(--s-5); border: 0; border-top: 4px solid var(--c-accent); border-radius: var(--radius) var(--radius) 0 0;
  background: var(--c-surface); color: var(--c-ink);
}
.consent::backdrop { background: rgba(27, 31, 42, .45); }
.consent__title { margin-top: 0; font-size: var(--fs-h2); }
.consent__title:focus { outline: none; }
.consent__actions { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--s-3); margin-top: var(--s-5); }
@media (min-width: 600px) { .consent__actions { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* Footer */
.site-footer { background: var(--c-surface); border-top: 1px solid var(--c-line); padding-block: var(--s-8) var(--s-10); font-size: var(--fs-meta); color: var(--c-ink-2); }
.site-footer p { margin-bottom: var(--s-3); }
.footer-nav ul { list-style: none; margin: 0 0 var(--s-4); padding: 0; display: flex; flex-wrap: wrap; gap: 0 var(--s-5); }
.footer-nav li { margin: 0; }
.footer-nav a, .footer-nav button { display: inline-flex; align-items: center; min-height: var(--tap); }
.footer-nav button { background: none; border: 0; padding: 0; color: var(--c-accent); text-decoration: underline; text-underline-offset: .15em; }
.site-footer__publisher { color: var(--c-ink); font-weight: 600; }
.site-footer__legal { font-size: var(--fs-small); }

/* Dati dell'editore come immagine (components/_publisher): larghezza in em per seguire il testo intorno.
   A 1x: riga 209x22 a 17px (baseline 5px sopra il bordo), blocco 209x144 a 18px, email 153x24 a 18px (baseline 6px). */
.publisher-img--line { width: 12.294em; vertical-align: -.294em; }
.publisher-img--email { width: 8.5em; vertical-align: -.333em; }
.publisher-img--card { display: block; width: 11.611em; }

@media (forced-colors: active) {
  .tile, .puzzle-btn, .answer__count { border: 1px solid CanvasText; }
  .pill[aria-current="page"] { border-width: 4px; }
  .puzzle-btn--current { border-width: 4px; }
  .publisher-img { forced-color-adjust: none; background: #FFFFFF; }
}

/* 4. Pagine: blocchi ricorrenti per home, liste, 404 e pagine statiche. */
.site-main--answer .answer, .site-main--answer .pager { margin-block: var(--s-4); }

.page-head { margin-bottom: var(--s-6); }
.page-head h1 { margin-bottom: var(--s-3); }
.page-head .lead { margin-bottom: 0; }

.section { margin-block: var(--s-10); }
.section > h2:first-child { margin-top: 0; }
.section__head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: var(--s-2) var(--s-4); margin-bottom: var(--s-4); }
.section__head h2 { margin: 0; }

/* Home: ricerca grande in apertura. */
.hero { margin-bottom: var(--s-8); }
.hero .search { margin-top: var(--s-6); }

/* Home: titolo, testo e ricerca con l'illustrazione. Sotto i 960px una fascia bassa sotto la ricerca
   (circa 118px a 390), centrata e larga al massimo 30rem; da 960px l'illustrazione intera a destra.
   aspect-ratio esplicito: niente spostamenti. */
.home-hero__art { display: block; margin-top: var(--s-4); }
.home-hero__art img { display: block; width: min(100%, 30rem); height: auto; aspect-ratio: 1080 / 357; margin-inline: auto; }
@media (min-width: 960px) {
  .home-hero { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 22rem); gap: var(--s-8); align-items: center; }
  .home-hero__art { margin: 0; }
  .home-hero__art img { height: auto; aspect-ratio: 1120 / 876; }
}
@media (min-width: 1200px) { .home-hero { grid-template-columns: minmax(0, 1fr) minmax(0, 26rem); gap: var(--s-12); } }

/* Riquadro (es. Dagens korsord); .today-box è la variante gialla usata dalla home. */
.box, .today-box {
  background: var(--c-surface); border: 1px solid var(--c-line); border-radius: var(--radius);
  padding: var(--s-5) var(--s-4); margin-block: var(--s-6);
}
@media (min-width: 600px) { .box, .today-box { padding: var(--s-6); } }
.box > :first-child, .today-box > :first-child { margin-top: 0; }
.box > :last-child, .today-box > :last-child { margin-bottom: 0; }
.box__title { font-size: var(--fs-h2); font-weight: 700; line-height: var(--lh-tight); margin: 0 0 var(--s-2); }
.box__date { font-size: 1.1em; font-weight: 600; margin-bottom: var(--s-4); }
.box--tile, .today-box { background: var(--c-tile-soft); border-color: var(--c-tile-edge); }
.fact-card { padding: 0; color: var(--c-ink); background: var(--c-surface); border-color: var(--c-tile-edge); }
.fact-card__header { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; gap: var(--s-4); padding: var(--s-4); background: var(--c-tile); color: var(--c-tile-ink); border-radius: calc(var(--radius) - 1px) calc(var(--radius) - 1px) 0 0; }
.fact-card__art { display: block; width: 72px; height: 72px; aspect-ratio: 1; padding: var(--s-1); background: var(--c-surface); border-radius: var(--s-5); }
.fact-card__title { margin: 0; font-size: 1.625rem; font-weight: 700; }
.fact-card__body { padding: var(--s-5) var(--s-4); }
@media (min-width: 480px) { .fact-card__art { width: 96px; height: 96px; } }
@media (min-width: 600px) {
  .fact-card__header, .fact-card__body { padding: var(--s-6); }
}
.fact-card__text { font-size: 1.25rem; line-height: 1.7; white-space: pre-line; }
.fact-card__source { border-top: 1px solid var(--c-line); padding-top: var(--s-2); color: var(--c-ink-2); font-size: var(--fs-small); }
.fact-card__attribution { text-wrap: pretty; }
.fact-card__license { margin: 0; white-space: nowrap; }
.fact-card__attribution { margin: 0; }
.fact-card__adaptation { margin: var(--s-2) 0 0; }
.fact-card__source a { display: inline-block; vertical-align: middle; min-width: var(--tap); min-height: var(--tap); padding-block: .7rem; color: var(--c-ink-2); max-width: 100%; overflow-wrap: anywhere; }
/* Home: il titolo sopra il riquadro, come per gli ultimi pussel accanto; nel riquadro l'illustrazione
   (sfondo trasparente) accanto al testo. Il riquadro è largo quanto il contenuto; da 1200px si allunga
   fino in fondo alla lista accanto. */
.home-today > .today-box { margin-top: 0; width: fit-content; max-width: 100%; }
.today-box--art { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: var(--s-4); align-items: center; }
.today-box__art { display: block; width: 6rem; height: 6rem; }
@media (min-width: 600px) { .today-box--art { gap: var(--s-6); padding-right: var(--s-8); } .today-box__art { width: 7.5rem; height: 7.5rem; } }
@media (min-width: 1200px) { .today-box__art { width: 13.75rem; height: 13.75rem; } }

/* Mondo: illustrazione accanto all'H1; sotto i 960px il testo introduttivo va sotto, a tutta larghezza. */
.world-head--art { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 0 var(--s-4); align-items: center; margin-bottom: var(--s-6); }
.world-head__art { display: block; width: 5rem; height: 5rem; }
.world-head--art h1 { margin: 0; }
.world-head--art .lead { grid-column: 1 / -1; margin: var(--s-4) 0 0; }
@media (min-width: 960px) {
  .world-head--art { column-gap: var(--s-6); }
  .world-head__art { grid-row: span 2; width: 7.5rem; height: 7.5rem; }
  .world-head--art h1 { align-self: end; }
  .world-head--art .lead { grid-column: 2; align-self: start; margin-top: var(--s-2); }
}

/* "Ledtråden finns i": percorso con link da 48px che va a capo. */
.where a, .today-box p a { display: inline-flex; align-items: center; min-height: var(--tap); }

/* Pagine di testo e legali */
.prose { max-width: var(--measure); }
.prose h2 { margin-top: var(--s-8); }
.prose ul { padding-left: 1.2em; }
.prose li::marker { color: var(--c-ink-2); }
.facts { margin: 0 0 var(--s-6); display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--s-1) var(--s-5); }
.facts dt { font-weight: 700; margin-top: var(--s-3); }
.facts dd { margin: 0; }
@media (min-width: 600px) {
  .facts { grid-template-columns: max-content minmax(0, 1fr); }
  .facts dt { margin-top: 0; }
}
.company { font-size: var(--fs-meta); color: var(--c-ink-2); border-top: 1px solid var(--c-line); padding-top: var(--s-4); margin-top: var(--s-10); }

/* 404 e 410: ricerca e mondi a portata di mano. */
.not-found .search { margin-block: var(--s-6) var(--s-8); }

/* Desktop da 960px: header, footer e main larghi fino a --wide (serve all'header su una riga e ai mondi
   su tre colonne). Le pagine di lettura (svar, pussel, ricerca, archivio, testi, errori) restano nella
   colonna di sempre, allineata a sinistra con il logo. Paragrafi entro 70ch. */
@media (min-width: 960px) {
  .wrap { max-width: calc(var(--wide) + 2 * var(--s-5)); }
  .site-main:not(.site-main--wide) > * { max-width: var(--measure); }
  .site-main p, .site-footer p { max-width: 70ch; }
  .site-main--wide .recent-days { max-width: var(--measure); }
}

/* Da 1200px home, mondo, gruppo e giorni (site-main--wide) usano due colonne. */
@media (min-width: 1200px) {
  /* Home: Dagens korsord e ultimi pussel affiancati e alti uguali (sotto i 1200px la data degli ultimi
     pussel andrebbe a capo e il riquadro resterebbe vuoto); i mondi sotto, a tutta larghezza. */
  .home-top { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 var(--s-12); align-items: stretch; margin-top: var(--s-10); }
  .home-today { display: flex; flex-direction: column; }
  .home-today > .today-box { flex: 1 1 auto; width: auto; margin: 0; }
  .home-top > section > h2:first-child { margin-top: 0; }
  .home-top .link-list { margin-bottom: 0; }

  /* Mondo: righe dei gruppi a due colonne, ognuna con il suo bordo. */
  .group-rows { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s-3); margin-bottom: var(--s-6); }
  .group-rows > .group-row { border: 1px solid var(--c-line); border-radius: var(--radius); margin: 0; }

  /* Gruppo e giorni: pussel o korsord affiancati. Gli elementi della griglia non uniscono i margini,
     quindi il titolo scende meno per restare alla distanza di sempre dal testo sopra. */
  .column-sections { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 var(--s-8); align-items: start; }
  .column-sections > section > h2:first-child { margin-top: var(--s-4); }
}