/* Lefty's Lounge. Deep green-black room, oxblood, amber glow, brass trim. */
:root {
  --bg: #240a0d;
  --bg-deep: #150507;
  --surface: #341215;
  --surface-2: #43191c;
  --ox: #5b1a18;
  --ox-deep: #1d0a09;
  --amber: #d9ab55;
  --brass: #b98b3e;
  --text: #f4e8d0;
  --text-soft: #e3d3b6;
  --muted: #c7b89c;
  --faint: #a39479;
  --line: rgba(244, 232, 208, 0.18);
  --line-amber: rgba(217, 171, 85, 0.32);
  --good: #6fcf9f;
  --warn: #f09070;
  --display: "Fraunces", Georgia, "Times New Roman", serif;
  --body: "DM Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
  --read: "Source Serif 4", Georgia, serif;
  color-scheme: dark;
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: var(--body);
  font-size: 16px;
  line-height: 1.55;
}
img { max-width: 100%; height: auto; }
a { color: inherit; text-decoration: none; }
a:hover { color: var(--amber); }
:focus-visible { outline: 2px solid var(--amber); outline-offset: 3px; }
h1, h2, h3, h4 { margin: 0; font-weight: 500; text-wrap: balance; }
p { margin: 0 0 1em; }
.muted { color: var(--muted); }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.skip { position: absolute; left: -999px; top: 8px; background: var(--amber); color: #1a1008; padding: 8px 14px; z-index: 10; }
.skip:focus { left: 8px; }
.wrap { max-width: 1280px; margin: 0 auto; padding-left: 24px; padding-right: 24px; }
.narrow { max-width: 760px; }
form.inline { display: inline; margin: 0; }
.linklike { background: none; border: 0; padding: 0; font: inherit; color: inherit; cursor: pointer; text-decoration: underline; text-underline-offset: 3px; text-decoration-color: rgba(241,232,216,.35); }
.linklike:hover { color: var(--amber); }
.linklike.danger { color: var(--warn); }

/* Top bar and masthead */
.topbar { border-bottom: 1px solid var(--line-amber); font-size: 13px; color: var(--muted); }
.topbar-in { display: flex; flex-wrap: wrap; gap: 8px 24px; justify-content: space-between; padding-top: 10px; padding-bottom: 10px; }
.topbar-links { display: flex; flex-wrap: wrap; gap: 8px 22px; align-items: center; }
.topbar-links .accent { color: var(--amber); font-weight: 600; }
.topbar .linklike { text-decoration: none; }

.masthead { display: flex; flex-wrap: wrap; gap: 20px 48px; align-items: flex-end; justify-content: space-between; padding-top: 44px; padding-bottom: 28px; }
.wordmark { font-family: var(--display); font-size: clamp(52px, 9vw, 112px); line-height: .95; letter-spacing: -.01em; font-weight: 500; }
.wordmark em { color: var(--amber); font-style: italic; }
.wordmark.small { font-size: 34px; line-height: 1; }
.wordmark:hover { color: var(--text); }
.tagline { flex: 0 1 380px; margin: 0; color: var(--muted); }

.topnav { border-top: 1px solid rgba(231,169,79,.35); border-bottom: 1px solid rgba(231,169,79,.35); }
.topnav-in { display: flex; flex-wrap: wrap; gap: 0 28px; align-items: center; justify-content: space-between; }
.topnav-links { display: flex; flex-wrap: wrap; gap: 0 26px; font-size: 14px; font-weight: 500; letter-spacing: .04em; }
.topnav-links a { padding: 15px 0; }
.topnav-links a[aria-current] { color: var(--amber); }
.navsearch { margin: 8px 0; flex: 0 1 220px; }
input[type="search"], input[type="text"], input[type="email"], input[type="password"], input[type="url"], textarea, select {
  width: 100%; background: var(--surface); color: var(--text); border: 1px solid rgba(241,232,216,.25);
  border-radius: 4px; padding: 11px 14px; font-family: inherit; font-size: 16px;
}
.navsearch input { height: 38px; padding: 0 14px; border-radius: 999px; font-size: 14px; }
input::placeholder, textarea::placeholder { color: var(--faint); }
textarea { resize: vertical; line-height: 1.6; }
select { appearance: auto; }

.flash { padding: 12px 0; font-weight: 500; }
.flash-ok { background: #123a2a; color: #bff0d8; }
.flash-error { background: #4a1a14; color: #ffd3c4; }
.flash-info { background: var(--surface-2); color: var(--text-soft); }

/* Shared bits */
.eyebrow { font-size: 12px; letter-spacing: .16em; text-transform: uppercase; font-weight: 600; color: var(--amber); }
.eyebrow a:hover { color: var(--text); }
.meta { display: flex; flex-wrap: wrap; gap: 6px 16px; align-items: center; font-size: 14px; color: var(--muted); }
.meta a:hover { color: var(--amber); }
.badge { display: inline-block; border: 1px solid rgba(231,169,79,.6); color: var(--amber); border-radius: 999px; padding: 2px 13px; font-size: 13px; font-weight: 600; white-space: nowrap; }
.button { display: inline-block; background: var(--amber); color: #1a1008; border: 1px solid var(--amber); border-radius: 4px; padding: 12px 22px; font: inherit; font-weight: 700; font-size: 15px; cursor: pointer; text-align: center; min-height: 44px; }
.button:hover { background: #f2bb6a; color: #1a1008; }
.button.ghost { background: transparent; color: var(--text); border-color: rgba(241,232,216,.35); }
.button.ghost:hover { color: var(--amber); border-color: var(--amber); background: transparent; }
.button.small { padding: 6px 14px; font-size: 14px; min-height: 36px; }
.section { padding-top: 56px; padding-bottom: 24px; }
.section-head { display: flex; flex-wrap: wrap; gap: 8px 32px; align-items: baseline; justify-content: space-between; margin-bottom: 28px; }
.section-head h2, .page-head h1 { font-family: var(--display); font-size: clamp(34px, 4vw, 48px); line-height: 1.05; }
.section-head p { margin: 0; }
.more { color: var(--amber); font-weight: 600; }
.small-h { font-family: var(--display); font-size: 26px; line-height: 1.15; margin: 40px 0 16px; }
.page-head { padding-top: 48px; padding-bottom: 16px; display: flex; flex-direction: column; gap: 12px; }
.page-head h1 { font-size: clamp(36px, 5vw, 60px); }
.lead { font-size: 19px; max-width: 60ch; margin: 0; }
.rows-wrap { padding-bottom: 72px; }

/* Hero */
.hero { display: flex; flex-wrap: wrap; gap: 40px; padding-top: 44px; padding-bottom: 56px; }
.hero-main { flex: 1.7 1 560px; min-width: 0; background: linear-gradient(160deg, #4a1613 0%, var(--ox-deep) 70%); border: 1px solid var(--line-amber); border-radius: 6px; padding: 40px; display: flex; flex-wrap: wrap; gap: 32px; align-items: center; }
.hero-text { flex: 1 1 320px; min-width: 0; display: flex; flex-direction: column; gap: 18px; }
.hero-text h1 { font-family: var(--display); font-size: clamp(34px, 4.4vw, 56px); line-height: 1.06; }
.hero-deck { font-size: 18px; color: var(--text-soft); max-width: 52ch; margin: 0; }
.arch-window { flex: 0 0 220px; max-width: 100%; height: 310px; position: relative; border-radius: 999px 999px 4px 4px; overflow: hidden; background: radial-gradient(ellipse at 50% 108%, #f6c06a 0%, #d0702e 36%, #7a2a1c 68%, #2a0e0b 100%); box-shadow: 0 0 90px rgba(231,169,79,.22); }
.arch-window::before { content: ""; position: absolute; inset: 0; background: repeating-linear-gradient(90deg, transparent 0 34px, rgba(12,6,5,.82) 34px 38px); }
.mullion { position: absolute; left: 0; right: 0; top: 48%; height: 4px; background: rgba(12,6,5,.82); }
.hero-side { flex: 1 1 300px; min-width: 0; display: flex; flex-direction: column; }
.side-label { font-size: 12px; letter-spacing: .16em; text-transform: uppercase; font-weight: 600; color: var(--muted); padding-bottom: 14px; border-bottom: 1px solid var(--line); }
.side-item { padding: 22px 0; border-bottom: 1px solid var(--line); display: flex; flex-direction: column; gap: 8px; }
.side-item:last-child { border-bottom: 0; }
.side-item h2 { font-family: var(--display); font-size: 26px; line-height: 1.15; }
.empty-hero { padding-top: 72px; padding-bottom: 72px; }
.empty-hero h1 { font-family: var(--display); font-size: clamp(34px, 5vw, 56px); margin-bottom: 12px; }

.band { background: linear-gradient(100deg, var(--ox) 0%, #3a100f 60%, var(--ox-deep) 100%); border-top: 1px solid rgba(231,169,79,.35); border-bottom: 1px solid rgba(231,169,79,.35); }
.band-in { padding-top: 72px; padding-bottom: 72px; display: flex; flex-direction: column; gap: 28px; }
.band blockquote { margin: 0; max-width: 980px; font-family: var(--display); font-style: italic; font-weight: 400; font-size: clamp(28px, 4.2vw, 54px); line-height: 1.14; text-wrap: balance; }
.band p { margin: 0; color: var(--text-soft); max-width: 60ch; }
.band a { color: var(--amber); font-weight: 600; }

/* Article lists */
.rows { border-top: 1px solid var(--line); }
.row { padding: 26px 0; border-bottom: 1px solid var(--line); display: flex; flex-wrap: wrap; gap: 12px 28px; justify-content: space-between; align-items: flex-start; }
.row-main { flex: 1 1 340px; min-width: 0; display: flex; flex-direction: column; gap: 8px; }
.row-title { font-family: var(--display); font-size: 28px; line-height: 1.15; }
.row-deck { margin: 0; color: var(--text-soft); max-width: 62ch; }

.desks-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 28px; }
.desk { display: flex; flex-direction: column; gap: 10px; min-width: 0; }
.monogram { width: 76px; height: 76px; border-radius: 50%; border: 1px solid var(--brass); background: var(--surface); display: flex; align-items: center; justify-content: center; font-family: var(--display); font-style: italic; font-size: 30px; color: var(--amber); flex: 0 0 auto; }
.monogram.big { width: 104px; height: 104px; font-size: 44px; }
.author-head { flex-direction: row; flex-wrap: wrap; align-items: center; gap: 28px; }
.author-head > div:last-child { display: flex; flex-direction: column; gap: 10px; min-width: 0; flex: 1 1 320px; }
.bio { color: var(--text-soft); }
.bigsearch { display: flex; flex-wrap: wrap; gap: 10px; max-width: 560px; }
.bigsearch input { flex: 1 1 260px; min-width: 0; }

/* Article page */
.preview-bar { background: var(--amber); color: #1a1008; padding: 10px 0; font-weight: 500; }
.preview-bar a { text-decoration: underline; }
.article { max-width: 780px; padding-top: 52px; padding-bottom: 32px; }
.article-head { display: flex; flex-direction: column; gap: 18px; margin-bottom: 36px; }
.article-head h1 { font-family: var(--display); font-size: clamp(36px, 5.4vw, 64px); line-height: 1.05; }
.article-deck { font-size: 21px; color: var(--text-soft); margin: 0; line-height: 1.45; }
.prose { font-family: var(--read); font-size: 19px; line-height: 1.75; color: var(--text); }
.prose h2, .prose h3 { font-family: var(--display); line-height: 1.15; margin: 1.8em 0 .6em; }
.prose h2 { font-size: 32px; }
.prose h3 { font-size: 26px; }
.prose p { margin: 0 0 1.25em; }
.prose a { color: var(--amber); text-decoration: underline; text-underline-offset: 3px; }
.prose blockquote { margin: 1.6em 0; padding: 0 0 0 24px; border-left: 2px solid var(--brass); font-style: italic; color: var(--text-soft); }
.prose img { border-radius: 4px; }
.prose ul, .prose ol { padding-left: 1.4em; margin: 0 0 1.25em; }
.prose table { border-collapse: collapse; width: 100%; font-family: var(--body); font-size: 15px; display: block; overflow-x: auto; }
.prose th, .prose td { border: 1px solid var(--line); padding: 8px 12px; text-align: left; }
.prose code { background: var(--surface); padding: 2px 6px; border-radius: 3px; font-size: .9em; }
.prose pre { background: var(--surface); padding: 16px; overflow-x: auto; border-radius: 4px; }
.narrow.prose { font-family: var(--body); font-size: 18px; line-height: 1.7; padding-bottom: 72px; }
.note { border: 1px solid var(--line-amber); background: var(--surface); padding: 14px 18px; border-radius: 4px; color: var(--text-soft); font-size: 15px; }
.sources { margin-top: 40px; padding-top: 8px; border-top: 1px solid var(--line-amber); }
.sources ol { padding-left: 1.3em; margin: 0; color: var(--text-soft); }
.sources li { margin-bottom: 8px; overflow-wrap: anywhere; }
.sources a { color: var(--amber); text-decoration: underline; text-underline-offset: 3px; }
.share { display: flex; flex-wrap: wrap; gap: 8px 22px; align-items: center; margin-top: 36px; padding-top: 20px; border-top: 1px solid var(--line); font-size: 15px; }
.share-label { font-size: 12px; letter-spacing: .16em; text-transform: uppercase; font-weight: 600; color: var(--muted); }

/* Comments */
.comments-wrap { background: var(--surface); border-top: 1px solid rgba(231,169,79,.22); border-bottom: 1px solid rgba(231,169,79,.22); margin-top: 32px; }
.comments { padding-top: 64px; padding-bottom: 64px; display: flex; flex-wrap: wrap; gap: 32px 64px; }
.comments-intro { flex: 1 1 260px; min-width: 0; display: flex; flex-direction: column; gap: 12px; }
.comments-intro h2 { font-family: var(--display); font-size: clamp(34px, 4vw, 48px); line-height: 1.05; }
.comments-intro a { color: var(--amber); }
.comments-main { flex: 2 1 520px; min-width: 0; }
.comment-form { display: flex; flex-direction: column; gap: 8px; margin-bottom: 28px; }
.comment-form label { font-size: 14px; font-weight: 600; }
.comment-form label.sr { position: absolute; }
.comment-form .button { align-self: flex-start; margin-top: 6px; }
.comments-main > .comment-form textarea, .comments-main > .comment-form input { background: var(--bg); }
.signin-prompt { padding: 18px; border: 1px dashed var(--brass); border-radius: 4px; }
.signin-prompt a { color: var(--amber); font-weight: 600; }
.thread { list-style: none; margin: 0; padding: 0; }
.thread.nested { margin-left: clamp(14px, 4vw, 40px); }
.comment { padding: 22px 0; border-top: 1px solid rgba(241,232,216,.14); }
.comment .comment { padding-bottom: 8px; }
.comment-head { display: flex; flex-wrap: wrap; gap: 6px 12px; align-items: center; font-size: 14px; }
.comment-head strong { font-size: 16px; }
.comment-body { margin: 10px 0 6px; max-width: 64ch; white-space: pre-wrap; overflow-wrap: anywhere; }
.comment-source { margin: 0 0 8px; font-size: 14px; overflow-wrap: anywhere; }
.comment-source a { color: var(--amber); text-decoration: underline; text-underline-offset: 3px; }
.tag { display: inline-block; border-radius: 999px; padding: 1px 11px; font-size: 12px; font-weight: 600; border: 1px solid; }
.tag-source { color: var(--good); border-color: var(--good); }
.tag-flag { color: var(--warn); border-color: #d2552e; }
.tag-author { background: var(--amber); border-color: var(--amber); color: #1a1008; font-weight: 700; }
.tag-hidden { color: var(--muted); border-color: var(--muted); }
.flag-note { font-size: 14px; color: var(--muted); margin: 0 0 8px; }
.inline-form { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 8px; max-width: 520px; }
.inline-form input { flex: 1 1 220px; min-width: 0; }
.comment-actions { display: flex; flex-wrap: wrap; gap: 8px 20px; align-items: flex-start; font-size: 14px; color: var(--muted); }
.comment-actions .linklike { font-size: 14px; }
details.reply { flex: 1 1 100%; }
details.reply summary { cursor: pointer; color: var(--amber); font-weight: 600; width: fit-content; }
details.reply[open] summary { margin-bottom: 10px; }
details.reply .comment-form { margin: 0; max-width: 560px; }
.removed { margin: 0; font-style: italic; }

/* Forms and pages */
.form-page { max-width: 520px; padding-top: 56px; padding-bottom: 80px; }
.form-page.left { margin-left: 0; }
.form-page h1 { font-family: var(--display); font-size: clamp(34px, 5vw, 52px); margin-bottom: 12px; }
.stack { display: flex; flex-direction: column; gap: 10px; margin: 24px 0; }
.stack label { font-size: 14px; font-weight: 600; margin-top: 8px; }
.stack .button { align-self: flex-start; margin-top: 16px; }
.small-print { font-size: 13px; margin: 6px 0 0; }
.form-error { background: #4a1a14; color: #ffd3c4; border-radius: 4px; padding: 12px 16px; margin: 16px 0 0; }
.check { display: flex; gap: 10px; align-items: flex-start; font-weight: 500 !important; }
.check input { width: 20px; height: 20px; margin-top: 3px; flex: 0 0 auto; }

/* Dashboard */
.dash-head { flex-direction: row; flex-wrap: wrap; justify-content: space-between; align-items: flex-end; }
.dash-actions { display: flex; flex-wrap: wrap; gap: 10px; }
.table { width: 100%; border-collapse: collapse; margin-bottom: 16px; }
.table th { text-align: left; font-size: 12px; letter-spacing: .12em; text-transform: uppercase; color: var(--muted); font-weight: 600; padding: 10px 12px 10px 0; border-bottom: 1px solid var(--line-amber); }
.table td { padding: 14px 12px 14px 0; border-bottom: 1px solid var(--line); vertical-align: middle; overflow-wrap: anywhere; }
.table td a:not(.button):hover { color: var(--amber); }
.status { display: inline-block; font-size: 12px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; padding: 2px 10px; border-radius: 999px; border: 1px solid var(--muted); color: var(--muted); }
.status-pending { color: var(--amber); border-color: var(--amber); }
.status-published { color: var(--good); border-color: var(--good); }
.editor-wrap { max-width: 860px; margin-left: 0; padding-bottom: 80px; }
.editor-actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 20px; }
.editor-actions .button { margin-top: 0; }
.inline-actions { margin: 20px 0 0; }
.danger-zone { margin-top: 48px; padding-top: 20px; border-top: 1px solid var(--line); }

/* Footer */
.footer { border-top: 1px solid rgba(231,169,79,.35); background: var(--bg-deep); margin-top: 24px; }
.footer-in { display: flex; flex-wrap: wrap; gap: 40px 64px; justify-content: space-between; padding-top: 56px; padding-bottom: 32px; }
.footer-brand { flex: 1 1 320px; min-width: 0; display: flex; flex-direction: column; gap: 14px; }
.footer-brand p { color: var(--muted); max-width: 42ch; font-size: 15px; margin: 0; }
.footer-cols { flex: 1 1 320px; display: flex; flex-wrap: wrap; gap: 32px 56px; font-size: 15px; }
.footer-cols > div { display: flex; flex-direction: column; gap: 10px; }
.footer h4 { font-size: 12px; letter-spacing: .16em; text-transform: uppercase; font-weight: 600; color: var(--brass); font-family: var(--body); }
.fine { padding-bottom: 40px; font-size: 13px; color: var(--faint); }

/* Phones */
@media (max-width: 720px) {
  .hero-main { padding: 28px 22px; }
  .arch-window { flex-basis: 100%; height: 220px; border-radius: 999px 999px 4px 4px; }
  .table thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
  .table, .table tbody, .table tr, .table td { display: block; width: 100%; }
  .table tr { padding: 14px 0; border-bottom: 1px solid var(--line); }
  .table td { border: 0; padding: 3px 0; }
  .table td[data-label]::before { content: attr(data-label) ": "; color: var(--muted); font-size: 13px; }
  .row-title { font-size: 25px; }
  .prose { font-size: 18px; }
}
@media (prefers-reduced-motion: reduce) { * { transition: none !important; } }


/* ===== Supper Club look ===== */
body {
  background-color: var(--bg);
  background-image:
    repeating-linear-gradient(90deg, rgba(0,0,0,.18) 0 2px, transparent 2px 46px),
    radial-gradient(ellipse at 50% -10%, #5a1a1c 0%, transparent 60%);
  background-repeat: repeat, no-repeat;
}
.topbar { color: var(--amber); font-size: 12.5px; letter-spacing: .14em; text-transform: uppercase; border-bottom-color: var(--line-amber); }
.topbar-links a:hover { color: var(--text); }

/* Neon sign */
.mast { display: block; text-align: center; padding-top: 20px; padding-bottom: 34px;
  background: radial-gradient(ellipse 60% 70% at 50% 58%, rgba(8,2,3,.6), transparent 72%); }
.orn { display: flex; align-items: center; justify-content: center; gap: 16px; margin-bottom: 14px; }
.orn i { display: block; height: 1px; width: min(26vw, 260px); background: linear-gradient(90deg, transparent, var(--amber)); }
.orn i:last-child { background: linear-gradient(270deg, transparent, var(--amber)); }
.orn b { width: 10px; height: 10px; transform: rotate(45deg); background: var(--amber); display: block; }
a.neon { display: block; font-family: "Yellowtail", cursive; font-weight: 400; font-size: clamp(84px, 13vw, 170px); line-height: 1; color: #ffe9d2;
  text-shadow: 0 0 6px #fff1de, 0 0 18px #ff8a5c, 0 0 42px #ff8a5c, 0 0 90px #ff6a3a; }
a.neon:hover { color: #ffe9d2; }
.neon small { display: block; font-family: "Marcellus", Georgia, serif; font-size: clamp(18px, 2.2vw, 26px); letter-spacing: .55em; text-transform: uppercase;
  color: #ffb04a; text-shadow: 0 0 14px rgba(255,176,74,.75); margin-top: 34px; padding-left: .55em; }
.est { margin-top: 22px; font-size: 14px; letter-spacing: .34em; text-transform: uppercase; color: var(--text-soft); }
.neonsm { font-family: "Yellowtail", cursive; font-size: 50px; line-height: 1.1; color: #ffe9d2;
  text-shadow: 0 0 5px #fff1de, 0 0 14px #ff8a5c, 0 0 30px rgba(255,106,58,.85); }
.neon-h, .comments-intro h2 { font-family: "Yellowtail", cursive; font-weight: 400; font-style: normal; color: #ffe9d2; margin: 0; line-height: 1.1;
  text-shadow: 0 0 4px #fff1de, 0 0 12px #ff8a5c, 0 0 28px rgba(255,106,58,.85), 0 0 56px rgba(255,106,58,.45); }
.section-title h2.neon-h, .comments-intro h2 { font-size: clamp(56px, 7vw, 92px); line-height: 1; padding-bottom: 6px; }

/* Room navigation */
.topnav { border-top: 1px solid var(--brass); border-bottom: 1px solid var(--brass); position: relative; }
.topnav::after { content: ""; position: absolute; left: 0; right: 0; bottom: -5px; height: 1px; background: var(--brass); opacity: .5; }
.topnav-links { flex: 1 1 560px; justify-content: center; gap: 0 26px; font-size: 13px; letter-spacing: .14em; text-transform: uppercase; }

/* Feature */
.feature { margin: 56px auto 24px; max-width: 960px; padding: 14px; border: 1px solid var(--amber); position: relative; }
.feature-in { border: 1px solid var(--brass); padding: 54px 56px; text-align: center; background: linear-gradient(180deg, rgba(0,0,0,.18), rgba(0,0,0,.04)); position: relative; }
.corner { position: absolute; width: 22px; height: 22px; border: 2px solid var(--amber); }
.c1 { top: -9px; left: -9px; border-right: 0; border-bottom: 0; } .c2 { top: -9px; right: -9px; border-left: 0; border-bottom: 0; }
.c3 { bottom: -9px; left: -9px; border-right: 0; border-top: 0; } .c4 { bottom: -9px; right: -9px; border-left: 0; border-top: 0; }
.kicker { font-size: 13px; letter-spacing: .3em; text-transform: uppercase; color: var(--amber); font-weight: 600; }
.kicker a:hover { color: var(--text); }
.feature h1 { font-family: var(--display); font-weight: 500; font-size: clamp(34px, 5vw, 60px); line-height: 1.08; margin: 18px auto; max-width: 20ch; text-wrap: balance; }
.feature p { max-width: 50ch; margin: 0 auto 22px; color: var(--text-soft); font-size: 19px; }
.by { font-size: 14px; letter-spacing: .08em; color: var(--text-soft); }
.by b { color: var(--amber); font-weight: 600; }
.pill { display: inline-block; margin-left: 10px; border: 1px solid var(--amber); color: var(--amber); padding: 2px 12px; border-radius: 999px; font-size: 13px; font-weight: 600; letter-spacing: .04em; }

/* Menu */
.section-title { text-align: center; margin: 84px 0 8px; display: flex; flex-direction: column; gap: 6px; }
.section-title p { margin: 0; color: var(--text-soft); }
.menu { column-count: 2; column-gap: 72px; margin-top: 40px; }
.course { break-inside: avoid; margin-bottom: 38px; }
.course h3 { font-family: var(--body); font-size: 13px; letter-spacing: .3em; text-transform: uppercase; color: var(--amber); font-weight: 600; margin: 0 0 18px; display: flex; align-items: center; gap: 14px; }
.course h3::after { content: ""; flex: 1; height: 1px; background: var(--brass); opacity: .6; }
.mi { display: block; margin-bottom: 20px; }
.mline { display: flex; align-items: baseline; gap: 10px; }
.mt { font-family: var(--display); font-size: 23px; line-height: 1.2; font-weight: 500; min-width: 0; }
.dots { flex: 1 0 20px; border-bottom: 2px dotted rgba(217,171,85,.55); transform: translateY(-5px); }
.mtime { font-size: 14px; color: var(--amber); font-weight: 600; white-space: nowrap; letter-spacing: .04em; }
.mi small { display: block; margin-top: 4px; color: var(--text-soft); font-size: 15px; }
.mi:hover .mt { color: var(--amber); }

/* House rule */
.rule { margin: 30px 0 0; padding: 92px 0; text-align: center; border-top: 1px solid var(--brass); border-bottom: 1px solid var(--brass); background: #0c0405; }
.rule .kicker { display: block; margin-bottom: 22px; }
.rule blockquote { margin: 0 auto; max-width: 960px; font-family: "Yellowtail", cursive; font-weight: 400; font-size: clamp(38px, 5.6vw, 74px); line-height: 1.14; color: #ffe9d2;
  text-shadow: 0 0 5px #fff0dc, 0 0 16px #ff8a5c, 0 0 38px rgba(255,106,58,.9); }
.rule p { margin: 30px 0 0; color: var(--text-soft); }
.rule p a { color: var(--amber); font-weight: 600; }

.rooms { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(250px, 100%), 1fr)); gap: 26px; margin-top: 40px; }
.room { position: relative; overflow: hidden; display: flex; align-items: flex-end; justify-content: center; text-align: center; min-height: 300px; border: 1px solid var(--brass);
  background: linear-gradient(180deg, #2c0d10, #150507); }
.room::before { content: ""; position: absolute; inset: 6px; border: 1px solid rgba(217,171,85,.35); pointer-events: none; z-index: 3; }
.room .art { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform .35s ease; }
.room-ph { position: absolute; inset: 0; background: radial-gradient(ellipse at 50% 36%, rgba(231,169,79,.35), transparent 70%); }
.room .shade { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(14,4,5,0) 40%, rgba(14,4,5,.88) 70%, rgba(14,4,5,.97) 100%); z-index: 1; }
.room .txt { position: relative; z-index: 2; padding: 0 12px 18px; }
.room h4 { font-family: var(--display); font-size: 25px; font-weight: 500; margin: 0 0 6px; white-space: nowrap; text-shadow: 0 2px 12px rgba(0,0,0,.8); }
.room p { margin: 0; color: var(--text); opacity: .88; font-size: 15px; text-shadow: 0 1px 8px rgba(0,0,0,.9); }
.room:hover .art { transform: scale(1.05); }
.room:hover h4 { color: var(--amber); }
.desk-name { font-family: var(--display); font-size: 24px; line-height: 1.1; font-weight: 500; }

/* Room page banner */
.room-banner { border: 1px solid var(--amber); padding: 12px; margin-top: 44px; }
.room-banner-in { border: 1px solid var(--brass); padding: 28px; display: flex; flex-wrap: wrap; align-items: center; gap: 28px 44px; background: linear-gradient(180deg, rgba(0,0,0,.2), rgba(0,0,0,.04)); }
.banner-img { flex: 0 1 380px; max-width: 100%; height: auto; border: 1px solid var(--brass); }
.banner-text { flex: 1 1 300px; min-width: 0; display: flex; flex-direction: column; gap: 12px; }
.banner-text h1.neon-h { font-size: clamp(54px, 7vw, 92px); }
.banner-text p { margin: 0; color: var(--text-soft); font-size: 19px; }

/* Footer */
.tuft { margin-top: 84px; height: 90px; border-top: 2px solid var(--brass); box-shadow: inset 0 14px 22px rgba(0,0,0,.5);
  background:
    radial-gradient(circle at 50% 50%, #e0b762 0 3px, transparent 4px) 0 0 / 48px 48px,
    linear-gradient(45deg, #4a1519 25%, transparent 25% 75%, #4a1519 75%) 0 0 / 48px 48px,
    linear-gradient(45deg, #4a1519 25%, #3a1013 25% 75%, #4a1519 75%) 24px 24px / 48px 48px;
  background-color: #3a1013; }
.footer { margin-top: 0; background: var(--bg-deep); border-top: 0; }

@media (max-width: 820px) {
  .menu { column-count: 1; }
  .feature-in { padding: 38px 22px; }
  .mt { font-size: 21px; }
  .section-title { margin-top: 64px; }
  .room-banner-in { padding: 18px; }
}

/* Neon fonts bundled with the site so they always load */
@font-face { font-family: "Yellowtail"; font-style: normal; font-weight: 400; font-display: swap; src: url("/fonts/yellowtail-latin-400-normal.woff2") format("woff2"); }
@font-face { font-family: "Marcellus"; font-style: normal; font-weight: 400; font-display: swap; src: url("/fonts/marcellus-latin-400-normal.woff2") format("woff2"); }

/* Cookie notice, 21+ notice, footer links */
.cookie { position: fixed; left: 16px; right: 16px; bottom: 16px; z-index: 50; max-width: 620px; margin: 0 auto; display: flex; gap: 16px; align-items: center; justify-content: space-between;
  background: #0c0405; border: 1px solid var(--brass); padding: 12px 16px; box-shadow: 0 8px 30px rgba(0,0,0,.6); }
.cookie[hidden] { display: none; }
.cookie .button { white-space: nowrap; }
.cookie p { margin: 0; font-size: 14px; color: var(--text-soft); }
.cookie a { color: var(--amber); text-decoration: underline; }
.adult-note { border: 1px solid var(--brass); background: rgba(0,0,0,.3); padding: 10px 16px; margin: 20px 0 0; font-size: 14px; letter-spacing: .04em; color: var(--text-soft); text-align: center; }
.adult-note b { color: var(--amber); }
.fine a { text-decoration: underline; text-underline-offset: 3px; }

.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.codes { list-style: none; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 10px; }
code { background: rgba(0,0,0,.35); border: 1px solid var(--line-amber); padding: 4px 8px; font-size: 16px; letter-spacing: .06em; }
.prose-list { color: var(--text-soft); }

.ai-label { border: 1px solid var(--line-amber); background: rgba(0,0,0,.28); padding: 10px 14px; margin: 12px 0; font-size: 14px; color: var(--text-soft); }
.ai-label b { color: var(--amber); }
.ai-label a { color: var(--amber); text-decoration: underline; }
.small-input { max-width: 140px; }
.checks label { display: flex; gap: 10px; align-items: center; font-weight: 500; }
.run-log { font-size: 14px; color: var(--text-soft); }
.run-log li { margin: 2px 0; }
.stop-btn { background: #8f1d1d; border-color: #8f1d1d; color: #fff; }

/* Illustrations */
.cover { margin: 0 0 32px; }
.cover img { width: 100%; height: auto; max-height: 520px; object-fit: cover; border-radius: 4px; border: 1px solid var(--line); display: block; }
.cover figcaption { margin-top: 8px; font-size: 13px; color: var(--text-soft); }
.row-thumb { flex: 0 0 160px; order: 3; }
.row-thumb img { width: 160px; height: 100px; object-fit: cover; border-radius: 4px; border: 1px solid var(--line); display: block; }
@media (max-width: 600px) { .row-thumb { flex-basis: 100%; } .row-thumb img { width: 100%; height: 160px; } }
.illo { margin-top: 36px; padding-top: 24px; border-top: 1px solid var(--line); }
.illo-preview { max-width: 360px; width: 100%; height: auto; border-radius: 4px; border: 1px solid var(--line); }
.prompt-box { border: 1px solid var(--line-amber); background: var(--surface); padding: 12px 16px; border-radius: 4px; font-size: 15px; }

/* Newsletter signup */
.nl { border: 1px solid var(--line-amber); background: var(--surface); padding: 22px 24px; border-radius: 4px; margin: 36px 0 0; max-width: 640px; }
.nl-h { font-family: var(--display); font-size: 28px; margin: 0 0 6px; }
.nl .muted { margin: 0 0 14px; }
.nl-row { display: flex; gap: 10px; flex-wrap: wrap; }
.nl-row input[type=email] { flex: 1 1 220px; min-width: 0; }
.nl-compact { border: 0; background: none; padding: 0; margin: 6px 0 0; }
.nl-label { display: block; font-size: 13px; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); margin-bottom: 8px; }

/* Visitors chart */
.vbars { display: flex; align-items: flex-end; gap: 3px; height: 160px; border-bottom: 1px solid var(--line); padding: 0 2px; }
.vbar { flex: 1 1 0; height: 100%; display: flex; align-items: flex-end; }
.vbar span { display: block; width: 100%; min-height: 2px; background: var(--amber); border-radius: 2px 2px 0 0; }

/* pictures inside articles and the picture tools in the editor */
.prose .body-fig { margin: 1.8em 0; }
.prose .body-fig img, .prose img { max-width: 100%; height: auto; display: block; }
.prose .body-fig figcaption { font-family: var(--body); font-size: 14px; color: var(--text-soft); margin-top: 8px; }
.pic-tool { border: 1px solid var(--line, #3a2f25); border-radius: 6px; padding: 14px 16px; display: grid; gap: 8px; }
.pic-tool p { margin: 0; }

/* major-event phases in the News desk form */
.phase { border-left: 2px solid var(--brass, #b8923a); padding: 8px 0 8px 14px; margin: 12px 0; display: grid; gap: 8px; }