:root {
  color-scheme: dark;
  --ink: #f7f4ef;
  --muted: #aaa69f;
  --surface: #151619;
  --surface-2: #1e2024;
  --line: rgba(255,255,255,.11);
  --accent: #f28c68;
  --accent-soft: #f5c9b7;
  --cream: #f1ede6;
  --serif: 'Fraunces', Georgia, serif;
  --sans: 'DM Sans', system-ui, sans-serif;
  --radius: 18px;
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; background: var(--surface); color: var(--ink); font-family: var(--sans); }
[hidden] { display: none !important; }
.auth-gate { min-height:100vh; display:grid; place-items:center; padding:24px; background:radial-gradient(circle at 75% 18%, rgba(242,140,104,.16), transparent 30%), var(--surface); }
.auth-panel { width:min(100%, 470px); border:1px solid var(--line); border-radius:var(--radius); padding:42px; background:rgba(30,32,36,.72); box-shadow:0 30px 80px rgba(0,0,0,.28); }
.auth-panel h1 { font-size:clamp(3rem, 10vw, 5.5rem); margin-bottom:18px; }
.auth-copy { color:var(--muted); line-height:1.55; margin-bottom:28px; }
.auth-form { display:grid; gap:16px; }
.auth-form label { display:grid; gap:8px; color:var(--muted); font-size:.75rem; }
.auth-form input { border:1px solid var(--line); background:var(--surface); color:var(--ink); border-radius:10px; padding:13px 14px; outline:none; }
.auth-form input:focus { border-color:var(--accent); }
.auth-form .primary-button { justify-self:start; margin-top:8px; }
.auth-panel small { display:block; color:var(--muted); margin-top:26px; line-height:1.5; white-space:nowrap; font-size:clamp(.58rem, 1.8vw, .72rem); letter-spacing:-.025em; }
.form-error { color:#ffb19a; min-height:1.2em; font-size:.78rem; margin:0; }
button, input { font: inherit; }
button { cursor: pointer; }
.app-shell { max-width: 1440px; margin: 0 auto; padding: 0 5vw; overflow: hidden; }
.topbar { height: 82px; display:flex; align-items:center; justify-content:space-between; border-bottom:1px solid var(--line); }
.wordmark { color:var(--ink); text-decoration:none; display:flex; align-items:center; gap:10px; font-weight:700; letter-spacing:-.04em; font-size:1.1rem; }
.wordmark-mark { color:var(--accent); font-size:1.45rem; }
.topnav { display:flex; gap:8px; margin-left:auto; margin-right:20px; }
.nav-link { border:0; background:none; color:var(--muted); padding:10px 14px; font-size:.9rem; }
.nav-link.is-active, .nav-link:hover { color:var(--ink); }
.top-actions { display:flex; gap:10px; align-items:center; }
.icon-button, .avatar-button { border:1px solid var(--line); background:transparent; color:var(--ink); border-radius:50%; width:38px; height:38px; }
.avatar-button { background:var(--accent); border-color:transparent; color:#261915; font-size:.72rem; font-weight:700; }
.hero { min-height: 510px; display:grid; grid-template-columns: 1fr 380px; gap:8vw; align-items:center; padding: 65px 4vw 70px 0; }
.view-panel { min-height: calc(100vh - 82px); }
.library-panel, .profile-panel { padding: 78px 0 90px; }
.page-heading { max-width: 650px; margin-bottom: 44px; }
.page-heading h1, .profile-heading h1 { font-size:clamp(3.6rem, 7vw, 6rem); margin-bottom:18px; }
.page-heading > p:last-child, .profile-heading > div > p:last-child { color:var(--muted); max-width:500px; line-height:1.6; font-size:1.02rem; }
.page-toolbar { display:flex; justify-content:space-between; align-items:flex-end; border-top:1px solid var(--line); padding:24px 0 18px; margin-bottom:20px; }
.sort-control { display:flex; align-items:center; gap:10px; color:var(--muted); font-size:.72rem; letter-spacing:.08em; text-transform:uppercase; }
.sort-control select { appearance:none; min-width:156px; border:1px solid rgba(255,255,255,.18); border-radius:999px; background-color:var(--surface-2); background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 14 14'%3E%3Cpath d='m3 5 4 4 4-4' fill='none' stroke='%23aaa69f' stroke-width='1.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); background-repeat:no-repeat; background-position:right 13px center; color:var(--ink); padding:10px 38px 10px 15px; outline:none; font-size:.82rem; letter-spacing:0; text-transform:none; transition:border-color .2s ease, background-color .2s ease; }
.sort-control select:hover { border-color:rgba(242,140,104,.55); }
.sort-control select:focus { border-color:var(--accent); box-shadow:0 0 0 3px rgba(242,140,104,.12); }
.sort-control option { background:var(--surface-2); color:var(--ink); }
.library-search { display:flex; align-items:center; gap:12px; width:min(100%, 430px); border-bottom:1px solid var(--line); padding:11px 0; color:var(--muted); }
.library-search input { flex:1; min-width:0; border:0; outline:0; background:transparent; color:var(--ink); font-size:1rem; }
.empty-state { grid-column:1 / -1; padding:45px 0; }
.profile-heading { display:flex; justify-content:space-between; align-items:end; gap:24px; margin-bottom:45px; }
.profile-avatar { display:grid; place-items:center; width:88px; height:88px; border-radius:50%; background:var(--accent); color:#281915; font-weight:700; font-size:1.2rem; }
.list-tabs { display:flex; gap:8px; border-bottom:1px solid var(--line); margin-bottom:28px; }
.list-tab { border:0; background:none; color:var(--muted); padding:0 8px 15px; font-size:.86rem; border-bottom:2px solid transparent; }
.list-tab span { margin-left:5px; color:var(--accent); }
.list-tab.is-active { color:var(--ink); border-color:var(--accent); }
.profile-settings { display:flex; justify-content:space-between; align-items:center; margin-top:70px; padding-top:28px; border-top:1px solid var(--line); }
.user-management { margin-top:10px; }
.management-header { margin-bottom:28px; }
.management-header h2 { margin-bottom:10px; }
.create-user-form { display:grid; grid-template-columns:1fr 1.3fr auto; gap:12px; align-items:end; border-top:1px solid var(--line); border-bottom:1px solid var(--line); padding:20px 0; margin-bottom:20px; }
.create-user-form label { display:grid; gap:8px; color:var(--muted); font-size:.75rem; }
.create-user-form input { min-width:0; border:1px solid var(--line); background:var(--surface); color:var(--ink); border-radius:10px; padding:12px 13px; outline:none; }
.create-user-form .form-error { grid-column:1 / -1; }
.one-time-result { display:grid; gap:7px; background:rgba(242,140,104,.12); border:1px solid rgba(242,140,104,.38); border-radius:12px; padding:16px; margin-bottom:22px; }
.one-time-result span, .one-time-result small { color:var(--muted); }
.one-time-result code { color:var(--accent-soft); font-size:1.1rem; letter-spacing:.05em; }
.user-list { border-top:1px solid var(--line); }
.user-row { display:grid; grid-template-columns:1fr auto auto; gap:18px; align-items:center; padding:17px 0; border-bottom:1px solid var(--line); }
.user-row-main { display:flex; flex-direction:column; gap:5px; } .user-row-main span { color:var(--muted); font-size:.76rem; }
.adult-toggle { color:var(--muted); display:flex; align-items:center; gap:10px; font-size:.76rem; white-space:nowrap; cursor:pointer; }
.adult-toggle input { position:absolute; opacity:0; pointer-events:none; }
.toggle-track { position:relative; display:inline-flex; align-items:center; width:42px; height:24px; padding:3px; border:1px solid rgba(255,255,255,.24); border-radius:999px; background:rgba(255,255,255,.08); transition:background .2s ease, border-color .2s ease; }
.toggle-track > span { width:16px; height:16px; border-radius:50%; background:#aaa5a1; box-shadow:0 1px 3px rgba(0,0,0,.3); transition:transform .2s ease, background .2s ease; }
.adult-toggle input:checked + .toggle-track { background:var(--accent); border-color:var(--accent); }
.adult-toggle input:checked + .toggle-track > span { transform:translateX(18px); background:#291914; }
.adult-toggle input:disabled + .toggle-track { opacity:.45; cursor:not-allowed; }
.adult-preferences { display:grid; gap:18px; border-top:1px solid var(--line); margin-top:48px; padding-top:26px; }
.adult-preferences h2 { margin-bottom:10px; }
.adult-checkboxes { display:flex; gap:20px; flex-wrap:wrap; }
.adult-checkboxes label { display:flex; align-items:center; gap:8px; color:var(--ink); font-size:.86rem; }
.adult-checkboxes input { accent-color:var(--accent); }
.secondary-button { border:1px solid var(--line); background:transparent; color:var(--ink); border-radius:999px; padding:12px 16px; }
.secondary-button span { margin-left:10px; }
.profile-actions { display:flex; gap:10px; align-items:center; flex-wrap:wrap; }
.logout-button { color:var(--accent-soft); }
.auth-form label.remember-me { display:flex; flex-direction:row; align-items:center; gap:9px; width:max-content; color:var(--muted); font-size:.78rem; line-height:1.2; }
.auth-form label.remember-me input { width:16px; height:16px; flex:0 0 16px; margin:0; padding:0; accent-color:var(--accent); }
.eyebrow { text-transform:uppercase; letter-spacing:.13em; font-size:.68rem; color:var(--accent); font-weight:700; margin:0 0 14px; }
h1,h2,h3,p { margin-top:0; }
h1 { font-size:clamp(3.5rem, 7vw, 6.9rem); line-height:.94; letter-spacing:-.075em; margin:0 0 28px; max-width: 750px; }
em { font-family:var(--serif); font-weight:600; letter-spacing:-.055em; }
.hero-text { max-width:430px; color:var(--muted); line-height:1.6; font-size:1.03rem; }
.hero-actions { display:flex; align-items:center; gap:24px; margin-top:32px; }
.primary-button { border:0; background:var(--accent); color:#281915; border-radius:999px; padding:15px 19px; font-weight:700; }
.primary-button span, .text-button span { margin-left:10px; }
.text-button { border:0; color:var(--ink); background:none; padding: 8px 0; font-size:.9rem; }
.hero-poster { position:relative; justify-self:end; width: min(100%, 350px); aspect-ratio:.74; }
.hero-poster-mobile { display:none; }
.poster-glow { position:absolute; inset:12% -15% -10%; background: radial-gradient(circle, rgba(242,140,104,.28), transparent 65%); filter:blur(18px); }
.poster-art { position:absolute; inset:0; border-radius:var(--radius); overflow:hidden; padding:28px; display:flex; flex-direction:column; justify-content:space-between; box-shadow: 0 24px 70px rgba(0,0,0,.42); }
.holdovers-art { background: linear-gradient(150deg, #b96141 0%, #664336 42%, #292527 100%); }
.holdovers-art:before { content:''; position:absolute; width:165%; height:55%; left:-35%; bottom:-8%; background:radial-gradient(ellipse, #e3a570, #6e4635 55%, transparent 56%); opacity:.58; }
.holdovers-art:after { content:'✦'; position:absolute; top:22%; right:17%; font-size:4rem; color:rgba(255,244,211,.58); }
.poster-art > * { position:relative; z-index:1; }
.poster-kicker { text-transform:uppercase; letter-spacing:.12em; font-size:.63rem; font-weight:700; color:#f8dccb; }
.poster-art strong { font-family:var(--serif); font-size:3.2rem; line-height:.9; letter-spacing:-.07em; max-width:220px; }
.poster-meta { color:#f3d3c2; font-size:.76rem; }
.hero-stamp { position:absolute; right:-40px; bottom:34px; width:98px; height:98px; display:grid; place-content:center; text-align:center; border-radius:50%; background:var(--cream); color:#282320; transform:rotate(9deg); font-size:.64rem; line-height:1.1; }
.hero-stamp strong { font-family:var(--serif); font-size:1.35rem; }
.toolbar { display:flex; justify-content:space-between; align-items:end; border-top:1px solid var(--line); padding:45px 0 18px; }
h2 { font-size:clamp(1.8rem, 3vw, 2.5rem); line-height:1; letter-spacing:-.06em; margin:0; }
.browse-controls { display:flex; gap:10px; align-items:center; }
.search-field { display:flex; align-items:center; gap:9px; border-bottom:1px solid var(--line); padding:8px 0; color:var(--muted); }
.search-field input { width:210px; border:0; outline:none; color:var(--ink); background:transparent; font-size:.86rem; }
.filter-button { background:transparent; color:var(--ink); border:1px solid var(--line); border-radius:999px; padding:11px 14px; }
.content-section { padding:40px 0 75px; }
.section-row { display:flex; justify-content:space-between; align-items:end; gap:20px; margin-bottom:24px; }
.quiet-label { color:var(--muted); font-size:.8rem; }
.poster-grid { display:grid; grid-template-columns: repeat(4, 1fr); gap:18px; }
.media-card { min-width:0; }
.media-art { position:relative; aspect-ratio:.7; border-radius:13px; overflow:hidden; padding:16px; display:flex; flex-direction:column; justify-content:space-between; transition:transform .25s ease; }
.media-poster { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; z-index:0; }
.media-card:hover .media-art { transform:translateY(-5px); }
.media-art:after { content:''; position:absolute; inset:0; background:linear-gradient(180deg, rgba(0,0,0,.05), transparent 50%, rgba(0,0,0,.72)); }
.media-art span, .media-art strong, .save-button { position:relative; z-index:1; }
.like-button, .save-button { position:absolute; top:12px; width:32px; height:32px; border-radius:50%; z-index:2; }
.like-button { left:auto; right:12px; bottom:12px; top:auto; border:1px solid rgba(255,255,255,.48); background:rgba(0,0,0,.2); color:#fff; }
.like-button.is-liked { background:var(--accent); border-color:var(--accent); color:#291914; }
.media-art strong { font-family:var(--serif); font-size:1.55rem; line-height:.95; letter-spacing:-.06em; max-width:130px; text-shadow:0 2px 14px rgba(0,0,0,.72), 0 1px 3px rgba(0,0,0,.9); }
.media-art span { font-size:.67rem; color:rgba(255,255,255,.76); }
.media-card-foot { position:relative; z-index:1; display:flex; flex-direction:column; gap:4px; }
.media-status { color:var(--accent-soft) !important; font-size:.62rem !important; letter-spacing:.04em; }
.save-button { right:12px; border:1px solid rgba(255,255,255,.48); background:rgba(0,0,0,.2); color:#fff; }
.save-button.is-saved { background:var(--accent); color:#291914; border-color:var(--accent); }
.media-meta { padding:12px 2px 0; display:flex; justify-content:space-between; gap:10px; }
.media-meta strong { font-size:.86rem; }
.media-meta span { color:var(--muted); font-size:.73rem; }
.art-1 { background:linear-gradient(150deg,#806c57,#2b3038 65%); } .art-2 { background:linear-gradient(150deg,#4d6370,#111719 65%); } .art-3 { background:linear-gradient(150deg,#d69b54,#4a2530 65%); } .art-4 { background:linear-gradient(150deg,#758e84,#1b2524 65%); }
.split-section { display:grid; grid-template-columns: 1.4fr .7fr; gap:18px; padding-top:0; }
.episode-panel, .note-panel { border-top:1px solid var(--line); padding-top:24px; }
.episode-list { border-top:1px solid var(--line); }
.episode-row { display:grid; grid-template-columns:60px 1fr auto; gap:18px; align-items:center; padding:16px 0; border-bottom:1px solid var(--line); }
.episode-date { border-right:1px solid var(--line); display:flex; flex-direction:column; line-height:1; }
.episode-date strong { font-family:var(--serif); font-size:1.5rem; } .episode-date span { color:var(--muted); font-size:.6rem; letter-spacing:.12em; margin-top:4px; }
.episode-copy { display:flex; flex-direction:column; gap:5px; } .episode-copy strong { font-size:.9rem; } .episode-copy span, .episode-status { color:var(--muted); font-size:.74rem; }
.episode-status.soon { color:var(--accent); }
.release-stack-panel { border-top:1px solid var(--line); padding-top:24px; }
.release-stack { position:relative; min-height:280px; }
.release-card { position:absolute; inset:0; border-radius:var(--radius); overflow:hidden; padding:22px; display:flex; flex-direction:column; justify-content:end; background-size:cover; background-position:center; box-shadow:0 18px 45px rgba(0,0,0,.28); }
.release-card:nth-child(2) { transform:translate(12px, 12px) rotate(2deg); opacity:.38; z-index:0; }
.release-card:nth-child(3) { transform:translate(6px, 6px) rotate(-1deg); opacity:.62; z-index:1; }
.release-card:first-child { z-index:2; }
.release-card:after { content:''; position:absolute; inset:0; background:linear-gradient(180deg, rgba(0,0,0,.02), rgba(0,0,0,.84)); }
.release-card > * { position:relative; z-index:1; }
.release-card .release-date { color:var(--accent-soft); font-size:.72rem; text-transform:uppercase; letter-spacing:.1em; }
.release-card strong { font-family:var(--serif); font-size:2rem; line-height:.95; letter-spacing:-.06em; max-width:240px; }
.social-section { border-top:1px solid var(--line); }
.social-feed { display:grid; grid-template-columns:repeat(4, minmax(0, 1fr)); gap:18px; width:100%; margin:0 auto; }
.social-item .social-art { aspect-ratio:.7; }
.social-copy { display:flex; justify-content:center; padding:10px 4px 0; color:var(--muted); font-size:clamp(.62rem, 1.2vh, .82rem); line-height:1.25; text-align:center; min-width:0; }
.social-copy span { display:block; width:100%; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; font-size:clamp(.48rem, .9vh, .58rem); letter-spacing:-.01em; }
.feed-sentinel { height:1px; width:100%; }
.social-item { border-top:1px solid var(--line); padding-top:14px; }
.social-art { position:relative; aspect-ratio:.7; border-radius:13px; margin-bottom:14px; overflow:hidden; background-size:cover; background-position:center; }
.social-art:after { content:''; position:absolute; inset:0; background:linear-gradient(180deg, rgba(0,0,0,.25), transparent 45%, rgba(0,0,0,.62)); }
.social-copy { display:flex; flex-direction:column; gap:7px; padding:10px 2px 0; } .social-copy strong { font-size:.9rem; } .social-copy span { color:var(--muted); font-size:clamp(.62rem, 1.2vh, .82rem); line-height:1.3; }
.note-panel { background:var(--accent); color:#2d1c17; border:0; padding:28px; border-radius:var(--radius); min-height:240px; position:relative; overflow:hidden; }
.joke-card { min-height:280px; }
.note-panel:after { content:'✦'; position:absolute; right:-14px; bottom:-35px; font-size:10rem; color:rgba(255,255,255,.16); }
.note-panel .eyebrow { color:#75402f; } .note-panel h3 { font-size:2rem; line-height:.98; letter-spacing:-.07em; } .note-panel h3 em { font-size:2.2rem; } .note-panel p:last-child { max-width:270px; color:#704334; line-height:1.5; font-size:.85rem; }
.note-icon { font-size:1.25rem; }
.footer { display:flex; justify-content:space-between; gap:20px; border-top:1px solid var(--line); padding:22px 0 30px; color:var(--muted); font-size:.7rem; }
.toast { position:fixed; left:50%; bottom:26px; transform:translate(-50%, 20px); opacity:0; pointer-events:none; background:var(--cream); color:#241e1a; padding:11px 16px; border-radius:999px; font-size:.78rem; transition:.25s ease; box-shadow:0 10px 30px rgba(0,0,0,.25); } .toast.is-visible { opacity:1; transform:translate(-50%,0); }
.list-picker { position:fixed; z-index:20; width:min(240px, calc(100vw - 32px)); padding:14px; overflow:hidden; isolation:isolate; border:0; border-radius:16px; background:rgba(36,38,43,.8); -webkit-backdrop-filter:blur(18px) saturate(140%); backdrop-filter:blur(18px) saturate(140%); box-shadow:0 18px 42px rgba(0,0,0,.55), 0 4px 14px rgba(0,0,0,.22); animation:list-picker-in .18s ease both; }
.list-picker::before { content:''; position:absolute; inset:-35% -15%; z-index:-1; pointer-events:none; background:linear-gradient(115deg, transparent 20%, rgba(255,255,255,.08) 38%, rgba(255,255,255,.015) 48%, transparent 62%); transform:translateX(-18%) rotate(-4deg); }
.list-picker > * { position:relative; z-index:1; }
body[data-glass-mode="liquid"] .list-picker { background:linear-gradient(135deg, rgba(255,255,255,.2), rgba(88,98,110,.34) 28%, rgba(21,24,29,.62) 72%, rgba(255,255,255,.1)); border:0; -webkit-backdrop-filter:blur(12px) saturate(185%); backdrop-filter:blur(12px) saturate(185%); box-shadow:0 20px 48px rgba(0,0,0,.52), 0 5px 16px rgba(0,0,0,.2); }
body[data-glass-mode="liquid"] .list-picker::before { background:linear-gradient(112deg, transparent 18%, rgba(255,255,255,.28) 34%, rgba(255,255,255,.06) 43%, transparent 58%); transform:translateX(-10%) rotate(-5deg); }
.admin-appearance { display:flex; justify-content:space-between; align-items:center; gap:24px; margin-top:28px; padding:24px 0; border-top:1px solid var(--line); }
.glass-mode-control { display:flex; gap:8px; padding:5px; border:1px solid var(--line); border-radius:999px; background:rgba(255,255,255,.03); }
.glass-mode-control button { border:0; border-radius:999px; padding:9px 13px; background:transparent; color:var(--muted); cursor:pointer; font:inherit; font-size:.75rem; }
.glass-mode-control button.is-active { background:var(--accent); color:#291914; }
.appearance-controls { display:grid; gap:8px; justify-items:end; }
.picker-behavior-control { display:flex; gap:8px; padding:5px; border:1px solid var(--line); border-radius:999px; background:rgba(255,255,255,.03); }
.picker-behavior-control button { border:0; border-radius:999px; padding:9px 13px; background:transparent; color:var(--muted); cursor:pointer; font:inherit; font-size:.75rem; }
.picker-behavior-control button.is-active { background:var(--cream); color:#291914; }
body.picker-scroll-locked { overflow:hidden; }
.list-picker strong { display:block; margin-bottom:10px; font-size:.82rem; }
.list-picker-options { display:grid; gap:6px; max-height:180px; overflow:auto; }
.list-picker-options button, .list-picker form button { border:1px solid var(--line); border-radius:999px; padding:8px 10px; background:transparent; color:var(--ink); text-align:left; cursor:pointer; }
.list-picker-options button:hover, .list-picker form button:hover { border-color:var(--accent); color:var(--accent-soft); }
.list-picker form { display:flex; gap:6px; margin-top:10px; }
.list-picker form input { min-width:0; flex:1; border:1px solid var(--line); border-radius:999px; padding:8px 10px; background:transparent; color:var(--ink); outline:none; }
.list-picker form button { white-space:nowrap; font-size:.72rem; }
.list-picker .create-list-button { flex:0 0 36px; width:36px; height:36px; padding:0; display:grid; place-items:center; border-radius:50%; font-size:1.35rem; line-height:1; text-align:center; }
.install-prompt { margin-top:22px; padding:18px; border:1px solid var(--line); border-radius:18px; background:rgba(255,255,255,.04); }
.install-prompt h2 { font-size:1.35rem; margin:4px 0 8px; }
.install-prompt p:not(.eyebrow) { color:var(--muted); font-size:.8rem; line-height:1.5; margin:0; }
.install-actions { display:flex; align-items:center; gap:14px; margin-top:14px; }
.install-actions .primary-button { padding:10px 14px; font-size:.75rem; }
@keyframes list-picker-in { from { opacity:0; transform:translateY(-5px) scale(.98); } to { opacity:1; transform:none; } }
@media (max-width: 820px) { .app-shell{padding:0 20px;} .topbar{height:68px;} .topnav{margin-left:0; gap:0;} .nav-link{padding:9px 8px; font-size:.78rem;} .hero{grid-template-columns:1fr 240px; gap:25px; padding:50px 0 58px;} .hero-stamp{right:-18px; transform:scale(.82) rotate(9deg);} .poster-grid{grid-template-columns:repeat(2,1fr);} .split-section{grid-template-columns:1fr;} .library-panel, .profile-panel { padding-top:55px; } .social-feed { grid-template-columns:repeat(2, minmax(0, 1fr)); width:100%; } }
@media (max-width: 560px) { .topnav{order:3; position:absolute; top:68px; left:20px; right:20px; justify-content:space-between; border-bottom:1px solid var(--line); } .topbar{margin-bottom:46px;} .top-actions{margin-left:auto;} .hero{grid-template-columns:1fr; padding:38px 0 52px; gap:0;} .hero h1{font-size:clamp(3rem, 15vw, 3.8rem); line-height:.92; max-width:100%;} .hero-text{max-width:34rem; font-size:.98rem;} .hero-actions{flex-direction:column; align-items:flex-start; gap:13px; margin-top:26px;} .hero-actions .text-button{padding:0;} .hero-poster{justify-self:center; width:min(100%, 330px); margin-top:34px;} .poster-art{padding:24px;} .poster-art strong{font-size:2.8rem;} .toolbar{display:block;} .browse-controls{margin-top:24px; justify-content:space-between;} .search-field{flex:1;} .search-field input{width:100%;} .content-section{padding-bottom:58px;} .section-row{align-items:start;} .section-row .text-button{padding-top:5px;} .footer{display:block; line-height:1.8;} .page-toolbar, .profile-heading, .profile-settings, .admin-appearance { display:block; } .appearance-controls { justify-items:start; margin-top:16px; } .glass-mode-control, .picker-behavior-control { width:max-content; max-width:100%; } .library-search { width:100%; margin-bottom:15px; } .profile-avatar { margin-top:22px; } .list-tabs { overflow:auto; } .list-tab { white-space:nowrap; } .poster-grid, .social-feed { display:flex; width:100%; margin-right:0; padding:0 16px 10px 0; gap:16px; overflow-x:auto; scroll-snap-type:x mandatory; scrollbar-width:none; -ms-overflow-style:none; } .poster-grid::-webkit-scrollbar, .social-feed::-webkit-scrollbar { display:none; } .poster-grid .media-card, .social-feed .social-item { flex:0 0 min(78vw, 320px); width:auto; max-width:min(78vw, 320px); scroll-snap-align:start; } .media-art, .social-art { width:100%; max-width:100%; max-height:66vh; aspect-ratio:.7; } .social-copy, .social-copy span { font-size:1vh; } .release-stack { width:100%; min-height:min(68vh, 420px); } .release-card:nth-child(n+2) { display:none; } .release-card:first-child { transform:none; } }
@media (max-width: 560px) {
  .hero h1 br { display:none; }
  .hero h1 #heroLead::after { content:' '; }
  .hero h1 { max-width:330px; font-size:clamp(2.85rem, 13vw, 3.55rem); line-height:.94; letter-spacing:-.085em; margin-bottom:22px; }
  .hero { padding-top:30px; padding-bottom:38px; }
  .hero-copy { max-width:100%; }
  .hero-text { max-width:320px; font-size:.92rem; line-height:1.5; }
  .hero-actions { margin-top:22px; gap:11px; }
  .hero-poster { display:none; }
  .hero-poster-mobile { display:block; position:relative; width:100%; margin-top:34px; }
  .hero-poster-mobile .poster-art { position:relative; inset:auto; width:100%; min-height:0; aspect-ratio:1.16; padding:20px 20px 18px; justify-content:space-between; border-radius:22px; background-position:center; box-shadow:0 20px 44px rgba(0,0,0,.34); }
  .hero-poster-mobile .poster-art:after { content:''; position:absolute; inset:0; background:linear-gradient(180deg, rgba(0,0,0,.08) 16%, rgba(0,0,0,.08) 38%, rgba(0,0,0,.78) 100%); }
  .hero-poster-mobile .poster-kicker { font-size:.64rem; }
  .mobile-pick-copy { position:relative; z-index:1; display:grid; gap:8px; padding-right:88px; }
  .hero-poster-mobile .mobile-pick-copy strong { display:block; max-width:100%; font-size:clamp(2.25rem, 11vw, 3.6rem); line-height:.9; text-shadow:0 2px 14px rgba(0,0,0,.68); }
  .hero-poster-mobile .poster-meta { font-size:.78rem; color:rgba(255,255,255,.82); }
  .hero-poster-mobile .hero-stamp { right:14px; bottom:14px; width:72px; height:72px; font-size:.5rem; transform:rotate(8deg); }
  .hero-poster-mobile .hero-stamp strong { font-size:1.02rem; }
  .social-feed .social-item { align-self:start; }
  .social-feed .social-copy { width:100%; min-height:2.1em; margin:0; padding:9px 2px 0; align-items:flex-end; text-align:right; }
  .social-feed .social-copy span { width:100%; text-align:right; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
}
@media (max-width: 700px) { .create-user-form { grid-template-columns:1fr; } .create-user-form .primary-button { justify-self:start; } .user-row { grid-template-columns:1fr; align-items:start; } }
@media (max-width: 560px) { .auth-panel { padding:28px 22px; } .auth-panel h1 { font-size:3.55rem; } .auth-form input { min-width:0; width:100%; } }