/* All Hallows, version 31.  One candle in a dark room.  Soot and tallow,
   the Fell types (cut in the 1670s, the years of Stensen's shark), double
   rules like an old book, and no orange except where something is
   actually on fire.  Everything is lit from the flame: a warm pool stays
   with you and the far edges of the screen fall off into the dark. */

:root {
  --soot: #0d0a07;
  --soot-2: #17120c;
  --tallow: #efe2c6;
  --tallow-2: #cdbd9c;
  --tallow-3: #94856d;
  --warm: #e7c88d;
  --rule: #3a3024;
  --rubric: #a81c16;
  --paper: #efe6d3;
  --fell: "IM Fell English", "Iowan Old Style", Georgia, serif;
  --fell-d: "IM Fell French Canon", "IM Fell English", Georgia, serif;
  --fell-sc: "IM Fell English SC", "IM Fell English", Georgia, serif;
}

body.hw { background: var(--soot); color: var(--tallow);
  font: 400 21px/1.42 var(--fell); }
body.hw::before { content: ""; position: fixed; inset: 0; z-index: 0;
  pointer-events: none; opacity: .09;
  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 1 0 0 0 0 .92 0 0 0 0 .76 0 0 0 1 0'/%3E%3C/filter%3E%3Crect width='220' height='220' filter='url(%23n)'/%3E%3C/svg%3E"); }
body.hw > * { position: relative; z-index: 1; }

/* The light.  Both layers are moved with transforms, never repainted. */
.hw-light, .hw-dark { position: fixed !important; inset: 0; pointer-events: none; }
.hw-light { z-index: 0 !important;
  background: radial-gradient(70vmax 70vmax at 50% 46%,
    rgba(214, 138, 54, .17), rgba(214, 138, 54, .05) 46%, rgba(214, 138, 54, 0) 72%);
  animation: hw-flick 5.3s infinite; }
.hw-dark { z-index: 40 !important;
  background: radial-gradient(82vmax 82vmax at 50% 46%, rgba(6, 4, 2, 0) 34%,
    rgba(6, 4, 2, .24) 62%, rgba(6, 4, 2, .5) 100%); }
@media (hover: hover) and (pointer: fine) {
  .hw-light, .hw-dark { inset: -60vmax; will-change: transform; }
  .hw-light { background: radial-gradient(62vmax 62vmax at 50% 50%,
    rgba(214, 138, 54, .19), rgba(214, 138, 54, .05) 46%, rgba(214, 138, 54, 0) 72%); }
  .hw-dark { background: radial-gradient(90vmax 90vmax at 50% 50%, rgba(6, 4, 2, 0) 26%,
    rgba(6, 4, 2, .3) 56%, rgba(6, 4, 2, .54) 100%); }
}
@keyframes hw-flick {
  0%, 100% { opacity: 1; } 7% { opacity: .9; } 11% { opacity: 1; }
  23% { opacity: .94; } 31% { opacity: .84; } 34% { opacity: .98; }
  49% { opacity: .9; } 58% { opacity: 1; } 71% { opacity: .86; }
  76% { opacity: .97; } 88% { opacity: .91; }
}

/* Every flame in every plate */
.fl { transform-origin: 0 0; animation: hw-fl 2.7s ease-in-out infinite; }
@keyframes hw-fl {
  0%, 100% { transform: scale(1, 1) skewX(0deg); }
  17% { transform: scale(.96, 1.05) skewX(1.6deg); }
  31% { transform: scale(1.03, .95) skewX(-1.2deg); }
  52% { transform: scale(.97, 1.08) skewX(1deg); }
  73% { transform: scale(1.02, .97) skewX(-1.8deg); }
}
.fl-in { animation: hw-in 3.1s ease-in-out infinite; }
.fl-glow { animation: hw-flick 4.1s infinite; }
@keyframes hw-in { 0%, 100% { opacity: 1; } 26% { opacity: .84; }
  41% { opacity: .96; } 66% { opacity: .78; } 83% { opacity: .95; } }
@media (prefers-reduced-motion: reduce) {
  .hw-light, .fl, .fl-in, .fl-glow { animation: none; }
}

/* The house's bar and foot, in the dark */
.hw .ftop { background: var(--soot); border-bottom: 1px solid var(--rule); }
.hw .ftop .mark { color: var(--tallow); }
.hw .ftop-link { color: var(--tallow-2); font: italic 400 19px/1 var(--fell); }
.hw .ftop-link:hover { color: var(--warm); }
.hw .foot { background: #060402; color: var(--tallow-3); }
.hw .foot .mark { color: var(--tallow); }
.hw .foot .motto { color: var(--warm); }
.hw a { color: inherit; }

.hw-strip { display: flex; justify-content: center; gap: clamp(14px, 3vw, 28px);
  padding: 9px var(--gut); border-bottom: 3px double var(--rule);
  font: 400 14px/1.2 var(--fell-sc); letter-spacing: .12em; color: var(--tallow-3); }

.hw-l { font: 400 16px/1.2 var(--fell-sc); letter-spacing: .13em; color: var(--tallow-3); }
.hw-cap { font: italic 400 16px/1.3 var(--fell); color: var(--tallow-3);
  text-align: center; margin-top: 12px; }

/* The first screen */
.hw-hero { padding-top: clamp(34px, 6vw, 72px); text-align: center; }
.hw-title { font: 400 clamp(76px, 15.4vw, 236px)/.9 var(--fell-d);
  letter-spacing: -.012em; margin: 10px 0 0; }
.hw-title em { color: var(--warm); }
.hw-treefig { margin: clamp(-40px, -3vw, -8px) auto 0; max-width: 980px;
  padding: 0 clamp(0px, 2vw, 24px); cursor: pointer; outline: 0;
  -webkit-tap-highlight-color: transparent; }
.tree { display: block; width: 100%; height: auto; overflow: visible; }

.sw { transform-origin: 0 0; }
.draught .sw { animation: hw-swing 3.6s cubic-bezier(.3, .6, .4, 1) var(--d) both; }
@keyframes hw-swing {
  0% { transform: rotate(0deg); } 12% { transform: rotate(11deg); }
  27% { transform: rotate(-8deg); } 44% { transform: rotate(5.5deg); }
  62% { transform: rotate(-3deg); } 80% { transform: rotate(1.4deg); }
  100% { transform: rotate(0deg); }
}
@media (prefers-reduced-motion: reduce) { .draught .sw { animation: none; } }

.hw-lead { font: 400 clamp(36px, 6.2vw, 84px)/1.03 var(--fell-d); max-width: 16em;
  margin: clamp(52px, 8vw, 110px) auto 0; }
.hw-lead em { display: block; color: var(--warm); }
.hw-essay { max-width: 33em; margin: clamp(32px, 5vw, 60px) auto 0; text-align: left; }
.hw-essay p + p { margin-top: .8em; }
.hw-essay-lead { font-size: clamp(23px, 2.6vw, 30px); line-height: 1.3; color: var(--tallow-2);
  max-width: 28em; margin-top: 18px; }

.hw-index { list-style: none; margin: clamp(44px, 7vw, 90px) 0 0; padding: 0;
  display: grid; text-align: left; border-top: 3px double var(--rule); }
@media (min-width: 760px) { .hw-index { grid-template-columns: 1fr 1fr; column-gap: 56px; } }
.hw-index a { display: grid; grid-template-columns: 84px 1fr; align-items: baseline;
  padding: 10px 0; border-bottom: 1px solid var(--rule); text-decoration: none;
  font-size: 23px; }
.hw-index a:hover { color: var(--warm); }
.hw-index span { font: 400 15px/1 var(--fell-sc); letter-spacing: .1em; color: var(--tallow-3); }

/* The line */
.hw-main { display: block; }
.hw-sec { padding: clamp(68px, 10vw, 150px) 0 0; }
.hw-sec > .wrap { border-top: 0; }
.hw-grid { display: grid; gap: 34px; align-items: start; }
@media (min-width: 900px) {
  .hw-grid { grid-template-columns: 1fr 1fr; gap: 80px; align-items: center; }
}
.hw-next { margin-top: clamp(68px, 10vw, 140px); }
.hw-no { display: flex; justify-content: space-between; gap: 18px; padding-bottom: 10px;
  border-bottom: 3px double var(--rule);
  font: 400 15px/1.2 var(--fell-sc); letter-spacing: .13em; color: var(--tallow-3); }
.hw-h { font: 400 clamp(58px, 8.4vw, 118px)/.96 var(--fell-d); letter-spacing: -.01em;
  margin: 18px 0 22px; }
.hw-h em { color: var(--warm); }
.hw-h1 { font-size: clamp(66px, 11vw, 160px); }
.hw-col > p + p { margin-top: .8em; }

.hw-spec { margin-top: 26px; }
.hw-spec div { display: grid; grid-template-columns: 92px 1fr; gap: 14px; padding: 9px 0;
  border-top: 1px solid var(--rule); }
.hw-spec div:last-child { border-bottom: 1px solid var(--rule); }
.hw-spec dt { font: 400 16px/1.7 var(--fell-sc); letter-spacing: .08em; color: var(--tallow-3); }
.hw-spec dd { font-size: 19px; line-height: 1.34; color: var(--tallow-2); }

.hw-btn { display: inline-flex; align-items: center; height: 52px; padding: 0 26px;
  margin-top: 24px; border: 1px solid var(--tallow-2); text-decoration: none;
  font: italic 400 21px/1 var(--fell); color: var(--tallow); }
.hw-btn[aria-disabled="true"] { cursor: default; }
a.hw-btn[href]:hover { background: var(--tallow); color: var(--soot); }
.hw-btn-q { border-color: var(--rule); color: var(--tallow-2); }

.hw-var { list-style: none; margin: 24px 0 0; padding: 0; display: grid; gap: 14px; }
@media (min-width: 560px) { .hw-var { grid-template-columns: 1fr 1fr; gap: 22px; } }
.hw-var li { border-top: 3px solid var(--v, var(--tallow-2)); padding-top: 9px; }
.hw-var b { display: block; font: 400 26px/1.1 var(--fell-d); }
.hw-var span { display: block; margin-top: 3px; font-size: 18px; line-height: 1.3;
  color: var(--tallow-2); }
.hw-var-3 { grid-template-columns: repeat(3, 1fr); gap: 14px; }
.hw-var-3 b { font-size: 22px; }

/* The plates */
.hw-fig svg { display: block; width: 100%; height: auto; overflow: visible; }
.hw-toothfig { max-width: 340px; margin: 0 auto; width: 74%; }
.hw-chairfig { max-width: 400px; margin: 0 auto; width: 84%; }
.hw-turnipfig { max-width: 520px; margin: 0 auto; width: 92%; }
.hw-cakefig { max-width: 560px; margin: 0 auto; width: 92%; }

/* The story, in a wider measure */
.hw-essay-2 { max-width: none; margin-top: 12px; }
@media (min-width: 900px) { .hw-essay-2 { columns: 3; column-gap: 44px; }
  .hw-essay-2 p { break-inside: avoid; margin-top: 0 !important; } }
.hw-drop::first-letter { font: 400 5.1em/.72 var(--fell-d); float: left; padding: .09em .08em 0 0;
  color: var(--warm); }

/* The plate: the only white thing here */
.rim-name { font: 400 33px var(--fell-sc); letter-spacing: .13em; }
.hw-name { display: block; margin-top: 20px; }
.hw-name span { display: block; font: italic 400 18px/1.2 var(--fell); color: var(--tallow-3); }
.hw-name input, .hw-add input { width: 100%; background: transparent; border: 0;
  border-bottom: 1px solid var(--tallow-3); border-radius: 0; color: var(--tallow);
  font: 400 26px/1.3 var(--fell); padding: 6px 0; outline: 0; }
.hw-name input:focus, .hw-add input:focus { border-color: var(--warm); }
.hw-name input::placeholder, .hw-add input::placeholder { color: var(--tallow-3); }

/* A ticket like the others in the house, in tallow */
.hw-ticket { display: grid; grid-template-columns: auto 1fr; gap: 2px 16px; align-items: center;
  margin: 26px 0 0; padding: 16px 22px; background: var(--tallow); color: var(--soot) !important;
  text-decoration: none; border-radius: 3px;
  -webkit-mask: radial-gradient(circle 10px at 0 50%, #0000 98%, #000) left / 51% 100% no-repeat,
    radial-gradient(circle 10px at 100% 50%, #0000 98%, #000) right / 51% 100% no-repeat;
  mask: radial-gradient(circle 10px at 0 50%, #0000 98%, #000) left / 51% 100% no-repeat,
    radial-gradient(circle 10px at 100% 50%, #0000 98%, #000) right / 51% 100% no-repeat; }
.hw-ticket-k { grid-row: span 2; font: 400 14px/1.15 var(--fell-sc); letter-spacing: .1em;
  color: var(--rubric); padding-right: 16px; border-right: 1.5px dashed var(--rubric);
  align-self: stretch; display: flex; align-items: center; }
.hw-ticket-t { font-size: 20px; line-height: 1.2; }
.hw-ticket-u { font: italic 400 16px/1.25 var(--fell); color: #5c4c36; }

/* The candle, poured to your night */
.hw-candlefig { display: flex; justify-content: center; }
.hw-candlebox { position: relative; height: clamp(420px, 56vw, 620px); width: 100%;
  max-width: 360px; display: flex; flex-direction: column; justify-content: flex-end;
  align-items: center; overflow: hidden; }
.hw-candle { position: relative; width: 50px; height: 60%; flex: none;
  background: linear-gradient(180deg, rgba(255, 240, 184, .66), rgba(0, 0, 0, 0) 130px,
      rgba(13, 10, 7, .72) 100%),
    linear-gradient(90deg, #f6d48a, #d9a648 55%, #6f4c1c);
  border-radius: 6px 6px 0 0; transition: height .55s cubic-bezier(.3, .7, .3, 1); }
.hw-candle::before { content: ""; position: absolute; left: 12%; right: 12%; top: 2px; height: 7px;
  background: #fff0c4; border-radius: 50%; opacity: .75; }
.hw-fig svg.hw-candle-flame { position: absolute; left: 50%; bottom: calc(100% + 6px); width: 92px;
  height: 92px; margin-left: -46px; overflow: visible; }
.hw-candle::after { content: ""; position: absolute; left: 50%; bottom: 100%; width: 2px; height: 10px;
  margin-left: -1px; background: #1c120a; }
.hw-candle.out .hw-candle-flame { display: none; }
.hw-dish { width: 170px; height: 15px; flex: none; border-radius: 50%; background:
  linear-gradient(90deg, #8f8675, #d6ccb9 38%, #4b4438); box-shadow: 0 12px 20px #000; }

.hw-lat { margin-top: 26px; padding: 16px 0 18px; border-top: 3px double var(--rule);
  border-bottom: 3px double var(--rule); }
.hw-lat label { display: flex; justify-content: space-between; align-items: baseline;
  font: 400 16px/1.2 var(--fell-sc); letter-spacing: .1em; color: var(--tallow-3); }
.hw-lat output { font: 400 28px/1 var(--fell-d); letter-spacing: 0; color: var(--tallow); }
.hw-lat input[type=range] { width: 100%; margin: 18px 0 14px; height: 30px; background: none;
  -webkit-appearance: none; appearance: none; cursor: pointer; }
.hw-lat input[type=range]::-webkit-slider-runnable-track { height: 1px; background: var(--tallow-3); }
.hw-lat input[type=range]::-moz-range-track { height: 1px; background: var(--tallow-3); }
.hw-lat input[type=range]::-webkit-slider-thumb { -webkit-appearance: none; width: 16px; height: 30px;
  margin-top: -15px; border-radius: 50% 50% 46% 46% / 72% 72% 28% 28%;
  background: radial-gradient(circle at 50% 70%, #fff3cf, #ffc662 45%, #d96f1f); border: 0; }
.hw-lat input[type=range]::-moz-range-thumb { width: 16px; height: 30px;
  border-radius: 50% 50% 46% 46% / 72% 72% 28% 28%;
  background: radial-gradient(circle at 50% 70%, #fff3cf, #ffc662 45%, #d96f1f); border: 0; }
.hw-night { font: 400 clamp(28px, 3.4vw, 40px)/1.08 var(--fell-d); color: var(--warm); }
.hw-nightnote { margin-top: 6px; font-size: 19px; line-height: 1.3; color: var(--tallow-2); }
.hw-places { list-style: none; margin: 14px 0 0; padding: 0; display: flex; flex-wrap: wrap;
  gap: 3px 16px; }
.hw-places button { padding: 3px 0; background: none; border: 0; color: var(--tallow-3);
  font: italic 400 18px/1.4 var(--fell); cursor: pointer; text-decoration: underline;
  text-decoration-color: var(--rule); text-underline-offset: 3px; }
.hw-places button:hover { color: var(--warm); }

/* The rest of the house */
.hw-cards { display: grid; gap: 0 44px; margin-top: 12px; border-top: 3px double var(--rule); }
@media (min-width: 760px) { .hw-cards { grid-template-columns: 1fr 1fr; } }
@media (min-width: 1080px) { .hw-cards { grid-template-columns: 1fr 1fr 1fr; } }
.hw-card { display: block; padding: 18px 0 22px; border-bottom: 1px solid var(--rule);
  text-decoration: none; }
.hw-card-l { display: block; font: 400 14px/1.2 var(--fell-sc); letter-spacing: .12em;
  color: var(--tallow-3); }
.hw-card b { display: block; margin: 7px 0 6px; font: 400 31px/1.05 var(--fell-d); }
.hw-card b i { font-style: italic; }
.hw-card-t { display: block; font-size: 19px; line-height: 1.34; color: var(--tallow-2); }
.hw-card:hover b { color: var(--warm); }

/* Is it allowed? */
.hw-faith { margin-top: 28px; border-top: 3px double var(--rule); }
.hw-faith div { display: grid; gap: 4px 44px; padding: 16px 0; border-bottom: 1px solid var(--rule); }
@media (min-width: 760px) { .hw-faith div { grid-template-columns: 300px 1fr; } }
.hw-faith dt { font: 400 27px/1.15 var(--fell-d); }
.hw-faith dt a { text-decoration: none; }
.hw-faith dt a:hover { color: var(--warm); }
.hw-faith dd { color: var(--tallow-2); max-width: 36em; }

/* The way out */
.hw-end { padding-bottom: clamp(68px, 10vw, 150px); }
.hw-endgrid { display: grid; gap: 14px; }
@media (min-width: 760px) { .hw-endgrid { grid-template-columns: 1fr 1fr; } }
.hw-endlink { display: block; padding: 26px 26px 30px; border: 1px solid var(--rule);
  text-decoration: none; }
.hw-endlink:hover { border-color: var(--warm); }
.hw-endlink b { display: block; margin: 10px 0 12px; font: 400 clamp(40px, 5vw, 68px)/1 var(--fell-d); }
.hw-endlink b em { color: var(--warm); }
.hw-endlink span:last-child { color: var(--tallow-2); }

/* Who is coming? */
.hw-tablehead { padding-top: clamp(34px, 6vw, 72px); }
.hw-add { display: flex; gap: 12px; align-items: flex-end; margin-top: 22px; max-width: 620px; }
.hw-add input { flex: 1; min-width: 0; font-size: 28px; }
.hw-add button { flex: none; height: 50px; padding: 0 20px; background: var(--tallow);
  color: var(--soot); border: 0; font: italic 400 20px/1 var(--fell); cursor: pointer; }
.hw-add button:hover { background: var(--warm); }
.hw-planwrap { max-width: 720px; margin: 30px auto 0; padding: 0 clamp(0px, 2vw, 16px); }
.hw-plan { display: block; width: 100%; height: auto; overflow: visible; }
.hw-plan text { font-family: var(--fell-sc); }
.hw-plan .lit { animation: hw-lit 1.8s ease-out both; }
@keyframes hw-lit { from { opacity: 0; } to { opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .hw-plan .lit { animation: none; } }
.hw-tablebelow { padding-top: 30px; padding-bottom: clamp(60px, 9vw, 120px); max-width: 780px; }
.hw-names { list-style: none; margin: 0; padding: 0; border-top: 3px double var(--rule); }
.hw-names:empty { border: 0; }
.hw-names li { display: grid; grid-template-columns: 1fr auto; gap: 6px 14px; align-items: baseline;
  padding: 12px 0; border-bottom: 1px solid var(--rule); }
.hw-names b { font: 400 29px/1.1 var(--fell-d); overflow-wrap: anywhere; }
.hw-names select { grid-column: 1; background: transparent; border: 0; padding: 2px 0;
  color: var(--tallow-2); font: italic 400 18px/1.3 var(--fell); max-width: 100%; }
.hw-names select option { color: #111; }
.hw-names button { grid-column: 2; grid-row: 1 / span 2; align-self: center; background: none; border: 0;
  color: var(--tallow-3); font: italic 400 17px/1.2 var(--fell); cursor: pointer; text-decoration: underline;
  text-decoration-color: var(--rule); text-underline-offset: 3px; padding: 6px 0; }
.hw-names button:hover { color: var(--warm); }
.hw-bill { margin-top: 26px; }
.hw-bill h2 { font: 400 15px/1.2 var(--fell-sc); letter-spacing: .13em; color: var(--tallow-3); }
.hw-bill ul { list-style: none; margin: 8px 0 0; padding: 0; }
.hw-bill li { padding: 6px 0; border-bottom: 1px solid var(--rule); color: var(--tallow-2); }
.hw-bill li a { color: var(--tallow); }
.hw-bill .hw-none { font: 400 clamp(27px, 3.4vw, 38px)/1.14 var(--fell-d); color: var(--tallow-2); }
.hw-private { margin-top: 26px; font-size: 18px; line-height: 1.34; color: var(--tallow-3); }
.hw-tablebtns { display: flex; flex-wrap: wrap; gap: 0 12px; }

/* The order of the night: a missal with nothing to say */
body.hw-orderpage { background: var(--paper); color: var(--rubric);
  font: 400 21px/1.4 var(--fell); }
.hw-orderpage .ftop { background: var(--paper); border-color: #d6c7aa; }
.hw-orderpage .ftop .mark { color: #120d08; }
.hw-orderpage .ftop-link { color: var(--rubric); font: italic 400 19px/1 var(--fell); }
.hw-orderpage .foot { background: #120d08; }
.hw-sheet { max-width: 690px; margin: 0 auto; padding: clamp(40px, 7vw, 90px) var(--gut) clamp(50px, 8vw, 100px); }
.hw-order-l { font: 400 17px/1.2 var(--fell-sc); letter-spacing: .14em; text-align: center; }
.hw-sheet h1 { font: 400 clamp(46px, 8.4vw, 82px)/1 var(--fell-d); text-align: center; margin: 12px 0 0; }
.hw-order-note { margin: 22px auto 0; padding: 14px 0; max-width: 30em; text-align: center; font-style: italic;
  font-size: 19px; line-height: 1.34; border-top: 3px double var(--rubric); border-bottom: 3px double var(--rubric); }
.hw-order-list { list-style: none; margin: 30px 0 0; padding: 0; }
.hw-order-list > li { display: grid; grid-template-columns: 58px 1fr; gap: 0 12px; padding: 9px 0; break-inside: avoid; }
.hw-order-n { font: 400 19px/1.5 var(--fell-sc); letter-spacing: .06em; text-align: right; }
.hw-order-names { grid-column: 2; list-style: none; margin: 8px 0 2px; padding: 0; }
.hw-order-names li { min-height: 1.5em; padding: 3px 0 2px; border-bottom: 1px solid #c7a58d;
  color: #120d08; font: 400 27px/1.2 var(--fell-d); }
.hw-order-end { margin-top: 26px; text-align: center; font-style: italic; }
.hw-order-btns { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px 22px; align-items: center;
  margin-top: 22px; font: italic 400 19px/1 var(--fell); }
.hw-order-btns a { color: var(--rubric); text-underline-offset: 3px; }
.hw-order-btns button { height: 48px; padding: 0 24px; background: var(--rubric); color: var(--paper);
  border: 0; font: italic 400 20px/1 var(--fell); cursor: pointer; }
@media print {
  @page { margin: 16mm; }
  body.hw-orderpage { background: #fff; font-size: 12.5pt; }
  .hw-orderpage .ftop, .hw-orderpage .foot, .hw-order-btns { display: none !important; }
  .hw-sheet { padding: 0; max-width: none; }
  .hw-sheet h1 { font-size: 34pt; }
  .hw-order-list { margin-top: 12pt; }
  .hw-order-list > li { padding: 3pt 0; }
  * { -webkit-print-color-adjust: exact; print-color-adjust: exact; }
}

/* Phones */
@media (max-width: 759px) {
  body.hw { font-size: 20px; }
  .hw-spec div { grid-template-columns: 78px 1fr; }
  .hw-candlebox { height: 400px; }
  .hw-lead { text-align: left; }
  .hw-hero { text-align: center; }
}

/* Version 32: the photographs.  They stay on the soot, flush to the edge
   on phones like every photo in the house, each with a numbered plate
   line under it.  The 1667 plate is a real page, so it stays on paper:
   the one light rectangle in the room. */
.hw-herofig { max-width: 1280px; margin: clamp(18px, 3vw, 34px) auto 0; }
.hw-herofig img, .hw-photo img, .hw-guise img { display: block; width: 100%; height: auto; }
@media (min-width: 1281px) {
  .hw-herofig img, .hw-guise img {
    -webkit-mask-image: linear-gradient(90deg, transparent, #000 5%, #000 95%, transparent);
    mask-image: linear-gradient(90deg, transparent, #000 5%, #000 95%, transparent); }
}
.hw-grid > * { min-width: 0; }
.hw-wide { margin-top: clamp(44px, 7vw, 96px); }
.hw-widefirst { margin-bottom: clamp(44px, 7vw, 90px); }
.hw-drawing { max-width: 760px; margin: clamp(56px, 8vw, 110px) auto 0; }
.hw-guise { max-width: 1280px; margin: 8px auto clamp(34px, 5vw, 64px); }
.hw-holderfig { max-width: 760px; margin: clamp(44px, 7vw, 90px) auto 0; }
@media (max-width: 899px) {
  .hw-grid > .hw-photo { order: -1; }
  .hw-photo { margin-left: calc(-1 * var(--gut)); margin-right: calc(-1 * var(--gut)); }
  .hw-photo .hw-cap, .hw-herofig .hw-cap, .hw-guise .hw-cap,
  .hw-leaf .hw-cap { padding: 0 var(--gut); }
  .hw-holderfig { margin-left: calc(-1 * var(--gut)); margin-right: calc(-1 * var(--gut)); }
}

/* The 1667 plate */
.hw-storygrid { display: grid; gap: 34px; align-items: start; }
.hw-storygrid > * { min-width: 0; }
@media (min-width: 900px) {
  .hw-storygrid { grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: 72px; }
}
.hw-leafpage { padding: clamp(16px, 2.4vw, 30px); background: #ecdfc4;
  box-shadow: 0 34px 60px -24px #000, inset 0 0 70px rgba(104, 70, 24, .3); }
.hw-leafpage img { display: block; width: 100%; height: auto; mix-blend-mode: multiply; }
.hw-essay-1 { margin: 6px 0 0; max-width: 33em; }
@media (max-width: 899px) {
  .hw-leaf { margin-left: calc(-1 * var(--gut)); margin-right: calc(-1 * var(--gut)); }
}

/* Try a name: the drawn plate, under the photographed one */
.hw-rim { display: grid; gap: 18px; margin-top: clamp(44px, 7vw, 90px); align-items: center; }
.hw-rim > * { min-width: 0; }
.hw-rim .hw-name { margin-top: 0; }
.hw-rim .hw-platefig { max-width: 460px; width: 100%; margin: 0 auto; }
@media (min-width: 900px) {
  .hw-rim { grid-template-columns: 1fr 1fr; gap: 80px; }
}
.hw-candlegrid { margin-top: 0; }
/* The scan has a later "TAVOLA I" over the plate: 44 of its 816 pixels
   of width, off the top. */
.hw-leafcrop { overflow: hidden; }
.hw-leafcrop img { margin-top: -5.4%; }
/* Desktop: beside a long text the photo stays in view while you read. */
@media (min-width: 900px) {
  .hw-grid > .hw-photo { align-self: start; position: sticky; top: 28px; }
}