/* The front door, as a table with things on it.

   The old page was a centred masthead over three white rounded cards — the
   shape every site has had for two years, and the shape nobody looks at. This
   one is built the other way round: a dark, grainy surface, and on it three
   pieces of paper you could pick up. The paper is the same cream as the rooms
   behind the door, so going in reads as going *into* one of them.

   Self-contained, like home.css. It shares nothing with the rest of the site
   but the two typefaces and the heart — and it deliberately does not share
   home.css, which the two legal pages still use and which should not move
   because the front page did. */

:root {
  /* The table. Warm, not black: a brown-black with some red left in it, so
     cream paper sits on it rather than glowing off it. */
  --table: #241a18;
  --table-lit: #3a2a25;
  --table-deep: #140e0d;

  /* Three papers. Writing paper, newsprint, and the brown stuff a parcel is
     wrapped in. */
  --paper: #f7eee1;
  --paper-edge: #e6d7c3;
  --news: #ece7dd;
  --kraft: #cfa978;
  --kraft-deep: #b78f5f;

  /* Two inks and the pencil, which is how a small press works: everything on
     the page is one of these three, and nothing is a gradient of them. */
  --ink: #2a1a21;
  --ink-soft: #6b5560;
  --rose: #cf3f67;
  --rose-deep: #8e2f4c;
  --ochre: #c08a2e;

  --on-table: #e9ddd2;
  --on-table-soft: #bfaca2;

  --serif: "Cormorant Garamond", Georgia, "Times New Roman", serif;
  --sans: "Libre Franklin", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --hand: "Caveat", "Segoe Script", cursive;

  --heart: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 30'%3E%3Cpath d='M16 29S1 19.5 1 10.2A8.2 8.2 0 0 1 16 5.6 8.2 8.2 0 0 1 31 10.2C31 19.5 16 29 16 29z' fill='%23000'/%3E%3C/svg%3E");

  /* Two grains at different scales: a coarse one for the table's weave and a
     fine one for paper fibre. Drawn by the browser rather than downloaded —
     a texture file would be the largest thing on the page by far. */
  --weave: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='w'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.5 .9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='220' height='220' filter='url(%23w)'/%3E%3C/svg%3E");
  --fibre: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='f'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23f)'/%3E%3C/svg%3E");

  /* Paper on a table casts a real shadow: a tight dark one where it touches
     and a wide soft one further out. One shadow alone reads as a sticker. */
  --rest: 0 1px 1px rgba(0,0,0,.34), 0 10px 22px -6px rgba(0,0,0,.5);
  --held: 0 2px 3px rgba(0,0,0,.3), 0 30px 50px -12px rgba(0,0,0,.58);
}

* { box-sizing: border-box; }
[hidden] { display: none !important; }

html { background: var(--table); }

/* No background on the body itself. The table is drawn by the fixed layer in
   ::before, and ::before sits at z-index -2 — which in the root stacking
   context is painted BEFORE the backgrounds of ordinary in-flow boxes, body's
   among them. An opaque colour here is therefore painted straight over the
   table: the pool of light, the falloff at the corners, all of it, and the
   page comes out one flat brown.

   html carries the colour instead. That covers the canvas, so there is
   nothing to see through to, and it is what a browser rubber-bands against
   at the top and bottom of a scroll. */
body {
  margin: 0;
  min-height: 100%;
  color: var(--on-table);
  font-family: var(--sans);
  background: none;
  -webkit-text-size-adjust: 100%;
}
::selection { background: rgba(207, 63, 103, .3); }

/* The table itself: a warm pool of light roughly where the things are, the
   weave over all of it, and the corners falling away. */
body::before {
  content: "";
  position: fixed; inset: 0; z-index: -2;
  background:
    radial-gradient(74% 48% at 50% 34%, rgba(92,68,58,.55) 0%, rgba(92,68,58,0) 70%),
    radial-gradient(130% 80% at 50% -10%, var(--table-lit) 0%, rgba(58,42,37,0) 62%),
    radial-gradient(120% 90% at 50% 112%, var(--table-deep) 0%, rgba(20,14,13,0) 64%),
    linear-gradient(180deg, rgba(0,0,0,0) 40%, rgba(0,0,0,.34) 100%),
    var(--table);
}
body::after {
  content: "";
  position: fixed; inset: 0; z-index: -1;
  pointer-events: none;
  opacity: .085;
  mix-blend-mode: overlay;
  background-image: var(--weave);
}

.sheet-wrap { max-width: 1060px; margin: 0 auto; padding: 0 22px 80px; }

a { color: inherit; }
:focus-visible { outline: 2px solid var(--ochre); outline-offset: 4px; border-radius: 2px; }

/* ---------- The masthead ---------- */

/* Off to the left and tight, rather than centred and airy. A centred serif
   over a gradient is the thing this page is trying not to be. */
.head {
  padding: clamp(48px, 8vw, 80px) 0 clamp(22px, 4vw, 36px);
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 0 clamp(16px, 3vw, 28px);
  align-items: start;
}

/* The heart as a rubber stamp: struck twice, slightly out of register, the
   way a second colour never quite lands on the first. */
.stamp {
  position: relative;
  width: clamp(40px, 7vw, 62px);
  aspect-ratio: 32 / 30;
  margin-top: clamp(14px, 2.6vw, 26px);
  transform: rotate(-9deg);
}
.stamp::before, .stamp::after {
  content: "";
  position: absolute; inset: 0;
  -webkit-mask-image: var(--heart); mask-image: var(--heart);
  -webkit-mask-size: contain; mask-size: contain;
  -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat;
}
.stamp::before { background: var(--ochre); transform: translate(2px, 2px); opacity: .62; }
.stamp::after { background: var(--rose); }

.head h1 {
  grid-column: 2;
  margin: 0;
  font-family: var(--serif);
  font-weight: 700;
  font-size: clamp(50px, 11.5vw, 108px);
  line-height: .86;
  letter-spacing: -.022em;
  color: #fbf3ea;
}
/* "gift" in the second ink, because a two-ink job always puts the second one
   somewhere it matters. */
.head h1 span { color: var(--rose); }

.head .said {
  grid-column: 2;
  margin: 18px 0 0;
  max-width: 42ch;
  font-family: var(--serif);
  font-size: clamp(19px, 2.5vw, 25px);
  line-height: 1.34;
  color: var(--on-table);
}
.head .said b { font-weight: 600; color: #fff; }

/* A rule with a notch in it, as a printed page has between the masthead and
   what follows. */
.head-rule {
  grid-column: 1 / -1;
  margin: clamp(26px, 5vw, 42px) 0 0;
  height: 1px;
  background: linear-gradient(90deg,
    rgba(233,221,210,.26) 0%, rgba(233,221,210,.16) 62%, rgba(233,221,210,0) 100%);
}

/* ---------- The things on the table ---------- */

.table {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(18px, 3vw, 34px);
  align-items: start;
  padding: clamp(26px, 4vw, 40px) 0 0;
}

/* Each one is a whole link, because the thing is the link: there is no
   "learn more" to click next to a parcel you can already pick up. */
.thing {
  display: block;
  position: relative;
  text-decoration: none;
  color: var(--ink);
}
/* The part that moves is in here, not on the link. When the link itself
   lifted, a cursor resting just below one sat in a loop: the thing rises out
   from under the pointer, stops being hovered, drops back on to it, and goes
   again. The link's own box never moves now, so what is hovered stays
   hovered. */
.lift {
  display: block;
  transition: transform .34s cubic-bezier(.2,.8,.3,1);
}
/* Nothing on a table is square to the edge. The angles are small and all
   different; equal angles read as a pattern, which is the opposite of the
   point. */
/* The resting stagger is margin, not transform. As a transform it pushed the
   paper outside the link's own box, and the overhang was the loop all over
   again: the overhang is hoverable, hovering lifts it, lifting pulls it back
   inside the box, and the pointer is left on nothing. Margin moves the box
   with the paper, so there is no overhang to stand on. */
.thing:nth-child(1) { margin-top: 10px; }
.thing:nth-child(2) { margin-top: -14px; }
.thing:nth-child(3) { margin-top: 22px; }
.thing:nth-child(1) .lift { transform: rotate(-2.1deg); }
.thing:nth-child(2) .lift { transform: rotate(1.4deg); }
.thing:nth-child(3) .lift { transform: rotate(-2.7deg); }

/* What the angle itself pushes past the corners — about six pixels down the
   long edge — is covered by a hit area that does not move, so the last sliver
   cannot flicker either. Narrow enough left and right that two of these never
   reach each other across the gap. */
.thing::before {
  content: "";
  position: absolute;
  inset: -4px -9px -9px;
  z-index: 0;
}
.thing > .lift { position: relative; z-index: 1; }

/* Picked up: squared to the eye and lifted off the wood. */
.thing:hover, .thing:focus-visible { z-index: 3; }
.thing:hover .lift, .thing:focus-visible .lift {
  transform: rotate(0deg) translateY(-8px) scale(1.012);
}
.thing:hover .face, .thing:focus-visible .face { box-shadow: var(--held); }
/* Except this one, whose shadow lives on the wrapper outside the mask. A
   shadow here is drawn and then clipped off by the torn edge. */
.thing:hover .face-clip, .thing:focus-visible .face-clip { box-shadow: none; }

.face {
  position: relative;
  box-shadow: var(--rest);
  transition: box-shadow .34s;
  overflow: hidden;
}
/* The fibre of whatever this piece of paper is. */
.face::after {
  content: "";
  position: absolute; inset: 0;
  pointer-events: none;
  opacity: .5;
  mix-blend-mode: multiply;
  background-image: var(--fibre);
  background-size: 160px 160px;
}

/* -- the letter -- */

.face-letter {
  background:
    linear-gradient(180deg, rgba(255,255,255,.55) 0, rgba(255,255,255,0) 2px),
    var(--paper);
  border-radius: 2px;
  padding: 20px 22px 24px;
  aspect-ratio: 3 / 2.72;
  display: flex;
  flex-direction: column;
}
.dated {
  margin: 0 0 14px;
  text-align: right;
  font-family: var(--hand);
  font-size: clamp(13px, 1.6vw, 16px);
  color: #6f7b94;
  transform: rotate(.8deg);
}
.signed {
  margin: auto 0 0;
  text-align: right;
  font-family: var(--hand);
  font-size: clamp(15px, 1.9vw, 19px);
  color: #42506b;
  transform: rotate(-1deg);
}
/* Folded once, which is how a letter arrives. */
.face-letter::before {
  content: "";
  position: absolute; left: 0; right: 0; top: 64%;
  height: 10px;
  background: linear-gradient(180deg,
    rgba(90,60,40,.12) 0%, rgba(90,60,40,.04) 40%, rgba(255,255,255,.5) 62%, transparent 100%);
}
.tiles { display: flex; gap: 6px; }
.tiles span {
  flex: 1 1 0;
  aspect-ratio: 1;
  display: grid; place-items: center;
  border-radius: 5px;
  font-family: var(--sans);
  font-weight: 700;
  font-size: clamp(11px, 1.5vw, 15px);
  letter-spacing: .04em;
}
.tiles .got { background: var(--rose); color: #fff6f8; }
.tiles .yet { border: 1px solid rgba(42,26,33,.18); }
/* The lines are drawn behind the writing rather than beside it, and the
   writing's line-height is the spacing between them — so it sits on the
   lines by construction. Pulling a separate block of text up over a stack of
   rules with a negative margin only ever lands on the lines by luck, and it
   did not: the words sat under them. */
.ruled {
  --rule-gap: 21px;
  margin: 16px 0 0;
  min-height: calc(var(--rule-gap) * 4);
  background-image: repeating-linear-gradient(to bottom,
    transparent 0, transparent calc(var(--rule-gap) - 1px),
    rgba(130,96,60,.3) calc(var(--rule-gap) - 1px), rgba(130,96,60,.3) var(--rule-gap));
  background-size: 100% calc(var(--rule-gap) * 4);
  background-repeat: no-repeat;
}
.written {
  margin: 0;
  font-family: var(--hand);
  font-size: 18px;
  line-height: var(--rule-gap);
  color: #42506b;         /* ballpoint, not print */
}

/* -- the clipping -- */

.face-clip {
  background: var(--news);
  padding: 20px 18px 40px;
  aspect-ratio: 3 / 3.52;
  /* Cut out of something, so the bottom is torn rather than trimmed. */
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 120' preserveAspectRatio='none'%3E%3Cpath d='M0 0h100v110.5l-4.2 2.1-5.1-2.6-6 3.4-4.4-2.2-7.2 3.1-5-2.4-4.6 2.9-6.4-2.8-5.2 2.4-6.1-3-4.9 2.6-5.6-2.3-6.3 3-5.4-2.7-5.1 2.2-6.1-2.6-6.4 2.9z' fill='%23000'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 120' preserveAspectRatio='none'%3E%3Cpath d='M0 0h100v110.5l-4.2 2.1-5.1-2.6-6 3.4-4.4-2.2-7.2 3.1-5-2.4-4.6 2.9-6.4-2.8-5.2 2.4-6.1-3-4.9 2.6-5.6-2.3-6.3 3-5.4-2.7-5.1 2.2-6.1-2.6-6.4 2.9z' fill='%23000'/%3E%3C/svg%3E");
  -webkit-mask-size: 100% 100%; mask-size: 100% 100%;
  -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat;
  box-shadow: none;       /* a mask clips the shadow, so the wrapper carries it */
}
.clip-shadow { filter: drop-shadow(0 10px 18px rgba(0,0,0,.45)); transition: filter .34s; }
.thing:hover .clip-shadow, .thing:focus-visible .clip-shadow {
  filter: drop-shadow(0 26px 34px rgba(0,0,0,.52));
}
/* The column of type it was cut out of — set as rules, because at this size
   real words would only be a smudge pretending to be words. */
/* Bars of fake newspaper type read as a barcode, not as a column of words.
   A puzzle cut out of a paper carries its own small heading instead. */
.xw-head {
  margin: 0 0 15px;
  padding-bottom: 7px;
  border-bottom: 1px solid rgba(42,26,33,.3);
  font-family: var(--sans);
  font-weight: 700;
  font-size: 8.5px;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: rgba(42,26,33,.62);
  display: flex;
  justify-content: space-between;
}
.xw-head span { font-weight: 500; color: rgba(42,26,33,.42); }
.xw {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  width: 80%;
  margin: 0 auto;
  border: 1px solid var(--ink);
  background: var(--ink);
  gap: 1px;
}
.xw span {
  aspect-ratio: 1;
  background: #fbf8f2;
  display: grid; place-items: center;
  font-family: var(--sans); font-weight: 700;
  font-size: clamp(8px, 1.1vw, 12px);
  color: var(--ink);
}
.xw span { position: relative; }
.xw i {
  position: absolute; top: 0; left: 1.5px;
  font-style: normal;
  font-size: 6px;
  line-height: 1;
  font-weight: 600;
  color: rgba(42,26,33,.62);
}
.xw .lit i { color: rgba(255,246,248,.75); }
.xw .blk { background: var(--ink); }
.xw .lit { background: var(--rose); color: #fff6f8; }
.clue {
  margin: 14px 0 0;
  font-family: var(--serif);
  font-size: clamp(12px, 1.5vw, 15px);
  font-style: italic;
  line-height: 1.3;
  color: rgba(42,26,33,.62);
}
.clue b { font-style: normal; font-weight: 700; font-family: var(--sans); font-size: .82em; }

/* -- the tin --
   Chosen over the wrapped parcel that was here: a parcel can only ever be
   shut, and what this gift is is the things you put in it. The lid is off,
   so they show.

   Metal, which in a drawing means: one bright band across it rather than an
   even gradient, a dark line at every edge where the light turns, and a
   rolled bead round the mouth. Nothing here is an image; it is all gradients,
   the same as the rest of the page. */

.face-tin { aspect-ratio: 3 / 3.1; background: none; box-shadow: none; }
.face-tin::after { content: none; }
.tin { position: absolute; inset: 0; }
/* i, u, s and b are used here as short names for parts of a drawing, nothing
   more. Left alone a browser strikes the s through and underlines the u,
   which is what put a line through "mixtape". */
.tin i, .tin u, .tin s, .tin b {
  position: absolute; display: block;
  font-style: normal; font-weight: inherit; text-decoration: none;
}

/* ---- the tin itself -------------------------------------------------
   Metal, which means: a cool desaturated body, one bright specular band
   running across it rather than an even gradient, a dark line at every
   edge where the light turns, and a rolled bead round the opening. */
.tin-body {
  left: 3%; right: 3%; top: 7%; bottom: 15%; border-radius: 13px;
  background:
    linear-gradient(101deg,
      rgba(255,255,255,0) 14%, rgba(255,255,255,.5) 25%,
      rgba(255,255,255,.08) 34%, rgba(255,255,255,0) 44%),
    linear-gradient(177deg,
      #c9bda6 0%, #b5a78d 26%, #9d8e74 54%, #8a7b62 78%, #776952 100%);
  box-shadow:
    0 16px 28px -10px rgba(0,0,0,.7),
    inset 0 0 0 1px rgba(60,46,24,.35),
    inset 0 2px 0 rgba(255,255,255,.5),
    inset 0 -10px 18px rgba(40,26,10,.4);
}
/* The bead: the rolled edge a tin has round its mouth. Lit on top, dark
   underneath, and it is what makes the thing look pressed from metal. */
.tin-bead {
  left: 3%; right: 3%; top: 7%; height: 6.5%; border-radius: 13px 13px 5px 5px;
  background: linear-gradient(180deg,
    #e6dcc6 0%, #cfc2a6 28%, #a3957a 62%, #7d6f58 88%, #6a5c46 100%);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.85), 0 2px 4px rgba(30,18,4,.45);
}
/* Inside: a cavity, not a grey rectangle. Darkest at the top where the lip
   overhangs, with the far wall catching a little light at the bottom. */
.tin-well {
  left: 7.5%; right: 7.5%; top: 12%; bottom: 34%; border-radius: 4px;
  background: linear-gradient(180deg,
    #2b241c 0%, #3d342a 26%, #5a4e3f 62%, #6d6050 86%, #514636 100%);
  box-shadow: inset 0 7px 12px rgba(10,6,2,.8), inset 0 -2px 0 rgba(255,255,255,.08);
}

/* ---- what is in it -------------------------------------------------- */
.tape {
  left: 11%; width: 35%; top: 16%; height: 29%; border-radius: 2px;
  background:
    linear-gradient(101deg, rgba(255,255,255,.14) 20%, rgba(255,255,255,0) 40%),
    linear-gradient(172deg, #3a3346 0%, #272131 100%);
  transform: rotate(-8deg); box-shadow: 0 5px 10px rgba(6,3,0,.7);
}
.tape u { left: 9%; right: 9%; top: 13%; height: 42%; background: #e7dece; border-radius: 1px;
          box-shadow: inset 0 0 0 1px rgba(40,30,20,.14); }
.tape s { left: 9%; right: 9%; top: 17%; text-align: center; font-family: var(--hand);
          font-size: 12px; line-height: 1; color: #3b4a63; }
.tape b { left: 26%; width: 11%; top: 64%; height: 19%; border-radius: 50%;
          background: radial-gradient(circle at 50% 50%, #0f0c14 0 40%, #4a4357 42%, #16121c 100%);
          box-shadow: 31px 0 0 #16121c; }

.snap {
  left: 40%; width: 35%; top: 12%; height: 33%; background: #fdfaf4;
  transform: rotate(5deg); box-shadow: 0 5px 10px rgba(6,3,0,.7);
}
.snap::before { content: ""; position: absolute; inset: 0; pointer-events: none;
  opacity: .4; mix-blend-mode: multiply;
  background-image: var(--fibre); background-size: 150px 150px; }
.snap u { inset: 8% 8% 26%;
  background:
    radial-gradient(circle at 72% 26%, rgba(255,241,214,.95) 0 6%, rgba(255,241,214,0) 22%),
    linear-gradient(180deg, #8fb0cc 0%, #bfcbd4 48%, #b09486 60%, #74604f 100%); }

/* A stub of something kept. */
.stub {
  left: 72%; width: 21%; top: 19%; height: 23%; transform: rotate(-11deg);
  background:
    linear-gradient(118deg, rgba(255,255,255,.3) 10%, rgba(255,255,255,0) 44%),
    var(--ochre);
  box-shadow: 0 5px 10px rgba(6,3,0,.7);
}
.stub::before { content: ""; position: absolute; inset: 0; pointer-events: none;
  opacity: .4; mix-blend-mode: multiply;
  background-image: var(--fibre); background-size: 150px 150px; }
.stub u { left: 0; right: 0; top: 56%; height: 0;
  border-top: 1px dashed rgba(74,44,8,.6); }
.stub s { left: 0; right: 0; top: 20%; text-align: center; font-family: var(--sans);
  font-weight: 700; font-size: 6px; letter-spacing: .14em; color: rgba(74,44,8,.75); }

/* ---- the lid, slid half off -----------------------------------------
   A printed tin lid: an inset keyline, a fine ground pattern inside it,
   and a medallion in the middle. Plus its own skirt below, which is the
   part that actually sits over the bead. */
.tin-lid {
  left: 1%; right: 1%; top: 48%; height: 30%; border-radius: 12px;
  transform: rotate(2.2deg);
  background:
    linear-gradient(101deg,
      rgba(255,255,255,0) 16%, rgba(255,255,255,.55) 27%,
      rgba(255,255,255,.1) 36%, rgba(255,255,255,0) 46%),
    linear-gradient(177deg, #d8ccb2 0%, #c2b396 48%, #ab9c7e 100%);
  box-shadow:
    0 -16px 26px rgba(14,7,0,.5),
    inset 0 0 0 1px rgba(60,46,24,.3),
    inset 0 2px 0 rgba(255,255,255,.62);
}
/* The printed keyline, and the ground inside it. */
.tin-print {
  left: 1%; right: 1%; top: 48%; height: 30%; transform: rotate(2.2deg);
  border-radius: 12px; overflow: hidden;
}
.tin-print u {
  inset: 9% 4%;
  border: 2px solid rgba(192,138,46,.62);
  border-radius: 3px;
  background:
    repeating-linear-gradient(45deg,
      rgba(207,63,103,.17) 0 1px, transparent 1px 13px),
    repeating-linear-gradient(-45deg,
      rgba(192,138,46,.15) 0 1px, transparent 1px 13px);
  box-shadow: inset 0 0 0 1.5px rgba(255,250,240,.5), inset 0 0 0 3px rgba(207,63,103,.5);
}
/* The skirt: the band of the lid that drops over the bead. */
.tin-skirt {
  left: 1%; right: 1%; top: 75.5%; height: 5.5%; transform: rotate(2.2deg);
  border-radius: 0 0 9px 9px;
  background: linear-gradient(180deg, #9d8e73 0%, #80735b 55%, #6b5f49 100%);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.35);
}
/* The medallion. Paper-white roundel, a ruled ring, the heart pressed in. */
.tin i.medal { display: grid; }
.medal {
  left: 50%; margin-left: -10%; width: 20%; top: 52%; aspect-ratio: 1;
  border-radius: 50%; transform: rotate(2.2deg);
  background: radial-gradient(circle at 42% 36%, #fffaf0 0%, #f3e7d3 72%, #e2d3ba 100%);
  box-shadow: 0 2px 4px rgba(30,18,4,.45), inset 0 0 0 1px rgba(192,138,46,.5);
  display: grid; place-items: center;
}
.medal::after {
  content: ""; position: absolute; inset: 7%; border-radius: 50%;
  border: 1px solid rgba(207,63,103,.5);
}
.medal u {
  position: static; width: 42%; aspect-ratio: 32/30; background: var(--rose);
  -webkit-mask-image: var(--heart); mask-image: var(--heart);
  -webkit-mask-size: contain; mask-size: contain;
  -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat;
}

/* A single, half under the tin. The disc is the one thing in the drawing that
   says "a song" on its own, and the box really can carry one. */
.single {
  left: 69%; width: 23%; top: 35%; aspect-ratio: 1; border-radius: 50%;
  transform: rotate(-9deg);
  background:
    conic-gradient(from 210deg at 50% 50%,
      rgba(255,255,255,.2) 0deg, rgba(255,255,255,0) 44deg,
      rgba(255,255,255,0) 170deg, rgba(255,255,255,.16) 212deg,
      rgba(255,255,255,0) 250deg, rgba(255,255,255,0) 360deg),
    repeating-radial-gradient(circle at 50% 50%,
      rgba(255,255,255,.055) 0 1px, rgba(0,0,0,0) 1px 3px),
    radial-gradient(circle at 50% 50%, #241f2b 0 34%, #17131d 36%, #241f2b 100%);
  box-shadow: 0 4px 9px rgba(6,3,0,.7), inset 0 0 0 1px rgba(255,255,255,.07);
  display: grid; place-items: center;
}
.tin i.single { display: grid; }
/* The paper label, and the spindle hole through the middle of it. */
.single u {
  position: static; width: 44%; aspect-ratio: 1; border-radius: 50%;
  background: radial-gradient(circle at 40% 34%, #e2608a 0%, var(--rose) 56%, #a93256 100%);
  display: grid; place-items: center;
}
.single u::after {
  content: ""; width: 15%; aspect-ratio: 1; border-radius: 50%;
  background: #15111b; box-shadow: inset 0 1px 1px rgba(0,0,0,.8);
}

/* A mask clips a shadow, and this one is not a sheet of paper anyway: every
   part of it carries its own. */
.thing:hover .face-tin, .thing:focus-visible .face-tin { box-shadow: none; }

/* -- what each one says -- */

.said-about { padding: 18px 2px 0; }
.said-about h2 {
  margin: 0;
  font-family: var(--serif);
  font-weight: 600;
  font-size: clamp(24px, 3.2vw, 32px);
  line-height: 1.04;
  letter-spacing: -.012em;
  color: #fbf3ea;
}
.said-about p {
  margin: 9px 0 0;
  font-size: 14.5px;
  line-height: 1.58;
  color: var(--on-table-soft);
}
.said-about .go {
  display: inline-block;
  margin: 13px 0 0;
  font-size: 13.5px;
  font-weight: 600;
  letter-spacing: .02em;
  color: var(--rose);
  border-bottom: 1px solid rgba(207,63,103,.4);
  padding-bottom: 2px;
}
.thing:hover .go, .thing:focus-visible .go { color: #ef6c90; border-bottom-color: #ef6c90; }

/* ---------- Pencil in the margin ---------- */

.aside {
  margin: clamp(34px, 5vw, 54px) 0 0;
  display: flex;
  align-items: center;
  gap: 14px;
  justify-content: center;
  font-family: var(--hand);
  font-size: clamp(20px, 2.6vw, 26px);
  color: var(--on-table-soft);
  transform: rotate(-1.1deg);
}
/* The words are one flex item, not several. Left loose, the link became an
   item of its own and took the row's gap with it, which put a hole in the
   sentence just before "say so". */
.aside > span { display: inline; }
.aside a { color: var(--on-table); text-decoration: none; border-bottom: 1px solid rgba(233,221,210,.4); }
.aside a:hover { color: #fff; border-bottom-color: #fff; }
.aside svg { flex: 0 0 auto; width: 58px; height: 26px; fill: none;
  stroke: var(--on-table-soft); stroke-width: 1.4; opacity: .75; }

/* ---------- Colophon ---------- */

.foot {
  margin: clamp(38px, 6vw, 62px) 0 0;
  padding-top: 22px;
  border-top: 1px solid rgba(233,221,210,.14);
  display: flex;
  flex-wrap: wrap;
  gap: 8px 16px;
  align-items: baseline;
  font-size: 12.5px;
  color: var(--on-table-soft);
}
.foot a { color: var(--on-table-soft); text-decoration: none; border-bottom: 1px solid rgba(179,160,151,.35); }
.foot a:hover { color: #fbf3ea; border-bottom-color: #fbf3ea; }
.foot .made { margin-left: auto; font-family: var(--serif); font-style: italic; font-size: 15px; }

/* ---------- Smaller tables ---------- */

@media (max-width: 860px) {
  .table { grid-template-columns: 1fr 1fr; gap: 20px clamp(14px, 3vw, 24px); }
  .thing::before { inset: -4px -5px -9px; }
  .thing:nth-child(3) { grid-column: 1 / -1; max-width: 62%; }
  .thing:nth-child(3) .face-tin { aspect-ratio: 3 / 2.6; }
}

@media (max-width: 560px) {
  .table { grid-template-columns: 1fr; gap: 34px; padding-top: 34px; }
  /* Stacked, the offsets would only make gaps of different sizes. The angles
     stay, because they are the whole idea; the lifts go. */
  .thing:nth-child(1) .lift { transform: rotate(-1.4deg); }
  .thing:nth-child(2) .lift { transform: rotate(1deg); }
  .thing:nth-child(3) .lift { transform: rotate(-2.2deg); }
  /* Stacked, the stagger would only make gaps of different sizes. */
  .thing:nth-child(1), .thing:nth-child(2), .thing:nth-child(3) { margin-top: 0; }
  .thing:nth-child(3) { max-width: none; }
  .thing:nth-child(3) .face-tin { aspect-ratio: 3 / 2.3; }
  /* Full width, the ratios would make these very tall. Letting the content
     set the height instead is what stopped the clipping's clue being eaten
     by its own torn edge. */
  .face-letter, .face-clip { aspect-ratio: auto; }
  .face-letter { padding-bottom: 20px; }
  .face-clip { padding-bottom: 42px; }
  .head { grid-template-columns: 1fr; }
  .head h1, .head .said { grid-column: 1; }
  .stamp { margin: 0 0 14px; }
  .foot .made { margin-left: 0; }
}

/* Angles and lifts are decoration; a tilted page is a real problem for some
   people. Everything lies flat and still. */
@media (prefers-reduced-motion: reduce) {
  .lift, .thing:nth-child(1) .lift, .thing:nth-child(2) .lift,
  .thing:nth-child(3) .lift, .thing:hover .lift, .thing:focus-visible .lift { transform: none; }
  .stamp, .written, .aside { transform: none; }
  .lift, .face, .clip-shadow { transition: none; }
}

/* ======================================================================
   The welcome pages, on the table.

   These are the shop windows for each gift, so they belong outside with
   the front page rather than inside with the paper. They keep styles.css
   underneath, which is what draws the sample letter and the sample grid
   — a picture of the real thing would drift the first time the real thing
   changed — and this layer puts the table under it and takes the white
   cards away.

   Scoped to .outside, because .page alone is also the builders, and the
   builders are rooms, not windows.
   ====================================================================== */

/* styles.css writes most of its type in --ink and --muted, which are both
   near-black: correct on cream, invisible on a table. Rather than chase every
   rule that uses them — and miss one, which is what happened to the box page's
   "what makes this one different", where a whole column of headings
   disappeared — the table itself redefines them, and any piece of paper laid
   on the table defines them back. */
/* Transparent for the reason above, and explicitly so: styles.css sets a
   cream background on the body, and these pages load it. Left to stand, that
   cream was painted over the table for exactly the height of one screen —
   styles.css also sets html,body{height:100%} — and the table showed again
   below it. A hard horizontal edge at one viewport down the document, which
   crossed the fixed pool of light as you scrolled and swapped which side of
   it was the brighter. */
.outside {
  background: none;
  color: var(--on-table);
  --ink: #fbf3ea;
  --muted: var(--on-table-soft);
  --faint: #9e8c84;
  --line: rgba(233,221,210,.16);
  --line-strong: rgba(233,221,210,.3);
  --tint: rgba(255,255,255,.05);
  --tint-strong: rgba(255,255,255,.09);
  --rose-lit: #ef6c90;
}
/* The islands of paper, where the ink is ink again. */
.outside .showpiece .face,
.outside .paper-demo,
.outside .paper {
  --ink: #2a1a21;
  --muted: #6b5560;
  --faint: #806975;
  --line: rgba(42,23,32,.11);
  --line-strong: rgba(42,23,32,.22);
  --rose-lit: #b12d55;
}

/* The ground. styles.css paints a cream wash and its own grain here; both
   are replaced rather than tinted, or the table comes out pink. */
.outside::before {
  background:
    radial-gradient(74% 46% at 50% 26%, rgba(92,68,58,.5) 0%, rgba(92,68,58,0) 70%),
    radial-gradient(130% 70% at 50% -8%, var(--table-lit) 0%, rgba(58,42,37,0) 60%),
    radial-gradient(120% 90% at 50% 110%, var(--table-deep) 0%, rgba(20,14,13,0) 64%),
    linear-gradient(180deg, rgba(0,0,0,0) 44%, rgba(0,0,0,.3) 100%),
    var(--table) !important;
}
.outside::after {
  opacity: .085 !important;
  mix-blend-mode: overlay;
  background-image: var(--weave) !important;
}

/* ---- the chrome at the top ---- */
.outside .site-head { border-bottom: 1px solid rgba(233,221,210,.12); }
.outside .site-mark { color: #fbf3ea; }
.outside .site-mark:hover { color: #fff; }
.outside .site-by { color: var(--on-table-soft); }
.outside .site-by:hover { color: #fbf3ea; }

/* ---- the opening ---- */
.outside .hero h1 { color: #fbf3ea; }
.outside .hero h1 em { color: var(--rose); }
.outside .hero-sub { color: var(--on-table); }
/* The fine print under the button is an aside, so it is in the hand rather
   than in small capitals, which on a dark ground read as a warning. */
.outside .hero-fine {
  font-family: var(--hand);
  font-size: clamp(17px, 2.1vw, 20px);
  letter-spacing: 0;
  text-transform: none;
  color: var(--on-table-soft);
  transform: rotate(-.8deg);
}

/* ---- the section headings ---- */
.outside .steps h2, .outside .modes-home h2, .outside .showcase h2,
.outside .ways h2 { color: #fbf3ea; }
.outside .steps h2::after, .outside .modes-home h2::after,
.outside .showcase h2::after, .outside .ways h2::after { background: var(--ochre); }
.outside .showcase-sub, .outside .ways-sub { color: var(--on-table-soft); }

/* ---- the steps: numerals in the margin, not cards ---- */
.outside .steps li {
  background: none;
  border: 0;
  border-top: 1px solid rgba(233,221,210,.16);
  border-radius: 0;
  box-shadow: none;
  padding: 20px 4px 0;
}
.outside .steps li::before {
  background: none;
  color: var(--ochre);
  font-family: var(--serif);
  font-size: 30px;
  font-weight: 700;
  width: auto;
  justify-self: start;
}
.outside .steps li h3, .outside .modes-grid h3 { color: #fbf3ea; }
.outside .steps p, .outside .modes-grid p { color: var(--on-table-soft); }

/* ---- two ways: a hairline between them, no boxes ---- */
.outside .modes-grid article {
  background: none;
  border: 0;
  border-top: 1px solid rgba(233,221,210,.16);
  border-radius: 0;
  box-shadow: none;
  padding: 20px 4px 0;
}
.outside .modes-grid em { color: var(--rose); }
.outside .modes-extra { color: var(--on-table-soft); }

/* ---- the specimen, drawn the way the front door draws it ----
   Each welcome page used to show its game inside a pink tray: a row of
   tiles, a corner of a grid, three goodies, all on a card. The front page
   draws those same three things as objects somebody left on a table, and
   they are the same three things — so here they are the same drawings,
   bigger, with nothing round them.

   The face rules themselves are the ones above; this only gives one of them
   a place to stand when it is not in the row of three. */
.outside .showpiece {
  width: min(100%, 430px);
  margin: 0 auto;
}
.outside .showpiece .face,
.outside .showpiece .clip-shadow { transform: rotate(-1.4deg); }
/* The tin is already drawn at an angle on the front page, and turning the
   whole drawing again only unwinds it. */
.outside .showpiece-tin .face { transform: none; }
/* Both of these are drawn to a fixed ratio in the row of three, so that the
   three sit level with one another. On their own there is nothing to sit
   level with, and the ratio only buys a field of blank paper under the
   writing — so here they are as tall as what is on them. */
.outside .showpiece .face-letter {
  aspect-ratio: auto;
  padding: 24px 26px 22px;
}
.outside .showpiece .ruled { --rule-gap: 25px; }
.outside .showpiece .written { font-size: 22px; }
.outside .showpiece .dated { font-size: 17px; margin-bottom: 16px; }
.outside .showpiece .signed { font-size: 21px; margin-top: 10px; }
/* Six tiles across the full width of a sheet this size are bigger than the
   handwriting under them, which puts the board above the letter. */
.outside .showpiece .tiles { width: 74%; }
.outside .showpiece .tiles span { border-radius: 6px; font-size: 19px; }
/* The fold is two thirds down a letter whatever its height. */
.outside .showpiece .face-letter::before { top: 66%; }

.outside .showpiece .face-clip {
  aspect-ratio: auto;
  padding: 22px 20px 42px;   /* the bottom is torn, so it keeps its margin */
}
.outside .showpiece .xw-head { font-size: 10px; }
.outside .showpiece .xw span { font-size: 15px; }
.outside .showpiece .xw i { font-size: 8px; left: 2.5px; }
.outside .showpiece .clue { font-size: 16px; text-align: center; }
/* On the table, under the thing, in the hand — a label somebody wrote beside
   it, not a serif caption centred under a figure. */
.outside .showpiece .demo-caption {
  margin: 26px auto 0;
  font-family: var(--hand);
  font-style: normal;
  font-size: clamp(19px, 2.4vw, 23px);
  line-height: 1.35;
  color: var(--on-table-soft);
  transform: rotate(-.7deg);
}
/* The letter is already paper. It only needs to stop being centred furniture
   and start being something somebody put down. */
.outside .paper-demo {
  transform: rotate(1.2deg);
  box-shadow: var(--rest);
}

/* ---- the way out ---- */
.outside .site-foot { color: var(--on-table-soft); }
.outside .site-foot::before { background: rgba(233,221,210,.14); }
.outside .site-foot a { color: var(--on-table-soft); }
.outside .site-foot a:hover { color: #fbf3ea; }
.outside .more-like-this {
  background: none;
  border: 1px solid rgba(233,221,210,.22);
  color: var(--on-table-soft);
}
.outside .more-like-this:hover { border-color: #fbf3ea; color: #fbf3ea; }

@media (prefers-reduced-motion: reduce) {
  .outside .hero-fine, .outside .paper-demo, .outside .showpiece .demo-caption,
  .outside .showpiece .face, .outside .showpiece .clip-shadow { transform: none; }
}

/* ---- the legal pages ------------------------------------------------
   home.css still gives these their measure and their rhythm; this only
   moves them outdoors. They are the one place on the table with no object
   on it — just a long page of prose — so the type does the work. */
.outside .wrap.legal h1,
.outside .wrap.legal h2 { color: #fbf3ea; }
.outside .wrap.legal a { color: var(--on-table); text-decoration-color: rgba(233,221,210,.4); }
.outside .wrap.legal a:hover { color: #fff; }
.outside .wrap.legal strong { color: #fbf3ea; }
.outside .wrap.legal code {
  background: rgba(255,255,255,.07);
  border: 1px solid rgba(233,221,210,.14);
  border-radius: 3px;
  padding: 1px 5px;
  color: var(--on-table);
}
.outside .back { color: var(--on-table-soft); }
.outside .back:hover { color: #fbf3ea; }
.outside .foot { border-top-color: rgba(233,221,210,.14); color: var(--on-table-soft); }
.outside .foot a { color: var(--on-table-soft); }
.outside .foot a:hover { color: #fbf3ea; }
.outside .sep { color: rgba(233,221,210,.35); }