/* Judy Kennedy. Cut and Paste brand, whole site.
   One file for every page. The brand has a volume knob: --k multiplies every tilt.
   Home page 1, inner pages .4, reading pages .15. Halved again on phones. */

:root {
  --black: #0E0E0E;
  --paper: #F7F3EA;
  --newsprint: #D9D4C7;
  --grey: #B8B3A8;
  --halo: #F2B632;
  --marker: #E0312B;        /* strokes only, never text */
  --marker-text: #B3201B;   /* the only red for text, and only on paper or white */
  --white: #FFFFFF;
  --ink-soft: #45423B;      /* secondary text on paper, 8.9 to 1 */
  --core: #2A2927;

  --f-abril: "Abril Fatface", Georgia, "Times New Roman", serif;
  /* Two of the four tile faces are system fonts, so tiles cost no extra download. */
  --f-cut-serif: Georgia, "Times New Roman", "Noto Serif", serif;
  --f-cut-sans: "Arial Black", "Helvetica Neue", Roboto, Arial, sans-serif;
  --f-type: "Special Elite", "Courier New", Courier, monospace;
  --f-body: Karla, system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  --f-marker: "Permanent Marker", "Marker Felt", "Comic Sans MS", cursive;

  --vol: 1;                 /* set per page on body */
  --gutter: 16px;
  --tape: rgba(242, 182, 50, .78);

  --tear-1: polygon(0 40%,2.5% 50%,4.5% 9%,6.8% 12%,8.3% 7%,10.8% 27%,11.7% 55%,13.4% 30%,14.4% 54%,15.4% 72%,16.5% 28%,18.5% 74%,21.0% 73%,22.9% 6%,25.5% 5%,27.3% 17%,28.7% 18%,30.5% 73%,31.9% 23%,33.0% 73%,35.0% 47%,36.1% 8%,37.9% 26%,39.7% 68%,41.3% 40%,43.0% 58%,44.5% 31%,46.8% 31%,47.8% 38%,49.6% 43%,51.7% 36%,53.7% 9%,54.8% 53%,55.9% 43%,57.1% 62%,58.7% 9%,60.9% 73%,63.2% 40%,64.6% 44%,66.5% 74%,68.8% 8%,71.1% 34%,72.8% 8%,73.8% 39%,75.8% 57%,77.2% 49%,79.6% 44%,80.6% 59%,82.1% 78%,83.2% 7%,84.4% 36%,85.6% 31%,87.1% 63%,88.2% 57%,89.8% 35%,92.2% 55%,94.5% 35%,96.6% 45%,98.7% 48%,100% 29%,100% 100%,0 100%);
  --tear-2: polygon(0 25%,1.2% 29%,3.2% 1%,4.9% 75%,6.2% 36%,7.1% 53%,8.9% 78%,10.7% 16%,12.8% 65%,15.3% 6%,17.0% 71%,18.6% 51%,20.1% 61%,22.1% 7%,23.3% 26%,25.0% 14%,26.5% 6%,27.5% 72%,28.7% 12%,31.2% 78%,32.2% 26%,34.1% 19%,36.1% 44%,38.0% 60%,39.1% 62%,41.7% 59%,43.4% 39%,44.5% 13%,46.6% 33%,48.3% 20%,50.1% 26%,52.6% 67%,54.2% 69%,56.6% 67%,58.0% 11%,60.1% 33%,61.9% 21%,63.4% 28%,65.2% 64%,66.7% 28%,68.6% 24%,70.9% 51%,73.0% 29%,74.3% 63%,75.8% 3%,78.3% 35%,80.1% 24%,82.1% 44%,83.8% 44%,86.3% 46%,87.3% 13%,88.6% 25%,90.1% 61%,92.1% 78%,94.4% 61%,96.8% 44%,99.1% 10%,100% 27%,100% 100%,0 100%);
  --tear-3: polygon(0 44%,2.2% 25%,3.9% 22%,5.6% 42%,6.6% 50%,8.3% 10%,10.4% 21%,13.0% 3%,14.2% 59%,16.5% 18%,18.4% 76%,21.0% 44%,22.1% 70%,23.3% 1%,25.5% 13%,27.3% 17%,28.9% 24%,31.3% 27%,32.2% 27%,33.6% 30%,35.8% 41%,37.1% 53%,39.5% 7%,41.9% 45%,44.3% 74%,46.6% 66%,48.2% 64%,49.4% 19%,51.1% 2%,53.5% 23%,55.5% 19%,56.7% 60%,58.6% 15%,60.5% 41%,62.5% 67%,64.4% 13%,66.8% 7%,68.1% 35%,69.1% 12%,70.8% 71%,71.8% 8%,73.4% 78%,76.0% 77%,77.7% 35%,79.4% 68%,81.7% 64%,84.2% 66%,86.6% 33%,89.0% 25%,91.4% 17%,93.0% 50%,94.6% 9%,96.7% 54%,97.7% 38%,100% 69%,100% 100%,0 100%);
  --tear-4: polygon(0 29%,2.5% 46%,3.6% 17%,6.2% 28%,8.4% 12%,9.9% 62%,11.1% 28%,12.3% 55%,14.9% 51%,16.3% 25%,17.9% 11%,20.0% 2%,21.5% 58%,23.1% 2%,24.7% 66%,26.6% 65%,29.2% 14%,31.7% 29%,34.3% 13%,35.3% 34%,36.3% 23%,37.7% 16%,39.9% 33%,41.5% 68%,44.0% 73%,45.7% 41%,46.8% 7%,49.0% 23%,50.7% 9%,52.0% 2%,54.0% 33%,55.0% 28%,56.1% 15%,57.7% 43%,60.3% 53%,62.8% 34%,64.8% 5%,66.6% 30%,69.0% 20%,70.4% 23%,71.6% 39%,73.6% 67%,75.8% 37%,77.5% 22%,78.8% 2%,81.4% 4%,82.3% 64%,84.2% 24%,85.9% 31%,88.4% 13%,90.4% 55%,92.5% 69%,94.8% 50%,97.3% 39%,100% 34%,100% 100%,0 100%);
  --tear-5: polygon(0 41%,1.2% 17%,2.8% 44%,5.4% 16%,6.3% 32%,8.0% 7%,9.0% 48%,11.4% 36%,13.3% 37%,14.3% 23%,15.4% 57%,16.3% 46%,18.9% 70%,20.3% 4%,22.9% 39%,24.1% 23%,25.0% 48%,26.1% 35%,27.8% 25%,29.2% 0%,30.2% 11%,31.4% 75%,32.3% 2%,33.7% 29%,34.8% 67%,37.1% 19%,39.2% 76%,40.7% 41%,42.8% 63%,44.0% 18%,45.0% 65%,46.9% 64%,48.1% 67%,50.3% 72%,52.6% 2%,54.9% 74%,57.1% 29%,58.2% 5%,59.3% 46%,61.8% 48%,64.2% 71%,65.1% 2%,67.1% 31%,68.8% 0%,70.5% 8%,72.7% 64%,75.1% 11%,77.1% 8%,79.3% 60%,80.6% 9%,83.0% 30%,85.1% 26%,86.4% 58%,88.1% 48%,89.2% 36%,91.4% 78%,93.4% 25%,94.4% 18%,95.8% 38%,97.8% 17%,98.7% 7%,100% 63%,100% 100%,0 100%);
  --tear-6: polygon(0 26%,2.1% 62%,3.5% 66%,4.9% 59%,6.5% 15%,9.1% 70%,10.4% 10%,12.9% 2%,14.3% 9%,16.6% 57%,19.1% 49%,20.4% 26%,21.4% 11%,22.6% 67%,23.9% 46%,25.0% 65%,26.4% 14%,28.5% 29%,30.3% 62%,31.8% 20%,32.7% 62%,34.8% 51%,36.2% 18%,37.8% 48%,39.2% 42%,40.2% 43%,42.5% 15%,45.0% 25%,47.1% 37%,48.4% 8%,50.0% 75%,51.0% 54%,53.2% 6%,54.6% 6%,56.9% 36%,58.9% 19%,60.2% 34%,61.8% 40%,63.1% 47%,65.3% 54%,67.7% 51%,70.2% 70%,72.0% 10%,73.0% 52%,74.6% 17%,76.6% 36%,78.4% 70%,79.5% 60%,81.1% 36%,82.5% 33%,84.1% 30%,85.5% 71%,87.5% 15%,88.7% 20%,89.7% 64%,92.2% 63%,94.0% 57%,96.5% 57%,98.1% 70%,100% 25%,100% 100%,0 100%);
  --tear-7: polygon(0 31%,1.5% 11%,2.9% 47%,4.3% 72%,5.5% 2%,7.7% 52%,9.2% 67%,10.5% 34%,12.0% 7%,13.7% 73%,16.3% 16%,18.3% 67%,20.3% 27%,21.4% 31%,22.9% 57%,24.5% 39%,26.9% 2%,28.0% 54%,30.1% 60%,32.7% 62%,33.6% 50%,36.0% 67%,38.4% 57%,39.7% 13%,41.0% 19%,42.8% 13%,45.3% 58%,46.3% 5%,47.2% 16%,48.5% 4%,50.5% 38%,53.1% 32%,54.9% 55%,56.9% 14%,58.0% 38%,59.8% 74%,61.0% 33%,62.3% 76%,63.2% 68%,64.6% 58%,66.0% 40%,68.0% 31%,69.7% 30%,71.5% 3%,74.1% 39%,75.1% 24%,76.8% 53%,77.8% 29%,79.9% 47%,81.2% 4%,83.2% 53%,84.8% 50%,86.0% 37%,88.2% 64%,89.2% 63%,91.7% 39%,93.9% 24%,95.2% 28%,96.6% 37%,97.6% 63%,100% 34%,100% 100%,0 100%);
  --tear-8: polygon(0 51%,1.6% 7%,4.1% 18%,6.6% 6%,7.9% 76%,9.0% 6%,11.1% 23%,12.7% 40%,14.8% 10%,17.3% 42%,18.5% 67%,20.7% 4%,22.1% 48%,24.4% 42%,26.1% 13%,27.0% 35%,28.0% 53%,30.6% 15%,32.4% 26%,34.0% 39%,36.3% 55%,37.3% 60%,38.5% 69%,41.0% 24%,42.5% 60%,43.4% 52%,44.7% 51%,45.7% 4%,47.4% 7%,48.7% 8%,51.2% 43%,52.7% 42%,55.2% 78%,56.2% 40%,58.6% 38%,59.5% 76%,62.0% 8%,62.9% 29%,64.0% 59%,66.6% 49%,68.8% 55%,71.1% 16%,73.6% 23%,74.5% 38%,76.8% 19%,78.7% 41%,81.1% 58%,82.6% 76%,83.6% 25%,85.2% 20%,86.5% 8%,88.5% 61%,90.3% 41%,91.5% 54%,93.9% 9%,95.3% 10%,96.5% 53%,98.3% 57%,100% 28%,100% 100%,0 100%);
}

body { --k: calc(var(--vol) * .5); }
.page--inner { --vol: .4; }
.page--read { --vol: .15; }
@media (min-width: 760px) {
  :root { --gutter: clamp(24px, 4vw, 56px); }
  body { --k: var(--vol); }
}

/* ---------- Base ---------- */

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--black);
  color: var(--paper);
  font-family: var(--f-body);
  font-size: 1.0625rem;
  line-height: 1.6;
  overflow-x: hidden;
}
@media (min-width: 760px) { body { font-size: 1.125rem; } }
img, svg { display: block; max-width: 100%; }
img { height: auto; }
h1, h2, h3, p, ul, ol, blockquote, figure { margin: 0; }
ul, ol { padding: 0; list-style: none; }
a { color: inherit; }
cite { font-style: normal; }

.vh {
  position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0;
  overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; border: 0;
}
.wrap { width: min(100% - (var(--gutter) * 2), 1180px); margin-inline: auto; }
.wrap--narrow { width: min(100% - (var(--gutter) * 2), 860px); }

.on-black {
  --ground: var(--black); --ink: var(--paper); --muted: var(--grey); --focus: var(--halo);
  --t-bg: var(--paper); --t-fg: var(--black);
  --ti-bg: var(--black); --ti-fg: var(--paper); --ti-frame: inset 0 0 0 .055em var(--paper);
  --tear2: var(--core); --line: var(--halo);
  background: var(--black); color: var(--paper);
}
.on-paper, .on-news, .scrap, .sheet, .card, .slip, .sticky, .print {
  --ink: var(--black); --muted: var(--ink-soft); --focus: var(--black);
  --t-bg: var(--black); --t-fg: var(--paper);
  --ti-bg: var(--newsprint); --ti-fg: var(--black); --ti-frame: none;
  --line: var(--marker);
  color: var(--black);
}
.on-paper, .on-news {
  --ground: var(--paper); --tear2: var(--newsprint);
  background-color: var(--paper);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 .09 0'/%3E%3C/filter%3E%3Crect width='220' height='220' filter='url(%23n)'/%3E%3C/svg%3E");
}
.on-news { --ground: var(--newsprint); --ti-bg: var(--paper); background-color: var(--newsprint); }

:focus-visible { outline: 3px solid var(--focus, var(--halo)); outline-offset: 3px; }

.skip {
  position: absolute; left: 12px; top: -80px; z-index: 100;
  background: var(--halo); color: var(--black); padding: 12px 18px;
  font-family: var(--f-type); text-transform: uppercase; letter-spacing: .12em; text-decoration: none;
}
.skip:focus { top: 12px; outline: 3px solid var(--paper); outline-offset: 2px; }

section, .band { position: relative; isolation: isolate; overflow-x: clip; }
[id] { scroll-margin-top: 24px; }
/* Room for the sticky bar (60px). On the page itself, so it covers anchor jumps and keyboard focus alike. */
@media (max-width: 1079px) { html.js { scroll-padding-top: 72px; } }

/* Torn edge. The section's own colour rips up over the one before it.
   Used only where black meets paper. */
.torn::before, .torn::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: calc(100% - 1px);
  height: 16px; clip-path: var(--tear); pointer-events: none;
}
.torn::before { background: var(--ground); z-index: 2; }
.torn::after { background: var(--tear2); z-index: 1; height: 20px; transform: scaleX(-1); }
@media (min-width: 760px) {
  .torn::before { height: 24px; }
  .torn::after { height: 30px; }
}

/* Cut line. The quiet divider between two paper sections: a dashed scissor line. */
.cut::before {
  content: ""; position: absolute; top: 0; left: calc(var(--gutter) + 34px); right: var(--gutter);
  border-top: 2px dashed rgba(14, 14, 14, .38);
}
.cut::after {
  content: ""; position: absolute; top: -11px; left: var(--gutter); width: 26px; height: 22px;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 26 22' fill='none' stroke='%230E0E0E' stroke-width='1.8' stroke-linecap='round'%3E%3Ccircle cx='5' cy='5' r='3.4'/%3E%3Ccircle cx='5' cy='17' r='3.4'/%3E%3Cpath d='M8 7 L25 16 M8 15 L25 6'/%3E%3C/svg%3E") no-repeat center / contain;
}

/* ---------- Type ---------- */

h1, h2, h3 { font-family: var(--f-abril); font-weight: 400; text-wrap: balance; }
h1 { font-size: clamp(2.3rem, 5.6vw, 4.2rem); line-height: 1.03; letter-spacing: -.008em; }
h2 { font-size: clamp(1.9rem, 4vw, 3rem); line-height: 1.06; letter-spacing: -.005em; }
.page--home h2 { font-size: clamp(2rem, 4.6vw, 3.5rem); line-height: 1.04; }
h3 { font-size: 1.5rem; line-height: 1.12; }
p + p { margin-top: .9em; }
.lede { font-size: 1.2em; line-height: 1.5; margin-top: .7em; max-width: 36ch; }
.lede--wide { max-width: 46ch; }
.fine { color: var(--muted); font-size: 1.0625rem; }
.measure { max-width: 62ch; }

p a, .footer__id a {
  text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: .18em;
  text-decoration-color: var(--line, var(--halo));
}
.on-black p a:hover { color: var(--halo); }
.on-paper p a:not([class]):hover, .on-news p a:not([class]):hover, .sheet p a:not([class]):hover { background: var(--halo); }

/* Bigger tap area for links inside sentences on touch screens. Padding on an inline box moves nothing.
   The only link in its paragraph gets the full 44px. Where a paragraph holds several, less, so the
   tap areas of links on neighbouring lines never meet. The highlight stays on the words. */
@media (pointer: coarse) {
  p a:not([class]) { padding-block: .22em; background-clip: content-box; }
  p a:not([class]):only-of-type { padding-block: .7em; }
}

/* The arrow that marks every link leaving for kmalliance.org, Amazon or Facebook.
   Invite Judy stays on this site now (invite.html), so the header buttons carry none. */
.btn[href^="http"]::after, .tlink[href^="http"]::after, .footer__col a[href^="http"]::after, p a[href^="http"]:not([class])::after {
  content: ""; flex: none; display: inline-block; width: .62em; height: .62em; margin-left: .6em; vertical-align: .04em;
  background: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M2 10 10 2M4 2h6v6'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M2 10 10 2M4 2h6v6'/%3E%3C/svg%3E") center / contain no-repeat;
}

p a[href^="http"]:not([class])::after { margin-left: .4em; }

/* Typewriter link */
.tlink {
  display: inline-block; padding: .8em 0 .65em; min-height: 44px;
  font-family: var(--f-type); text-transform: uppercase; letter-spacing: .14em; font-size: .9rem;
  color: var(--ink); text-decoration: underline; text-decoration-thickness: 2px;
  text-underline-offset: .3em; text-decoration-color: var(--line, var(--halo));
}
.tlink:hover { background: var(--halo); color: var(--black); text-decoration-color: var(--black); box-shadow: -.4em 0 0 var(--halo), .4em 0 0 var(--halo); }
.typed { font-family: var(--f-type); }
.links { display: flex; flex-wrap: wrap; gap: 0 clamp(22px, 4vw, 44px); margin-top: .6rem; }

/* Small typewriter label over a heading. Inner pages use this where the home page uses tiles. */
.eyebrow {
  font-family: var(--f-type); text-transform: uppercase; letter-spacing: .2em; font-size: .85rem;
  line-height: 1.3; color: var(--muted); margin-bottom: .9rem;
}

/* White typewriter strip, like the author strip on the cover */
.strip, .wordmark {
  display: inline-block; background: var(--paper); color: var(--black);
  font-family: var(--f-type); text-transform: uppercase; letter-spacing: .2em;
  padding: .6em .8em .42em 1em; line-height: 1.2; text-decoration: none;
}

/* ---------- Letter tiles ---------- */

.tiles {
  display: inline-flex; flex-wrap: wrap; gap: .3em .55em; line-height: 1;
  font-size: 1.7rem; filter: drop-shadow(0 1px 1.5px rgba(0, 0, 0, .45));
}
.page--inner .tiles, .page--read .tiles { font-size: 1.45rem; }
.tw { display: inline-flex; align-items: center; white-space: nowrap; position: relative; }
.t {
  display: inline-block; font-style: normal; text-transform: uppercase; line-height: 1;
  font-family: var(--ff); font-weight: var(--fw, 400); font-size: var(--fs, 1em);
  background: var(--t-bg); color: var(--t-fg);
  padding: var(--pad, .14em .2em .1em);
  margin-inline: -.015em;
  clip-path: var(--cut);
  transform: translateY(var(--y, 0em)) rotate(calc(var(--r, 0deg) * var(--flip, 1) * (.55 + var(--k) * .45)));
}
/* four faces, so no two neighbours match */
.t:nth-child(4n+1) { --ff: var(--f-abril); --fw: 400; --fs: 1em; --pad: .12em .2em .1em; }
.t:nth-child(4n+2) { --ff: var(--f-cut-sans); --fw: 900; --fs: .88em; --pad: .2em .2em .16em; }
.t:nth-child(4n+3) { --ff: var(--f-cut-serif); --fw: 700; --fs: 1.04em; --pad: .06em .18em .1em; }
.t:nth-child(4n+4) { --ff: var(--f-type); --fw: 400; --fs: 1em; --pad: .26em .2em .02em; }
.tw:nth-child(even) .t:nth-child(4n+1) { --ff: var(--f-cut-serif); --fw: 700; --fs: 1.04em; --pad: .06em .18em .1em; }
.tw:nth-child(even) .t:nth-child(4n+2) { --ff: var(--f-type); --fw: 400; --fs: 1em; --pad: .26em .2em .02em; }
.tw:nth-child(even) .t:nth-child(4n+3) { --ff: var(--f-cut-sans); --fw: 900; --fs: .88em; --pad: .2em .2em .16em; }
.tw:nth-child(even) .t:nth-child(4n+4) { --ff: var(--f-abril); --fw: 400; --fs: 1em; --pad: .12em .2em .1em; }
.tw:nth-child(even) { --flip: -1; }
/* tilt and nudge, a cycle of seven */
.t:nth-child(7n+1) { --r: -4deg; --y: .03em; }
.t:nth-child(7n+2) { --r: 3deg; --y: -.05em; }
.t:nth-child(7n+3) { --r: -2deg; --y: .06em; }
.t:nth-child(7n+4) { --r: 5deg; --y: -.02em; }
.t:nth-child(7n+5) { --r: -3deg; --y: .05em; }
.t:nth-child(7n+6) { --r: 2deg; --y: -.06em; }
.t:nth-child(7n+7) { --r: -5deg; --y: .02em; }
/* scissor cuts, a cycle of five */
.t:nth-child(5n+1) { --cut: polygon(3% 4%, 52% 0, 97% 2%, 100% 95%, 46% 100%, 2% 97%); }
.t:nth-child(5n+2) { --cut: polygon(0 2%, 96% 5%, 100% 48%, 98% 100%, 4% 96%); }
.t:nth-child(5n+3) { --cut: polygon(5% 0, 100% 3%, 95% 97%, 40% 100%, 0 98%, 2% 44%); }
.t:nth-child(5n+4) { --cut: polygon(0 6%, 60% 2%, 100% 0, 97% 100%, 3% 95%); }
.t:nth-child(5n+5) { --cut: polygon(2% 0, 98% 4%, 96% 55%, 100% 98%, 6% 100%, 0 50%); }
/* about one in three inverted */
.tw:nth-child(odd) .t:nth-child(3n+2),
.tw:nth-child(even) .t:nth-child(3n+3) { background: var(--ti-bg); color: var(--ti-fg); box-shadow: var(--ti-frame); }
.t--p { --pad: .1em .12em .1em !important; }

.kicker { margin-bottom: 1.1rem; }

/* The halo. Floats over the first letter of a tile word. */
.halo {
  position: absolute; left: -.1em; top: -.4em; width: 1.3em; height: auto; max-width: none;
  transform: rotate(-9deg); overflow: visible; z-index: 2;
  filter: drop-shadow(0 .03em .05em rgba(0,0,0,.6));
}
/* A short bright dash that runs round the ring now and then. Hidden unless motion is on. */
.halo__glint { opacity: 0; stroke-dasharray: .1 .9; }

/* ---------- Buttons ---------- */

.btn {
  display: inline-flex; align-items: center; justify-content: center; min-height: 52px;
  padding: .85em 1.5em .7em; font-family: var(--f-type); text-transform: uppercase;
  letter-spacing: .14em; font-size: .98rem; line-height: 1.15; text-align: center; text-decoration: none;
  border: 2px solid transparent; border-radius: 2px 6px 3px 7px;
  transform: rotate(calc(var(--bt, -1.2deg) * var(--k)));
}
.btn--halo { background: var(--halo); color: var(--black); box-shadow: 5px 5px 0 var(--paper); }
.on-paper .btn--halo, .on-news .btn--halo, .scrap .btn--halo, .sheet .btn--halo { box-shadow: 5px 5px 0 var(--black); border-color: var(--black); }
.btn--line { --bt: 1deg; border-color: currentColor; color: var(--ink, var(--paper)); }
.btn--big { font-size: 1.15rem; padding: 1em 2em .85em; }
.btn--halo:hover { background: var(--paper); box-shadow: 5px 5px 0 var(--halo); }
.on-paper .btn--halo:hover, .on-news .btn--halo:hover, .scrap .btn--halo:hover, .sheet .btn--halo:hover { background: var(--black); color: var(--paper); box-shadow: 5px 5px 0 var(--halo); }
.on-black .btn--line:hover { background: var(--paper); color: var(--black); border-color: var(--paper); }
.on-paper .btn--line:hover, .on-news .btn--line:hover, .scrap .btn--line:hover { background: var(--black); color: var(--paper); border-color: var(--black); }
.on-black .btn--halo:focus-visible { outline-color: var(--halo); outline-offset: 9px; }
.ctas { display: grid; gap: 18px; margin-top: 2rem; }
@media (min-width: 560px) { .ctas { display: flex; flex-wrap: wrap; gap: 22px 26px; align-items: center; } }

/* ---------- Paper things: scraps, prints, tape ---------- */

.scrap {
  position: relative; background: var(--newsprint); padding: 1.3rem 1.3rem 1.1rem;
  transform: rotate(calc(var(--tilt, 0deg) * var(--k)));
  box-shadow: 0 2px 0 rgba(0,0,0,.08), 0 10px 22px -12px rgba(0,0,0,.55);
  border-radius: 1px 4px 2px 5px;
}
.scrap--white { background: var(--white); }
.on-news .scrap:not(.scrap--white) { background: var(--paper); }

.print, .cover {
  position: relative; display: block; width: fit-content;
  transform: rotate(calc(var(--tilt, 0deg) * var(--k)));
}
.print {
  background: var(--white); padding: 10px 10px 30px; text-decoration: none;
  box-shadow: 0 1px 0 rgba(0,0,0,.2), 0 16px 30px -14px rgba(0,0,0,.8);
}
.on-paper .print, .on-news .print, .sheet .print { box-shadow: 0 0 0 1px rgba(14,14,14,.12), 0 16px 26px -16px rgba(0,0,0,.6); }
.print img { width: 100%; }
.print figcaption, .print__cap {
  display: block; font-family: var(--f-type); font-size: .88rem; line-height: 1.35; letter-spacing: .02em;
  padding: 10px 2px 0; margin-bottom: -18px; color: var(--black);
}
.cover { box-shadow: 0 0 0 1px rgba(247,243,234,.22), 0 20px 36px -16px rgba(0,0,0,.9); }
.on-paper .cover, .on-news .cover { box-shadow: 0 0 0 1px rgba(14,14,14,.25), 0 16px 26px -14px rgba(0,0,0,.6); }
.cover img { width: 100%; }
.bw { filter: grayscale(1) contrast(1.15); }

.taped::before, .taped-2::after {
  content: ""; position: absolute; z-index: 3; width: 92px; height: 28px;
  background: var(--tape);
  background-image: linear-gradient(90deg, rgba(255,255,255,.22) 0 6%, transparent 6% 94%, rgba(255,255,255,.22) 94%);
  clip-path: polygon(0 8%, 3% 30%, 0 52%, 3% 74%, 0 100%, 100% 96%, 97% 70%, 100% 46%, 97% 22%, 100% 0);
  box-shadow: inset 0 0 0 1px rgba(14,14,14,.06);
  pointer-events: none;
}
.taped::before { top: -10px; left: -30px; transform: rotate(-36deg); }
.taped-2::after { bottom: -8px; right: -30px; transform: rotate(-40deg); }
.taped--top::before { top: -14px; left: calc(50% - 46px); transform: rotate(-3deg); }
@media (max-width: 759px) {
  .taped::before, .taped-2::after { width: 66px; height: 22px; }
  .taped::before { left: -18px; }
  .taped-2::after { right: -18px; }
  .taped--top::before { left: calc(50% - 33px); }
}

/* Label maker strips */
.labels { display: flex; flex-wrap: wrap; gap: .85rem .9rem; margin-top: 1.2rem; }
.labels li, .labelmaker {
  font-family: var(--f-type); text-transform: uppercase; letter-spacing: .16em; font-size: .92rem;
  line-height: 1.25; color: var(--paper);
  background: linear-gradient(#2E2D2A, #171716 45%, #1F1E1C);
  padding: .78em 1em .6em; border-radius: 2px;
  box-shadow: inset 0 1px 0 rgba(247,243,234,.28), inset 0 -1px 0 rgba(0,0,0,.6), 0 0 0 1px rgba(247,243,234,.16), 0 6px 10px -6px #000;
  text-shadow: 0 1px 0 rgba(0,0,0,.8), 0 -1px 0 rgba(255,255,255,.25);
}
/* Topics are things to read, not press. Flat tape, cut to the length of the words, with a notched end.
   Only the cover flip on Books keeps the raised button look. */
.labels li, .door .labelmaker {
  font-size: .84rem; letter-spacing: .14em; padding: .62em 1.15em .46em .85em;
  box-shadow: none; border-radius: 0;
  clip-path: polygon(0 0, 100% 0, calc(100% - .4em) 50%, 100% 100%, 0 100%);
}
/* The labels on the home doors name the door. They are not pressable, so they are flat tape too. */
.door .labelmaker { min-height: 0; background: var(--black); text-shadow: none; }
.on-black .labels li { background: var(--paper); color: var(--black); text-shadow: none; }
.labels li:nth-child(4n+1) { transform: rotate(calc(-1.6deg * var(--k))); }
.labels li:nth-child(4n+2) { transform: rotate(calc(1.2deg * var(--k))) translateY(3px); }
.labels li:nth-child(4n+3) { transform: rotate(calc(-.6deg * var(--k))); }
.labels li:nth-child(4n+4) { transform: rotate(calc(2deg * var(--k))) translateY(-2px); }
/* Tidy version for the full topic list: a straight grid a planner can scan. */
.labels--tidy { gap: .55rem .6rem; margin-top: .8rem; }
.labels--tidy li { transform: none !important; }
.themes { display: grid; gap: 1.9rem clamp(28px, 4vw, 56px); margin-top: 2.2rem; }
.themes h3 { font-family: var(--f-type); text-transform: uppercase; letter-spacing: .2em; font-size: .85rem; line-height: 1.3; color: var(--muted); }
@media (min-width: 760px) { .themes { grid-template-columns: 1fr 1fr; } }
.nudge { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 30px; margin-top: clamp(34px, 5vw, 52px); }
.nudge__q { font-family: var(--f-abril); font-size: 1.5rem; line-height: 1.15; }

/* Marker strokes */
.stroke { max-width: none; fill: none; stroke: var(--marker); stroke-linecap: round; stroke-linejoin: round; overflow: visible; pointer-events: none; }
.stroke path { fill: none; stroke-dasharray: 1; stroke-dashoffset: 0; }
.underlined { position: relative; display: inline-block; white-space: nowrap; }
.underlined .stroke { position: absolute; left: -2%; bottom: -.3em; width: 104%; height: .36em; stroke-width: 4; }
.circled { position: relative; display: inline-block; isolation: isolate; }
.circled .stroke { position: absolute; z-index: -1; left: -9%; top: -13%; width: 118%; height: 132%; stroke-width: 5; }

mark {
  color: var(--black); padding: .08em .2em; margin: 0 -.1em;
  background: linear-gradient(101deg, transparent .2em, var(--halo) .32em, var(--halo) calc(100% - .34em), transparent calc(100% - .16em));
  -webkit-box-decoration-break: clone; box-decoration-break: clone; border-radius: .5em .2em .6em .25em;
}

/* Sticky note */
.sticky {
  background: var(--halo); color: var(--black); font-weight: 500; font-size: 1.15rem; line-height: 1.4;
  width: min(100%, 19rem); padding: 2.1rem 1.5rem 1.7rem; position: relative;
  transform: rotate(calc(var(--tilt, -2deg) * var(--k)));
  box-shadow: 0 18px 20px -14px rgba(0,0,0,.9);
  background-image: linear-gradient(rgba(14,14,14,.13), rgba(14,14,14,0) 22px);
  border-bottom-right-radius: 34px 6px;
}
.on-paper .sticky, .on-news .sticky { box-shadow: 0 18px 20px -16px rgba(0,0,0,.6); }

/* Typed sheet */
.sheet {
  position: relative; background: var(--white); width: min(100%, calc(62ch + 2 * clamp(22px, 6vw, 76px)));
  margin-inline: auto; padding: clamp(44px, 6vw, 80px) clamp(22px, 6vw, 76px) clamp(32px, 5vw, 60px);
  transform: rotate(calc(var(--tilt, .6deg) * var(--k)));
  box-shadow: 0 1px 0 rgba(0,0,0,.12), 0 24px 40px -26px rgba(14,14,14,.5), 6px 7px 0 -2px var(--newsprint), 6px 7px 0 -1px rgba(14,14,14,.12);
}
.on-news .sheet { box-shadow: 0 1px 0 rgba(0,0,0,.12), 0 24px 40px -26px rgba(14,14,14,.5), 6px 7px 0 -2px var(--paper), 6px 7px 0 -1px rgba(14,14,14,.12); }
.sheet h2 { margin-bottom: .7em; }
.sheet > p:not(.kicker) { max-width: 62ch; }
.sheet > p + p { margin-top: 1.05em; }
.clip { position: absolute; top: -26px; left: clamp(26px, 9%, 90px); width: 34px; height: 82px; fill: none; stroke: #8E8A80; stroke-width: 3.5; stroke-linecap: round; transform: rotate(7deg); filter: drop-shadow(1px 2px 1px rgba(0,0,0,.3)); }

/* Quotes */
.quote-big p {
  font-family: var(--f-abril); font-size: clamp(1.9rem, 4.4vw, 3.4rem); line-height: 1.06; letter-spacing: -.01em;
  text-wrap: balance;
}
.quote-big--wide p { max-width: 15em; }
.pull .circled { margin: 0 .3em; }
.quote-big footer, .pull footer, .quote-scrap footer {
  font-family: var(--f-type); text-transform: uppercase; letter-spacing: .16em; font-size: .82rem;
  line-height: 1.4; color: var(--muted); margin-top: 1.2rem;
}
.pull { border-left: 5px solid var(--halo); padding: .1em 0 .1em 1.1em; margin: 1.3em 0; max-width: 60ch; }
.pull p { font-style: italic; }
.pull footer { margin-top: .6rem; }
.quote-scrap { padding: 1.7rem 1.6rem 1.3rem; }
.quote-scrap p { font-family: var(--f-abril); font-size: clamp(1.25rem, 2vw, 1.55rem); line-height: 1.22; }

/* Index cards and the fortune slip */
.card {
  --lh: 1.875rem;
  position: relative; background-color: var(--white); padding: calc(var(--lh) * 1.6) clamp(20px, 4vw, 40px) var(--lh);
  line-height: var(--lh); font-size: 1.0625rem;
  background-image: linear-gradient(var(--newsprint), var(--newsprint)), repeating-linear-gradient(transparent 0 calc(var(--lh) - 1px), var(--newsprint) calc(var(--lh) - 1px) var(--lh));
  background-size: 100% 2px, 100% var(--lh);
  background-position: 0 calc(var(--lh) * 1.2), 0 calc(var(--lh) * .6 - .42rem);
  background-repeat: no-repeat, repeat-y;
  transform: rotate(calc(var(--tilt) * var(--k)));
  box-shadow: 0 1px 0 rgba(0,0,0,.14), 0 18px 28px -18px rgba(14,14,14,.55);
  border-radius: 3px;
}
.card p + p { margin-top: var(--lh); }
.card footer { font-family: var(--f-type); font-size: .85rem; letter-spacing: .08em; text-transform: uppercase; margin-top: var(--lh); line-height: var(--lh); color: var(--black); }
.slip {
  background: var(--white); font-family: var(--f-type); font-size: 1.0625rem; line-height: 1.5;
  padding: 1rem 1.3rem .8rem; width: min(96%, 30rem);
  transform: rotate(calc(var(--tilt) * var(--k)));
  box-shadow: 0 10px 16px -10px rgba(14,14,14,.6);
  clip-path: polygon(0 0, 100% 0, 98.6% 50%, 100% 100%, 0 100%, 1.4% 50%);
}
.cards { display: grid; margin-top: clamp(40px, 6vw, 64px); }
.card--rita { z-index: 1; }
.card--dawn { z-index: 2; margin-top: -14px; width: 94%; justify-self: end; }
.cards .slip { z-index: 3; margin-top: -10px; justify-self: start; }
@media (min-width: 900px) {
  .cards { grid-template-columns: repeat(12, 1fr); }
  .card--rita { grid-column: 1 / 8; grid-row: 1; padding-right: 70px; }
  .card--dawn { grid-column: 8 / 13; grid-row: 1; margin: 130px 0 0 -44px; width: auto; align-self: start; }
  .cards .slip { grid-column: 2 / 8; grid-row: 2; margin-top: -26px; }
}
/* Calm version for inner pages: side by side, no overlap */
.cards--tidy { gap: 28px; }
.cards--tidy .card--dawn { margin: 0; width: auto; }
.cards--tidy .slip { margin-top: 0; }
@media (min-width: 900px) {
  .cards--tidy { gap: 34px 40px; }
  .cards--tidy .card--rita { grid-column: 1 / 8; padding-right: clamp(20px, 4vw, 40px); }
  .cards--tidy .card--dawn { grid-column: 8 / 13; margin: 0; }
  .cards--tidy .slip { grid-column: 1 / 8; margin-top: 0; }
}

/* ---------- Header ---------- */

.site-header { padding: 18px 0 6px; position: relative; z-index: 20; }
.site-header__in { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px 24px; }
.wordmark { font-size: 1rem; transform: rotate(-1.2deg); min-height: 44px; display: inline-flex; align-items: center; border-radius: 1px 3px 2px 4px; }
a.wordmark:hover { background: var(--halo); }
.nav ul { display: flex; flex-wrap: wrap; align-items: center; gap: 2px clamp(10px, 1.7vw, 24px); }
.nav a {
  display: inline-flex; align-items: center; min-height: 44px; padding: .3em .2em .1em;
  font-family: var(--f-type); text-transform: uppercase; letter-spacing: .15em; font-size: .86rem;
  text-decoration: none;
}
.nav a:not(.nav__cta):hover, .nav a[aria-current]:not(.nav__cta) { text-decoration: underline; text-decoration-color: var(--halo); text-decoration-thickness: 3px; text-underline-offset: .4em; }
.nav .nav__cta {
  background: var(--halo); color: var(--black); padding: .55em 1em .4em; transform: rotate(2deg);
  border-radius: 2px 5px 2px 6px; box-shadow: 3px 3px 0 var(--paper); margin-left: 6px;
}
.nav .nav__cta:hover { background: var(--paper); box-shadow: 3px 3px 0 var(--halo); }
.nav .nav__cta:focus-visible { outline-offset: 7px; }
.menu-btn {
  display: none; min-height: 44px; min-width: 44px; padding: .5em 1em .35em;
  font-family: var(--f-type); text-transform: uppercase; letter-spacing: .16em; font-size: .9rem;
  background: transparent; color: var(--paper); border: 2px solid var(--paper); border-radius: 2px 5px 3px 6px;
  cursor: pointer;
}
.menu-btn[aria-expanded="true"] { background: var(--paper); color: var(--black); }
.hdr-cta { display: none; }
/* Phones and tablets: a slim bar that stays put, with Invite always one tap away.
   Invite sits in the bar, so it leaves the menu list. Without the script the header is a plain list at the top. */
@media (max-width: 1079px) {
  .js .site-header { position: sticky; top: 0; padding: 8px 0; box-shadow: 0 1px 0 rgba(247,243,234,.2), 0 12px 18px -14px rgba(0,0,0,.75); }
  .js .site-header__in { gap: 0 10px; }
  .js .wordmark { margin-right: auto; font-size: .9rem; letter-spacing: .16em; padding: .6em .7em .42em .8em; }
  .js .hdr-cta {
    display: inline-flex; align-items: center; min-height: 44px; padding: .5em .85em .32em;
    font-family: var(--f-type); text-transform: uppercase; letter-spacing: .13em; font-size: .86rem; line-height: 1.1;
    text-decoration: none; white-space: nowrap; background: var(--halo); color: var(--black);
    border-radius: 2px 5px 2px 6px; box-shadow: 3px 3px 0 var(--paper); transform: rotate(1.2deg); margin-right: 4px;
  }
  .js .hdr-cta:hover { background: var(--paper); box-shadow: 3px 3px 0 var(--halo); }
  .js .hdr-cta:focus-visible { outline-offset: 6px; }
  .js .menu-btn { display: inline-block; min-width: 5.9em; }
  .js .nav { display: none; width: 100%; max-height: calc(100vh - 62px); max-height: calc(100dvh - 62px); overflow-y: auto; overscroll-behavior: contain; }
  .js .nav.is-open { display: block; }
  .js .nav ul { flex-direction: column; align-items: flex-start; gap: 0; padding: 6px 0 4px; }
  .js .nav li { width: 100%; }
  .js .nav a:not(.nav__cta) { width: 100%; border-bottom: 1px dashed rgba(247,243,234,.3); min-height: 50px; }
  .js .nav .nav__invite { display: none; }
}
/* Phones. The button always says "Invite Judy". The room comes from
   the wordmark, which stacks into a two line name tag, never from the button's words. */
@media (max-width: 479px) {
  .js .site-header__in { gap: 0 8px; }
  .js .wordmark {
    font-size: .8rem; letter-spacing: .12em; line-height: 1.12; padding: .5em .7em .34em .75em;
    display: inline-block; min-height: 44px; width: min-content; white-space: normal;
  }
  .js .hdr-cta { font-size: .82rem; letter-spacing: .1em; padding-inline: .75em; margin-right: 2px; }
  .js .menu-btn { min-width: 5.3em; padding-inline: .6em; font-size: .84rem; letter-spacing: .13em; }
}
@media (max-width: 349px) {
  .js .site-header__in { gap: 0 6px; }
  .js .wordmark { font-size: .76rem; letter-spacing: .1em; padding-inline: .6em .55em; }
  .js .hdr-cta { font-size: .78rem; letter-spacing: .07em; padding-inline: .6em; box-shadow: 2px 2px 0 var(--paper); }
  .js .menu-btn { min-width: 5em; padding-inline: .45em; font-size: .78rem; letter-spacing: .1em; }
}

/* ---------- Home: hero ---------- */

.hero { padding: clamp(40px, 6vw, 76px) 0 clamp(80px, 9vw, 120px); min-height: 88vh; display: grid; align-items: center; }
.hero__grid { display: grid; gap: 64px; }
.hero__left { container-type: inline-size; min-width: 0; }
.hero__name { line-height: 1; font-size: inherit; letter-spacing: 0; }
.tiles--hero {
  display: flex; flex-direction: column; align-items: flex-start; flex-wrap: nowrap; gap: .1em;
  font-size: clamp(2.5rem, 12.6vw, 3.4rem);
  font-size: clamp(2.5rem, 13.4cqi, 8.4rem);
}
.tiles--hero .tw:nth-child(2) { margin-left: -.03em; }
.tiles--hero .tw:first-child { margin-left: .12em; }
.hero__eyebrow { margin-top: 1.5rem; font-size: clamp(.8rem, 3.4vw, 1.02rem); transform: rotate(calc(-1.4deg * var(--k))); }
.hero__line {
  margin-top: 1.5rem; font-family: var(--f-abril); font-size: clamp(1.65rem, 2.9vw, 2.2rem); line-height: 1.15;
  max-width: 17em; text-wrap: balance;
}
.hero__lede { margin-top: 1.2rem; max-width: 34em; color: var(--paper); }
.hero__pile { position: relative; width: 76%; margin: 0 6% 0 auto; padding-bottom: 12%; }
.hero__portrait { width: 100%; }
.hero__stage { position: absolute; left: -24%; bottom: 0; width: 58%; z-index: 2; padding: 7px 7px 20px; }
@media (min-width: 560px) { .hero__pile { width: min(60%, 360px); margin-inline: auto; } }
@media (min-width: 960px) {
  .hero__grid { grid-template-columns: 1.45fr 1fr; gap: clamp(40px, 6vw, 90px); align-items: center; }
  .hero__pile { width: min(100%, 400px); margin: 0 0 0 auto; padding-bottom: 16%; }
  .hero__stage { left: -30%; width: 60%; }
}

/* ---------- Home: three doors ---------- */

.doors { padding: clamp(64px, 8vw, 104px) 0 clamp(72px, 9vw, 116px); }
.doors__grid { display: grid; gap: 34px; }
.door { display: flex; flex-direction: column; padding: 1.6rem 1.5rem 1rem; }
.door .labelmaker { align-self: flex-start; margin: -2.4rem 0 1.1rem -.5rem; transform: rotate(-2deg); }
.door h2, .door h3 { font-size: clamp(1.7rem, 2.6vw, 2.1rem); margin-bottom: .45em; }
.door p:not(.door__go) { flex: 1; }
.door__go { margin-top: .5rem; }
@media (min-width: 820px) { .doors__grid { grid-template-columns: repeat(3, 1fr); gap: clamp(22px, 3vw, 40px); align-items: stretch; } }

/* ---------- Home: speaking ---------- */

.sec { padding: clamp(74px, 10vw, 130px) 0 clamp(80px, 10vw, 130px); }
.speaking__grid { display: grid; gap: 54px; }
.speaking__text h2 { margin-bottom: .6em; }
.speaking__text p { max-width: 34em; }
.pile { display: grid; grid-template-columns: repeat(12, 1fr); width: min(100%, 540px); margin-inline: auto; }
.pile .print { width: auto; }
.pile__a { grid-column: 1 / 9; grid-row: 1; }
.pile__b { grid-column: 7 / 13; grid-row: 1 / 3; margin-top: 34%; z-index: 2; align-self: start; }
.pile__c { grid-column: 2 / 8; grid-row: 2; margin-top: -8%; z-index: 1; }
.topics { margin-top: clamp(56px, 7vw, 90px); }
.topics__label { font-family: var(--f-marker); font-size: clamp(1.35rem, 2.4vw, 1.7rem); line-height: 1.15; color: var(--paper); display: flex; align-items: flex-end; gap: 12px; transform: rotate(-1.5deg); transform-origin: left; }
.topics__label .stroke { width: 54px; height: 40px; flex: none; stroke-width: 4; margin-bottom: -18px; }
.topics .labels { margin-bottom: 1.3rem; margin-top: 1.7rem; }
.speaking__end { display: grid; gap: 44px; margin-top: clamp(44px, 6vw, 70px); align-items: center; }
@media (min-width: 700px) { .speaking__end { grid-template-columns: 19rem 1fr; gap: clamp(40px, 7vw, 100px); } }
@media (min-width: 980px) { .speaking__grid { grid-template-columns: 1fr 1fr; gap: clamp(40px, 6vw, 84px); align-items: center; } }

/* ---------- Home: story ---------- */

.story__grid { display: grid; gap: 60px; align-items: center; }
.story__grid .sheet { margin-inline: 0; width: 100%; }
@media (min-width: 1000px) { .story__grid { grid-template-columns: .82fr 1fr; gap: clamp(40px, 6vw, 90px); } }

/* ---------- Home: the shelf ---------- */

/* Four covers in one row at every width. On phones the covers carry their own titles. */
.shelf { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; margin-top: clamp(40px, 6vw, 70px); align-items: end; }
.shelf__book { display: block; text-decoration: none; }
.shelf__book .cover { width: 100%; }
.shelf__title { display: block; font-family: var(--f-abril); font-size: clamp(1.25rem, 2vw, 1.6rem); line-height: 1.12; margin-top: 1.1rem; }
.shelf__book:hover .shelf__title { text-decoration: underline; text-decoration-color: var(--halo); text-decoration-thickness: 3px; text-underline-offset: .2em; }
.shelf__note { display: block; font-family: var(--f-type); text-transform: uppercase; letter-spacing: .12em; font-size: .8rem; line-height: 1.4; color: var(--grey); margin-top: .5em; }
.shelf__book:focus-visible { outline-offset: 10px; }
.books__foot { margin-top: clamp(40px, 6vw, 64px); display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 28px; color: var(--muted); }
@media (max-width: 559px) {
  .shelf__title, .shelf__note { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
  .shelf .taped::before { display: none; }
  .shelf__book { padding: 6px 0; }
}
@media (min-width: 560px) { .shelf { gap: clamp(20px, 4vw, 56px); } }

@media (min-width: 560px) { .phone-only { display: none; } }
/* The home page is a taste of each section. On phones it is a smaller taste. */
@media (max-width: 559px) {
  .page--home .wide-only { display: none; }
  .page--home .sec { padding-block: 64px 68px; }
  .page--home .pile { grid-template-columns: repeat(12, 1fr); width: 100%; }
  .page--home .pile__a { grid-column: 1 / 9; }
  .page--home .pile__b { grid-column: 7 / 13; grid-row: 1; margin-top: 30%; }
  .speaking__grid { gap: 40px; }
  .duo__grid { gap: 64px; }
  .story__grid { gap: 44px; }
}

/* ---------- Home: Legacy 5000 and Journal ---------- */

.duo__grid { display: grid; gap: 84px; }
.duo h2 { font-size: clamp(1.9rem, 3.6vw, 2.8rem); margin-bottom: .6em; }
.legacy__img { width: min(64%, 270px); margin: 0 0 40px 10px; }
.legacy p { max-width: 32em; }
.legacy .btn { margin-top: 1.4rem; }
.posts { display: grid; gap: 34px; margin: 1.6rem 0 1.4rem; }
.post { display: grid; grid-template-columns: minmax(0, 150px) 1fr; gap: 20px; align-items: center; }
.post__print { width: 100%; padding: 8px 8px 12px; }
.post__print img { aspect-ratio: 1; object-fit: cover; }
.post__print h3, .post__print .post__t { display: block; font-family: var(--f-type); font-size: .9rem; line-height: 1.3; letter-spacing: .02em; padding-top: 10px; color: var(--black); }
.post__print:hover h3, .post__print:hover .post__t { background: var(--halo); }
.post > p { color: var(--muted); font-size: 1.0625rem; line-height: 1.5; }
.on-black .print:focus-visible { outline-color: var(--halo); outline-offset: 5px; }
@media (min-width: 560px) {
  .post { grid-template-columns: 184px 1fr; gap: 28px; }
  .duo .post:nth-child(2) { grid-template-columns: 1fr 184px; }
  .duo .post:nth-child(2) .post__print { order: 2; }
}
@media (min-width: 980px) {
  .duo .post + .post { margin-top: -26px; }
  .duo__grid { grid-template-columns: 1fr 1.06fr; gap: clamp(50px, 7vw, 100px); }
}

/* ---------- Closing ---------- */

.close { padding: clamp(84px, 11vw, 150px) 0 clamp(80px, 10vw, 130px); container-type: inline-size; }
.tiles--close { font-size: clamp(2.4rem, 11.4vw, 7.5rem) !important; gap: .22em .45em; }
.close__p { font-size: clamp(1.2rem, 2vw, 1.45rem); max-width: 27em; margin-top: 2.2rem; }
.close--quiet { padding: clamp(64px, 8vw, 104px) 0 clamp(60px, 8vw, 96px); }
.close--quiet .close__p { margin-top: 1.1rem; font-size: 1.2em; }


/* ---------- Inner pages ---------- */

/* The way back, above a post's headline */
.crumb { margin: -.6rem 0 .5rem; }
.crumb .tlink::before { content: ""; display: inline-block; width: .5em; height: .5em; margin-right: .6em; border-left: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: rotate(45deg); vertical-align: .12em; }

/* Speaking: what a planner needs to know, and a bio to lift */
.facts { display: grid; gap: 30px; align-items: start; }
.facts .plain h3 { font-family: var(--f-type); text-transform: uppercase; letter-spacing: .16em; font-size: .85rem; line-height: 1.3; color: var(--muted); margin-bottom: .4em; }
.bio { padding: 1.7rem 1.5rem 1.2rem; max-width: 38rem; }
.bio__text { font-family: var(--f-type); font-size: 1rem; line-height: 1.6; margin-top: .2rem; }
.copy-btn {
  display: none; align-items: center; min-height: 44px; margin-top: 1rem; padding: .55em 1em .4em; cursor: pointer;
  font-family: var(--f-type); text-transform: uppercase; letter-spacing: .14em; font-size: .86rem;
  background: transparent; color: var(--black); border: 2px solid var(--black); border-radius: 2px 5px 3px 6px;
}
.js .copy-btn { display: inline-flex; }
.copy-btn:hover, .copy-btn.is-done { background: var(--black); color: var(--paper); }
@media (min-width: 900px) { .facts { grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); gap: clamp(40px, 6vw, 90px); } }

.page-head { padding: clamp(36px, 5vw, 64px) 0 clamp(70px, 8vw, 104px); }
.page-head__grid { display: grid; gap: 54px; align-items: center; }
.page-head .lede { color: var(--paper); }
.page-head__print { width: min(78%, 360px); margin-inline: auto; }
.page-head__meta { font-family: var(--f-type); font-size: .95rem; letter-spacing: .04em; color: var(--grey); margin-top: 1.2rem; }
@media (min-width: 900px) {
  .page-head__grid--split { grid-template-columns: 1.35fr 1fr; gap: clamp(40px, 6vw, 90px); }
  .page-head__print { width: min(100%, 400px); margin: 0 0 0 auto; }
}

.band { padding: clamp(60px, 8vw, 108px) 0; }
.band--tight { padding: clamp(48px, 6vw, 80px) 0; }
.split { display: grid; gap: 30px; }
.split > * { min-width: 0; }
@media (min-width: 900px) {
  .split { grid-template-columns: minmax(0, .8fr) minmax(0, 1.35fr); gap: clamp(40px, 6vw, 96px); align-items: start; }
}
.prose > p, .prose > ul, .prose > ol { max-width: 62ch; }
.prose > * + * { margin-top: 1.05em; }
.prose h2 { margin-bottom: .5em; }

/* Plain lists on paper */
.plain { display: grid; gap: 0; border-top: 2px solid var(--black); }
.plain > li { padding: 1.05rem 0 .95rem; border-bottom: 1px dashed rgba(14,14,14,.4); }
.plain h3 { font-size: 1.4rem; margin-bottom: .25em; }
.plain p { max-width: 56ch; }

/* Numbered steps, the numbers in marker */
.steps { counter-reset: s; display: grid; gap: 1.3rem; }
.steps > li { counter-increment: s; display: grid; grid-template-columns: 2.6rem 1fr; gap: .6rem; align-items: start; max-width: 60ch; }
.steps > li::before { content: counter(s); font-family: var(--f-marker); font-size: 2rem; line-height: 1; color: var(--marker-text); transform: rotate(-6deg); }
.steps strong { display: block; font-weight: 700; }

/* Photo rows */
.prints { display: grid; gap: 40px; margin-top: clamp(36px, 5vw, 56px); align-items: start; }
.prints .print { width: 100%; margin: 0; }
@media (min-width: 760px) { .prints { grid-template-columns: .9fr 1fr 1.25fr; gap: clamp(24px, 3.5vw, 48px); } }

/* Books page */
.jump { display: grid; grid-template-columns: repeat(4, 1fr); gap: clamp(12px, 2.4vw, 26px); align-items: end; width: min(100%, 460px); margin-inline: auto; }
.jump a { display: block; }
.jump .cover { width: 100%; }
.jump a:focus-visible { outline-offset: 6px; }
@media (min-width: 900px) { .jump { margin: 0 0 0 auto; } }
.book { display: grid; gap: 34px; }
.book__cover { width: min(64%, 250px); margin-inline: auto; }
.book__cover .cover { width: 100%; }
.book h2 { margin-bottom: .1em; }
.format {
  font-family: var(--f-type); text-transform: uppercase; letter-spacing: .14em; font-size: .85rem;
  line-height: 1.4; color: var(--muted); margin: .5em 0 1.1em;
}
.book__text > p { max-width: 62ch; }
.book .ctas { margin-top: 1.6rem; }
@media (min-width: 760px) {
  .book { grid-template-columns: minmax(0, 250px) 1fr; gap: clamp(36px, 5vw, 72px); align-items: start; }
  .book__cover { width: 100%; margin: 6px 0 0; position: sticky; top: 88px; }
}
.alt { margin-top: 2.4rem; max-width: 34rem; padding: 1.5rem 1.6rem 1.2rem; }
.alt p + p { margin-top: .6em; }
.alt__label { margin-bottom: .7em; }
/* On phones the big cover is far above this card, so the card carries its own small Divine Dysfunction
   cover and the label is plain words. From 760px the cover sits beside the card and the label flips it. */
.alt__cover { display: none; }
@media (max-width: 759px) {
  .can-flip .alt__cover {
    display: block; float: right; width: 84px; height: auto; margin: -2.6rem -.3rem .5rem 1rem;
    transform: rotate(4deg); box-shadow: 0 0 0 1px rgba(14,14,14,.3), 0 10px 16px -10px rgba(0,0,0,.6);
  }
  .can-flip .alt button.labelmaker { display: none; }
}
@media (min-width: 760px) { .can-flip .alt [data-flip-label] { display: none; } }

/* The flip. Default, with no script or with reduced motion: both covers side by side. */
.flip { position: relative; transform: rotate(calc(var(--tilt, 0deg) * var(--k))); }
.flip__inner { display: flex; gap: 10px; }
.flip__face { width: calc(50% - 5px); box-shadow: 0 0 0 1px rgba(14,14,14,.3), 0 14px 24px -14px rgba(0,0,0,.6); }
.flip-hint { display: none; }
.labelplain { font-family: var(--f-type); text-transform: uppercase; letter-spacing: .16em; font-size: .88rem; color: var(--black); }
.can-flip .flip { perspective: 1400px; cursor: pointer; }
.can-flip .flip__inner { display: grid; gap: 0; transform-style: preserve-3d; transition: transform .6s cubic-bezier(.3, .1, .2, 1.15); }
.can-flip .flip__face { grid-area: 1 / 1; width: 100%; backface-visibility: hidden; -webkit-backface-visibility: hidden; }
.can-flip .flip__back { transform: rotateY(180deg); }
.can-flip .flip.is-flipped .flip__inner { transform: rotateY(180deg); }
.can-flip .flip-hint {
  display: flex; align-items: flex-end; gap: 6px; margin: 14px 0 0 30%;
  font-family: var(--f-marker); font-size: 1.25rem; line-height: 1; color: var(--marker-text);
  transform: rotate(-5deg);
}
button.flip-hint { background: none; border: 0; padding: 4px 8px 6px 0; min-height: 44px; cursor: pointer; }
button.flip-hint:hover span { background: var(--halo); color: var(--black); box-shadow: -.2em 0 0 var(--halo), .2em 0 0 var(--halo); }
.flip-hint svg { width: 52px; height: 38px; fill: none; stroke: var(--marker); stroke-width: 4; stroke-linecap: round; stroke-linejoin: round; }
.labelmaker { display: inline-flex; align-items: center; gap: .7em; min-height: 46px; border: 0; text-align: left; }
button.labelmaker { cursor: pointer; transform: rotate(-1.5deg); margin-left: -6px; }
button.labelmaker::after {
  content: ""; flex: none; width: 1.15em; height: 1.15em; border: 2px solid var(--halo); border-radius: 50%;
  border-right-color: transparent; transform: rotate(40deg); transition: transform .6s;
}
button.labelmaker[aria-pressed="true"] { background: linear-gradient(var(--halo), var(--halo)); color: var(--black); text-shadow: none; box-shadow: 0 0 0 2px var(--black), 0 6px 10px -6px #000; }
button.labelmaker[aria-pressed="true"]::after { border-color: var(--black); border-right-color: transparent; transform: rotate(220deg); }
button.labelmaker:hover { box-shadow: inset 0 1px 0 rgba(247,243,234,.28), 0 0 0 2px var(--halo), 0 6px 10px -6px #000; }
button.labelmaker[aria-pressed="true"]:hover { box-shadow: 0 0 0 2px var(--black), 3px 3px 0 2px var(--black); }

/* Journal list */
.posts--list { gap: 44px; margin: 0; }
.posts--list .post { align-items: start; }
.posts--list h2 { font-size: clamp(1.5rem, 2.6vw, 2rem); margin-bottom: .35em; }
.posts--list h2 a { text-decoration: none; }
.posts--list h2 a:hover { text-decoration: underline; text-decoration-color: var(--marker); text-decoration-thickness: 3px; text-underline-offset: .18em; }
.posts--list .post__print { padding: 8px 8px 22px; }
@media (min-width: 560px) { .posts--list .post { grid-template-columns: 200px 1fr; gap: 34px; } }
@media (min-width: 900px) { .posts--list .post { grid-template-columns: 230px 1fr; gap: 48px; } }

/* A journal post, set like a typed page */
.post-img { width: min(100%, 400px); margin: 0 auto clamp(34px, 5vw, 52px); }
.sheet--post { padding-top: clamp(50px, 6vw, 76px); }
.sheet--post .prose > p { max-width: none; }
.shout { font-family: var(--f-abril); font-size: clamp(1.6rem, 3.2vw, 2.2rem); line-height: 1.12; margin-block: 1.3em 1em !important; }
.sheet--post blockquote { border-left: 5px solid var(--halo); padding: .1em 0 .1em 1.1em; font-style: italic; }
.sheet--post blockquote cite { display: block; font-family: var(--f-type); font-style: normal; text-transform: uppercase; letter-spacing: .12em; font-size: .82rem; color: var(--ink-soft); margin-top: .5em; }
.sheet--post blockquote p cite { display: inline; margin-left: .4em; }
.letter { background: var(--paper); font-family: var(--f-type); font-size: 1rem; line-height: 1.6; padding: 1.5rem 1.4rem 1.2rem; transform: rotate(calc(-1.5deg * var(--k))); box-shadow: 0 10px 18px -14px rgba(14,14,14,.6); border-radius: 1px 4px 2px 5px; }
.letter__sign { text-align: right; }
.post-nav { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 0 28px; margin-top: clamp(34px, 5vw, 54px); border-top: 2px dashed rgba(14,14,14,.38); padding-top: 14px; }

/* ---------- Invite page: the inquiry form ---------- */

/* The form is a white sheet, set straight. Labels are typed, boxes are paper with a black rule.
   Yellow is the send button and the tick. Red is only for what needs fixing. */
@media (min-width: 900px) { .split--form { grid-template-columns: minmax(0, .72fr) minmax(0, 1.28fr); } }
.expect__h { font-family: var(--f-type); text-transform: uppercase; letter-spacing: .2em; font-size: .85rem; line-height: 1.3; color: var(--muted); margin: 2.2rem 0 1.1rem; }
.expect__fine { margin-top: 1.6rem; max-width: 40ch; }
.inq { padding: clamp(24px, 4vw, 44px) clamp(18px, 3.4vw, 42px) clamp(26px, 3.4vw, 40px); }
.inq__flag { font-family: var(--f-type); font-size: .95rem; line-height: 1.5; }
.inq__lead { color: var(--ink-soft); margin: .5rem 0 1.7rem; }
.inq fieldset { border: 0; padding: 0; margin: 0; min-width: 0; }
.inq fieldset + fieldset { margin-top: 2.1rem; padding-top: 1.9rem; border-top: 2px dashed rgba(14, 14, 14, .38); }
.inq legend { float: left; width: 100%; padding: 0; margin-bottom: 1.1rem; font-family: var(--f-abril); font-size: 1.5rem; line-height: 1.12; }
.fields { clear: both; display: grid; gap: 1.25rem 1.4rem; }
.field { min-width: 0; }
@media (min-width: 620px) {
  .fields { grid-template-columns: 1fr 1fr; align-items: start; }
  .field--full { grid-column: 1 / -1; }
}
.field label { display: block; font-family: var(--f-type); text-transform: uppercase; letter-spacing: .14em; font-size: .85rem; line-height: 1.35; margin-bottom: .45rem; }
.field__opt { color: var(--ink-soft); letter-spacing: .1em; }
.field input, .field select, .field textarea {
  display: block; width: 100%; min-height: 52px; margin: 0; padding: .7em .8em .62em;
  font: inherit; font-size: 1.0625rem; line-height: 1.4; color: var(--black);
  background: var(--paper); border: 2px solid var(--black); border-radius: 2px 6px 3px 7px;
  -webkit-appearance: none; appearance: none;
}
.field textarea { min-height: 9.5rem; resize: vertical; line-height: 1.5; }
.field select {
  padding-right: 2.7em; cursor: pointer;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 9' fill='none' stroke='%230E0E0E' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M1.5 1.5 7 7l5.5-5.5'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right .95em center; background-size: 14px 9px;
}
.field input:focus-visible, .field select:focus-visible, .field textarea:focus-visible {
  outline: 3px solid var(--black); outline-offset: 2px; background-color: var(--white); box-shadow: 5px 5px 0 var(--halo);
}
.field__hint { color: var(--ink-soft); font-size: 1rem; line-height: 1.4; margin-top: .45rem; }
.field__err { color: var(--marker-text); font-weight: 700; font-size: 1rem; line-height: 1.4; margin-top: .45rem; }
.field [aria-invalid="true"] { border-color: var(--marker-text); box-shadow: inset 5px 0 0 var(--marker-text); }
/* The tick box for Judy and Robert together */
.check { display: grid; grid-template-columns: 30px 1fr; column-gap: .85rem; align-items: start; }
.check input { grid-row: 1 / 3; width: 30px; height: 30px; min-height: 0; padding: 0; margin-top: .1rem; border-radius: 2px 5px 2px 5px; cursor: pointer; }
.check input:checked {
  background: var(--halo) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='none' stroke='%230E0E0E' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 10.5 8.5 15 16.5 4.5'/%3E%3C/svg%3E") center / 20px no-repeat;
}
.check label { font-family: var(--f-body); text-transform: none; letter-spacing: 0; font-size: 1.0625rem; font-weight: 700; line-height: 1.4; margin: 0; padding: .3rem 0 0; cursor: pointer; }
.check .field__hint { margin-top: .15rem; }
.inq__problem { color: var(--marker-text); font-weight: 700; margin-top: 1.6rem; }
.inq__problem:empty { display: none; }
.inq__send { margin-top: 1.9rem; }
.inq__send .btn { cursor: pointer; }
.inq__send .btn[aria-disabled="true"] { opacity: .6; cursor: default; }
/* Without the script nothing could handle the form, so the send button gives way to a plain note. */
html:not(.js) .inq__send { display: none; }
.inq__nojs { margin-top: 1.9rem; max-width: 46ch; }
.js .inq__nojs { display: none; }
.inq__result { margin-top: 2rem; padding: 1.4rem 1.4rem 1.3rem; background: var(--paper); border-left: 8px solid var(--halo); max-width: 40rem; }
.inq__result--bad { border-left-color: var(--marker); }
.inq__result h3 { font-size: 1.45rem; margin-bottom: .5em; }
.inq__result:focus-visible { outline: 3px solid var(--black); outline-offset: 4px; }
.inq__go { margin-top: 1.4rem; }

/* Connect page */
.routes { display: grid; gap: 36px; }
.route { display: flex; flex-direction: column; align-items: flex-start; padding: 1.7rem 1.6rem 1.3rem; }
.route h2 { font-size: clamp(1.6rem, 2.4vw, 2rem); margin-bottom: .45em; }
.route p { max-width: 44ch; }
.route > p:not(.eyebrow):not(.route__go) { flex: 1; }
.route__go { margin-top: 1.1rem; display: flex; flex-wrap: wrap; gap: 6px 26px; align-items: center; }
.route--lead { background: var(--white); }
@media (min-width: 760px) {
  .routes { grid-template-columns: 1fr 1fr; gap: clamp(28px, 3.4vw, 44px); }
  .route--lead { grid-column: 1 / -1; padding: 2.2rem 2.2rem 1.8rem; }
  .route--lead h2 { font-size: clamp(2rem, 3.6vw, 2.8rem); }
}
@media (min-width: 1040px) { .routes { grid-template-columns: repeat(3, 1fr); } .route--lead { grid-column: 1 / 3; } }

/* 404 */
.lost { min-height: 62vh; display: grid; align-items: center; padding: clamp(60px, 9vw, 120px) 0; }
.lost .tiles { font-size: clamp(2.2rem, 9vw, 5.4rem); }
.lost h1 { font-size: inherit; letter-spacing: 0; line-height: 1; }

/* ---------- Footer ---------- */

.site-footer { position: relative; padding: 0 0 34px; }
.scraps { width: 100%; height: 22px; }
.footer__grid { display: grid; gap: 34px; padding-top: 44px; }
.wordmark--foot { transform: rotate(-1.2deg); margin-bottom: 1.1rem; }
.footer__id p + p { margin-top: .3em; }
.footer__id { color: var(--grey); }
.footer__id a { color: var(--paper); display: inline-block; padding: .55em 0; text-decoration-color: var(--halo); }
.footer__col h2 { font-family: var(--f-type); text-transform: uppercase; letter-spacing: .2em; font-size: .88rem; line-height: 1.3; color: var(--grey); margin-bottom: .5rem; }
.footer__col a { display: inline-flex; align-items: center; min-height: 44px; min-width: 44px; text-decoration: none; }
.footer__col a:hover { text-decoration: underline; text-decoration-color: var(--halo); text-decoration-thickness: 2px; text-underline-offset: .2em; }
.footer__col ul { columns: 1; }
.footer__base { color: var(--grey); font-size: 1.0625rem; border-top: 1px dashed rgba(247,243,234,.3); padding-top: 22px; }
@media (min-width: 760px) {
  .footer__grid { grid-template-columns: 1.6fr 1fr 1fr; }
  .footer__base { grid-column: 1 / -1; }
}

/* ---------- Motion ---------- */

@media (prefers-reduced-motion: no-preference) {
  html { scroll-behavior: smooth; }

  /* hero tiles slapped down one at a time */
  .tiles--hero .t {
    animation: slap .42s cubic-bezier(.2, .9, .3, 1.2) backwards;
    animation-delay: calc(var(--i) * 60ms + 150ms);
  }
  @keyframes slap {
    0% { opacity: 0; transform: translateY(-.5em) scale(1.25) rotate(calc(var(--r) * var(--flip, 1) + 14deg)); }
    55% { opacity: 1; transform: translateY(var(--y, 0em)) scale(1) rotate(calc(var(--r) * var(--flip, 1) * 1.7)); }
    78% { transform: translateY(var(--y, 0em)) rotate(calc(var(--r) * var(--flip, 1) * .7)); }
    100% { opacity: 1; }
  }
  .tiles--hero .halo { animation: halo 1.5s ease-out 1s backwards; }
  @keyframes halo {
    0% { opacity: 0; transform: translateY(-.34em) rotate(-9deg); }
    50% { opacity: 1; transform: translateY(.035em) rotate(-9deg); }
    75% { transform: translateY(-.03em) rotate(-9deg); }
    100% { transform: translateY(0) rotate(-9deg); }
  }
  .hero .underlined .stroke path { animation: draw .7s ease-out 1.7s backwards; }
  @keyframes draw { from { stroke-dashoffset: 1; } }

  /* one small jiggle */
  .t { transition: transform .32s cubic-bezier(.3, 2.6, .5, 1); }
  .tiles:hover .t:nth-child(odd) { transform: translateY(var(--y, 0em)) rotate(calc(var(--r, 0deg) * var(--flip, 1) * (.55 + var(--k) * .45) + 1.6deg)); }
  .tiles:hover .t:nth-child(even) { transform: translateY(var(--y, 0em)) rotate(calc(var(--r, 0deg) * var(--flip, 1) * (.55 + var(--k) * .45) - 1.4deg)); }

  /* marker strokes draw themselves when they scroll into view */
  .js .draw path { stroke-dashoffset: 1; }
  .js .draw.is-drawn path { stroke-dashoffset: 0; transition: stroke-dashoffset .95s cubic-bezier(.5, .1, .3, 1) .15s; }
  .js .draw.is-drawn path + path { transition-duration: .3s; transition-delay: 1s; }

  /* prints lift and straighten */
  .print, .cover, .btn, .nav__cta, .labelmaker { transition: transform .25s ease, box-shadow .25s ease, background-color .2s ease, color .2s ease; }
  a.print:hover, a:hover > .cover, .page--home .print:hover, .page--home .cover:hover { transform: translateY(-6px) rotate(calc(var(--tilt, 0deg) * var(--k) * .6)); }
  .btn:hover { transform: rotate(0deg) translate(-1px, -1px); }
}

/* ---------- Motion, part two: pieces arrive as you scroll ----------
   Screen only, and only when motion is welcome. Everything here moves with opacity and the
   translate, rotate and scale properties, so the tilts set with transform are left alone and
   nothing changes layout. Distances are multiplied by --k, so inner pages move less than the
   home page and journal posts barely move.
   Pieces wait hidden only under .js. site.js adds .is-in when a piece nears the viewport.
   The selector list below is repeated in site.js (REVEAL). Change them together.
   Forms, the typed sheets and the gift thank you card are left out on purpose. */

@media screen and (prefers-reduced-motion: no-preference) {

  /* Taped on: prints, covers, scraps, cards, slips, sticky notes, label strips, steps, footer scraps */
  .js :is(
    .print:not(.hero__portrait, .hero__stage, .page-head__print),
    .cover:not(.page-head .cover),
    .scrap:not(form, .thanks),
    .card, .slip, .sticky, .letter,
    .labels > li,
    .split:not(.split--form, .split--give) .steps > li,
    .site-footer .scraps
  ) {
    transition:
      opacity .4s ease-out var(--d, 0ms),
      translate .6s cubic-bezier(.2, .9, .3, 1.12) var(--d, 0ms),
      rotate .6s cubic-bezier(.2, .9, .3, 1.12) var(--d, 0ms),
      scale .6s cubic-bezier(.2, .9, .3, 1.12) var(--d, 0ms),
      transform .25s ease, box-shadow .25s ease, background-color .2s ease, color .2s ease;

    &:not(.is-in) {
      opacity: 0;
      translate: var(--rv-x, 0px) var(--rv-y, calc(10px + 28px * var(--k)));
      rotate: calc(var(--rv-r, 5deg) * var(--k));
      scale: var(--rv-s, 1.03);
    }

    /* the tape goes on a beat after the piece lands */
    &.taped::before, &.taped-2::after {
      transition: opacity .2s ease-out calc(var(--d, 0ms) + .34s), translate .3s cubic-bezier(.3, 1.6, .5, 1) calc(var(--d, 0ms) + .34s), scale .3s cubic-bezier(.3, 1.6, .5, 1) calc(var(--d, 0ms) + .34s), rotate .3s ease;
    }
    &.taped-2::after { transition-delay: calc(var(--d, 0ms) + .46s), calc(var(--d, 0ms) + .46s), calc(var(--d, 0ms) + .46s), 0s; }
    &.taped:not(.is-in)::before, &.taped-2:not(.is-in)::after { opacity: 0; translate: 0 -10px; scale: 1.25; }
  }
  /* each kind arrives its own way */
  .js .card:nth-child(even), .js .route:nth-child(even), .js .door:nth-child(even), .js .post:nth-child(even) .print { --rv-r: -5deg; }
  .js .sticky { --rv-r: -9deg; --rv-y: -14px; --rv-s: 1.06; }
  .js .slip { --rv-x: calc(-30px * var(--k) - 8px); --rv-y: 0px; --rv-r: 0deg; --rv-s: 1; }
  /* label strips feed out of the label maker, one after another */
  .js .labels > li { --rv-x: -14px; --rv-y: 0px; --rv-r: 0deg; --rv-s: 1; transition-duration: .25s, .35s, .35s, .35s, .25s, .25s, .2s, .2s; }
  .js .split .steps > li { --rv-x: -12px; --rv-y: 0px; --rv-r: 0deg; --rv-s: 1; }
  .js .site-footer .scraps { --rv-y: -9px; --rv-r: 0deg; --rv-s: 1; }

  /* Tape lifts a little when you point at a piece */
  .taped::before, .taped-2::after { transition: rotate .3s ease, translate .3s ease; }
  a.taped:hover::before, a:hover > .taped::before, .page--home .taped:hover::before { rotate: calc(-9deg * var(--k)); translate: -2px -3px; }
  a.taped-2:hover::after, .page--home .taped-2:hover::after { rotate: calc(-9deg * var(--k)); translate: 2px 3px; }

  /* Tiles settle. On page heads they settle as the page opens, with no script needed. */
  .t:nth-child(2) { --n: 1; } .t:nth-child(3) { --n: 2; } .t:nth-child(4) { --n: 3; } .t:nth-child(5) { --n: 4; }
  .t:nth-child(6) { --n: 5; } .t:nth-child(7) { --n: 6; } .t:nth-child(8) { --n: 7; } .t:nth-child(n+9) { --n: 8; }
  .tw:nth-child(2) { --w: 4; } .tw:nth-child(3) { --w: 7; } .tw:nth-child(n+4) { --w: 10; }
  @keyframes settle {
    0% { opacity: 0; transform: translateY(calc(var(--y, 0em) - .32em)) scale(1.14) rotate(calc(var(--r, 0deg) * var(--flip, 1) + 10deg)); }
    60% { opacity: 1; transform: translateY(var(--y, 0em)) scale(1) rotate(calc(var(--r, 0deg) * var(--flip, 1) * 1.25)); }
  }
  :is(.page-head, .lost) .tiles .t {
    animation: settle .36s cubic-bezier(.2, .9, .3, 1.2) backwards;
    animation-delay: calc((var(--n, 0) + var(--w, 0)) * 38ms + 120ms);
  }
  .js .tiles:not(.tiles--hero, .page-head .tiles, .lost .tiles) {
    &:not(.is-in) .t { opacity: 0; }
    &.is-in .t {
      animation: settle .36s cubic-bezier(.2, .9, .3, 1.2) backwards;
      animation-delay: calc((var(--n, 0) + var(--w, 0)) * 38ms + 60ms);
    }
  }

  /* Prints in the opening pile are dropped on. They are visible from the first frame. */
  @keyframes drop {
    0% { transform: translateY(calc(-8px - 26px * var(--k))) rotate(calc(var(--tilt, 0deg) * var(--k) + 9deg * var(--k) + 1deg)) scale(1.05); }
    62% { transform: translateY(0) rotate(calc(var(--tilt, 0deg) * var(--k) * .7)) scale(1); }
  }
  .hero__portrait, .page-head__print { animation: drop .6s cubic-bezier(.3, .8, .3, 1) .1s backwards; }
  .hero__stage { animation: drop .6s cubic-bezier(.3, .8, .3, 1) .32s backwards; }
  .page-head .jump .cover { animation: drop .5s cubic-bezier(.3, .8, .3, 1) backwards; }

  /* The author strip prints out, a character at a time */
  @keyframes printout { from { clip-path: inset(0 100% 0 0); } to { clip-path: inset(0 0 0 0); } }
  .hero__eyebrow { animation: printout .55s steps(16, end) .5s backwards; }

  /* The halo glints: a bright dash runs once round the ring, then rests */
  @keyframes glint {
    0%, 78% { opacity: 0; stroke-dashoffset: 1; }
    82% { opacity: .95; }
    96% { opacity: .95; }
    100% { opacity: 0; stroke-dashoffset: 0; }
  }
  .halo__glint { animation: glint 7.5s ease-in-out 2.6s infinite; }

  /* The scissor line is cut across as its section arrives */
  .js .cut::before { transition: clip-path .9s cubic-bezier(.5, .1, .3, 1) .1s; clip-path: inset(-2px 0 -2px 0); }
  .js .cut:not(.is-in)::before { clip-path: inset(-2px 100% -2px 0); }
  @keyframes snip { 0%, 40%, 80% { rotate: 0deg; } 20%, 60% { rotate: -14deg; } 100% { rotate: 0deg; } }
  .js .cut.is-in::after { animation: snip .8s ease-in-out .1s; }

  /* Highlighter swipes across */
  .js mark { background-repeat: no-repeat; background-size: 100% 100%; transition: background-size .7s cubic-bezier(.5, .1, .3, 1) .2s; }
  .js mark:not(.is-in) { background-size: 0% 100%; }

  /* Buttons press down */
  .btn:active { transform: rotate(0deg) translate(3px, 3px); transition-duration: .06s; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
}

@media print {
  .site-header nav, .menu-btn, .site-footer .scraps { display: none; }
  body, .on-black { background: #fff; color: #000; }
}

/* Inquiry form: bot trap, Turnstile check, privacy line (wired 2026-11-13) */
.inq__hp { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; }
.inq__check { margin-top: 1.6rem; min-height: 65px; }
.inq__privacy { font-size: .95rem; margin-top: .8rem; max-width: 46ch; }

/* ---------- Give page ---------- */

/* Calm on purpose: it handles money. The form is the same straight white sheet as the inquiry form.
   Yellow marks what is chosen and the one button. Red is only for what needs fixing.
   The form comes first in the page, so on phones nobody scrolls past notes to reach it. */
@media (min-width: 900px) { .split--give { grid-template-columns: minmax(0, 1.28fr) minmax(0, .72fr); } }
.give__h { font-size: clamp(1.9rem, 3.4vw, 2.6rem); }
.give .inq__lead { margin-top: .6rem; }
.give fieldset + fieldset, .give__fee { margin-top: 1.9rem; padding-top: 1.7rem; border-top: 2px dashed rgba(14, 14, 14, .38); }
.picks { clear: both; display: grid; gap: 12px; grid-template-columns: 1fr 1fr; }
.picks--freq { grid-template-columns: 1fr; }
@media (min-width: 560px) {
  .picks--amt { grid-template-columns: repeat(4, 1fr); }
  .picks--freq { grid-template-columns: repeat(3, 1fr); }
}
.pick {
  display: block; width: 100%; min-height: 58px; margin: 0; padding: .5em .4em .4em; cursor: pointer;
  font-family: var(--f-abril); font-size: 1.5rem; line-height: 1.1; text-align: center; color: var(--black);
  background: var(--paper); border: 2px solid var(--black); border-radius: 2px 6px 3px 7px;
  -webkit-appearance: none; appearance: none;
}
.pick:hover { background: var(--white); box-shadow: 3px 3px 0 var(--black); }
/* Chosen: yellow, a heavier rule and a hard shadow, so it never rests on colour alone. */
.pick[aria-pressed="true"] { background: var(--halo); box-shadow: inset 0 0 0 2px var(--black), 5px 5px 0 var(--black); }
.pick:focus-visible { outline: 3px solid var(--black); outline-offset: 3px; }
.pick--freq { font-family: var(--f-type); text-transform: uppercase; letter-spacing: .14em; font-size: .95rem; padding: .9em .5em .7em; }
.pick__sub { display: block; margin-top: .35em; font-family: var(--f-body); text-transform: none; letter-spacing: 0; font-size: .95rem; line-height: 1.3; color: var(--ink-soft); }
.pick[aria-pressed="true"] .pick__sub { color: var(--black); }
.give__custom { margin-top: 1.3rem; }
.give__money { position: relative; }
.give__dollar { position: absolute; left: .8em; top: 50%; transform: translateY(-50%); font-family: var(--f-abril); font-size: 1.3rem; line-height: 1; pointer-events: none; }
.give__money input { padding-left: 2.1em; font-size: 1.2rem; }
.give .field__err:empty { display: none; }
.give__fee label { font-weight: 500; }
.give__sum { margin-top: 1.7rem; font-weight: 700; max-width: 44ch; }
.give__sum:empty { display: none; }
.give__sum + .inq__send { margin-top: 1.1rem; }
.give__btn { width: 100%; }
@media (min-width: 560px) { .give__btn { width: auto; min-width: 16em; } }
html:not(.js) .give__body { display: none; }
.give__aside-h { font-size: clamp(1.6rem, 2.6vw, 2.1rem); margin-bottom: 1.5rem; }
/* The slip that says a checkout was canceled. Paper on black, at the very top, so it is seen at once. */
.give__notice { background: var(--paper); color: var(--black); border-left: 8px solid var(--halo); padding: 1rem 1.2rem .9rem; margin-bottom: 2rem; max-width: 40rem; border-radius: 1px 4px 2px 5px; }
.give__notice[hidden] { display: none; }

/* Thank you page */
.thanks { padding: clamp(26px, 4vw, 48px) clamp(20px, 4vw, 48px) clamp(28px, 4vw, 44px); }
.thanks__lead { margin: 1rem 0 1.6rem; max-width: 56ch; }

/* Seven links and the Invite button on one row. Just above the 1080px switch the row is tight,
   so the spacing comes in a little there. */
@media (min-width: 1080px) and (max-width: 1139px) {
  .site-header__in { gap: 10px 14px; }
  .nav ul { gap: 2px 12px; }
  .nav a { letter-spacing: .1em; font-size: .82rem; }
  .nav .nav__cta { margin-left: 2px; }
}