/* Calendario del Giappone — aggiunte a style.css (che è quello della famiglia Calendario Creativo / Scacchi).
   Regole di Simone: titoli piccoli ed equilibrati, testo nero sui colori, niente evidenziatori, niente 3D a blocchi. */
@font-face{font-family:"Fraunces Marchio";src:url("../fonts/Fraunces-BlackItalic.woff2") format("woff2");font-weight:900;font-style:italic;font-display:swap}
:root{--ja:"Hiragino Mincho ProN","Yu Mincho","Noto Serif CJK JP","Noto Serif JP","MS PMincho",serif}

/* titoli: principale max 50 px, sezioni max 38 px */
h1{font-size:clamp(31px,4.2vw,50px);line-height:1.1}
h2{font-size:clamp(26px,3.2vw,38px);line-height:1.12}
h3{font-size:clamp(19px,2vw,23px)}
.testo h2{font-size:clamp(25px,3vw,34px)}
.art-corpo h2{font-size:clamp(23px,2.6vw,30px)}
.mano{font-size:clamp(19px,2vw,23px)}
.sottotitolo{font-size:clamp(18px,1.9vw,22px);max-width:34em;margin-inline:auto}
.sez{padding:clamp(48px,6vw,78px) 0}
html,body{overflow-x:clip}

/* marchio vero (immagine), nella testata e nel footer */
.marchio{display:block;height:62px;width:auto}
.loghi{text-decoration:none;padding:4px 6px 4px 0}
.footer .marchio{height:88px;margin-left:-5px}

/* divisore: onde seigaiha in bianco e nero al posto della scacchiera */
.fascia{height:26px;border-block:var(--bordo);background-color:#fff;
  background-image:radial-gradient(circle at 50% 100%,transparent 0 5px,#000 5px 7px,transparent 7px 11px,#000 11px 13px,transparent 13px 17px,#000 17px 19px,#fff 19px 26px,transparent 26px);
  background-size:52px 26px;background-position:0 0}

/* elenchi con la freccia (nel modello c'era il cavallo) */
.elenco-freccia li::before{content:"→";top:0;font-size:18px;font-weight:700}

/* nota "anteprima grafica" e stato */
.anteprima{font-size:14px;line-height:1.35;margin:14px 0 0;opacity:.85}
.bollo-arrivo{font-family:var(--mano);font-size:17px;line-height:1;background:var(--giallo);border:var(--bordo);border-radius:999px;padding:7px 14px;box-shadow:3px 3px 0 var(--ink)}

/* apertura: come sul sito Scacchi (immagine del prodotto a destra), con il testo un po' più piccolo */
.hero p.lead{font-size:clamp(17px,1.7vw,20px)}
.hero-prezzo{font-size:28px}

/* modello 3D ("Come sono fatto"): geometria, legno, carta, luce, rotazione e strappo sono quelli di style.css,
   cioè identici al sito Scacchi e al sito Calendario Creativo. Qui c'è solo il retro vero della base, che negli altri
   due siti sta in style.css insieme alle facce della scatola (la scatola del Giappone non esiste ancora). */
.pannello>.k{background:url("../img/base_retro.jpg") center/100% 100% no-repeat}

/* negozio, prezzi del preordine, carrello */
.sez h2+.griglia{margin-top:34px}
/* tre prodotti: la griglia a quattro colonne del sito Scacchi resta, ma centrata */
@media (min-width:1061px){.griglia{grid-template-columns:repeat(auto-fit,minmax(0,262px));justify-content:center}}
/* su due colonne il terzo prodotto non resta solo a sinistra con un buco accanto: va al centro */
@media (max-width:1060px){.griglia>.card:last-child:nth-child(odd){grid-column:1/-1;width:calc(50% - 12px);justify-self:center}}
@media (max-width:760px){.griglia>.card:last-child:nth-child(odd){width:calc(50% - 7px)}}
.sottotitolo{text-wrap:balance}
.griglia .card h2{font-size:20px;line-height:1.15;margin:16px 4px 6px}
.griglia .card h2 a{text-decoration:none}
/* nel negozio i nomi sono h2: su telefono stessa misura degli h3 delle altre griglie */
@media (max-width:760px){.griglia .card h2{font-size:17px;margin:12px 2px 6px}}
.card .prezzo del{font-weight:400;font-size:15px;margin-right:2px}
.hero-prezzo del{font-size:19px;font-weight:400;margin-right:4px}
.info .prezzo-g .risp.pre{background:var(--giallo)}
.preordine-nota{display:flex;flex-wrap:wrap;gap:8px 10px;align-items:center;font-size:16px;font-weight:600;margin:0 0 14px}
.preordine-nota .bollo-arrivo{font-size:16px;padding:6px 12px}
.griglia+.anteprima{max-width:44em;margin-inline:auto}
.box-sped{text-align:center}
.cassetto footer p.carrello-pre{font-size:14.5px;font-weight:600;text-align:left;margin:0 0 12px}
.cassetto footer p.paga-avviso{background:var(--giallo);border:var(--bordo);border-radius:12px;padding:10px 12px;font-size:14px;line-height:1.4;text-align:left}
#paga.spento{background:var(--bianco);opacity:.6;cursor:not-allowed;box-shadow:none;transform:none}

/* sei tipi di foglio */
.tipi{display:grid;grid-template-columns:1fr auto 1fr;gap:clamp(20px,4vw,48px);align-items:center;margin-top:8px}
.tipi-scelta{display:grid;gap:10px}
.tipi-scelta button{text-align:left;font-family:var(--serif);font-weight:700;font-size:19px;padding:12px 18px;border:var(--bordo);border-radius:14px;background:var(--bianco);cursor:pointer;transition:transform .2s,box-shadow .2s,background .2s}
.tipi-scelta button:hover{background:var(--azzurro)}
.tipi-scelta button[aria-pressed="true"]{background:var(--ink);color:var(--bianco);box-shadow:4px 4px 0 var(--rosa);transform:translateX(6px)}
.tipi-foglio{width:min(270px,62vw)}
.tipi-foglio img{border-radius:4px;border:1.5px solid var(--ink);box-shadow:9px 10px 0 rgba(0,0,0,.18);transform:rotate(2deg);transition:opacity .2s}
.tipi-foglio img.cambia{opacity:0}
.tipi-quanti{font-size:16px;margin:0 0 8px}
.tipi-quanti b{font-family:var(--serif);font-size:38px;line-height:1;margin-right:6px}
.tipi-testo p#tipi-t{font-size:18px}

/* la parola del giorno */
.parola{background:var(--bianco);border:var(--bordo);border-radius:var(--r);box-shadow:7px 7px 0 var(--ink);padding:clamp(20px,3vw,32px);text-align:center;max-width:440px;margin-inline:auto;width:100%}
.parola p.parola-kanji,.parola-kanji,.gioco-kanji{font-family:var(--ja);font-weight:600;font-size:clamp(40px,6vw,58px);line-height:1.15;margin:6px 0 4px;word-break:keep-all}
.parola h3{font-family:"Fraunces Marchio",var(--serif);font-style:italic;font-weight:900;font-size:26px;margin:0 0 12px}
.parola p{font-size:17px;margin:0 0 12px}
.parola .parola-nota{font-size:19px;margin:0;border-top:2px dashed var(--ink);padding-top:12px}
.parola.gira{animation:gira-carta .45s}
@keyframes gira-carta{0%{transform:none}50%{transform:rotateY(90deg) scale(.96)}100%{transform:none}}

/* gioco: indovina la parola */
.gioco{max-width:640px;margin:0 auto;background:var(--bianco);border:var(--bordo);border-radius:var(--r);box-shadow:7px 7px 0 var(--ink);padding:clamp(18px,3vw,30px);text-align:center}
.gioco-testa{display:flex;justify-content:space-between;font-size:15px;font-weight:600;border-bottom:2px dashed var(--ink);padding-bottom:10px;margin-bottom:8px}
.gioco h3{font-family:"Fraunces Marchio",var(--serif);font-style:italic;font-weight:900;font-size:26px;margin:0 0 16px}
.gioco-risposte{display:grid;gap:10px}
.gioco-risposte button.scelta{font:inherit;font-size:17px;font-weight:500;text-align:left;padding:13px 16px;border:var(--bordo);border-radius:14px;background:var(--beige);cursor:pointer;transition:transform .15s,background .15s}
.gioco-risposte button.scelta:hover:not([disabled]){background:var(--giallo);transform:translateX(4px)}
.gioco-risposte button.scelta[disabled]{cursor:default;opacity:.75}
.gioco-risposte button.scelta.giusta{background:var(--verde);opacity:1}
.gioco-risposte button.scelta.sbagliata{background:var(--corallo);opacity:1}
.gioco-risposte .btn{justify-self:center}
.gioco-esito{min-height:1.5em;margin:14px 0 0;font-size:17px}
.gioco-esito b{font-family:var(--serif);font-size:20px}

/* haiku */
.haiku-box label{display:flex;justify-content:space-between;align-items:baseline;font-weight:600;font-size:15px;margin:12px 0 4px}
.haiku-box label:first-child{margin-top:0}
.haiku-box input{font:inherit;font-size:18px;font-family:var(--serif);padding:11px 14px;border:var(--bordo);border-radius:12px;background:var(--bianco);color:var(--ink);width:100%}
.haiku-box input:focus{outline:3px solid var(--azzurro);outline-offset:0}
.haiku-conta{font-family:var(--mano);font-size:17px;font-weight:400;border:1.5px solid var(--ink);border-radius:999px;padding:1px 10px;background:var(--beige)}
.haiku-conta.ok{background:var(--verde)}
.haiku-conta.troppo{background:var(--corallo)}
.haiku-esito{margin:16px 0 0}
.haiku-foglio{width:170px;border-radius:4px;border:1.5px solid var(--ink);box-shadow:6px 7px 0 rgba(0,0,0,.18);transform:rotate(-3deg);margin-top:22px}

/* schede con il kanji al posto della foto */
.segno-kanji{font-family:var(--ja);font-weight:600;font-size:46px;line-height:1;display:grid;place-items:center;width:84px;height:84px;border:var(--bordo);border-radius:50%;background:var(--beige);margin:10px 0 0 8px}
.tre .card h3{font-size:21px;margin:16px 8px 8px}
.tre .card p{font-size:16.500px}

/* fogli veri affiancati */
.intro-fogli{display:flex;justify-content:center;gap:0;padding:10px 0}
.intro-fogli img{width:46%;max-width:230px;border-radius:5px;border:1.5px solid var(--ink);box-shadow:6px 7px 0 rgba(0,0,0,.18)}
.intro-fogli img:first-child{transform:rotate(-5deg) translateX(8%)}
.intro-fogli img:last-child{transform:rotate(5deg) translate(-8%,7%)}
.foglio-solo{width:min(280px,70%);margin:0 auto;border-radius:5px;border:1.5px solid var(--ink);box-shadow:9px 10px 0 rgba(0,0,0,.18);transform:rotate(3deg)}
.scritture{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin:18px 0}
.scritture div{background:var(--bianco);border:var(--bordo);border-radius:14px;padding:14px 10px;text-align:center;display:flex;flex-direction:column;gap:4px}
.scritture span{font-family:var(--ja);font-size:38px;line-height:1.1;font-weight:600}
.scritture b{font-family:var(--serif);font-size:18px}
.scritture small{font-size:13.500px;line-height:1.3}

/* scheda prodotto: galleria quadrata come sul sito Scacchi */
.scheda .info h1{font-size:clamp(28px,3.4vw,40px)}
.riquadro .modulo .campi{grid-template-columns:1fr}

/* recensioni: firma più lunga */
.rec footer{font-weight:500}

/* blog: indice, fogli veri, fonti */
.art-indice{background:var(--bianco);border:var(--bordo);border-radius:14px;padding:16px 20px;margin:1.4em 0;font-size:17px}
.art-indice b{font-family:var(--serif);font-size:19px}
.art-indice ol{margin:8px 0 0;padding-left:1.3em}
.art-indice li{margin-bottom:.25em}
.art-fogli{margin:1.8em 0;text-align:center}
.art-fogli div{display:flex;justify-content:center;gap:clamp(8px,2vw,18px);flex-wrap:wrap}
.art-fogli img{border-radius:4px;border:1.5px solid var(--ink);box-shadow:6px 7px 0 rgba(0,0,0,.16);width:min(300px,78%)}
.art-fogli.n2 img{width:min(220px,44%)}
.art-fogli.n3 img{width:min(200px,30%)}
.art-fogli.n3 img:nth-child(1),.art-fogli.n2 img:nth-child(1){transform:rotate(-2deg)}
.art-fogli.n3 img:nth-child(3),.art-fogli.n2 img:nth-child(2){transform:rotate(2deg)}
.art-fogli figcaption{font-size:15px;margin-top:16px;opacity:.85}
.art-corpo table{width:100%;border-collapse:collapse;margin:0 0 1.2em;font-size:16.500px;background:var(--bianco);border:var(--bordo);border-radius:12px;overflow:hidden;display:table}
.art-corpo .tab-scorri{overflow-x:auto;margin:0 0 1.2em}
.art-corpo .tab-scorri table{margin:0;min-width:520px}
.art-corpo th,.art-corpo td{text-align:left;padding:9px 12px;border-bottom:1px solid rgba(0,0,0,.18);vertical-align:top}
.art-corpo th{font-family:var(--serif);background:var(--giallo)}
.art-corpo tr:last-child td{border-bottom:0}
.art-corpo [lang="ja"]{font-family:var(--ja);font-weight:600}
.art-corpo blockquote{margin:1.2em 0;padding:14px 20px;background:var(--bianco);border:var(--bordo);border-radius:14px;font-family:var(--serif);font-size:20px;line-height:1.4}
.art-corpo blockquote small{display:block;font-family:var(--sans);font-size:15px;margin-top:6px}
.art-fonti{margin-top:2.2em;font-size:15.500px;border-top:2px dashed var(--ink);padding-top:6px}
.art-fonti h2{font-size:21px!important;margin-top:.8em}
.art-fonti a{word-break:break-word}

/* schede degli articoli: il testo non deve toccare il pulsante "Leggi" (la regola generica .tre .card p azzerava il margine) */
.tre .art-card h2,.tre .art-card h3{margin:4px 0 8px}
.tre .art-card p{margin:0 0 18px}

/* footer */
.footer .famiglia{margin-top:6px}
.fissa .wrap{flex-wrap:nowrap}

@media (max-width:1060px){
  .marchio{height:54px}
  .tipi{grid-template-columns:1fr auto;grid-template-areas:"s f" "t t"}
  .tipi-scelta{grid-area:s}.tipi-foglio{grid-area:f;width:min(230px,38vw)}.tipi-testo{grid-area:t}
}
@media (max-width:760px){
  .tipi{grid-template-columns:1fr;grid-template-areas:"s" "f" "t";gap:20px}
  .tipi-scelta{grid-template-columns:1fr 1fr;gap:8px}
  .tipi-scelta button{font-size:15.500px;padding:10px 12px}
  .tipi-scelta button[aria-pressed="true"]{transform:none}
  .tipi-foglio{width:min(230px,64vw);margin:0 auto}
  .tipi-testo{text-align:center}
  .scritture span{font-size:30px}
  .scritture small{font-size:12.500px}
  /* sul telefono prima il titolo e il testo, poi l'immagine: una sezione non deve aprirsi con una figura senza titolo */
  .due .ordine-1{order:0;margin-top:8px}
  /* tabelle degli articoli: sul telefono vanno a capo dentro lo schermo invece di uscire a destra tagliate */
  .art-corpo .tab-scorri table{min-width:0;font-size:14.500px}
  .art-corpo th,.art-corpo td{padding:8px 6px}
  .haiku-foglio{display:none}
  .marchio{height:48px}
  .footer .marchio{height:76px}
  .intro-fogli img{max-width:170px}
  .parola p.parola-kanji,.parola-kanji,.gioco-kanji{font-size:clamp(34px,11vw,48px)}
  .topbar span{font-size:13.500px}
}
@media (prefers-reduced-motion:reduce){
  .parola.gira{animation:none}
}

/* Risposta subito, in chiaro (ottobre 2026): riquadro "In breve" degli articoli, paragrafo di fatti della scheda, riga "chi c'è dietro" nel footer */
.art-breve{background:var(--bianco);border:var(--bordo);border-radius:14px;padding:16px 20px;margin:0 0 1.4em;font-size:17px;box-shadow:4px 4px 0 var(--ink)}
.art-breve b{font-family:var(--serif);font-size:19px}
.art-breve p{margin:6px 0 0}
.scheda .fatti{font-size:16px;line-height:1.45}
.footer .chi{font-size:14px;line-height:1.5;margin:26px 0 0;max-width:62em}
.footer .chi a{text-decoration:underline}
.footer .chi+.copy{margin-top:16px}