/* Has-Been of the Year: Black Tie. Black and gold, Instrument Serif for the ceremony voice, Archivo for small print.
   Only rules the current pages use (pruned against the built site and build.py). Fonts are self-hosted in /fonts.
   Built by build.py, which copies this file to dist/style.css. */
.skip{position:absolute;left:-999px}
.skip:focus{left:10px;top:10px;background:var(--accent);color:var(--bg);padding:8px;z-index:99}
.example-banner{background:#ffd23f;color:#111;text-align:center;font:700 12px/1.2 Archivo,Arial,sans-serif;letter-spacing:.08em;text-transform:uppercase;padding:9px}
.blocks h2{font-family:var(--head);margin:44px 0 14px;scroll-margin-top:80px}
.blocks h2:first-child{margin-top:0}
.blocks p{line-height:1.7}
.blocks a{color:var(--accent)}
.chart{margin:22px 0;padding:14px;border-radius:12px;background:var(--panel)}
.chart svg{display:block;width:100%;height:auto}
.chart .area{fill:color-mix(in srgb,var(--accent) 22%,transparent)}
.chart .line{fill:none;stroke:var(--accent);stroke-width:3;stroke-linejoin:round;stroke-linecap:round}
.chart .grid{stroke:var(--fg);opacity:.12;stroke-dasharray:3 4}
.chart .base{stroke:var(--fg);opacity:.4}
.chart text{font:700 12px var(--body);fill:var(--muted)}
.chart .ann{font:italic 400 16px var(--serif);fill:var(--fg)}
.chart .pk{fill:var(--accent2);stroke:var(--fg);stroke-width:1}
.chart .nowdot{fill:var(--accent);stroke:var(--bg);stroke-width:2}
.chart figcaption{font-size:12px;color:var(--muted);margin-top:6px}
.tn{width:100%;border-collapse:collapse;margin:22px 0;border:1px solid var(--line)}
.tn th{text-align:left;font:700 12px/1 var(--body);letter-spacing:.1em;text-transform:uppercase;padding:12px 14px;background:var(--panel)}
.tn th+th{color:var(--accent)}
.tn td{padding:12px 14px;border-top:1px solid var(--line);vertical-align:top;width:50%}
.tn td+td{font:italic 400 19px/1.3 var(--serif);color:var(--muted)}
.sighting{margin:24px 0;padding:18px 20px;border-radius:12px;background:var(--panel);border-left:4px solid var(--accent)}
.sighting .spot{display:inline-block;margin-bottom:8px;font:800 11px/1 var(--body);letter-spacing:.12em;text-transform:uppercase;background:var(--accent);color:var(--bg);padding:5px 9px;border-radius:99px}
.sighting .k{display:block;font:700 11px/1.2 var(--body);letter-spacing:.1em;text-transform:uppercase;color:var(--muted);margin-bottom:6px}
.sighting p{margin:0;font:italic 400 21px/1.3 var(--serif)}
.quote{margin:24px 0;padding:2px 0 2px 20px;border-left:3px solid var(--accent)}
.quote blockquote{margin:0;font:italic 400 26px/1.25 var(--serif)}
.quote .q{color:var(--accent)}
.quote .src{font-size:13px;color:var(--muted)}
.pull{margin:26px 0;font:italic 400 26px/1.25 var(--serif);color:var(--accent)}
.fair{margin:24px 0;padding:16px 18px;border:1px dashed var(--line);border-radius:12px;font-size:16px}
.fair b{display:block;font:800 12px/1 var(--body);letter-spacing:.1em;text-transform:uppercase;margin-bottom:6px;color:var(--accent)}
.receipts{list-style:none;margin:0;padding:0;counter-reset:r}
.receipts li{counter-increment:r;position:relative;padding:10px 0 10px 40px;border-bottom:1px solid var(--line);font-size:15px}
.receipts li:before{content:counter(r);position:absolute;left:0;top:9px;width:26px;height:26px;border-radius:50%;display:grid;place-items:center;background:var(--panel);font:800 12px/1 var(--body);color:var(--accent)}
.receipts a{color:var(--accent)}
.tagrow{display:flex;flex-wrap:wrap;gap:8px;margin-top:18px}
.tagrow span{font:600 13px/1 var(--body);padding:7px 11px;border-radius:99px;background:var(--panel);color:var(--muted)}
.pn{display:flex;justify-content:space-between;gap:12px;margin-top:36px}
.pn a{text-decoration:none;font:700 14px/1 var(--body);padding:13px 16px;border-radius:99px;background:var(--panel);color:var(--fg)}
.pn a:hover{background:var(--accent);color:var(--bg)}
.credit{font-size:12px;color:var(--muted)}
.credit a{color:inherit}
.tipbox{display:grid;grid-template-columns:1fr 1fr;gap:44px;align-items:start}
.tipbox h2{font-family:var(--head);margin:0 0 14px}
.rules-note{font-size:14px;color:var(--muted)}
form.f{display:grid;gap:9px}
form.f label{font:800 12px/1 var(--body);letter-spacing:.08em;text-transform:uppercase;margin-top:6px}
form.f input,form.f textarea{width:100%;font:400 16px/1.4 var(--body);padding:12px 14px;border:1px solid var(--line);border-radius:10px;background:var(--bg);color:var(--fg)}
form.f input:focus,form.f textarea:focus{outline:3px solid var(--accent);outline-offset:1px}
form.f textarea{resize:vertical}
form.f .btn{justify-self:start;margin-top:8px;font:800 15px/1 var(--body);padding:14px 20px;border:0;border-radius:99px;background:var(--accent);color:var(--bg);cursor:pointer}
form.f small{font-size:12px;color:var(--muted)}
form.f .msg:empty{display:none}
form.f .msg{margin:0;background:var(--fg);color:var(--bg);padding:8px 12px;border-radius:8px;font-weight:600}
form.f .todo{border:1px dashed var(--line);padding:8px 10px;border-radius:8px;display:block}
.hp{position:absolute!important;left:-10000px;width:1px;height:1px;overflow:hidden}
@media (max-width:760px){.tipbox{grid-template-columns:1fr;gap:20px}}
@font-face{font-family:Archivo;src:url(/fonts/archivo-var.woff2) format("woff2");font-weight:100 900;font-stretch:62% 125%;font-display:swap}
@font-face{font-family:"Instrument Serif";src:url(/fonts/instrument-serif-400.woff2) format("woff2");font-style:normal;font-display:swap}
@font-face{font-family:"Instrument Serif";src:url(/fonts/instrument-serif-400-italic.woff2) format("woff2");font-style:italic;font-display:swap}
:root{--bg:#0b0a08;--fg:#f3ecdc;--muted:#a69d8a;--accent:#e3c26b;--accent2:#c9a54a;--line:#e3c26b33;--panel:#17150f;
 --gold:linear-gradient(180deg,#f6e3a6 0%,#d6b25a 45%,#a8822f 55%,#e9cf86 100%);
 --head:"Instrument Serif",Georgia,serif;--body:Archivo,"Segoe UI",Arial,sans-serif;--serif:"Instrument Serif",Georgia,serif}
*{box-sizing:border-box}
body{margin:0;color:var(--fg);font:400 16px/1.6 var(--body);
 background:radial-gradient(ellipse 50% 60% at 50% -10%,#e3c26b30,transparent 70%),radial-gradient(ellipse 30% 40% at 10% 0,#ffffff12,transparent),radial-gradient(ellipse 30% 40% at 90% 0,#ffffff12,transparent),var(--bg)}
a{color:inherit}
main{max-width:1120px;margin:0 auto;padding:0 24px}
.pre,.top nav a,.sub,dt,.fn,.y{font:600 11px/1.4 var(--body);letter-spacing:.24em;text-transform:uppercase;color:var(--accent)}
.top{max-width:1120px;margin:0 auto;padding:26px 24px;display:flex;align-items:center;justify-content:space-between;gap:20px;border-bottom:1px solid var(--line)}
.logo{text-decoration:none;text-align:center;font:400 24px/1 var(--head);letter-spacing:.12em;text-transform:uppercase}
.logo small{display:block;font:600 9px/1.8 var(--body);letter-spacing:.4em;color:var(--accent)}
.top nav{display:flex;gap:26px}
.top nav a{text-decoration:none;color:var(--muted)}
.top nav a.on,.top nav a:hover{color:var(--accent)}
.sec{display:flex;align-items:center;gap:20px;font:400 34px/1 var(--head);letter-spacing:.14em;text-transform:uppercase;text-align:center;margin:0 0 34px}
.sec:before,.sec:after{content:"";flex:1;height:1px;background:linear-gradient(90deg,transparent,var(--accent))}
.sec:after{transform:scaleX(-1)}
.sec span{background:var(--gold);-webkit-background-clip:text;background-clip:text;color:transparent}
.stage{position:relative;isolation:isolate;text-align:center;padding:100px 0 40px}
.stage h1{font:400 clamp(48px,7.4vw,104px)/.95 var(--head);letter-spacing:.04em;text-transform:uppercase;margin:16px 0 26px;background:var(--gold);-webkit-background-clip:text;background-clip:text;color:transparent}
.stage h1 span{display:block;font-size:.36em;letter-spacing:.5em;margin-bottom:12px}
.lede{font:italic 400 24px/1.4 var(--serif);color:var(--muted);max-width:620px;margin:0 auto}
.for{font:italic 400 22px/1.3 var(--serif);color:var(--muted);margin:0 0 18px}
.cite{font:400 22px/1.4 var(--serif);max-width:520px;margin:0 auto 28px}

.btn,form.f .btn{display:inline-block;text-decoration:none;font:700 12px/1 var(--body);letter-spacing:.24em;text-transform:uppercase;padding:16px 26px;border:1px solid var(--accent);color:var(--accent);background:none;border-radius:0}
.btn:hover,form.f .btn:hover{background:var(--accent);color:var(--bg)}
.cats{padding:30px 0 80px}
.catgrid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.cat{border:1px solid var(--line);padding:30px 26px 22px;text-align:center;background:linear-gradient(180deg,#e3c26b0d,transparent)}
.cat h3{font:400 28px/1.1 var(--head);margin:0 0 8px}
.cat .sub{color:var(--muted);margin:0 0 20px}
.cat ol{list-style:none;margin:0;padding:0;text-align:left}
.cat a{display:grid;grid-template-columns:1fr auto;column-gap:10px;text-decoration:none;padding:12px 0;border-top:1px solid var(--line)}
.cat .nm{font:400 22px/1.1 var(--head)}
.cat .rl{grid-row:2;font-size:12px;color:var(--muted)}
.cat .v{grid-row:1/3;grid-column:2;align-self:center;font:700 15px/1 var(--body);color:var(--muted)}
.cat .front .nm:after{content:" ★";color:var(--accent)}
.cat .front .v{color:var(--accent)}
.cat a:hover .nm{color:var(--accent)}
.fn{text-align:center;color:var(--muted);margin-top:22px}
.noms{padding:0 0 80px}
.nomgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:24px}
.nom{text-decoration:none;text-align:center;display:grid;gap:4px}
.nom .ph{aspect-ratio:1;border:1px solid var(--accent);padding:8px;margin-bottom:12px;background:var(--panel)}
.nom .ph svg,.nom .ph img{width:100%;height:100%;object-fit:cover;display:block;filter:sepia(.3)}
.nom .pre{margin:0}
.nom b{font:400 30px/1.05 var(--head)}
.nom span{font:italic 400 18px/1.3 var(--serif);color:var(--muted)}
.nom:hover b{color:var(--accent)}
.hall{padding:0 0 80px}
.hall ol{list-style:none;margin:0 auto;padding:0;max-width:720px}
.hall a{display:grid;grid-template-columns:90px 1fr;column-gap:20px;align-items:baseline;text-decoration:none;padding:18px 0;border-bottom:1px solid var(--line)}
.hall .y{font-size:13px}
.hall b{font:400 36px/1 var(--head)}
.hall i{grid-column:2;font:italic 400 18px var(--serif);color:var(--muted)}
.tipbox{border:1px solid var(--line);padding:44px;margin:0 0 90px;background:var(--panel)}
.tipbox h2{font:400 44px/1 var(--head);letter-spacing:.06em;text-transform:uppercase;color:var(--accent)}
form.f input,form.f textarea{border-radius:0;background:var(--bg);border-color:var(--line);color:var(--fg)}
form.f label{color:var(--accent)}
.dhead{display:grid;grid-template-columns:400px minmax(0,1fr);gap:60px;align-items:center;padding:80px 0 70px}
.frame{position:relative;padding:40px}
.frame .laurel.big{position:absolute;inset:-10px;width:calc(100% + 20px);color:var(--accent);opacity:.9}
.frame .ph{position:relative;aspect-ratio:1;border-radius:50%;overflow:hidden;border:2px solid var(--accent);box-shadow:0 0 60px #e3c26b40}
.frame .ph svg,.frame .ph img{width:100%;height:100%;object-fit:cover;display:block}
.dhead h1{font:400 clamp(54px,7vw,96px)/.95 var(--head);margin:10px 0 8px;background:var(--gold);-webkit-background-clip:text;background-clip:text;color:transparent}
.dhead .cite{margin:0 0 26px;max-width:none}
.dhead dl{display:flex;gap:40px;margin:0 0 20px;border-top:1px solid var(--line);border-bottom:1px solid var(--line);padding:16px 0}
.dhead dd{margin:4px 0 0;font:400 34px/1 var(--head)}
.incat ul{margin:6px 0 0;padding:0;list-style:none;display:flex;flex-wrap:wrap;gap:8px}
.incat li{border:1px solid var(--accent);padding:6px 12px;font:italic 400 18px var(--serif)}
.incat li:before{content:"★ ";color:var(--accent)}
.tnr{padding:0 0 70px}
.tnr ul{list-style:none;margin:0 auto;padding:0;max-width:820px}
.tnr li{display:grid;grid-template-columns:1fr 1fr;gap:30px;padding:18px 0;border-bottom:1px solid var(--line);font:400 22px/1.3 var(--serif)}
.tnr em{color:var(--accent)}
.read .blocks{max-width:700px;margin:0 auto}
.read .pn{max-width:700px;margin:40px auto 80px}
.blocks h2{font:400 38px/1.1 var(--head);color:var(--accent)}
.blocks p{font-size:17px}
.chart{background:var(--panel);border:1px solid var(--line);border-radius:0}
.sighting,.fair,.tn{border-radius:0}
.sighting{border-left-color:var(--accent)}
.receipts li:before{color:var(--bg);background:var(--accent)}
.pn a{border-radius:0;border:1px solid var(--line);background:none}
.solo{padding:70px 0}
.prose{max-width:720px;margin:0 auto}
.prose h1{font:400 70px/1 var(--head);color:var(--accent);margin:8px 0 26px}
@media (max-width:900px){.catgrid{grid-template-columns:1fr}
.dhead{grid-template-columns:1fr;gap:20px;padding-top:40px}
.frame{max-width:340px;margin:0 auto}
.top{flex-direction:column}}
@media (max-width:600px){.top nav{gap:14px;flex-wrap:wrap;justify-content:center}
.tnr li{grid-template-columns:1fr;gap:4px}
.tipbox{padding:24px}
.dhead dl{gap:20px}}
.credit{font:400 11px/1.5 var(--body);color:var(--muted);margin:8px 0 0;letter-spacing:.01em}
.credit a{color:inherit;text-decoration:underline;text-decoration-color:var(--line)}
.credit a:hover{color:var(--accent)}
.nomwrap{display:grid;align-content:start}
.nomwrap .credit{text-align:center;padding:0 6px}
.nom .ph img,.frame .ph img{width:100%;height:100%;object-fit:cover;display:block}
.stage.crown{padding:46px 0 80px;text-align:left}
.topline{text-align:center;margin:0 0 30px}
.cbeam{position:absolute;left:50%;top:-160px;width:620px;height:760px;margin-left:-310px;z-index:-2;
 background:linear-gradient(180deg,#fff3c440,#e3c26b14 65%,transparent);clip-path:polygon(42% 0,58% 0,100% 100%,0 100%);filter:blur(8px)}
@keyframes riseup{from{transform:translateY(90px);opacity:0}}
.acts{display:flex;flex-wrap:wrap;gap:12px;margin:28px 0 14px}
.btn.ghost{border-color:var(--line);color:var(--fg)}

@media (max-width:900px){.acts{justify-content:center}}
.bleedhero{position:relative;isolation:isolate;width:100vw;margin-left:calc(50% - 50vw);min-height:min(86vh,800px);padding:0;display:grid;align-items:center;text-align:left;overflow:hidden}
.bimg{position:absolute;top:0;bottom:0;right:max(0px,calc(50vw - 640px));width:min(62vw,800px);z-index:-2;-webkit-mask-image:linear-gradient(90deg,transparent,#000 38%,#000 82%,transparent);mask-image:linear-gradient(90deg,transparent,#000 38%,#000 82%,transparent);animation:bzoom 2.4s ease both}
.bimg:after{content:"";position:absolute;inset:0;background:radial-gradient(ellipse 60% 70% at 55% 36%,transparent 35%,#0b0a08b3 100%)}
.bimg img,.bimg svg{width:100%;height:100%;object-fit:cover;object-position:50% 22%;display:block}
@keyframes bzoom{from{transform:scale(1.08);opacity:0}}
.bveil{position:absolute;inset:0;z-index:-1;background:linear-gradient(0deg,#0b0a08,transparent 32%),linear-gradient(180deg,#0b0a08,transparent 18%)}
.bcopy{max-width:1120px;width:100%;margin:0 auto;padding:70px 24px 90px}
.bcopy .topline{text-align:left;margin:0 0 70px}
.bcopy>.pre{margin:0 0 10px}
.bcopy .won{font:400 20px/1 var(--head);letter-spacing:.34em;text-transform:uppercase;color:var(--accent);margin:0 0 10px}
.bleedhero h1{font:400 clamp(72px,11vw,170px)/.88 var(--head);text-transform:none;letter-spacing:-.015em;margin:0 0 14px;max-width:720px}
.bleedhero .hl{font:italic 400 30px/1.2 var(--serif);color:var(--accent);margin:0 0 14px}
.bleedhero .lede{max-width:520px;text-align:left;color:var(--fg);margin:0}
.bleedhero .acts{margin-top:30px}
.bcred{position:absolute;right:max(24px,calc(50vw - 536px));bottom:16px;max-width:440px;text-align:right}
.bcred .credit{color:#d8cfbd;text-shadow:0 1px 2px #000}
@media (max-width:800px){.bimg{width:100%;-webkit-mask-image:none;mask-image:none;opacity:.45}
.bcred{position:static;padding:0 24px 20px;text-align:left}}
@media (prefers-reduced-motion:reduce){.bimg{animation:none}}
.bleedhero h1{filter:drop-shadow(0 2px 14px #000c)}
.bleedhero.n-long h1{font-size:clamp(56px,7.6vw,118px);max-width:660px}
.bleedhero.n-xlong h1{font-size:clamp(48px,6.2vw,96px);max-width:640px}
.pagehead{text-align:center;padding:90px 0 50px;position:relative;isolation:isolate}
.pagehead:before{content:"";position:absolute;left:50%;top:-40px;width:600px;height:420px;margin-left:-300px;z-index:-1;
 background:linear-gradient(180deg,#fff3c41f,transparent 75%);clip-path:polygon(42% 0,58% 0,100% 100%,0 100%);filter:blur(8px)}
.pagehead h1{font:400 clamp(52px,8vw,110px)/.95 var(--head);margin:14px 0 18px;background:var(--gold);-webkit-background-clip:text;background-clip:text;color:transparent}
.pagehead .lede{margin:0 auto}
.archyear{padding:10px 0 50px}
.arch{list-style:none;margin:0 auto;padding:0;max-width:920px}
.arch a{display:grid;grid-template-columns:110px minmax(0,1fr) auto;gap:26px;align-items:center;text-decoration:none;padding:20px 0;border-bottom:1px solid var(--line)}
.arch .ph{width:110px;aspect-ratio:1;border-radius:50%;overflow:hidden;border:1px solid var(--accent)}
.arch .ph img,.arch .ph svg{width:100%;height:100%;object-fit:cover;display:block}
.arch small{display:block;font:600 10px/1.6 var(--body);letter-spacing:.22em;text-transform:uppercase;color:var(--accent)}
.arch b{display:block;font:400 38px/1.05 var(--head)}
.arch i{display:block;font:italic 400 19px/1.3 var(--serif);color:var(--accent);margin:2px 0 4px}
.arch .m{font-size:13px;color:var(--muted)}
.arch .sc{text-align:right;font:400 44px/1 var(--head);color:var(--fg)}
.arch .sc small{display:inline;font:400 16px var(--head);letter-spacing:0;color:var(--muted)}
.arch .sc span{display:block;font:600 10px/1.6 var(--body);letter-spacing:.16em;text-transform:uppercase;color:var(--muted);margin-top:6px}
.arch a:hover b{color:var(--accent)}
.after{display:flex;flex-wrap:wrap;justify-content:center;gap:24px;margin:10px 0 80px;font:600 12px/1 var(--body);letter-spacing:.16em;text-transform:uppercase}
.after a{color:var(--accent);text-decoration:none}
.share{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:8px;max-width:700px;margin:44px auto 0;padding-top:24px;border-top:1px solid var(--line)}
.share span{font:600 10px/1 var(--body);letter-spacing:.26em;text-transform:uppercase;color:var(--muted);margin-right:8px}
.share a{font:600 11px/1 var(--body);letter-spacing:.16em;text-transform:uppercase;padding:11px 14px;border:1px solid var(--line);color:var(--fg);text-decoration:none}
.share a:hover{border-color:var(--accent);color:var(--accent)}
.prose h2{font:400 34px/1.1 var(--head);color:var(--accent);margin:40px 0 12px}
.prose p{font-size:17px;line-height:1.7}
.prose a{color:var(--accent)}
.rules{list-style:none;margin:0;padding:0}
.rules li{padding:14px 0;border-bottom:1px solid var(--line);font-size:16px;line-height:1.6}
.rules b{display:block;font:400 24px/1.2 var(--head);color:var(--fg);margin-bottom:2px}
.acts.center{justify-content:center;margin:10px 0 100px}
.sitefoot{border-top:1px solid var(--line);margin-top:20px}
.fwrap{max-width:1120px;margin:0 auto;padding:44px 24px 70px;display:grid;gap:14px;color:var(--muted);font-size:13px;line-height:1.6}
.fwrap .logo{justify-self:start;text-align:left}
.fwrap p{margin:0;max-width:820px}
.fwrap b{color:var(--fg)}
.flinks{display:flex;flex-wrap:wrap;gap:8px 22px}
.flinks a{color:var(--fg);text-decoration:none}
.flinks a:hover{color:var(--accent)}
.copy{font-size:12px}
.top nav a{white-space:nowrap}
@media (max-width:800px){.top{flex-direction:column}
.top nav{flex-wrap:wrap;justify-content:center;gap:12px 20px}}
@media (max-width:600px){.arch a{grid-template-columns:72px minmax(0,1fr);gap:16px}
.arch .ph{width:72px}
.arch .sc{grid-column:2;text-align:left;font-size:28px}
.arch b{font-size:28px}}
.efig{position:relative;isolation:isolate;display:grid;justify-items:center}
.efig .cbeam{top:-180px}
.efig .frame{width:100%;animation:riseup 1.2s cubic-bezier(.2,.7,.2,1) .2s both}
@media (prefers-reduced-motion:reduce){.efig .frame{animation:none}}
.bcopy .leads{margin:14px 0 0;font:italic 400 18px/1.3 var(--serif);color:var(--accent)}