/* 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}}


/* ================= v5.5 :: read it without squinting =================
   Nothing below 13px anywhere. Secondary text sits at 14-16, display
   italics carry real size, and the crown flows on a phone instead of
   colliding with the keystone. */

/* --- no sideways scroll: hide offscreen helpers properly --- */
html{overflow-x:clip}
.hp,.skip{position:absolute;left:auto;width:1px;height:1px;margin:-1px;padding:0;
  overflow:hidden;clip-path:inset(50%);white-space:nowrap;border:0}
.skip:focus{position:fixed;left:8px;top:8px;width:auto;height:auto;margin:0;
  padding:13px 20px;clip-path:none;font-size:.95rem}

/* --- the running head --- */
.hourstamp{font-size:.82rem;letter-spacing:.14em}
.hourstamp span.lbl{font-size:.72rem}
.wm .f{font-size:.8rem;letter-spacing:.44em;text-indent:.44em}
.menu summary{font-size:.95rem;padding:15px 22px}
.menu nav a{font-size:.86rem}
.menu nav a small{font-size:.76rem}
.menu nav .navrule{display:block;height:0;border-top:3px double var(--rule);margin:6px 10px}

/* --- the crown --- */
.rubric{font-size:.95rem;letter-spacing:.16em;margin-bottom:16px}
.crown-sub{font:italic clamp(1.2rem,4.4vw,1.75rem)/1.34 'IM Fell English',Georgia,serif}
.crown-place{font-size:.82rem;letter-spacing:.18em;line-height:1.7;margin-top:14px}

/* --- running text --- */
.lead{font-size:1.2rem;line-height:1.5;max-width:46ch}
.b-say{font:italic 1.16rem/1.7 'IM Fell English',Georgia,serif}
.b-sm{font-size:.92rem;letter-spacing:.22em}
.eyebrow{font-size:.9rem;letter-spacing:.2em}
.leafmark span{font-size:.9rem;letter-spacing:.2em}
.prose p,.niche p{font-size:1.06rem;line-height:1.62}
.niche .who{font-size:.8rem;letter-spacing:.11em}
.niche .dist{font-size:1.06rem}
figure.cut figcaption{font-size:.86rem;letter-spacing:.1em;line-height:1.6}

/* --- the folk list: kill the browser's 40px gutter --- */
.folk{padding-left:0;list-style:none}
.folk span{font-size:1.08rem;line-height:1.6}

/* --- forms and fine print --- */
.rlabel{font-size:.82rem;letter-spacing:.1em}
.rfine{font-size:.95rem;line-height:1.65}
.fine{font-size:.92rem;line-height:1.7}
.ext,.reach{font-size:.8rem;letter-spacing:.12em}
.opt label,.opt{font-size:1.02rem}

/* --- the mobile crown: let the copy flow instead of stacking upward --- */
@media (max-width:700px){
  .crown-copy{position:static;left:auto;right:auto;bottom:auto;
    margin:-16% 5% 0;padding-bottom:6px}
  .keystone{top:2%}
  .keystone svg{width:clamp(70px,15vw,104px)}
  .crown{padding-bottom:4px}
  .crown-place{font-size:.78rem;letter-spacing:.14em}
  .lead{font-size:1.14rem}
}
@media (max-width:430px){
  .crown-copy{margin:-19% 4% 0}
  .hourstamp{font-size:.76rem;max-width:none;letter-spacing:.12em}
  .hourstamp span.lbl{display:none}
}


/* ================= v5.8 :: the hero doors, the type scale, the cards =========
   The bunting comes off the arch, which lets the crown copy climb into the
   space it was holding. The hour icons stop being bullet points. The eleven
   doors stop being a list. */

/* --- the bunting is gone; the crown closes up behind it --- */
.crown>svg.bunt{display:none}
.crown-copy{bottom:auto;top:34%}
.crown{padding-top:6px}

/* --- two doors in the hero --- */
.doors2{display:grid;grid-template-columns:1fr 1fr;gap:14px;
  width:min(var(--col),720px);margin:26px auto 0;padding:0 var(--pad)}
.door2{display:block;padding:15px 18px 13px;text-decoration:none;text-align:left;
  color:var(--ink);background:var(--knock);border:1px solid var(--rule);
  box-shadow:5px 6px 0 var(--lift);transition:transform .12s ease,box-shadow .12s ease}
.door2 b{display:block;font:400 1.16rem/1.24 'Grenze Gotisch',Georgia,serif;color:var(--wound)}
.door2 small{display:block;margin-top:5px;font:.82rem/1.5 'IM Fell Double Pica SC',Georgia,serif;
  letter-spacing:.1em;text-transform:uppercase;color:var(--quiet)}
.door2:hover,.door2:focus-visible{transform:translate(-2px,-2px);box-shadow:7px 8px 0 var(--lift)}
@media(max-width:700px){
  .doors2{grid-template-columns:1fr;gap:11px;margin-top:22px}
  .door2 b{font-size:1.24rem}
  .door2 small{font-size:.8rem}
}

/* --- the hour marks were drawn as art; print them at that size --- */
/* Normalise the marks by HEIGHT, not width: they range from a 2.7:1 barbell
   to a 0.56:1 trapeze, and matching widths would make the wide ones tower and
   the tall ones vanish. Equal height reads as equal weight. */
.leafmark .celest{height:clamp(66px,11.5vw,92px);width:auto;max-width:min(76%,260px);
  margin:0 auto 14px;opacity:1}
.leafmark span{font-size:1rem;letter-spacing:.2em}
.leafmark b{font:400 clamp(1.85rem,4.6vw,2.6rem)/1.14 'Grenze Gotisch',Georgia,serif;margin-top:7px}
.leafmark{padding-top:30px}
@media(max-width:560px){
  .leafmark .celest{height:clamp(58px,17vw,80px);width:auto;margin-bottom:11px}
  .leafmark span{font-size:.92rem;letter-spacing:.17em}
  .leafmark b{font-size:clamp(1.7rem,7.4vw,2.15rem)}
}

/* --- the running head --- */
.hourstamp{font-size:.94rem}
.hourstamp span.lbl{font-size:.8rem}
@media(max-width:430px){.hourstamp{font-size:.86rem}}

/* --- the eleven doors, as cards --- */
.folk{display:grid;grid-template-columns:1fr 1fr;gap:12px;
  padding:0;margin:26px 0 0;list-style:none}
.folk li{display:block;padding:18px 18px 17px;background:var(--knock);
  border:1px solid var(--rule);box-shadow:4px 5px 0 var(--lift);text-indent:0}
.folk li .mk{display:block;width:23px;height:auto;margin:0 0 9px;
  color:var(--gold);filter:url(#press);position:static}
.folk li b{display:block;margin:0 0 6px;
  font:400 1.28rem/1.2 'Grenze Gotisch',Georgia,serif;color:var(--wound)}
.folk li span{display:block;font-size:1.04rem;line-height:1.54}
.folk li:last-child{grid-column:1 / -1;background:transparent;
  border-style:double;border-width:3px;box-shadow:none}
/* v5.10 :: twelve cards. When the card before the last would sit alone
   beside an empty cell, it takes the full measure too. */
.folk li:nth-last-child(2):nth-child(odd){grid-column:1 / -1}
@media(max-width:560px){
  .folk{grid-template-columns:1fr;gap:10px}
  .folk li{padding:16px 16px 15px}
  .folk li b{font-size:1.22rem}
  .folk li span{font-size:1.02rem}
}

/* --- the two new pointers out of the leaves --- */
.opened,.seewho{margin:14px 0 0}
.opened{padding:13px 16px;background:var(--knock);border-left:3px solid var(--wound);
  font-size:1.04rem;line-height:1.6}
.opened b{font-family:'Grenze Gotisch',Georgia,serif;font-weight:400;font-size:1.14em}
.seewho a{font:.94rem/1.6 'IM Fell Double Pica SC',Georgia,serif;
  letter-spacing:.13em;text-transform:uppercase;color:var(--wound)}

/* --- the nomination form --- */
.nomlede{margin:14px 0 26px;font-size:1.08rem;line-height:1.62;max-width:56ch}
.nomform{margin-top:8px}


/* ================= v5.9 :: the last of the small type ====================
   The v5.5 pass swept the running text and missed the furniture. On a phone
   the form buttons were at 11.8px and the three form tabs at 8px, which is
   not a size, it is a rumour. Nothing a reader has to act on sits below
   13.5px now. The one deliberate exception is FOLK in the wordmark, which
   is locked to its 4.7:1 ratio under 'circus'. */

/* the things people press */
.rsend{font-size:1rem;letter-spacing:.14em;padding:15px 26px}
.chip{font-size:.95rem;padding:9px 15px}
.tab em{font-size:.86rem;letter-spacing:.14em}
.tab{font-size:1rem}
.door .no,.doors .no,.door em,li .no em{font-size:.9rem}

/* the numerals on the seven doors */
.doors em,.door em{font-size:.92rem;letter-spacing:.1em}

/* labels, captions and contact details */
.crown-place{font-size:.88rem}
.door2 small{font-size:.86rem}
.menu nav a small{font-size:.84rem}
.niche .who,.who{font-size:.86rem;letter-spacing:.1em}
.ext,.ext a,.reach,.reach a{font-size:.94rem;letter-spacing:.08em}
.imprint a{font-size:.92rem}
figure.cut figcaption{font-size:.9rem}

/* --- a 390px phone must still hold the whole hero above the fold.
       The arch is ornament; it can give up a little width so the two doors
       clear the fold on the phones most people actually carry. --- */
@media(max-width:440px){
  .crown{padding-top:0}
  .crown>svg.arch{display:block;width:88%;margin:0 auto}
  .crown-copy{margin:-23% 4% 0;padding-bottom:0}
  .crown{padding-bottom:0}
  #dawn .lead{margin-top:14px}
  #dawn .body.col{padding-top:16px}
  .doors2{margin-top:12px;gap:9px}
  .door2{padding:12px 15px 11px}
  .door2 small{letter-spacing:.07em}
  .crown-place{margin-top:10px}
}

/* ================= v5.10 :: the phone forms, and two more lines ==========
   Fields sat at 15.4px. Under 16px, iOS zooms the whole page the moment
   somebody taps into a box, and then they have to pinch back out :: the
   exact thing the site promised never to make an elderly reader do.
   The labels above the boxes and the menu links come up with them. */
.roster input[type=text],.roster input[type=email],.roster textarea{font-size:1rem}
.rlabel{font-size:.9rem}
.menu nav a{font-size:.92rem}
.menu nav a small{font-size:.86rem}
.imprint{font-size:.86rem}