/* Word Savant's own identity, "Encre & Ardoise", taken from the app
   (wordgames/apps/wordsearch/src/theme.ts, checked 2026-10-19):
   cool blue-grey paper, near-black navy ink, teal for actions, amber for the mystery word.
   Gold is never a pale yellow fill: it is a white block with an amber outline, or solid amber
   with white text. Large text and high contrast for players who wear glasses.
   Loaded after /style.css, which gives the reset, --pad and the img reset. */
:root{
  --ws-paper:#E7ECF1; --ws-panel:#FBFCFD;
  --ws-ink:#15212E; --ws-muted:#566576; --ws-line:#C5D1DC;
  --ws-teal:#1F6F78; --ws-amber:#C2841A; --ws-gold-ink:#8A5A09;
}
body{
  background:var(--ws-paper);color:var(--ws-ink);
  font-family:'Source Sans 3',system-ui,sans-serif;font-size:clamp(18px,2.1vw,21px);line-height:1.6;
  min-height:100vh;
}
.wrap{max-width:1100px;margin:0 auto;padding-inline:var(--pad)}
a{color:var(--ws-teal)}
h1,h2,h3{font-family:'Fraunces',Georgia,serif;font-weight:600;color:var(--ws-ink)}
/* long words must wrap at 320 px. No automatic hyphenation: in English it broke "mys-tery", and in
   German it cut short words ("Wer-bung", "ei-nem", "Wortsu-che"); every German heading fits at 320 px
   without it (measured 2026-10-20), and break-word stays as the safety net */
h1,h2,h3{overflow-wrap:break-word}
p{overflow-wrap:break-word}
:focus-visible{outline:3px solid var(--ws-teal);outline-offset:3px}

/* ---------- studio bar: KosmoGames signs it, language links on the right ---------- */
.bar{padding-block:clamp(14px,3vw,24px) 0;display:flex;flex-wrap:wrap;align-items:center;
  justify-content:space-between;gap:8px 20px}
.brand{display:inline-flex;align-items:center;gap:10px;text-decoration:none;min-height:44px;
  color:var(--ws-ink);font-weight:600;font-size:clamp(16px,2vw,18px)}
.brand:hover{color:var(--ws-teal)}
.brand img{width:clamp(28px,4.5vw,34px);height:auto;aspect-ratio:1;border-radius:50%;flex:none}
.langs{display:flex;flex-wrap:wrap;gap:4px;list-style:none}
.langs a{display:inline-flex;align-items:center;justify-content:center;min-height:44px;min-width:44px;
  padding-inline:12px;border-radius:10px;text-decoration:none;font-weight:600;
  font-size:clamp(16px,1.9vw,18px);color:var(--ws-muted)}
/* phones: five links never fit on one row, so lay them out as a tidy 3 + 2 instead of leaving
   "Italiano" alone on the second row */
@media (max-width:479px){.langs{display:grid;grid-template-columns:repeat(3,auto);justify-content:start}}
.langs a:hover{color:var(--ws-ink);background:var(--ws-panel)}
.langs a[aria-current=page]{color:var(--ws-ink);background:var(--ws-panel);
  box-shadow:inset 0 0 0 2px var(--ws-teal)}

/* ---------- hero: text then the landscape slide full width on phones, side by side from
   860 px with a wider image column ---------- */
.hero{display:grid;gap:clamp(24px,4vw,48px);align-items:center;
  padding-block:clamp(20px,4vw,48px) clamp(34px,6vw,70px);
  grid-template-columns:minmax(0,1fr);grid-template-areas:"text" "shot"}
.hero-text{grid-area:text;text-align:center}
.hero-shot{grid-area:shot;display:flex;justify-content:center;min-width:0}
.hero-shot img{width:100%;height:auto;aspect-ratio:1280/720;max-width:760px;
  border-radius:clamp(10px,1.6vw,18px);border:1px solid var(--ws-line);
  box-shadow:0 14px 34px rgba(21,33,46,.12)}
@media (min-width:860px){
  .hero{grid-template-columns:minmax(0,1fr) minmax(0,1.3fr);grid-template-areas:"text shot"}
  .hero-text{text-align:left}
  .hero-shot img{max-width:none}
  .hero .stores{justify-content:flex-start}
  .hero .lede{margin-inline:0}
}
.icon{width:clamp(64px,10vw,84px);height:auto;aspect-ratio:1;border-radius:22%;
  box-shadow:0 4px 14px rgba(21,33,46,.14)}
.hero h1{line-height:1.12;letter-spacing:-.01em;font-weight:700;font-size:clamp(34px,6.4vw,60px);
  margin-top:clamp(12px,2vw,18px)}
.hero h1 .g{color:var(--ws-gold-ink)}
.lede{margin:clamp(14px,2.6vw,22px) auto 0;max-width:46ch;color:var(--ws-ink);
  font-size:clamp(19px,2.3vw,23px);line-height:1.55}

/* ---------- store buttons ---------- */
.stores{display:flex;flex-wrap:wrap;gap:12px;justify-content:center;margin-top:clamp(22px,3.6vw,32px)}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;min-height:48px;
  padding:12px 24px;border-radius:12px;background:var(--ws-teal);color:#FFFFFF;
  font-weight:700;font-size:clamp(18px,2vw,20px);text-decoration:none;line-height:1.2}
.btn:hover{background:#185A61}
.btn svg{width:22px;height:22px;flex:none;fill:currentColor}
.soon{display:inline-flex;align-items:center;min-height:48px;padding:10px 20px;border-radius:12px;
  border:2px dashed var(--ws-line);color:var(--ws-muted);font-weight:600;font-size:clamp(18px,1.9vw,19px);
  line-height:1.3}
.soon b{color:var(--ws-ink);font-weight:700;margin-right:.4em}

/* ---------- sections ---------- */
section{padding-block:clamp(30px,5.5vw,60px)}
section h2{font-size:clamp(26px,4vw,38px);line-height:1.2;margin-bottom:clamp(14px,2.6vw,22px)}
section p + p{margin-top:.8em}
.center{text-align:center}

/* ---------- feature: one column on phones, text and image side by side from 760 px ---------- */
.feature{display:grid;gap:clamp(20px,4vw,56px);align-items:center;grid-template-areas:"text" "shot"}
.feature > div{grid-area:text}
.feature > figure,.feature > .shot{grid-area:shot;justify-self:center}
.feature h2{margin-bottom:clamp(10px,2vw,16px)}
@media (min-width:760px){
  .feature{grid-template-columns:minmax(0,1.1fr) minmax(0,1fr);grid-template-areas:"text shot"}
  .feature.flip{grid-template-columns:minmax(0,1fr) minmax(0,1.1fr);grid-template-areas:"shot text"}
}

/* ---------- slide capture (portrait 800 by 1280) ---------- */
.shot{display:block;width:auto;height:clamp(360px,70vw,480px);aspect-ratio:800/1280;max-width:100%;
  object-fit:contain;
  border-radius:clamp(16px,2.4vw,24px);border:1px solid var(--ws-line);
  box-shadow:0 12px 30px rgba(21,33,46,.10)}
@media (min-width:760px){.shot{height:clamp(440px,46vw,600px)}}

/* ---------- trio: three blocks, white panels; the gold one is outlined in amber ---------- */
/* one column on phones; on tablets the first card (it holds a slide) sits on the left and the two
   others stack beside it, so the third card is never left alone on its row; three columns from 960 px */
.trio{display:grid;gap:clamp(14px,2.4vw,22px);grid-template-columns:minmax(0,1fr)}
@media (min-width:600px){
  .trio{grid-template-columns:repeat(2,minmax(0,1fr))}
  .trio > :first-child{grid-row:span 2}
}
@media (min-width:960px){
  .trio{grid-template-columns:repeat(3,minmax(0,1fr))}
  .trio > :first-child{grid-row:auto}
}
.trio > *{background:var(--ws-panel);border:1px solid var(--ws-line);border-radius:clamp(14px,2vw,20px);
  padding:clamp(20px,3vw,28px)}
.trio > .gold{background:#FFFFFF;border:2px solid var(--ws-amber)}
.trio > .gold h3{color:var(--ws-gold-ink)}
.trio h3{font-size:clamp(20px,2.6vw,24px);line-height:1.3;margin-bottom:8px}
.trio p{color:var(--ws-ink)}
/* small slide inside a trio card: intrinsic 800 by 1280 ratio, same corners and border as .shot */
.trio img{display:block;width:100%;max-width:240px;height:auto;margin:clamp(14px,2.4vw,20px) auto 0;
  border-radius:clamp(16px,2.4vw,24px);border:1px solid var(--ws-line)}

/* ---------- FAQ: one column on phones, title beside the questions on wide screens ---------- */
#faq .faq{display:grid;gap:clamp(10px,2vw,20px)}
@media (min-width:900px){
  #faq .faq{grid-template-columns:minmax(0,1fr) minmax(0,2.2fr);gap:clamp(30px,4vw,60px)}
  #faq .faq h2{position:sticky;top:24px;align-self:start}
}
.qa{border-top:1px solid var(--ws-line);padding-block:clamp(18px,2.8vw,24px)}
.qa:first-child{border-top:0;padding-top:0}
.qa h3{font-size:clamp(20px,2.5vw,23px);line-height:1.35;margin-bottom:8px}
.qa p{color:var(--ws-ink)}
.qa p + p{margin-top:8px}

/* ---------- footer ---------- */
footer{border-top:1px solid var(--ws-line);margin-top:clamp(30px,6vw,56px);
  padding-block:clamp(24px,4vw,34px) clamp(34px,6vw,54px);
  color:var(--ws-muted);font-size:clamp(17px,1.9vw,18px);
  display:flex;flex-wrap:wrap;gap:6px 22px;justify-content:space-between;align-items:center}
footer nav{display:flex;flex-wrap:wrap;gap:0 22px}
footer a{color:var(--ws-muted);text-decoration:none;min-height:44px;display:inline-flex;align-items:center}
footer a:hover{color:var(--ws-teal);text-decoration:underline}