/* ==========================================================================
   benshindel.com: the coin cabinet
   Day: linen. Night: green baize lit by a terracotta oil lamp.
   All art in /assets/images/site is generated by the scripts in /tools/art.
   ========================================================================== */

:root {
  --outside: #c3b89f;
  --ink: #2a241c;
  --muted: #62574a;
  --link: #7b2e1b;
  --link-hover: #a13d23;
  --halo: rgba(246, 240, 226, .85);
  --rule: rgba(90, 70, 40, .28);
  --night: 0;
  --sh-near: rgba(60, 45, 25, .45);   /* contact shadow */
  --sh-far: rgba(70, 55, 30, .26);    /* soft shadow further out */
  --display: Cinzel, "Trajan Pro", Georgia, serif;
  --body: "EB Garamond", Garamond, Georgia, serif;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    color-scheme: dark;
    --outside: #0b140e; --ink: #eee6d2; --muted: #bdb49c; --link: #e3be6f; --link-hover: #f3d38d;
    --halo: rgba(0, 0, 0, .55); --rule: rgba(220, 210, 180, .22); --night: 1;
    --sh-near: rgba(0, 0, 0, .7); --sh-far: rgba(0, 0, 0, .45);
  }
}
:root[data-theme="dark"] {
  color-scheme: dark;
  --outside: #0b140e; --ink: #eee6d2; --muted: #bdb49c; --link: #e3be6f; --link-hover: #f3d38d;
  --halo: rgba(0, 0, 0, .55); --rule: rgba(220, 210, 180, .22); --night: 1;
  --sh-near: rgba(0, 0, 0, .7); --sh-far: rgba(0, 0, 0, .45);
}

/* Shadows. By day the light is a window to the upper left, so everything casts down and to the
   right. At night site.js sets --sx/--sy on each object so its shadow points away from the lamp
   (longer the farther it is). Each shadow is two layers: a tight dark one where the object meets
   the table and a soft one further out. --lift raises an object off the table on hover. */
.letter .coin img, .seal, .nameplate, .lamp-body, .page img:not(.plain) {
  --sx: 3; --sy: 5; --lift: 1;
  filter:
    drop-shadow(calc(var(--sx) * .25px * var(--lift)) calc(var(--sy) * .25px * var(--lift)) calc(.8px * var(--lift)) var(--sh-near))
    drop-shadow(calc(var(--sx) * 1px * var(--lift)) calc(var(--sy) * 1px * var(--lift)) calc(5px * var(--lift)) var(--sh-far));
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0; background: var(--outside); color: var(--ink);
  font: clamp(16px, 1rem + .25vw, 20px)/1.55 var(--body);
  transition: background-color .7s, color .7s;
}

/* ---------------------------------------------------------------- the table and its cloths */
.table {
  position: relative; isolation: isolate; overflow: hidden;
  min-height: 100vh; min-height: 100dvh; display: flex; flex-direction: column;
}
.cloth { position: absolute; inset: 0; }
.cloth.linen {
  z-index: -4;
  background:
    radial-gradient(120% 90% at 30% 15%, rgba(255, 250, 238, .45), rgba(255, 250, 238, 0) 60%),
    radial-gradient(150% 120% at 50% 50%, rgba(0, 0, 0, 0) 55%, rgba(90, 70, 40, .22)),
    url("../images/site/cloth-shade.jpg") 0 0 / 100% 100%,
    url("../images/site/linen.jpg") 0 0 / 256px 256px;
  background-blend-mode: normal, normal, soft-light, normal;
}
.cloth.baize {
  z-index: -3; opacity: var(--night); transition: opacity .8s ease;
  background:
    radial-gradient(110% 80% at 35% 15%, rgba(190, 230, 190, .10), rgba(0, 0, 0, 0) 60%),
    radial-gradient(150% 120% at 50% 50%, rgba(0, 0, 0, 0) 50%, rgba(0, 0, 0, .45)),
    url("../images/site/baize.jpg") 0 0 / 256px 256px;
}
/* lamplight at night, centred on the lamp by site.js */
.glow {
  position: absolute; inset: 0; z-index: -1; pointer-events: none; opacity: 0; transition: opacity 1s ease;
  background:
    radial-gradient(circle at var(--gx, 90%) var(--gy, 6%), rgba(255, 196, 120, .34), rgba(255, 170, 90, .12) 22%, rgba(0, 0, 0, 0) 48%),
    radial-gradient(170% 140% at var(--gx, 90%) var(--gy, 6%), rgba(0, 0, 0, 0) 30%, rgba(0, 0, 0, .3));
}
:root[data-night="1"] .glow { opacity: 1; }

/* The light that falls on everything, paper and coins included: it sits above the page (and lets
   clicks through). By night it is the lamp's pool of warm light fading into the dark; by day a
   faint falloff away from the window. */
.light {
  position: absolute; inset: 0; z-index: 5; pointer-events: none; transition: opacity .9s ease;
}
.light.day {
  opacity: calc(1 - var(--night));
  background:
    radial-gradient(140% 110% at 8% 0%, rgba(255, 248, 232, .10), rgba(255, 248, 232, 0) 45%, rgba(70, 52, 25, .10) 100%);
}
.light.night {
  opacity: 0;
  background:
    radial-gradient(circle 1700px at var(--gx, 90%) var(--gy, 6%),
      rgba(255, 176, 96, .10) 0, rgba(255, 160, 80, .05) 10%, rgba(40, 20, 4, .08) 24%,
      rgba(20, 10, 2, .24) 50%, rgba(8, 4, 0, .34) 100%);
}
:root[data-night="1"] .light.night { opacity: 1; }
.light.night { transition: opacity .9s ease; }
/* these three are flickered every frame at night: keep them on their own layers so that's cheap */
.light.night, .glow, .halo { will-change: opacity; }

/* ---------------------------------------------------------------- page frame */
.wrap {
  flex: 1; display: flex; flex-direction: column; width: 100%;
  max-width: 1240px; margin-inline: auto;
  padding-inline: clamp(18px, 5vw, 64px);
  padding-block: clamp(16px, 3.2vh, 40px) clamp(14px, 2.5vh, 28px);
}
body.sub .wrap { max-width: calc(46rem + 2 * clamp(18px, 5vw, 64px)); }

.masthead { display: flex; align-items: center; justify-content: space-between; gap: 16px; min-height: clamp(52px, 8vh, 80px); }
.nameplate {
  display: inline-block; width: clamp(190px, min(22vw, 36vh), 330px); line-height: 0;
  transform: rotate(-1.2deg);
  transition: transform .35s cubic-bezier(.2, .8, .2, 1), filter .35s;
}
.nameplate:hover { transform: rotate(0) translateY(-3px); --lift: 1.8; }
.nameplate img { width: 100%; height: auto; }
.masthead h1 { margin: 0; line-height: 0; }

/* the oil lamp: click to light it (night) or put it out (day) */
.lamp {
  appearance: none; border: 0; padding: 0; background: none; cursor: pointer; position: relative;
  width: clamp(90px, 13vh, 124px); transform: rotate(-8deg);
}
.lamp-body { display: block; width: 100%; height: auto; }
/* the wick sits at 88% / 50% of the lamp image; the flame stands upright on it (counter to the lamp's tilt) */
.flame {
  position: absolute; left: 88%; top: 50%; width: 34%; height: auto; pointer-events: none;
  opacity: 0; transition: opacity .5s ease; transform-origin: 50% 84%; mix-blend-mode: screen;
  transform: translate(-50%, -84%) rotate(8deg);
}
.halo {
  position: absolute; left: 88%; top: 44%; width: 260%; aspect-ratio: 1; pointer-events: none;
  transform: translate(-50%, -50%); border-radius: 50%; opacity: 0; transition: opacity .8s ease; mix-blend-mode: screen;
  background: radial-gradient(circle closest-side, rgba(255, 214, 140, .55) 0%, rgba(255, 184, 100, .26) 20%, rgba(255, 162, 72, .10) 46%, rgba(255, 150, 60, .03) 72%, rgba(255, 150, 60, 0) 100%);
}
:root[data-night="1"] .flame { opacity: 1; animation: dance 2.3s infinite ease-in-out; }
:root[data-night="1"] .halo { opacity: 1; }
/* the flame leans and stretches in the draught (the light's brightness is flickered by site.js) */
@keyframes dance {
  0%, 100% { transform: translate(-50%, -84%) rotate(8deg) scale(1, 1); }
  17% { transform: translate(-50%, -84%) rotate(5deg) scale(1.05, .95); }
  36% { transform: translate(-50%, -84%) rotate(10.5deg) scale(.95, 1.06); }
  58% { transform: translate(-50%, -84%) rotate(7deg) scale(1.02, .97); }
  79% { transform: translate(-50%, -84%) rotate(9.5deg) scale(.97, 1.04); }
}
canvas.smoke { position: absolute; z-index: 6; pointer-events: none; }

:is(a, button):focus-visible { outline: 2px solid var(--link); outline-offset: 4px; border-radius: 4px; }
.vh { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

footer.colophon {
  margin-top: auto; padding-top: 16px; font-size: .78rem; color: var(--muted); text-align: right;
  text-shadow: 0 1px 2px var(--halo); transition: color .7s;
}

/* ---------------------------------------------------------------- coins */
.coin { display: block; border-radius: 50%; }
.coin img { display: block; width: 100%; height: auto; }
a.coin:focus-visible { outline-offset: 6px; border-radius: 50%; }
/* the live-lit coin (coins.js) sits exactly over the static one and fades in once it has drawn */
canvas.gl { opacity: 0; transition: opacity .5s ease; pointer-events: none; }
canvas.gl.on { opacity: 1; }
/* the lamp's own shadow falls away from its flame */
:root[data-night="1"] .lamp-body { --sx: -5; --sy: 3; }

/* ---------------------------------------------------------------- homepage: a letter on the table */
/* The intro is a sheet of laid paper. Each coin is floated beside its paragraph but pulled out
   past the paper's edge with a negative margin, so on wide screens it lies on the cloth and the
   text is untouched. As the window narrows and the cloth beside the paper runs out, the coins
   slide onto the paper's edges and the text wraps around them. Every size and offset is
   continuous, so there is no breakpoint. */
body.home .wrap { max-width: 1480px; }
.intro a, .page a, .letter a { text-decoration-thickness: 1px; text-underline-offset: 3px; transition: color .7s; }
.page a { color: var(--link); }
.page a:hover { color: var(--link-hover); }
.desk {
  flex: 1; container-type: inline-size;
  margin-inline: calc(-1 * clamp(18px, 5vw, 64px));           /* the desk spans the full window */
  margin-top: clamp(12px, 3vh, 40px); padding-bottom: clamp(14px, 2vh, 40px);
}
.letter {
  --c: clamp(102px, min(11cqw, 17vh), 150px);                   /* coin size */
  --W: min(100cqw - 16px, 38rem);                                /* paper width */
  --g: calc((100cqw - var(--W)) / 2);                            /* cloth beside the paper */
  --pad: clamp(16px, 5cqw, 52px);                                /* paper margin */
  --edge: calc(var(--g) - var(--c) / 2);                   /* furthest a coin centre may sit: its rim just at the window edge */
  --d: min(var(--c) * 1.02, var(--edge));                        /* coin centre outside the paper edge (negative = on it) */
  --paper-tint: #fffdf8;
  --sx: 3; --sy: 5;
  position: relative; z-index: 0; width: var(--W); margin-inline: auto; transform: rotate(-.5deg);
  padding: clamp(20px, 4vh, 48px) var(--pad);
  color: #2a2118;
  font-size: clamp(15.5px, min(2.6cqw, 2.3vh), 19.5px); line-height: 1.55;
}
/* The sheet itself is its own layer under the text, so that its shadow can follow its rough,
   hand-cut edge (a shadow on .letter would also shadow the coins a second time). */
.letter .sheet {
  position: absolute; inset: 0; z-index: -1; pointer-events: none;
  filter:
    drop-shadow(calc(var(--sx) * .15px) calc(var(--sy) * .2px) 1px var(--sh-near))
    drop-shadow(calc(var(--sx) * 1.6px) calc(var(--sy) * 2px) 12px var(--sh-far));
  transition: filter .35s ease;
}
.letter .sheet::before {
  content: ""; position: absolute; inset: 0;
  background-color: var(--paper-tint);
  /* folded in three: the top panel tips toward the light, the bottom one away; the creases are a
     valley and a ridge, each lit on one face and shaded on the other */
  background-image:
    linear-gradient(to bottom,
      rgba(255, 255, 255, .07) 0, rgba(255, 255, 255, .02) 33.2%,
      rgba(90, 70, 40, .07) calc(33.33% - 1.5px), rgba(255, 255, 255, .28) calc(33.33% + .5px), rgba(255, 255, 255, 0) calc(33.33% + 5px),
      rgba(0, 0, 0, 0) 50%, rgba(80, 60, 30, .02) calc(66.67% - 5px), rgba(255, 255, 255, .2) calc(66.67% - .5px),
      rgba(90, 70, 40, .10) calc(66.67% + 1.5px), rgba(90, 70, 40, .045) calc(66.67% + 6px), rgba(90, 70, 40, .07) 100%),
    url("../images/site/paper.jpg");
  background-size: auto, 512px 512px;
  background-blend-mode: normal, multiply;
  box-shadow: inset 0 0 40px rgba(130, 100, 60, .14);
  clip-path: polygon(0.00% 0.8px, 1.11% 0.5px, 2.22% 0.9px, 3.33% 0.1px, 4.44% 0.5px, 5.56% 0.3px, 6.67% 0.7px, 7.78% 0.2px, 8.89% 0.8px, 10.00% 0.5px, 11.11% 0.8px, 12.22% 0.4px, 13.33% 0.4px, 14.44% 0.7px, 15.56% 0.9px, 16.67% 0.3px, 17.78% 0.9px, 18.89% 0.8px, 20.00% 0.2px, 21.11% 0.5px, 22.22% 0.6px, 23.33% 0.8px, 24.44% 0.6px, 25.56% 0.1px, 26.67% 0.4px, 27.78% 0.4px, 28.89% 0.5px, 30.00% 0.9px, 31.11% 0.3px, 32.22% 0.2px, 33.33% 0.5px, 34.44% 0.6px, 35.56% 0.8px, 36.67% 0.5px, 37.78% 0.2px, 38.89% 0.8px, 40.00% 0.4px, 41.11% 0.6px, 42.22% 0.4px, 43.33% 0.2px, 44.44% 0.6px, 45.56% 0.7px, 46.67% 0.2px, 47.78% 0.4px, 48.89% 0.3px, 50.00% 0.2px, 51.11% 0.2px, 52.22% 0.9px, 53.33% 0.8px, 54.44% 0.3px, 55.56% 0.7px, 56.67% 0.0px, 57.78% 0.8px, 58.89% 0.5px, 60.00% 0.7px, 61.11% 0.2px, 62.22% 0.3px, 63.33% 0.3px, 64.44% 0.9px, 65.56% 0.4px, 66.67% 0.4px, 67.78% 0.9px, 68.89% 0.8px, 70.00% 0.4px, 71.11% 0.3px, 72.22% 0.7px, 73.33% 0.1px, 74.44% 0.4px, 75.56% 0.8px, 76.67% 0.8px, 77.78% 0.2px, 78.89% 0.1px, 80.00% 0.7px, 81.11% 0.6px, 82.22% 0.2px, 83.33% 0.5px, 84.44% 0.1px, 85.56% 0.6px, 86.67% 0.5px, 87.78% 0.6px, 88.89% 0.1px, 90.00% 0.6px, 91.11% 0.3px, 92.22% 0.4px, 93.33% 0.3px, 94.44% 0.6px, 95.56% 0.5px, 96.67% 0.6px, 97.78% 0.1px, 98.89% 0.2px, calc(100% - 0.1px) 0.00%, calc(100% - 0.3px) 1.11%, calc(100% - 0.4px) 2.22%, calc(100% - 0.1px) 3.33%, calc(100% - 0.6px) 4.44%, calc(100% - 0.4px) 5.56%, calc(100% - 0.5px) 6.67%, calc(100% - 0.5px) 7.78%, calc(100% - 0.8px) 8.89%, calc(100% - 0.5px) 10.00%, calc(100% - 0.1px) 11.11%, calc(100% - 0.1px) 12.22%, calc(100% - 0.6px) 13.33%, calc(100% - 0.3px) 14.44%, calc(100% - 0.7px) 15.56%, calc(100% - 0.5px) 16.67%, calc(100% - 0.3px) 17.78%, calc(100% - 0.7px) 18.89%, calc(100% - 0.2px) 20.00%, calc(100% - 0.3px) 21.11%, calc(100% - 0.3px) 22.22%, calc(100% - 0.4px) 23.33%, calc(100% - 0.8px) 24.44%, calc(100% - 0.7px) 25.56%, calc(100% - 0.7px) 26.67%, calc(100% - 0.6px) 27.78%, calc(100% - 0.0px) 28.89%, calc(100% - 0.3px) 30.00%, calc(100% - 0.5px) 31.11%, calc(100% - 0.8px) 32.22%, calc(100% - 0.3px) 33.33%, calc(100% - 0.5px) 34.44%, calc(100% - 0.8px) 35.56%, calc(100% - 0.3px) 36.67%, calc(100% - 0.7px) 37.78%, calc(100% - 0.5px) 38.89%, calc(100% - 0.5px) 40.00%, calc(100% - 0.6px) 41.11%, calc(100% - 0.4px) 42.22%, calc(100% - 0.1px) 43.33%, calc(100% - 0.8px) 44.44%, calc(100% - 0.9px) 45.56%, calc(100% - 0.7px) 46.67%, calc(100% - 0.3px) 47.78%, calc(100% - 0.6px) 48.89%, calc(100% - 0.7px) 50.00%, calc(100% - 0.1px) 51.11%, calc(100% - 0.7px) 52.22%, calc(100% - 0.1px) 53.33%, calc(100% - 0.8px) 54.44%, calc(100% - 0.2px) 55.56%, calc(100% - 0.9px) 56.67%, calc(100% - 0.2px) 57.78%, calc(100% - 0.5px) 58.89%, calc(100% - 0.7px) 60.00%, calc(100% - 0.9px) 61.11%, calc(100% - 0.6px) 62.22%, calc(100% - 0.8px) 63.33%, calc(100% - 0.4px) 64.44%, calc(100% - 0.7px) 65.56%, calc(100% - 0.3px) 66.67%, calc(100% - 0.8px) 67.78%, calc(100% - 0.7px) 68.89%, calc(100% - 0.3px) 70.00%, calc(100% - 0.7px) 71.11%, calc(100% - 0.1px) 72.22%, calc(100% - 0.8px) 73.33%, calc(100% - 0.6px) 74.44%, calc(100% - 0.3px) 75.56%, calc(100% - 0.6px) 76.67%, calc(100% - 0.7px) 77.78%, calc(100% - 0.6px) 78.89%, calc(100% - 0.8px) 80.00%, calc(100% - 0.4px) 81.11%, calc(100% - 0.3px) 82.22%, calc(100% - 0.3px) 83.33%, calc(100% - 0.3px) 84.44%, calc(100% - 0.4px) 85.56%, calc(100% - 0.7px) 86.67%, calc(100% - 0.8px) 87.78%, calc(100% - 0.6px) 88.89%, calc(100% - 0.7px) 90.00%, calc(100% - 0.9px) 91.11%, calc(100% - 0.6px) 92.22%, calc(100% - 0.1px) 93.33%, calc(100% - 0.6px) 94.44%, calc(100% - 0.0px) 95.56%, calc(100% - 0.6px) 96.67%, calc(100% - 0.9px) 97.78%, calc(100% - 0.4px) 98.89%, 100.00% calc(100% - 0.8px), 98.89% calc(100% - 0.0px), 97.78% calc(100% - 0.9px), 96.67% calc(100% - 0.2px), 95.56% calc(100% - 0.8px), 94.44% calc(100% - 0.3px), 93.33% calc(100% - 0.4px), 92.22% calc(100% - 0.1px), 91.11% calc(100% - 0.0px), 90.00% calc(100% - 0.7px), 88.89% calc(100% - 0.7px), 87.78% calc(100% - 0.1px), 86.67% calc(100% - 0.6px), 85.56% calc(100% - 0.2px), 84.44% calc(100% - 0.8px), 83.33% calc(100% - 0.1px), 82.22% calc(100% - 0.5px), 81.11% calc(100% - 0.8px), 80.00% calc(100% - 0.5px), 78.89% calc(100% - 0.6px), 77.78% calc(100% - 0.7px), 76.67% calc(100% - 0.6px), 75.56% calc(100% - 0.7px), 74.44% calc(100% - 0.2px), 73.33% calc(100% - 0.8px), 72.22% calc(100% - 0.5px), 71.11% calc(100% - 0.8px), 70.00% calc(100% - 0.6px), 68.89% calc(100% - 0.7px), 67.78% calc(100% - 0.9px), 66.67% calc(100% - 0.1px), 65.56% calc(100% - 0.8px), 64.44% calc(100% - 0.3px), 63.33% calc(100% - 0.7px), 62.22% calc(100% - 0.2px), 61.11% calc(100% - 0.4px), 60.00% calc(100% - 0.1px), 58.89% calc(100% - 0.7px), 57.78% calc(100% - 0.3px), 56.67% calc(100% - 0.4px), 55.56% calc(100% - 0.7px), 54.44% calc(100% - 0.3px), 53.33% calc(100% - 0.8px), 52.22% calc(100% - 0.5px), 51.11% calc(100% - 0.8px), 50.00% calc(100% - 0.7px), 48.89% calc(100% - 0.9px), 47.78% calc(100% - 0.6px), 46.67% calc(100% - 0.3px), 45.56% calc(100% - 0.5px), 44.44% calc(100% - 0.8px), 43.33% calc(100% - 0.8px), 42.22% calc(100% - 0.2px), 41.11% calc(100% - 0.2px), 40.00% calc(100% - 0.2px), 38.89% calc(100% - 0.6px), 37.78% calc(100% - 0.2px), 36.67% calc(100% - 0.6px), 35.56% calc(100% - 0.3px), 34.44% calc(100% - 0.8px), 33.33% calc(100% - 0.2px), 32.22% calc(100% - 0.8px), 31.11% calc(100% - 0.3px), 30.00% calc(100% - 0.0px), 28.89% calc(100% - 0.1px), 27.78% calc(100% - 0.7px), 26.67% calc(100% - 0.2px), 25.56% calc(100% - 0.2px), 24.44% calc(100% - 0.9px), 23.33% calc(100% - 0.4px), 22.22% calc(100% - 0.6px), 21.11% calc(100% - 0.5px), 20.00% calc(100% - 0.4px), 18.89% calc(100% - 0.8px), 17.78% calc(100% - 0.0px), 16.67% calc(100% - 0.3px), 15.56% calc(100% - 0.4px), 14.44% calc(100% - 0.6px), 13.33% calc(100% - 0.7px), 12.22% calc(100% - 0.0px), 11.11% calc(100% - 0.1px), 10.00% calc(100% - 0.2px), 8.89% calc(100% - 0.3px), 7.78% calc(100% - 0.7px), 6.67% calc(100% - 0.7px), 5.56% calc(100% - 0.8px), 4.44% calc(100% - 0.4px), 3.33% calc(100% - 0.4px), 2.22% calc(100% - 0.1px), 1.11% calc(100% - 0.8px), 0.8px 100.00%, 0.9px 98.89%, 0.7px 97.78%, 0.8px 96.67%, 0.5px 95.56%, 0.8px 94.44%, 0.3px 93.33%, 0.7px 92.22%, 0.7px 91.11%, 0.6px 90.00%, 0.8px 88.89%, 0.6px 87.78%, 0.2px 86.67%, 0.0px 85.56%, 0.3px 84.44%, 0.2px 83.33%, 0.8px 82.22%, 0.5px 81.11%, 0.7px 80.00%, 0.8px 78.89%, 0.7px 77.78%, 0.8px 76.67%, 0.5px 75.56%, 0.7px 74.44%, 0.9px 73.33%, 0.4px 72.22%, 0.6px 71.11%, 0.9px 70.00%, 0.2px 68.89%, 0.1px 67.78%, 0.4px 66.67%, 0.8px 65.56%, 0.5px 64.44%, 0.2px 63.33%, 0.9px 62.22%, 0.4px 61.11%, 0.4px 60.00%, 0.1px 58.89%, 0.4px 57.78%, 0.9px 56.67%, 0.4px 55.56%, 0.7px 54.44%, 0.8px 53.33%, 0.0px 52.22%, 0.6px 51.11%, 0.1px 50.00%, 0.5px 48.89%, 0.8px 47.78%, 0.3px 46.67%, 0.6px 45.56%, 0.3px 44.44%, 0.5px 43.33%, 0.7px 42.22%, 0.5px 41.11%, 0.3px 40.00%, 0.7px 38.89%, 0.1px 37.78%, 0.3px 36.67%, 0.7px 35.56%, 0.5px 34.44%, 0.1px 33.33%, 0.6px 32.22%, 0.8px 31.11%, 0.2px 30.00%, 0.8px 28.89%, 0.0px 27.78%, 0.9px 26.67%, 0.5px 25.56%, 0.2px 24.44%, 0.1px 23.33%, 0.4px 22.22%, 0.4px 21.11%, 0.5px 20.00%, 0.5px 18.89%, 0.1px 17.78%, 0.2px 16.67%, 0.1px 15.56%, 0.7px 14.44%, 0.1px 13.33%, 0.6px 12.22%, 0.1px 11.11%, 0.6px 10.00%, 0.4px 8.89%, 0.5px 7.78%, 0.7px 6.67%, 0.3px 5.56%, 0.6px 4.44%, 0.8px 3.33%, 0.7px 2.22%, 0.5px 1.11%);
  transition: background-color .8s ease;
}
:root[data-night="1"] .letter { --paper-tint: #efe3cc; }   /* the same paper; the lamplight above does the rest */
:root[data-night="1"] .letter .sheet::before { box-shadow: inset 0 0 60px rgba(60, 35, 10, .2); }
/* no text-wrap: pretty/balance next to the coins: Safari's version ignores right-hand floats and runs the text under them */
.letter p { margin: 0 0 .85em; }
.letter p:last-of-type { margin-bottom: 0; }
.letter .email { font-style: italic; user-select: all; }
.letter a:not(.coin) { color: #7b2e1b; }
.letter a:not(.coin):hover { color: #a13d23; }
.letter .coin {
  --dd: min(var(--d) * var(--far, 1), var(--edge));
  --pull: calc(-1 * (var(--pad) + var(--dd) + var(--c) / 2));   /* coin's outer rim, from the text edge */
  /* how far the coin's inner rim stays clear of the text (negative = it overlaps the text column) */
  --clear: calc(var(--pad) + var(--dd) - var(--c) / 2);
  --w: clamp(0px, -1 * var(--clear), var(--c));                  /* how much of the text column it takes */
  /* The float itself is only as wide as the part of the coin that overlaps the text column, and the
     coin image hangs out of it. (Floats with negative side margins get their text wrap wrong in
     Safari, so there are none.) Once the coin is clear of the text it needn't reserve its full
     height, so the coins in each gutter sit closer together. */
  position: relative; z-index: 2; width: var(--w);
  height: calc(var(--top) + var(--c) - clamp(0px, var(--clear) * 3, var(--c) * .2));
  /* --dyn: extra drop (in coin diameters) that only applies once the coin is on the paper, so that
     coins on opposite edges don't pinch the same lines; it melts away as the coin moves onto the cloth */
  /* The drop is padding, not margin: Safari measures the wrap shape from the top of the margin box,
     so a top margin would lift the text wrap above the coin. */
  --top: max(0px, var(--c) * var(--dy, 0) - clamp(0px, var(--clear) * 3, var(--c) * var(--dyn, 0)));
  padding-top: var(--top);
  shape-margin: 4px;               
  transform: none; filter: none; border-radius: 0;
}
.letter .coin img, .letter .coin canvas {
  /* the images carry a little transparent margin (room for the coin's edge): enlarge them by that much */
  --m: calc(var(--c) * .05);
  position: absolute; top: calc(var(--top) - var(--m)); width: calc(var(--c) + 2 * var(--m)); max-width: none; height: auto; aspect-ratio: 1; border-radius: 50%;
  transform: rotate(var(--rot, 0deg));
  transition: transform .35s cubic-bezier(.2, .8, .2, 1), filter .35s ease, opacity .5s ease;
}
.letter a.coin:hover, .letter a.coin:focus-visible { outline: none; }
.letter a.coin:hover :is(img, canvas), .letter a.coin:focus-visible :is(img, canvas) { transform: translateY(-6px) rotate(0deg) scale(1.045); }
.letter a.coin:hover img, .letter a.coin:focus-visible img { --lift: 2.2; }
.letter a.coin:focus-visible img { outline: 2px solid var(--link); outline-offset: 4px; }
.letter .coin.L { float: left;  clear: left;  margin-right: 4px;
  shape-outside: circle(calc(var(--c) / 2) at calc(-1 * (var(--pad) + var(--dd))) calc(var(--top) + var(--c) / 2)) border-box; }
.letter .coin.L :is(img, canvas) { left: calc(var(--pull) - var(--m)); }
.letter .coin.R { float: right; clear: right; margin-left: 4px;
  shape-outside: circle(calc(var(--c) / 2) at calc(var(--w) + var(--clear) + var(--c) / 2) calc(var(--top) + var(--c) / 2)) border-box; }
.letter .coin.R :is(img, canvas) { right: calc(var(--pull) - var(--m)); }

/* ---------------------------------------------------------------- sub-pages */
.page { width: 100%; margin-top: clamp(14px, 3vh, 36px); }
.page > :first-child { margin-top: 0; }
.page h1, .page .page-title {
  font-family: var(--display); font-weight: 600; letter-spacing: .04em; line-height: 1.15;
  font-size: clamp(1.6rem, 1.1rem + 1.8vw, 2.4rem); margin: 0 0 .6em;
  text-shadow: 0 1px 3px var(--halo);
}
.page h2, .page h3 { font-family: var(--display); font-weight: 600; letter-spacing: .04em; line-height: 1.2; margin: 1.4em 0 .5em; text-shadow: 0 1px 2px var(--halo); }
.page h2 { font-size: 1.3em; }
.page h3 { font-size: 1.05em; }
.page p, .page li { text-shadow: 0 1px 2px var(--halo); }
.page p { margin: 0 0 1em; }
.page ul, .page ol { margin: 0 0 1.1em; padding-left: 1.3em; }
.page li { margin: .3em 0; }
.page ul li::marker { content: "◆  "; font-size: .6em; color: var(--muted); }
.page ol li::marker { font-family: var(--display); font-size: .85em; color: var(--muted); }
.page hr { border: 0; border-top: 1px solid var(--rule); margin: 2em 0; }
.page figcaption { margin: .9em auto 0; max-width: 34rem; text-align: center; font-style: italic; font-size: .9em; color: var(--muted); text-shadow: 0 1px 2px var(--halo); }
.page code { font-size: .9em; }

/* the page's coin sits in the opening text, which wraps around it */
.seal {
  float: right; width: clamp(104px, 13vw, 168px); shape-outside: circle(50%); shape-margin: 14px;
  margin: .2em 0 .5em 1.4em; transform: rotate(-7deg); position: relative;
}
.seal img { display: block; width: 110%; max-width: none; height: auto; margin: -5%; }
.seal canvas { position: absolute; inset: -5%; width: 110%; height: 110%; }

/* every picture in a page gets the bronze moulding with palmette corners and a mat.
   Add class="plain" to an image to leave it unframed. */
.page img:not(.plain) {
  display: inline-block; max-width: 100%; height: auto; vertical-align: middle;
  border: clamp(18px, 3vw, 32px) solid transparent;
  border-image: url("../images/site/frame.webp") 72 stretch;
  padding: clamp(8px, 1.4vw, 14px);
  background: url("../images/site/mat.jpg") 0 0 / 256px padding-box;
  margin: 1.4em 0 .2em;
}

/* ---------------------------------------------------------------- cookbook (unlisted) */
.recipe-list { list-style: none; padding: 0; margin: 0; columns: 2 16rem; column-gap: 2.5rem; }
.recipe-list li { break-inside: avoid; margin: 0 0 .6em; }
.recipe-list li::marker { content: none; }
.recipe-list a { font-size: 1.08em; }
.recipe-back { display: inline-block; margin-bottom: .8em; font-size: .9em; }
.recipe-source { margin-top: 2em; padding-top: .8em; border-top: 1px solid var(--rule); font-size: .9em; color: var(--muted); font-style: italic; }

/* ---------------------------------------------------------------- narrower screens */
/* Everything scales continuously; there is no layout switch. */
@media (max-width: 520px) {
  .nameplate { width: min(56vw, 240px); }
  .seal { width: clamp(100px, 30vw, 136px); margin-left: 1em; }
}
@media (prefers-reduced-motion: reduce) {
  .coin, .coin img, .nameplate, .cloth.baize, .glow, .light, .flame, .halo { transition: none; }
  .flame, .halo, .glow { animation: none !important; }
}