/* Companion site: same visual language as the deck (dark, serif titles, mono labels). */
@import url('fonts/fonts.css');
:root{
  --bg:#0A0C10; --ink:#ECE7DB; --body:#C9C4B8; --dim:rgba(236,231,219,.62); --faint:rgba(236,231,219,.32);
  --hair:rgba(236,231,219,.14); --card:#10131A; --card2:#141821;
  --acc:#E8B54D; --teal:#4FC9A8; --coral:#E5745A; --blue:#7FA8F0; --green:#6CC59A; --amber:#E8B54D; --red:#E5745A;
  --serif:'Domine', Georgia, serif; --sans:'Funnel Sans', system-ui, sans-serif; --mono:'Nanum Gothic Coding', ui-monospace, monospace;
}
*{box-sizing:border-box}
html{background:var(--bg)}
body{margin:0;font-family:var(--sans);font-size:17px;line-height:1.65;color:var(--body);-webkit-font-smoothing:antialiased}
a{color:var(--acc);text-decoration:none;border-bottom:1px solid color-mix(in srgb,var(--acc) 40%,transparent)}
a:hover{border-bottom-color:var(--acc)}
img,svg{max-width:100%}

/* header */
.top{position:sticky;top:0;z-index:5;background:rgba(10,12,16,.92);backdrop-filter:blur(8px);border-bottom:1px solid var(--hair)}
.top .in{max-width:1080px;margin:0 auto;padding:14px 24px;display:flex;align-items:center;gap:24px;flex-wrap:wrap}
.brand{font-family:var(--serif);font-size:18px;color:var(--ink);border:0;white-space:nowrap}
.brand span{color:var(--acc)}
.nav{display:flex;gap:20px;flex-wrap:wrap;margin-left:auto}
.nav a{font-family:var(--mono);font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:var(--dim);border:0}
.nav a:hover,.nav a.on{color:var(--acc)}

/* page */
main{max-width:860px;margin:0 auto;padding:56px 24px 80px}
main.wide{max-width:1080px}
.kicker{font-family:var(--mono);font-size:12.5px;letter-spacing:.24em;text-transform:uppercase;color:var(--acc);font-weight:700}
.kicker::before{content:"";display:inline-block;width:26px;height:2px;background:var(--acc);vertical-align:middle;margin-right:12px}
h1,h2,h3{font-family:var(--serif);color:var(--ink);font-weight:500;letter-spacing:-.005em}
h1{font-size:46px;line-height:1.12;margin:14px 0 18px}
h1 em,h2 em{font-style:normal;color:var(--acc)}
h2{font-size:30px;line-height:1.2;margin:56px 0 14px;padding-top:22px;border-top:1px solid var(--hair)}
h3{font-family:var(--sans);font-size:19px;font-weight:650;margin:30px 0 8px}
.lede{font-size:20px;line-height:1.55;color:var(--ink);max-width:720px}
p{margin:0 0 14px}
ul,ol{padding-left:22px;margin:0 0 16px}
li{margin:4px 0}
strong,b{color:var(--ink);font-weight:650}
hr{border:0;border-top:1px solid var(--hair);margin:40px 0}
blockquote{margin:16px 0;padding:14px 18px;background:#0C0F15;border:1px solid var(--hair);border-left:3px solid var(--acc);border-radius:8px;color:var(--ink);font-family:var(--mono);font-size:14.5px;line-height:1.65}
blockquote p:last-child{margin:0}
code{font-family:var(--mono);font-size:.88em;background:#141821;padding:1px 6px;border-radius:4px;color:var(--ink)}
pre{background:#0C0F15;border:1px solid var(--hair);border-radius:8px;padding:14px 16px;overflow:auto;font-size:14px;line-height:1.6}
pre code{background:none;padding:0;white-space:pre-wrap}
pre{position:relative;white-space:pre-wrap}
pre .copy{position:absolute;top:8px;right:8px;font-family:var(--mono);font-size:11px;letter-spacing:.12em;text-transform:uppercase;background:var(--card2);color:var(--acc);border:1px solid var(--hair);border-radius:999px;padding:4px 10px;cursor:pointer}
pre .copy:hover{border-color:var(--acc)}

/* rename hero: the registered title, struck through, with the new name stuck over it */
.rename{position:relative;margin:18px 0 26px;padding-top:6px}
.rename .was{font-family:var(--serif);font-size:34px;line-height:1.2;color:var(--faint);position:relative;display:inline-block}
.rename .was::after{content:"";position:absolute;left:-4px;right:-4px;top:52%;height:3px;background:var(--coral);transform:rotate(-2deg);border-radius:2px}
.rename .was small{display:block;font-size:18px}
.rename .sticker{display:inline-block;margin:-58px 0 0 290px;padding:18px 26px 16px;background:var(--acc);color:#0A0C10;border-radius:6px;transform:rotate(-2.5deg);box-shadow:0 14px 30px rgba(0,0,0,.45),0 0 0 1px rgba(0,0,0,.2) inset;position:relative}
.rename .sticker::before{content:"";position:absolute;top:-9px;left:50%;width:70px;height:18px;margin-left:-35px;background:rgba(236,231,219,.35);transform:rotate(3deg)}
.rename .sticker b{display:block;font-family:var(--serif);font-weight:600;font-size:44px;line-height:1.05;color:#0A0C10}
.rename .sticker span{display:block;font-family:var(--serif);font-size:20px;margin-top:4px}
.rename .note2{font-family:var(--mono);font-size:12px;letter-spacing:.16em;text-transform:uppercase;color:var(--dim);margin-top:18px}
@media (max-width:640px){.rename .was{font-size:24px}.rename .sticker{margin:10px 0 0 10px}.rename .sticker b{font-size:32px}}
table{width:100%;border-collapse:collapse;margin:12px 0 22px;font-size:15.5px}
th{font-family:var(--mono);font-size:11.5px;letter-spacing:.14em;text-transform:uppercase;text-align:left;color:var(--ink);border-bottom:1px solid var(--faint);padding:8px 10px 8px 0}
td{border-bottom:1px solid var(--hair);padding:10px 10px 10px 0;vertical-align:top}

/* components (pandoc fenced divs) */
.cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:16px;margin:18px 0 26px}
.cards.two{grid-template-columns:repeat(auto-fit,minmax(320px,1fr))}
.card{background:var(--card);border:1px solid var(--hair);border-radius:12px;padding:20px 22px}
.card > :first-child{margin-top:0}
.card h3{margin:6px 0 6px;font-size:19px}
.card p{font-size:15.5px;color:var(--dim);margin:0 0 8px}
.card p:last-child{margin-bottom:0}
.card.hi{background:color-mix(in srgb,var(--acc) 8%,var(--card));border-color:color-mix(in srgb,var(--acc) 55%,transparent)}
.lab{font-family:var(--mono);font-size:11.5px;letter-spacing:.16em;text-transform:uppercase;color:var(--acc);font-weight:700}
.s1{--acc:#E8B54D}.s2{--acc:#4FC9A8}.s3{--acc:#E5745A}.s4{--acc:#7FA8F0}
.card.s1,.card.s2,.card.s3,.card.s4{border-top:3px solid var(--acc)}
.note{background:var(--card);border-left:3px solid var(--acc);padding:14px 18px;border-radius:0 8px 8px 0;margin:18px 0}
.note p:last-child{margin:0}
.btns{display:flex;gap:12px;flex-wrap:wrap;margin:18px 0}
.btn,.btns a{display:inline-block;font-family:var(--mono);font-size:12.5px;letter-spacing:.14em;text-transform:uppercase;padding:10px 16px;border-radius:999px;border:1px solid var(--acc);color:var(--acc);font-weight:700}
.btns a:first-child,.btn.solid{background:var(--acc);color:#0A0C10}
.ex{border-top:1px solid var(--hair);margin-top:48px;padding-top:8px}
.pill{display:inline-block;background:var(--acc);color:#0A0C10;font-family:var(--mono);font-size:11.5px;letter-spacing:.16em;text-transform:uppercase;font-weight:700;padding:4px 11px;border-radius:999px;margin-right:10px}
.mins{font-family:var(--mono);font-size:12px;letter-spacing:.14em;color:var(--acc)}
.small{font-size:14px;color:var(--dim)}
figure{margin:20px 0}
figcaption{font-size:13.5px;color:var(--dim);margin-top:8px}

/* footer */
footer{border-top:1px solid var(--hair);margin-top:40px}
footer .in{max-width:1080px;margin:0 auto;padding:26px 24px;display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;font-size:14px;color:var(--dim)}

@media (max-width:640px){h1{font-size:34px}h2{font-size:25px}main{padding-top:36px}}
@media print{.top,footer{display:none}html,body{background:#fff;color:#222}}
details{margin:14px 0 4px;border:1px solid var(--hair);border-radius:10px;padding:10px 14px;background:#0C0F15}
details summary{cursor:pointer;font-family:var(--mono);font-size:11.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--acc);font-weight:700}
details[open] summary{margin-bottom:8px}
details ul{margin:0 0 8px;padding-left:20px}
main > .card{margin:18px 0 22px}