/* Unsupervised Rock: the studio's site (studio/README.md). Calm, like Strata. */
:root { --ink: #4a3d63; --ink-soft: rgba(74, 61, 99, .66); --line: rgba(74, 61, 99, .14);
  --font: "Avenir Next", "Avenir", Futura, "Century Gothic", "Segoe UI", system-ui, sans-serif; }
/* A Paleolithic jungle as a fixed border round the words: a few huge, simple shapes
   (Matisse's cut-outs, Primal's silhouettes) in from the corners, weighted on the diagonal,
   ochre rock mounds and small plants at the foot, the vine swinging across the top;
   tools/frame.py draws them. The border holds still and in front, and the words scroll
   behind it (Kellan, 2026-10-28). Flat colour, sprayed edges. */
html { background: #ebeedb; overflow-x: hidden; overscroll-behavior-x: none; }   /* no sideways drift on a phone; only x, so the page still scrolls */
body { touch-action: pan-y pinch-zoom; }
body { margin: 0; min-height: 100vh; position: relative; color: var(--ink); font: 17px/1.6 var(--font);
  padding: clamp(190px, 22vmax, 320px) 20px 220px; box-sizing: border-box; }
.frame { position: fixed; inset: 0; pointer-events: none; }
.frame.back { z-index: 2; }   /* a fixed border: still, in front; the words scroll behind it */
.frame.front { z-index: 3; }
.c { position: absolute; height: auto; user-select: none; }
.back .c { width: clamp(280px, 40vw, 900px); }  .back .c.bl { width: clamp(240px, 31vw, 680px); }
.front .c { width: clamp(220px, 30vw, 680px); } .front .c.bl { width: clamp(170px, 21vw, 480px); }
.c.tl { top: 0; left: 0; } .c.tr { top: 0; right: 0; transform: scaleX(-1); }
.c.bl { bottom: 0; left: 0; } .c.br { bottom: 0; right: 0; transform: scaleX(-1); }
.front .c.tl, .front .c.tr { top: -2vmax; } .front .c.bl, .front .c.br { bottom: 0; }
/* the top: a fringe of leaves and the vine swinging out to the right, part of the fixed border */
.canopy-back, .canopy-front { position: fixed; top: 0; left: 0; width: 100%; height: clamp(150px, 19vmax, 270px); object-fit: cover; object-position: center top; pointer-events: none; user-select: none; }
.canopy-back { z-index: 2; } .canopy-front { z-index: 3; }
/* paint on a wall: a faint grain over everything */
body::after { content: ""; position: absolute; inset: 0; z-index: 4; pointer-events: none; background: url(grain.svg); opacity: .1; mix-blend-mode: multiply; }

/* the formal sheet */
.sheet-wrap { position: relative; z-index: 1; isolation: isolate; max-width: 700px; margin: 0 auto; }
.sheet { position: relative; }   /* no card: the words sit on the page itself */
main { max-width: none; margin: 0; padding: 52px 48px 24px; }
footer { max-width: none; margin: 0 48px; padding: 20px 0 30px; }
@media (max-width: 560px) {
  body { padding: 190px 26px 240px; }
  main { padding: 34px 22px 18px; }
  footer { margin: 0 22px; }
  .back .c { width: 64vw; }  .back .c.bl { width: 50vw; }
  .front .c { width: 48vw; } .front .c.bl { width: 36vw; }
  .frame.front { z-index: 0; }   /* on a phone the front fronds stay behind the sheet, off the words */
}
a { color: var(--ink); }
.studio { margin: 0; font-weight: 400; font-size: 13px; letter-spacing: .32em; text-transform: uppercase; color: var(--ink-soft); }
.studio a { color: inherit; text-decoration: none; }
h1 { margin: 10px 0 0; font-weight: 400; font-size: 26px; letter-spacing: .02em; }
h2 { margin: 2em 0 .4em; font-size: 13px; font-weight: 500; letter-spacing: .26em; text-transform: uppercase; color: var(--ink-soft); }
h3 { margin: 1.4em 0 .3em; font-size: 17px; font-weight: 600; }
p, li { margin: 0 0 .8em; }
.meta { font-size: 14px; color: var(--ink-soft); }
.note { padding: 12px 16px; border-radius: 14px; background: rgba(240, 246, 226, .9); font-size: 15px; }
footer { border-top: 1px solid var(--line); text-align: center; font-size: 13px; letter-spacing: .14em; color: var(--ink-soft); }

/* the game, on the home page */
.game { display: flex; gap: 18px; align-items: center; margin: 34px 0 10px; padding: 18px; border-radius: 22px;
  background: rgba(255, 252, 246, .86); border: 1px solid var(--line); }
.game img { width: 88px; height: 88px; border-radius: 20px; flex: none; }
.game h2 { margin: 0; font-size: 20px; letter-spacing: .02em; text-transform: none; color: var(--ink); font-weight: 500; }
.game p { margin: 4px 0 0; font-size: 15px; }
.links { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 12px; }
.pill { display: inline-block; white-space: nowrap; padding: 9px 18px; border-radius: 999px; background: var(--ink); color: #fffaf3; text-decoration: none; font-size: 15px; }
.pill.soft { background: transparent; color: var(--ink); box-shadow: inset 0 0 0 1px var(--line); }

footer a { color: var(--ink-soft); text-decoration: none; margin: 0 .5em; text-transform: uppercase; }
footer p { margin: .6em 0 0; letter-spacing: .06em; }

/* the feature section */

.shots { display: flex; gap: 12px; overflow-x: auto; scroll-snap-type: x mandatory; margin: 18px -22px 8px; padding: 4px 22px 12px; }
.shots figure { margin: 0; flex: 0 0 62%; max-width: 220px; scroll-snap-align: center; text-align: center; }
.shots img { width: 100%; height: auto; border-radius: 18px; border: 1px solid var(--line); }
.shots figcaption { margin-top: 8px; font-size: 13px; letter-spacing: .12em; text-transform: uppercase; color: var(--ink-soft); }
@media (min-width: 640px) { .shots figure { flex: 1 1 0; } }

/* hand-drawn bullets: a small leaf, each one turned a little differently */
main ul { list-style: none; padding-left: 0; }
main ul li { position: relative; padding-left: 1.7em; }
main ul li::before { content: ""; position: absolute; left: .1em; top: .42em; width: .9em; height: .9em;
  background: url(dab.svg) center / contain no-repeat; transform: rotate(-12deg); }
main ul li:nth-child(2n)::before { transform: rotate(18deg) scale(.92); }
main ul li:nth-child(3n)::before { transform: rotate(-30deg) scale(1.05); }

/* the signature: a red-ochre hand, sprayed round as on a cave wall */
.sign { display: flex; align-items: center; justify-content: center; gap: 10px; }
.sign img { width: 36px; height: auto; opacity: .9; }