/* =====================================================================
   Anthemon Fellowship — ALTRE PAGINE E PIEDE
   ---------------------------------------------------------------------
   Mobile-first: le regole base valgono per gli schermi piccoli, i blocchi
   @media (min-width: …) aggiungono quelle per i grandi.

   Contenuto:
     10d. Epteka, about, contact
    11. Footer
    12. Stub delle pagine interne
    13. Reveal e reduced motion

   L'ORDINE DEI FILE CONTA. Questo foglio era uno solo e la cascata ne
   dipende: piu' di una regola vince per posizione, non per specificita'.
   I file vanno caricati nell'ordine del numero in testa al nome, ed e'
   quello che fa includes/header.php. Vedi css/README.md prima di
   aggiungerne, rinominarne o riordinarne uno.
   ===================================================================== */
/* ---------- 10d. EPTEKA / ABOUT / CONTACT PAGES ---------- */

/* Anchor targets ("Read the preview", "Get the book") must never end up
   hidden under the fixed navbar after the jump */
main section[id] { scroll-margin-top: calc(var(--header-h) + 1rem); }

/* Epteka teaser hero: same hero as the homepage (same video machinery,
   same gradient fallback), just shorter (~80vh per the instructions) */
.hero-short {
  min-height: 80vh;
  min-height: 80svh;
}

/* --- Manifesto: short text, generous air, an ornament (epteka + about) --- */
.manifesto {
  padding-block: clamp(5rem, 10vw, 7.5rem);
  text-align: center;
}
.manifesto p {
  max-width: 60ch;
  margin: 0 auto 1.5rem;
  font-size: 1.25rem;
}
.manifesto p:last-child { margin-bottom: 0; }

/* --- How it works: petrol section, azure-accented cards --- */
.inside-epteka { background: var(--epteka); }
.inside-epteka .feature-card h3 { color: var(--epteka-azure); }

/* --- The masterpieces: tease + two item mini-cards --- */
.masterpieces {
  padding-block: var(--section-pad);
  text-align: center;
}
.masterpieces .tease {
  max-width: 60ch;
  margin: 0 auto;
}
.master-grid {
  display: grid;
  gap: 1.25rem;
  max-width: 44rem;
  margin: 2.5rem auto 1.75rem;
}
@media (min-width: 640px) { .master-grid { grid-template-columns: 1fr 1fr; } }
.master-grid .mini-card { margin: 0; max-width: none; text-align: left; }
.master-grid .mini-card p { margin-bottom: 0; }
.master-more {
  font-style: italic;
  opacity: 0.8;
  margin: 0;
}

/* --- Dark variant of the page-flip viewer (Turn the pages on petrol) --- */
.pages-dark {
  background: var(--epteka);
  color: var(--warm-white);
}
.pages-dark .viewer-tab {
  color: var(--warm-white);
  border-color: rgba(184, 152, 104, 0.55);
}
.pages-dark .viewer-tab:hover { border-color: var(--gold); }
.pages-dark .viewer-tab.is-active { color: var(--ink); } /* gold bg stays */

/* Epteka viewer placeholders. TODO(assets): viewer-epteka-1..3.jpg */
.vpage-epteka-1 { background-image: url("../assets/img/viewer-epteka-1.jpg"), radial-gradient(ellipse at 25% 30%, rgba(127, 184, 216, 0.4), transparent 55%), linear-gradient(120deg, #16262e, var(--epteka)); }
.vpage-epteka-2 { background-image: url("../assets/img/viewer-epteka-2.jpg"), radial-gradient(ellipse at 75% 55%, rgba(74, 104, 144, 0.6), transparent 55%), linear-gradient(160deg, #1a2c34, var(--epteka-steel)); }
.vpage-epteka-3 { background-image: url("../assets/img/viewer-epteka-3.jpg"), radial-gradient(ellipse at 60% 20%, rgba(127, 184, 216, 0.5), transparent 50%), linear-gradient(200deg, var(--epteka), #121e24); }

/* --- Read the preview: frictionless download section --- */
.preview-dl {
  padding-block: var(--section-pad);
  text-align: center;
}
.preview-dl p { max-width: 52ch; margin: 0 auto 2rem; }
.preview-note {
  font-style: italic;
  opacity: 0.75;
  margin: 1.5rem auto 0 !important;
}

/* --- Join the launch list: centered form section --- */
.launch-list {
  padding-block: var(--section-pad);
  text-align: center;
}
.launch-list > .container > p:not(.eyebrow) { max-width: 56ch; margin: 0 auto 2rem; }
.launch-list .subscribe-form { margin-inline: auto; }

/* --- Road to Kickstarter: three-step horizontal timeline --- */
.roadmap {
  padding-block: var(--section-pad);
  background: var(--epteka);
  color: var(--warm-white);
  text-align: center;
}

/* La riga di track record sotto il pulsante Kickstarter (rev. 12 §H).
   Stesso registro della .hero-note della home: corpo piccolo, bianco tenuto
   indietro con l'opacita'. E' una nota a margine di una promessa, non una
   seconda chiamata all'azione — se pesasse quanto il pulsante verde gli
   toglierebbe l'attenzione invece di dargliela. */
.track-record {
  margin: 1.1rem 0 0;
  font-size: 0.9375rem;
  opacity: 0.72;
}
.timeline {
  position: relative;
  display: flex;
  flex-direction: column; /* mobile: stacked steps, no connecting line */
  gap: 2.25rem;
  max-width: 900px;
  margin: 3rem auto 2.75rem;
}
.timeline-step { flex: 1; }
.timeline-diamond {
  width: 10px;
  height: 10px;
  margin: 0 auto 1.1rem;
  background: var(--gold);
  transform: rotate(45deg);
  /* a petrol halo, so the connecting line doesn't cut through the diamond */
  box-shadow: 0 0 0 8px var(--epteka);
  position: relative;
}
.timeline-label {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 1.0625rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--gold);
  margin: 0 0 0.5rem;
}
.timeline-text {
  font-size: 1rem;
  opacity: 0.9;
  max-width: 26ch;
  margin: 0 auto;
}
@media (min-width: 800px) {
  .timeline { flex-direction: row; gap: 2rem; }
  /* the thin gold line joining the three diamonds */
  .timeline::before {
    content: "";
    position: absolute;
    top: 5px; /* the diamonds are 10px tall: this is their center */
    left: 12%;
    right: 12%;
    height: 1px;
    background: rgba(184, 152, 104, 0.5);
  }
}

/* --- Mini FAQ: styled details/summary accordion, no JS --- */
.faq {
  padding-block: var(--section-pad);
  text-align: center;
}
.faq-list {
  max-width: 46rem;
  margin: 2rem auto 0;
  text-align: left;
}
.faq-item { border-top: 1px solid rgba(184, 152, 104, 0.35); }
.faq-item:last-child { border-bottom: 1px solid rgba(184, 152, 104, 0.35); }
.faq-item summary {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 1rem;
  padding: 1.25rem 0.25rem;
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 1.125rem;
  letter-spacing: 0.04em;
  cursor: pointer;
  list-style: none; /* no default triangle marker… */
}
.faq-item summary::-webkit-details-marker { display: none; } /* …Safari included */
/* our marker: a gold +, rotating into an × when the item is open */
.faq-item summary::after {
  content: "+";
  flex-shrink: 0;
  font-family: var(--font-ui);
  font-size: 1.5rem;
  line-height: 1;
  color: var(--gold);
  transition: transform 0.3s var(--ease-soft);
}
.faq-item[open] summary::after { transform: rotate(45deg); }
.faq-item p { margin: 0; padding: 0 0.25rem 1.4rem; opacity: 0.9; }

/* --- About hero: neutral ink scrim, centered lockup --- */
/* TODO(asset): about-hero-party.jpg (the fantasy party illustration) */
.bh-about {
  --place-rgb: 31, 46, 53;
  background-image:
    url("../assets/img/about-hero-party.jpg"),
    radial-gradient(ellipse at 70% 25%, rgba(184, 152, 104, 0.18), transparent 60%),
    linear-gradient(150deg, #16262e, var(--ink) 55%, var(--epteka-steel));
}
.bh-about .eyebrow { color: var(--gold); }
.bh-about .book-hero-content {
  margin-inline: auto;
  text-align: center;
}
.bh-about .book-pitch { margin-inline: auto; }

/* The big flower above the About lockup */
.about-hero-mark {
  color: var(--gold);
  margin-bottom: 1.5rem;
}
.about-hero-mark .logo-mark {
  /* piu' largo di prima: un marchio orizzontale ha bisogno di piu'
     larghezza per avere lo stesso peso ottico di uno quadrato */
  width: clamp(96px, 13vw, 168px);
  height: auto;
  margin-inline: auto;
}

/* --- About manifesto: cinque tessere, tre sopra e due sotto ---
   La base .manifesto (centrata, usata anche da epteka.php) va bene com'e':
   qui serve solo la griglia. Il vecchio .manifesto--split (colonna sinistra
   da 33rem, titoli col filetto, posto per l'immagine verticale) e' stato
   tolto: nessun'altra pagina lo usava e la sezione ora e' simmetrica. */
.manifesto--creed {
  text-align: center;
  /* FILETTO D'ORO SULLA GIUNZIONE COL BLOCCO DELLE PERSONE.
     Sotto c'e' l'unico punto della pagina dove due sezioni chiare si toccano
     — ivory sopra, bianco caldo sotto — e fra le due tinte ballano cinque
     punti di rosso, sei di verde e undici di blu su 255: senza una riga il
     passaggio non si legge, e il dipinto degli alberi sembra cominciare a
     caso.

     Sta QUI e non su .place-people perche' li' non si vedrebbe: .place-bg e'
     un figlio in posizione assoluta con z-index 0, comincia all'8% SOPRA il
     bordo della sezione e coprirebbe il bordo del genitore. Ci vorrebbe uno
     ::after con z-index 3; un border-bottom sul vicino di sopra fa la stessa
     cosa con una dichiarazione e nessuna sovrapposizione da governare.

     Oro al 40%, che e' la misura di casa per i filetti su fondo chiaro
     (0,3 i divisori di riga in 06-libri, 0,55 i bordi delle schede): questo
     e' un divisore, ma corre per tutta la larghezza, quindi sta in mezzo. */
  border-bottom: 1px solid rgba(184, 152, 104, 0.4);
}
.creed-head { max-width: 46rem; margin-inline: auto; }
.manifesto--creed .section-title { margin-bottom: 0; }
/* `auto` sui fianchi, non 0: l'ornamento e' un flex largo min(240px, 64%) e
   con margin-inline 0 resta incollato a sinistra invece di centrarsi.
   Sotto niente aria: la mette il sottotitolo col suo margine. */
.manifesto--creed .ornament { margin: 1.25rem auto 0; }
/* Il sottotitolo ricalca .projects-lead della home — stessa misura, stesso
   inchiostro smorzato — TRANNE il corpo, e la differenza e' voluta: li' il
   sottotitolo sta da solo sopra una griglia di schede, qui apre una sezione
   che continua a 18px, e a 17px restava il testo piu' piccolo E piu' pallido
   della pagina. Misurato a 1440: 17px contro i 19px del corpo di "Le persone"
   e "Il tavolo da gioco".

   `inherit` e non un valore: quelle due sezioni non dichiarano niente, il
   loro corpo e' quello del body (18px sotto i 900px, 19px sopra — 01-base).
   Ereditando dal <header> si resta in passo con loro a ogni larghezza invece
   che a una sola. Serve comunque una dichiarazione, perche' la base
   .manifesto p (60ch, 1.25rem) va scavalcata tutta. */
.manifesto--creed .manifesto-lead {
  max-width: 52ch;
  margin: 1.4rem auto 0;
  font-size: inherit;
  line-height: 1.7;
  color: rgba(31, 46, 53, 0.72);
}

.creed-grid {
  display: grid;
  gap: 3rem 1.4rem;   /* riga alta 3rem: l'icona del blocco sotto sporge di
                         ~26px sopra il bordo e non deve toccare quello sopra */
  margin-top: 3.5rem;
}
/* Tre sopra, due sotto centrate. Sei colonne e span 2: il modo piu' corto per
   centrare una riga spaiata senza un secondo contenitore. Con auto-fit e
   justify-content: center le due tessere finali resterebbero larghe come le
   prime tre ma spostate a sinistra. */
@media (min-width: 700px) {
  .creed-grid { grid-template-columns: repeat(6, 1fr); }
  .creed-card { grid-column: span 3; }
  .creed-card:nth-child(3) { grid-column: 2 / span 3; }
}
@media (min-width: 1000px) {
  .creed-card { grid-column: span 2; }
  /* riporta la terza in fila: a 700px era stata scesa sotto, e un
     `grid-column: auto` qui la ridurrebbe a UNA colonna, non a due */
  .creed-card:nth-child(3) { grid-column: span 2; }
  .creed-card:nth-child(4) { grid-column: 2 / span 2; }
  .creed-card:nth-child(5) { grid-column: 4 / span 2; }
}

.creed-card {
  position: relative;
  border: 1px solid var(--gold);
  border-radius: var(--radius-card);
  /* 2.6rem sopra: meta' dell'icona (26px) piu' l'aria sotto di essa */
  padding: 2.6rem 1.6rem 1.8rem;
  text-align: center;
  /* fondo trasparente di proposito: il tondo dell'icona e' avorio pieno e,
     sopra una velatura bianca, la sua meta' inferiore lasciava un rettangolo
     piu' scuro sulla tessera. Senza fondo il tondo sparisce nel foglio e si
     vede solo l'interruzione del filetto, che e' l'effetto voluto. */
  background: transparent;
  transition: border-color 0.4s var(--ease-soft), transform 0.4s var(--ease-soft);
}
.creed-card:hover {
  border-color: var(--bronze);
  transform: translateY(-3px);
}
/* L'icona sta a cavallo del bordo, come nella pagina di Epteka: il fondo
   avorio pieno e' quello che interrompe il filetto d'oro sotto di lei —
   nessun taglio nel bordo, nessuna maschera. Per questo il colore e' --ivory
   fisso e non trasparente: sopra una trasparenza il filetto si vedrebbe. */
.creed-icon {
  position: absolute;
  top: 0;
  left: 50%;
  transform: translate(-50%, -50%);
  display: grid;
  place-items: center;
  width: 3.25rem;
  height: 3.25rem;
  background: var(--ivory);
  color: var(--ink);
}
.creed-icon svg { width: 2rem; height: 2rem; display: block; }
/* Le giunture del d20: dello stesso colore del tondo, quindi il vuoto fra le
   facce e' finto. E' l'unica icona che conosce il fondo su cui sta — se il
   tondo cambia colore, questa riga va cambiata con lui. */
.creed-icon .seam { stroke: var(--ivory); }

.creed-card h3 {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 1.125rem;
  letter-spacing: 0.05em;
  color: var(--bronze);
  margin: 0 0 0.9rem;
}
/* Filetto sotto il titolo, largo quanto la tessera: e' l'eco del bordo, per
   questo e' oro e non bronzo, e per questo e' 1px come il bordo. */
.creed-card h3::after {
  content: "";
  display: block;
  height: 1px;
  margin-top: 0.4rem;   /* stretto sotto il titolo: e' la sua sottolineatura,
                           non un separatore fra titolo e paragrafo */
  background: var(--gold);
}
/* La base .manifesto p centra i paragrafi a 60ch e li porta a 1.25rem: qui
   sono in una colonna stretta, quindi via il cap e giu' di corpo.

   18px E NON 16 (era 16). A 16px questo era l'unico corpo della pagina sotto
   i 19px delle sezioni vicine — "Le persone" e "Il tavolo da gioco" stanno
   entrambe a 19px/32,3px, misurato a 1440 — e bastava a far leggere il
   Manifesto come una sezione di un'altra famiglia.

   18 e non 19: la tessera e' larga 305px a 1440, e a 19px la prima scendeva a
   cinque parole per riga. A 18 ne tiene sette-otto, che e' il minimo perche'
   la lettura non si sminuzzi. Se un giorno le tessere si allargano (griglia a
   due colonne, o container piu' largo) allora 19 diventa possibile.

   Interlinea 1,65 e non 1,7 come le sezioni vicine: la riga qui e' meta' di
   quella, e con 1,7 le tessere corte guadagnavano altra aria morta in fondo
   (la prima ne ha gia' ~90px, la griglia allinea alla tessera piu' alta). */
.manifesto--creed .creed-card p {
  max-width: none;
  margin: 0;
  font-size: 1.125rem;
  line-height: 1.65;
  text-align: left;
}

/* --- Le persone: il modello a dissolvenza della home, ma in chiaro ---
   Stessa impalcatura di Aetheria e Naos (.place--gradient: .place-bg col
   fondo, <img class="place-photo"> mascherata sopra, parallasse), solo che
   qui il colore in cui la fotografia si dissolve non e' un mondo scuro ma
   la luce della pagina. Sezione chiara, quindi il testo torna a inchiostro.

   Warm white, NON ivory: sopra c'e' il Manifesto in ivory e i due blocchi
   devono leggersi separati — e' l'accoppiata con cui la pagina e' nata.
   --place-rgb DEVE restare in passo col fondo: e' lo stesso colore scritto
   a componenti R,G,B, perche' le rampe di velo possano dissolverlo. Cambiane
   uno solo e a meta' sezione compare uno scalino.

   PRIMA (fino a questa revisione) qui c'era un url() su .place-bg e un velo
   quasi opaco sopra: la foto restava stesa per tutta la fascia sotto una
   patina al 97%, cioe' uno sfondo velato — proprio la cosa che il
   vocabolario della pagina esclude. Ora la foto e' un oggetto che entra da
   sinistra e si dissolve verso destra, e sotto non resta una patina ma il
   colore della pagina. */
.place-people {
  --place-rgb: 252, 249, 245;   /* --warm-white, a componenti R,G,B */
  color: var(--ink);
  background: var(--warm-white);
  /* Sui telefoni non c'e' maschera: la foto riempie la fascia ritagliata a
     tutta altezza e il testo ci sta sopra. Il ritaglio centrato cadrebbe
     sul filare che si allontana, cioe' sul pezzo piu' confuso del quadro;
     al 32% prende il tronco grosso di sinistra, che e' il soggetto. */
  --photo-pos: 32% center;
  /* Dissolvenza corta: il filare occupa la meta' sinistra e a 0,5 (il
     default del foglio) arrivava a piena forza troppo tardi, con i tronchi
     ancora slavati. A 0,3 il verde e' pieno prima che la fascia finisca.
     Confrontare 0,22 · 0,3 · 0,5 a schermo intero. */
  --fade-ratio: 0.3;
}
.place-people .eyebrow { color: var(--bronze); }
/* Telefoni: il testo sta sopra tutta la foto, quindi il velo e' quasi pieno.
   Il contrasto qui non dipende dalla fotografia, ed e' il motivo per cui il
   velo resta cosi' carico: nel punto PIU' CHIARO della rampa (0,82) e sopra
   il pixel piu' scuro possibile — nero pieno — il fondo composto vale
   rgb(207,204,201), e l'inchiostro del corpo su quel fondo da' 8,8:1 (WCAG,
   calcolato sul composito, non sulla tinta nominale). Cioe' il minimo del
   progetto, 4,5:1, e' rispettato qualunque foto ci si metta. Scendere sotto
   0,82 vuol dire rifare questo conto. */
.place-people::before {
  background: linear-gradient(180deg,
    rgba(var(--place-rgb), 0.82), rgba(var(--place-rgb), 0.96));
}
@media (min-width: 900px) {
  /* Desktop: molto piu' leggero di prima (era 0,97 fino al 38%), perche' non
     deve piu' nascondere niente — la maschera ha gia' tolto la fotografia da
     sotto la colonna di testo. Quello che resta e' un velo di tono che tiene
     le due meta' della sezione nella stessa chiave e sparisce dove il quadro
     e' a piena forza. Stessi stop di .place--gradient.text-right in
     04-luoghi, un po' piu' pieni: qui il velo e' chiaro e la foto e' chiara,
     quindi si vede molto meno. */
  .place-people.text-right::before {
    background: linear-gradient(270deg,
      rgba(var(--place-rgb), 0.62) 0%,
      rgba(var(--place-rgb), 0.52) 44%,
      rgba(var(--place-rgb), 0.24) 66%,
      transparent 84%);
  }
}
/* Il fondo in cui la foto si dissolve. Non e' warm white piatto: una rampa
   appena percettibile (due punti di luminosita' fra un angolo e l'altro,
   piu' un alone verdino dal lato del quadro) evita che la meta' destra
   diventi un campo morto. Il verde e' campionato dal prato della foto,
   portato a 0,10 di opacita': serve a far sembrare che il colore nasca
   dall'immagine, non che l'immagine sia appoggiata sul colore. */
.place-people .place-bg {
  background-image:
    radial-gradient(ellipse 60% 70% at 18% 62%, rgba(126, 148, 96, 0.10), transparent 70%),
    linear-gradient(160deg, #FDFBF8 0%, var(--warm-white) 45%, #F4EFE6 100%);
}
.place-people .place-text p:not(.eyebrow) { opacity: 1; margin-bottom: 1.25rem; }
.place-people .place-text p:last-child { margin-bottom: 0; }

/* --- One heading scale for the whole About page ---
   .place-name and .community-title come from the homepage, where they are
   deliberately bigger (a world name filling a full-bleed band) and smaller
   (a quiet closing band). Here they sit next to Manifesto / Il tavolo da
   gioco / Il metodo, so they are brought onto --title-size. Scoped to
   .page-about: the homepage keeps its own proportions. */
.page-about .place-name,
.page-about .community-title {
  font-size: var(--title-size);
  font-weight: 500;
  letter-spacing: 0.06em;
  line-height: 1.25;
  text-transform: none;   /* .place-name is uppercase on the homepage */
}

/* --- Born at the table: neutral dark ink (the real world, not a fantasy one) --- */
.born {
  padding-block: var(--section-pad);
  background: var(--ink);
  color: var(--warm-white);
  text-align: center;
  /* The outer polaroids deliberately run past both edges of the page. This
     clips the overspill so it never becomes a horizontal scrollbar.
     `clip` is the right tool (no scroll container at all); `hidden` is the
     fallback declared first for browsers that don't know it. */
  overflow: hidden;
  overflow: clip;
}

.table-text {
  max-width: 46ch;
  margin: 0 auto;
}
.table-text p { margin: 0; }

/* --- The polaroids ---
   MOBILE FIRST = the fallback: a plain two-column grid under the text,
   photos straight and still. The arc (absolute positioning, tilt, float,
   pond) switches on from 900px up, where there is room for it. */
.table-arc {
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: start;   /* mixed orientations must not stretch to match */
  gap: 1rem;
  width: min(1240px, 92%);
  margin: 2.5rem auto 0;
}
.polaroid { margin: 0; }
.polaroid-sway,
.polaroid-card { display: block; }

/* The card itself: the paper. Slightly larger than a square snapshot and
   clearly portrait — a deep bottom edge is what makes it read as polaroid
   rather than as a framed photo. */
.polaroid-card {
  padding: 0.7rem 0.7rem 2.2rem;
  background: #F4F1EA;
  border-radius: 3px;
  box-shadow: 0 12px 26px rgba(0, 0, 0, 0.4);
}
.polaroid-photo {
  display: block;
  aspect-ratio: 4 / 5;             /* portrait — reserves space, no jump */
  background-size: cover;
  background-position: center;
  background-color: #22323b;
}
/* Landscape shots. Mixing the two orientations is most of what makes the
   spread look like real photos rather than a set of cards. */
.polaroid--wide .polaroid-photo { aspect-ratio: 5 / 4; }
/* One image per polaroid — a background, so a file that is not there yet
   paints nothing instead of a broken-image icon, and nothing is fetched
   until the frame is near the viewport.
   Le sei foto sono serate di gioco vere. ORIENTAMENTO: 1 · 4 · 6 sono
   orizzontali (e portano .polaroid--wide nel markup), 2 · 3 · 5 verticali.
   I due formati devono restare mescolati, ed e' scritto anche in about.php:
   sostituire una foto con una dell'altro orientamento senza spostare la
   classe la fa ritagliare al formato sbagliato. */
.pf-1 { background-image: url("../assets/img/table-1.webp"); }
.pf-2 { background-image: url("../assets/img/table-2.webp"); }
.pf-3 { background-image: url("../assets/img/table-3.webp"); }
.pf-4 { background-image: url("../assets/img/table-4.webp"); }
.pf-5 { background-image: url("../assets/img/table-5.webp"); }
.pf-6 { background-image: url("../assets/img/table-6.webp"); }

/* ===== POLAROID SIZE — HOW TO GO BACK TO THE SMALLER SPREAD =====
   The cards were made ~28% bigger and pushed off both page edges. If the
   smaller, fully-contained version turns out to be the better one, here is
   the complete set of values to restore — five changes, nothing else:

     1. .born                 remove  overflow: hidden; overflow: clip;
                              (only needed because the big cards bleed out)
     2. .table-arc @900px     remove  width: 100%;
                              (falls back to min(1240px, 92%), centred)
     3. .table-arc @900px     min-height: 430px   →  400px
     4. .polaroid @900px      width: clamp(180px, 19vw, 260px)
                                   →  clamp(150px, 15vw, 196px)
        .polaroid--wide       width: clamp(215px, 23vw, 310px)
                                   →  clamp(178px, 18vw, 236px)
     5. about.php, the six --x on the .polaroid figures:
             now:  4%   23%   41%   60%   78%   96%
          before:  11%  27%   43%   58%   73.5% 89%

   Everything else — the valley arc (--y), the tilts, the orientations, the
   float timings, the pond in main.js — is identical in both versions.
   ================================================================= */
@media (min-width: 900px) {
  /* THE SPREAD.
     Each card is placed with left/top as its CENTRE — translate(-50%,-50%)
     does the centring, so cards of different heights still line up on the
     same curve. --x is a percentage of the arc (a percentage of the
     CONTAINER, unlike percentage translates, which resolve against the
     element itself); --y is px from the top of the arc.
     The cards are wider than the gaps between them, so they overlap;
     --z decides who sits on top, and it is deliberately not in order. */
  .table-arc {
    display: block;
    position: relative;
    /* full width, so --x spans the whole page and the outer cards can hang
       off both edges (clipped by .born's overflow) */
    width: 100%;
    /* lowest centre (246px) + half of the tallest card + the ~21px the pond
       can push it down */
    min-height: 430px;
    /* pulled up so the outer cards ride alongside the text and cradle it */
    margin-top: -1.5rem;
    padding-bottom: 2rem;   /* room for the shadows and the sway */
  }
  .polaroid {
    position: absolute;
    left: var(--x);
    top: var(--y);
    z-index: var(--z);
    width: clamp(180px, 19vw, 260px);
    transform: translate(-50%, -50%);  /* static: --x/--y are the centre */
  }
  .polaroid--wide { width: clamp(215px, 23vw, 310px); }
  /* The pond ripple is written here by js/main.js, one transform, nothing
     else touches this element. transform-only = no layout work per frame. */
  .polaroid-sway { will-change: transform; }

  /* The card's own tilt lives in `transform`; the idle float animates the
     standalone `translate` property, which COMPOSES with transform rather
     than replacing it — so the bob and the tilt coexist on one element. */
  .polaroid-card {
    transform: rotate(var(--r));
    /* --dur differs per card as well as --d: same duration with different
       delays still drifts in lockstep, different durations never repeat */
    animation: polaroid-float var(--dur, 7s) var(--ease-soft) infinite alternate;
    animation-delay: var(--d);
    transition: transform 0.5s var(--ease-soft), box-shadow 0.5s var(--ease-soft);
  }
  /* Hovering one card also lifts it out of the stack and straightens it a
     little — on top of the pond, which is already moving all six. */
  .polaroid:hover { z-index: 20; }
  .polaroid:hover .polaroid-card,
  .polaroid:focus-within .polaroid-card {
    transform: rotate(calc(var(--r) * 0.4)) scale(1.06);
    box-shadow: 0 26px 46px rgba(0, 0, 0, 0.52);
  }
}

/* The bob: `translate`, not `transform`, so it does not clobber the tilt */
@keyframes polaroid-float {
  from { translate: 0 -7px; }
  to   { translate: 0 7px; }
}

/* --- Il metodo: sober transparency block --- */
.craft {
  padding-block: var(--section-pad);
  text-align: center;
}
.craft p { max-width: 66ch; margin: 0 auto 1.25rem; }
.craft p:last-child { margin-bottom: 0; }

/* --- CTA band (about) --- */
/* .cta-band / .cta-line lived here until about.php switched to the
   homepage's Community + Newsletter pair. Removed rather than left dead —
   no page uses them any more. */

/* --- Contact --- */
/* Shorter full-bleed hero for pages that are not a book (contact) */
.hero-compact {
  min-height: 52vh;
  min-height: 52svh;
}
/* Neutral ink, like the About hero: this is the real world, not a world.
   TODO(asset): assets/img/contact-hero.jpg */
.bh-contact {
  --place-rgb: 31, 46, 53;
  background-image:
    url("../assets/img/contact-hero.jpg"),
    radial-gradient(ellipse at 75% 25%, rgba(184, 152, 104, 0.22), transparent 60%),
    linear-gradient(150deg, #16262e, var(--ink) 55%, var(--epteka-steel));
}
.bh-contact .eyebrow { color: var(--gold); }

.contact-main {
  padding-block: clamp(4rem, 8vw, 6rem);
  text-align: center;
}
/* The address and its copy button on one line, wrapping together on
   phones where the address alone can already fill the width */
.contact-mail-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 0.75rem 1rem;
}
/* The page's focal point: display type, not a line of body text. The gold
   rule under it is a border on the link itself, so it tracks the text
   width at every size. */
.contact-email {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: clamp(1.15rem, 3.6vw, 2.25rem);
  letter-spacing: 0.02em;
  line-height: 1.25;
  color: var(--ink);
  text-decoration: none;
  border-bottom: 2px solid rgba(184, 152, 104, 0.55);
  padding-bottom: 0.12em;
  /* Last resort only: the <wbr> in the markup offers the @ as the preferred
     break, this just guarantees the address can never push the page sideways
     on a very narrow screen. */
  overflow-wrap: anywhere;
  transition: color 0.3s var(--ease-soft), border-color 0.3s var(--ease-soft);
}
.contact-email:hover { color: var(--bronze); border-color: var(--gold); }

/* Le due schede social vengono dalla home (.community-buttons in css/05):
   qui non serve altro CSS, il margine sopra e' gia' 2.25rem e stacca a
   sufficienza dal rombo.

   Tolti con la revisione di agosto 2026:
     .contact-copy / .contact-copy-label  — via il pulsante "copia"
     .contact-note                        — via la nota sul "PRESS"
     .place-contact / .contact-social     — via la seconda fascia scura
   Cancellati invece che lasciati morti: nessuna pagina li usa piu'. */

/* ---------- 11. FOOTER ---------- */
.site-footer {
  background: var(--footer-dark);
  color: rgba(252, 249, 245, 0.78);
  border-top: 1px solid rgba(184, 152, 104, 0.35); /* opening gold hairline */
  padding-top: 4rem;
}

.footer-grid {
  display: grid;
  gap: 2.5rem;
  padding-bottom: 3.5rem;
}
@media (min-width: 800px) {
  .footer-grid { grid-template-columns: 2fr 1fr 1fr; gap: 3rem; }
}

/* IL MARCHIO NEL PIEDE E' PIU' GRANDE CHE NELLA NAVBAR.
   In alto il marchio deve stare dentro l'altezza della barra e cedere il
   passo al menu: li' vale 44x28 px con logotipo a 1.05rem (css/02-navbar.css).
   Qui sotto invece il marchio e' il soggetto della prima colonna, non un
   accessorio, e la colonna e' larga il doppio delle altre due (2fr contro
   1fr): misurata a 1440 px, fa 512 px, e alla misura della navbar il gruppo
   marchio+logotipo ne occupava meno di 180.
   Scartato l'ingrandimento via transform: scale(), che avrebbe sfocato il
   testo e lasciato la scatola alla misura vecchia, rompendo le distanze.
   Il fiore e' orizzontale (viewBox 390x252, cioe' 1,548:1): 62/40 = 1,55,
   la proporzione regge.
   Numeri misurati a 1440 px con i font Google gia' caricati (il fallback
   Georgia e' piu' largo e falsa la misura): il logotipo passa da 121,8 a
   156,7 px di larghezza e da 28,6 a 36,8 di altezza, e tutto il gruppo
   .brand arriva a 233,9 px — meno della meta' della colonna, quindi il
   motto sotto resta su una riga sola (verificato: una riga).
   Attenzione: la larghezza del logotipo la detta la riga FELLOWSHIP, non
   ANTHEMON, perche' ha 0.42em di spaziatura contro 0.14em.
   Il gap cresce di conseguenza, altrimenti il fiore piu' grande sembra
   incollato alle lettere. */
.site-footer .logo-mark { width: 62px; height: 40px; }
.site-footer .wordmark  { font-size: 1.35rem; }
.site-footer .brand     { gap: 0.95rem; }

.footer-tagline {
  font-style: italic;
  max-width: 32ch;
  margin: 1.25rem 0 0;
}

/* Column headings: same voice as the eyebrows, but gold */
.footer-heading {
  font-family: var(--font-ui);
  font-size: 0.8125rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.22em;
  color: var(--gold);
  margin: 0 0 1.25rem;
}

.footer-links {
  list-style: none;
  margin: 0;
  padding: 0;
}
/* text-wrap: balance — l'unica riga aggiunta dalla revisione 13.
   Dalla rev. 12 §A la colonna "Esplora" porta i tre libri per nome, e uno di
   quei nomi e' lungo: "Racconti della Foresta di Dasos" misura 193px. La
   colonna sta larga fra i 150 e i 256px a seconda della finestra — il piede
   passa a tre colonne 2fr/1fr/1fr da 800px in su — quindi fra 800 e 959 la
   voce va a capo per forza. Il nome del prodotto non si accorcia: sul sito si
   scrive intero.
   Andare a capo va benissimo; a rompere era DOVE. Senza questa riga, a 900px
   il browser riempie la prima riga al massimo e lascia "Dasos" da solo sulla
   seconda; con balance le due righe si pareggiano e viene "Racconti della /
   Foresta di Dasos", che tiene insieme il complemento di luogo.
   Misurato: la voce sta su una riga sola da 960px in su (colonna 193, testo
   193 — al pelo) e sotto gli 800, dove il piede torna a una colonna sola e la
   larghezza abbonda. Sulle altre sei voci, tutte da una riga, balance non fa
   niente: e' la stessa proprieta' gia' usata su .offer-name in 06-libri.css. */
.footer-links a {
  display: inline-block;
  padding: 0.3rem 0;
  font-family: var(--font-ui);
  font-size: 0.9375rem;
  text-decoration: none;
  color: inherit;
  text-wrap: balance;
  transition: color 0.3s var(--ease-soft);
}
.footer-links a:hover { color: var(--gold); }

/* Social icons: a quiet row under the contact column, not buttons. */
.footer-social {
  display: flex;
  gap: 0.5rem;
  list-style: none;
  margin: 1rem 0 0;
  padding: 0;
}
.footer-social a {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border: 1px solid rgba(252, 249, 245, 0.16);
  border-radius: var(--radius-soft);
  color: inherit;
  transition: color 0.3s var(--ease-soft), border-color 0.3s var(--ease-soft);
}
.footer-social a:hover { color: var(--gold); border-color: var(--gold); }
.footer-social svg { width: 20px; height: 20px; }

.footer-bottom {
  border-top: 1px solid rgba(252, 249, 245, 0.08);
  padding: 1.5rem 0;
  text-align: center;
  font-family: var(--font-ui);
  font-size: 0.8125rem;
  letter-spacing: 0.04em;
}
.footer-bottom p { margin: 0; }

/* Legal microcopy: small and muted, above the copyright line */
.footer-legal {
  max-width: 72ch;
  margin: 0 auto 0.6rem !important;
  color: rgba(252, 249, 245, 0.45);
}

/* ---------- 12. INNER PAGES (stubs) ---------- */
.page-stub {
  background: var(--ivory);
  min-height: 55vh;
  padding: calc(var(--header-h) + 4rem) 0 var(--section-pad);
  text-align: center;
}
.stub-text {
  max-width: 44ch;
  margin: 0 auto;
  font-style: italic;
}

/* ---------- 13. REVEAL + REDUCED MOTION ---------- */
/* .reveal elements start invisible and rise into view when they enter the
   screen (js/main.js adds .is-visible). The selector starts with .js:
   without JavaScript the rule never applies and nothing stays hidden. */
.js .reveal {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity 0.6s var(--ease-soft), transform 0.6s var(--ease-soft);
}
.js .reveal.is-visible {
  opacity: 1;
  transform: none;
}

/* Small stagger for side-by-side elements */
.js .reveal-1 { transition-delay: 0.12s; }
.js .reveal-2 { transition-delay: 0.24s; }

/* Users who asked the OS for less motion get a still site:
   no reveals, no zooms, no floats, no smooth scroll.
   (js/main.js also skips the hero video and the parallax for them.) */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .js .reveal {
    opacity: 1;
    transform: none;
    transition: none;
  }
  .world-art,
  .world-panel,
  .world-band,
  .world-caption,
  .volume img,
  .dropdown,
  .dropdown-panel,
  .site-header,
  .viewer-page,
  .viewer-tab,
  .gallery-thumb,
  .lightbox-btn,
  .community-btn,
  .btn { transition: none; }
  /* La sezione dei mondi: cade tutto quello che si muove — lo zoom
     dell'illustrazione, il sollevamento del pannello e della cornice Epteka,
     e il libro che si alza nella riga dei volumi. La riga della didascalia
     resta: appare gia' d'oro e tutta intera, che e' un cambio di colore e
     non un movimento. */
  .world:hover .world-art,
  .world:focus-visible .world-art,
  .world:hover .world-panel,
  .world:focus-visible .world-panel,
  .volume:hover img,
  .volume:focus-visible img { transform: none; }
  /* La fascia Epteka si solleva con `translate` e non con `transform` — il
     perche' sta in 03-home, accanto alla regola: con transform la riga era
     morta contro .js .reveal.is-visible. Qui va spenta la proprieta' giusta,
     se no il sollevamento resta anche a chi ha chiesto meno movimento. */
  .world-band:hover,
  .world-band:focus-visible { translate: none; }
  /* Le batterie di Epteka non fluttuano e non si alzano: della risposta al
     mouse restano solo le cose che non si muovono — EPTEKA che cambia colore
     e l'alone che va a piena luce. L'alone NON si spegne mai del tutto: chi
     ha chiesto meno movimento deve comunque vedere l'oggetto illuminato, non
     al buio. */
  .band-object { animation: none; transition: none; }
  .world-band:hover .band-object,
  .world-band:focus-visible .band-object { translate: none; }
  .world-band::after { opacity: 0.7; transition: none; }
  .world-band:hover::after,
  .world-band:focus-visible::after { opacity: 1; translate: 0 -50%; }
  .community-btn:hover { transform: none; }
  /* The polaroids keep their tilt but stop bobbing, stop reacting to hover,
     and js/main.js never starts the pond at all. */
  .polaroid-card { animation: none; transition: none; }
  .polaroid:hover .polaroid-card,
  .polaroid:focus-within .polaroid-card { transform: rotate(var(--r)); }
  .gallery-thumb.is-loaded:hover { transform: none; }
  .btn:hover { transform: none; }
  .cutout { animation: none; }
}