/* The landing page's black and gold, laid out for reading instead of for a
   pitch: denser type, real tables, and a clipped corner on anything that is a
   plate rather than prose. */

@font-face { font-family:'Baloo 2'; src:url(/fonts/baloo2.woff2) format('woff2');
             font-weight:400 800; font-display:swap }
@font-face { font-family:Nunito; src:url(/fonts/nunito.woff2) format('woff2');
             font-weight:200 1000; font-display:swap }

:root {
  --bg:#080808; --gold:#e9bf68; --text:#f5f5f5; --dim:#c5c5c5; --dimmer:#8f8f8f;
  --rim:#ffffff1f; --lift:#ffffff08;
  --disp:"Baloo 2","Trebuchet MS",system-ui,sans-serif;
  --body:Nunito,"Trebuchet MS",system-ui,sans-serif;
  --wrap:1180px;
}
* { box-sizing:border-box }
html { scroll-behavior:smooth; scroll-padding-top:86px }
body {
  margin:0; background:var(--bg); color:var(--text);
  font:400 17px/1.65 var(--body); overflow-x:hidden;
}
::selection { background:#e9bf684d }
a { color:var(--gold); text-decoration-color:#e9bf6866; text-underline-offset:3px }
a:hover { text-decoration-color:var(--gold) }
:focus-visible { outline:3px solid var(--gold); outline-offset:3px; border-radius:6px }
img, svg { max-width:100% }
code { font:600 .88em/1 ui-monospace,SFMono-Regular,Menlo,monospace; color:var(--dim) }

.snow { position:fixed; inset:-20% 0; z-index:-1; pointer-events:none; opacity:.3 }
.snow i { position:absolute; inset:0; background-repeat:repeat; animation:fall linear infinite }
.snow i:nth-child(1) {
  background-image:radial-gradient(2px 2px at 20px 30px,rgba(255,255,255,.85),transparent),
                   radial-gradient(1.5px 1.5px at 130px 90px,rgba(255,255,255,.6),transparent);
  background-size:280px 220px; animation-duration:30s;
}
.snow i:nth-child(2) {
  background-image:radial-gradient(3px 3px at 90px 60px,rgba(255,255,255,.45),transparent);
  background-size:420px 380px; animation-duration:62s;
}
@keyframes fall { from { transform:translateY(-380px) } to { transform:translateY(380px) } }

/* ------------------------------- chrome -------------------------------- */

.hud {
  position:sticky; top:0; z-index:10; backdrop-filter:blur(10px);
  background:#080808e6; border-bottom:1px solid #e9bf6838;
}
.hud .in {
  max-width:var(--wrap); margin:0 auto; padding:10px clamp(14px,4vw,26px);
  display:flex; align-items:center; gap:clamp(10px,2vw,20px); flex-wrap:wrap;
}
.mark { font:800 22px/1 var(--disp); text-decoration:none; white-space:nowrap }
.mark b { color:#fff } .mark i { color:var(--gold); font-style:normal }
.mark span { font:800 10px/1 var(--body); letter-spacing:.22em; color:var(--dimmer);
             vertical-align:3px; margin-left:4px }
.hud nav { display:flex; gap:2px; flex:1; flex-wrap:wrap }
.hud nav a {
  padding:7px 11px; border-radius:9px; text-decoration:none; color:var(--dim);
  font:700 14.5px/1 var(--body); letter-spacing:.01em;
}
.hud nav a:hover { background:var(--lift); color:#fff }
.hud nav a[aria-current] { color:var(--bg); background:var(--gold) }

/* The header is sticky, so on a phone it has to stay short: the sections go
   into one scrolling row instead of wrapping into four. */
@media (max-width:760px) {
  html { scroll-padding-top:120px }
  .hud .in { display:grid; grid-template-columns:1fr auto; gap:9px 12px }
  .hud .mark { grid-area:1 / 1 }
  .hud .btn { grid-area:1 / 2 }
  .hud nav {
    grid-area:2 / 1 / 3 / 3; flex-wrap:nowrap; overflow-x:auto; gap:4px;
    scrollbar-width:none; margin:0 calc(clamp(14px,4vw,26px) * -1);
    padding:0 clamp(14px,4vw,26px);
  }
  .hud nav::-webkit-scrollbar { display:none }
  .hud nav a { white-space:nowrap }
}

.btn {
  display:inline-flex; align-items:center; padding:9px 18px; border-radius:11px;
  text-decoration:none; font:800 15px/1 var(--disp); letter-spacing:.02em;
  background:linear-gradient(180deg,#ffe08c,var(--gold)); color:#080808;
  box-shadow:0 4px 0 #6d5322, 0 7px 10px #00000059;
  transition:transform .11s ease, box-shadow .11s ease;
}
.btn:hover { transform:translateY(-2px); box-shadow:0 6px 0 #6d5322, 0 10px 14px #00000059 }
.btn:active { transform:translateY(3px); box-shadow:0 1px 0 #6d5322 }

main { max-width:var(--wrap); margin:0 auto; padding:clamp(20px,4vw,40px) clamp(14px,4vw,26px) 70px }

.crumb { display:flex; gap:8px; align-items:center; font:700 13.5px/1 var(--body);
         color:var(--dimmer); margin-bottom:14px; flex-wrap:wrap }
.crumb a { text-decoration:none; color:var(--dim) }
.crumb a:hover { color:var(--gold) }
.crumb span { color:#4a4a4a }

.kicker { margin:0 0 6px; font:800 12px/1 var(--body); letter-spacing:.2em;
          text-transform:uppercase; color:var(--gold) }
h1 { margin:0 0 18px; font:800 clamp(34px,6.5vw,58px)/1.02 var(--disp); letter-spacing:-.015em }
h2 { margin:0 0 16px; font:800 clamp(22px,3.4vw,30px)/1.1 var(--disp); letter-spacing:-.01em }
h3 { margin:0; font:800 17px/1.2 var(--disp) }
section { margin-top:clamp(34px,5vw,54px) }
.intro { max-width:64ch; color:var(--dim); font-size:18px }
.say { max-width:60ch; font:600 clamp(18px,2.6vw,21px)/1.45 var(--disp); color:#fff; margin:0 0 18px }

footer {
  border-top:1px solid #ffffff14; padding:28px clamp(14px,4vw,26px) 48px;
  max-width:var(--wrap); margin:0 auto; color:var(--dimmer); font-size:14.5px;
}
footer p { margin:0 0 6px }
.fine { color:#6a6a6a }

/* -------------------------------- search -------------------------------- */

.find { position:relative; margin:0 0 30px; max-width:520px }
.find input {
  width:100%; padding:14px 16px; border-radius:12px; border:1px solid var(--rim);
  background:#111; color:#fff; font:600 16px/1 var(--body);
}
.find input::placeholder { color:var(--dimmer) }
.find ul {
  position:absolute; z-index:5; inset:auto 0 auto 0; margin:6px 0 0; padding:6px;
  list-style:none; background:#111; border:1px solid var(--rim); border-radius:12px;
  max-height:340px; overflow:auto; box-shadow:0 18px 40px #000000a6;
}
.find li a {
  display:flex; justify-content:space-between; gap:12px; padding:9px 11px;
  border-radius:8px; text-decoration:none; color:#fff; font-weight:600;
}
.find li a:hover, .find li a:focus { background:var(--lift) }
.find li em { font-style:normal; color:var(--dimmer); font-size:13px; font-weight:700;
              letter-spacing:.1em; text-transform:uppercase; align-self:center }

/* -------------------------------- cards --------------------------------- */

.grid {
  list-style:none; margin:0; padding:0; display:grid; gap:14px;
  grid-template-columns:repeat(auto-fill,minmax(228px,1fr));
}
.card { --tint:var(--gold) }
/* A card is a panel whether or not it leads anywhere; only the ones that do
   lift under the pointer. */
.card > a, .card > div {
  display:block; height:100%; padding:14px; text-decoration:none; color:inherit;
  background:#0e0e0e; border:1px solid var(--rim); border-radius:14px;
  transition:border-color .12s ease, transform .12s ease, background .12s ease;
}
.card > a:hover { border-color:var(--tint); transform:translateY(-2px); background:#131313 }
.card .art {
  display:grid; place-items:center; margin:-4px -4px 12px; border-radius:10px;
  overflow:hidden; background:#0a0a0a; min-height:120px;
}
.card .art img { display:block; width:100%; height:auto; object-fit:cover }
.card h3 { color:#fff }
.card .sub { display:block; margin-top:3px; font:800 11.5px/1.3 var(--body);
             letter-spacing:.13em; text-transform:uppercase; color:var(--tint) }
.card p { margin:9px 0 0; color:var(--dim); font-size:14.5px; line-height:1.5 }

/* --------------------------------- lead --------------------------------- */

.lead { display:grid; gap:clamp(18px,3vw,34px); grid-template-columns:minmax(0,270px) minmax(0,1fr);
        align-items:start }
.lead.wide { grid-template-columns:minmax(0,1fr) minmax(0,340px) }
.shot { display:grid; place-items:center; padding:16px; background:#0e0e0e;
        border:1px solid var(--rim); border-radius:16px }
.lead.wide .shot { padding:0; overflow:hidden }
.lead.wide .shot img { display:block; width:100%; height:auto }
@media (max-width:760px) {
  .lead, .lead.wide { grid-template-columns:1fr }
}

.tags { list-style:none; display:flex; flex-wrap:wrap; gap:7px; margin:0 0 18px; padding:0 }
.tags li {
  padding:5px 11px; border-radius:999px; border:1px solid #e9bf6840; color:var(--gold);
  font:800 12px/1.3 var(--body); letter-spacing:.05em;
}

.facts { margin:0; display:grid; gap:0 }
.facts > div {
  display:grid; grid-template-columns:minmax(0,160px) minmax(0,1fr); gap:14px;
  padding:11px 0; border-top:1px solid #ffffff12;
}
.facts > div:last-child { border-bottom:1px solid #ffffff12 }
.facts dt { margin:0; color:var(--dimmer); font:800 12px/1.5 var(--body);
            letter-spacing:.13em; text-transform:uppercase }
.facts dd { margin:0; color:#fff }
@media (max-width:520px) { .facts > div { grid-template-columns:1fr; gap:2px } }

.bar { display:inline-block; vertical-align:middle; width:96px; height:7px;
       border-radius:99px; background:#ffffff14; margin-right:9px; overflow:hidden }
.bar i { display:block; height:100%; background:var(--gold); border-radius:99px }

.gain { color:var(--tint,var(--gold)); font:800 14px/1.4 var(--body); letter-spacing:.08em }
.cost { color:#ff8b9a; font:800 14px/1.4 var(--body); letter-spacing:.08em }
.sw { display:inline-block; width:15px; height:15px; border-radius:4px; background:var(--sw);
      border:1px solid #ffffff2e; vertical-align:-2px; margin-right:8px }

/* -------------------------------- tables -------------------------------- */

.scroll { overflow-x:auto; border:1px solid var(--rim); border-radius:14px; background:#0e0e0e }
table { border-collapse:collapse; width:100%; font-size:15px }
th, td { padding:11px 14px; text-align:left; white-space:nowrap }
th { font:800 11.5px/1 var(--body); letter-spacing:.14em; text-transform:uppercase;
     color:var(--dimmer); border-bottom:1px solid #ffffff1c }
td { border-top:1px solid #ffffff0f; color:var(--dim) }
tbody tr:hover td { background:var(--lift); color:#fff }
td:first-child { color:#fff; font-weight:700 }

/* -------------------------------- pager --------------------------------- */

.pager { display:grid; grid-template-columns:1fr 1fr; gap:12px; margin-top:44px }
.pager a {
  padding:15px 18px; border-radius:14px; border:1px solid var(--rim); background:#0e0e0e;
  text-decoration:none; color:#fff; font:800 17px/1.2 var(--disp);
}
.pager a:hover { border-color:var(--gold) }
.pager .next { text-align:right }
.pager span { display:block; font:800 11px/1 var(--body); letter-spacing:.16em;
              text-transform:uppercase; color:var(--dimmer); margin-bottom:5px }

.plate { display:block; height:auto }