/* Planet Creator's own sheet, carried over from apps/planet (ink.html's HUD and field guide, make.js's
   "Make yours" slip): paper, indigo ink, one vermilion, a book serif, words written with a brush stroke
   under them, slips of paper torn off the block and laid a touch askew. No pills, no boxes, no shadows.
   Every page links this and adds its own layout in a <style> of its own. */

:root {
  --paper: #efe6d2;
  --slip-paper: #f3ecdc;
  --ink: #242a3c;
  --ink-soft: #4b5470;
  --accent: #b0402a;
  --teal: #2f5d62;
  --rule: rgba(36, 42, 60, .34);
  --faint: rgba(36, 42, 60, .14);
  --font: "Iowan Old Style", "Palatino Linotype", Palatino, "Book Antiqua", Georgia, serif;
  --edge: clamp(18px, 4.2vw, 64px);
  /* a brush stroke laid under a word: loaded at the start, lifting off at the end (ink.html) */
  --ink-stroke: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 8' preserveAspectRatio='none'%3E%3Cpath d='M0.5 4.7 C 9 3.1, 27 3.2, 46 3.6 S 81 3.5, 99.5 4.2 C 84 4.9, 63 5.5, 42 5.4 S 10 5.8, 0.5 4.7 Z'/%3E%3C/svg%3E");
  /* a slip of the same paper torn off the block, as a nine-slice (ink.html) */
  --ink-slip: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='400' height='400' viewBox='0 0 400 400'%3E%3Cfilter id='t' x='-5%25' y='-5%25' width='110%25' height='110%25'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.045' numOctaves='4' seed='3'/%3E%3CfeDisplacementMap in='SourceGraphic' scale='11'/%3E%3C/filter%3E%3Crect filter='url(%23t)' x='12' y='12' width='376' height='376' fill='%23f3ecdc' fill-opacity='0.95'/%3E%3C/svg%3E");
  /* a pen loop drawn round the thing you picked, as on a printed form */
  --ink-loop: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 60' preserveAspectRatio='none'%3E%3Cpath d='M26 9 C 70 1, 150 2, 186 13 C 204 20, 201 44, 172 52 C 128 61, 58 60, 22 50 C 2 44, 3 22, 22 13 C 38 6, 58 4, 76 5' fill='none' stroke='%23b0402a' stroke-width='1.7' stroke-linecap='round' vector-effect='non-scaling-stroke'/%3E%3C/svg%3E");
  /* the paper's own fibre, laid over everything */
  --grain: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='260' height='260'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .40 0 0 0 0 .33 0 0 0 0 .22 0 0 0 .10 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  /* a button: a patch of vermilion laid on with the brush, its edge torn a little (the hover a shade deeper), and the
     quiet one: the same patch in slip paper, drawn round in ink */
  --btn: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 60' preserveAspectRatio='none'%3E%3Cfilter id='r' x='-5%25' y='-20%25' width='110%25' height='140%25'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.05' numOctaves='3' seed='8'/%3E%3CfeDisplacementMap in='SourceGraphic' scale='7'/%3E%3C/filter%3E%3Cpath filter='url(%23r)' fill='%23b0402a' d='M6 10 C 50 5, 150 6, 194 9 C 196 26, 195 41, 193 51 C 140 55, 60 55, 7 51 C 5 38, 4 22, 6 10 Z'/%3E%3C/svg%3E");
  --btn-hover: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 60' preserveAspectRatio='none'%3E%3Cfilter id='r' x='-5%25' y='-20%25' width='110%25' height='140%25'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.05' numOctaves='3' seed='8'/%3E%3CfeDisplacementMap in='SourceGraphic' scale='7'/%3E%3C/filter%3E%3Cpath filter='url(%23r)' fill='%23963320' d='M6 10 C 50 5, 150 6, 194 9 C 196 26, 195 41, 193 51 C 140 55, 60 55, 7 51 C 5 38, 4 22, 6 10 Z'/%3E%3C/svg%3E");
  --btn-quiet: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 60' preserveAspectRatio='none'%3E%3Cfilter id='r' x='-5%25' y='-20%25' width='110%25' height='140%25'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.05' numOctaves='3' seed='3'/%3E%3CfeDisplacementMap in='SourceGraphic' scale='6'/%3E%3C/filter%3E%3Cpath filter='url(%23r)' fill='%23f3ecdc' fill-opacity='.92' stroke='%23242a3c' stroke-opacity='.5' stroke-width='1.3' vector-effect='non-scaling-stroke' d='M6 10 C 50 5, 150 6, 194 9 C 196 26, 195 41, 193 51 C 140 55, 60 55, 7 51 C 5 38, 4 22, 6 10 Z'/%3E%3C/svg%3E");
  color-scheme: light;
}

* { box-sizing: border-box; }
html {
  background: var(--paper); /* flat, the app's own sheet colour, so its worlds sit in it without a seam */
  color: var(--ink);
  scrollbar-color: rgba(36, 42, 60, .38) var(--paper);
  -webkit-text-size-adjust: 100%;
}
body { margin: 0; font: 17px/1.55 var(--font); font-variant-numeric: lining-nums proportional-nums; -webkit-font-smoothing: antialiased; }
body::after { content: ""; position: fixed; inset: 0; z-index: 50; pointer-events: none; background: var(--grain); mix-blend-mode: multiply; opacity: .55; }
::selection { background: rgba(176, 64, 42, .22); color: var(--ink); }
:focus-visible { outline: 1px dashed var(--accent); outline-offset: 4px; }
input, textarea { caret-color: var(--accent); }
h1, h2, h3, p, ul, ol, dl, dd, figure { margin: 0; }
a { color: inherit; text-decoration-thickness: 1px; text-underline-offset: .22em; text-decoration-color: var(--rule); }
a:hover { color: var(--accent); text-decoration-color: currentColor; }
button { font: inherit; color: inherit; }
[hidden] { display: none !important; }
.num { font-variant-numeric: lining-nums tabular-nums; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }

/* ---------------------------------------------------------------- lettering */
.title { font-weight: 400; font-size: clamp(38px, 5.4vw, 78px); line-height: 1; letter-spacing: -.028em; text-wrap: balance; filter: url(#pc-ink); }
.lede { max-width: 58ch; font-size: clamp(17px, 1.35vw, 19.5px); line-height: 1.55; color: var(--ink); text-wrap: pretty; }
.aside { font-style: italic; font-size: 14.5px; line-height: 1.5; color: var(--ink-soft); }
.h2 { font-weight: 400; font-size: clamp(28px, 3vw, 40px); line-height: 1.05; letter-spacing: -.02em; text-wrap: balance; }
.h3 { font-weight: 600; font-size: 13px; letter-spacing: .2em; text-transform: uppercase; }

/* a word to press: serif, with one brush mark under it (ink.html's HUD buttons) */
.word { appearance: none; position: relative; display: inline-block; border: 0; border-radius: 0; background: none; padding: 2px 0 8px; color: var(--ink); font: 600 14.5px/1.3 var(--font); letter-spacing: .045em; text-decoration: none; cursor: pointer; }
.word::after { content: ""; position: absolute; left: -3px; right: -5px; bottom: 0; height: 5px; background: currentColor; opacity: .58; -webkit-mask: var(--ink-stroke) 0 0 / 100% 100% no-repeat; mask: var(--ink-stroke) 0 0 / 100% 100% no-repeat; transform: rotate(-.6deg); transform-origin: 0 100%; }
.word:hover, .word:focus-visible { color: var(--accent); }
.word:hover::after { opacity: .9; }
.word.go { color: var(--accent); font-size: 17px; }
.word:disabled { cursor: default; opacity: .38; }
.word:disabled::after { opacity: .2; }

/* a button, painted on (see --btn): the one thing on a page to press is a patch of vermilion with the words in paper;
   .quiet is the second things, a patch of slip paper drawn round in ink. Links stay plain underlined words. */
.btn { appearance: none; display: inline-flex; align-items: center; justify-content: center; gap: .45em; min-height: 46px; padding: 11px 26px 12px; border: 0; border-radius: 0; background: var(--btn) center / 100% 100% no-repeat; color: var(--slip-paper); font: 600 15.5px/1.2 var(--font); letter-spacing: .03em; text-decoration: none; cursor: pointer; transform: rotate(-.4deg); transition: transform .2s cubic-bezier(.16, 1, .3, 1); }
.btn:hover, .btn:focus-visible { background-image: var(--btn-hover); color: var(--slip-paper); transform: rotate(0) translateY(-1px); }
.btn:active { transform: translateY(1px); }
.btn.quiet { background-image: var(--btn-quiet); color: var(--ink); transform: rotate(.3deg); }
.btn.quiet:hover, .btn.quiet:focus-visible { background-image: var(--btn-quiet); color: var(--accent); }
.btn:disabled { cursor: default; opacity: .45; }
.btn:focus-visible { outline-offset: 4px; }

/* a slip of paper torn off the block */
.slip { border-image: var(--ink-slip) 30 fill / 30px / 0 stretch; padding: 28px 30px 26px; }

/* --------------------------------------------------------------------- chrome */
.top { position: relative; z-index: 5; display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 6px 28px; padding: 18px var(--edge) 0; }
.brand { font-size: 19px; font-weight: 500; letter-spacing: -.01em; text-decoration: none; }
.trail { display: flex; flex-wrap: wrap; gap: 4px 22px; margin: 0; padding: 0; list-style: none; }
.trail a { font-size: 14px; }
.trail a[aria-current="page"] { color: var(--accent); }

/* a planet from the real app: live (an iframe on the app itself) or a still painted by it, feathered into the sheet */
.world { display: block; width: 100%; height: 100%; border: 0; background: transparent; -webkit-mask: radial-gradient(closest-side, #000 80%, transparent 97%); mask: radial-gradient(closest-side, #000 80%, transparent 97%); }
.still { display: block; width: 100%; height: auto; -webkit-mask: radial-gradient(closest-side, #000 91%, transparent 100%); mask: radial-gradient(closest-side, #000 91%, transparent 100%); }

.foot { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 8px 28px; margin-top: 72px; padding: 22px var(--edge) 30px; border-top: 1px solid var(--faint); font-size: 14px; font-style: italic; color: var(--ink-soft); }

@media (max-width: 700px) {
  body { font-size: 16px; }
  .trail { gap: 2px 16px; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition-duration: .01ms !important; animation-duration: .01ms !important; animation-iteration-count: 1 !important; }
}
@media print {
  body::after { display: none; }
}