/* Unsolved Historical Ciphers — shared site styles (rebuilt 2026-09-16: tokens for two themes, one nav, contents strip) */
@import url('https://fonts.googleapis.com/css2?family=Fraunces:ital,opsz,wght@0,9..144,300..800;1,9..144,300..800&family=Source+Serif+4:ital,wght@0,300..700;1,300..700&family=JetBrains+Mono:wght@400;600&family=IM+Fell+English:ital@0;1&display=swap');

:root{
  --bg:#0c0f15; --bg2:#121724; --panel:rgba(255,255,255,.035); --panel2:rgba(255,255,255,.06); --panel3:#090b10;
  --ink:#e9e4d8; --ink2:#c9c3b4; --muted:#8f8a7d; --head:#ffffff; --rule:rgba(233,228,216,.13);
  --gold:#d9ac52; --gold2:#f0cf86; --gold-ink:#1a1408; --red:#ff8d7e; --red-bg:rgba(255,141,126,.13);
  --blue:#7fb3ff; --blue-bg:rgba(127,179,255,.13); --green:#6fd39a; --green-bg:rgba(111,211,154,.13);
  --amber:#ecc25a; --amber-bg:rgba(236,194,90,.14); --grey-bg:rgba(255,255,255,.07); --violet:#b9a8ff; --violet-bg:rgba(180,160,255,.14);
  --shadow:0 18px 50px rgba(0,0,0,.45); --navbg:rgba(12,15,21,.72);
  --glow1:rgba(217,172,82,.12); --glow2:rgba(127,179,255,.10);
  --serif:"Source Serif 4",Georgia,serif; --display:"Fraunces",Georgia,serif; --mono:"JetBrains Mono",ui-monospace,Consolas,monospace;
  --maxw:980px; --radius:14px;
  color-scheme:dark;
}
:root[data-theme="light"]{
  --bg:#f6f1e7; --bg2:#efe7d8; --panel:rgba(30,24,12,.04); --panel2:rgba(30,24,12,.07); --panel3:#fbf8f1;
  --ink:#1f1b14; --ink2:#3f3930; --muted:#6f685c; --head:#14110b; --rule:rgba(31,27,20,.14);
  --gold:#8a6716; --gold2:#6f5210; --gold-ink:#fff7e6; --red:#b3402f; --red-bg:rgba(179,64,47,.10);
  --blue:#2b5fa8; --blue-bg:rgba(43,95,168,.10); --green:#2f7d4f; --green-bg:rgba(47,125,79,.10);
  --amber:#9a6d05; --amber-bg:rgba(154,109,5,.12); --grey-bg:rgba(31,27,20,.06); --violet:#5f4bb3; --violet-bg:rgba(95,75,179,.10);
  --shadow:0 14px 40px rgba(60,40,10,.12); --navbg:rgba(246,241,231,.82);
  --glow1:rgba(217,172,82,.22); --glow2:rgba(43,95,168,.10);
  color-scheme:light;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:4.5rem}
body{margin:0;background:var(--bg);color:var(--ink);font:17.5px/1.6 var(--serif);
  background-image:
    radial-gradient(1200px 600px at 15% -10%,var(--glow1),transparent 60%),
    radial-gradient(900px 500px at 95% 10%,var(--glow2),transparent 60%),
    linear-gradient(var(--bg),var(--bg2) 60%,var(--bg));}
a{color:var(--gold2);text-decoration:none;border-bottom:1px solid color-mix(in srgb,var(--gold2) 40%,transparent);transition:border-color .2s,color .2s}
a:hover{color:var(--head);border-bottom-color:var(--head)}
::selection{background:rgba(217,172,82,.35)}
:focus-visible{outline:2px solid var(--gold);outline-offset:2px;border-radius:4px}
img{max-width:100%}

/* ---------------------------------------------------------------- header / nav */
.nav{position:sticky;top:0;z-index:50;backdrop-filter:blur(14px) saturate(140%);-webkit-backdrop-filter:blur(14px) saturate(140%);
  background:var(--navbg);border-bottom:1px solid var(--rule)}
.nav .in{max-width:var(--maxw);margin:0 auto;padding:.6rem 1.2rem;display:flex;align-items:center;gap:1.2rem}
.nav .brand{font-family:var(--display);font-weight:600;font-size:1.02rem;letter-spacing:.01em;color:var(--ink);border:0;display:flex;align-items:center;gap:.55rem;white-space:nowrap}
.nav .brand .glyph{font-family:var(--mono);font-size:.72rem;color:var(--gold);background:var(--panel2);border:1px solid var(--rule);padding:.15rem .4rem;border-radius:6px}
.nav .links{display:flex;align-items:center;gap:1.1rem;margin-left:auto;font-size:.9rem}
.nav .links > a{color:var(--ink2);border:0;padding:.25rem 0;position:relative;white-space:nowrap}
.nav .links > a::after,.nav .menu > summary::after{content:"";position:absolute;left:0;right:100%;bottom:-2px;height:1px;background:var(--gold);transition:right .25s}
.nav .links > a:hover::after,.nav .links > a.active::after,.nav .menu > summary:hover::after,.nav .menu > summary.active::after,.nav .menu[open] > summary::after{right:0}
.nav .links > a.active,.nav .menu > summary.active{color:var(--gold2)}
.nav .links .ext{color:var(--muted)}
.nav .theme{margin:0;padding:.35rem;background:transparent;color:var(--ink2);border:1px solid var(--rule);border-radius:8px;display:inline-flex;line-height:0;cursor:pointer}
.nav .theme:hover{color:var(--gold2);border-color:var(--gold);transform:none;box-shadow:none}
.nav .menu{position:relative}
.nav .menu > summary{list-style:none;cursor:pointer;color:var(--ink2);padding:.25rem 0;position:relative;display:inline-flex;align-items:center;gap:.4rem;white-space:nowrap;user-select:none}
.nav .menu > summary::-webkit-details-marker{display:none}
.nav .menu[open] > summary{color:var(--gold2)}
.nav .menu[open] > summary svg{transform:rotate(180deg)}
.nav .menu svg{transition:transform .2s}
.nav .panel{position:absolute;left:50%;transform:translateX(-50%);top:calc(100% + .9rem);width:min(800px,calc(100vw - 2rem));
  background:var(--bg2);border:1px solid var(--rule);border-radius:var(--radius);box-shadow:var(--shadow);padding:1.1rem 1.2rem;
  display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:.9rem 1.4rem;z-index:60}
.nav .panel::before{content:"";position:absolute;top:-7px;left:50%;width:12px;height:12px;background:var(--bg2);border-left:1px solid var(--rule);border-top:1px solid var(--rule);transform:translateX(-50%) rotate(45deg)}
.nav .panel h4{margin:0 0 .4rem;font-family:var(--mono);font-size:.68rem;letter-spacing:.16em;text-transform:uppercase;color:var(--gold);font-weight:600}
.nav .panel ul{list-style:none;margin:0;padding:0}
.nav .panel li a{display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:.6rem;padding:.35rem .5rem;margin:0 -.5rem;border:0;border-radius:8px;color:var(--ink)}
.nav .panel li a:hover,.nav .panel li a[aria-current]{background:var(--panel2);color:var(--head)}
.nav .panel li a b{font-weight:500;font-size:.95rem;white-space:nowrap}
.nav .panel li a .yr{font-family:var(--mono);font-size:.72rem;color:var(--muted)}
.nav .panel .st{font-size:.62rem;padding:.05em .5em .05em .45em}
.navtoggle{display:none;margin:0 0 0 auto;padding:.45rem .6rem;background:transparent;color:var(--ink2);border:1px solid var(--rule);border-radius:8px;cursor:pointer;flex-direction:column;gap:4px;align-items:center;justify-content:center;width:44px;height:38px}
.navtoggle span{display:block;width:18px;height:2px;background:currentColor;border-radius:2px;transition:transform .2s,opacity .2s}
.navtoggle i{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
.navtoggle:hover{transform:none;box-shadow:none;color:var(--gold2);border-color:var(--gold)}
.nav.open .navtoggle span:nth-child(1){transform:translateY(6px) rotate(45deg)}
.nav.open .navtoggle span:nth-child(2){opacity:0}
.nav.open .navtoggle span:nth-child(3){transform:translateY(-6px) rotate(-45deg)}
@media (max-width:860px){
  .nav .in{flex-wrap:wrap;gap:.6rem 1rem}
  .nav .brand span:last-child{font-size:.95rem}
  .navtoggle{display:flex}
  .nav .links{display:none;width:100%;flex-direction:column;align-items:stretch;gap:.1rem;padding:.4rem 0 .6rem;font-size:1rem}
  .nav.open .links{display:flex}
  .nav .links > a,.nav .menu > summary{padding:.55rem .2rem;border-bottom:1px solid var(--rule)}
  .nav .links > a::after,.nav .menu > summary::after{display:none}
  .nav .menu{width:100%}
  .nav .menu > summary{display:flex;justify-content:space-between}
  .nav .panel{position:static;transform:none;width:auto;box-shadow:none;border:0;border-bottom:1px solid var(--rule);border-radius:0;padding:.6rem .2rem .9rem;background:transparent;grid-template-columns:1fr}
  .nav .panel::before{display:none}
  .nav .theme{align-self:flex-start;margin-top:.6rem}
}

/* ---------------------------------------------------------------- hero */
.hero{max-width:var(--maxw);margin:0 auto;padding:3.8rem 1.2rem 1.6rem;position:relative}
.hero .kicker{font-family:var(--mono);font-size:.76rem;letter-spacing:.18em;text-transform:uppercase;color:var(--gold);margin:0 0 .9rem}
.hero h1{font-family:var(--display);font-weight:500;font-variation-settings:"opsz" 144;font-size:clamp(2rem,4.8vw,3.4rem);line-height:1.1;margin:0 0 .9rem;letter-spacing:-.01em;color:var(--head)}
.hero .sub{color:var(--ink2);font-style:italic;margin:.25rem 0;font-size:1.05rem;max-width:72ch}
.hero .sub.small{font-size:.92rem;margin-top:.5rem}
.hero .meta{color:var(--muted);font-size:.88rem;margin-top:1rem;font-family:var(--mono)}
.hero .meta time{color:var(--ink2)}
.hero .outcome{font-family:var(--mono);font-size:.84rem;margin:.35rem 0 0;color:var(--ink2)}
.hero .outcome a{color:var(--gold);text-decoration:underline dotted;text-underline-offset:3px}
.hero .cipherstrip{position:absolute;right:1.2rem;top:1.4rem;font-family:var(--mono);font-size:.7rem;color:color-mix(in srgb,var(--gold) 40%,transparent);letter-spacing:.35em;user-select:none;pointer-events:none;text-align:right;line-height:1.9}
@media (max-width:760px){.hero .cipherstrip{display:none}}
.hero .parties{display:flex;align-items:center;gap:1.1rem;margin:.2rem 0 1rem;flex-wrap:wrap}
.hero .party{margin:0;display:flex;align-items:center;gap:.65rem}
.hero .party img{width:84px;height:84px;border-radius:50%;object-fit:cover;border:1px solid color-mix(in srgb,var(--gold) 55%,transparent);box-shadow:0 0 0 3px var(--bg),0 0 0 4px var(--rule);filter:sepia(.18) saturate(.9);background:var(--panel2)}
.hero .party figcaption{font-style:normal;text-align:left;font-size:.95rem;color:var(--head);line-height:1.25;max-width:16ch}
.hero .party .role{display:block;font-family:var(--mono);font-size:.66rem;letter-spacing:.16em;text-transform:uppercase;color:var(--muted)}
.hero .parties .arrow{color:var(--gold);font-size:1.3rem}
.avs{display:inline-flex;vertical-align:middle}
.avs img{width:30px;height:30px;border-radius:50%;object-fit:cover;border:1px solid color-mix(in srgb,var(--gold) 55%,transparent);box-shadow:0 0 0 2px var(--panel);filter:sepia(.18) saturate(.9);background:var(--panel2)}
.avs img+img{margin-left:-9px}
.card .avs{position:absolute;left:1.4rem;bottom:.8rem}
ul.list.wl .t .avs{margin-right:.55rem}
ul.list.wl .t .avs img{width:24px;height:24px;margin-top:-3px}
ul.list.wl .t .avs img+img{margin-left:-7px}
@media (max-width:760px){.hero .parties{flex-wrap:nowrap;gap:.5rem}.hero .party{gap:.45rem}.hero .party img{width:56px;height:56px}.hero .party figcaption{font-size:.84rem;max-width:11ch}.hero .parties .arrow{font-size:1.05rem}}
.jump{display:flex;flex-wrap:wrap;gap:.5rem;margin:1.4rem 0 .2rem}
.jump a,.toc a{font-family:var(--mono);font-size:.76rem;letter-spacing:.04em;padding:.4rem .85rem;border-radius:999px;
  background:var(--panel);border:1px solid var(--rule);color:var(--ink2);transition:all .2s;white-space:nowrap}
.jump a:hover,.toc a:hover{background:var(--amber-bg);border-color:var(--gold);color:var(--head)}

/* contents strip on write-up pages */
.toc{display:flex;flex-wrap:wrap;align-items:center;gap:.45rem;margin:.4rem 0 1.6rem;padding:.7rem 0 .9rem;border-bottom:1px solid var(--rule)}
.toc > span{font-family:var(--mono);font-size:.68rem;letter-spacing:.16em;text-transform:uppercase;color:var(--muted);margin-right:.3rem}
.toc a.on{background:var(--gold);color:var(--gold-ink);border-color:var(--gold)}

main{max-width:var(--maxw);margin:0 auto;padding:0 1.2rem 5rem}
h2{font-family:var(--display);font-weight:500;font-size:1.7rem;margin:3rem 0 1rem;color:var(--head);letter-spacing:-.01em;display:flex;align-items:baseline;gap:.7rem;flex-wrap:wrap}
h2 .num{font-family:var(--mono);font-size:.8rem;color:var(--gold);letter-spacing:.1em}
h3{font-family:var(--display);font-weight:500;font-size:1.22rem;margin:2rem 0 .6rem;color:var(--gold2)}
p{margin:.7rem 0}
.muted,small{color:var(--muted)}
ol li,ul li{margin:.35rem 0}
strong{color:var(--head);font-weight:600}
em{color:var(--ink)}
hr{border:0;border-top:1px solid var(--rule);margin:2.4rem 0}

/* ---------------------------------------------------------------- panels */
.callout{background:linear-gradient(135deg,color-mix(in srgb,var(--gold) 16%,transparent),color-mix(in srgb,var(--gold) 4%,transparent));border:1px solid color-mix(in srgb,var(--gold) 40%,transparent);
  border-radius:var(--radius);padding:1.1rem 1.3rem;margin:1.6rem 0;box-shadow:var(--shadow)}
.callout.blue{background:linear-gradient(135deg,color-mix(in srgb,var(--blue) 16%,transparent),color-mix(in srgb,var(--blue) 3%,transparent));border-color:color-mix(in srgb,var(--blue) 40%,transparent)}
.callout.amber{background:var(--amber-bg);border-color:color-mix(in srgb,var(--amber) 45%,transparent);box-shadow:none}
.callout h3{margin-top:0}
.callout > :first-child{margin-top:0}.callout > :last-child{margin-bottom:0}
/* "At a glance": the write-up's summary as labelled rows, stacked on a phone */
.glance .gl-top{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:.4rem .8rem;margin:0 0 .8rem}
.glance .gl-top strong{font:600 .74rem var(--mono);letter-spacing:.16em;text-transform:uppercase;color:var(--gold)}
.glance .gl-res{font:600 .78rem var(--mono);padding:.2rem .75rem;border-radius:999px;background:var(--gold);color:var(--gold-ink)}
.glance dl{display:grid;grid-template-columns:8.5rem 1fr;gap:.65rem 1.2rem;margin:0}
.glance dt{font:600 .72rem/1.9 var(--mono);letter-spacing:.08em;text-transform:uppercase;color:var(--muted)}
.glance dd{margin:0;line-height:1.5}
@media (max-width:600px){.glance dl{grid-template-columns:1fr;gap:0}.glance dt{margin-top:.75rem;line-height:1.4}.glance dt:first-child{margin-top:0}}
blockquote{margin:1.2rem 0;padding:1rem 1.3rem;border-left:3px solid var(--gold);background:var(--panel);border-radius:0 var(--radius) var(--radius) 0;line-height:1.7}
blockquote.big{font-family:var(--display);font-size:1.35rem;font-weight:400;line-height:1.5;font-variation-settings:"opsz" 40}
blockquote .c{color:var(--red);font-weight:600;background:var(--red-bg);padding:0 .25em;border-radius:4px}
blockquote .k{color:var(--blue);font-weight:600;background:var(--blue-bg);padding:0 .25em;border-radius:4px}
.legend span{display:inline-block;margin-right:1.2rem}
.legend .c{color:var(--red)} .legend .k{color:var(--blue)}

code,.mono{font-family:var(--mono);font-size:.86em;background:var(--panel2);border:1px solid var(--rule);padding:.05em .35em;border-radius:5px;color:var(--gold2)}
pre{background:var(--panel3);border:1px solid var(--rule);padding:1rem 1.2rem;overflow-x:auto;font-family:var(--mono);font-size:.86rem;line-height:1.6;border-radius:var(--radius);color:var(--ink2)}
pre code{background:transparent;border:0;padding:0;color:inherit;font-size:inherit}
.ct{font-family:var(--mono);font-size:.78rem;line-height:1.7;background:var(--grey-bg);border:1px solid var(--rule);border-radius:8px;padding:.8rem 1rem;overflow-x:auto;white-space:pre}
.tw{overflow-x:auto}

/* ---------------------------------------------------------------- tables */
table{border-collapse:separate;border-spacing:0;width:100%;margin:1.2rem 0;font-size:.93rem;background:var(--panel);border:1px solid var(--rule);border-radius:var(--radius);overflow:hidden}
th,td{padding:.5rem .7rem;text-align:left;vertical-align:top;border-bottom:1px solid var(--rule)}
tr:last-child td{border-bottom:0}
th{background:var(--panel2);font-family:var(--mono);font-size:.74rem;letter-spacing:.1em;text-transform:uppercase;color:var(--gold);font-weight:600}
tbody tr:hover td, tr:hover td{background:var(--panel)}
td.n,th.n{text-align:center;font-family:var(--mono)}
.H{color:var(--green)} .C{color:var(--blue)} .M{color:var(--amber)} .I{color:var(--red)}
@media (max-width:620px){table{display:block;overflow-x:auto;-webkit-overflow-scrolling:touch}}

/* status pills */
.st{display:inline-flex;align-items:center;gap:.4em;padding:.1em .6em .1em .5em;border-radius:999px;font-family:var(--mono);font-size:.74rem;letter-spacing:.04em;white-space:nowrap;border:1px solid transparent}
.st::before{content:"";width:.5em;height:.5em;border-radius:50%;background:currentColor;box-shadow:0 0 8px currentColor}
.solved{background:var(--green-bg);color:var(--green);border-color:color-mix(in srgb,var(--green) 35%,transparent)}
.found{background:var(--blue-bg);color:var(--blue);border-color:color-mix(in srgb,var(--blue) 35%,transparent)}
.partial{background:var(--amber-bg);color:var(--amber);border-color:color-mix(in srgb,var(--amber) 35%,transparent)}
.stuck{background:var(--red-bg);color:var(--red);border-color:color-mix(in srgb,var(--red) 35%,transparent)}
.offline{background:var(--violet-bg);color:var(--violet);border-color:color-mix(in srgb,var(--violet) 40%,transparent)}
.todo{background:var(--grey-bg);color:var(--muted);border-color:var(--rule)}
.infeasible{background:var(--grey-bg);color:var(--muted);border-color:var(--rule);text-decoration:line-through}

/* reason tags and item blocks shared by the survey and attempt pages */
.why{display:inline-block;padding:.08em .55em;border-radius:6px;font-family:var(--mono);font-size:.7rem;letter-spacing:.05em;white-space:nowrap;border:1px solid transparent;vertical-align:middle}
.w-yes,.w-open{background:var(--green-bg);color:var(--green);border-color:color-mix(in srgb,var(--green) 35%,transparent)}
.w-no,.w-otp{background:var(--red-bg);color:var(--red);border-color:color-mix(in srgb,var(--red) 35%,transparent)}
.w-lang{background:var(--violet-bg);color:var(--violet);border-color:color-mix(in srgb,var(--violet) 40%,transparent)}
.w-short{background:var(--amber-bg);color:var(--amber);border-color:color-mix(in srgb,var(--amber) 35%,transparent)}
.w-fake{background:var(--grey-bg);color:var(--muted);border-color:var(--rule)}
.item{border-left:2px solid var(--rule);padding:.1rem 0 .1rem 1rem;margin:1.5rem 0}
.item h3{margin:.1rem 0 .45rem}
.item .meta2,.meta2{font-family:var(--mono);font-size:.74rem;color:var(--muted);letter-spacing:.04em;margin-bottom:.5rem}

/* ---------------------------------------------------------------- cards */
.cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:1.2rem;margin:1.4rem 0}
.card{position:relative;display:flex;flex-direction:column;background:var(--panel);border:1px solid var(--rule);border-radius:var(--radius);padding:1.3rem 1.4rem 2.4rem;color:var(--ink);
  transition:transform .25s ease,border-color .25s,box-shadow .25s;overflow:hidden}
.card::before{content:"";position:absolute;inset:0;background:radial-gradient(500px 200px at var(--mx,20%) 0%,color-mix(in srgb,var(--gold) 16%,transparent),transparent 60%);opacity:0;transition:opacity .3s}
.card:hover{transform:translateY(-4px);border-color:color-mix(in srgb,var(--gold) 50%,transparent);box-shadow:var(--shadow)}
.card:hover::before{opacity:1}
.card .eyebrow{font-family:var(--mono);font-size:.72rem;letter-spacing:.16em;text-transform:uppercase;color:var(--gold);margin-bottom:.5rem;display:flex;justify-content:space-between;align-items:center;gap:.6rem;flex-wrap:wrap}
.card .eyebrow .when{margin-left:auto;color:var(--muted);text-transform:none;letter-spacing:.02em;white-space:nowrap}
.card h3{margin:0 0 .5rem;font-size:1.3rem;color:var(--head)}
.card p{color:var(--ink2);font-size:.96rem;margin:.4rem 0}
.card .quote{font-family:var(--display);font-style:italic;color:var(--gold2);font-size:1.02rem;margin:.7rem 0 .2rem}
.card .go{position:absolute;right:1.2rem;bottom:1rem;font-family:var(--mono);font-size:.8rem;color:var(--gold);opacity:.7;transition:transform .25s,opacity .25s}
.card:hover .go{transform:translateX(4px);opacity:1}

/* card thumbnails and lead figures */
.card.hasthumb{padding-top:0}
.card .thumb{display:block;width:calc(100% + 2.8rem);margin:0 -1.4rem .9rem;aspect-ratio:16/6;object-fit:cover;object-position:center 30%;
  border-bottom:1px solid var(--rule);filter:sepia(.35) contrast(1.02) brightness(.92);transition:filter .3s,transform .3s}
.card:hover .thumb{filter:sepia(.05) contrast(1.04) brightness(1);transform:scale(1.02)}
figure.lead{margin:0 0 2rem}
figure.lead img{max-height:420px;object-fit:cover;width:100%}
.bignews.hasart,.bn-panel.hasart{display:grid;grid-template-columns:1.4fr 1fr;gap:1.4rem;align-items:center}
/* rotating big-news: panels stacked in one grid cell so the card keeps one height; site.js switches .on */
.bn-track{display:grid}
.bn-panel{grid-area:1/1;opacity:0;transform:translateY(5px);transition:opacity .6s ease,transform .6s ease;pointer-events:none}
.bn-panel.on{opacity:1;transform:none;pointer-events:auto}
.bn-rot.instant .bn-panel{transition:none}
.bn-panel[hidden]{display:block;visibility:hidden}
.bn-panel.hasart[hidden]{display:grid}
.bn-panel.on[hidden]{visibility:visible}
.bn-panel.noart{display:flex;align-items:center}
.bn-panel.noart[hidden]{display:flex}
.bn-panel.noart > div{max-width:none}
.bn-ctl{position:absolute;top:1.1rem;right:1.2rem;z-index:2;display:flex;align-items:center;gap:.45rem}
.bn-ctl button{margin:0;padding:.2rem .55rem;background:color-mix(in srgb,var(--bg) 55%,transparent);color:var(--ink2);border:1px solid color-mix(in srgb,var(--gold) 45%,transparent);border-radius:999px;font-family:var(--mono);font-size:.76rem;line-height:1.4;cursor:pointer;transform:none;box-shadow:none}
.bn-ctl button:hover{color:var(--gold2);border-color:var(--gold)}
.bn-ctl .bn-pause[aria-pressed="true"]{color:var(--gold-ink);background:var(--gold)}
.bn-dots{display:inline-flex;gap:.4rem;padding:0 .3rem}
.bn-dots button{width:.6rem;height:.6rem;padding:0;border-radius:50%;border:1px solid var(--gold);background:transparent;opacity:.55}
.bn-dots button[aria-selected="true"]{background:var(--gold);opacity:1;box-shadow:0 0 8px color-mix(in srgb,var(--gold) 60%,transparent)}
@media (max-width:760px){.bn-ctl{position:static;justify-content:flex-end;margin:0 0 .6rem}.bn-panel.hasart{grid-template-columns:1fr}}
@media (prefers-reduced-motion: reduce){.bn-panel{transition:none;transform:none}}
@media print{.bn-ctl{display:none}.bn-panel[hidden]{display:none}}
.bignews.hasart .art,.bn-panel .art{margin:0;border-radius:var(--radius);overflow:hidden;border:1px solid var(--rule);box-shadow:var(--shadow);aspect-ratio:4/3;max-height:340px}
.bignews.hasart .art > img,.bn-panel .art > img{width:100%;height:100%;object-fit:cover;display:block;filter:sepia(.15)}
@media (max-width:760px){.bignews.hasart{grid-template-columns:1fr}.bignews.hasart .art{aspect-ratio:16/9}}

/* progressive disclosure on the home page */
.showmore{display:inline-block;margin:.4rem 0 0;padding:.45rem 1rem;background:var(--panel);color:var(--ink2);border:1px solid var(--rule);border-radius:999px;font-size:.78rem;letter-spacing:.05em}
.showmore:hover{background:var(--amber-bg);color:var(--head);border-color:var(--gold);transform:none;box-shadow:none}
.more[hidden]{display:none}
details.fold{margin:.6rem 0 1.2rem}
details.fold > summary{display:inline-block;padding:.45rem 1rem;background:var(--panel);color:var(--ink2);border:1px solid var(--rule);border-radius:999px;font-family:var(--mono);font-size:.78rem;letter-spacing:.05em;cursor:pointer;list-style:none}
details.fold > summary::-webkit-details-marker{display:none}
details.fold[open] > summary{background:var(--gold);color:var(--gold-ink);border-color:var(--gold)}
details.fold > summary:hover{border-color:var(--gold);color:var(--head)}
details.fold[open] > summary:hover{color:var(--gold-ink)}
.tg-b p{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;cursor:pointer}
.tg.x .tg-b p{display:block;-webkit-line-clamp:unset;overflow:visible}
.tg-b p::after{content:""}
.tg .tgmore{font-family:var(--mono);font-size:.72rem;color:var(--gold);margin-top:.35rem;cursor:pointer;letter-spacing:.05em}
.tg.x .tgmore{opacity:.7}
.card p:not(.quote){display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
.card .quote{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.qhint{font-family:var(--mono);font-size:.74rem;color:var(--muted);margin:.2rem 0 0}

/* compact write-up list under the featured cards */
h3.listhead{font-family:var(--mono);font-size:.72rem;letter-spacing:.16em;text-transform:uppercase;color:var(--muted);margin:1.6rem 0 .4rem}
ul.list{list-style:none;padding:0;margin:0 0 1rem;border-top:1px solid var(--rule)}
ul.list li{margin:0}
ul.list a{display:grid;grid-template-columns:auto 1fr auto auto;gap:.9rem;align-items:center;padding:.6rem .4rem;border:0;border-bottom:1px solid var(--rule);color:var(--ink)}
ul.list a:hover{background:var(--panel);color:var(--head)}
ul.list .t{font-family:var(--display);font-size:1.02rem}
ul.list .yr{font-family:var(--mono);font-size:.74rem;color:var(--muted)}
ul.list .dt{font-family:var(--mono);font-size:.7rem;color:var(--muted);opacity:.85;white-space:nowrap;text-align:right}
@media (max-width:620px){ul.list a{grid-template-columns:1fr auto auto}ul.list .st{display:none}ul.list .dt{font-size:.66rem}}

/* stats & progress */
.stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:1rem;margin:1.5rem 0}
.stat{background:var(--panel);border:1px solid var(--rule);border-radius:var(--radius);padding:1rem 1.1rem}
.stat b{display:block;font-family:var(--display);font-size:2.2rem;font-weight:500;line-height:1;color:var(--head)}
.stat span{font-family:var(--mono);font-size:.74rem;letter-spacing:.12em;text-transform:uppercase;color:var(--muted)}
.bar{display:flex;height:12px;border-radius:999px;overflow:hidden;border:1px solid var(--rule);margin:1rem 0 .4rem;background:var(--panel)}
.bar span{display:block;height:100%}
.bar .s{background:var(--green)} .bar .f{background:var(--blue)} .bar .p{background:var(--amber)} .bar .o{background:var(--violet)} .bar .x{background:var(--red)} .bar .t{background:var(--grey-bg)}

/* figures */
figure{margin:1.8rem 0;text-align:center}
figure img{max-width:100%;border-radius:var(--radius);border:1px solid var(--rule);box-shadow:var(--shadow);filter:sepia(.2) contrast(1.04);transition:filter .3s,transform .3s}
figure img:hover{filter:sepia(0) contrast(1.04);transform:scale(1.01)}
figcaption{font-size:.9rem;color:var(--muted);margin-top:.7rem;font-style:italic}
figcaption .credit{font-style:normal;font-size:.82rem}

/* decoder */
#decoder{background:var(--panel);border:1px solid var(--rule);border-radius:var(--radius);padding:1.2rem 1.3rem}
#decoder textarea{width:100%;min-height:5.5rem;font-family:var(--mono);font-size:.92rem;padding:.7rem .8rem;background:var(--panel3);color:var(--ink);border:1px solid var(--rule);border-radius:10px;resize:vertical}
#decoder textarea:focus{outline:none;border-color:var(--gold)}
button{font:inherit;font-family:var(--mono);font-size:.85rem;letter-spacing:.06em;padding:.5rem 1.1rem;background:var(--gold);color:var(--gold-ink);border:0;border-radius:8px;cursor:pointer;margin-top:.7rem;font-weight:600;transition:transform .15s,box-shadow .15s}
button:hover{transform:translateY(-1px);box-shadow:0 8px 24px rgba(217,172,82,.35)}
.tiles{display:flex;flex-wrap:wrap;gap:.45rem .35rem;margin-top:1rem;align-items:flex-end;min-height:3rem}
.tile{display:flex;flex-direction:column;align-items:center;min-width:2.2rem;padding:.25rem .45rem;border-radius:8px;background:var(--panel2);border:1px solid var(--rule)}
.tile .p{font-family:"Fraunces",serif;font-style:italic;font-size:1.05rem;line-height:1.15;color:var(--gold2)}
.tile .g{font-family:var(--mono);font-size:.7rem;color:var(--muted);letter-spacing:.03em}
.tile.plain{background:transparent;border-color:transparent}
.tile.plain .p{color:var(--ink2);font-style:normal}
.tile.unk .p{color:var(--red)} .tile.inf .p{color:var(--red)} .tile.unc .p{color:var(--amber)} .tile.code .p{color:var(--blue)}
details{margin:1.4rem 0}
details summary{cursor:pointer;color:var(--gold2);font-family:var(--mono);font-size:.9rem;letter-spacing:.04em;padding:.5rem 0}
#keytable table{font-size:.84rem} #keytable td{padding:.15rem .5rem}

/* reveal */

/* ---------------------------------------------------------------- footer */
footer{border-top:1px solid var(--rule);margin-top:3rem;padding:1.8rem 1.2rem 2.5rem;color:var(--muted);font-size:.9rem}
footer .in{max-width:var(--maxw);margin:0 auto;display:flex;flex-wrap:wrap;gap:1rem 1.5rem;justify-content:space-between;align-items:center}
footer nav{display:flex;flex-wrap:wrap;gap:.6rem 1.1rem;font-family:var(--mono);font-size:.8rem}
footer nav a{color:var(--ink2);border-bottom-color:transparent}
footer nav a:hover{color:var(--gold2);border-bottom-color:var(--gold2)}
@media (max-width:760px){body{font-size:16.5px}.hero{padding-top:2.6rem}h2{font-size:1.45rem}}

/* ---------------------------------------------------------------- priority queue */
.odds{display:inline-block;padding:.08em .5em;border-radius:6px;font-family:var(--mono);font-size:.72rem;letter-spacing:.04em;white-space:nowrap;border:1px solid transparent}
.odds.hi{background:var(--green-bg);color:var(--green);border-color:color-mix(in srgb,var(--green) 35%,transparent)}
.odds.md{background:var(--amber-bg);color:var(--amber);border-color:color-mix(in srgb,var(--amber) 35%,transparent)}
.odds.lo{background:var(--red-bg);color:var(--red);border-color:color-mix(in srgb,var(--red) 35%,transparent)}
.odds.no{background:var(--grey-bg);color:var(--muted);border-color:var(--rule)}
.eff{font-family:var(--mono);font-size:.74rem;color:var(--muted);white-space:nowrap}
.rank{font-family:var(--display);font-size:1.15rem;color:var(--gold);font-weight:500}
tr.done td{opacity:.72}
.grp td{background:var(--amber-bg);font-family:var(--mono);font-size:.72rem;letter-spacing:.12em;text-transform:uppercase;color:var(--gold)}

.strike{position:relative;display:inline-block;white-space:nowrap}
.strike::after{content:"";position:absolute;left:-.04em;right:auto;top:.54em;height:.075em;width:0;
  background:linear-gradient(90deg,var(--gold),var(--gold2));border-radius:2px;
  box-shadow:0 0 14px rgba(217,172,82,.6);animation:strikeDraw 1.4s cubic-bezier(.65,.05,.36,1) .5s both}
@keyframes strikeDraw{from{width:0}to{width:calc(100% + .08em)}}
@media (prefers-reduced-motion: reduce){.strike::after{animation:none;width:calc(100% + .08em);opacity:1}}
.fam{display:inline-block;margin-left:.4em;padding:.05em .45em;border-radius:5px;font-family:var(--mono);font-size:.66rem;letter-spacing:.06em;text-transform:uppercase;color:var(--violet);background:var(--violet-bg);border:1px solid color-mix(in srgb,var(--violet) 40%,transparent);vertical-align:middle}

.bignews{position:relative;margin:1.6rem 0 2rem;padding:1.5rem 1.6rem;border-radius:var(--radius);
  background:linear-gradient(135deg,color-mix(in srgb,var(--gold) 16%,transparent),color-mix(in srgb,var(--green) 10%,transparent) 55%,color-mix(in srgb,var(--gold) 6%,transparent));
  border:1px solid color-mix(in srgb,var(--gold) 50%,transparent);box-shadow:var(--shadow);overflow:hidden}
.bignews .tag{display:inline-flex;align-items:center;gap:.5em;font-family:var(--mono);font-size:.72rem;letter-spacing:.16em;text-transform:uppercase;color:var(--gold-ink);background:var(--gold);padding:.25em .7em;border-radius:999px;font-weight:700}
.bignews h2{font-size:clamp(1.35rem,3.2vw,2rem);margin:.7rem 0 .5rem;color:var(--head);border:0;padding:0;display:block}
.bignews h2 .strikeout{position:relative;white-space:nowrap}
.bignews h2 .strikeout::after{content:"";position:absolute;left:-.03em;top:.55em;height:.08em;width:0;background:var(--green);box-shadow:0 0 12px var(--green);border-radius:2px;animation:bigStrike 1.2s cubic-bezier(.65,.05,.36,1) .4s both}
@keyframes bigStrike{from{width:0}to{width:calc(100% + .06em)}}
@media (prefers-reduced-motion: reduce){.bignews h2 .strikeout::after{animation:none;width:calc(100% + .06em);opacity:1}}
.bignews p{margin:.5rem 0 0;max-width:68ch}
.bignews .stat2{display:flex;flex-wrap:wrap;gap:1.4rem;margin-top:1rem;font-family:var(--mono);font-size:.78rem}
.bignews .stat2 b{display:block;font-family:var(--display);font-size:1.5rem;color:var(--gold);line-height:1.1}
.bignews .stat2 span{color:var(--muted)}
.bignews .cta{display:inline-block;margin-top:1.1rem;font-family:var(--mono);font-size:.82rem;letter-spacing:.06em;padding:.5rem 1.1rem;border-radius:8px;background:var(--gold);color:var(--gold-ink);font-weight:700;border:0}
.bignews .cta:hover{transform:translateY(-1px);box-shadow:0 8px 22px rgba(217,172,82,.4);color:var(--gold-ink)}

.qfilter{display:flex;flex-wrap:wrap;gap:.5rem;margin:1.4rem 0 .4rem}
.qf{font-family:var(--mono);font-size:.78rem;letter-spacing:.06em;padding:.45rem .9rem;border-radius:999px;background:var(--panel);color:var(--ink2);border:1px solid var(--rule);cursor:pointer;margin:0;transition:background .2s,color .2s,border-color .2s}
.qf span{opacity:.55;margin-left:.45em;font-size:.9em}
.qf:hover{border-color:var(--gold);color:var(--head);transform:none;box-shadow:none}
.qf.on{background:var(--gold);color:var(--gold-ink);border-color:var(--gold);font-weight:700}
.qf.on span{opacity:.75}
h3.tier{display:flex;align-items:baseline;gap:.8rem;flex-wrap:wrap;margin:2.4rem 0 .9rem;font-family:var(--mono);font-size:.76rem;letter-spacing:.18em;text-transform:uppercase;color:var(--gold);padding-bottom:.5rem;border-bottom:1px solid var(--rule)}
h3.tier small{font-family:var(--serif);font-size:.86rem;letter-spacing:0;text-transform:none;color:var(--muted);font-style:italic}
.tg{display:grid;grid-template-columns:3.4rem 1fr;gap:0 1rem;padding:.8rem 1.1rem .8rem .8rem;margin:.45rem 0;background:var(--panel);border:1px solid var(--rule);border-radius:var(--radius);position:relative;overflow:hidden;transition:border-color .25s,transform .2s,box-shadow .25s,background .25s}
.tg::after{content:"";position:absolute;left:0;top:0;bottom:0;width:2px;background:transparent;transition:background .25s}
.tg:hover{transform:translateX(3px);border-color:color-mix(in srgb,var(--gold) 45%,transparent);box-shadow:var(--shadow);background:var(--panel2)}
.tg.live::after{background:linear-gradient(var(--gold),transparent)}
.tg.done::after{background:linear-gradient(var(--blue),transparent)}
.tg.no::after{background:var(--rule)}
.tg-l{display:flex;align-items:flex-start;justify-content:center;padding-top:.15rem}
.tg-rank{font-family:var(--display);font-weight:600;font-size:1.75rem;line-height:1;color:var(--gold);font-variation-settings:"opsz" 40}
.tg-rank.tg-dash{color:var(--rule);font-size:1.4rem}
.tg-b h3{margin:0 0 .45rem;font-size:1.12rem;color:var(--head);font-weight:500;line-height:1.35}
.tg-b h3 a{color:var(--head);border-bottom-color:var(--rule)}
.tg-b h3 a:hover{color:var(--gold2);border-bottom-color:var(--gold2)}
.tg-date{font-family:var(--mono);font-size:.74rem;color:var(--muted);letter-spacing:.06em;margin-left:.7em;white-space:nowrap}
.tg-meta{display:flex;flex-wrap:wrap;gap:.5rem;align-items:center;margin-bottom:.55rem}
.tg-b p{margin:0;color:var(--ink2);font-size:.95rem;line-height:1.62;max-width:74ch}
.tg.no .tg-b p,.tg.no .tg-b h3{opacity:.8}
.tg[hidden]{display:none}
@media (max-width:620px){.tg{grid-template-columns:1fr;padding:1rem 1.1rem}.tg-l{justify-content:flex-start;padding-bottom:.35rem}.tg-date{display:block;margin:.25rem 0 0}}
.prog{margin:1.3rem 0 .2rem}
.prog .bar{margin:0}
.prog .key{display:flex;flex-wrap:wrap;gap:.35rem 1.2rem;margin-top:.6rem;font-family:var(--mono);font-size:.72rem;color:var(--muted)}
.prog .key i{display:inline-block;width:.62em;height:.62em;border-radius:2px;margin-right:.45em;vertical-align:baseline}
ul.findings{list-style:none;padding:0;margin:1.1rem 0}
ul.findings li{position:relative;padding:.55rem 0 .55rem 1.5rem;border-bottom:1px solid var(--rule);color:var(--ink2);font-size:.97rem;line-height:1.62}
ul.findings li:last-child{border-bottom:0}
ul.findings li::before{content:"";position:absolute;left:.15rem;top:1.28rem;width:.42rem;height:.42rem;border-radius:50%;background:var(--gold);box-shadow:0 0 10px rgba(217,172,82,.6)}
ul.findings .fdate{font-family:var(--mono);font-size:.72rem;color:var(--muted);letter-spacing:.06em;margin-right:.55rem;white-space:nowrap}
ul.findings b{color:var(--head)}
.fnd{color:var(--gold2);font-style:italic}

/* ---------------------------------------------------------------- print */
@media print{
  body{background:#fff;color:#000;font-size:11pt}
  .nav,footer nav,.toc,.jump,.cipherstrip,.card .go,button{display:none !important}
  a{color:#000;border:0}
  .callout,.bignews,table,pre,blockquote{box-shadow:none;background:#fff;border-color:#999}
}

/* ---------------------------------------------------------------- scoreboard (index.html, built by _build_stats.py) */
.scoreboard{margin:1.2rem 0 2.2rem;padding:1.5rem 1.6rem 1.2rem;border-radius:var(--radius);border:1px solid var(--rule);
  background:linear-gradient(160deg,var(--panel2),var(--panel) 60%,transparent);position:relative;overflow:hidden}
.scoreboard::before{content:"1394 1116 1273 250 1165 1405 972 148 1459 1482 1201 821 130 821 1429 720 970 1482 992 1319 1048 584 687 249 736 1013 750 967";
  position:absolute;right:-1rem;top:-.4rem;font-family:var(--mono);font-size:.62rem;letter-spacing:.3em;color:color-mix(in srgb,var(--gold) 18%,transparent);
  white-space:nowrap;pointer-events:none;user-select:none}
.scoreboard h2{margin-top:0}
.scoreboard .sb-lede{color:var(--ink2);margin:.2rem 0 1rem;max-width:78ch}
.sb-bar{display:flex;height:14px;border-radius:999px;overflow:hidden;gap:2px;background:var(--grey-bg)}
.sb-bar .seg{display:block;min-width:3px;transition:flex .6s cubic-bezier(.65,.05,.36,1)}
.sb-bar .seg.offline{opacity:.45}
.sb-legend{display:flex;flex-wrap:wrap;gap:.4rem 1.1rem;margin:.6rem 0 1.2rem;font-family:var(--mono);font-size:.74rem;color:var(--muted)}
.sb-legend .lg i{display:inline-block;width:.6em;height:.6em;border-radius:2px;margin-right:.45em;vertical-align:-.02em}
.sb-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:1rem 1.4rem;margin:0 0 1.2rem}
.sb-big b{display:block;font-family:var(--display);font-weight:500;font-size:clamp(2rem,4vw,2.9rem);line-height:1;color:var(--gold);letter-spacing:-.02em;font-variation-settings:"opsz" 144}
.sb-big b small{font-size:.42em;color:var(--muted);font-family:var(--mono);letter-spacing:0}
.sb-big span{display:block;margin-top:.45rem;font-size:.86rem;color:var(--ink2);line-height:1.45}
.sb-note{font-family:var(--mono);font-size:.74rem;color:var(--muted);margin:.4rem 0 .2rem;letter-spacing:.04em}
.tlwrap{position:relative;margin:.3rem 0 0;padding:.4rem .2rem 0;border-radius:var(--radius);
  background:radial-gradient(120% 90% at 50% 100%,color-mix(in srgb,var(--gold) 7%,transparent),transparent 70%)}
.tl{width:100%;height:auto;display:block;overflow:visible;color:var(--ink)}
.tl .axis{stroke:var(--ink2);stroke-opacity:.35;stroke-width:1.5}
.tl .grid{stroke:var(--rule);stroke-dasharray:2 4}
.tl .grid.major{stroke-dasharray:none;stroke-opacity:.8}
.tl .era{font-family:var(--mono);font-size:9.5px;letter-spacing:.18em;text-transform:uppercase;fill:var(--muted);opacity:.7}
.tl .tick{font-family:var(--mono);font-size:11px;fill:var(--muted)}
.tl .cursor{opacity:0;transition:opacity .2s;pointer-events:none}
.tl .cursor.on{opacity:1}
.tl .cur-line{stroke:var(--gold);stroke-width:1;stroke-dasharray:3 3}
.tl .cur-box{fill:var(--gold)}
.tl .cur-yr{font-family:var(--mono);font-size:10.5px;font-weight:700;fill:var(--bg)}
.tl .pt{cursor:pointer;outline:none;transform-box:fill-box;transition:opacity .3s,filter .3s}
.tl .pt .core{stroke:var(--bg);stroke-width:1.2;transform-box:fill-box;transform-origin:center;transition:transform .25s cubic-bezier(.34,1.8,.5,1),stroke .2s}
.tl .pt .halo{opacity:0;transform-box:fill-box;transform-origin:center;transition:opacity .25s,transform .25s}
.tl .pt.read .halo,.tl .pt.solved .halo{opacity:.35}
.tl .pt.offline .core{opacity:.5}
.tl .pt:hover .core,.tl .pt:focus-visible .core,.tl .pt.hot .core{transform:scale(1.75);stroke:var(--head);stroke-width:1.4}
.tl .pt:hover .halo,.tl .pt:focus-visible .halo,.tl .pt.hot .halo{opacity:.9;transform:scale(2.2)}
.tl.dim .pt:not(.hot){opacity:.28}
.tl .pt.off{opacity:.08!important;pointer-events:none}
.tl.armed .pt{animation:tl-drop .7s cubic-bezier(.2,1.4,.4,1) backwards;animation-delay:calc(var(--i) * 9ms)}
@keyframes tl-drop{from{opacity:0;transform:translateY(calc(-1 * var(--dy) - 30px))}to{opacity:1;transform:none}}
.tl.pre .pt{opacity:0}
.sb-legend .lg{font:inherit;color:inherit;background:transparent;border:1px solid transparent;border-radius:999px;padding:.15rem .6rem;margin:0 -.3rem;cursor:pointer;transition:all .2s}
.sb-legend .lg:hover{border-color:var(--rule);color:var(--ink)}
.sb-legend .lg[aria-pressed=true]{background:var(--panel2);border-color:var(--rule);color:var(--head)}
.sb-legend.filtering .lg[aria-pressed=false]{opacity:.45}
/* the tooltip card */
.tltip{position:absolute;left:0;top:0;z-index:20;width:min(330px,86vw);pointer-events:none;
  background:color-mix(in srgb,var(--bg2) 88%,transparent);backdrop-filter:blur(14px) saturate(1.4);-webkit-backdrop-filter:blur(14px) saturate(1.4);
  border:1px solid color-mix(in srgb,var(--c,var(--gold)) 45%,var(--rule));border-radius:14px;
  box-shadow:0 18px 50px -12px rgba(0,0,0,.55),0 0 0 1px rgba(255,255,255,.03) inset,0 0 40px -10px var(--c,var(--gold));
  opacity:0;transform:translate(var(--tx),calc(var(--ty) + 8px)) scale(.96);transform-origin:var(--ox,50%) bottom;
  transition:opacity .18s,transform .22s cubic-bezier(.2,1.2,.4,1)}
.tltip.show{opacity:1;transform:translate(var(--tx),var(--ty)) scale(1)}
.tltip.pinned{pointer-events:auto}
.tltip::before{content:"";display:block;height:3px;border-radius:14px 14px 0 0;background:linear-gradient(90deg,var(--c),color-mix(in srgb,var(--c) 20%,transparent))}
.tltip .tt-in{padding:.75rem .95rem .8rem;position:relative}
.tltip .tt-yr{position:absolute;right:.7rem;top:.15rem;font-family:var(--display);font-size:2.9rem;line-height:1;font-weight:600;
  color:var(--c);opacity:.16;letter-spacing:-.04em;font-variation-settings:"opsz" 144}
.tltip .tt-pill{display:inline-flex;align-items:center;gap:.4em;font-family:var(--mono);font-size:.64rem;letter-spacing:.14em;text-transform:uppercase;
  color:var(--c);background:color-mix(in srgb,var(--c) 14%,transparent);border:1px solid color-mix(in srgb,var(--c) 35%,transparent);padding:.12rem .5rem;border-radius:999px}
.tltip .tt-pill i{width:.5em;height:.5em;border-radius:50%;background:var(--c);box-shadow:0 0 8px var(--c)}
.tltip .tt-name{font-family:var(--display);font-size:1.02rem;line-height:1.28;color:var(--head);margin:.45rem 0 .1rem;padding-right:2.6rem}
.tltip .tt-date{font-family:var(--mono);font-size:.72rem;color:var(--muted)}
.tltip .tt-note{font-size:.82rem;line-height:1.45;color:var(--ink2);margin:.5rem 0 0;padding-top:.5rem;border-top:1px solid var(--rule)}
.tltip .tt-note b{display:block;font-family:var(--mono);font-size:.62rem;letter-spacing:.14em;text-transform:uppercase;color:var(--muted);font-weight:500;margin-bottom:.15rem}
.tltip .tt-go{display:flex;justify-content:space-between;align-items:center;margin-top:.6rem;font-family:var(--mono);font-size:.7rem;color:var(--c)}
.tltip .tt-go span:last-child{color:var(--muted)}
.tltip .tt-arrow{position:absolute;width:12px;height:12px;left:var(--ax,50%);bottom:-6px;margin-left:-6px;transform:rotate(45deg);
  background:var(--bg2);border-right:1px solid color-mix(in srgb,var(--c) 45%,var(--rule));border-bottom:1px solid color-mix(in srgb,var(--c) 45%,var(--rule))}
.tltip.below .tt-arrow{bottom:auto;top:-6px;transform:rotate(225deg)}
@media (prefers-reduced-motion: reduce){.tl.armed .pt,.tl.armed .pt.read .halo,.tl.armed .pt.solved .halo{animation:none}.tl.pre .pt{opacity:1}.tltip{transition:none}}
.sb-foot{font-size:.8rem;color:var(--muted);margin:.8rem 0 0;line-height:1.5}
.sb-foot code{font-family:var(--mono);font-size:.9em}
@media (max-width:760px){.sb-grid{grid-template-columns:1fr 1fr}.scoreboard{padding:1.2rem 1.1rem 1rem}.scoreboard::before{display:none}}
@media (max-width:420px){.sb-grid{grid-template-columns:1fr}}

/* ---------------------------------------------------------------- write-ups menu (compact) and index page */
.nav .panel.wp{width:min(640px,calc(100vw - 2rem));grid-template-columns:1.35fr 1fr}
.nav .panel .foot{grid-column:1/-1;border-top:1px solid var(--rule);padding-top:.7rem;margin-top:.1rem;display:flex;justify-content:space-between;gap:.6rem 1.2rem;flex-wrap:wrap;font-size:.86rem}
.nav .panel .foot a{border:0;color:var(--gold2)}
.nav .panel.ex{width:min(400px,calc(100vw - 2rem));grid-template-columns:1fr;gap:.6rem}
.nav .panel.ex li a{grid-template-columns:1fr;gap:.05rem;padding:.45rem .6rem}
@media (max-width:860px){ .nav .panel.wp,.nav .panel.ex{width:auto;grid-template-columns:1fr} }
.nav .panel.ex li a .d{font-size:.8rem;color:var(--muted);line-height:1.3}
.nav .panel.ex li a[href="highlights.html"] b::after{content:"new";margin-left:.5rem;font:600 .58rem var(--mono);letter-spacing:.08em;text-transform:uppercase;color:var(--gold-ink);background:var(--gold);padding:.08em .45em;border-radius:4px;vertical-align:.15em}
.nav .panel .foot a:hover,.nav .panel .foot a[aria-current]{color:var(--head)}
.nav .panel li a .st{min-width:1.6em;justify-content:center}
/* Latest: the method tags are too long to share a line with the title, so title + year on top, tag underneath */
.nav .panel .latest li a{grid-template-columns:minmax(0,1fr) auto;grid-template-areas:"t y" "s s";gap:.15rem .8rem;align-items:baseline;padding:.4rem .5rem}
.nav .panel .latest li a b{grid-area:t;white-space:normal;line-height:1.25;min-width:0}
.nav .panel .latest li a .yr{grid-area:y;text-align:right;max-width:9.5rem;line-height:1.3}
.nav .panel .latest li a .st{grid-area:s;justify-self:start;max-width:100%;overflow:hidden;text-overflow:ellipsis}
@media (max-width:860px){.nav .panel.wp{grid-template-columns:1fr}}
.allws{margin:.2rem 0 0;font-family:var(--mono);font-size:.8rem}
.allws a{color:var(--gold2);border:0}
.allws a:hover{color:var(--head)}
.wfilters{margin:.4rem 0 1.4rem;padding:.9rem 1.1rem;background:var(--panel);border:1px solid var(--rule);border-radius:var(--radius)}
.wfilters .facet{display:flex;flex-wrap:wrap;gap:.3rem;align-items:center;margin:.3rem 0}
.wfilters .flabel{font-family:var(--mono);font-size:.7rem;letter-spacing:.06em;color:var(--muted);min-width:5rem}
.wfilters .chip{padding:.2rem .65rem;border-radius:999px;border:1px solid var(--rule);background:var(--bg);color:var(--ink2);font-family:var(--mono);font-size:.72rem;cursor:pointer;box-shadow:none;transform:none}
.wfilters .chip[aria-pressed=true]{background:var(--gold);color:var(--gold-ink);border-color:var(--gold)}
.wfilters .chip:hover{border-color:var(--gold)}
.wfilters .gl{font-family:var(--mono);font-size:.7rem;margin-left:.4rem;color:var(--muted)}
.wfilters input[type=search]{flex:1 1 12rem;min-width:8rem;padding:.3rem .7rem;border-radius:999px;border:1px solid var(--rule);background:var(--bg);color:var(--ink);font:inherit;font-size:.86rem}
.wfilters input[type=search]:focus{outline:none;border-color:var(--gold)}
.wcount{font-family:var(--mono);font-size:.72rem;color:var(--muted);margin:.6rem 0 0;letter-spacing:.04em}
.wsec h2{margin-top:2.2rem}
.wsec[hidden]{display:none}
ul.list li[hidden]{display:none}
ul.list.wl a{grid-template-columns:auto 1fr auto auto;row-gap:.15rem}
ul.list.wl .st{align-self:start;margin-top:.25rem}
ul.list.wl .t{font-size:1.04rem}
ul.list.wl .b{grid-column:2/-1;font-size:.88rem;color:var(--ink2);line-height:1.45;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
ul.list.wl a:hover .b{-webkit-line-clamp:unset}
@media (max-width:620px){ul.list.wl a{grid-template-columns:1fr auto auto}ul.list.wl .b{grid-column:1/-1}}

/* site search: nav button and the palette it opens (markup from _build_site.py, behaviour in site.js) */
.nav .searchbtn{margin:0;padding:.3rem .55rem .3rem .5rem;background:var(--panel);color:var(--ink2);border:1px solid var(--rule);border-radius:8px;display:inline-flex;align-items:center;gap:.45rem;font:inherit;font-size:.84rem;letter-spacing:0;line-height:1.2;cursor:pointer;transform:none;box-shadow:none;white-space:nowrap}
.nav .searchbtn:hover{color:var(--gold2);border-color:var(--gold);transform:none;box-shadow:none}
.nav .searchbtn kbd,.shint kbd{font-family:var(--mono);font-size:.64rem;color:var(--muted);border:1px solid var(--rule);border-radius:4px;padding:0 .4em;line-height:1.5;background:var(--bg)}
html.sopen{overflow:hidden}
.search{position:fixed;inset:0;z-index:100;background:color-mix(in srgb,var(--bg) 72%,transparent);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);display:flex;justify-content:center;align-items:flex-start;padding:min(12vh,7rem) 1rem 1rem}
.search[hidden]{display:none}
.sbox{width:min(720px,100%);max-height:min(76vh,720px);display:flex;flex-direction:column;background:var(--bg2);border:1px solid var(--rule);border-radius:var(--radius);box-shadow:var(--shadow);overflow:hidden}
.sform{display:flex;align-items:center;gap:.7rem;margin:0;padding:.8rem 1rem;border-bottom:1px solid var(--rule);color:var(--muted)}
.sform input{flex:1;min-width:0;background:transparent;border:0;outline:0;color:var(--ink);font:inherit;font-size:1.08rem;padding:.2rem 0;-webkit-appearance:none;appearance:none}
.sform input::-webkit-search-cancel-button,.sform input::-webkit-search-decoration{-webkit-appearance:none;display:none}
.sclose{margin:0;padding:.15rem .5rem;background:transparent;color:var(--muted);border:1px solid var(--rule);border-radius:6px;font-family:var(--mono);font-size:.68rem;letter-spacing:.04em;cursor:pointer;transform:none;box-shadow:none}
.sclose:hover{color:var(--gold2);border-color:var(--gold);transform:none;box-shadow:none}
.sres{overflow-y:auto;overscroll-behavior:contain;padding:.4rem}
.smsg{margin:1.2rem 1rem;color:var(--muted);font-size:.92rem;text-align:center}
.sr{display:block;padding:.6rem .8rem;border:0;border-radius:10px;color:var(--ink)}
.sr:hover,.sr.on{background:var(--panel2)}
.sr .srt{display:block;font-family:var(--display);font-weight:500;font-size:1.02rem;color:var(--head);line-height:1.3}
.sr .srt .sec{color:var(--ink2);font-weight:400}
.sr .srt .sec::before{content:"\203A";color:var(--muted);margin:0 .3em}
.sr .srm{display:flex;flex-wrap:wrap;gap:.5rem;align-items:center;font-family:var(--mono);font-size:.68rem;color:var(--muted);margin:.25rem 0 .1rem;letter-spacing:.04em}
.sr .srm .st{font-size:.62rem;padding:.05em .5em .05em .45em}
.sr .srs{margin:.2rem 0 0;font-size:.9rem;color:var(--ink2);line-height:1.45}
.sr mark{background:var(--amber-bg);color:var(--gold2);padding:0 .06em;border-radius:3px;font-weight:600}
:root[data-theme="light"] .sr mark{color:var(--amber)}
.shint{display:flex;gap:1.1rem;padding:.5rem 1rem;border-top:1px solid var(--rule);font-family:var(--mono);font-size:.68rem;color:var(--muted)}
.shint .sn{margin-left:auto}
@media (max-width:860px){
  .nav .searchbtn{width:100%;justify-content:flex-start;margin:.5rem 0 0;padding:.55rem .7rem;font-size:1rem}
  .nav .searchbtn kbd{display:none}
  .search{padding:.6rem}
  .sbox{max-height:calc(100vh - 1.2rem);max-height:calc(100dvh - 1.2rem)}
  .shint span:not(.sn){display:none}
}

/* ---------------------------------------------------------------- cipher reveal (cipher-reveal.js) */
.creveal{text-align:left;margin:2rem 0;padding:1.2rem 1.3rem 1rem;border:1px solid var(--rule);border-radius:var(--radius);
  background:radial-gradient(600px 200px at 10% 0%,var(--glow1),transparent 70%),var(--panel);box-shadow:var(--shadow);min-height:12rem}
.creveal .cr-head{display:flex;justify-content:space-between;align-items:flex-end;gap:1rem;flex-wrap:wrap}
.creveal h3{margin:.15rem 0 0;font-family:var(--display);font-size:1.2rem;color:var(--head)}
.cr-kick{font-family:var(--mono);font-size:.68rem;letter-spacing:.12em;text-transform:uppercase;color:var(--gold)}
.cr-ctl{display:flex;gap:.4rem}
.cr-ctl button{font:500 .74rem var(--mono);padding:.35rem .7rem;border-radius:999px;border:1px solid var(--rule);background:var(--bg);color:var(--ink2);cursor:pointer}
.cr-ctl button:hover,.cr-ctl button[aria-pressed=true]{border-color:var(--gold);color:var(--gold2)}
.cr-bar{height:2px;background:var(--rule);border-radius:2px;margin:.9rem 0 .2rem;overflow:hidden}
.cr-bar i{display:block;height:100%;width:0;background:linear-gradient(90deg,var(--gold),var(--gold2));box-shadow:0 0 12px var(--gold)}
.cr-tiles{display:flex;flex-wrap:wrap;gap:.4rem .3rem;margin-top:.8rem;align-items:flex-end}
.cr-t{transition:transform .25s,background .2s,border-color .2s,opacity .2s}
.cr-t[tabindex]{cursor:pointer}
.cr-t .p{min-height:1.2em}
.cr-t:not(.done):not(.plain) .p{color:var(--muted);font-family:var(--mono);font-style:normal;font-size:.8rem}
.cr-t.done:not(.plain){animation:crpop .5s ease-out}
@keyframes crpop{0%{box-shadow:0 0 0 0 var(--gold);transform:translateY(-2px)}100%{box-shadow:0 0 0 7px transparent;transform:none}}
.cr-t.null .p{color:var(--muted)}
.creveal.tracing .cr-t:not(.hl):not(.hom){opacity:.32}
.cr-t.hl{background:var(--gold);border-color:var(--gold);transform:translateY(-3px)}
.cr-t.hl .p,.cr-t.hl .g{color:var(--gold-ink)!important}
.cr-t.hom{border-color:var(--violet);background:var(--violet-bg);transform:translateY(-2px)}
.cr-t.hom .p{color:var(--violet)!important}
.creveal.cipher .cr-t:not(.plain) .p{visibility:hidden}
.creveal.cipher .cr-t:not(.plain) .g{font-size:.85rem;color:var(--ink)}
.cr-info{font-family:var(--mono);font-size:.76rem;color:var(--muted);margin:.9rem 0 .3rem;min-height:1.3em}
.cr-info .cr-g{color:var(--gold2)} .cr-info .cr-p{color:var(--head);font-family:var(--display);font-style:italic;font-size:.95rem} .cr-homs{color:var(--violet)}
.cr-key summary{cursor:pointer;font-family:var(--mono);font-size:.74rem;color:var(--ink2);letter-spacing:.04em;padding:.3rem 0}
.cr-key summary span{color:var(--muted);margin-left:.4rem}
.cr-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(6.5rem,1fr));gap:.25rem;margin:.5rem 0;max-height:18rem;overflow:auto;padding-right:.3rem}
.cr-k{display:flex;align-items:baseline;gap:.4rem;padding:.2rem .45rem;border-radius:6px;border:1px solid var(--rule);background:var(--bg);color:var(--ink2);font:inherit;cursor:pointer;text-align:left;min-width:0}
.cr-k b{font:600 .72rem var(--mono);color:var(--muted)} .cr-k i{font-family:var(--display);color:var(--gold2);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.cr-k small{margin-left:auto;font:.62rem var(--mono);color:var(--muted)}
.cr-k.hl{background:var(--gold);border-color:var(--gold)} .cr-k.hl b,.cr-k.hl i,.cr-k.hl small{color:var(--gold-ink)}
.cr-k.hom{border-color:var(--violet);background:var(--violet-bg)}
.cr-k.unk i,.cr-t.unk .p{color:var(--red)} .cr-t.unc .p{color:var(--amber)} .cr-t.code .p,.cr-k.code i{color:var(--blue)}
.cr-note{font-size:.85rem;color:var(--muted);margin:.3rem 0}
.creveal figcaption{font-size:.85rem;color:var(--muted);margin-top:.6rem;border-top:1px solid var(--rule);padding-top:.6rem}
@media (max-width:600px){.creveal{padding:1rem .8rem}.cr-grid{grid-template-columns:repeat(auto-fill,minmax(5.5rem,1fr))}}

/* ---------------------------------------------------------------- how it was solved (solve-replay.js) */
.sreplay{text-align:left;margin:2rem 0;padding:1.2rem 1.3rem 1rem;border:1px solid var(--rule);border-radius:var(--radius);
  background:radial-gradient(600px 220px at 90% 0%,var(--glow2),transparent 70%),var(--panel);box-shadow:var(--shadow);
  --ok:var(--green);--part:var(--amber);--fail:var(--red);--out:var(--muted)}
.sr-head{display:flex;justify-content:space-between;align-items:flex-end;gap:1rem;flex-wrap:wrap}
.sr-kick{font-family:var(--mono);font-size:.68rem;letter-spacing:.12em;text-transform:uppercase;color:var(--gold)}
.sreplay h3{margin:.15rem 0 0;font-family:var(--display);font-size:1.25rem;color:var(--head)}
.sreplay h3 em{color:var(--red);font-style:italic} .sreplay h3 small{font:.75rem var(--mono);color:var(--muted);margin-left:.3rem}
.sr-ctl{display:flex;gap:.35rem}
.sr-ctl button{font:.72rem var(--mono);width:2.3rem;height:2rem;border-radius:999px;border:1px solid var(--rule);background:var(--bg);color:var(--ink2);cursor:pointer}
.sr-ctl .sr-play{border-color:var(--gold);color:var(--gold2)}
.sr-ctl button:hover{border-color:var(--gold);color:var(--gold2)}
.sr-chips{display:flex;flex-wrap:wrap;gap:.3rem;margin:.6rem 0 0}
.sr-c{font:.68rem var(--mono);padding:.15rem .55rem;border-radius:999px;border:1px solid var(--rule);color:var(--muted)}
.sr-c.out-ok{color:var(--green);border-color:color-mix(in srgb,var(--green) 40%,transparent)} .sr-c.out-part{color:var(--amber);border-color:color-mix(in srgb,var(--amber) 40%,transparent)}
.sr-track{display:flex;flex-wrap:wrap;gap:1.9rem .55rem;margin:1.4rem 0 .4rem;padding:.9rem 0 1.4rem;align-items:flex-start}
.sr-b{position:relative;width:1.9rem;height:1.9rem;border-radius:50%;border:2px solid var(--c,var(--muted));background:var(--bg);color:var(--c,var(--muted));
  font:600 .82rem var(--mono);cursor:pointer;padding:0;display:grid;place-items:center;opacity:.28;transition:opacity .3s,transform .3s,box-shadow .3s,background .3s}
.sr-b.ok{--c:var(--ok)} .sr-b.part{--c:var(--part)} .sr-b.fail{--c:var(--fail)} .sr-b.out{--c:var(--out)}
.sr-b::before{content:"";position:absolute;right:100%;top:50%;width:.55rem;height:2px;background:var(--rule)}
.sr-b:first-child::before{display:none}
.sr-b.dead{transform:translateY(1.1rem);border-style:dashed}
.sr-b.dead::before{top:-.2rem;height:2px;width:.9rem;transform:rotate(-50deg);transform-origin:right;right:70%;background:color-mix(in srgb,var(--c) 45%,transparent)}
.sr-b.dead::after{content:"\00d7";position:absolute;bottom:-1.05rem;left:50%;transform:translateX(-50%);font-size:.8rem;color:var(--c)}
.sr-day{position:absolute;top:-1.3rem;left:0;font:500 .6rem var(--mono);color:var(--muted);white-space:nowrap;pointer-events:none}
.sr-b.dead .sr-day{top:-2.4rem}
.sr-b.seen{opacity:1}
.sr-b.cur{background:var(--c);color:var(--bg);box-shadow:0 0 0 5px color-mix(in srgb,var(--c) 22%,transparent),0 0 18px var(--c);transform:scale(1.15)}
.sr-b.dead.cur{transform:translateY(1.1rem) scale(1.15)}
.sr-card{min-height:5.6rem;border-left:3px solid var(--c,var(--rule));padding:.4rem 0 .3rem .9rem;margin:.6rem 0 .8rem;animation:srin .35s ease-out}
.sr-card.ok{--c:var(--ok)} .sr-card.part{--c:var(--part)} .sr-card.fail{--c:var(--fail)} .sr-card.out{--c:var(--out)}
@keyframes srin{from{opacity:.2;transform:translateX(-4px)}to{opacity:1;transform:none}}
.sr-meta{display:flex;flex-wrap:wrap;gap:.3rem .8rem;font:.7rem var(--mono);color:var(--muted);letter-spacing:.03em}
.sr-meta .sr-k{color:var(--ink2);text-transform:uppercase;letter-spacing:.08em} .sr-meta .sr-r{color:var(--c);font-weight:600}
.sr-card p{margin:.35rem 0 0;font-size:.98rem;line-height:1.5}
.sr-idle{color:var(--muted);font-size:.9rem}
.sr-legend{display:flex;flex-wrap:wrap;gap:.3rem 1rem;font:.66rem var(--mono);color:var(--muted)}
.sr-legend i{display:inline-block;width:.6rem;height:.6rem;border-radius:50%;border:2px solid;margin-right:.3rem;vertical-align:-1px}
.sr-legend i.ok{border-color:var(--ok)} .sr-legend i.part{border-color:var(--part)} .sr-legend i.fail{border-color:var(--fail);border-style:dashed} .sr-legend i.out{border-color:var(--out);border-style:dashed}
.sr-all summary{cursor:pointer;font:.72rem var(--mono);color:var(--ink2);margin-top:.7rem}
.sr-all ol{font-size:.88rem;padding-left:1.4rem;max-height:22rem;overflow:auto} .sr-all li{margin:.35rem 0}
.sr-all li b{font-family:var(--mono);font-size:.72rem;text-transform:uppercase;letter-spacing:.06em}
.sr-all li.ok span{color:var(--green)} .sr-all li.part span{color:var(--amber)} .sr-all li.fail span{color:var(--red)} .sr-all li.out span{color:var(--muted)}
.sreplay figcaption{font-size:.82rem;color:var(--muted);margin-top:.7rem;border-top:1px solid var(--rule);padding-top:.6rem}
@media (max-width:600px){.sreplay{padding:1rem .8rem}.sr-track{gap:1.9rem .45rem}}

/* ---------------------------------------------------------------- archival touches: paper grain, wax seals, period hand */
:root{--period:"IM Fell English","Source Serif 4",Georgia,serif;--grain:.05;--wax-hi:rgba(255,255,255,.45)}
:root[data-theme="light"]{--grain:.085;--wax-hi:rgba(255,255,255,.55)}
/* paper grain: fixed, still, under everything that matters */
body::before{content:"";position:fixed;inset:0;z-index:200;pointer-events:none;opacity:var(--grain);mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .5 0 0 0 0 .42 0 0 0 0 .3 0 0 0 1.4 -.2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E")}
:root[data-theme="light"] body::before{mix-blend-mode:multiply}
/* foxing at the page edges, light theme only (paper) */
:root[data-theme="light"] body{box-shadow:inset 0 0 180px rgba(120,80,20,.10)}
/* the outcome badges become small wax seals */
.st::before{width:.78em;height:.78em;box-shadow:inset 0 0 0 .09em color-mix(in srgb,currentColor 60%,#000),inset .08em .1em .12em var(--wax-hi),0 .05em .12em rgba(0,0,0,.35);
  border-radius:52% 46% 50% 47%/47% 53% 45% 52%;background:radial-gradient(circle at 38% 34%,color-mix(in srgb,currentColor 55%,#fff) 0 18%,currentColor 48%,color-mix(in srgb,currentColor 70%,#000) 100%)}
/* the period hand: deciphered plaintext */
.tile .p,.cr-t .p,.cr-k i,.cr-info .cr-p,.hero .cipherstrip{font-family:var(--period)}
.tile .p,.cr-t .p{font-size:1.12rem;font-style:normal;letter-spacing:.01em}
.cr-t:not(.done):not(.plain) .p{font-family:var(--mono)}
.cr-t.plain .p{font-family:var(--serif);font-style:italic}
blockquote.reading,blockquote.big{font-family:var(--period);font-size:1.3rem;line-height:1.55}
/* the seal on every write-up: pressed in once, outcome in the wax */
.hero{position:relative}
@media (min-width:761px){.hero:has(> .seal) > .sub,.hero:has(> .seal) > h1{margin-right:10rem}}
.hero .seal{position:absolute;right:1.4rem;top:7.2rem;width:8.2rem;height:8.2rem;display:grid;place-items:center;pointer-events:none;
  color:var(--wx);transform:rotate(-12deg);filter:drop-shadow(0 .25rem .4rem rgba(0,0,0,.35))}
.hero .seal::before{content:"";position:absolute;inset:0;border-radius:51% 47% 53% 46%/48% 54% 45% 52%;
  background:radial-gradient(circle at 36% 30%,color-mix(in srgb,var(--wx) 55%,#fff) 0 10%,var(--wx) 42%,color-mix(in srgb,var(--wx) 60%,#000) 100%);
  box-shadow:inset 0 0 0 .45rem color-mix(in srgb,var(--wx) 80%,#000),inset 0 0 0 .54rem color-mix(in srgb,var(--wx) 60%,#fff),inset .2rem .25rem .5rem var(--wax-hi)}
.hero .seal::after{content:"";position:absolute;inset:1.25rem;border-radius:50%;border:1px dashed color-mix(in srgb,var(--wx) 45%,#000)}
.hero .seal span{position:relative;z-index:1;font:600 .92rem/1.1 var(--display);letter-spacing:.14em;text-transform:uppercase;text-align:center;max-width:5.4rem;
  color:color-mix(in srgb,var(--wx) 35%,#000);text-shadow:0 1px 0 color-mix(in srgb,var(--wx) 40%,#fff)}
.hero .seal{background:none;border:0}
.hero .seal.solved{--wx:#9b2a22} .hero .seal.partial{--wx:#a4651c} .hero .seal.found{--wx:#2f4d7a} .hero .seal.stuck{--wx:#4a4640}
@media (max-width:760px){.hero .seal{right:.9rem;top:.8rem;bottom:auto;width:4.6rem;height:4.6rem}.hero .seal::after{inset:.65rem}.hero .seal span{font-size:.56rem;letter-spacing:.1em;max-width:3.4rem}.hero:has(> .seal) > .kicker{margin-right:4.6rem}}
@media print{body::before,.hero .seal{display:none}}

/* ---------------------------------------------------------------- deep-zoom viewer (zoom.js) */
img.zoomable{cursor:zoom-in;transition:filter .2s,box-shadow .2s}
img.zoomable:hover,img.zoomable:focus-visible{filter:brightness(1.06);box-shadow:0 0 0 2px var(--gold)}
figure:has(> img.zoomable){position:relative}
figure:has(> img.zoomable)::after{content:"\2922  zoom";position:absolute;top:.6rem;right:.6rem;font:.66rem var(--mono);letter-spacing:.06em;
  padding:.2rem .5rem;border-radius:999px;background:rgba(0,0,0,.55);color:#fff;opacity:0;transition:opacity .2s;pointer-events:none}
figure:has(> img.zoomable:hover)::after,figure:has(> img.zoomable:focus-visible)::after{opacity:1}
html.zv-lock{overflow:hidden}
.zv{position:fixed;inset:0;z-index:300;display:flex;flex-direction:column;background:#08090c;color:#eee;isolation:isolate}
.zv[hidden]{display:none}
.zv-bar{display:flex;align-items:flex-start;gap:1rem;padding:.7rem 1rem;border-bottom:1px solid rgba(255,255,255,.12)}
.zv-cap{flex:1;margin:0;font-size:.88rem;line-height:1.45;color:#d8d2c4;max-height:4.4em;overflow:auto}
.zv-cap,.zv-cap *{color:#d8d2c4 !important;background:none !important}
.zv-cap a{color:#f0cf86 !important}
.zv-btns{display:flex;gap:.35rem;flex-shrink:0}
.zv-btns button{font:600 .8rem var(--mono);min-width:2.2rem;height:2.1rem;padding:0 .6rem;border-radius:8px;border:1px solid rgba(255,255,255,.2);background:rgba(255,255,255,.06);color:#eee;cursor:pointer}
.zv-btns button:hover{border-color:#d9ac52;color:#f0cf86}
.zv-btns .zv-tr[aria-pressed=true]{background:#d9ac52;color:#1a1408;border-color:#d9ac52}
.zv-view{flex:1;min-height:0;position:relative}
.zv-src{margin:0;padding:.35rem 1rem;font:.68rem var(--mono);color:#8f8a7d;min-height:1.6em}
.zv-err{padding:2rem;text-align:center;color:#ff8d7e}
.zv-line{overflow:hidden;border-radius:3px;pointer-events:auto;
  background:rgba(12,15,21,.34);border:1px solid rgba(240,207,134,.5);color:#fff7e2;text-shadow:0 0 3px #000,0 0 6px #000;padding:0 .3em;line-height:1.05;
  font-family:var(--mono);white-space:nowrap;transition:opacity .25s,background .2s}
.zv-line .in{display:flex;flex-direction:column;justify-content:center;height:100%;gap:.08em}
.zv-line:hover{background:rgba(12,15,21,.82)}
.zv-line .gl{font-family:var(--period);color:#f0cf86;font-size:1.15em;text-overflow:ellipsis;overflow:hidden}
.zv-line .t{text-overflow:ellipsis;overflow:hidden}
.zv.zv-off .zv-line{opacity:0;pointer-events:none}
@media (max-width:640px){.zv-bar{flex-direction:column;gap:.5rem}.zv-cap{max-height:3em}}

/* ---------------------------------------------------------------- live home header (home.js) */
.hero .cipherstrip.live{pointer-events:auto;user-select:auto;letter-spacing:.04em;line-height:1.35;max-width:21rem;transition:opacity .5s}
.hero .cipherstrip.live.fade{opacity:0}
.cipherstrip .ls{display:block;margin-bottom:.45rem}
.cipherstrip .ls .lc{display:block;font-family:var(--mono);font-size:.68rem;letter-spacing:.18em;color:color-mix(in srgb,var(--gold) 55%,transparent);transition:color .6s}
.cipherstrip .ls .lp{display:block;min-height:1.3em;font-family:var(--period);font-size:1.02rem;letter-spacing:.01em;color:var(--gold2);text-transform:none}
.cipherstrip .ls.done .lc{color:color-mix(in srgb,var(--gold) 30%,transparent)}
.cipherstrip .lsrc{display:inline-block;margin-top:.2rem;font:.66rem var(--mono);letter-spacing:.08em;color:var(--muted);border:0;opacity:0;transition:opacity .6s}
.cipherstrip .lsrc.on{opacity:1} .cipherstrip .lsrc:hover{color:var(--gold2)}
@media (min-width:761px){.hero:has(.cipherstrip.live) > .kicker,.hero:has(.cipherstrip.live) > h1,.hero:has(.cipherstrip.live) > .sub{margin-right:23rem}}
.livecount{display:flex;flex-wrap:wrap;gap:.6rem;margin:1.3rem 0 .4rem;align-items:stretch}
.livecount .lc{display:flex;flex-direction:column;justify-content:flex-start;padding:.55rem .85rem;border:1px solid var(--rule);border-radius:12px;background:var(--panel);color:var(--ink2);min-width:7.5rem;transition:border-color .2s,transform .2s}
.livecount .lc:hover{border-color:var(--gold);transform:translateY(-2px);color:var(--ink2)}
.livecount .lc b{font:700 1.7rem/1 var(--display);color:var(--head);font-variant-numeric:tabular-nums}
.livecount .lc span{font:.66rem var(--mono);letter-spacing:.04em;color:var(--muted);margin-top:.3rem;max-width:12rem}
.randbtn{align-self:center;font:600 .82rem var(--mono);padding:.7rem 1.1rem;border-radius:999px;border:1px solid var(--gold);background:var(--gold);color:var(--gold-ink);cursor:pointer;transition:transform .2s,box-shadow .2s}
.randbtn:hover{transform:rotate(-3deg) scale(1.04);box-shadow:0 0 18px color-mix(in srgb,var(--gold) 45%,transparent)}
@media (max-width:600px){.livecount .lc{min-width:calc(50% - .3rem);flex:1}.randbtn{width:100%}}
.sb-big b{font-variant-numeric:tabular-nums}
.sb-big b .sb-n{display:inline-block;margin:0;font-size:inherit;color:inherit;line-height:inherit}

/* ---------------------------------------------------------------- pictures in the index lists and slides */
/* Recent findings: a crop of the script, the correspondent's portrait in its corner */
ul.findings li:has(> .fth){padding-left:4.8rem;min-height:4.6rem}
ul.findings li:has(> .fth)::before{display:none}
.fth,.rth{position:relative;display:inline-block;flex:none}
.fth{position:absolute;left:0;top:.72rem;width:3.8rem;height:3.8rem}
.fth .sc,.fth .pt,.rth .sc,.rth .pt{display:block;width:100%;height:100%;object-fit:cover;border-radius:6px;border:1px solid color-mix(in srgb,var(--gold) 40%,transparent);
  filter:sepia(.28) saturate(.85) contrast(1.05);background:var(--panel2)}
.fth .pt,.rth .pt{border-radius:50%}
.fth .pc,.rth .pc{position:absolute;right:-.4rem;bottom:-.4rem;width:1.75rem;height:1.75rem;border-radius:50%;object-fit:cover;
  border:1px solid color-mix(in srgb,var(--gold) 60%,transparent);box-shadow:0 0 0 2px var(--bg);filter:sepia(.18) saturate(.9)}
/* And the rest: the same, smaller, as the first column */
ul.list a:has(> .rth){grid-template-columns:auto auto 1fr auto auto}
.rth{width:2.7rem;height:2.7rem}
.rth:empty{border-radius:6px;border:1px dashed var(--rule);background:repeating-linear-gradient(135deg,transparent 0 5px,color-mix(in srgb,var(--gold) 7%,transparent) 5px 6px)}
.rth .pc{width:1.3rem;height:1.3rem;right:-.3rem;bottom:-.3rem}
@media (max-width:620px){ul.list a:has(> .rth){grid-template-columns:auto 1fr auto;gap:.7rem}ul.list a:has(> .rth) .dt{display:none}.rth{width:2.2rem;height:2.2rem}
  ul.findings li:has(> .fth){padding-left:3.6rem;min-height:3.4rem}.fth{width:2.8rem;height:2.8rem}.fth .pc{width:1.35rem;height:1.35rem}}
/* the Unsolved Catalogue: top of the queue on the index, faces in the table */
ul.list.cattop a{grid-template-columns:4.6rem 1fr auto auto}
ul.list.cattop .avs{justify-self:center}
ul.list.cattop .avs img{width:34px;height:34px}
ul.list.cattop .pr{font-family:var(--display);font-size:1.15rem;color:var(--gold)}
.avs.none i{display:grid;place-items:center;width:34px;height:34px;border-radius:50%;font:600 .62rem/1 var(--mono);letter-spacing:.06em;text-transform:uppercase;font-style:normal;
  color:color-mix(in srgb,var(--gold) 80%,var(--ink));border:1px dashed color-mix(in srgb,var(--gold) 45%,transparent);background:color-mix(in srgb,var(--gold) 6%,transparent)}
#cat td.item > .avs{float:left;margin:.1rem .6rem .2rem 0}
#cat td.item > .avs img{width:34px;height:34px}
@media (max-width:620px){ul.list.cattop a{grid-template-columns:4.6rem 1fr auto}ul.list.cattop .yr{display:none}}

/* the slides: who wrote to whom over the picture, and the cipher deciphering underneath it */
.bn-panel .art{position:relative;text-align:left}
.bn-who{position:absolute;top:.6rem;left:.6rem;z-index:1;display:flex;align-items:center;gap:.45rem;padding:.28rem .7rem .28rem .28rem;border-radius:999px;
  background:color-mix(in srgb,var(--bg) 78%,transparent);backdrop-filter:blur(6px);border:1px solid color-mix(in srgb,var(--gold) 35%,transparent)}
.bn-who b{color:var(--gold);font-weight:400}
.bw{display:flex;align-items:center;gap:.45rem;font:500 .8rem/1.15 var(--display);color:var(--head)}
.bw img{width:40px;height:40px;border-radius:50%;object-fit:cover;border:1px solid color-mix(in srgb,var(--gold) 60%,transparent);filter:sepia(.18) saturate(.9)}
.bw i{display:block;font:normal .56rem/1.2 var(--mono);letter-spacing:.14em;text-transform:uppercase;color:var(--muted)}
.bn-solve{position:absolute;left:0;right:0;bottom:0;z-index:1;padding:1.6rem .75rem .65rem;
  background:linear-gradient(to bottom,transparent,color-mix(in srgb,var(--bg) 88%,transparent) 42%)}
.bn-solve .bk{display:block;font:.6rem var(--mono);letter-spacing:.16em;text-transform:uppercase;color:var(--gold);margin-bottom:.3rem}
.bts{display:flex;gap:.28rem;overflow:hidden;mask-image:linear-gradient(to right,#000 85%,transparent)}
.bt{display:flex;flex-direction:column;align-items:center;flex:none;min-width:1.7rem;padding:.14rem .38rem .1rem;border-radius:5px;
  border:1px solid color-mix(in srgb,var(--gold) 28%,var(--rule));background:color-mix(in srgb,var(--panel) 85%,transparent)}
.bt .g{font:.64rem var(--mono);color:var(--muted)}
.bt .p{font:1rem/1.2 var(--period);color:var(--gold2);min-height:1.2em;transition:color .3s}
.bt.more{justify-content:center;color:var(--muted);border-style:dashed}
.bt.scr .p{color:var(--muted);font-family:var(--mono);font-size:.78rem}
.bt.hit{animation:btpop .45s ease-out}
@keyframes btpop{0%{transform:translateY(0)}40%{transform:translateY(-3px);border-color:var(--gold)}100%{transform:none}}
.bn-solve .bl{position:absolute;right:.75rem;top:1.55rem;font:.6rem var(--mono);letter-spacing:.12em;text-transform:uppercase;color:var(--muted);border:0}
.bn-solve .bl:hover{color:var(--gold2)}
/* a slide with no picture: a panel of its correspondents and its cipher */
.bn-panel .art.solveart{display:flex;flex-direction:column;justify-content:center;gap:1.1rem;padding:1.3rem 1.2rem;
  background:radial-gradient(120% 90% at 30% 20%,color-mix(in srgb,var(--gold) 9%,var(--panel)),var(--panel2));}
.art.solveart .bn-who{position:static;align-self:flex-start;background:none;border:0;backdrop-filter:none;padding:0;gap:.7rem;flex-wrap:wrap}
.art.solveart .bw img{width:68px;height:68px}
.art.solveart .bw{font-size:1rem}
.art.solveart .bn-solve{position:relative;background:none;padding:0}
.art.solveart .bn-solve .bl{top:0}
.art.solveart .bts{flex-wrap:wrap;mask-image:none}
@media (prefers-reduced-motion: reduce){.bt.hit{animation:none}}

/* ---------------------------------------------------------------- a sealed letter: deciphers only when the seal is broken */
.cr-t.wb{min-width:.7rem;padding:0;visibility:hidden}
.creveal.sealed .cr-t:not(.plain) .p{opacity:0}
.creveal.sealed .cr-play,.creveal.sealed .cr-mode{visibility:hidden}
.creveal .cr-tiles{position:relative}
.cr-gate{display:flex;justify-content:center;margin:1.3rem 0 .5rem}
.cr-break,.cr-break:hover,.cr-break:focus{display:flex;flex-direction:column;align-items:center;gap:.7rem;background:none;border:0;box-shadow:none;transform:none;padding:.4rem 1rem;cursor:pointer;color:var(--gold2)}
.cr-break .cr-lbl{font:600 .78rem var(--mono);letter-spacing:.14em;text-transform:uppercase;padding:.45rem 1rem;border-radius:999px;border:1px solid var(--gold);
  background:color-mix(in srgb,var(--gold) 12%,transparent);transition:background .2s,color .2s,opacity .3s}
.cr-break:hover .cr-lbl,.cr-break:focus-visible .cr-lbl{background:var(--gold);color:var(--gold-ink)}
.cr-seal{position:relative;width:5.2rem;height:5.2rem;filter:drop-shadow(0 .35rem .5rem rgba(0,0,0,.4));transition:transform .25s}
.cr-break:hover .cr-seal{transform:rotate(-8deg) scale(1.06)}
.cr-seal i{position:absolute;inset:0;border-radius:51% 47% 53% 46%/48% 54% 45% 52%;
  background:radial-gradient(circle at 36% 30%,#e0695b 0 9%,#9b2a22 45%,#5a120d 100%);
  box-shadow:inset 0 0 0 .38rem #7a1d16,inset 0 0 0 .46rem #c0544a;transition:transform .8s cubic-bezier(.5,-.3,.7,1),opacity .8s}
.cr-seal i:first-child{clip-path:polygon(0 0,54% 0,44% 22%,58% 40%,42% 60%,56% 78%,46% 100%,0 100%)}
.cr-seal i:last-child{clip-path:polygon(54% 0,100% 0,100% 100%,46% 100%,56% 78%,42% 60%,58% 40%,44% 22%)}
.cr-seal::after{content:"✦";position:absolute;inset:0;display:grid;place-items:center;font-size:1.6rem;color:rgba(60,8,5,.7);text-shadow:0 1px 0 rgba(255,190,170,.3);transition:opacity .3s}
.creveal.breaking .cr-seal::after{opacity:0}
.creveal.breaking .cr-seal i:first-child{transform:translate(-2.2rem,1.4rem) rotate(-38deg);opacity:0}
.creveal.breaking .cr-seal i:last-child{transform:translate(2.2rem,1.6rem) rotate(34deg);opacity:0}
.creveal.breaking .cr-lbl{opacity:0}
.creveal.breaking .cr-tiles::after{content:"";position:absolute;inset:-.4rem 0;pointer-events:none;
  background:linear-gradient(100deg,transparent 30%,color-mix(in srgb,var(--gold) 45%,transparent) 50%,transparent 70%);background-size:250% 100%;
  animation:crsweep .9s ease-in-out forwards;mix-blend-mode:screen}
@keyframes crsweep{from{background-position:120% 0}to{background-position:-20% 0}}
.creveal.unsealed .cr-t.done:not(.plain):not(.wb){animation:crflip .55s cubic-bezier(.2,.8,.3,1.2)}
@keyframes crflip{0%{transform:rotateX(90deg);box-shadow:0 0 0 transparent}55%{transform:rotateX(-12deg);box-shadow:0 0 14px color-mix(in srgb,var(--gold) 70%,transparent);border-color:var(--gold)}100%{transform:none}}
@media (prefers-reduced-motion: reduce){.cr-seal i,.creveal.breaking .cr-tiles::after,.creveal.unsealed .cr-t.done{transition:none;animation:none}}
.gloss dt{margin-top:1.1rem;font-weight:600}
.gloss dt .st{margin-right:.5rem;vertical-align:.1em}
.gloss dd{margin:.3rem 0 0 0;color:var(--ink2)}
.gloss dd a{white-space:nowrap}

/* ---- 译本 ---- */
html[lang^="zh"] body{font-family:"Iowan Old Style","Source Serif 4",Georgia,"Songti SC","Noto Serif SC","Source Han Serif SC","STSong",serif;}
html[lang="zh-Hant"] body{font-family:"Iowan Old Style","Source Serif 4",Georgia,"Songti TC","Noto Serif TC","Source Han Serif TC",serif;}
html[lang="ja"] body{font-family:"Iowan Old Style","Source Serif 4",Georgia,"Hiragino Mincho ProN","Yu Mincho","Noto Serif JP",serif;}
html[lang="ko"] body{font-family:"Iowan Old Style","Source Serif 4",Georgia,"AppleMyungjo","Nanum Myeongjo","Noto Serif KR",serif;}
html[lang="hi"] body{font-family:"Source Serif 4",Georgia,"Kohinoor Devanagari","Noto Serif Devanagari","Noto Sans Devanagari",serif;}
html:is([lang^="zh"],[lang="ja"],[lang="ko"],[lang="hi"]) :is(h1,h2,h3,.nav,.kicker,.meta,.toc,button,summary,.st,footer){font-family:inherit;}
html:is([lang^="zh"],[lang="ja"]) :is(p,li,.callout){line-height:1.85;text-align:justify;text-justify:inter-character;}
html:is([lang="ko"],[lang="hi"]) :is(p,li,.callout){line-height:1.8;word-break:keep-all;}
html:is([lang^="zh"],[lang="ja"],[lang="ko"]) h1{letter-spacing:.01em;line-height:1.3;}
.zh-note{font-size:.82rem;line-height:1.6;padding:.45rem 0;border-bottom:1px solid rgba(127,127,127,.25);opacity:.85;}
.zh-note .in{max-width:1100px;margin:0 auto;padding:0 16px;}
.zh-note a{color:inherit;text-decoration:underline;text-underline-offset:2px;}
.menu.langs .panel{min-width:12rem;}
.menu.langs .panel ul{list-style:none;margin:0;padding:.25rem 0;}
.menu.langs .panel a{display:block;padding:.35rem .9rem;white-space:nowrap;}
.menu.langs .panel a[aria-current]{font-weight:600;}