/* Shared stylesheet for the Bounceback Studios static site.
   System font stack only, no external requests.
   Palette from the studio logo: charcoal #141618, cream #F6F1E7, orange #FF5A36. */

:root {
  /* Dark only (Chris 2026-11-06: no light mode). */
  color-scheme: dark;
  --bg: #141618;
  --surface: #1D2023;
  --ink: #F6F1E7;
  --muted: #B4B0A6;
  --rule: #34383C;
  --accent: #FF5A36;       /* decorative: rules, focus, card edge */
  --link: #FF8466;
}

*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  font-size: 1.0625rem;
  line-height: 1.65;
  border-top: 4px solid var(--accent);
}

body > header, body > main, body > footer {
  max-width: 68ch;
  margin-left: auto;
  margin-right: auto;
  padding-left: 1rem;
  padding-right: 1rem;
}

body > header { padding-top: 1.25rem; padding-bottom: 1rem; border-bottom: 1px solid var(--rule); }
body > header p { margin: 0.5rem 0 0; font-size: 0.95rem; }
.logo { display: inline-flex; align-items: center; gap: 0.75rem; text-decoration: none; color: var(--ink); font-weight: 700; font-size: 1.2rem; letter-spacing: 0.01em; }
.logo img { width: 3rem; height: 3rem; border-radius: 10px; display: block; }

/* Home header logo: inline SVG mark that plays the studio intro once on load
   (kangaroo hops backwards, the arc draws back toward the arrow, the arrowhead pops in). */
.logo-mark { width: 3rem; height: 3rem; border-radius: 10px; display: block; flex: none; overflow: hidden; }
.logo-mark.play .logo-roo { animation: logo-hop 1.2s ease-out 1 backwards; }
.logo-mark .logo-arc { stroke-dasharray: 1 2; stroke-dashoffset: 0; }
.logo-mark.play .logo-arc { animation: logo-arc 1.2s ease-out 1 backwards; }
.logo-mark .logo-head { transform-box: fill-box; transform-origin: center; }
.logo-mark.play .logo-head { animation: logo-head 1.2s ease-out 1 backwards; }
@keyframes logo-hop {
  0%, 10% { transform: translate(100px, 30px); }
  30% { transform: translate(50px, -66px); }
  50%, 100% { transform: translate(0, 0); }
}
@keyframes logo-arc {
  0%, 49% { stroke-dashoffset: 1; opacity: 0; }
  50% { stroke-dashoffset: 1; opacity: 1; }
  87%, 100% { stroke-dashoffset: 0; opacity: 1; }
}
@keyframes logo-head {
  0%, 87% { transform: scale(0); }
  100% { transform: scale(1); }
}
@media (prefers-reduced-motion: reduce) {
  .logo-mark .logo-roo, .logo-mark .logo-arc, .logo-mark .logo-head { animation: none; }
}

main { padding-top: 1.5rem; padding-bottom: 2rem; }

h1, h2, h3 { line-height: 1.25; margin: 2em 0 0.5em; }
h1 { font-size: 1.9rem; margin-top: 0.5em; letter-spacing: -0.01em; }
h2 { font-size: 1.3rem; padding-top: 0.5rem; border-top: 1px solid var(--rule); scroll-margin-top: 1rem; }
h3 { font-size: 1.1rem; }
p, ul, ol, table { margin: 0 0 1em; }
ul, ol { padding-left: 1.4rem; }
li { margin-bottom: 0.4em; }
li::marker { color: var(--accent); }
time { color: var(--muted); font-size: 0.95rem; }

a { color: var(--link); text-underline-offset: 0.15em; overflow-wrap: anywhere; }
a:hover { text-decoration-thickness: 2px; }
:focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; border-radius: 2px; }

table { border-collapse: collapse; width: 100%; font-size: 0.95rem; display: block; overflow-x: auto; }
th, td { text-align: left; vertical-align: top; padding: 0.5rem 0.65rem; border: 1px solid var(--rule); }
th { background: var(--surface); }

.toc {
  background: var(--surface);
  border: 1px solid var(--rule);
  border-radius: 8px;
  padding: 0.75rem 1rem 0.5rem;
  margin: 1.25rem 0 1rem;
  font-size: 0.97rem;
}
.toc-title { margin: 0 0 0.4rem; font-weight: 600; font-size: 0.85rem; text-transform: uppercase; letter-spacing: 0.06em; color: var(--muted); }
.toc ol { margin: 0; padding-left: 1.25rem; columns: 1; }
.toc li { margin-bottom: 0.25em; }
@media (min-width: 40rem) { .toc ol { columns: 2; column-gap: 2rem; } }

.tagline { font-size: 1.25rem; margin: 1.5rem 0 1.5rem; }
.card {
  background: var(--surface);
  border: 1px solid var(--rule);
  border-left: 4px solid var(--accent);
  border-radius: 8px;
  padding: 1rem 1.25rem;
}
.card h2 { border: 0; margin: 0 0 0.25rem; padding: 0; font-size: 1.25rem; }
.card p { margin: 0 0 0.75rem; }
.card .links { margin: 0; display: flex; flex-wrap: wrap; gap: 0.25rem 1.25rem; }
.card .links a { display: inline-block; padding: 0.4rem 0; }

/* App cards on the home page: one per row. Phones: banner over the text.
   Wider screens: banner beside the text, so a lone app still fills the row. */
.apps-title { font-size: 0.85rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.08em; color: var(--muted); border: 0; padding: 0; margin: 2.25rem 0 0.9rem; }
.apps { display: grid; gap: 1.5rem; margin: 0 0 1rem; }
.app {
  background: var(--surface);
  border: 1px solid var(--rule);
  border-radius: 16px;
  overflow: hidden;
  display: grid;
  grid-template-columns: 1fr;
  box-shadow: 0 1px 2px rgb(0 0 0 / 0.05), 0 8px 24px rgb(0 0 0 / 0.07);
}
.app-banner { display: block; width: 100%; height: auto; aspect-ratio: 1024 / 500; object-fit: cover; }
.app-body { padding: 1rem 1.15rem 0.7rem; display: flex; flex-direction: column; }
.app-head { display: flex; align-items: center; gap: 0.8rem; margin-bottom: 0.65rem; }
.app-icon { width: 3rem; height: 3rem; border-radius: 22%; flex: none; box-shadow: 0 0 0 1px var(--rule); }
.app h2 { border: 0; margin: 0; padding: 0; font-size: 1.2rem; }
.app-kind { margin: 0; color: var(--muted); font-size: 0.9rem; line-height: 1.4; white-space: nowrap; }
.app p { margin: 0 0 0.75rem; }
/* Store chips: plain text until an app is out; then the official, unaltered badge links to the store. */
/* Plain store names until launch; the official linked badges replace them then (logos alone are not allowed). */
.app .stores { display: flex; align-items: center; gap: 0.5rem; margin: 0 0 0.6rem; font-size: 0.85rem; color: var(--muted); }
.app .links { margin: auto 0 0; display: flex; flex-wrap: wrap; gap: 0.25rem 1.25rem; border-top: 1px solid var(--rule); padding-top: 0.45rem; }
.app .links a { display: inline-block; padding: 0.4rem 0; }
@media (min-width: 40rem) {
  .app { grid-template-columns: minmax(0, 57fr) minmax(0, 43fr); }
  .app-banner { height: 100%; aspect-ratio: auto; }
  .app-body { padding: 1rem 1.2rem 0.55rem; }
  .app p { font-size: 0.97rem; margin-bottom: 0.55rem; }
  .app .links { border-top: 0; padding-top: 0; }
}
.app { box-shadow: 0 8px 24px rgb(0 0 0 / 0.35); }


/* The home page runs wider than the policy pages, so big screens are not one thin strip. */
body.home > header, body.home > main, body.home > footer { max-width: 62rem; }
@media (min-width: 64rem) {
  body.home main { padding-top: 3rem; }
  body.home h1 { font-size: 3rem; }
  body.home .tagline { font-size: 1.4rem; color: var(--muted); }
  body.home .app-body { padding: 1.6rem 1.8rem 1rem; justify-content: center; }
  body.home .app h2 { font-size: 1.5rem; }
  body.home .app-icon { width: 3.75rem; height: 3.75rem; }
  body.home .app p { font-size: 1.05rem; }
}

footer { margin-top: 1rem; padding-top: 1rem; padding-bottom: 3rem; border-top: 1px solid var(--rule); color: var(--muted); font-size: 0.92rem; }
footer p { margin: 0 0 0.4em; }
footer p { font-size: min(0.92rem, 3.1vw); }
footer .legal { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 0.2em 1.5em; }
footer .legal span { white-space: nowrap; }

@media (min-width: 40rem) {
  body > header, body > main, body > footer { padding-left: 1.5rem; padding-right: 1.5rem; }
  h1 { font-size: 2.3rem; }
}

@media print {
  :root { --bg: #fff; --surface: #fff; --ink: #000; --muted: #333; --rule: #999; --link: #000; }
  body { border-top: 0; font-size: 11pt; }
  .toc { display: none; }
  a { text-decoration: underline; }
  h2 { break-after: avoid; }
  li, p { orphans: 3; widows: 3; }
}

/* A soft warm glow behind the top of the home page, so wide screens are not flat. */
body.home {
  background-image: radial-gradient(ellipse 70rem 28rem at 50% -6rem, rgb(255 90 54 / 0.10), transparent 70%);
  background-repeat: no-repeat;
}

.stores .store-btn { display: inline-block; padding: .6rem 1.1rem; border-radius: 999px; background: var(--ink); color: var(--bg); font-weight: 600; text-decoration: none; }
.stores .store-btn:hover, .stores .store-btn:focus-visible { opacity: .85; }
.stores .soon { margin-left: .75rem; color: var(--muted); font-size: .95rem; }
.stores .store-badge { display: inline-block; vertical-align: middle; line-height: 0; }
.stores .store-badge img { height: 40px; width: auto; }
.stores .soon { vertical-align: middle; }
.stores .beta-badge { display: inline-flex; flex-direction: row; align-items: center; gap: 5px; justify-content: center; box-sizing: border-box; height: 40px; width: 120px; justify-content: center; padding: 0 6px; border: 1px solid #a6a6a6; border-radius: 7px; background: #000; color: #fff; text-decoration: none; line-height: 1.05; vertical-align: middle; }
.stores .beta-badge .beta-small { white-space: nowrap; font-size: 8.5px; letter-spacing: .02em; }
.stores .beta-badge .beta-big { white-space: nowrap; font-size: 14px; font-weight: 600; letter-spacing: -.01em; }
.stores .beta-badge:hover, .stores .beta-badge:focus-visible { border-color: #fff; }
.stores .beta-badge img { width: 23px; height: auto; flex: none; margin-top: -2px; }
.stores .beta-badge .beta-text { display: flex; flex-direction: column; }
footer p.credit { font-size: .7rem; line-height: 1.35; color: var(--muted); max-width: 26rem; margin: 0 0 0.6em auto; text-align: right; }
@media (max-width: 40rem) { footer p.credit { margin-left: 0; text-align: left; } }
.stores .beta-badge img.beta-phone { width: 12px; margin-top: 0; }

/* Home footer: ABN with contact under it on the left; copyright and the Android credit on the right. */
footer .foot { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 0.6em 1.5em; }
footer .foot-right { text-align: right; }
@media (max-width: 40rem) { footer .foot-right { text-align: left; } }

/* Spice Dynasty banner: the moving sea fades in over the still image on hover. */
.banner-wrap { position: relative; overflow: hidden; }
.banner-anim { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; transition: opacity 0.25s linear; pointer-events: none; }
.banner-wrap.playing .banner-anim { opacity: 0; }
.banner-wrap:not(.playing) .banner-anim { transition: opacity 1s ease-in-out; }  /* leaving: a slow fade back to the still, the sea still moving */
.banner-wrap.playing .banner-anim.front { opacity: 1; z-index: 1; }
@media (min-width: 40rem) { .banner-wrap { height: 100%; } }

/* Recipe Passport card (Chris 2026-11-07): hover the card and the passport on
   its banner opens, flicks through its pages and closes again (one 4.2 s run
   per hover that always finishes closed; a small script below adds .rp-play).
   A vector copy of the book is laid exactly over the one in the banner image
   (cover drawn at 1074x526 with the book at 70,188, 100x150; the image is
   centred with object-fit: cover), so at rest nothing changes. Flat layers,
   each with its own perspective (no preserve-3d), so the stacking is the same
   in every browser; z-index swaps exactly when a part is edge-on. Still under
   reduced motion. */
.app-art { position: relative; overflow: hidden; container-type: size; aspect-ratio: 1024 / 500; }
.app-art .app-banner { position: absolute; inset: 0; width: 100%; height: 100%; aspect-ratio: auto; }
@media (min-width: 40rem) { .app-art { aspect-ratio: auto; min-height: 100%; } }
.rp-book {
  --s: max(calc(100cqw / 1074), calc(100cqh / 526));
  --p: calc(600 * var(--s));
  position: absolute;
  left: calc(50cqw - 497 * var(--s)); top: calc(50cqh - 103 * var(--s));
  width: calc(164 * var(--s)); height: calc(212 * var(--s));
  background: #101e21; border-radius: calc(20 * var(--s));
  /* At rest the banner image shows its own book; the vector copy is shown only
     while it plays, so a browser night mode (Brave, Dark Reader) that recolours
     page elements but not images can no longer leave a brown book on a grey
     tile (Chris 2026-11-09, iPad). */
  visibility: hidden;
}
.rp-book.rp-play { visibility: visible; }
.rp-shadow, .rp-book-3d {
  position: absolute; left: calc(30 * var(--s)); top: calc(28 * var(--s));
  width: calc(100 * var(--s)); height: calc(150 * var(--s));
}
.rp-shadow { border-radius: calc(9 * var(--s)); box-shadow: 0 calc(6 * var(--s)) calc(14 * var(--s)) rgb(0 0 0 / 0.55); }
.rp-pages, .rp-leaf, .rp-cover { position: absolute; inset: 0; transform-origin: left center; will-change: transform; }
.rp-pages, .rp-leaf {
  inset: calc(4 * var(--s)) calc(3 * var(--s)) calc(4 * var(--s)) 0;
  background:
    repeating-linear-gradient(#0000 0 calc(11 * var(--s)), rgb(120 100 70 / 0.25) 0 calc(12.5 * var(--s))) calc(16 * var(--s)) calc(22 * var(--s)) / calc(68 * var(--s)) calc(100 * var(--s)) no-repeat,
    #fbf6ec;
  box-shadow: inset calc(4 * var(--s)) 0 calc(6 * var(--s)) rgb(0 0 0 / 0.12), 0 0 0 0.5px rgb(120 100 70 / 0.3);
  border-radius: 0 calc(7 * var(--s)) calc(7 * var(--s)) 0;
}
.rp-pages { z-index: 1; }
.rp-leaf { z-index: calc(2 + var(--i)); }
.rp-cover { z-index: 10; border-radius: calc(9 * var(--s)); overflow: hidden; }
.rp-front, .rp-inside { position: absolute; inset: 0; }
.rp-front svg { display: block; width: 100%; height: 100%; }
.rp-inside { background: #e3d3ba; opacity: 0; }
.rp-play .rp-book-3d, .rp-play .rp-shadow { animation: rp-slide 4.2s both; }
.rp-play .rp-cover { animation: rp-cover 4.2s both; }
.rp-play .rp-inside { animation: rp-inside 4.2s both; }
.rp-play .rp-leaf { animation: 4.2s both; }
.rp-play .rp-leaf:nth-of-type(2) { animation-name: rp-leaf0; }
.rp-play .rp-leaf:nth-of-type(3) { animation-name: rp-leaf1; }
.rp-play .rp-leaf:nth-of-type(4) { animation-name: rp-leaf2; }
.rp-play .rp-leaf:nth-of-type(5) { animation-name: rp-leaf3; }
@keyframes rp-slide {
  0% { transform: none; animation-timing-function: cubic-bezier(.3,.7,.3,1); }
  11%, 88% { transform: translateX(calc(18 * var(--s))) scale(0.92); animation-timing-function: cubic-bezier(.5,0,.3,1); }
  100% { transform: none; }
}
/* Open: 0 to -90 (ease in), edge-on swap, -90 to -128 (ease out); close mirrors it. */
@keyframes rp-cover {
  0% { transform: perspective(var(--p)) rotateY(0deg); z-index: 10; animation-timing-function: cubic-bezier(.45,0,.9,.6); }
  7% { transform: perspective(var(--p)) rotateY(-90deg); z-index: 10; animation-timing-function: step-start; }
  7.01% { transform: perspective(var(--p)) rotateY(-90deg); z-index: 0; animation-timing-function: cubic-bezier(.1,.4,.55,1); }
  14%, 80% { transform: perspective(var(--p)) rotateY(-128deg); z-index: 0; animation-timing-function: cubic-bezier(.45,0,.9,.6); }
  85% { transform: perspective(var(--p)) rotateY(-90deg); z-index: 0; animation-timing-function: step-start; }
  85.01% { transform: perspective(var(--p)) rotateY(-90deg); z-index: 10; animation-timing-function: cubic-bezier(.1,.4,.55,1); }
  95%, 100% { transform: perspective(var(--p)) rotateY(0deg); z-index: 10; }
}
@keyframes rp-inside { 0%, 7% { opacity: 0; } 7.01%, 85% { opacity: 1; } 85.01%, 100% { opacity: 0; } }
@keyframes rp-leaf0 {
  0%, 16% { transform: perspective(var(--p)) rotateY(0deg); animation-timing-function: cubic-bezier(.5,0,.4,1); }
  28%, 74% { transform: perspective(var(--p)) rotateY(-124deg); animation-timing-function: cubic-bezier(.5,0,.4,1); }
  86%, 100% { transform: perspective(var(--p)) rotateY(0deg); }
}
@keyframes rp-leaf1 {
  0%, 23% { transform: perspective(var(--p)) rotateY(0deg); animation-timing-function: cubic-bezier(.5,0,.4,1); }
  35%, 70% { transform: perspective(var(--p)) rotateY(-122deg); animation-timing-function: cubic-bezier(.5,0,.4,1); }
  82%, 100% { transform: perspective(var(--p)) rotateY(0deg); }
}
@keyframes rp-leaf2 {
  0%, 30% { transform: perspective(var(--p)) rotateY(0deg); animation-timing-function: cubic-bezier(.5,0,.4,1); }
  42%, 66% { transform: perspective(var(--p)) rotateY(-120deg); animation-timing-function: cubic-bezier(.5,0,.4,1); }
  78%, 100% { transform: perspective(var(--p)) rotateY(0deg); }
}
@keyframes rp-leaf3 {
  0%, 37% { transform: perspective(var(--p)) rotateY(0deg); animation-timing-function: cubic-bezier(.5,0,.4,1); }
  49%, 62% { transform: perspective(var(--p)) rotateY(-118deg); animation-timing-function: cubic-bezier(.5,0,.4,1); }
  74%, 100% { transform: perspective(var(--p)) rotateY(0deg); }
}
@media (prefers-reduced-motion: reduce) {
  .rp-play .rp-book-3d, .rp-play .rp-shadow, .rp-play .rp-cover, .rp-play .rp-inside, .rp-play .rp-leaf { animation: none; }
}