/* annona.co.uk - base: tokens, reset, type, nav, buttons, story/exhibit/fold layout, a11y, print (Task 3) */

/* ---------- tokens ---------- */
:root{
  --green-900:#1f4d2b;
  --green-600:#2f7d3c; /* 5.1:1 against white: the filled buttons carry white text */
  --green-300:#a6d68a;
  --cream:#fff7e6;
  --custard:#f6e3a1;
  --seed:#1a1410;
  --ink:#1e2a1f;
  --paper:#fffdf7;
  --accent:#ff7a3d;
  --sky:#cfe9ff;
  --night:#0b1030;
  --radius:18px;
  --shadow:0 10px 30px rgba(20,40,20,.15);
  --font: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --font-display: "Segoe UI Black", "Arial Black", system-ui, sans-serif;
  --nav-h:64px;
  color-scheme: light;
}

/* ---------- reset ---------- */
*{box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:calc(var(--nav-h) + .5rem)}
body{margin:0;font:400 clamp(1.05rem,1rem + .4vw,1.3rem)/1.55 var(--font);color:var(--ink);background:var(--paper)}
img,svg{max-width:100%;height:auto}
a{color:var(--green-900)}

/* ---------- typography ---------- */
h1{font:900 clamp(2rem,1.2rem + 4vw,4.5rem)/1.05 var(--font-display);margin:0 0 .5rem;color:var(--green-900)}
h2{font:800 clamp(1.7rem,1.1rem + 2.5vw,3rem)/1.1 var(--font-display);margin:0 0 .75rem;color:var(--green-900)}
.lede{font-size:1.25em;font-weight:700;margin-top:0}
.story p{max-width:38ch}
.story h1,.story h2{max-width:22ch}
/* In the two-column layout the story sits in a 22rem card; cap the landing h1 so its longest word ("pudding?") stays inside the card at every desktop width. */
@media (min-width:900px){.story h1{font-size:clamp(2rem,1.2rem + 4vw,3.9rem)}}
p{margin:0 0 1em}
.try-it{font-weight:700;color:var(--green-900)}
.try-it::before{content:"→ " / ""}
blockquote.quote{max-width:48ch;margin:1.25rem 0;padding:.75rem 1rem;border-left:5px solid var(--custard);background:var(--cream);border-radius:0 12px 12px 0}
blockquote.quote p{font-size:1.15em;font-style:italic;margin:0}
blockquote.quote .quote-source{font-size:.95em;font-style:normal;margin-top:.35rem;color:var(--green-900)}
.scroll-cue{text-align:center;font-weight:800;color:var(--green-900);margin:2rem 0 0}

/* ---------- nav ---------- */
.site-nav{position:fixed;inset:0 0 auto 0;z-index:50;display:flex;align-items:center;gap:.75rem;padding:.5rem max(1rem,env(safe-area-inset-left));background:var(--paper);background:color-mix(in srgb,var(--paper) 85%,transparent);backdrop-filter:blur(10px);border-bottom:1px solid rgba(0,0,0,.06)}
/* Skip link: the first Tab stop. Off screen until focused, then a pill just under the nav so a keyboard visitor can
   jump past the nine nav stops straight to the story. */
.skip-link{position:fixed;left:1rem;top:-100px;z-index:60;display:inline-flex;align-items:center;min-height:48px;padding:.6rem 1.1rem;border-radius:999px;background:var(--green-900);color:#fff;font-weight:800;text-decoration:none}
.skip-link:focus{top:calc(var(--nav-h) + .5rem)}
.wordmark{display:inline-flex;align-items:center;min-height:48px;font:900 1.5rem/1 var(--font-display);color:var(--green-900);text-decoration:none;letter-spacing:-.02em}
.site-nav nav{flex:1;display:flex;min-width:0}
.stamps{display:flex;gap:.25rem;list-style:none;margin:0 auto;padding:0}
/* The unearned grey/faded look lives on the emoji span, not the anchor: a filter/opacity on the anchor would also
   grey out its own is-current outline and :focus-visible rings. State classes still toggle on .stamp. */
.stamp{display:grid;grid-template-rows:auto auto;place-items:center;align-content:center;row-gap:1px;width:48px;height:48px;border-radius:50%;text-decoration:none;font-size:1.4rem;transition:transform .3s,opacity .3s,filter .3s;white-space:nowrap;line-height:1}
/* The chapter name under each emoji: a tiny visible label on wider screens (the aria-label carries name + state) */
.stamp-name{font:800 .65rem/1 var(--font);color:var(--green-900);letter-spacing:.01em}
.stamp > [aria-hidden]{filter:grayscale(1);opacity:.45;transition:opacity .3s,filter .3s}
.stamp.is-earned{filter:none;opacity:1}
.stamp.is-earned > [aria-hidden]{filter:none;opacity:1}
.stamp.is-current{outline:3px solid var(--green-900);outline-offset:2px}
.stamp.is-earned.just-earned{animation:stamp-pop .6s cubic-bezier(.2,1.6,.4,1)}
@keyframes stamp-pop{0%{transform:scale(.4) rotate(-20deg)}60%{transform:scale(1.3) rotate(6deg)}100%{transform:scale(1)}}

/* ---------- buttons ---------- */
.btn,.read-btn,.sound-toggle{min-height:48px;min-width:48px;padding:.6rem 1.1rem;border:0;border-radius:999px;background:var(--green-600);color:#fff;font:inherit;font-weight:700;cursor:pointer}
.btn--ghost{background:transparent;color:var(--green-900);box-shadow:inset 0 0 0 2px var(--green-600)}
.sound-toggle{white-space:nowrap}
.read-btn{margin-top:.25rem}

/* ---------- page + chapter layout ---------- */
main{padding-top:var(--nav-h)}
.chapter{position:relative}
.stage{position:relative}
.content{position:relative;z-index:1}
.content-inner{max-width:72rem;margin:0 auto;padding:2.5rem 1rem 4rem}
.exhibit:empty{display:none}

/* ---------- story + exhibit ---------- */
.story{padding:1.5rem;background:var(--paper);background:color-mix(in srgb,var(--paper) 88%,transparent);border-radius:var(--radius);box-shadow:var(--shadow)}
.exhibit{margin-top:1.5rem;padding:1.5rem;background:var(--paper);border-radius:var(--radius);box-shadow:var(--shadow)}
.warning{background:#fff1cf;border-left:6px solid var(--accent);padding:.75rem 1rem;border-radius:8px;font-weight:700}

/* ---------- folds ---------- */
details.more{margin-top:1rem;padding:1rem 1.25rem;background:#f1f6ec;border-radius:var(--radius)}
details.more summary{cursor:pointer;font-weight:800;min-height:48px;display:flex;align-items:center;gap:.5rem;list-style:none}
details.more summary::-webkit-details-marker{display:none}
details.more summary::before{content:"▸" / "";display:inline-block;color:var(--green-600);transition:transform .2s}
details.more[open] summary::before{transform:rotate(90deg)}
details.more p{max-width:70ch}
.keys{font-size:.95em;color:var(--green-900);padding:.5rem .75rem;background:var(--paper);border-radius:8px;display:inline-block}
.sources{font-size:.95em}
.sources h3{margin:1rem 0 .25rem;font:800 1.05em/1.2 var(--font-display);color:var(--green-900)}
.sources a{display:inline-flex;align-items:center;min-height:48px;color:var(--green-900)} /* every source link is a full-height tap target */
/* Fact-driven list: each fact the chapter cites, then its own sources indented under it */
.sources-facts{padding-left:1.1rem}
.sources-facts > li{margin:.35rem 0}
.sources-facts > li > ul{margin:0;padding-left:1.1rem}
.source-fact{display:block;font-weight:800;color:var(--green-900);padding-top:.35rem}

/* ---------- footer ---------- */
.site-footer{padding:3rem 1rem;text-align:center;font-size:.95em}
.site-footer p > a{display:inline-flex;align-items:center;min-height:48px;padding:0 .75rem}
.site-footer .sponsor{margin:.25rem 0 .5rem;color:var(--green-900);font-weight:700}
.site-footer .sponsor-link{text-decoration-thickness:2px;text-underline-offset:3px}
.site-footer .sources{font-size:inherit} /* the footer is already .95em: do not compound it */
.site-footer details.more{text-align:left;max-width:72rem;margin:1rem auto 0}

/* ---------- a11y ---------- */
.visually-hidden{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.sr-live{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
:focus-visible{outline:3px solid var(--seed);outline-offset:3px;box-shadow:0 0 0 6px var(--paper),0 0 0 9px var(--seed)}
/* Without JavaScript the Read buttons and the sound toggle can do nothing: main.js removes .no-js as it boots.
   visibility (not display) keeps their space so nothing shifts when scripts arrive; hidden elements are inert and unfocusable. */
.no-js [data-read],.no-js .sound-toggle{visibility:hidden}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto} *,*::before,*::after{animation-duration:.001ms!important;transition-duration:.001ms!important}}
@media (prefers-contrast:more){.story,.exhibit{box-shadow:0 0 0 2px var(--ink)}}

/* ---------- narrow screens ---------- */
@media (max-width:560px){
  :root{--nav-h:112px}
  .site-nav{flex-wrap:wrap;padding:.4rem .75rem;row-gap:.25rem}
  .site-nav nav{order:3;flex-basis:100%}
  .stamps{justify-content:center;gap:.1rem}
  .stamp{grid-template-rows:auto}
  .stamp-name{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
  .sound-toggle{margin-left:auto}
  .content-inner{padding:1.5rem 1rem 3rem}
  .story,.exhibit{padding:1.1rem}
}

/* ---------- print ---------- */
/* Two print modes.
   1. Ordinary print (Ctrl+P at any time): a readable copy of the story and the adult layer - nav, scenes, buttons,
      the 3D fruit and the interactive exhibits are dropped, the sticky-scene geometry is flattened, and main.js opens
      every chapter's "Tell me more" fold on beforeprint so the sources print with their chapters. The footer's 250-link
      "All sources" fold stays closed and is not printed.
   2. Once a certificate is on the page (body:has(.certificate)): only the certificate prints, on one page - everything
      that is not on the path to it is removed from the flow (display, not visibility, so no blank trailing pages).
      Each certificate rule is its own block, so a browser without :has() drops them and falls back to mode 1. */
@media print{
  .site-nav,.skip-link,.scene,.scene-alt,.sr-live,.read-btn,.sound-toggle,.fruit-stage,.exhibit,.scroll-cue,.keys,#sources-all{display:none!important}
  main{padding:0}
  .chapter{display:block!important;min-height:0!important}
  .stage{display:block!important}
  .content{margin:0!important;padding:0!important}
  .content-inner{display:block!important;padding:0 0 1rem!important}
  .story,details.more{box-shadow:none;background:none;padding:0;margin:0 0 1rem}
  .story{break-inside:avoid}
  .story p,.story h1,.story h2{max-width:70ch} /* the 38ch screen column is narrow on A4 */
  details.more summary{min-height:0}
  details.more summary::before{content:none}
  .sources a{min-height:0;display:inline}
  .sources a::after{content:" (" attr(href) ")";font-size:.8em;word-break:break-all}
  .site-footer{padding:1rem 0}
  .site-footer p > a{display:none} /* the in-page 'All sources' jump link is meaningless on paper */
  .site-footer .sponsor-link{display:inline;min-height:0;padding:0}
  .site-footer .sponsor-link::after{content:" (" attr(href) ")";font-size:.8em}
}
@media print{
  body:has(.certificate) > *:not(main){display:none!important}
}
@media print{
  body:has(.certificate) main > *:not(#passport){display:none!important}
}
@media print{
  body:has(.certificate) #passport .content-inner > *:not(.exhibit){display:none!important}
}
@media print{
  body:has(.certificate) #passport .exhibit > *:not(.quiz){display:none!important}
}
@media print{
  body:has(.certificate) #passport .quiz > *:not(.quiz-results){display:none!important}
}
@media print{
  body:has(.certificate) #passport .quiz-results > *:not(.certificate){display:none!important}
}
@media print{
  body:has(.certificate) #passport,body:has(.certificate) #passport .stage,body:has(.certificate) #passport .content,body:has(.certificate) #passport .content-inner,body:has(.certificate) #passport .exhibit,body:has(.certificate) #passport .quiz,body:has(.certificate) #passport .quiz-results{display:block!important;min-height:0;margin:0;padding:0;box-shadow:none;background:none}
}
@media print{
  .certificate{position:relative;margin:0} /* relative, not static: its frame and corner flourishes are positioned against it */
}