:root {
--bg:#121212;
--panel:#161616;
--line:#2b3c45;
--text:#e2e8d8;
--mute:#8fa39b;
--blaze:#c49b73;
--mallard:#36a892;
--bar:3.5rem;

--head:'Big Shoulders Display','Arial Narrow',Impact,sans-serif;
--body:Figtree,system-ui,-apple-system,'Segoe UI',Roboto,sans-serif;
--mono:'JetBrains Mono',ui-monospace,Consolas,monospace
}

* {
box-sizing:border-box
}

html {
scroll-behavior:smooth;
scroll-padding-top:calc(var(--bar) + 1rem)
}

body {
margin:0;
min-height:100vh;
display:flex;
flex-direction:column;
background:var(--bg);
color:var(--text);
font:1rem/1.6 var(--body)
}

a {
color:var(--mallard)
}

code,.irc {
font-family:var(--mono)
}


/* menu: always on top, popups open on click */
.bar {
position:sticky;
top:0;
z-index:50;
display:flex;
flex-wrap:wrap;
align-items:center;
gap:.25rem 1.25rem;
padding:.4rem 1rem;
background:#0b1114;
border-bottom:3px solid var(--blaze)
}

.brand {
font:900 1.6rem/1 var(--head);
letter-spacing:.02em;
color:var(--text);
text-decoration:none;
display:flex;
align-items:baseline;
gap:.5rem;
white-space:nowrap
}

.brand em {
font-style:normal;
color:var(--blaze)
}

.duck {
font:700 1rem var(--mono);
color:var(--mallard)
}

.menu {
display:flex;
flex-wrap:wrap;
flex:1 1 auto;
gap:.15rem
}

.dd summary {
list-style:none;
cursor:pointer;
display:flex;
align-items:center;
min-height:2.75rem;
padding:0 .9rem;
border-radius:.4rem;
font-weight:600;
user-select:none
}

.dd summary::-webkit-details-marker {
display:none
}

.dd summary::after {
content:"";
margin-left:.45rem;
border:.3rem solid transparent;
border-top-color:var(--mute)
}

.dd summary:hover,.dd[open] summary,.dd.on summary {
background:var(--panel);
color:var(--blaze)
}

.dd[open] summary::after {
transform:rotate(180deg) translateY(.15rem)
}

.panel {
position:absolute;
left:0;
right:0;
top:100%;
display:flex;
flex-wrap:wrap;
gap:.4rem;
padding:.8rem 1rem;
background:var(--panel);
border-bottom:3px solid var(--blaze);
box-shadow:0 12px 24px #0009
}

.panel a {
flex:0 1 auto;
padding:.55rem .9rem;
min-height:2.75rem;
display:flex;
align-items:center;
border:1px solid var(--line);
border-radius:.4rem;
color:var(--text);
text-decoration:none
}

.panel a:hover,.panel a:focus-visible {
border-color:var(--blaze);
color:var(--blaze)
}

summary:focus-visible,a:focus-visible {
outline:2px solid var(--blaze);
outline-offset:2px
}

@media (min-width:56rem) {
.dd {
position:relative
}
.panel {
left:0;
right:auto;
top:100%;
min-width:15rem;
flex-direction:column;
flex-wrap:nowrap;
border:1px solid var(--line);
border-top:0;
border-radius:0 0 .5rem .5rem
}

}


main {
flex:1 0 auto;
width:100%;
max-width:62rem;
margin:0 auto;
padding:1.5rem 1rem 3rem
}

h1,h2 {
font-family:var(--head);
line-height:1.05
}

h1 {
font-size:clamp(2.6rem,9vw,4.8rem);
margin:.2em 0;
font-weight:900
}

.lead {
font-size:1.15rem;
max-width:42rem;
color:#c9d3c4
}


/* hero: the one memorable thing - a duck crossing the sky above a live channel log */
.hero {
padding:1rem 0 1.5rem
}

.sky {
height:2.5rem;
overflow:hidden;
border-bottom:1px dashed var(--line)
}

.flyer {
display:inline-block;
font:700 1.6rem var(--mono);
color:var(--blaze);
animation:fly 9s linear 1 both
}

@keyframes fly {
from {
transform:translateX(-4rem)
}
to {
transform:translateX(100vw)
}

}

.hint {
color:var(--mute);
font-size:.9rem
}


.irc {
background:#0b1114;
border:1px solid var(--line);
border-left:4px solid var(--mallard);
border-radius:.4rem;
padding:.7rem .9rem;
font-size:.85rem;
line-height:1.5;
overflow-x:auto
}

.irc p {
margin:.15rem 0;
white-space:pre-wrap;
overflow-wrap:anywhere
}

.irc .nk {
color:var(--mallard)
}
.irc .P .nk {
color:var(--blaze)
}

.irc .C {
color:#cbd5e1
}
.irc .C::before {
content:"$ ";
color:var(--mute)
}

.irc .note {
color:var(--mute)
}


.cards {
display:flex;
flex-wrap:wrap;
gap:1rem;
margin-top:1rem
}

.card {
flex:1 1 17rem;
padding:1.1rem 1.2rem;
background:var(--panel);
border:1px solid var(--line);
border-top:4px solid var(--blaze);
border-radius:.4rem;
color:var(--text);
text-decoration:none
}

.card h2 {
margin:0 0 .3rem;
font-size:1.7rem
}
.card p {
margin:0;
color:var(--mute)
}

.card:hover {
border-color:var(--blaze)
}


.cmd {
margin:2rem 0;
padding-top:1rem;
border-top:1px solid var(--line)
}

.cmd h2 {
margin:0 0 .5rem;
font-size:1.9rem
}

.cmd h2 code {
font-size:.8em;
font-weight:700;
color:var(--blaze);
overflow-wrap:anywhere
}

.chips {
display:flex;
flex-wrap:wrap;
gap:.4rem;
list-style:none;
padding:0;
margin:0 0 .6rem
}

.chips li {
padding:.15rem .6rem;
border:1px solid var(--line);
border-radius:2rem;
font-size:.85rem;
color:var(--mute)
}

.chips small {
font-family:var(--mono);
margin-left:.3rem
}


.tw {
overflow-x:auto;
margin-top:2rem
}

table {
width:100%;
border-collapse:collapse;
font-size:.92rem
}

th,td {
padding:.5rem .7rem;
text-align:left;
border-bottom:1px solid var(--line);
vertical-align:top
}

th {
background:var(--panel);
color:var(--blaze);
font-family:var(--head);
font-size:1.1rem
}

tr:target td {
background:#2a2315
}


footer {
padding:1.2rem 1rem;
text-align:center;
color:var(--mute);
font-size:.85rem;
border-top:1px solid var(--line)
}

@media (prefers-reduced-motion:reduce) {
.flyer {
animation:none
}
html {
scroll-behavior:auto
}

}