/* Book Publishing Systems — the front page (featured.html), since 2026-10-13.
 * Puzzle Press, in depth. One stylesheet of its own, no scripts.
 *
 * THE LOOK: a rainbow. The owner asked for the colours to be a rainbow and
 * for the page to be a new kind of page.
 *   - Paper, one black, and eight inks in the rainbow's order. The paper, the
 *     black, the type and the black button standing on a sliding rainbow are
 *     Puzzle Press's own (its window is set in Bricolage Grotesque, and its
 *     "Start a new book" stands on that rainbow), so the page looks like what
 *     it leads to.
 *   - The pages are the pictures. Every puzzle page is black on white, so
 *     each sits on a mat of one ink, and the wall runs through the rainbow
 *     from its first tile to its last.
 *   - At the top, five real pages fanned out over a glow of all eight inks
 *     that turns slowly behind them, and the same glow along the foot of the
 *     last dark part. (Both were a rainbow's arch for an hour: the owner had
 *     the rainbow taken out and made a glow that moves and has every colour.)
 *
 * WHAT A VISITOR CAN PRESS, with no script:
 *   - A PICTURE OPENS LARGE. Its tile is a link to a box's own place on the
 *     page (#page-im), and `.lb:target` shows the box the address names.
 *     "Close" leads to #shut, which is always in view, so nothing scrolls.
 *   - THE CHIPS over the wall and THE FIVE STEPS of the app are radio
 *     buttons kept out of sight (.sr), each with a label that is what you
 *     see. They stand just before what they change, so `:checked ~` reaches
 *     it. The arrow keys move between them, as between any radio buttons.
 *
 * THE RULES are the site's own (README.md): the page rule allows no script,
 * no style="" and nothing from another site, so the typefaces are our own
 * files (static/fonts) and nothing here is a data: address. A page standing
 * still does no work: what moves on a loop only slides (transform). What
 * moves at all is switched off for anyone who has asked for less motion,
 * and nothing is hidden until an effect reveals it unless the browser has
 * said it can do the effect. */

@font-face { font-family: "Bricolage Grotesque"; font-weight: 400; font-display: swap; src: url(fonts/BricolageGrotesque-Regular.0b5a929eac.ttf) format("truetype"); }
@font-face { font-family: "Bricolage Grotesque"; font-weight: 600; font-display: swap; src: url(fonts/BricolageGrotesque-SemiBold.e9bcaab249.ttf) format("truetype"); }
@font-face { font-family: "Bricolage Head"; font-weight: 800; font-display: swap; src: url(fonts/BricolageGrotesque-CondensedExtraBold.6be56005b9.ttf) format("truetype"); }
/* WHILE A TYPEFACE IS ON ITS WAY the words are set in the computer's own Arial, scaled to take the room the real
 * face will take (measured against the page's own words, 2026-10-13: the text face is 1.043 times Arial's width,
 * the semibold the same as Arial Bold, the condensed headings three quarters of it). So a paragraph breaks into
 * the same lines before and after, and nothing below it moves when the typeface arrives. Where there is no Arial
 * (most Android phones) the next face in the list is used, as before. */
@font-face { font-family: "Bricolage Stand-in"; font-weight: 400; src: local("Arial"), local("ArialMT"); size-adjust: 104.3%; }
@font-face { font-family: "Bricolage Stand-in"; font-weight: 600; src: local("Arial Bold"), local("Arial-BoldMT"); size-adjust: 100.1%; }
@font-face { font-family: "Bricolage Head Stand-in"; font-weight: 800; src: local("Arial Bold"), local("Arial-BoldMT"); size-adjust: 75%; }

:root {
  --paper: #f4f0e8; --paper-2: #ebe6db; --card: #fffdf8; --sheet: #fffefb;
  --ink: #1c1a17; --ink-2: #4d483f; --ink-3: #625b51;   /* the quietest ink still reads on every ground it is used on (4.5 to 1 or better) */
  --night: #15130f; --night-2: #221f1a; --on-night: #f4f0e8; --on-night-2: #b9b2a4;
  /* the eight inks, in the rainbow's order, and a wash of each */
  --r: #ff5a4f; --o: #ff9838; --y: #ffd83d; --g: #4fcf86; --t: #33c6dd; --b: #5b8dff; --v: #a47bff; --p: #ff7ac3;
  --r2: #ffd6d2; --o2: #ffe3c6; --y2: #fff2b4; --g2: #cff3de; --t2: #c8eef5; --b2: #d4e1ff; --v2: #e6dbff; --p2: #ffdbee;
  --bow: linear-gradient(90deg, var(--r), var(--o), var(--y), var(--g), var(--t), var(--b), var(--v), var(--p));
  --bow-ink: linear-gradient(90deg, #e2332b, #ee7a10, #d49a00, #1e9f58, #1195b5, #3d6bea, #8455e6, #e0409c);   /* the same, deep enough to read as type on paper */
  --sans: "Bricolage Grotesque", "Bricolage Stand-in", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --head: "Bricolage Head", "Bricolage Head Stand-in", "Bricolage Grotesque", "Arial Narrow", system-ui, sans-serif;
  --mono: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  --wide: 1220px;
  --ease: cubic-bezier(0.2, 0.8, 0.2, 1);
  color-scheme: light;   /* the page is paper: a browser set to dark leaves it alone */
}

*, ::before, ::after { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 86px; -webkit-text-size-adjust: 100%; }
/* A PICTURE IS OPEN: the page behind it stays where it is, and is put out of reach, so the Tab key goes round
 * the picture's own buttons and not through a page that cannot be seen. */
html:has(.lb:target) { overflow: hidden; }
body:has(.lb:target) > :not(main), main:has(.lb:target) > :not(.boxes) { visibility: hidden; }
/* an older Safari cannot cut the top of the page off at its sides only: there, the whole page is */
@supports not (overflow: clip) { body { overflow-x: hidden; } }
body { margin: 0; background: var(--paper); color: var(--ink); font: 400 18px/1.5 var(--sans); -webkit-font-smoothing: antialiased; }
img { max-width: 100%; height: auto; display: block; }
picture { display: block; }
h1, h2, h3, p, ul, ol, figure { margin: 0; }
ul, ol { padding: 0; list-style: none; }
a { color: inherit; text-underline-offset: 3px; text-decoration-thickness: 1.5px; }
:focus-visible { outline: 3px solid var(--b); outline-offset: 3px; border-radius: 6px; }
::selection { background: var(--y); color: var(--ink); }
.wrap { position: relative; max-width: var(--wide); margin: 0 auto; padding: 0 24px; }
.sr { position: absolute; width: 1px; height: 1px; margin: 0; opacity: 0; overflow: hidden; clip-path: inset(50%); white-space: nowrap; pointer-events: none; }
.skip { position: absolute; left: -999px; top: 10px; z-index: 70; background: var(--ink); color: var(--sheet); padding: 8px 14px; border-radius: 8px; }
.skip:focus { left: 12px; }
.label { font: 600 13px/1.35 var(--mono); letter-spacing: 0.12em; text-transform: uppercase; color: var(--ink-3); }

/* the bar across the very top: the rainbow, filled as far as the page has been read */
.read { position: fixed; inset: 0 0 auto 0; height: 5px; z-index: 50; background: var(--bow); transform-origin: 0 50%; pointer-events: none; }
@keyframes read { from { transform: scaleX(0); } to { transform: scaleX(1); } }

.draft { background: var(--y); border-bottom: 1.5px solid var(--ink); font-size: 14px; padding: 12px 0 8px; }
.draft summary { cursor: pointer; }
.draft ul { list-style: disc; margin: 8px 0 4px; padding-left: 20px; }

/* ---------------------------------------------------------------- the top -- */
.mast { position: sticky; top: 0; z-index: 20; background: var(--paper); border-bottom: 1.5px solid var(--ink); }   /* solid: a see-through bar had to be blurred again on every frame the glow moved under it */
.top { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding-top: 10px; padding-bottom: 10px; }
.brand { display: inline-flex; align-items: center; gap: 10px; padding: 7px 0; text-decoration: none; font: 800 22px/1 var(--head); letter-spacing: 0.005em; white-space: nowrap; }
.brand svg { width: 28px; height: 28px; flex: none; }
.mast nav { display: flex; align-items: center; gap: 2px; font-size: 16.5px; font-weight: 600; }
.mast nav a:not(.btn) { text-decoration: none; padding: 9px 12px; border-radius: 8px; white-space: nowrap; }
.mast nav a:not(.btn):hover { background: var(--y); }

/* Puzzle Press's own black button. One that matters most stands on a rainbow that slides along under it (the one in
 * the bar at the top does not: its rainbow lay almost on the bar's own line, and the page had one too many). */
.btn { position: relative; display: inline-flex; align-items: center; gap: 9px; background: var(--ink); color: var(--sheet); text-decoration: none; white-space: nowrap; font: 600 18px/1 var(--sans); padding: 17px 24px; border-radius: 10px; border: 1.5px solid var(--ink); transition: translate 0.2s var(--ease), background-color 0.2s; }
.btn:hover { translate: 0 -3px; }
.btn:active { translate: 0 0; }
.btn.line { background: var(--card); color: var(--ink); }
.btn.line:hover { background: var(--y); }
.btn.small { padding: 13px 17px; font-size: 16.5px; margin-left: 10px; }
.btn.big { font-size: clamp(19px, 2vw, 23px); padding: 22px 30px; }
.btn.light { background: var(--sheet); color: var(--ink); border-color: var(--sheet); }
/* The rainbow: a block the button's own size and shape, 5px down and 5px to the right, like a hard shadow (it was a
 * strip under the button, a little to one side, and looked as if it had slipped). It lies over the button and is cut
 * away where the button is, so nothing has to be put behind anything: what shows is the bottom edge, the right edge
 * and the corner between them. (3.5 and -6.5: measured from inside the button's 1.5px border.) A browser that cannot
 * cut it gets a line the button's own width under it instead, and the words are never covered. */
.bow { position: absolute; left: 0; right: 0; top: calc(100% + 4px); height: 6px; overflow: hidden; border-radius: 99px; pointer-events: none; }
@supports (mask: linear-gradient(#000 0 0) right / 5px 100% no-repeat) or (-webkit-mask: linear-gradient(#000 0 0) right / 5px 100% no-repeat) {
  .bow { inset: 3.5px -6.5px -6.5px 3.5px; height: auto; border-radius: 10px;
    --cut: linear-gradient(#000 0 0) right / 5px 100% no-repeat, linear-gradient(#000 0 0) bottom / 100% 5px no-repeat, radial-gradient(circle at 0 0, transparent 9.5px, #000 10px) calc(100% - 5px) calc(100% - 5px) / 10px 10px no-repeat;
    -webkit-mask: var(--cut); mask: var(--cut); }
}
.bow::before { content: ""; position: absolute; inset: 0 auto 0 0; width: 200%;
  background: linear-gradient(90deg, var(--r) 0, var(--o) 6.25%, var(--y) 12.5%, var(--g) 18.75%, var(--t) 25%, var(--b) 31.25%, var(--v) 37.5%, var(--p) 43.75%, var(--r) 50%, var(--o) 56.25%, var(--y) 62.5%, var(--g) 68.75%, var(--t) 75%, var(--b) 81.25%, var(--v) 87.5%, var(--p) 93.75%, var(--r) 100%); }
@keyframes slide { to { transform: translateX(-50%); } }

/* --------------------------------------------------------------- the hero -- */
.hero { position: relative; overflow-x: clip; padding: clamp(26px, 4vw, 54px) 0 clamp(18px, 3vw, 40px); }   /* cut at the sides only: the glow fades out by itself above and below */
.hero-grid { display: grid; grid-template-columns: minmax(0, 1.04fr) minmax(0, 1fr); gap: clamp(14px, 3vw, 46px); align-items: start; }   /* from the top, not the middle: the pages and the glow stay put if the words beside them take a line more or less */
.say { position: relative; z-index: 2; }
.hero h1 { margin-top: 16px; font: 800 clamp(46px, 6.5vw, 104px)/0.9 var(--head); letter-spacing: -0.012em; }
.hero h1 span { white-space: nowrap; }
.hero h1 span { display: block; }
.rb { width: fit-content; padding-bottom: 0.1em; margin-bottom: -0.1em; color: #3d6bea; }
@supports (background-clip: text) or (-webkit-background-clip: text) { .rb { background: var(--bow-ink); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; color: transparent; } }   /* the words are never left with no colour at all */
.lede { margin-top: 26px; max-width: 33em; font-size: clamp(18px, 1.55vw, 21px); line-height: 1.5; color: var(--ink-2); text-wrap: pretty; }
.cta { display: flex; flex-wrap: wrap; align-items: center; gap: 18px 14px; margin-top: 30px; padding-bottom: 10px; }
.fine { margin-top: 16px; max-width: 34em; font-size: 15px; line-height: 1.45; color: var(--ink-3); }
.fine a { font-weight: 600; }

/* five real pages fanned out like a hand of cards, each turned about one point below them, over the glow */
.stage { position: relative; aspect-ratio: 1.06; margin-top: clamp(0px, 2.4vw, 34px); }
/* THE GLOW. Two discs, one inside the other: each a wheel of the eight inks with no edge between one ink and the
 * next, blurred, and faded away toward its rim. They turn opposite ways at different speeds while the whole of it
 * swells and settles, so every colour drifts through every other and no two moments look the same. It only turns,
 * scales and fades (transform, opacity), which the graphics card does by itself: the page does no work for it.
 * For anyone who has asked for less motion it is there, and still. */
.glow { position: absolute; left: 50%; top: 50%; width: 172%; aspect-ratio: 1; translate: -50% -50%; pointer-events: none; }
.glow::before, .glow::after { content: ""; position: absolute; border-radius: 50%; filter: blur(46px);
  -webkit-mask-image: radial-gradient(closest-side, #000 46%, transparent 97%); mask-image: radial-gradient(closest-side, #000 46%, transparent 97%); }
.glow::before { inset: 0; opacity: 0.9; background: conic-gradient(var(--r), var(--o), var(--y), var(--g), var(--t), var(--b), var(--v), var(--p), var(--r)); }
.glow::after { inset: 17%; opacity: 0.8; background: conic-gradient(from 200deg, var(--b), var(--p), var(--y), var(--t), var(--r), var(--v), var(--g), var(--o), var(--b)); }
/* ONE ANIMATION TO A DISC, and none on the element that holds them. Each disc turns, swells and fades in one
 * animation of its own. (At first the holder swelled while the discs turned: each alone cost nothing, but the two
 * together made the browser work its styles out again on every frame, 120 times a second, with a fifth of a
 * processor busy while the page stood still. Measured with tools/measure-speed.js; it must say "styles 0/s".) */
@keyframes turn-a { 0% { transform: rotate(0deg) scale(1); opacity: 0.9; } 50% { transform: rotate(180deg) scale(1.1); opacity: 0.74; } 100% { transform: rotate(360deg) scale(1); opacity: 0.9; } }
@keyframes turn-b { 0% { transform: rotate(0deg) scale(1.08); opacity: 0.66; } 50% { transform: rotate(-180deg) scale(1); opacity: 0.82; } 100% { transform: rotate(-360deg) scale(1.08); opacity: 0.66; } }
.fan { position: absolute; inset: 0; }
.fan li { position: absolute; left: 50%; bottom: 24%; width: 35%; margin-left: -17.5%; transform-origin: 50% 150%; rotate: var(--a); z-index: var(--z); transition: translate 0.45s var(--ease), scale 0.45s var(--ease); }
.fan li:nth-child(1) { --a: -30deg; --z: 1; }
.fan li:nth-child(2) { --a: -15deg; --z: 2; }
.fan li:nth-child(3) { --a: 0deg; --z: 3; }
.fan li:nth-child(4) { --a: 15deg; --z: 2; }
.fan li:nth-child(5) { --a: 30deg; --z: 1; }
.fan li:hover, .fan li:focus-within { z-index: 6; scale: 1.07; }
.fan a { display: block; background: #fff; border-radius: 3px; box-shadow: 0 0 0 1.5px var(--ink), 0 22px 34px -18px rgba(28, 26, 23, 0.6); }
@keyframes deal { from { rotate: 0deg; opacity: 0; } }

.stats { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; margin-top: clamp(8px, 2vw, 22px); }
.stats li { padding: 18px 20px 17px; border: 1.5px solid var(--ink); border-radius: 18px; background: var(--c); }
.stats li:nth-child(1) { --c: var(--r); } .stats li:nth-child(2) { --c: var(--y); } .stats li:nth-child(3) { --c: var(--g); } .stats li:nth-child(4) { --c: var(--b); }
.stats b { display: block; font: 800 clamp(42px, 4.8vw, 66px)/0.9 var(--head); }
.stats span { display: block; margin-top: 8px; font-size: 16.5px; font-weight: 600; line-height: 1.25; }

/* two moving lines of the kinds of puzzle: words that are on the page in full, further down */
.ticker { position: relative; display: grid; gap: 10px; overflow: hidden; margin-top: clamp(34px, 5vw, 60px); padding: 14px 0; border-block: 1.5px solid var(--ink); background: var(--card); }
.track { display: flex; width: max-content; }
.track span { flex: none; margin-right: 10px; padding: 6px 14px; border: 1.5px solid var(--ink); border-radius: 999px; background: var(--c); font-size: 15.5px; font-weight: 600; white-space: nowrap; }
.track span:nth-child(8n+1) { --c: var(--r2); } .track span:nth-child(8n+2) { --c: var(--o2); } .track span:nth-child(8n+3) { --c: var(--y2); } .track span:nth-child(8n+4) { --c: var(--g2); }
.track span:nth-child(8n+5) { --c: var(--t2); } .track span:nth-child(8n+6) { --c: var(--b2); } .track span:nth-child(8n+7) { --c: var(--v2); } .track span:nth-child(8n) { --c: var(--p2); }
@keyframes run { to { transform: translateX(-50%); } }

/* --------------------------------------------------------------- the parts -- */
section { position: relative; padding: clamp(62px, 8.4vw, 118px) 0; }
.head { max-width: 840px; margin-bottom: clamp(26px, 3.4vw, 42px); }
.head .label::before { content: ""; display: inline-block; width: 46px; height: 10px; margin-right: 11px; border-radius: 99px; background: var(--bow); }
.head h2, .finale h2, .other h2 { margin-top: 12px; font: 800 clamp(40px, 5.5vw, 78px)/0.94 var(--head); letter-spacing: -0.01em; text-wrap: balance; }
.head p:not(.label) { margin-top: 16px; max-width: 37em; font-size: 19px; color: var(--ink-2); text-wrap: pretty; }
.night { background: var(--night); color: var(--on-night); }
.night .label, .night .head p:not(.label) { color: var(--on-night-2); }

/* ---------------------------------------------------------------- the wall -- */
.wall { padding-top: clamp(54px, 7vw, 96px); }
.pick { display: flex; flex-wrap: wrap; gap: 9px; margin-bottom: 24px; }
.pick label { padding: 10px 16px; border: 1.5px solid var(--ink); border-radius: 8px; background: var(--card); font-size: 16.5px; font-weight: 600; cursor: pointer; -webkit-user-select: none; user-select: none; transition: translate 0.2s var(--ease), box-shadow 0.2s var(--ease); }
.pick label i { margin-left: 4px; font-style: normal; font-weight: 400; color: var(--ink-2); }
.pick label:hover { background: var(--y2); }
#show-all:checked ~ .pick [for="show-all"], #show-art:checked ~ .pick [for="show-art"], #show-case:checked ~ .pick [for="show-case"], #show-word:checked ~ .pick [for="show-word"], #show-kids:checked ~ .pick [for="show-kids"] { background: var(--y); translate: -2px -2px; box-shadow: 4px 4px 0 var(--ink); }
#show-all:focus-visible ~ .pick [for="show-all"], #show-art:focus-visible ~ .pick [for="show-art"], #show-case:focus-visible ~ .pick [for="show-case"], #show-word:focus-visible ~ .pick [for="show-word"], #show-kids:focus-visible ~ .pick [for="show-kids"] { outline: 3px solid var(--b); outline-offset: 3px; }
#show-art:checked ~ .tiles .tile:not(.g-art), #show-case:checked ~ .tiles .tile:not(.g-case), #show-word:checked ~ .tiles .tile:not(.g-word), #show-kids:checked ~ .tiles .tile:not(.g-kids) { display: none; }

.tiles { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 16px; }
#show-all:checked ~ .tiles .tile:first-child { grid-column: span 2; grid-row: span 2; }   /* the most striking page, four times the size */
.tile a { display: flex; flex-direction: column; height: 100%; overflow: hidden; border: 1.5px solid var(--ink); border-radius: 16px; background: var(--card); text-decoration: none; transition: translate 0.25s var(--ease), box-shadow 0.25s var(--ease); }
.tile a:focus-visible { translate: -3px -3px; box-shadow: 6px 6px 0 var(--ink); }
.mat { display: grid; place-items: center; flex: 1; padding: 10% 13%; background: var(--c); }
.mat img { background: #fff; border-radius: 2px; rotate: -1.6deg; box-shadow: 0 0 0 1px rgba(28, 26, 23, 0.4), 0 12px 22px -12px rgba(28, 26, 23, 0.65); transition: rotate 0.35s var(--ease), scale 0.35s var(--ease); }
.tile:nth-child(even) .mat img { rotate: 1.4deg; }
.tile a:focus-visible .mat img { rotate: 0deg; scale: 1.06; }
.cap { display: block; padding: 11px 14px 13px; border-top: 1.5px solid var(--ink); }
.cap b { display: block; font-size: 17px; font-weight: 600; line-height: 1.2; }
.cap span { display: block; margin-top: 3px; font-size: 14px; line-height: 1.35; color: var(--ink-3); }
/* the mats run through the rainbow, tile after tile */
.tile:nth-child(8n+1) { --c: var(--r); } .tile:nth-child(8n+2) { --c: var(--o); } .tile:nth-child(8n+3) { --c: var(--y); } .tile:nth-child(8n+4) { --c: var(--g); }
.tile:nth-child(8n+5) { --c: var(--t); } .tile:nth-child(8n+6) { --c: var(--b); } .tile:nth-child(8n+7) { --c: var(--v); } .tile:nth-child(8n) { --c: var(--p); }

/* ------------------------------------------------- a picture, opened large -- */
#shut { position: fixed; left: 0; top: 0; width: 1px; height: 1px; }
.lb { display: none; position: fixed; inset: 0; z-index: 60; place-items: center; padding: 3vh 3vw; overflow-y: auto; }   /* (it scrolls, should a short window not hold it all) */
.lb:target { display: grid; }
.veil { position: fixed; inset: 0; background: var(--night); cursor: zoom-out; }
.lb figure { position: relative; display: grid; grid-template-columns: auto minmax(230px, 330px); align-items: center; gap: clamp(18px, 3.4vw, 46px); max-width: 100%; }
.lb .full { display: block; overflow: hidden; border-radius: 4px; background: #fff; box-shadow: 0 30px 80px -20px #000; }
.lb .full img { width: auto; max-height: 93vh; }
.lb figcaption { color: var(--on-night); }
.lb figcaption .label { color: var(--on-night-2); }
.lb h3 { margin-top: 10px; font: 800 clamp(34px, 4.2vw, 58px)/0.95 var(--head); }
.lb figcaption > p:not(.label):not(.lb-nav) { margin-top: 12px; font-size: 18.5px; color: var(--on-night-2); }
.lb-nav { display: flex; align-items: center; gap: 10px; margin-top: 28px; }
.lb-nav a { display: grid; place-items: center; min-width: 54px; height: 54px; padding: 0 18px; border: 1.5px solid var(--on-night); border-radius: 999px; font-size: 18px; font-weight: 600; text-decoration: none; }
.lb-nav a:hover { background: var(--y); border-color: var(--y); color: var(--ink); }
.lb-nav .x { background: var(--on-night); color: var(--ink); }
.lb.wide figure { grid-template-columns: minmax(0, 1fr); justify-items: center; gap: 20px; }
.lb.wide .full img { max-width: 94vw; max-height: 62vh; }
.lb.wide h3 { margin-top: 6px; font-size: clamp(28px, 3.2vw, 42px); }
.lb.wide figcaption { text-align: center; max-width: 44em; }
.lb.wide .lb-nav { justify-content: center; margin-top: 16px; }
.lb.wide figcaption > p:not(.label):not(.lb-nav) { margin-top: 8px; font-size: 17px; }
@keyframes pop { from { opacity: 0; scale: 0.965; } }

/* ----------------------------------------------------------------- the app -- */
.app::before, footer::before { content: ""; position: absolute; inset: 0 0 auto 0; height: 8px; background: var(--bow); }
/* its five steps, named across the top as the app names them: the one you are on is yellow, as it is there */
.rail { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin-bottom: 24px; }
.rail label { display: inline-flex; align-items: center; gap: 9px; min-height: 46px; padding: 0 15px 0 10px; border-radius: 6px; font-size: 17.5px; font-weight: 600; color: var(--on-night-2); cursor: pointer; -webkit-user-select: none; user-select: none; }
.rail label:last-child { padding-left: 15px; margin-left: auto; box-shadow: inset 0 0 0 1.5px rgba(244, 240, 232, 0.3); }
.rail label .n { display: grid; place-items: center; width: 28px; height: 28px; border: 1.5px solid currentColor; border-radius: 50%; font-size: 14.5px; }
.rail > i { width: 16px; height: 1.5px; background: rgba(244, 240, 232, 0.3); }
.rail > i:last-of-type { display: none; }
.rail label:hover { background: rgba(244, 240, 232, 0.1); color: var(--on-night); }
#step-1:checked ~ .rail [for="step-1"], #step-2:checked ~ .rail [for="step-2"], #step-3:checked ~ .rail [for="step-3"], #step-4:checked ~ .rail [for="step-4"], #step-5:checked ~ .rail [for="step-5"], #step-6:checked ~ .rail [for="step-6"] { background: #ffe45e; color: var(--ink); box-shadow: none; }
#step-1:checked ~ .rail [for="step-1"] .n, #step-2:checked ~ .rail [for="step-2"] .n, #step-3:checked ~ .rail [for="step-3"] .n, #step-4:checked ~ .rail [for="step-4"] .n, #step-5:checked ~ .rail [for="step-5"] .n { background: var(--ink); border-color: var(--ink); color: #ffe45e; }
#step-1:focus-visible ~ .rail [for="step-1"], #step-2:focus-visible ~ .rail [for="step-2"], #step-3:focus-visible ~ .rail [for="step-3"], #step-4:focus-visible ~ .rail [for="step-4"], #step-5:focus-visible ~ .rail [for="step-5"], #step-6:focus-visible ~ .rail [for="step-6"] { outline: 3px solid var(--b); outline-offset: 3px; }
.screens { position: relative; }
.screens::before { content: ""; position: absolute; inset: 6% -2% 12%; border-radius: 50%; background: var(--bow); filter: blur(70px); opacity: 0.6; }   /* a rainbow's glow behind the window: drawn once, it never moves */
.screen { display: none; position: relative; }
#step-1:checked ~ .screens .s1, #step-2:checked ~ .screens .s2, #step-3:checked ~ .screens .s3, #step-4:checked ~ .screens .s4, #step-5:checked ~ .screens .s5, #step-6:checked ~ .screens .s6 { display: block; }
.browser { display: block; overflow: hidden; border: 1.5px solid #000; border-radius: 14px; background: #f2eee6; box-shadow: 0 44px 80px -44px #000; }
.chrome { display: flex; align-items: center; gap: 7px; padding: 10px 14px; border-bottom: 1.5px solid var(--ink); background: var(--paper-2); }
.chrome i { flex: none; width: 11px; height: 11px; border-radius: 50%; background: var(--r); }
.chrome i:nth-child(2) { background: var(--y); } .chrome i:nth-child(3) { background: var(--g); }
.chrome b { min-width: 0; margin: 0 auto; translate: -24px 0; padding: 6px 16px; border-radius: 99px; background: var(--card); font: 500 13px/1 var(--mono); color: var(--ink-3); overflow: hidden; text-overflow: ellipsis; }
.screen figcaption { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 16px; margin-top: 20px; }
.screen figcaption b { font: 800 28px/1 var(--head); }
.screen figcaption span { font-size: 17.5px; color: var(--on-night-2); }
.head.sub { margin: clamp(50px, 6.4vw, 84px) 0 22px; }
.head.sub h3 { margin-top: 10px; font: 800 clamp(30px, 3.4vw, 46px)/1 var(--head); }
.books { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; }
.books a { display: block; height: 100%; overflow: hidden; border: 1.5px solid rgba(244, 240, 232, 0.32); border-radius: 14px; background: var(--night-2); text-decoration: none; transition: translate 0.25s var(--ease), box-shadow 0.25s var(--ease), border-color 0.25s; }
.books a:focus-visible { translate: -3px -3px; border-color: var(--c); box-shadow: 6px 6px 0 var(--c); }
.books li:nth-child(1) { --c: var(--o); } .books li:nth-child(2) { --c: var(--g); } .books li:nth-child(3) { --c: var(--b); } .books li:nth-child(4) { --c: var(--p); }
.books .cap { border-top: 4px solid var(--c); }
.books .cap span { color: var(--on-night-2); }

/* ------------------------------------------------------ what it does for you -- */
.bento { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; }
.bento li { position: relative; display: flex; flex-direction: column; justify-content: flex-end; min-height: 270px; overflow: hidden; padding: 84px 22px 24px; border: 1.5px solid var(--ink); border-radius: 20px; background: var(--c); transition: translate 0.25s var(--ease), box-shadow 0.25s var(--ease); }
.bento .n { position: absolute; left: 20px; top: 12px; font: 800 64px/1 var(--head); opacity: 0.22; }
.bento h3 { font: 800 30px/1 var(--head); text-wrap: balance; }
.bento p { margin-top: 10px; font-size: 16.5px; line-height: 1.42; }
.bento li:nth-child(1) { --c: var(--r); } .bento li:nth-child(2) { --c: var(--o); } .bento li:nth-child(3) { --c: var(--y); } .bento li:nth-child(4) { --c: var(--g); }
.bento li:nth-child(5) { --c: var(--t); } .bento li:nth-child(6) { --c: var(--b); } .bento li:nth-child(7) { --c: var(--v); } .bento li:nth-child(8) { --c: var(--p); }

/* -------------------------------------------------------- every kind, by name -- */
.allkinds { padding-top: 0; }
.kinds svg { display: block; border-radius: 8px; }
.kinds rect.k1 { fill: var(--r); } .kinds rect.k2 { fill: var(--y); } .kinds rect.k3 { fill: var(--g); } .kinds rect.k4 { fill: var(--b); } .kinds rect.k5 { fill: var(--v); }
.kinds ul { display: flex; flex-wrap: wrap; gap: 6px 26px; margin-top: 14px; font-size: 16.5px; }
.kinds li::before { content: ""; display: inline-block; width: 12px; height: 12px; margin-right: 8px; border: 1.5px solid var(--ink); border-radius: 50%; background: var(--c); }
.kinds li:nth-child(1) { --c: var(--r); } .kinds li:nth-child(2) { --c: var(--y); } .kinds li:nth-child(3) { --c: var(--g); } .kinds li:nth-child(4) { --c: var(--b); } .kinds li:nth-child(5) { --c: var(--v); }
.kinds li b { margin-right: 6px; font-weight: 600; }
.who { margin-top: 18px; overflow: hidden; border: 1.5px solid var(--ink); border-radius: 18px; background: var(--card); }
.who summary { display: flex; align-items: center; gap: 14px; padding: 20px 24px; font: 800 clamp(26px, 3vw, 34px)/1 var(--head); cursor: pointer; list-style: none; }
.who summary::-webkit-details-marker { display: none; }
.who summary i { padding: 6px 11px 5px; border: 1.5px solid var(--ink); border-radius: 99px; background: var(--y); font: 600 14px/1 var(--mono); }
.who summary::after { content: "+"; margin-left: auto; font: 400 34px/0.8 var(--sans); }
.who[open] summary::after { content: "–"; }
.who summary:hover { background: var(--y2); }
.kindlist { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 26px 30px; padding: 8px 24px 28px; }
.kindlist ul { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px; }
.kindlist li { padding: 4px 11px 5px; border: 1.5px solid var(--ink); border-radius: 99px; background: var(--c); font-size: 15px; font-weight: 600; }
.kindlist div:nth-child(8n+1) { --c: var(--r2); } .kindlist div:nth-child(8n+2) { --c: var(--o2); } .kindlist div:nth-child(8n+3) { --c: var(--y2); } .kindlist div:nth-child(8n+4) { --c: var(--g2); }
.kindlist div:nth-child(8n+5) { --c: var(--t2); } .kindlist div:nth-child(8n+6) { --c: var(--b2); } .kindlist div:nth-child(8n+7) { --c: var(--v2); } .kindlist div:nth-child(8n) { --c: var(--p2); }

/* ------------------------------------------------------------ what comes out -- */
.out { border-block: 1.5px solid var(--ink); background: var(--paper-2); }
.files { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.files li { padding: 22px 22px 24px; border: 1.5px solid var(--ink); border-radius: 4px 26px 4px 4px; background: var(--sheet); }   /* a sheet with one corner turned */
.files li::before { content: ""; display: block; width: 48px; height: 9px; margin-bottom: 18px; border-radius: 99px; background: var(--c); }
.files li:nth-child(1) { --c: var(--r); } .files li:nth-child(2) { --c: var(--o); } .files li:nth-child(3) { --c: var(--g); } .files li:nth-child(4) { --c: var(--t); } .files li:nth-child(5) { --c: var(--b); } .files li:nth-child(6) { --c: var(--p); }
.files h3 { font: 800 28px/1 var(--head); }
.files p { margin-top: 8px; font-size: 16.5px; color: var(--ink-2); }

/* ------------------------------------------------------------------ the end -- */
.finale { overflow: clip; padding-bottom: clamp(230px, 27vw, 340px); text-align: center; }
.finale .glow { top: auto; bottom: 0; width: min(1240px, 150%); translate: -50% 50%; }   /* about a point on the foot of the part: a glow along the horizon, and the words stand clear of its bright part */
.finale .wrap { z-index: 1; }
.finale p { max-width: 36em; margin: 16px auto 0; font-size: 19px; color: var(--on-night-2); }
.finale .cta { justify-content: center; }
.finale .fine { margin-top: 14px; font-size: 15px; }
.other { padding: clamp(46px, 6vw, 84px) 0; }
.other .card { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 30px 40px; padding: clamp(26px, 4.4vw, 56px); border: 1.5px solid var(--ink); border-radius: 26px; background: var(--card); }
.other .card > div { flex: 1 1 420px; }
.other h2 { font-size: clamp(34px, 4.4vw, 60px); }
.other p:not(.label) { margin-top: 14px; max-width: 34em; font-size: 18.5px; color: var(--ink-2); }
.other .btn { margin-bottom: 10px; }

footer { position: relative; padding: 50px 0 40px; }
footer .row { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 18px 24px; }
footer .brand svg .k { fill: var(--on-night); }
footer nav { display: flex; flex-wrap: wrap; gap: 0 6px; margin: 0 -8px; font-size: 16px; }
footer nav a { padding: 10px 8px; color: var(--on-night-2); text-decoration: none; }   /* room for a finger */
footer nav a:hover { color: var(--on-night); text-decoration: underline; }
.legal { max-width: 72em; margin-top: 26px; font-size: 13.5px; line-height: 1.5; color: var(--on-night-2); }
.legal a { display: inline-block; padding: 8px 0; }

/* an address that only leads on (index.html): one line, for the moment before the browser goes */
.goes-on { display: grid; place-items: center; min-height: 100vh; padding: 24px; text-align: center; font-weight: 600; }

/* -------------------------------------------------------------- what moves -- */
@view-transition { navigation: auto; }   /* going to another page of the site turns the leaf, in a browser that can */
/* lifting under the pointer, only where there is a pointer that hovers: a finger would leave a tile lifted */
@media (hover: hover) {
  .tile a:hover, .bento li:hover { translate: -3px -3px; box-shadow: 6px 6px 0 var(--ink); }
  .tile a:hover .mat img { rotate: 0deg; scale: 1.06; }
  .books a:hover { translate: -3px -3px; border-color: var(--c); box-shadow: 6px 6px 0 var(--c); }
}
@media (prefers-reduced-motion: no-preference) {
  .bow::before { animation: slide 7s linear infinite; }
  .track { animation: run 110s linear infinite; }
  .track + .track { animation-duration: 150s; animation-direction: reverse; }
  .fan li { animation: deal 0.9s var(--ease) backwards; animation-delay: calc(var(--z) * 70ms); }
  .glow::before { animation: turn-a 28s linear infinite; }
  .glow::after { animation: turn-b 19s linear infinite; }
  .lb:target figure, .screen { animation: pop 0.35s var(--ease); }
  @supports (animation-timeline: view()) {
    .read { animation: read linear both; animation-timeline: scroll(root); }
    .tile, .bento li, .files li, .books li, .stats li { animation: rise linear both; animation-timeline: view(); animation-range: entry 0% entry 60%; }
  }
}
@keyframes rise { from { opacity: 0; translate: 0 36px; } }

/* --------------------------------------------------------- narrower windows -- */
@media (max-width: 1100px) {
  .tiles { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .bento, .books { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .bento li { min-height: 220px; }
}
@media (max-width: 900px) {
  .hero-grid { grid-template-columns: minmax(0, 1fr); }
  .stage { width: 100%; max-width: 560px; margin: 0 auto; aspect-ratio: 1.3; }
  .stage .glow { width: 150%; }
  .fan li { bottom: 19%; }
  .stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .files { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .mast nav a.in { display: none; }
  .lb figure { grid-template-columns: minmax(0, 1fr); justify-items: center; gap: 16px; }
  .lb .full img { max-height: 60vh; }
  .lb figcaption { text-align: center; }
  .lb-nav { justify-content: center; margin-top: 16px; }
  .rail label:last-child { margin-left: 0; }
}
@media (max-width: 700px) {
  .tiles { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
  .rail > i { display: none; }
  .rail label { min-height: 42px; padding: 0 12px 0 8px; font-size: 16px; }
  .chrome b { margin: 0 0 0 8px; translate: 0 0; }
}
@media (max-width: 560px) {
  body { font-size: 17px; }
  .wrap { padding: 0 17px; }
  .mast nav a:not(.btn) { display: none; }
  .brand { font-size: 20px; }
  .btn.small { padding: 13px 15px; font-size: 15.5px; }
  .top { padding-top: 8px; padding-bottom: 8px; }
  .tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .bento, .files, .books { grid-template-columns: minmax(0, 1fr); }
  .bento li { min-height: 0; padding-top: 78px; }
  .cap b { font-size: 15.5px; } .cap span { font-size: 13px; }
  .who summary { padding: 16px 17px; }
  .kindlist { padding: 4px 17px 22px; }
  .btn { padding: 16px 20px; }
  .btn.big { width: 100%; justify-content: center; }
}

/* the narrowest phones (320 wide): the name and Sign in still fit on one line, so the page never slides sideways */
@media (max-width: 350px) {
  .top { gap: 8px; }
  .brand { gap: 8px; font-size: 17px; }
  .brand svg { width: 24px; height: 24px; }
  .mast .btn.small { margin-left: 0; padding: 12px 12px; font-size: 15px; }
  .hero h1 { font-size: 12.6vw; }   /* its longest line ("made and checked,") is kept whole: at 46 px it ran past the edge and lost its comma */
}

/* ------------------------------------------------------------------ on paper -- */
/* printed, the page is its words and its pictures: nothing that moves, glows or opens */
@media print {
  .read, .glow, .ticker, .boxes, .mast nav, .pick, .bow, .screens::before { display: none !important; }
  .mast { position: static; }
  .screen { display: block !important; margin-bottom: 18px; }
  .night { background: none; color: var(--ink); }
  .night .label, .night .head p:not(.label), .finale p, .screen figcaption span, .books .cap span { color: var(--ink-2); }
  section { padding: 30px 0; break-inside: avoid-page; }
}