/* Taurene landing page. Tokens, fonts and buttons come from tokens.css.
   Layout: a bright white page. Each section has a centred heading block (title, short note)
   above its content; content sits on soft rounded cards and panels, never on boxes with borders. */

html{scroll-behavior:smooth}
img,svg{max-width:100%}
p{margin:0 0 var(--space-3)}
h1,h2,h3{margin:0;font-weight:600;text-wrap:balance}
h1{font-size:clamp(40px,5.4vw,64px);line-height:1.08}
h2{font-size:clamp(30px,3.4vw,40px);line-height:1.18}
h3{font-size:20px;line-height:1.3}

/* page frame */
.wrap,main > section,.site-foot{padding-left:max(16px,env(safe-area-inset-left,0px),calc((100% - var(--max)) / 2));
  padding-right:max(16px,env(safe-area-inset-right,0px),calc((100% - var(--max)) / 2))}
@media (min-width:700px){.wrap,main > section,.site-foot{padding-left:max(var(--space-8),calc((100% - var(--max)) / 2));padding-right:max(var(--space-8),calc((100% - var(--max)) / 2))}}

/* notice + floating pill header */
.notice{margin:0;padding-block:var(--space-2);background:var(--water-tint);color:var(--ink);font-size:14px;text-align:center}
.site-head{position:sticky;top:12px;z-index:20;display:flex;align-items:center;gap:var(--space-2);flex-wrap:wrap;
  width:min(calc(100% - 32px),var(--max));margin:16px auto 0;padding:8px 8px 8px 20px;background:rgba(255,255,255,.92);
  -webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);border-radius:var(--radius-round);box-shadow:var(--shadow-card),0 0 0 1px var(--rule)}
.site-head nav{display:flex;gap:2px;margin-left:auto}
.site-head nav a,.lang{display:inline-flex;align-items:center;justify-content:center;min-height:40px;padding:0 12px;border-radius:var(--radius-round);
  font-size:15px;text-decoration:none;color:var(--ink-faint)}
.site-head nav a:hover,.lang:hover{color:var(--ink);background:var(--sheet)}
.lang{min-width:44px;font-weight:600}
.site-head .btn{min-height:40px;padding:0 16px;font-size:14px}
.site-head > .btn-quiet{background:var(--action);color:var(--on-action);box-shadow:var(--shadow-btn)}
@media (max-width:640px){.site-head nav{display:none}.site-head .lang,.site-head > .btn{margin-left:auto}}

/* sections: heading block centred above the content */
main > section{padding-block:var(--space-18) 0}
main > section:last-child{padding-bottom:var(--space-18)}
.sheet{display:grid;grid-template-columns:minmax(0,1fr);gap:var(--space-12)}
.margin{display:grid;gap:var(--space-3);justify-items:center;text-align:center;max-width:640px;margin:0 auto}
.margin p{color:var(--ink-muted);font-size:17px;line-height:1.5;margin:0}
.field{min-width:0}
@media (max-width:900px){main > section{padding-block:72px 0}.sheet{gap:var(--space-8)}}

/* hero: the claim on the left, the poster on a wall on the right */
.hero{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,6fr);gap:var(--space-12);align-items:center;padding-block:72px 0}
.hero h1{margin-bottom:var(--space-6)}
.lead{font-size:20px;line-height:1.45;color:var(--ink-muted);max-width:30em;margin-bottom:var(--space-8)}
.cta-row{display:flex;gap:var(--space-3);flex-wrap:wrap;align-items:center;margin-bottom:var(--space-8)}
.cta-row .more{display:inline-flex;align-items:center;min-height:44px;padding:0 20px;border-radius:var(--radius-round);box-shadow:inset 0 0 0 1px var(--neatline);text-decoration:none;font-size:15px}
.cta-row .more:hover{background:var(--sheet)}
.hero-art{display:grid;gap:var(--space-2);margin:0}
.hero-art .wall-scene,.scene-card .wall-scene{border-radius:var(--radius-img);overflow:hidden;box-shadow:var(--shadow-card)}
@media (max-width:900px){.hero{grid-template-columns:minmax(0,1fr);gap:var(--space-8);padding-block:var(--space-8) 0}}

/* legend: small facts in the hero, each behind a blue tick */
.legend{margin:0}
.legend.small{display:grid;grid-template-columns:auto minmax(0,1fr);gap:10px 8px;align-items:center;font-size:15px}
.legend.small dt{margin:0;display:flex;gap:10px;align-items:center;font-weight:600}
.legend.small dt::before{content:"";flex:none;width:18px;height:18px;border-radius:50%;
  background:var(--signal) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 18 18'%3E%3Cpath d='M5 9.3l2.6 2.5L13 6.4' fill='none' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/18px no-repeat}
.legend.small dd{margin:0;color:var(--ink-muted)}
@media (max-width:480px){.legend.small{grid-template-columns:minmax(0,1fr);gap:2px}.legend.small dd{padding-left:28px;margin-bottom:8px}}

/* how it works: three numbered cards */
.legend:not(.small){display:grid;grid-template-columns:repeat(3,minmax(0,1fr));grid-template-rows:auto 1fr;grid-auto-flow:column;column-gap:var(--space-4)}
.legend:not(.small) dt,.legend:not(.small) dd{margin:0;background:var(--sheet);padding:0 var(--space-6)}
.legend:not(.small) dt{border-radius:var(--radius-card) var(--radius-card) 0 0;padding-top:var(--space-6);font-weight:600;font-size:20px;letter-spacing:var(--track-display);display:grid;gap:var(--space-4);justify-items:start}
.legend:not(.small) dd{border-radius:0 0 var(--radius-card) var(--radius-card);padding-top:var(--space-2);padding-bottom:var(--space-6);color:var(--ink-muted)}
.legend .num{display:inline-flex;align-items:center;justify-content:center;width:28px;height:28px;border-radius:50%;background:var(--signal);color:var(--on-signal);font-size:14px;font-weight:600;letter-spacing:0;font-variant-numeric:tabular-nums}
@media (max-width:760px){.legend:not(.small){grid-template-columns:minmax(0,1fr);grid-template-rows:none;grid-auto-flow:row}
  .legend:not(.small) dd{margin-bottom:var(--space-3)}}

/* framed posters */
.frame{margin:0;background:#1d1d1d;padding:clamp(6px,1.4%,12px);box-shadow:0 18px 36px -14px rgba(0,0,0,.3),0 2px 6px rgba(0,0,0,.1);width:100%}
.frame .poster{background:#fbfaf7;aspect-ratio:297/420;overflow:hidden}
.poster svg{display:block;width:100%;height:auto}

/* styles gallery: posters on a soft panel */
.gallery{display:grid;grid-template-columns:repeat(auto-fill,minmax(170px,1fr));gap:var(--space-12) var(--space-8);background:var(--sheet);border-radius:var(--radius-panel);padding:var(--space-12)}
.card{position:relative}
.card .frame{margin-bottom:var(--space-4);transition:transform .2s ease,box-shadow .2s ease}
.card h3 a{text-decoration:none;color:inherit}
.card h3 a::after{content:"";position:absolute;inset:0;z-index:1}
.card:hover .frame{transform:translateY(-4px);box-shadow:0 26px 40px -16px rgba(0,0,0,.35),0 2px 6px rgba(0,0,0,.1)}
.card:hover h3 a{text-decoration:underline;text-decoration-thickness:1px}
.card:has(a:focus-visible) .frame{outline:2px solid var(--signal);outline-offset:4px}
.card h3 a:focus-visible{outline:0}
.card h3{margin-bottom:var(--space-1);font-size:18px}
.card p{color:var(--ink-muted);font-size:14px;line-height:1.43;margin:0}
.after{margin-top:var(--space-8);text-align:center}
@media (max-width:520px){.gallery{grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--space-8) var(--space-4);padding:var(--space-6) var(--space-4);border-radius:var(--radius-card)}.card h3{font-size:16px}.card p{font-size:13px}}

/* wall photos */
.scenes{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--space-6);align-items:start}
.scene-card{margin:0;display:grid;gap:var(--space-2)}
.fineprint{margin:var(--space-6) auto 0;font-size:14px;color:var(--ink-muted);max-width:70ch;text-align:center}
@media (max-width:700px){.scenes{grid-template-columns:minmax(0,1fr)}}

/* tinted card (privacy) */
.note-block{background:var(--water-tint);border-radius:var(--radius-card);padding:var(--space-8);max-width:760px;margin:0 auto;display:grid;gap:var(--space-3)}
.note-block p{margin:0}
.note-block strong{font-weight:600}

/* print sizes: large figures on a panel */
#print .field{background:var(--sheet);border-radius:var(--radius-panel);padding:var(--space-12)}
.stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:var(--space-6);margin:0 0 var(--space-8)}
.stat{display:grid;gap:var(--space-1)}
.stat dt{order:2;font-size:14px;color:var(--ink-muted)}
.stat dd{order:1;margin:0;font-weight:600;font-size:clamp(34px,4vw,48px);line-height:1.1;letter-spacing:var(--track-display);font-variant-numeric:tabular-nums}
.prose p{max-width:64ch;color:var(--ink-muted)}
@media (max-width:520px){#print .field{padding:var(--space-6);border-radius:var(--radius-card)}}

/* faq: hairline rows with a plus */
.faq-list{max-width:760px;margin:0 auto;width:100%}
.faq-list details{border-bottom:var(--hairline) solid var(--neatline)}
.faq-list summary{list-style:none;cursor:pointer;display:flex;justify-content:space-between;align-items:center;gap:var(--space-4);padding:var(--space-4) 0;font-weight:500;font-size:17px;line-height:1.4}
.faq-list summary::-webkit-details-marker{display:none}
.faq-list summary::after{content:"+";flex:none;font-size:24px;font-weight:500;line-height:1;transition:transform .15s}
.faq-list details[open] summary::after{transform:rotate(45deg)}
.faq-list details > :not(summary){margin:0 0 var(--space-4);max-width:64ch;color:var(--ink-muted)}
.faq-list ul{padding-left:20px}
.faq-list li{margin-bottom:var(--space-1)}
.faq-list a{color:var(--ink)}

/* about + footer */
#about .field{max-width:640px;margin:0 auto;text-align:center}
#about .field p{margin-inline:auto}
.todo-note:empty{display:none}
.site-foot{display:flex;flex-wrap:wrap;align-items:center;gap:var(--space-3) var(--space-8);padding-block:var(--space-8) var(--space-12);border-top:var(--hairline) solid var(--rule)}
.site-foot nav{display:flex;flex-wrap:wrap;gap:var(--space-2) var(--space-6);font-size:14px}
.site-foot nav a{color:var(--ink-faint);text-decoration:none}
.site-foot nav a:hover{color:var(--ink);text-decoration:underline}
.credit{width:100%;margin:0;font-size:13px;color:var(--ink-faint)}