/* monkey with bootsy. Page background: the blue woven pattern (pattern-blue.webp), one fixed picture
   the page scrolls over; text sits on panels. All colours live in these variables. */
/* Fonts kept on this site (Latin letters, from Google Fonts, SIL Open Font License): no wait for
   another server, and visitors' addresses aren't sent to Google. */
@font-face { font-family: "Righteous"; font-weight: 400; font-display: swap; src: url("/fonts/righteous-400.woff2") format("woff2"); }
@font-face { font-family: "Space Grotesk"; font-weight: 300 700; font-display: swap; src: url("/fonts/space-grotesk.woff2") format("woff2"); }
@font-face { font-family: "Libre Caslon Text"; font-weight: 700; font-display: swap; src: url("/fonts/libre-caslon-text-700.woff2") format("woff2"); }

:root {
  color-scheme: light dark;
  --bg: #f7f1ec;
  --ink: #000000;   /* text: black, chosen by Bootsy 2026-10-08 */
  --muted: #000000;
  /* Panels: sky blue (#85afd6) with a picture (panel.webp) showing 35% through a wash of that blue.
     Chosen by Bootsy with the page tools, 2026-10-08 (pages/monkey-page.html). */
  --panel: rgb(133 175 214 / 0.94);
  --panel-alt: color-mix(in srgb, rgb(133 175 214 / 0.95), black 5%);
  --panel-wash: rgb(133 175 214 / 0.65);
  --panel-bg: linear-gradient(var(--panel-wash), var(--panel-wash)), url("/panel.webp") center / cover no-repeat;
  --tile: color-mix(in srgb, #85afd6, white 35%);
  --line: color-mix(in srgb, #85afd6, #2a1c17 22%);
  /* Buttons: gold (#dd9927); links are ink with a gold underline */
  --gold: #dd9927;
  --gold-ink: #2a1c17;
  --gold-edge: color-mix(in srgb, #dd9927, black 22%);
  --link: #000000;
  --todo: #8a3b12;
  --todo-bg: #fbe3cf;
  --shade: rgb(255 248 240 / 0);
  --radius: 18px;
  --wrap: 62rem;
  /* Fonts (in /fonts, see @font-face above): Space Grotesk for text, Righteous for headings */
  --font: "Space Grotesk", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --display: "Righteous", ui-rounded, "SF Pro Rounded", system-ui, sans-serif;
  --display-weight: 400;
}
/* Dark mode keeps the same panels and buttons (chosen while in dark mode) and darkens the
   background pattern behind them. */
@media (prefers-color-scheme: dark) {
  :root {
    --bg: #1b1714;
    --shade: rgb(20 14 10 / 0.6);
  }
}

/* The page tools (tools.js, shown only at /?edit) set colours and fonts as inline variables on
   <html>, overriding these. */

* { box-sizing: border-box; }
/* One background picture, fixed in place, that the page scrolls over. A fixed layer instead of
   background-attachment: fixed, which iPhones ignore. */
body::before {
  content: ""; position: fixed; inset: 0; z-index: -1;
  background: linear-gradient(var(--shade), var(--shade)), url("/pattern-blue.webp") center / cover no-repeat, var(--bg);
}
html { scroll-behavior: smooth; }
body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font: 1.0625rem/1.6 var(--font);
  -webkit-font-smoothing: antialiased;
}
h1, h2, h3, .brand { color: var(--heading-ink, var(--ink)); font-family: var(--display); font-weight: var(--display-weight); line-height: 1.1; letter-spacing: -0.01em; }
h1 { font-size: clamp(2.6rem, 8vw, 5rem); margin: 0.2em 0 0.3em; }
h2 { font-size: clamp(1.7rem, 4vw, 2.4rem); margin: 0 0 0.6em; }
h3 { font-size: 1.2rem; margin: 0 0 0.3em; }
a { color: var(--link); text-decoration-color: var(--gold); text-decoration-thickness: 2px; text-underline-offset: 3px; }
p { margin: 0 0 1em; max-width: 40rem; }

.skip { position: absolute; left: -999px; }
.skip:focus { left: 1rem; top: 1rem; background: var(--bg); padding: 0.5rem 1rem; z-index: 10; }

.top {
  background: var(--panel); border-radius: 0 0 var(--radius) var(--radius);
  display: flex; align-items: center; justify-content: space-between; gap: 1rem;
  max-width: var(--wrap); margin: 0 auto; padding: 1.1rem 16px;
}
.brand { font-size: 1.5rem; color: var(--ink); text-decoration: none; font-family: var(--top-font, var(--display)); }
.brand span { font-weight: 500; color: var(--muted); font-size: 0.75em; }
nav { display: flex; gap: 1.1rem; align-items: center; flex-wrap: wrap; }
nav a { color: var(--ink); text-decoration: none; font-weight: 500; font-family: var(--top-font, inherit); }
nav a:hover { color: var(--link); text-decoration: underline; text-decoration-color: var(--gold); }
nav .pill { background: var(--gold); color: var(--gold-ink); border: 1px solid var(--gold-edge); padding: 0.35rem 0.9rem; border-radius: 999px; }
nav .pill:hover { color: var(--gold-ink); text-decoration: none; filter: brightness(1.08); }
@media (max-width: 560px) { nav a:not(.pill) { display: none; } }

.hero {
  position: relative; overflow: hidden;
  display: grid; grid-template-columns: 1.1fr 1fr; align-items: center; gap: 2rem;
  max-width: var(--wrap); margin: 0 auto; padding: 2rem 16px 3rem;
}
.kicker { text-transform: uppercase; letter-spacing: 0.12em; font-size: 0.78rem; color: var(--muted); font-weight: 600; }
.lead { font-size: 1.25rem; color: var(--muted); }
.actions { display: flex; gap: 1.2rem; align-items: center; flex-wrap: wrap; }
.hero-text { background: var(--panel-bg, var(--panel)); border-radius: var(--radius); padding: 1.6rem 1.8rem; }
/* The tarot card: a frame holding the picture (or the canvas figures.js draws in its place) and
   the label, which dissolves between "THE FOOL." and "THE SAGE." over the card's own label. */
.card-frame {
  position: relative; justify-self: center; width: 100%; max-width: 360px;
  border-radius: 14px; transform: rotate(2deg);
  box-shadow: 0 18px 40px rgb(40 20 10 / 0.45);
  transition: transform 0.3s ease;
  container-type: inline-size;
}
.card-frame:hover { transform: rotate(-1deg) scale(1.02); }
.card { display: block; width: 100%; height: auto; border-radius: 14px; }
/* A card without its frame (a page saved before the frame existed) still tilts. */
.hero > .card {
  justify-self: center; max-width: 360px; transform: rotate(2deg); transition: transform 0.3s ease;
  box-shadow: 0 18px 40px rgb(40 20 10 / 0.45);
}
.hero > .card:hover { transform: rotate(-1deg) scale(1.02); }
/* Placed over the label strip of the 417x630 card (x 22–397, y 563–608), in the card's rust. */
.card-label {
  position: absolute; left: 5.28%; right: 4.8%; top: 89.37%; height: 7.14%;
  display: grid; place-items: center; background: #bd5c37; color: #0d0a08;
  font: 700 9.1cqw/1 "Libre Caslon Text", "Bookman Old Style", Georgia, serif;
  letter-spacing: 0.1em; word-spacing: 0.35em; white-space: nowrap;
  -webkit-text-stroke: 0.03em currentColor; /* the card's own letters are heavier than Caslon Bold */
}
/* The two words sit on top of each other; figures.js dissolves between them (data-hold and
   data-fade on .card-label, in seconds; data-on="false" keeps the first word). */
.card-label span { grid-area: 1 / 1; }
.card-label span + span { opacity: 0; }
@media (prefers-reduced-motion: reduce) {
  .card-frame, .card-frame:hover { transition: none; }
  html { scroll-behavior: auto; }
}
@media (max-width: 760px) {
  .hero { grid-template-columns: 1fr; padding-top: 0.5rem; }
  /* Stacked: the card as wide as the text panel above it, same distance from the screen's edges. */
  .card-frame, .hero > .card { max-width: none; justify-self: stretch; }
}

.button {
  display: inline-block; background: var(--gold); color: var(--gold-ink); border: 1px solid var(--gold-edge);
  padding: 0.8rem 1.5rem; border-radius: 999px; font-weight: 700; text-decoration: none;
  transition: transform 0.15s ease, filter 0.15s ease;
}
.button:hover { transform: translateY(-2px) rotate(-1deg); filter: brightness(1.08); }
.button:active { transform: translateY(0) scale(0.98); }
.link { font-weight: 600; }

.band {
  max-width: calc(var(--wrap) - 32px); margin: 0 auto 1.5rem; padding: 2.8rem 1.8rem;
  background: var(--panel-bg, var(--panel)); border-radius: var(--radius);
}
.band.alt { background: var(--panel-bg, var(--panel-alt)); }
@media (max-width: 760px) { .band { margin: 0 12px 1rem; padding: 2rem 1.2rem; } .hero-text { padding: 1.3rem 1.2rem; } }

.tiles { list-style: none; padding: 0; margin: 2rem 0 0; display: grid; gap: 1rem; grid-template-columns: repeat(auto-fill, minmax(15rem, 1fr)); }
.tiles li { background: var(--tile-bg, var(--tile)); border-radius: var(--radius); padding: 1.3rem 1.4rem; border: 1px solid var(--line); }
.tiles li:nth-child(odd) { border-radius: 26px 14px 26px 14px; }
.tiles li:nth-child(even) { border-radius: 14px 26px 14px 26px; }
.tiles p { margin: 0; color: var(--muted); }

.flow { padding-left: 1.3rem; margin: 0 auto 1.2rem; }
.flow li { margin-bottom: 0.6rem; max-width: 40rem; }
.note { color: var(--muted); font-style: italic; }

.facts { display: grid; gap: 1rem; grid-template-columns: repeat(auto-fill, minmax(12rem, 1fr)); margin: 0 auto; }
.facts div { border-top: 3px solid var(--gold); padding-top: 0.6rem; }
.facts dt { font-size: 0.8rem; text-transform: uppercase; letter-spacing: 0.1em; color: var(--muted); font-weight: 600; }
.facts dd { margin: 0.2rem 0 0; font-weight: 600; }

.join { text-align: center; }
.join p { margin-left: auto; margin-right: auto; }
.small { font-size: 0.9rem; }

/* Placeholders still to be filled in. Remove the class once the real text is in. */
.todo { background: var(--todo-bg); color: var(--todo); border-radius: 6px; padding: 0.1em 0.4em; display: inline-block; }

.bottom { text-align: center; padding: 1rem 16px; background: var(--panel); max-width: 20rem; margin: 1rem auto 2rem; border-radius: 999px; color: var(--muted); font-size: 0.9rem; }

/* Page tools (tools.js): only for Bootsy, at /?edit */
.tools {
  position: fixed; right: 12px; bottom: 12px; z-index: 50; max-width: calc(100vw - 24px);
  display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem 0.8rem;
  background: #fffdf9; color: #2a1c17; border: 1px solid #c9bdb2; border-radius: 16px;
  padding: 0.6rem 0.8rem; box-shadow: 0 10px 30px rgb(0 0 0 / 0.3);
  font: 0.82rem/1.3 system-ui, -apple-system, sans-serif;
}
.tools label { display: flex; align-items: center; gap: 0.35rem; }
.tools input[type="text"] { font: inherit; padding: 0.2rem 0.4rem; border-radius: 8px; border: 1px solid #c9bdb2; background: #fff; color: #2a1c17; }
.tools select { font: inherit; padding: 0.2rem 0.3rem; border-radius: 8px; border: 1px solid #c9bdb2; background: #fff; color: #2a1c17; max-width: 11rem; }
.tools input[type="color"] { width: 26px; height: 26px; padding: 0; border: 1px solid #c9bdb2; border-radius: 50%; background: none; cursor: pointer; overflow: hidden; }
.tools input[type="color"]::-webkit-color-swatch-wrapper { padding: 0; }
.tools input[type="color"]::-webkit-color-swatch { border: none; border-radius: 50%; }
.tools input[type="color"]::-moz-color-swatch { border: none; border-radius: 50%; }
.tools button { font: inherit; color: #2a1c17; background: #f1e8e1; border: 1px solid #c9bdb2; border-radius: 999px; padding: 0.25rem 0.75rem; cursor: pointer; }
.tools button:hover { background: #e6d9ce; }
.tools button[aria-pressed="true"] { background: #2a1c17; color: #fffdf9; border-color: #2a1c17; }
.tools .file { position: relative; overflow: hidden; background: #f1e8e1; border: 1px solid #c9bdb2; border-radius: 999px; padding: 0.25rem 0.75rem; cursor: pointer; }
.tools .file:hover { background: #e6d9ce; }
.tools .file:focus-within { outline: 2px solid #dd9927; outline-offset: 2px; }
.tools .file input { position: absolute; inset: 0; opacity: 0; cursor: pointer; }
.tools input[type="range"] { width: 6rem; accent-color: #dd9927; }
.tools .group { display: contents; }
.tools [hidden] { display: none; }
.tools .note { flex-basis: 100%; margin: 0; color: #8a3b12; }
.tools :focus-visible { outline: 2px solid #dd9927; outline-offset: 2px; }
@media (prefers-color-scheme: dark) {
  .tools { background: #241e1a; color: #f1e8e1; border-color: #4a3c35; }
  .tools select, .tools input[type="text"] { background: #1b1714; color: #f1e8e1; border-color: #4a3c35; }
  .tools button { background: #33291f; color: #f1e8e1; border-color: #4a3c35; }
  .tools .file { background: #33291f; border-color: #4a3c35; }
  .tools button:hover, .tools .file:hover { background: #3f3327; }
  .tools button[aria-pressed="true"] { background: #f1e8e1; color: #1b1714; }
  .tools .note { color: #ffc49b; }
}
/* Text editing on: dashed outline around what can be edited */
.editing [contenteditable="true"] { outline: 2px dashed var(--gold); outline-offset: 4px; }
.editing [contenteditable="true"]:focus { outline-style: solid; }