/* fotanni.app: "Fotolabor am Kuechentisch" (docs/paario-remake/design.md): paper, ink blue, orange date stamp.
   Colour roles are the app's own (hell/dunkel); all text pairs checked for WCAG AA (verify.mjs). No script, no cookies. */
@font-face{font-family:"Fraunces";font-weight:700;font-style:normal;font-display:swap;src:url(/assets/fonts/Fraunces-Bold.woff2) format("woff2")}
@font-face{font-family:"Fraunces";font-weight:600;font-style:normal;font-display:swap;src:url(/assets/fonts/Fraunces-SemiBold.woff2) format("woff2")}
@font-face{font-family:"Plus Jakarta Sans";font-weight:400;font-style:normal;font-display:swap;src:url(/assets/fonts/PlusJakartaSans-Regular.woff2) format("woff2")}
@font-face{font-family:"Plus Jakarta Sans";font-weight:600;font-style:normal;font-display:swap;src:url(/assets/fonts/PlusJakartaSans-SemiBold.woff2) format("woff2")}

:root{
  color-scheme:light dark;
  --paper:#F6F4EF;--low:#FBFAF7;--box:#EFEDE7;--high:#E8E5DE;
  --text:#1B1B22;--muted:#4A4954;--outline:#75747E;--line:#C8C6C0;
  --ink:#3D3B8E;--on-ink:#FFFFFF;--ink-box:#E2E0FF;--on-ink-box:#14125A;
  --stamp-text:#C6420B;--stamp:#E4571C;--on-stamp:#1B1B22;
  --lab:#00696B;
  --print:#FBFAF7;--shadow:rgba(27,27,34,.22);--rail:#1B1B22;
  --panel:#3D3B8E;--on-panel:#FFFFFF;
  --serif:"Fraunces",Georgia,"Times New Roman",serif;
  --sans:"Plus Jakarta Sans",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
}
@media (prefers-color-scheme:dark){
  :root{
    --paper:#14141A;--low:#1B1B22;--box:#202028;--high:#2A2A33;
    --text:#EAE8F0;--muted:#C3C1CD;--outline:#8E8C99;--line:#46454F;
    --ink:#BDBAFF;--on-ink:#23216A;--ink-box:#3A3892;--on-ink-box:#E3E0FF;
    --stamp-text:#FF8E4D;--stamp:#FF8A47;--on-stamp:#1B1B22;
    --lab:#4FD9D6;
    --print:#EFEDE7;--shadow:rgba(0,0,0,.6);--rail:#C3C1CD;
    --panel:#3A3892;--on-panel:#E3E0FF;
  }
}
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;text-size-adjust:100%}
body{margin:0;background:var(--paper);color:var(--text);font:400 1.0625rem/1.5 var(--sans);overflow-wrap:break-word}
img{max-width:100%;height:auto}
a{color:var(--ink);text-underline-offset:.18em}
a:hover{text-decoration-thickness:2px}
:focus-visible{outline:3px solid var(--ink);outline-offset:3px;border-radius:4px}
.sr{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
.skip{position:absolute;left:12px;top:-60px;z-index:10;background:var(--ink);color:var(--on-ink);padding:10px 16px;border-radius:12px;font-weight:600;text-decoration:none}
.skip:focus{top:12px}
.wrap{width:min(100%,1080px);margin-inline:auto;padding-inline:20px}
@media(min-width:720px){.wrap{padding-inline:32px}}
h1,h2,h3{font-family:var(--serif);color:var(--text);margin:0;text-wrap:balance}
h1{font-weight:700;font-size:clamp(2rem,6.4vw,3.6rem);line-height:1.08;letter-spacing:-.01em}
h2{font-weight:600;font-size:clamp(1.55rem,4.2vw,2.2rem);line-height:1.15}
h3{font-weight:600;font-size:1.3rem;line-height:1.2}
p{margin:0}

/* Header */
.top{padding-block:16px}
.top .wrap{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap}
.brand{display:inline-flex;align-items:center;gap:12px;color:var(--text);text-decoration:none;font:700 1.5rem/1 var(--serif)}
.brand img{width:44px;height:44px;border-radius:10px;display:block}
.nav{display:none;gap:4px}
.nav a{display:inline-block;padding:10px 12px;border-radius:12px;color:var(--text);text-decoration:none;font-weight:600;font-size:.95rem}
.nav a:hover{background:var(--box)}
@media(min-width:820px){.nav{display:flex}}
.lang{position:relative}
.lang summary{list-style:none;cursor:pointer;display:inline-flex;align-items:center;gap:8px;min-height:44px;padding:8px 14px;border:1px solid var(--outline);border-radius:12px;font-weight:600;font-size:.95rem;background:var(--low)}
.lang summary::-webkit-details-marker{display:none}
.lang summary::after{content:"";width:.5em;height:.5em;border-right:2px solid currentColor;border-bottom:2px solid currentColor;transform:rotate(45deg) translateY(-2px)}
.lang[open] summary::after{transform:rotate(-135deg)}
.lang ul{position:absolute;right:0;z-index:5;margin:6px 0 0;padding:6px;list-style:none;min-width:12.5rem;background:var(--low);border:1px solid var(--line);border-radius:16px;box-shadow:0 10px 28px var(--shadow)}
.lang li a{display:block;padding:10px 12px;border-radius:10px;color:var(--text);text-decoration:none}
.lang li a:hover{background:var(--box)}
.lang li a[aria-current]{font-weight:600;background:var(--ink-box);color:var(--on-ink-box)}

/* Hero: what you do in one sentence, both stores, then the app itself */
.hero{padding-block:clamp(4px,3vw,36px) 0}
.hero-grid{display:grid;grid-template-columns:minmax(0,1fr);gap:26px}
.hero h1{max-width:15ch;font-size:clamp(1.9rem,6.2vw,3.3rem)}
.lead{margin-top:12px;max-width:32rem;font-size:1.1rem;color:var(--muted)}
@media(min-width:640px){.lead{font-size:1.2rem}}
.cta{display:flex;flex-wrap:wrap;gap:10px;align-items:center;margin-top:20px}
@media(min-width:420px){.cta{gap:12px 16px}}
.cta-center{justify-content:center}
.badge{display:inline-flex;align-items:center;height:48px;border-radius:8px}
.badge img{display:block;flex:none}
.badge-apple img{height:48px;width:auto}
.badge-play img{height:62.5px;width:auto}
.badge-play--en img{height:71.4px;margin-inline:-11px}
/* Narrow phones: both badges on one line, same visible height (44 px) for both stores */
@media(max-width:399px){.badge{height:44px}.badge-apple img{height:44px}.badge-play img{height:57.3px}.badge-play--en img{height:65.5px;margin-inline:-10px}}

/* App screens as prints: paper border and a soft shadow, like the photo cards in the app */
.print{background:var(--print);padding:6px;border-radius:24px;box-shadow:0 0 0 1px var(--line),0 14px 26px -12px var(--shadow)}
.print img{display:block;width:100%;height:auto;aspect-ratio:9/16;border-radius:18px;background:var(--high)}
/* The orange date stamp of the app carries the names of the ways to play and the step numbers. */
.stamp{display:inline-block;background:var(--stamp);color:var(--on-stamp);font:700 1.2rem/1.1 var(--serif);padding:6px 11px 7px;border-radius:9px;transform:rotate(-2.5deg);box-shadow:0 2px 5px var(--shadow)}

/* Hero screens: swipe row on phones, three side by side from 640 px */
.shots{margin-inline:-20px;padding:4px 20px 14px;overflow-x:auto;scroll-snap-type:x mandatory;scroll-padding-inline:20px;scrollbar-width:thin;overscroll-behavior-x:contain}
.shots:focus-visible{outline-offset:-3px}
.shots ul{list-style:none;margin:0;padding:0;display:grid;grid-auto-flow:column;grid-auto-columns:min(70%,250px);gap:18px}
.shot{scroll-snap-align:start;min-width:0}
.shot figure{margin:0}
.shot figcaption{position:relative;display:grid;gap:4px;margin-top:-18px;padding-inline:4px}
.shot .stamp{justify-self:start;margin:0 0 8px 12px}
.shot-text{font-weight:600;line-height:1.35}
.shot-meta{font-size:.92rem;color:var(--muted)}
@media(min-width:640px){
  .shots{margin-inline:0;padding:4px 0 0;overflow:visible}
  .shots ul{grid-auto-flow:row;grid-template-columns:repeat(3,minmax(0,1fr));gap:22px;align-items:start}
}
@media(min-width:980px){
  .hero{padding-top:28px}
  .hero-grid{grid-template-columns:minmax(0,4.7fr) minmax(0,7.3fr);align-items:center;gap:40px}
  .hero h1{font-size:clamp(2.4rem,3.6vw,3.3rem)}
  .hero-text{padding-bottom:40px}
  .shot-timeline .print{transform:rotate(-1.4deg)}
  .shot-whose{margin-top:44px}
  .shot-whose .print{transform:rotate(1deg)}
  .shot-room .print{transform:rotate(-.5deg)}
}

/* Sections */
.sec{padding-block:clamp(48px,7vw,88px) 0}
.sec>.wrap>h2{margin-bottom:26px}

/* How to play: a real sequence, so numbered; each step with its screen */
.play{list-style:none;margin:0;padding:0;display:grid;gap:30px;counter-reset:step}
.play li{counter-increment:step;display:grid;grid-template-columns:minmax(0,38%) minmax(0,1fr);gap:18px;align-items:start}
.print-sm{padding:5px;border-radius:18px}
.print-sm img{border-radius:13px}
.step-text{display:grid;gap:10px;align-content:start}
.step-text h3::before{content:counter(step);display:grid;place-items:center;width:42px;height:42px;margin-bottom:12px;border-radius:10px;background:var(--stamp);color:var(--on-stamp);font:700 1.3rem/1 var(--serif);transform:rotate(-3deg);box-shadow:0 2px 5px var(--shadow)}
.step-text p{color:var(--muted)}
@media(min-width:800px){
  .play{grid-template-columns:repeat(3,minmax(0,1fr));gap:32px}
  .play li{grid-template-columns:minmax(0,1fr);gap:22px}
  .play .print-sm{max-width:240px}
}

.panel{background:var(--panel);color:var(--on-panel);border-radius:28px;padding:clamp(24px,5vw,48px)}
.panel h2{color:var(--on-panel);margin-bottom:20px}
.panel ul{margin:0 0 24px;padding:0;list-style:none;display:grid;grid-template-columns:minmax(0,1fr);gap:12px}
.panel li{position:relative;padding-left:34px}
.panel li::before{content:"";position:absolute;left:4px;top:.35em;width:.6em;height:1em;border-right:3px solid var(--on-panel);border-bottom:3px solid var(--on-panel);transform:rotate(40deg) scale(.9)}
.panel a{color:var(--on-panel);font-weight:600}
.panel :focus-visible{outline-color:var(--on-panel)}
.faq{display:grid;grid-template-columns:minmax(0,1fr);gap:10px;max-width:50rem}
.faq details{background:var(--low);border:1px solid var(--line);border-radius:16px}
.faq summary{cursor:pointer;list-style:none;padding:16px 52px 16px 20px;font-weight:600;position:relative;min-height:44px}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"";position:absolute;right:22px;top:50%;width:.55em;height:.55em;margin-top:-.45em;border-right:2px solid currentColor;border-bottom:2px solid currentColor;transform:rotate(45deg)}
.faq details[open] summary::after{transform:rotate(-135deg);margin-top:-.15em}
.faq details p{padding:0 20px 18px;color:var(--muted)}
.get{text-align:center}
.get h2{margin-bottom:10px}
.get p{color:var(--muted);margin-bottom:22px}
.get .cta{justify-content:center}
.get .icon{width:84px;height:84px;border-radius:20px;margin:0 auto 18px;display:block}

/* Footer */
.foot{margin-top:clamp(48px,8vw,96px);border-top:1px solid var(--line);padding-block:32px 48px;color:var(--muted);font-size:.95rem}
.foot .wrap{display:grid;gap:22px}
.foot ul{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:6px 22px}
.foot a{color:var(--text);display:inline-block;padding:8px 0;overflow-wrap:anywhere}
.foot details summary{cursor:pointer;font-weight:600;color:var(--text);padding:8px 0}
.foot details div{display:grid;gap:8px;padding:6px 0 0;max-width:46rem}
.foot details ul{display:grid;gap:4px}
.foot details a{padding:2px 0}

/* Documents */
.doc{padding-block:clamp(16px,4vw,40px) 0;max-width:46rem}
.doc .back{display:inline-block;padding:10px 0;font-weight:600}
.doc h1{font-size:clamp(1.9rem,5vw,2.8rem);margin:6px 0 10px}
.doc .intro{color:var(--muted);margin-bottom:6px}
.doc .updated{font-size:.92rem;color:var(--muted);margin-bottom:22px}
.doc h2{font-size:1.4rem;margin:30px 0 10px}
.doc p+p{margin-top:12px}
.doc ul{padding-left:1.3em;margin:10px 0}
.doc li+li{margin-top:6px}
.doc address{font-style:normal}
.note{background:var(--box);border-radius:16px;padding:16px 18px;margin:18px 0}

/* Invitation page /r/<CODE> (rendered by the Worker) */
.join{display:grid;grid-template-columns:minmax(0,1fr);justify-items:center;padding:clamp(16px,6vw,56px) 16px}
.join-card{width:min(100%,32rem);min-width:0;background:var(--low);border:1px solid var(--line);border-radius:28px;padding:clamp(22px,5vw,40px);text-align:center;box-shadow:0 10px 28px var(--shadow)}
.join-card img.icon{width:76px;height:76px;border-radius:18px;margin:0 auto 16px;display:block}
.join-card h1{font-size:clamp(1.5rem,5vw,2rem)}
.code-label{margin-top:22px;color:var(--muted);font-size:.95rem}
.code{margin:6px 0 22px;font:600 clamp(1.6rem,9vw,2.6rem)/1.15 var(--sans);letter-spacing:.2em;padding-left:.2em;overflow-wrap:anywhere;font-variant-numeric:tabular-nums;color:var(--lab)}
.btn{display:inline-block;max-width:100%;overflow-wrap:anywhere;background:var(--ink);color:var(--on-ink);padding:14px 26px;border-radius:16px;font-weight:600;text-decoration:none;min-height:48px}
.join-card .hint{margin:18px 0 22px;color:var(--muted);font-size:.98rem}
.join-card h2{font-size:1.1rem;margin:6px 0 14px}

@media(prefers-reduced-motion:no-preference){
  .nav a,.lang li a,.btn{transition:background-color .15s}
}
@media print{.nav,.lang,.cta,.skip{display:none}}