/* Nest Door: site styles. Tokens and card follow the approved style tile (styleguide/). */

:root {
  /* Neutrals: a clear sky for the birds to fly against */
  --paper: #eaf1f6;
  --paper-deep: #d3e3ee;
  --card: #fafcfd;
  --ink: #141b24;
  --ink-soft: #475468;
  --rule: #c3d2dd;

  /* Accents: shapes and fills only, never the only signal */
  --wattle: #f0bb2b;
  --fairywren: #2356a8;

  --font-display: "Fraunces", Georgia, serif;
  --font-body: "Atkinson Hyperlegible Next", system-ui, sans-serif;
  --font-hand: "Caveat", "Comic Sans MS", cursive;

  --radius-card: 18px;
  --shadow-card: 0 1px 0 rgba(20,27,36,.08), 0 12px 28px -12px rgba(20,27,36,.32);
  --focus: 3px solid var(--fairywren);
  --grain: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .08 0 0 0 0 .11 0 0 0 0 .16 0 0 0 .07 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

* { box-sizing: border-box; }
[hidden] { display: none !important; } /* component display rules must not override the hidden attribute */
html { color-scheme: light; }
body {
  margin: 0;
  background: var(--paper) var(--grain);
  color: var(--ink);
  font: 400 1.0625rem/1.55 var(--font-body);
  -webkit-font-smoothing: antialiased;
}
:focus-visible { outline: var(--focus); outline-offset: 3px; border-radius: 6px; }
/* Links in the style tile's colours: ink text with a fairywren-blue underline, never the browser's bright blue */
a { color: var(--ink); text-decoration-color: var(--fairywren); text-decoration-thickness: 1.5px; text-underline-offset: 3px; }
a:hover { text-decoration-thickness: 2.5px; }
h1, h2, h3 { text-wrap: balance; }
p, li, figcaption { text-wrap: pretty; }
img { max-width: 100%; }
.visually-hidden { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.hand { font-family: var(--font-hand); font-weight: 700; }

.skip-link { position: absolute; left: 16px; top: -48px; background: var(--ink); color: var(--card); padding: 10px 14px; border-radius: 8px; z-index: 20; }
.skip-link:focus { top: 12px; }

/* ---- Page layout ---- */
.wrap { max-width: 1120px; margin: 0 auto; padding: 0 24px; }
@media (max-width: 600px) { .wrap { padding: 0 16px; } }

.site-head { padding-top: 28px; padding-bottom: 20px; border-bottom: 2px solid var(--ink); display: flex; align-items: end; justify-content: space-between; gap: 16px; flex-wrap: wrap; }
/* Brand: a nest box with a round door ("next door"), then the wordmark and its handwritten tagline */
.brand { display: flex; align-items: center; gap: clamp(10px, 2vw, 16px); color: inherit; text-decoration: none; }
.brand__mark { flex: none; width: clamp(36px, 6.5vw, 50px); height: auto; transform: rotate(-4deg); }
.brand__text { display: grid; gap: 4px; }
.site-title { display: block; margin: 0; color: var(--ink); font: 700 clamp(2.2rem, 6vw, 3.6rem)/.95 var(--font-display); font-variation-settings: "SOFT" 100, "WONK" 1, "opsz" 144; letter-spacing: -.02em; }
.site-tag { display: block; margin: 0; font: 700 clamp(1.15rem, 3.2vw, 1.5rem)/1.1 var(--font-hand); color: var(--ink-soft); transform: rotate(-2deg); transform-origin: left; }
.brand:hover .brand__mark { transform: rotate(-4deg) translateY(-2px); }
@media (prefers-reduced-motion: no-preference) { .brand__mark { transition: transform .2s ease-out; } }
.site-nav { display: flex; gap: 6px; flex-wrap: wrap; }
.site-nav a { font-weight: 700; color: var(--ink); text-decoration: none; padding: 8px 12px; border-radius: 999px; }
.site-nav a:hover { background: var(--card); }
.site-nav a[aria-current="page"] { background: var(--ink); color: var(--card); }

section.block { padding: 48px 0; }
section.block + section.block { border-top: 1.5px dashed var(--rule); }
.eyebrow { margin: 0 0 6px; font: 700 .8rem/1 var(--font-body); letter-spacing: .14em; text-transform: uppercase; color: var(--ink-soft); }
.block-title { margin: 0 0 6px; font: 600 clamp(1.7rem, 4vw, 2.3rem)/1.1 var(--font-display); font-variation-settings: "SOFT" 100, "WONK" 1; }
.lede { margin: 0 0 24px; max-width: 60ch; color: var(--ink-soft); }

/* ---- Buttons ---- */
.btn {
  font: 700 1rem/1 var(--font-body); padding: 12px 18px; border-radius: 999px; min-height: 44px;
  border: 1.5px solid var(--ink); background: var(--card); color: var(--ink); cursor: pointer;
  box-shadow: 2px 2px 0 var(--ink); text-decoration: none; display: inline-flex; align-items: center; gap: 8px;
}
.btn--primary { background: var(--ink); color: var(--card); }
.btn:hover { transform: translate(-1px,-1px); box-shadow: 3px 3px 0 var(--ink); }
.btn:active { transform: translate(1px,1px); box-shadow: 1px 1px 0 var(--ink); }
.btn:disabled { opacity: .45; cursor: not-allowed; transform: none; box-shadow: none; }
.btn--small { padding: 8px 14px; font-size: .9rem; min-height: 40px; }
.controls { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 18px; }

/* ---- Bird of the day: a centred stack ---- */
.block--centred { text-align: center; }
.block--centred .bird-card { text-align: left; } /* the card keeps its own layout */
.block--centred .lede { margin-inline: auto; }
.today__date { font: 700 1.5rem/1.1 var(--font-hand); color: var(--ink-soft); margin: 4px 0 18px; }
.stage { position: relative; display: flex; justify-content: center; }
.controls--centred { justify-content: center; }
#card-buttons { margin: 0; }
#card-buttons:empty { display: none; }

/* ---- Find a bird: search and filters ---- */
.finder { display: grid; gap: 14px; margin: 0 0 22px; max-width: 760px; }
.finder__label { font-weight: 700; }
.finder__search { position: relative; }
.finder__search svg { position: absolute; left: 14px; top: 50%; width: 20px; height: 20px; translate: 0 -50%; color: var(--ink-soft); pointer-events: none; }
.finder__search input {
  width: 100%; font: 400 1.1rem/1.3 var(--font-body); color: var(--ink); padding: 13px 14px 13px 44px; min-height: 50px;
  background: var(--card); border: 1.5px solid var(--ink); border-radius: 14px; box-shadow: 2px 2px 0 var(--ink);
}
.finder__search input::placeholder { color: #6b7686; } /* 4.6:1 on the card colour */
.finder__search input:focus-visible { outline: var(--focus); outline-offset: 2px; }
.chips { border: 0; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; min-width: 0; }
.chips legend { padding: 0; margin-bottom: 8px; font: 700 .75rem/1.3 var(--font-body); letter-spacing: .12em; text-transform: uppercase; color: var(--ink-soft); }
.chips legend small { font-size: inherit; font-weight: 400; letter-spacing: normal; text-transform: none; }
.chip { position: relative; display: inline-flex; }
.chip input { position: absolute; opacity: 0; inset: 0; margin: 0; cursor: pointer; }
.chip > span {
  display: inline-flex; align-items: center; gap: 7px; padding: 9px 14px; min-height: 40px; border-radius: 999px;
  font: 700 .95rem/1 var(--font-body); border: 1.5px solid var(--ink); background: var(--card); color: var(--ink); cursor: pointer;
}
.chip__count { font-weight: 400; opacity: .75; }
.chip input:checked + span { background: var(--ink); color: var(--card); }
/* A tick, not just the colour change, shows which checkboxes are on */
.chip input[type="checkbox"]:checked + span::after { content: "✓"; font-weight: 700; }
.chip input:focus-visible + span { outline: var(--focus); outline-offset: 2px; }
.chip:hover > span { box-shadow: 2px 2px 0 var(--ink); }
.swatch { width: 14px; height: 14px; border-radius: 50%; border: 1.5px solid var(--ink); display: inline-block; }
.finder__more { border-top: 1.5px dashed var(--rule); padding-top: 12px; }
.finder__more summary { cursor: pointer; font-weight: 700; padding: 6px 0; width: fit-content; }
.finder__more[open] summary { margin-bottom: 12px; }
.finder__more .chips + .chips { margin-top: 14px; }
#filter-count { font-weight: 400; color: var(--ink-soft); }
.finder__foot { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; min-height: 40px; }
.finder__status { margin: 0; color: var(--ink-soft); }

/* ---- Decks ---- */
.deck-blurb { margin: 0 0 18px; color: var(--ink-soft); }
.deck-grid { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 18px; }

/* Mini card: the full card in small. Two zones (art, then label below the rule), 2:3 like the full card */
.mini {
  position: relative; display: flex; flex-direction: column; width: 100%; aspect-ratio: 2 / 3; padding: 0; text-align: left; cursor: pointer;
  border-radius: 14px; border: 1.5px solid var(--ink); background: var(--card) var(--grain); color: var(--ink);
  overflow: hidden; box-shadow: var(--shadow-card); font: inherit;
  transition: transform .2s ease-out, box-shadow .2s ease-out;
}
.mini:hover { transform: translateY(-4px) rotate(-1deg); box-shadow: 0 1px 0 rgba(20,27,36,.08), 0 18px 30px -14px rgba(20,27,36,.4); }
.mini__art-zone { position: relative; display: block; flex: 1; min-height: 0; overflow: hidden; }
/* Same size and place as the full card's shape, so the harbour's water runs off both edges like a shore */
.mini__shape { position: absolute; width: 108%; left: -4%; top: 2%; }
.mini__art { position: absolute; inset: 9% 6%; display: block; }
.mini__art svg { width: 100%; height: 100%; }
.mini__soon { position: absolute; left: 0; right: 0; top: 40%; text-align: center; font: 700 1.05rem/1.1 var(--font-hand); color: var(--ink-soft); }
.mini__label { position: relative; display: block; padding: 8px 10px 10px; border-top: 1.5px solid var(--ink); background: var(--card); }
.mini__label b { display: block; font: 700 1.05rem/1.1 var(--font-display); font-variation-settings: "SOFT" 100, "WONK" 1; }
.mini__label > span { display: block; margin-top: 3px; font-size: .75rem; color: var(--ink-soft); }
.mini__dots { position: absolute; right: 8px; bottom: calc(100% + 5px); width: 18px; height: 15px; }
.mini__no { position: absolute; top: 8px; right: 10px; font: 700 .7rem/1 var(--font-body); letter-spacing: .1em; color: var(--ink-soft); background: var(--card); padding: 3px 5px; border-radius: 4px; }
@media (prefers-reduced-motion: reduce) { .mini { transition: none; } .mini:hover { transform: none; } }

/* ---- Card dialog ---- */
dialog.card-dialog {
  border: 0; padding: 56px 4px 16px; background: transparent;
  width: min(368px, calc(100vw - 24px)); max-width: none; max-height: calc(100dvh - 16px); overflow: auto;
}
dialog.card-dialog::backdrop { background: rgba(20,27,36,.6); }
.card-dialog__inner .bird-card { width: 100%; }
.card-dialog .close { position: absolute; top: 4px; right: 4px; z-index: 10; width: 44px; height: 44px; border-radius: 50%; padding: 0; justify-content: center; }

/* ---- The bird card (360px design, scales down to fit) ---- */
.bird-card { perspective: 1400px; width: min(360px, 100%); container-type: inline-size; }
.bird-card__inner { position: relative; aspect-ratio: 2 / 3; transform-style: preserve-3d; }
.face {
  position: absolute; inset: 0; border-radius: var(--radius-card); overflow: hidden;
  background: var(--card) var(--grain); box-shadow: var(--shadow-card); border: 1.5px solid var(--ink);
  backface-visibility: hidden; -webkit-backface-visibility: hidden;
}
/* Front: art area above, label below the rule. The label grows for long names; the art keeps its own space. */
.face--front { display: flex; flex-direction: column; }
.art { position: relative; flex: 1 1 auto; min-height: 0; }
.face--back { transform: rotateY(180deg); padding: 22px 22px 18px; display: flex; flex-direction: column; }
.bird-card[data-reduced] .face--back { transform: none; opacity: 0; }
.bird-card[data-reduced].is-flipped .face--back { opacity: 1; }
.bird-card[data-reduced].is-flipped .face--front { opacity: 0; }
.bird-card[data-reduced] .face { transition: opacity .2s linear; }

/* Inside the art zone at the top (no awkward clipping); the harbour's water still runs off both edges */
.burst { position: absolute; width: 108%; left: -4%; top: 2%; }
.scrap { position: absolute; left: 6%; right: 6%; top: 14%; height: 74%; }
.scrap > svg { width: 100%; height: 100%; overflow: visible; }
.scene .layer-setting { mix-blend-mode: multiply; }
.scene { cursor: pointer; }
.scene--still { cursor: default; }
.soon {
  position: absolute; left: 18%; right: 18%; top: 42%; text-align: center; margin: 0;
  font: 700 1.5rem/1.1 var(--font-hand); color: var(--ink-soft);
}
.soon small { display: block; margin-top: 6px; font: 400 .85rem/1.3 var(--font-body); }

.label { position: relative; flex: none; padding: 14px 20px 18px; background: var(--card); border-top: 1.5px solid var(--ink); }
.label h3 { margin: 0; font: 700 2.4rem/1 var(--font-display); font-variation-settings: "SOFT" 100, "WONK" 1, "opsz" 144; letter-spacing: -.01em; }
.label--long h3 { font-size: 1.95rem; }
.label--xlong h3 { font-size: 1.65rem; line-height: 1.05; }
.label .sci { padding-right: 84px; margin: 4px 0 0; font: italic 400 1rem/1.2 var(--font-display); color: var(--ink-soft); }
.card-no { position: absolute; right: 20px; bottom: 22px; font: 700 .75rem/1 var(--font-body); letter-spacing: .12em; color: var(--ink-soft); }

/* The note lives inside the label and sits just above its top rule, however tall the label grows */
.annotation {
  position: absolute; left: 14px; bottom: calc(100% + 4px); z-index: 3; margin: 0; font: 700 1.45rem/1 var(--font-hand);
  transform: rotate(-6deg); transform-origin: left bottom; display: flex; align-items: flex-end; gap: 2px; white-space: nowrap;
}
.annotation svg { width: 44px; height: 30px; margin-bottom: 10px; }
/* The handwriting sits on its own slip of paper, and the arrow has a paper-coloured halo,
   so both stay readable (ink on paper, 16:1) over any deck shape, however dark. */
.annotation span { background: var(--card); padding: 1px 8px 4px; border-radius: 3px; box-shadow: 0 1px 2px rgba(20,27,36,.2); }
/* Dot cluster lives in the label, sitting just above its rule on the right, like the note on the left */
.label-dots { position: absolute; right: 20px; bottom: calc(100% + 8px); width: 26px; height: 22px; z-index: 3; pointer-events: none; }

/* Sticker: die-cut vinyl that presses on and flashes once on hover */
@property --peel { syntax: "<length>"; inherits: true; initial-value: 7px; }
@property --shine-x { syntax: "<percentage>"; inherits: false; initial-value: -40%; }
.sticker {
  --peel: 7px; position: absolute; left: 14px; top: 16px; z-index: 4;
  transform: rotate(-6deg); transform-origin: 30% 30%;
  filter: drop-shadow(0 1px 1px rgba(20,27,36,.22)) drop-shadow(0 3px 4px rgba(20,27,36,.12));
}
.sticker__body {
  position: relative; display: block; font: 700 1.35rem/1 var(--font-hand); color: var(--ink); padding: 7px 14px 9px;
  background: linear-gradient(160deg, rgba(255,255,255,.45) 0 22%, rgba(255,255,255,0) 38%), var(--grain), var(--wattle);
  border: 3px solid #fff; border-radius: 12px 18px 10px 16px / 16px 10px 18px 12px;
  clip-path: polygon(0 0, 100% 0, 100% calc(100% - var(--peel)), calc(100% - var(--peel)) 100%, 0 100%);
}
.sticker__flap {
  position: absolute; right: 0; bottom: 0; width: var(--peel); height: var(--peel);
  background: linear-gradient(to top left, transparent 50%, #dfe7ed 50%, #fff 85%);
  border-top-left-radius: 3px; filter: drop-shadow(-1px -1px 1px rgba(20,27,36,.18));
}
.sticker__body::after {
  content: ""; position: absolute; inset: -3px; pointer-events: none; opacity: 0; mix-blend-mode: screen;
  background: linear-gradient(110deg, rgba(255,255,255,0) calc(var(--shine-x) - 25%), rgba(255,255,255,.8) var(--shine-x), rgba(255,255,255,0) calc(var(--shine-x) + 18%));
}
.sticker.is-shining .sticker__body::after { animation: shine .75s cubic-bezier(.3,.6,.4,1); }
@keyframes shine { from { --shine-x: -40%; opacity: 1; } to { --shine-x: 150%; opacity: 1; } }

/* Polaroids: the real bird, taped on */
.snapshot {
  position: absolute; top: 12px; right: 12px; width: 112px; margin: 0; padding: 5px 5px 16px; z-index: 4;
  background: #fff; transform: rotate(6deg); box-shadow: 0 1px 1px rgba(20,27,36,.2), 0 4px 8px rgba(20,27,36,.12);
}
.snapshot img { display: block; width: 100%; aspect-ratio: 4 / 3; object-fit: cover; }
.snapshot span { position: absolute; left: 0; right: 0; bottom: 2px; text-align: center; font: 700 .85rem/1 var(--font-hand); color: var(--ink-soft); }
.snapshot::before, .polaroid::before {
  content: ""; position: absolute; top: -8px; left: 50%; width: 44px; height: 16px; translate: -50% 0; rotate: -4deg;
  background: rgba(240,187,43,.55); box-shadow: inset 0 0 0 1px rgba(255,255,255,.35);
}

/* Back: field notes */
.face--back h3 { margin: 0; font: 700 1.6rem/1 var(--font-display); font-variation-settings: "SOFT" 100, "WONK" 1; }
.face--back .deck { margin: 4px 0 12px; font: 700 .75rem/1.3 var(--font-body); letter-spacing: .14em; text-transform: uppercase; color: var(--ink-soft); }
.polaroids { list-style: none; margin: 4px 0 14px; padding: 6px 0 0; display: flex; justify-content: space-between; align-items: center; gap: 6px; }
.polaroid { position: relative; background: #fff; padding: 4px 4px 18px; flex: 0 0 auto; box-shadow: 0 1px 1px rgba(20,27,36,.2), 0 4px 8px rgba(20,27,36,.12); }
.polaroid::before { width: 36px; height: 13px; top: -7px; rotate: -5deg; }
.polaroid img { display: block; object-fit: cover; }
.polaroid span { position: absolute; left: 0; right: 0; bottom: 3px; text-align: center; font: 700 .95rem/1 var(--font-hand); color: var(--ink-soft); }
.polaroid:nth-child(1) { rotate: -4deg; } .polaroid:nth-child(1) img { width: 82px; height: 82px; }
.polaroid:nth-child(2) { rotate: 2deg; }  .polaroid:nth-child(2) img { width: 70px; height: 94px; }
.polaroid:nth-child(3) { rotate: -2deg; } .polaroid:nth-child(3) img { width: 98px; height: 74px; }
.notes { list-style: none; margin: 0 0 10px; padding: 0; display: grid; gap: 6px; }
.notes li { display: grid; grid-template-columns: 22px 1fr; gap: 8px; font-size: .95rem; line-height: 1.32; }
.notes li::before { content: ""; width: 12px; height: 12px; margin-top: 5px; border-radius: 50%; background: var(--accent, #e8899c); border: 1.5px solid var(--ink); }
.call { margin-top: auto; border: 1.5px dashed var(--ink); border-radius: 12px; padding: 10px 12px; }
.call .phonetic { font: 700 1.5rem/1.05 var(--font-hand); }
.call.has-audio { display: grid; grid-template-columns: auto 1fr; gap: 12px; align-items: center; }
.call__play {
  width: 44px; height: 44px; border-radius: 50%; border: 1.5px solid var(--ink); background: var(--accent, #e8899c);
  display: grid; place-items: center; cursor: pointer; box-shadow: 2px 2px 0 var(--ink); padding: 0;
}
.call__play .i-stop, .call__play[aria-pressed="true"] .i-play { display: none; }
.call__play[aria-pressed="true"] .i-stop { display: block; }
.call__play[aria-pressed="true"] { animation: calling 1s ease-in-out infinite; }
.call__play.is-loading { animation: none; opacity: .6; }
.call__note { margin: 6px 0 0; font-size: .82rem; color: #9b2c1f; }
.call__play:active { transform: translate(1px, 1px); box-shadow: 1px 1px 0 var(--ink); }
@keyframes calling { 50% { box-shadow: 2px 2px 0 var(--ink), 0 0 0 6px rgba(20,27,36,.12); } }
@media (prefers-reduced-motion: reduce) { .call__play[aria-pressed="true"] { animation: none; } }
.call .phonetic-label { font-size: .85rem; color: var(--ink-soft); }
.credit { margin: 8px 0 0; font-size: .7rem; line-height: 1.3; color: var(--ink-soft); }
.credit a { color: inherit; }

/* Draw animation stage */
.draw-pile { position: absolute; inset: 0; pointer-events: none; }

/* ---- Footer ---- */
/* Footer: the logo, a site map and the credits */
.site-foot { margin-top: 32px; border-top: 2px solid var(--ink); background: var(--paper-deep) var(--grain); color: var(--ink-soft); font-size: .92rem; }
.site-foot__inner { display: grid; grid-template-columns: 1.2fr 1fr 1.6fr; gap: 28px; padding-top: 32px; padding-bottom: 40px; }
@media (max-width: 760px) { .site-foot__inner { grid-template-columns: 1fr; gap: 22px; } }
.site-foot a { color: var(--ink); }
.site-foot__heading { margin: 0 0 8px; font: 700 .75rem/1.3 var(--font-body); letter-spacing: .14em; text-transform: uppercase; color: var(--ink-soft); }
.site-foot__map ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.site-foot__map a { font-weight: 700; text-decoration: none; }
.site-foot__map a:hover { text-decoration: underline; }
.site-foot__credits p { margin: 0 0 8px; }
.brand--small { align-self: start; gap: 9px; }
.brand--small .brand__mark { width: 34px; }
.brand--small .site-title { font-size: 1.6rem; }
.brand--small .site-tag { font-size: 1.05rem; }

/* Narrow cards (phones): tighten the back so it never overflows */
@container (max-width: 352px) {
  .face--back { padding: 16px 16px 14px; }
  .face--back h3 { font-size: 1.45rem; }
  .face--back .deck { margin-bottom: 8px; }
  .polaroids { margin-bottom: 10px; }
  .polaroid:nth-child(1) img { width: 74px; height: 74px; }
  .polaroid:nth-child(2) img { width: 62px; height: 84px; }
  .polaroid:nth-child(3) img { width: 90px; height: 68px; }
  .notes { gap: 5px; }
  .notes li { font-size: .9rem; line-height: 1.28; }
  .call { padding: 8px 10px; }
  .call .phonetic { font-size: 1.35rem; }
}

/* Small phones (360px wide screens and under): tighter still, so longer credits fit */
@container (max-width: 330px) {
  .face--back { padding: 14px 14px 12px; }
  .polaroids { margin-bottom: 6px; }
  .polaroid:nth-child(1) img { width: 64px; height: 64px; }
  .polaroid:nth-child(2) img { width: 54px; height: 72px; }
  .polaroid:nth-child(3) img { width: 78px; height: 58px; }
  .notes { gap: 4px; margin-bottom: 8px; }
  .notes li { font-size: .84rem; }
  .call .phonetic { font-size: 1.2rem; }
  .credit { margin-top: 6px; font-size: .64rem; }
}

/* ---- Play: quizzes ---- */

.game { background: var(--card) var(--grain); border: 1.5px solid var(--ink); border-radius: var(--radius-card); padding: 20px; box-shadow: var(--shadow-card); }
.game__title { margin: 0 0 12px; font: 700 1.6rem/1.1 var(--font-display); font-variation-settings: "SOFT" 100, "WONK" 1; }
.game__head { display: grid; grid-template-columns: auto 1fr; gap: 14px; align-items: center; margin-bottom: 14px; }
.game__play {
  width: 64px; height: 64px; border-radius: 50%; border: 1.5px solid var(--ink); background: var(--wattle); color: var(--ink);
  display: grid; place-items: center; cursor: pointer; box-shadow: 2px 2px 0 var(--ink);
}
.game__play .i-stop, .game__play[aria-pressed="true"] .i-play { display: none; }
.game__play[aria-pressed="true"] .i-stop { display: block; }
.game__play[aria-pressed="true"] { animation: calling 1s ease-in-out infinite; }
.game__prompt { margin: 0 0 4px; font-weight: 700; font-size: 1.1rem; }
.game__hint summary { cursor: pointer; color: var(--ink-soft); font-size: .9rem; }
.game__hint p { margin: 6px 0 0; font-size: .9rem; }
.game__hint .hand { font-size: 1.35rem; }
.game__options { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.option {
  position: relative; display: grid; gap: 6px; padding: 8px; min-height: 44px; text-align: left; cursor: pointer;
  font: 700 .95rem/1.2 var(--font-body); color: var(--ink); background: #fff; border: 1.5px solid var(--ink); border-radius: 12px;
}
.option img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: 6px; display: block; }
.option:hover:not(:disabled) { transform: translateY(-2px); box-shadow: 2px 2px 0 var(--ink); }
.option:disabled { cursor: default; opacity: .55; }
.option.is-right, .option.is-wrong { opacity: 1; }
.option.is-right { box-shadow: 0 0 0 3px var(--ink); }
.option.is-wrong { border-style: dashed; }
.option .mark { display: inline-flex; align-items: center; gap: 4px; font-size: .85rem; }
.option--text { padding: 14px; }
.game__options--duel { grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); margin-top: 12px; }
.game__feedback { min-height: 1.5em; margin: 12px 0 0; font-weight: 700; }
.game__foot { display: flex; justify-content: space-between; align-items: center; gap: 10px; margin-top: 8px; }
.game__streak { font: 700 1.3rem/1 var(--font-hand); color: var(--ink-soft); }
.game__credit, .duel__photo figcaption { margin: 10px 0 0; font-size: .72rem; color: var(--ink-soft); }
.game__credit a, .duel__photo figcaption a { color: inherit; }
.duel__photo { margin: 0; }
.duel__photo img { width: 100%; aspect-ratio: 4 / 3; object-fit: contain; background: var(--paper-deep); border-radius: 10px; display: block; }
.duel__tips { margin-top: 12px; padding: 12px 14px; border: 1.5px dashed var(--ink); border-radius: 12px; }
.duel__tips-title { margin: 0 0 6px; font: 700 1.3rem/1 var(--font-hand); }
.duel__tips ul { margin: 0; padding-left: 1.1em; display: grid; gap: 4px; font-size: .92rem; }

/* ---- Collection ---- */
.collection-deck { margin-bottom: 28px; }
.collection-deck__title { margin: 0 0 8px; font: 600 1.3rem/1.2 var(--font-display); display: flex; justify-content: space-between; gap: 12px; }
.collection-deck__title span { font: 700 .95rem/1.4 var(--font-body); color: var(--ink-soft); }
.progress { height: 10px; border: 1.5px solid var(--ink); border-radius: 999px; background: var(--card); overflow: hidden; margin-bottom: 14px; }
.progress span { display: block; height: 100%; background: var(--ink); }
.slot { position: relative; display: flex; flex-direction: column; aspect-ratio: 2 / 3; border: 1.5px dashed var(--rule); border-radius: 14px; background: var(--card); }
.slot .mini__shape { opacity: .5; }
.slot__q { position: absolute; inset: 0; display: grid; place-items: center; font: 700 2.4rem/1 var(--font-display); color: var(--ink-soft); }

/* ---- Toast for new cards ---- */
.toast {
  position: fixed; left: 50%; bottom: 20px; z-index: 30; margin: 0; translate: -50% calc(100% + 40px); /* fully off-screen when hidden */
  background: var(--ink); color: var(--card); padding: 12px 18px; border-radius: 999px; font-weight: 700;
  box-shadow: var(--shadow-card); transition: translate .35s cubic-bezier(.3,.7,.3,1); max-width: calc(100vw - 32px); text-align: center;
}
.toast.is-shown { translate: -50% 0; }
@media (prefers-reduced-motion: reduce) { .toast { transition: none; } }
/* The collection is an overview: denser tiles, name only */
.collection-deck .deck-grid { grid-template-columns: repeat(auto-fill, minmax(96px, 1fr)); gap: 10px; }
.collection-deck .mini__label { padding: 6px 7px 7px; }
.collection-deck .mini__label b { font-size: .8rem; }
.collection-deck .mini__label > span { display: none; }
.collection-deck .mini__dots { width: 13px; height: 11px; right: 5px; bottom: calc(100% + 3px); }
.collection-deck .mini__no { font-size: .6rem; top: 5px; right: 6px; }
.collection-deck .slot { border-radius: 10px; }
.collection-deck .slot__q { font-size: 1.6rem; }

/* ---- Park walk (game) ---- */
/* The room keeps the painting's shape; on narrow screens it stays readable and scrolls sideways, following the walker */
.walk-viewport { overflow-x: auto; overflow-y: hidden; border-radius: var(--radius-card); border: 1.5px solid var(--ink); box-shadow: var(--shadow-card); background: #fafcfd; scrollbar-width: thin; }
.walk-room { position: relative; width: max(100%, 860px); cursor: pointer; user-select: none; -webkit-user-select: none; touch-action: pan-x; }
.walk-room__scene { position: absolute; inset: 0; width: 100%; height: 100%; display: block; pointer-events: none; }
.walk-bird { position: absolute; z-index: 300; }
.walk-bird__art { position: absolute; pointer-events: none; }
.walk-layers, .walk-fx, .walk-layer, .walk-layer__box { position: absolute; inset: 0; width: 100%; height: 100%; }
.walk-layer img { position: absolute; display: block; max-width: none; }
.walk-layer__box { visibility: hidden; }
/* Notes and words from the moves: drawn in the card's 220 x 200 units, which are tiny at walk size,
   so the effects layer is scaled up around the bird; its text reads at about the card's size */
.walk-fx { overflow: visible; pointer-events: none; z-index: 2; scale: var(--fx, 1); transform-origin: var(--fx-origin, 50% 50%); }
.walk-fx text { paint-order: stroke; stroke: #fafcfd; stroke-width: calc(3px / var(--fx, 1)); }
/* The tap target covers the bird and is never smaller than 44px */
.walk-bird__hit { position: absolute; left: 50%; top: 50%; translate: -50% -50%; width: max(100%, 44px); height: max(100%, 44px); padding: 0; border: 0; border-radius: 12px; background: none; cursor: pointer; }
.walk-bird__hit:focus-visible { outline: var(--focus); outline-offset: 2px; }
.walk-bird.is-meeting { z-index: 900 !important; }
.walker { position: absolute; translate: -50% -100%; pointer-events: none; }
.walker img { width: 100%; display: block; transform-origin: 50% 100%; }
.walk-out { margin: 14px 0 0; }
.walk-hint { color: var(--ink-soft); }
.walk-caption { margin: 6px 0 0; min-height: 1.6em; font: 700 1.4rem/1.2 var(--font-hand); }
@media (min-width: 908px) { .walk-hint__swipe { display: none; } } /* the whole room fits: nothing to swipe */

/* Feather: the grey painted feather, tinted in the bird's accent colour (multiply keeps the ink lines) */
/* The painted feather slopes about 25deg; turned a further 20deg it sits at 45deg everywhere */
.feather { position: relative; display: inline-block; width: 64px; aspect-ratio: 480 / 260; rotate: 20deg; background: url(../media/game/feather.avif) center / contain no-repeat; }
.feather::after { content: ""; position: absolute; inset: 0; background: var(--feather, #9aa5b1); mix-blend-mode: multiply;
  -webkit-mask: url(../media/game/feather.avif) center / contain no-repeat; mask: url(../media/game/feather.avif) center / contain no-repeat; }
.walk-feather { position: absolute; z-index: 1000; pointer-events: none; translate: -50% -50%; }
.walk-feather .feather { width: clamp(28px, 5vw, 54px); }
/* Gift dialog */
.walk-gift { display: flex; align-items: center; gap: 12px; margin: 0 0 12px; padding: 12px 14px; background: var(--card) var(--grain); border: 1.5px solid var(--ink); border-radius: 14px; box-shadow: var(--shadow-card); }
.walk-gift .feather { width: 72px; flex: none; }
.walk-gift__title { margin: 0; font: 600 1.2rem/1.2 var(--font-display); }
.walk-gift__text { margin: 2px 0 0; font-size: .95rem; line-height: 1.35; }
.met-note { margin: 5px 0 0; font-size: .78rem; line-height: 1.25; color: var(--ink-soft); }
.met-note__feathers { display: inline-flex; align-items: center; gap: 2px; margin-left: 6px; font-weight: 700; color: var(--ink); white-space: nowrap; }
.met-note__feathers .feather { width: 22px; }
/* The gift: walk.js sizes it so the note, card and buttons fit the screen; no scrollbar beside the card */
dialog.card-dialog.is-gift { scrollbar-width: none; }
.is-gift .walk-gift { padding: 10px 12px; gap: 10px; }
.is-gift .walk-gift .feather { width: 52px; }
.is-gift .walk-gift__title { font-size: 1.05rem; }
.is-gift .walk-gift__text { font-size: .9rem; }
.is-gift .controls { margin-top: 12px; gap: 8px; justify-content: center; }
.is-gift .controls .btn { padding: 9px 12px; min-height: 40px; font-size: .9rem; }
dialog.card-dialog.is-gift::-webkit-scrollbar { display: none; }

/* ---- Hub island ---- */
/* The island sits on paper the colour of the painting, with room below; the sea fades into it */
.hub { padding: 1% 2% 0; border-radius: var(--radius-card); border: 1.5px solid var(--ink); box-shadow: var(--shadow-card); overflow: hidden; background: #f7f6f2; }
.hub__stage { position: relative; aspect-ratio: 1376 / 768; }
.hub__map { position: absolute; inset: 0; width: 100%; height: 100%; display: block;
  -webkit-mask: linear-gradient(to bottom, #000 84%, transparent 97%); mask: linear-gradient(to bottom, #000 84%, transparent 97%); }
.hub__walker { z-index: 2; }
/* Place tags: paper slips like the card notes, pinned over each neighbourhood */
.hub__place {
  position: absolute; z-index: 3; translate: -50% -50%; display: grid; gap: 2px; justify-items: center; cursor: pointer;
  padding: 8px 14px; min-height: 44px; border: 1.5px solid var(--ink); border-radius: 12px; background: var(--card) var(--grain);
  box-shadow: 2px 3px 0 var(--ink); color: var(--ink); font: inherit; rotate: -2deg;
}
.hub__place:nth-of-type(2n) { rotate: 2deg; }
.hub__place:hover { translate: -50% calc(-50% - 2px); box-shadow: 3px 5px 0 var(--ink); }
.hub__place[aria-disabled="true"] { pointer-events: none; }
.hub__name { font: 600 clamp(.95rem, 2.2vw, 1.25rem)/1.1 var(--font-display); }
.hub__count { font: 700 clamp(.8rem, 1.8vw, 1rem)/1.1 var(--font-hand); color: var(--ink-soft); white-space: nowrap; }
.hub__place.is-done .hub__count::after { content: " ✓"; }
.walk-back { margin-bottom: 12px; }
#walk-h:focus { outline: none; }
.hub__counts { display: none; }
/* Phones: the island is small, so its tags show just the name and the counts sit under the map */
@media (max-width: 520px) {
  .hub__place { padding: 4px 10px; min-height: 36px; }
  .hub__place .hub__count { display: none; }
  .hub__counts { display: flex; flex-wrap: wrap; gap: 4px 14px; margin: 10px 0 0; font-size: .9rem; color: var(--ink-soft); }
  .hub__counts b { color: var(--ink); }
  /* Four links in a tidy two-by-two grid */
  .site-nav { display: grid; grid-template-columns: 1fr 1fr; gap: 4px; width: 100%; }
  .site-nav a { padding: 8px 4px; font-size: .86rem; text-align: center; white-space: nowrap; }
}

/* ---- States: loading and load errors ---- */
.loading { display: flex; align-items: center; justify-content: center; gap: 10px; margin: 0; padding: 40px 12px; color: var(--ink-soft); font: 700 1.3rem/1.2 var(--font-hand); }
.loading__feather { --feather: #9aa5b1; width: 48px; }
@media (prefers-reduced-motion: no-preference) {
  .loading__feather { animation: flutter 1.6s ease-in-out infinite; }
  @keyframes flutter { 0%, 100% { translate: 0 0; rotate: 14deg; } 50% { translate: 0 -6px; rotate: 26deg; } }
}
.load-error { margin: 12px auto; max-width: 420px; padding: 18px 20px; text-align: center; background: var(--card) var(--grain); border: 1.5px dashed var(--ink); border-radius: 14px; }
.load-error p { margin: 0 0 10px; }
.load-error__title { font: 600 1.3rem/1.2 var(--font-display); }

/* A painting or photo that didn't load: plain paper with a note, never a broken-image icon */
.img-missing { display: grid; place-items: center; min-height: 3em; padding: 6px; text-align: center; background: var(--paper) var(--grain);
  font: 700 .95rem/1.1 var(--font-hand); color: var(--ink-soft); }
.store-note { margin: 0 0 14px; padding: 10px 14px; max-width: 60ch; background: var(--card); border: 1.5px dashed var(--ink); border-radius: 12px; font-size: .95rem; }
.walk-slow { margin: 0; }
/* Met everyone out today */
.walk-done { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; margin: 14px 0 0; padding: 14px 16px; background: var(--card) var(--grain); border: 1.5px solid var(--ink); border-radius: 14px; box-shadow: var(--shadow-card); }
.walk-done > div { flex: 1 1 240px; }
.walk-done p { margin: 0; }
.walk-done__title { font: 600 1.15rem/1.2 var(--font-display); margin-bottom: 2px !important; }
.walk-done .feather { width: 56px; flex: none; }
.hub__done { margin: 0 0 14px; }
.data-failed .needs-data { display: none !important; }
.snapshot .img-missing { position: static; width: 100%; aspect-ratio: 4 / 3; height: auto !important; font-size: .8rem; }

/* ---- Stacked decks ---- */
.stacks { list-style: none; margin: 16px 0 0; padding: 0 10px; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 56px 60px; }
@media (max-width: 900px) { .stacks { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 44px 40px; max-width: 560px; } }
@media (max-width: 420px) { .stacks { gap: 36px 30px; } }
.stack { position: relative; display: block; width: 100%; padding: 0; border: 0; background: none; cursor: pointer; font: inherit; color: var(--ink); text-align: left; }
/* Two cards peeking out beneath the top card */
.stack::before, .stack::after { content: ""; position: absolute; inset: 0; border: 1.5px solid var(--ink); border-radius: 14px; background: var(--card); box-shadow: var(--shadow-card); }
.stack::before { rotate: 2.5deg; translate: 4px 4px; }
.stack::after { rotate: -2deg; translate: -3px 3px; }
.stack__card { position: relative; z-index: 1; display: flex; flex-direction: column; aspect-ratio: 2 / 3; border: 1.5px solid var(--ink); border-radius: 14px; overflow: hidden; background: var(--card); box-shadow: var(--shadow-card); transition: transform .2s ease-out; }
.stack:hover .stack__card, .stack:focus-visible .stack__card { transform: translateY(-6px) rotate(-1deg); }
@media (prefers-reduced-motion: reduce) { .stack__card { transition: none; } .stack:hover .stack__card { transform: none; } }
.stack__art { position: relative; flex: 1; min-height: 0; display: block; overflow: hidden; background: var(--card); }
.stack__art img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.stack__label { display: block; padding: 10px 12px 12px; border-top: 1.5px solid var(--ink); background: var(--card); }
.stack__label b { display: block; font: 700 1.15rem/1.15 var(--font-display); font-variation-settings: "SOFT" 100, "WONK" 1; }
.stack__label span { display: block; margin-top: 3px; font-size: .82rem; color: var(--ink-soft); }
.stack__all { position: absolute; inset: 0; display: grid; place-items: center; font: 600 2.6rem/1 var(--font-display); color: var(--ink-soft); background: var(--card); }
.decks-head { margin: 4px 0 18px; }
.decks-head__title { margin: 12px 0 4px; font: 600 1.5rem/1.15 var(--font-display); }
.decks-head__title:focus { outline: none; }
.decks-head .deck-blurb { margin: 0; }

/* ---- Play: the game choice ---- */
.game-pick { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 22px; max-width: 760px; }
.game-tile {
  display: grid; gap: 6px; padding: 0 0 18px; text-align: left; cursor: pointer; font: inherit; color: var(--ink);
  background: var(--card); border: 1.5px solid var(--ink); border-radius: var(--radius-card); box-shadow: var(--shadow-card); overflow: hidden;
  transition: transform .2s ease-out;
}
.game-tile:hover, .game-tile:focus-visible { transform: translateY(-4px) rotate(-.6deg); }
@media (prefers-reduced-motion: reduce) { .game-tile { transition: none; } .game-tile:hover { transform: none; } }
.game-tile__art { position: relative; display: flex; align-items: flex-end; justify-content: center; gap: 4%; height: 150px; margin-bottom: 8px; padding: 14px 18px 0; background: var(--card); border-bottom: 1.5px solid var(--ink); }
.game-tile__art img { height: 118px; width: auto; max-width: 46%; object-fit: contain; }
.game-tile__art--duel img:last-child { transform: scaleX(-1); } /* the two lookalikes face each other */
.game-tile__note { position: absolute; left: 12%; top: 14px; font: 700 1.3rem/1 var(--font-hand); rotate: -6deg; }
.game-tile__title { padding: 0 18px; font: 600 1.45rem/1.15 var(--font-display); font-variation-settings: "SOFT" 100, "WONK" 1; }
.game-tile__text { padding: 0 18px; color: var(--ink-soft); }
.game-stage { max-width: 640px; }
.game-back { margin-bottom: 14px; }
.game__title:focus { outline: none; }

/* ---- Transitions ---- */
/* Moving between pages crossfades (browsers that support cross-page view transitions; others just load) */
@media (prefers-reduced-motion: no-preference) {
  @view-transition { navigation: auto; }
  ::view-transition-old(root), ::view-transition-new(root) { animation-duration: .28s; animation-timing-function: ease-out; }
}