/* Circus Folk :: v4.0 :: the four-colour job
   One press, four plates, and stock that changes with the hour.
   Every colour comes from a custom property so a mark drawn once
   prints correctly in every register. Do not hard-code a hex below
   the :root blocks. */


/* ---------- the harlequin bands, cut once per stock ---------- */
:root{
  --harl-day:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20520%2042%22%20width%3D%22520%22%20height%3D%2242%22%3E%3Crect%20x%3D%220%22%20y%3D%220%22%20width%3D%22520%22%20height%3D%221.4%22%20fill%3D%22%23221B18%22%2F%3E%3Crect%20x%3D%220%22%20y%3D%2240.6%22%20width%3D%22520%22%20height%3D%221.4%22%20fill%3D%22%23221B18%22%2F%3E%3Cpath%20d%3D%22M0.0%2019.6%20L26.2%201.8%20L52.0%2018.9%20L26.1%2038.7%20Z%22%20fill%3D%22%23221B18%22%2F%3E%3Cpath%20d%3D%22M52.0%2018.9%20L76.1%201.7%20L104.0%2020.5%20L77.2%2040.7%20Z%22%20fill%3D%22%238E2733%22%2F%3E%3Cpath%20d%3D%22M104.0%2020.5%20L131.6%203.2%20L156.0%2019.2%20L130.6%2040.4%20Z%22%20fill%3D%22%23C9A15E%22%2F%3E%3Cpath%20d%3D%22M156.0%2019.2%20L180.5%201.9%20L208.0%2018.7%20L181.4%2039.9%20Z%22%20fill%3D%22%233D5B44%22%2F%3E%3Cpath%20d%3D%22M208.0%2018.7%20L235.1%203.3%20L260.0%2020.5%20L234.4%2040.6%20Z%22%20fill%3D%22%23221B18%22%2F%3E%3Cpath%20d%3D%22M260.0%2020.5%20L284.0%202.7%20L312.0%2023.2%20L285.2%2040.0%20Z%22%20fill%3D%22%238E2733%22%2F%3E%3Cpath%20d%3D%22M312.0%2023.2%20L338.0%201.6%20L364.0%2022.6%20L338.0%2039.5%20Z%22%20fill%3D%22%23C9A15E%22%2F%3E%3Cpath%20d%3D%22M364.0%2022.6%20L388.0%203.5%20L416.0%2022.4%20L389.2%2040.6%20Z%22%20fill%3D%22%233D5B44%22%2F%3E%3Cpath%20d%3D%22M416.0%2022.4%20L442.2%201.9%20L468.0%2019.6%20L442.1%2040.7%20Z%22%20fill%3D%22%23221B18%22%2F%3E%3Cpath%20d%3D%22M468.0%2019.6%20L494.3%203.4%20L520.0%2019.6%20L494.1%2040.5%20Z%22%20fill%3D%22%238E2733%22%2F%3E%3C%2Fsvg%3E");
  --harl-gold:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20520%2042%22%20width%3D%22520%22%20height%3D%2242%22%3E%3Crect%20x%3D%220%22%20y%3D%220%22%20width%3D%22520%22%20height%3D%221.4%22%20fill%3D%22%232A1C10%22%2F%3E%3Crect%20x%3D%220%22%20y%3D%2240.6%22%20width%3D%22520%22%20height%3D%221.4%22%20fill%3D%22%232A1C10%22%2F%3E%3Cpath%20d%3D%22M0.0%2019.6%20L26.2%201.8%20L52.0%2018.9%20L26.1%2038.7%20Z%22%20fill%3D%22%232A1C10%22%2F%3E%3Cpath%20d%3D%22M52.0%2018.9%20L76.1%201.7%20L104.0%2020.5%20L77.2%2040.7%20Z%22%20fill%3D%22%238E2733%22%2F%3E%3Cpath%20d%3D%22M104.0%2020.5%20L131.6%203.2%20L156.0%2019.2%20L130.6%2040.4%20Z%22%20fill%3D%22%23A87A2A%22%2F%3E%3Cpath%20d%3D%22M156.0%2019.2%20L180.5%201.9%20L208.0%2018.7%20L181.4%2039.9%20Z%22%20fill%3D%22%234A6B48%22%2F%3E%3Cpath%20d%3D%22M208.0%2018.7%20L235.1%203.3%20L260.0%2020.5%20L234.4%2040.6%20Z%22%20fill%3D%22%232A1C10%22%2F%3E%3Cpath%20d%3D%22M260.0%2020.5%20L284.0%202.7%20L312.0%2023.2%20L285.2%2040.0%20Z%22%20fill%3D%22%238E2733%22%2F%3E%3Cpath%20d%3D%22M312.0%2023.2%20L338.0%201.6%20L364.0%2022.6%20L338.0%2039.5%20Z%22%20fill%3D%22%23A87A2A%22%2F%3E%3Cpath%20d%3D%22M364.0%2022.6%20L388.0%203.5%20L416.0%2022.4%20L389.2%2040.6%20Z%22%20fill%3D%22%234A6B48%22%2F%3E%3Cpath%20d%3D%22M416.0%2022.4%20L442.2%201.9%20L468.0%2019.6%20L442.1%2040.7%20Z%22%20fill%3D%22%232A1C10%22%2F%3E%3Cpath%20d%3D%22M468.0%2019.6%20L494.3%203.4%20L520.0%2019.6%20L494.1%2040.5%20Z%22%20fill%3D%22%238E2733%22%2F%3E%3C%2Fsvg%3E");
  --harl-night:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20520%2042%22%20width%3D%22520%22%20height%3D%2242%22%3E%3Crect%20x%3D%220%22%20y%3D%220%22%20width%3D%22520%22%20height%3D%221.4%22%20fill%3D%22%23C9BCAE%22%2F%3E%3Crect%20x%3D%220%22%20y%3D%2240.6%22%20width%3D%22520%22%20height%3D%221.4%22%20fill%3D%22%23C9BCAE%22%2F%3E%3Cpath%20d%3D%22M0.0%2019.6%20L26.2%201.8%20L52.0%2018.9%20L26.1%2038.7%20Z%22%20fill%3D%22%23C9BCAE%22%2F%3E%3Cpath%20d%3D%22M52.0%2018.9%20L76.1%201.7%20L104.0%2020.5%20L77.2%2040.7%20Z%22%20fill%3D%22%23B8646F%22%2F%3E%3Cpath%20d%3D%22M104.0%2020.5%20L131.6%203.2%20L156.0%2019.2%20L130.6%2040.4%20Z%22%20fill%3D%22%23C9A15E%22%2F%3E%3Cpath%20d%3D%22M156.0%2019.2%20L180.5%201.9%20L208.0%2018.7%20L181.4%2039.9%20Z%22%20fill%3D%22%237A9A72%22%2F%3E%3Cpath%20d%3D%22M208.0%2018.7%20L235.1%203.3%20L260.0%2020.5%20L234.4%2040.6%20Z%22%20fill%3D%22%23C9BCAE%22%2F%3E%3Cpath%20d%3D%22M260.0%2020.5%20L284.0%202.7%20L312.0%2023.2%20L285.2%2040.0%20Z%22%20fill%3D%22%23B8646F%22%2F%3E%3Cpath%20d%3D%22M312.0%2023.2%20L338.0%201.6%20L364.0%2022.6%20L338.0%2039.5%20Z%22%20fill%3D%22%23C9A15E%22%2F%3E%3Cpath%20d%3D%22M364.0%2022.6%20L388.0%203.5%20L416.0%2022.4%20L389.2%2040.6%20Z%22%20fill%3D%22%237A9A72%22%2F%3E%3Cpath%20d%3D%22M416.0%2022.4%20L442.2%201.9%20L468.0%2019.6%20L442.1%2040.7%20Z%22%20fill%3D%22%23C9BCAE%22%2F%3E%3Cpath%20d%3D%22M468.0%2019.6%20L494.3%203.4%20L520.0%2019.6%20L494.1%2040.5%20Z%22%20fill%3D%22%23B8646F%22%2F%3E%3C%2Fsvg%3E");
}

/* ============================================================
   THE PLATES
   Four inks. None of them lands square on the black.
   Each misses in its own direction; that is the signature.
   ============================================================ */
:root{
  --rx:2.2px;  --ry:1.5px;    /* red   */
  --gx:-1.9px; --gy:1.3px;    /* gold  */
  --vx:1.5px;  --vy:-1.7px;   /* green */
  --col:min(100%,880px);
  --sheet:min(100%,1120px);
  --pad:56px;
}

/* ---------- the eight hours ----------
   The Book of Hours moves through the day by TINTING the parchment, not by
   swapping it for black card. Dawn is cool and pale, noon opens up, golden
   hour ambers, twilight goes rose, night and firelight are scorched vellum
   read by candle. Same stains, same fibre, same grain in every one. */

.h-dawn{
  --paper:#F3E8D4; --paper2:#E9DBC1; --knock:#FAF2E1;
  --ink:#241C19; --wound:#8E2733; --gold:#8A6A1E; --moss:#3D5B44;
  --slate:#4E5E7C; --quiet:#5F5041; --rule:rgba(36,28,25,.44);
  --hush:rgba(36,28,25,.22); --lift:rgba(60,40,25,.16);
  --grain:multiply; --grain-op:.24; --harl:var(--harl-day);
}
.h-day{
  --paper:#EFE4CC; --paper2:#E5D5B4; --knock:#F7EFDB;
  --ink:#221B18; --wound:#8E2733; --gold:#8A6A1E; --moss:#3D5B44;
  --slate:#4E5E7C; --quiet:#5A4A38; --rule:rgba(34,27,24,.45);
  --hush:rgba(34,27,24,.24); --lift:rgba(60,40,25,.18);
  --grain:multiply; --grain-op:.26; --harl:var(--harl-day);
}
.h-noon{
  --paper:#EEE0BE; --paper2:#E0CDA0; --knock:#F7EDD2;
  --ink:#241B14; --wound:#8E2733; --gold:#7F6119; --moss:#3B5940;
  --slate:#4B5A74; --quiet:#5C4A2E; --rule:rgba(36,27,20,.45);
  --hush:rgba(36,27,20,.23); --lift:rgba(66,44,20,.19);
  --grain:multiply; --grain-op:.25; --harl:var(--harl-day);
}
.h-gold{
  --paper:#EDD4A2; --paper2:#DBB876; --knock:#F7E7C0;
  --ink:#2A1E12; --wound:#8A2430; --gold:#6F5214; --moss:#3A5740;
  --slate:#48566E; --quiet:#5E4726; --rule:rgba(42,30,18,.46);
  --hush:rgba(42,30,18,.24); --lift:rgba(72,48,20,.2);
  --grain:multiply; --grain-op:.24; --harl:var(--harl-gold);
}
.h-dusk{
  --paper:#D2A9A3; --paper2:#B98B89; --knock:#E7CCC4;
  --ink:#2B1A1C; --wound:#7E2029; --gold:#6C4A18; --moss:#35513C;
  --slate:#44506C; --quiet:#5C3F3C; --rule:rgba(43,26,28,.5);
  --hush:rgba(43,26,28,.26); --lift:rgba(60,30,32,.22);
  --grain:multiply; --grain-op:.22; --harl:var(--harl-gold);
}
/* scorched vellum, read by candle :: the ink goes light, the paper never
   goes flat black -- the stains and fibre are still there underneath */
.h-night{
  --paper:#2C2333; --paper2:#1A1424; --knock:#3A2F44;
  --ink:#EFE1C7; --wound:#E2A2A8; --gold:#D3AA63; --moss:#93B189;
  --slate:#A3ADC6; --quiet:#B9AC94; --rule:rgba(239,225,199,.42);
  --hush:rgba(239,225,199,.2); --lift:rgba(0,0,0,.38);
  --grain:screen; --grain-op:.15; --harl:var(--harl-night);
}
.h-fire{
  --paper:#35232B; --paper2:#20141A; --knock:#453039;
  --ink:#F0DFC0; --wound:#E8AC92; --gold:#D9AF67; --moss:#93B189;
  --slate:#ADA5B6; --quiet:#BCA890; --rule:rgba(240,223,192,.42);
  --hush:rgba(240,223,192,.2); --lift:rgba(0,0,0,.4);
  --grain:screen; --grain-op:.15; --harl:var(--harl-night);
}
.h-first{
  --paper:#F4EAD8; --paper2:#EBDEC4; --knock:#FCF5E6;
  --ink:#241C19; --wound:#8E2733; --gold:#8A6A1E; --moss:#3D5B44;
  --slate:#4E5E7C; --quiet:#5F5041; --rule:rgba(36,28,25,.44);
  --hush:rgba(36,28,25,.22); --lift:rgba(60,40,25,.15);
  --grain:multiply; --grain-op:.22; --harl:var(--harl-day);
}

*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;background:#0B0810}
body{margin:0;background:#0B0810;color:var(--ink);
  font:19px/1.58 'IM Fell English',Georgia,serif}
img,svg,video{display:block;max-width:100%}
img{height:auto}
a{color:inherit}
:focus-visible{outline:2px solid var(--gold);outline-offset:4px}
.skip{position:absolute;left:-9999px;top:0;z-index:200;background:var(--wound);color:#F6EEDC;
  padding:12px 18px;font:.7rem/1 'IM Fell Double Pica SC',Georgia,serif;letter-spacing:.16em}
.skip:focus{left:8px;top:8px}

/* ============================================================
   THE SHEET
   ============================================================ */
.sheet{position:relative;width:var(--sheet);margin:0 auto;background:var(--paper);overflow:clip;
  box-shadow:0 0 0 1px rgba(0,0,0,.35),0 40px 90px rgba(0,0,0,.5)}
.sheet::before{content:"";position:absolute;inset:0;z-index:0;pointer-events:none;
  background:
    radial-gradient(120% 50% at 50% 0%,rgba(150,110,60,.13),transparent 60%),
    radial-gradient(80% 40% at 0% 76%,rgba(120,80,45,.11),transparent 62%),
    linear-gradient(180deg,var(--paper),var(--paper2))}
.h-night .sheet::before,.h-fire .sheet::before{background:
    radial-gradient(120% 55% at 50% 0%,rgba(201,150,80,.13),transparent 62%),
    radial-gradient(80% 45% at 4% 74%,rgba(180,120,70,.11),transparent 64%),
    radial-gradient(60% 40% at 92% 30%,rgba(160,110,140,.10),transparent 66%),
    linear-gradient(180deg,var(--paper),var(--paper2))}
.h-fire .sheet::before{background:
    radial-gradient(70% 42% at 50% 10%,rgba(214,120,62,.20),transparent 64%),
    radial-gradient(70% 40% at 10% 80%,rgba(180,90,50,.14),transparent 66%),
    linear-gradient(180deg,var(--paper),var(--paper2))}
.grain{position:absolute;inset:0;z-index:80;pointer-events:none;
  opacity:var(--grain-op);mix-blend-mode:var(--grain);
  background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.4'/%3E%3C/svg%3E")}

/* ---------- the hand-cut harlequin rule ---------- */
.harl{position:relative;z-index:3;height:26px;background-image:var(--harl);
  background-repeat:repeat-x;background-size:auto 100%;filter:url(#press);opacity:.94}
.harl.tall{height:32px}

/* ============================================================
   HEADER
   ============================================================ */
.head{position:sticky;top:0;z-index:20;display:flex;align-items:center;justify-content:space-between;
  gap:18px;padding:18px var(--pad);background:var(--paper);
  border-bottom:1px solid transparent}
.wm{display:inline-flex;flex-direction:column;align-items:center;text-decoration:none;line-height:1}
.wm .c{font-family:RedSuit,Georgia,serif;font-size:2.9rem;line-height:.62;letter-spacing:-.035em;color:var(--ink)}
.wm .f{font:.68rem/1 'IM Fell Double Pica SC',Georgia,serif;letter-spacing:.5em;text-indent:.5em;
  color:var(--wound);margin-top:6px;transform:translate(var(--rx),var(--ry))}
.headright{display:flex;align-items:center;gap:22px}
.hourstamp{text-align:right;font:.64rem/1.7 'IM Fell Double Pica SC',Georgia,serif;letter-spacing:.2em;color:var(--slate)}
.hourstamp b{display:block;font-weight:400;color:var(--gold);transform:translate(var(--gx),var(--gy))}
.menu{position:relative}
.menu summary{list-style:none;cursor:pointer;padding:12px 18px;color:var(--ink);
  font:.64rem/1 'IM Fell Double Pica SC',Georgia,serif;letter-spacing:.2em;text-transform:uppercase;
  border:1px solid var(--rule)}
.menu summary::-webkit-details-marker{display:none}
.menu summary:hover{color:var(--wound)}
.menu nav{position:absolute;right:0;top:calc(100% + 10px);width:290px;z-index:60;
  background:var(--knock);border:1px solid var(--rule);padding:6px;
  filter:drop-shadow(7px 8px 0 var(--lift))}
.menu nav a{display:block;text-decoration:none;padding:11px 13px;border-bottom:1px solid var(--hush);
  font:.66rem/1.35 'IM Fell Double Pica SC',Georgia,serif;letter-spacing:.12em;text-transform:uppercase}
.menu nav a:last-child{border-bottom:0}
.menu nav a:hover{color:var(--wound)}
.menu nav a small{display:block;font:.62rem/1.4 'IM Fell English',Georgia,serif;letter-spacing:.02em;
  text-transform:none;color:var(--quiet);margin-top:3px}
.menu nav a[aria-current]{color:var(--wound)}

/* ============================================================
   THE ARCH :: proscenium, tent mouth, illuminated frame
   ============================================================ */
.crown{position:relative;z-index:3;width:var(--col);margin:0 auto;padding-top:12px}
.crown>svg.arch{width:100%;height:auto;filter:url(#press)}
/* two swags, hung from the shoulders of the arch, so the centre stays
   clear for the keystone and the rubric underneath it */
.crown>svg.bunt{position:absolute;top:23%;width:min(58%,480px);height:auto;
  color:var(--ink);z-index:4;opacity:.9;
  filter:drop-shadow(var(--rx) var(--ry) 0 color-mix(in srgb,var(--wound) 60%,transparent))}
.crown>svg.bunt.bl{left:1%;clip-path:inset(0 54% 0 0)}
.crown>svg.bunt.br{right:1%;clip-path:inset(0 0 0 54%)}
.keystone{position:absolute;left:0;right:0;top:4%;display:grid;place-items:center;z-index:5}
.keystone svg{width:clamp(84px,11vw,132px);height:auto;color:var(--ink);filter:url(#press)}
.crown-copy{position:absolute;left:11%;right:11%;bottom:10px;text-align:center;z-index:6}

/* ============================================================
   TYPE
   ============================================================ */
.rubric{font:.78rem/1.6 'IM Fell Double Pica SC',Georgia,serif;letter-spacing:.2em;color:var(--wound);
  margin:0 0 14px;transform:translate(var(--rx),var(--ry))}
h1{font:400 clamp(2.4rem,6.4vw,5rem)/.9 'Grenze Gotisch',Georgia,serif;margin:0;letter-spacing:-.012em}
h2{font:400 clamp(1.8rem,4vw,2.9rem)/1 'Grenze Gotisch',Georgia,serif;margin:0 0 16px}
h3{font:400 clamp(1.4rem,2.6vw,1.9rem)/1 'Grenze Gotisch',Georgia,serif;margin:0 0 10px}
.red{color:var(--wound);display:inline-block;transform:translate(var(--rx),var(--ry))}
.gld{color:var(--gold);display:inline-block;transform:translate(var(--gx),var(--gy))}
.grn{color:var(--moss);display:inline-block;transform:translate(var(--vx),var(--vy))}
.redblock{color:var(--wound);transform:translate(var(--rx),var(--ry))}
/* ink squash: type sits in the stock rather than on it */
.col p,.col h1,.col h2,.col h3,.col span,.crown-copy p,.crown-copy h1{text-shadow:0 0 .55px currentColor}

.col{position:relative;z-index:3;width:var(--col);margin:0 auto;padding:0 8px}
.body{position:relative;z-index:3;width:var(--col);margin:0 auto;padding:30px var(--pad) 0;
  border-left:1px solid var(--rule);border-right:1px solid var(--rule)}
.body.flush{padding-top:34px}
.lead{font-size:1.06rem;max-width:52ch;margin:0 auto 26px;text-align:center;font-style:italic}
.prose{max-width:58ch;margin:0 auto}
.prose p{margin:0 0 22px}
.prose p.tag{font-style:italic;color:var(--wound)}
.eyebrow{font:.72rem/2 'IM Fell Double Pica SC',Georgia,serif;letter-spacing:.28em;text-transform:uppercase;
  color:var(--quiet);margin:0 0 10px;text-align:center}
.band{padding:6px 0 12px}
.band p{margin:0 0 20px}
.note{margin:0 0 18px;font-style:italic;font-size:.96rem;color:var(--quiet)}

/* ---------- fleuron rule ---------- */
.fleuron{display:flex;align-items:center;gap:14px;margin:32px auto;width:min(100%,560px);color:var(--ink)}
.fleuron i{flex:1;height:4px;border-top:1px solid currentColor;border-bottom:1px solid currentColor}
.fleuron svg{width:32px;height:auto;flex:none;color:var(--gold);filter:url(#press);
  transform:translate(var(--gx),var(--gy))}
.fleuron.red svg{color:var(--wound);transform:translate(var(--rx),var(--ry))}
.hair{width:min(100%,440px);margin:12px auto;border:0;border-top:1px solid var(--rule)}
.hair.thick{border-top:4px solid var(--rule);width:min(100%,280px)}
.hair.plate{border-top:2px solid var(--wound);transform:translate(var(--rx),var(--ry))}

/* ---------- the woodcut initial ---------- */
.woodcut{float:left;position:relative;width:112px;height:112px;margin:8px 20px 4px 0;
  background:var(--ink);filter:url(#press)}
.woodcut::before{content:"";position:absolute;inset:0;
  background:repeating-linear-gradient(46deg,transparent 0 3px,
    color-mix(in srgb,var(--paper) 70%,transparent) 3px 4.2px)}
.woodcut span{position:absolute;inset:0;display:grid;place-items:center;
  font:5.4rem/1 'IM Fell English',Georgia,serif;color:var(--paper);text-shadow:none}

/* ============================================================
   THE BILL :: hierarchy by size and by plate, never by grid
   ============================================================ */
.bill{text-align:center;padding:4px 0}
.bill p{margin:0}
.b-sm{font:.74rem/2 'IM Fell Double Pica SC',Georgia,serif;letter-spacing:.3em;text-transform:uppercase}
.b-md{font:clamp(1.4rem,3.4vw,2.4rem)/1.06 'IM Fell English',Georgia,serif}
.b-wood{font:clamp(1.6rem,4.4vw,3rem)/1.02 Rye,Georgia,serif}
.b-goth{font:clamp(1.8rem,4.8vw,3.2rem)/1 'Grenze Gotisch',Georgia,serif}
.b-say{font:italic 1rem/1.72 'IM Fell English',Georgia,serif}
.b-shout{font-family:RedSuit,Georgia,serif;font-size:clamp(4rem,14vw,9.5rem);line-height:.72;
  color:var(--wound);margin-top:20px!important;transform:translate(var(--rx),var(--ry))}


/* ---------- the cut shapes ----------
   Generated once, then frozen. Each niche and each door is a
   slightly different cut, because a hand-cut block never repeats. */
.niche.one  {clip-path:polygon(0.0% 100.0%,0.5% 100.0%,0.1% 74.7%,0.2% 49.3%,0.1% 24.1%,0.1% 20.1%,2.3% 17.0%,4.3% 14.5%,7.9% 11.3%,12.2% 8.4%,16.9% 6.0%,23.3% 3.8%,29.4% 2.3%,35.5% 1.2%,43.0% 0.1%,49.6% 0.3%,57.1% 0.4%,64.4% 1.2%,71.1% 2.1%,77.3% 3.8%,83.1% 6.2%,87.4% 8.0%,91.8% 11.4%,95.4% 14.1%,97.8% 17.2%,99.4% 20.5%,100.0% 24.1%,99.3% 49.3%,99.7% 74.7%,99.2% 100.0%,80.0% 99.6%,60.0% 99.4%,40.0% 99.8%,20.0% 99.6%,0.0% 99.5%)}
.niche.two  {clip-path:polygon(0.0% 100.0%,0.1% 100.0%,0.2% 74.7%,0.7% 49.3%,0.3% 23.6%,0.5% 20.9%,1.6% 17.3%,4.6% 13.6%,7.8% 11.2%,12.2% 8.5%,16.9% 5.6%,22.6% 3.8%,29.6% 2.3%,36.2% 0.9%,43.1% 0.0%,49.8% 0.2%,57.3% 0.2%,63.7% 0.8%,70.5% 2.0%,77.3% 3.5%,83.1% 6.2%,87.4% 8.2%,92.1% 10.6%,95.4% 14.4%,97.6% 17.3%,99.2% 20.7%,100.0% 23.7%,99.1% 49.3%,99.3% 74.7%,99.9% 100.0%,80.0% 99.4%,60.0% 99.5%,40.0% 100.0%,20.0% 99.5%,0.0% 99.9%)}
.niche.three{clip-path:polygon(0.0% 100.0%,0.8% 100.0%,0.9% 74.7%,0.4% 49.3%,0.0% 24.4%,0.1% 20.9%,2.2% 17.6%,5.0% 13.8%,7.8% 11.2%,12.0% 8.1%,17.0% 6.2%,23.3% 4.1%,29.0% 2.6%,35.9% 0.7%,42.8% 0.2%,49.6% 0.1%,57.0% 0.3%,64.5% 1.1%,70.7% 2.5%,77.5% 3.8%,83.1% 5.4%,87.5% 8.0%,92.5% 11.2%,95.7% 13.8%,98.0% 17.6%,99.1% 20.2%,99.6% 24.0%,99.4% 49.3%,99.9% 74.7%,99.8% 100.0%,80.0% 100.0%,60.0% 99.6%,40.0% 99.4%,20.0% 99.8%,0.0% 99.7%)}
.door                {clip-path:polygon(0.0% 0.5%,14.3% 1.6%,28.6% 1.5%,42.9% 1.2%,57.1% 0.6%,71.4% 1.8%,85.7% 1.8%,100.0% 1.2%,98.8% 14.3%,99.3% 28.6%,99.8% 42.9%,99.1% 57.1%,98.6% 71.4%,99.7% 85.7%,98.2% 100.0%,85.7% 99.3%,71.4% 99.3%,57.1% 99.7%,42.9% 97.8%,28.6% 98.3%,14.3% 98.0%,0.0% 98.6%,0.3% 85.7%,0.9% 71.4%,1.2% 57.1%,0.4% 42.9%,2.1% 28.6%,0.9% 14.3%)}
.door:nth-child(3n+2){clip-path:polygon(0.0% 1.3%,14.3% 1.4%,28.6% 1.9%,42.9% 2.0%,57.1% 2.0%,71.4% 0.9%,85.7% 2.1%,100.0% 1.0%,99.2% 14.3%,99.6% 28.6%,98.8% 42.9%,99.5% 57.1%,99.3% 71.4%,98.6% 85.7%,98.2% 100.0%,85.7% 98.3%,71.4% 99.6%,57.1% 99.7%,42.9% 99.3%,28.6% 98.7%,14.3% 98.1%,0.0% 98.2%,2.1% 85.7%,1.4% 71.4%,1.5% 57.1%,0.8% 42.9%,0.8% 28.6%,0.6% 14.3%)}
.door:nth-child(3n)  {clip-path:polygon(0.0% 0.9%,14.3% 1.1%,28.6% 1.1%,42.9% 0.9%,57.1% 1.2%,71.4% 1.0%,85.7% 0.3%,100.0% 1.0%,99.8% 14.3%,99.6% 28.6%,99.3% 42.9%,97.9% 57.1%,98.8% 71.4%,98.7% 85.7%,98.0% 100.0%,85.7% 98.0%,71.4% 98.7%,57.1% 99.3%,42.9% 98.8%,28.6% 99.1%,14.3% 97.9%,0.0% 99.7%,0.9% 85.7%,1.6% 71.4%,1.4% 57.1%,1.3% 42.9%,1.7% 28.6%,0.7% 14.3%)}
.door.unknown        {clip-path:polygon(0.0% 100.0%,0.9% 100.0%,0.8% 76.7%,0.4% 53.3%,0.0% 30.4%,0.4% 26.1%,1.7% 22.0%,4.4% 17.3%,7.8% 13.9%,11.8% 10.3%,16.8% 6.9%,22.7% 4.5%,29.0% 3.0%,35.8% 1.5%,43.2% 0.7%,50.4% 0.1%,57.3% 0.6%,64.1% 0.9%,70.8% 2.7%,76.7% 4.4%,82.5% 7.5%,88.1% 10.5%,92.0% 13.4%,95.0% 17.7%,98.0% 21.5%,99.2% 25.4%,99.7% 29.7%,99.8% 53.3%,99.7% 76.7%,99.9% 100.0%,80.0% 99.9%,60.0% 99.9%,40.0% 99.7%,20.0% 99.6%,0.0% 99.6%)}

/* ============================================================
   ARCHED NICHES :: the three rings, and anything ring-shaped
   ============================================================ */
.rings{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;margin:14px 0 6px;align-items:end}
.niche{position:relative;padding:2px;color:var(--ink);background:var(--acc);
  filter:drop-shadow(7px 9px 0 var(--lift))}
.niche .in{clip-path:inherit;background:var(--knock);padding:38px 20px 26px;text-align:center;height:100%}
.niche.one  {--acc:var(--wound);--ox:var(--rx);--oy:var(--ry)}
.niche.two  {--acc:var(--gold); --ox:var(--gx);--oy:var(--gy);margin-bottom:22px}
.niche.three{--acc:var(--moss); --ox:var(--vx);--oy:var(--vy)}
.niche .no{display:block;font:2.1rem/1 'IM Fell English',Georgia,serif;color:var(--acc);
  transform:translate(var(--ox),var(--oy))}
.niche h3{margin:2px 0 10px;color:var(--acc);transform:translate(var(--ox),var(--oy))}
.niche p{margin:0 0 10px;font-size:.95rem;line-height:1.5}
.niche .who{display:block;margin-top:12px;font:.62rem/1.6 'IM Fell Double Pica SC',Georgia,serif;
  letter-spacing:.16em;text-transform:uppercase;color:var(--acc);
  transform:translate(var(--ox),var(--oy))}
.niche .dist{display:block;margin:10px 0 0;font-size:.88rem;font-style:italic;color:var(--quiet)}

/* ============================================================
   THE ROSTER OF FOLK :: ruled entries, not cards
   ============================================================ */
.folk{margin:10px auto 0;max-width:62ch}
.folk li{list-style:none;margin:0;padding:18px 0 16px;border-bottom:1px solid var(--hush);
  display:grid;grid-template-columns:34px 1fr;gap:0 16px;align-items:baseline}
.folk li:last-child{border-bottom:0}
.folk .mk{grid-row:span 2;width:26px;height:auto;filter:url(#press);align-self:center}
.folk li:nth-child(3n+1) .mk{color:var(--wound)}
.folk li:nth-child(3n+2) .mk{color:var(--gold)}
.folk li:nth-child(3n)   .mk{color:var(--moss)}
.folk b{font:400 clamp(1.3rem,2.4vw,1.7rem)/1 'Grenze Gotisch',Georgia,serif;font-weight:400}
.folk li:nth-child(3n+1) b{color:var(--wound);transform:translate(var(--rx),var(--ry))}
.folk li:nth-child(3n+2) b{color:var(--gold); transform:translate(var(--gx),var(--gy))}
.folk li:nth-child(3n)   b{color:var(--moss); transform:translate(var(--vx),var(--vy))}
.folk span{grid-column:2;font-style:italic;font-size:.98rem;color:var(--ink);opacity:.88}
.folk ul{padding:0;margin:0}

/* ============================================================
   DOORS :: seven ways in, set as a bill not a grid
   ============================================================ */
.doors{display:grid;grid-template-columns:repeat(2,1fr);gap:14px;margin:6px 0 10px}
.door{position:relative;text-decoration:none;color:var(--ink);padding:22px 20px;
  background:var(--knock);filter:drop-shadow(6px 7px 0 var(--lift));
  display:flex;flex-direction:column;min-height:120px;transition:transform .16s ease}
.door:hover,.door:focus-visible{transform:translate(3px,3px)}
.door em{font-style:normal;font:.6rem/1 'IM Fell Double Pica SC',Georgia,serif;letter-spacing:.18em;color:var(--quiet)}
.door strong{margin-top:12px;font:400 clamp(1.15rem,2.2vw,1.5rem)/1.06 'Grenze Gotisch',Georgia,serif}
.door:nth-child(3n+1) strong{color:var(--wound);transform:translate(var(--rx),var(--ry))}
.door:nth-child(3n+2) strong{color:var(--gold); transform:translate(var(--gx),var(--gy))}
.door:nth-child(3n)   strong{color:var(--moss); transform:translate(var(--vx),var(--vy))}
.door.unknown{grid-column:1/-1;text-align:center;align-items:center;justify-content:center;min-height:0}
.door.unknown strong{font-size:clamp(1.5rem,3.4vw,2.2rem);color:var(--wound);
  transform:translate(var(--rx),var(--ry))}

/* ============================================================
   THE CARTOUCHE BUTTON :: live type inside a cut frame
   ============================================================ */
.ticket-wrap{position:relative;text-align:center;margin:40px 0 34px}
.ticket{position:relative;display:inline-block;text-decoration:none;color:var(--ink);
  padding:36px clamp(44px,8vw,92px);transition:transform .16s ease}
.ticket .tix-frame{position:absolute;inset:0;width:100%;height:100%;z-index:0;
  color:var(--wound);filter:url(#press)}
.ticket .tix-in{position:relative;z-index:1;display:block}
.ticket .fist{font-size:1.6rem;line-height:1;vertical-align:-4px;margin-right:10px;
  display:inline-block;transform:rotate(-7deg)}
.ticket .t{font:clamp(1.25rem,2.5vw,1.65rem)/1 Rye,Georgia,serif;color:var(--wound);text-shadow:none}
.ticket .s{display:block;margin-top:9px;font:.6rem/1.6 'IM Fell Double Pica SC',Georgia,serif;
  letter-spacing:.24em;text-transform:uppercase;color:var(--quiet)}
.ticket:hover,.ticket:focus-visible{transform:translate(3px,3px)}
.seal{position:absolute;right:3%;bottom:-14px;width:clamp(70px,9vw,100px);height:auto;
  color:var(--gold);opacity:.7;filter:url(#press);transform:rotate(-13deg);pointer-events:none}

/* ============================================================
   PLATES (pictures)
   ============================================================ */
figure.cut{margin:34px auto 6px;width:min(100%,400px);text-align:center}
figure.cut .block{border:1px solid var(--rule);padding:9px;background:var(--knock)}
figure.cut img{width:100%;filter:grayscale(1) contrast(1.1) brightness(1.06) sepia(.55) saturate(.9)}
.h-night figure.cut img,.h-dusk figure.cut img,.h-fire figure.cut img{
  filter:grayscale(1) contrast(1.15) brightness(.92) sepia(.4) saturate(.8) invert(.04)}
figure.cut figcaption{margin-top:10px;font:.68rem/1.5 'IM Fell Double Pica SC',Georgia,serif;
  letter-spacing:.15em;color:var(--quiet)}

/* ============================================================
   THE ROSTER FORM
   ============================================================ */
.roster{padding:8px 0 6px}
.rlabel{display:block;font:.62rem/1 'IM Fell Double Pica SC',Georgia,serif;letter-spacing:.14em;
  text-transform:uppercase;color:var(--quiet);margin:0 0 7px}
.rrow{display:grid;grid-template-columns:1fr 1fr;gap:15px;margin-bottom:15px}
.rrow.one{grid-template-columns:1fr}
.roster input[type=text],.roster input[type=email],.roster textarea{width:100%;padding:12px 13px;
  border:1px solid var(--rule);background:var(--knock);color:var(--ink);
  font:.96rem/1.5 'IM Fell English',Georgia,serif}
.roster textarea{min-height:92px;resize:vertical}
.opts{display:grid;grid-template-columns:1fr 1fr;gap:9px 15px;margin:5px 0 17px}
.opt{display:flex;align-items:flex-start;gap:10px;padding:11px 13px;cursor:pointer;
  background:var(--knock);border:1px solid var(--hush);font-size:.9rem;line-height:1.35}
.opt:hover{border-color:var(--rule)}
.opt input{margin:3px 0 0;width:16px;height:16px;accent-color:var(--wound);flex:none}
.opt.on{border-color:var(--wound);box-shadow:2px 2px 0 color-mix(in srgb,var(--wound) 40%,transparent)}
.opt.uk{grid-column:1/-1;justify-content:center;text-align:center}
.rsend{display:inline-flex;padding:14px 26px;cursor:pointer;color:var(--knock);background:var(--wound);
  border:1px solid var(--rule);font:.74rem/1.2 'IM Fell Double Pica SC',Georgia,serif;
  letter-spacing:.14em;text-transform:uppercase;transition:transform .16s ease}
.rsend:hover,.rsend:focus-visible{transform:translate(2px,2px)}
.rfine{margin:13px 0 0;font-size:.78rem;color:var(--quiet)}
.hp{position:absolute;left:-9999px}
fieldset{border:0;padding:0;margin:0}
legend{padding:0}

/* ============================================================
   FOOT
   ============================================================ */
.imprint{position:relative;z-index:3;width:var(--col);margin:0 auto;padding:26px var(--pad) 32px;
  display:flex;justify-content:space-between;align-items:center;gap:20px;
  border-left:1px solid var(--rule);border-right:1px solid var(--rule);
  border-bottom:1px solid var(--rule);
  font:.72rem/1.7 'IM Fell Double Pica SC',Georgia,serif;letter-spacing:.16em;text-transform:uppercase;
  color:var(--quiet)}
.imprint a{text-decoration:none}
.imprint a:hover{color:var(--wound)}
.imprint .bigtop{width:48px;height:auto;color:var(--ink);opacity:.7;filter:url(#press)}
.ext{position:relative;z-index:3;text-align:center;padding:22px var(--pad) 6px;
  font:.62rem/1.8 'IM Fell Double Pica SC',Georgia,serif;letter-spacing:.16em;text-transform:uppercase;
  color:var(--gold)}
.ext a{text-decoration:none}
.ext i{font-style:normal;padding:0 9px;opacity:.5}
.fine{position:relative;z-index:3;text-align:center;padding:0 var(--pad) 30px;
  font-size:.74rem;line-height:1.6;color:var(--quiet);max-width:66ch;margin:0 auto}

@media(prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .ticket,.door,.rsend{transition:none}
}


/* ---------- corrections ---------- */
.ticket .t{white-space:nowrap}
.folk li{gap:3px 16px}
.folk span{margin-top:4px;line-height:1.45}
.folk b{line-height:1.05}
/* long headlines need a smaller setting to stay inside the arch */
.h1-long h1{font-size:clamp(2rem,4.9vw,3.5rem);line-height:.98}
.crown-copy{left:9%;right:9%}
/* doors are cut, so the shadow has to follow the cut */
.door{filter:drop-shadow(6px 7px 0 var(--lift))}
.door.unknown{padding:26px 20px 22px}
@media(max-width:880px){
  .crown-copy{left:6%;right:6%}
}


/* ---------- legibility and fit ---------- */
/* nothing on a phone should be under 0.7rem; several labels were at 0.6 */
.eyebrow{font-size:.78rem;letter-spacing:.24em}
.b-sm{font-size:.8rem;letter-spacing:.26em}
.ticket .s{font-size:.68rem;letter-spacing:.18em}
.niche .who{font-size:.68rem;letter-spacing:.13em}
.niche p{font-size:1rem}
.niche .dist{font-size:.94rem}
.door em{font-size:.68rem}
.imprint,.ext{font-size:.76rem}
.menu summary,.menu nav a{font-size:.72rem}
.hourstamp{font-size:.7rem}
.rfine{font-size:.82rem}
.folk span{font-size:1rem}

/* the CTA text was clearing the cartouche by 30px top and bottom, which put
   the sub-line on the frame's inner curve. Give it room. */
.ticket{padding:46px clamp(52px,9vw,96px) 52px}
.ticket .s{margin-top:11px}

/* ---------- the foot nav ---------- */
/* it was a left-aligned stack on phones while every other block was centred */
.imprint{justify-content:center;gap:26px;text-align:center}
.imprint a{flex:0 1 auto}

/* ---------- the contents of the book ---------- */
.contents{margin:4px auto 0;max-width:58ch;padding:0}
.contents li{list-style:none;border-bottom:1px solid var(--hush)}
.contents li:last-child{border-bottom:0}
.contents a{display:grid;grid-template-columns:38px 1fr;gap:0 14px;align-items:baseline;
  padding:15px 4px;text-decoration:none;transition:none}
.contents .n{font:1.15rem/1.2 'IM Fell English',Georgia,serif;color:var(--quiet);text-align:right}
.contents b{font:400 clamp(1.2rem,2.4vw,1.55rem)/1.12 'Grenze Gotisch',Georgia,serif}
.contents small{display:block;margin-top:4px;font:.7rem/1.5 'IM Fell Double Pica SC',Georgia,serif;
  letter-spacing:.16em;text-transform:uppercase;color:var(--quiet)}
.contents li:nth-child(3n+1) b{color:var(--wound)}
.contents li:nth-child(3n+2) b{color:var(--gold)}
.contents li:nth-child(3n)   b{color:var(--moss)}
.contents a:hover b,.contents a:focus-visible b{text-decoration:underline;text-underline-offset:4px}


/* ============================================================
   THE HOME LEAVES :: home only
   The front page is a miniature of the book. Each hour prints on
   its own leaf, with its own stock, its own stains and its own
   grain blend, and a harlequin rule between them as the fold.
   Every colour still comes from the same custom properties, so
   the tint class is the only thing that changes per section.
   ============================================================ */
.sheet.home::before{display:none}    /* the sheet's stain is off; each leaf carries its own */
.sheet.home>.grain{display:none}     /* likewise the grain */
.leaf{position:relative;background:var(--paper);color:var(--ink);padding:0 0 6px}
.leaf::before{content:"";position:absolute;inset:0;z-index:0;pointer-events:none;
  background:
    radial-gradient(120% 55% at 50% 0%,rgba(150,110,60,.13),transparent 60%),
    radial-gradient(80% 42% at 2% 78%,rgba(120,80,45,.11),transparent 62%),
    linear-gradient(180deg,var(--paper),var(--paper2))}
.leaf.h-night::before,.leaf.h-fire::before{background:
    radial-gradient(120% 55% at 50% 0%,rgba(201,150,80,.13),transparent 62%),
    radial-gradient(80% 45% at 4% 74%,rgba(180,120,70,.11),transparent 64%),
    linear-gradient(180deg,var(--paper),var(--paper2))}
.leaf::after{content:"";position:absolute;inset:0;z-index:40;pointer-events:none;
  opacity:var(--grain-op);mix-blend-mode:var(--grain);
  background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.4'/%3E%3C/svg%3E")}
.leaf>*{position:relative;z-index:3}

/* the hour's own stamp, at the head of each leaf */
.leafmark{width:var(--col);margin:0 auto;padding:30px var(--pad) 0;text-align:center}
.leafmark a,.leafmark .lm{display:inline-block;text-decoration:none;padding:4px 14px 6px}
.leafmark span{display:block;font:.72rem/1.6 'IM Fell Double Pica SC',Georgia,serif;
  letter-spacing:.28em;text-transform:uppercase;color:var(--quiet)}
.leafmark b{display:block;margin-top:4px;font:400 clamp(1.15rem,2.4vw,1.5rem)/1.2 'Grenze Gotisch',Georgia,serif;
  color:var(--gold);transform:translate(var(--gx),var(--gy))}
.leafmark a:hover b,.leafmark a:focus-visible b{color:var(--wound);
  text-decoration:underline;text-underline-offset:5px}
/* the fold between hours needs air now that each leaf is full length */
.leaf .body{padding-bottom:16px}
.leaf:last-of-type .body{padding-bottom:4px}

.leaf .body{padding-top:22px}
.leaf .bill{padding-bottom:2px}

/* ============================================================
   SMALL SCREENS
   ============================================================ */
@media(max-width:880px){
  :root{--pad:20px}
  body{font-size:17px}
  :root{--rx:1.6px;--ry:1.1px;--gx:-1.3px;--gy:.9px;--vx:1.1px;--vy:-1.2px}
  .head{padding:14px var(--pad);gap:12px}
  .wm .c{font-size:2.2rem}
  .wm .f{font-size:.6rem;letter-spacing:.42em;text-indent:.42em}
  .hourstamp{font-size:.58rem;letter-spacing:.14em;max-width:96px;line-height:1.35}
  .hourstamp span.lbl{display:none}
  .menu nav{width:min(78vw,290px)}
  .crown>svg.bunt{top:19%;width:62%}
  .crown-copy{left:7%;right:7%;bottom:4px}
  .body{padding:24px var(--pad) 0}
  .rings{grid-template-columns:1fr;gap:16px}
  .niche.two{margin-bottom:0}
  .doors{grid-template-columns:1fr}
  .woodcut{width:80px;height:80px;margin:6px 15px 2px 0}
  .woodcut span{font-size:3.9rem}
  .rrow{grid-template-columns:1fr;gap:12px}
  .opts{grid-template-columns:1fr}
  .rsend{width:100%;justify-content:center}
  .leafmark{padding-top:24px}
  .imprint{padding:22px var(--pad) 26px;flex-direction:column;align-items:center;
    justify-content:center;gap:12px;text-align:center}
  .imprint .bigtop{order:-1;flex:0 0 auto;width:42px;margin:0 auto}
  .ticket{padding:40px 34px 46px}
  .seal{right:0;bottom:-8px;width:64px}
  .ticket{padding:30px 38px}
}


/* ============================================================
   v5 :: photographs printed as plates, and the live hour
   ============================================================ */
/* the pictures arrive already duotoned into the plate colours,
   so the tone filter that suits scans must not run over them. */
figure.cut.plate img{filter:none}
figure.cut.wide{width:min(100%,540px)}
figure.cut.plate .block{background:transparent}

.reach{position:relative;z-index:3;text-align:center;padding:2px var(--pad) 14px;
  font:.62rem/1.9 'IM Fell Double Pica SC',Georgia,serif;letter-spacing:.16em;text-transform:uppercase;
  color:var(--quiet)}
.reach a{color:var(--wound);text-decoration:none;display:inline-block;
  transform:translate(var(--rx),var(--ry))}
.reach a:hover,.reach a:focus-visible{text-decoration:underline}
.reach i{font-style:normal;padding:0 9px;opacity:.5;color:var(--quiet);transform:none}

/* every hour is an anchor now; clear the sticky head */
.leaf{scroll-margin-top:64px}

/* the head reads the hour it is standing in */
.head{transition:background-color .5s ease,color .5s ease,border-color .5s ease}
.head.on-dark{background:#221B2C;color:#EFE1C7;border-bottom-color:#4A3B52}
.head.on-dark .wm .c,.head.on-dark .hourstamp b{color:#E2A2A8}
.head.on-dark .hourstamp{color:#B9A9BE}
.head.on-dark .menu>summary{color:#EFE1C7;border-color:#5A4A62}
.hourstamp b{transition:opacity .25s ease}
.hourstamp b.turning{opacity:0}

/* the running head, once it has left the top of the leaf */
.head.stuck{padding-top:11px;padding-bottom:11px;
  border-bottom-color:color-mix(in srgb,currentColor 20%,transparent)}
.head.stuck .wm .c{font-size:2.1rem}
.head.stuck .wm .f{font-size:.6rem;letter-spacing:.42em;margin-top:4px}
@media (prefers-reduced-motion:reduce){ .head{transition:none} }

/* the stamp is the one thing on this page that knows where you are;
   on a phone it drops its label and keeps the hour */
.hourstamp{display:flex;flex-direction:column;justify-content:center}


/* ============================================================
   v5.1 :: the library gets used
   ============================================================ */
/* wide marks (rope, bats, the scroll) need room to read */
.fleuron.wide svg{width:112px}
.fleuron.bat svg{width:74px}
.fleuron.bat i{flex:1}
.fleuron.wide i{flex:1}

/* the day arcs over the leaves: sun through golden hour, moon after */
.leafmark .celest{display:block;width:20px;height:auto;margin:0 auto 8px;
  color:var(--gold);filter:url(#press);opacity:.9;
  transform:translate(var(--gx),var(--gy))}

/* each ring wears its own mark instead of a numeral */
.niche .no .ni{display:block;width:38px;height:auto;margin:0 auto;color:var(--acc);
  filter:url(#press)}
.niche .no{line-height:0;margin:6px 0 12px;text-align:center}
.niche.one .no .ni,.niche.three .no .ni{width:46px}

/* one ticket, printed big enough to actually read */
.bigticket{width:min(74%,260px);height:auto;color:var(--wound);filter:url(#press);
  transform:translate(var(--rx),var(--ry))}


/* ============================================================
   v5.1 :: the drawer :: three ways in, one at a time
   ============================================================ */
.drawer{width:min(100%,var(--col));margin:6px auto 0;scroll-margin-top:76px}
.tabrow{display:grid;grid-template-columns:repeat(3,1fr);gap:0;
  border:1px solid var(--rule);border-bottom:0;background:var(--knock)}
.tab{appearance:none;background:transparent;border:0;border-right:1px solid var(--rule);
  padding:13px 8px 14px;cursor:pointer;text-align:center;color:var(--quiet);
  font-family:'IM Fell English',Georgia,serif;transition:background-color .18s ease,color .18s ease}
.tab:last-child{border-right:0}
.tab em{display:block;font:.56rem/1 'IM Fell Double Pica SC',Georgia,serif;letter-spacing:.22em;
  text-transform:uppercase;font-style:normal;opacity:.75;margin-bottom:5px}
.tab b{display:block;font:400 clamp(.98rem,2.3vw,1.22rem)/1.15 'Grenze Gotisch',Georgia,serif;
  color:var(--quiet)}
.tab:hover b,.tab:focus-visible b{color:var(--ink)}
.tab.on{background:var(--paper)}
.tab.on b{color:var(--wound);transform:translate(var(--rx),var(--ry))}
.tab.on em{opacity:1;color:var(--gold)}
.tab:focus-visible{outline:2px solid var(--wound);outline-offset:-3px}

.drawer .roster{border:1px solid var(--rule);border-top:0;padding:20px var(--pad) 22px;
  background:var(--paper)}
.drawer .roster>.eyebrow{display:none}
.drawer .roster[hidden]{display:none}

@media (max-width:520px){
  .tab{padding:11px 5px 12px}
  .tab em{letter-spacing:.14em;font-size:.5rem}
  .drawer .roster{padding:18px 15px 20px}
}


/* ============================================================
   v5.2 :: room to read
   ============================================================ */
/* the crown says what we are doing, not only who we are */
.crown-sub{margin:10px 0 0;font:italic clamp(.95rem,2.9vw,1.55rem)/1.25 'IM Fell English',Georgia,serif;
  color:var(--quiet);letter-spacing:.005em}

/* the two crowns print in one ink; the rule between them carries the plate.
   On the dusk stock gold falls to 3.8:1 against rose paper and goes muddy —
   ink is 7.9:1 there and the pairing reads as a set instead of two swatches. */
.b-goth.crowns{color:var(--ink)}

/* the wordmark, a little louder */
.wm .c{font-size:3.2rem}
.head.stuck .wm .c{font-size:2.4rem}

/* the day arcs, and you can see it */
.leafmark .celest{width:36px;margin:0 auto 11px}

/* small type that was too small to be small */
.leafmark span{font-size:.82rem;letter-spacing:.24em}
.niche .dist{font-size:1rem;line-height:1.62}
.eyebrow{font-size:.78rem}
.folk span{font-size:1.02rem;line-height:1.55}

@media (min-width:781px){
  .niche .dist{font-size:1.06rem}
  .eyebrow{font-size:.84rem}
}

@media (max-width:620px){
  .wm .c{font-size:2.5rem}
  .head.stuck .wm .c{font-size:2.05rem}
  .leafmark .celest{width:32px;margin-bottom:9px}

  /* the star was eating 50px of a 350px line and pushing every
     description to three. The heading colours already cycle, so the
     mark goes inline and the sentence gets its width back. */
  .folk li{display:block}
  .folk .mk{grid-row:auto;width:17px;display:inline-block;
    vertical-align:-2px;margin-right:9px}
  .folk b{display:inline}
  .folk span{grid-column:1;display:block;margin-top:5px}
}


/* ---------- v5.3 :: headings, the place line, and the plates ---------- */
.leafmark h1,.leafmark h2{margin:0;font-size:1em;font-weight:400;line-height:inherit;letter-spacing:normal}
h3.eyebrow{font-weight:400}
.crown-place{margin:12px 0 0;font:.6rem/1.7 'IM Fell Double Pica SC',Georgia,serif;
  letter-spacing:.24em;text-transform:uppercase;color:var(--quiet)}
@media(max-width:520px){.crown-place{font-size:.52rem;letter-spacing:.18em}}