/* Hear & Now — public listening room, editorial redesign. Admin is intentionally untouched. */
.public-site {
  --bg: #09090b;
  --ink: #f4f2ed;
  --muted: #aaa8a9;
  --faint: #77747c;
  --panel: rgba(24, 23, 28, .89);
  --panel-2: rgba(255, 255, 255, .065);
  --line: rgba(255, 255, 255, .14);
  --red: #ff665e;
  --red-deep: #de504e;
  --gold: #e3b77b;
  --purple: #9571c7;
  --body: -apple-system, BlinkMacSystemFont, "Avenir Next", "Segoe UI", system-ui, sans-serif;
  --head: -apple-system, BlinkMacSystemFont, "Avenir Next", "Segoe UI", system-ui, sans-serif;
  --pad: clamp(22px, 5vw, 82px);
  background: radial-gradient(ellipse 70vw 520px at 83% 10%, rgba(104, 38, 55, .23) 0%, transparent 69%),
              radial-gradient(ellipse 55vw 650px at -14% 48%, rgba(64, 51, 79, .13), transparent 74%), var(--bg);
  background-attachment: fixed;
  font-size: 15px;
  letter-spacing: -.012em;
}
:root[data-theme="light"] .public-site {
  --bg: #f4f1eb;
  --ink: #191921;
  --muted: #575662;
  --faint: #777580;
  --panel: rgba(255, 255, 255, .73);
  --panel-2: rgba(20, 20, 30, .05);
  --line: rgba(22, 21, 29, .15);
  --red: #cc514b;
  --red-deep: #a43635;
  --gold: #9b6735;
  background: radial-gradient(ellipse 70vw 520px at 83% 10%, rgba(232, 172, 145, .2) 0%, transparent 69%),var(--bg);
}
.public-site .wrap { max-width: 1600px; margin: 0 auto; padding-bottom: 20px; }
.public-site #stars { display: none; }
.public-site .public-bar { padding: 28px 0; border-bottom: 1px solid var(--line); gap: 34px; flex-wrap: nowrap; }
.public-site .brand { display: flex; align-items: center; gap: 12px; text-decoration: none; white-space: nowrap; }
.public-site .brand-name { font-size: 1.62rem; font-weight: 800; letter-spacing: -.08em; line-height: 1; }
.public-site .brand-amp { font-weight: 350; color: var(--red); margin: 0 1px; }
.public-site .brand-period, .public-site .pink-dot { color: var(--red); }
.public-site .brand-icon { position: relative; width: 31px; height: 31px; border: 2px solid var(--red); border-radius: 50%; display: inline-grid; place-items: center; transform: rotate(-23deg); }
.public-site .brand-icon:before { content: ''; width: 18px; height: 18px; border: 1.5px solid var(--red); border-radius: 50%; }
.public-site .brand-icon span { position: absolute; width: 8px; height: 8px; border-radius: 50%; background: var(--red); }
.public-site .top-links { margin: 0 auto; display: flex; gap: clamp(16px, 2.8vw, 43px); }
.public-site .top-links a { font-size: .81rem; letter-spacing: .04em; color: var(--muted); text-decoration: none; transition: color .2s; }
.public-site .top-links a:hover { color: var(--ink); }
.public-site .theme-btn { font-family: var(--body); text-transform: none; font-size: .77rem; letter-spacing: 0; border: 1px solid var(--line); padding: 11px 16px; border-radius: 999px; }
.public-site .btn { font-family: var(--body); font-size: .86rem; font-weight: 650; letter-spacing: .01em; border-radius: 999px; box-shadow: none; }
.public-site .btn.primary { background: var(--red); border-color: var(--red); color: #0e0a0c; }
.public-site .btn.primary:hover { background: #ff8a80; }
.public-site .intro { min-height: 310px; padding: 62px 0 56px; display: flex; justify-content: space-between; gap: 35px; position: relative; overflow: hidden; }
.public-site .intro > div:first-child { z-index: 1; }
.public-site .eyebrow { font-size: .69rem; letter-spacing: .19em; font-weight: 700; color: var(--red); text-transform: uppercase; display: flex; align-items: center; gap: 12px; }
.public-site .eyebrow-line { height: 1px; width: 22px; background: var(--red); }
.public-site .intro-title { font-family: var(--head); font-size: clamp(2.45rem, 5.3vw, 5.6rem); max-width: 960px; font-weight: 750; line-height: 1.08; letter-spacing: -.067em; margin: 25px 0 18px; }
.public-site em { font-family: Georgia, 'Iowan Old Style', serif; font-style: italic; font-weight: normal; letter-spacing: -.055em; }
.public-site .intro-title em { color: var(--gold); }
.public-site .intro-copy { color: var(--muted); font-size: 1rem; max-width: 620px; line-height: 1.75; }
.public-site .intro-mark { align-self: center; flex: 0 0 255px; height: 255px; position: relative; opacity: .45; margin-right: 2%; }
.public-site .orbit { position: absolute; border: 1px solid rgba(230, 171, 135, .29); border-radius: 50%; inset: 0; transform: rotate(-30deg) scaleX(.65); }
.public-site .orbit-two { transform: rotate(30deg) scaleX(.65); }
.public-site .orbit-three { transform: rotate(90deg) scaleX(.65); }
.public-site .orbit-core { width: 94px; height: 94px; border-radius: 50%; left: 50%; top: 50%; transform: translate(-50%, -50%); background: radial-gradient(circle, #d5886e 0 5%, #662e34 37%, transparent 68%); box-shadow: 0 0 60px rgba(252, 95, 84, .17); }
.public-site .section-heading { display: flex; justify-content: space-between; align-items: center; gap: 16px; padding: 13px 0; font-weight: 700; font-size: .7rem; letter-spacing: .18em; border-top: 1px solid var(--line); }
.public-site .section-no { color: var(--red); }
.public-site .section-context { color: var(--faint); font-weight: 500; }
.public-site .hero { margin-top: 12px; padding: clamp(24px, 4vw, 55px); border-radius: 18px; border: 1px solid rgba(218, 181, 162, .19); background: linear-gradient(125deg, rgba(72, 38, 44, .33), rgba(18, 18, 22, .93) 52%, rgba(20, 18, 25, .98)), var(--panel); position: relative; overflow: hidden; grid-template-columns: minmax(280px, min(43%, 470px)) minmax(0,1fr); gap: clamp(30px, 7vw, 100px); min-height: 424px; box-shadow: 0 26px 55px rgba(0, 0, 0, .18); }
:root[data-theme="light"] .public-site .hero { background: linear-gradient(125deg, #f7eae2, #f5f3ef 62%); }
.public-site .hero:after { content: ''; position: absolute; bottom: -140px; right: -180px; width: 440px; height: 440px; pointer-events: none; border: 1px solid rgba(245, 179, 131, .10); border-radius: 50%; box-shadow: 0 0 0 55px rgba(255,255,255,.012), 0 0 0 110px rgba(255,255,255,.01); }
.public-site .hero .art { aspect-ratio: 1.3; width: 100%; max-height: 370px; }
.public-site .cover { border-radius: 12px; box-shadow: 0 16px 45px rgba(0,0,0,.5), 0 0 0 1px rgba(255,255,255,.1); }
.public-site .hero .disc { width: 77%; margin-top: -38.5%; left: 16%; }
.public-site .hero.live .disc { left: 38%; }
.public-site .hero.recent .disc { left: 31%; }
.public-site .hero.empty .disc { left: 32%; opacity: .8; }
.public-site .vinyl { background: repeating-radial-gradient(circle, #151519 0 2px, #242429 3px 4px, #0c0c0e 4px 7px); }
.public-site .quiet-cover { background: radial-gradient(ellipse at 15% 12%, #793640, transparent 58%), linear-gradient(160deg, #41303b, #1f1b25 47%, #17161c); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 13px; width: auto; }
.public-site .quiet-cover:before { content: ''; position:absolute; border:1px solid rgba(255,255,255,.13); inset:14px; pointer-events:none; }
.public-site .quiet-cover-title { color: #f7f3eb; font-size: clamp(2.3rem, 6.2vw, 5.4rem); font-weight: 750; line-height: 1.02; letter-spacing: -.09em; text-align: center; display:flex; flex-direction:column; }
.public-site .quiet-cover-title span { font-family: Georgia,serif; color: #f3a198; font-style: italic; font-weight: 400; font-size: .58em; }
.public-site .quiet-cover-sub { font-size: .54rem; font-weight:700; color:#d6c8c9; letter-spacing:.23em; }
.public-site .hero .info { position: relative; z-index:1; gap: 15px; align-content: center; }
.public-site .hero .status { font-size: .67rem; letter-spacing: .18em; color: var(--red); font-weight: 800; text-transform: uppercase; }
.public-site .status .dot { background: var(--red); width: 6px; height: 6px; }
.public-site .hero h1 { font-family: var(--head); font-size: clamp(2.55rem, 5.4vw, 5.5rem); line-height:1.02; font-weight: 760; letter-spacing:-.072em; max-width: 12ch; overflow-wrap: anywhere; }
.public-site .hero .creator { font-size: 1.25rem; font-weight: 500; }
.public-site .hero .detail { font-size: .94rem; }
.public-site .hero .muted { font-size: 1.04rem; line-height: 1.7; max-width: 450px; }
.public-site .hero .modenote { color: var(--faint); font-size: .8rem; }
.public-site .hero .review { color: var(--muted); }
.public-site .hero .chip { font-size: .77rem; }
.public-site .hero .rating-big b { font-size: 2.9rem; font-weight: 700; }
.public-site .hero .rating-big .bars i { width: 7px; height: 18px; }
.public-site .archive-intro { display: flex; justify-content: space-between; gap: 48px; align-items: end; padding: 65px 0 25px; }
.public-site .archive-intro .eyebrow { margin-bottom: 12px; }
.public-site .archive-intro h2 { font-family: var(--head); font-size: clamp(1.9rem, 3.3vw, 3rem); font-weight: 740; letter-spacing: -.055em; line-height: 1.14; }
.public-site .archive-intro h2 em { color:var(--gold); }
.public-site .archive-intro > p { max-width: 385px; font-size: .93rem; line-height: 1.7; color: var(--muted); }
.public-site .cols { grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr); gap: 19px; }
.public-site .stack { gap: 19px; }
.public-site .panel { padding: clamp(22px, 2.9vw, 32px); border-radius: 15px; background:var(--panel); box-shadow: none; backdrop-filter: blur(9px); }
.public-site .panel-heading { display: flex; align-items: start; justify-content: space-between; gap: 15px; margin-bottom: 23px; }
.public-site .mini-eyebrow { color: var(--red); font-size: .66rem; font-weight: 750; letter-spacing: .16em; }
.public-site .panel > h2, .public-site .panel-heading h2 { margin: 8px 0 0; font-family: var(--head); font-size: clamp(1.8rem, 2.4vw, 2.45rem); line-height: 1.1; font-weight: 760; letter-spacing: -.052em; }
.public-site .panel-index { color: var(--faint); font-size: .8rem; }
.public-site .filters { gap: 7px; margin-bottom: 22px; }
.public-site .pill { font-size: .77rem; font-weight: 600; border: 1px solid var(--line); padding: 8px 13px; transition: .2s; }
.public-site .pill[aria-pressed="true"] { background: var(--ink); color: var(--bg); }
.public-site .pill:hover { border-color: var(--red); }
.public-site .item { border-bottom: 1px solid var(--line); border-radius: 0; padding: 15px 1px; gap: 15px; }
.public-site .item:hover { border-color: var(--line); background: transparent; }
.public-site .item .t { font-weight: 730; }
.public-site .item .r { min-width: 91px; }
.public-site .item .thumb { width: 62px; height: 62px; }
.public-site .pick { grid-template-columns: 76px minmax(0,1fr); background:transparent; border:0; padding: 11px 0; border-bottom:1px solid var(--line); border-radius:0; }
.public-site .pick .thumb { width: 74px; height: 74px; }
.public-site .pick .t { font-weight:730; }
.public-site .chip { font-weight: 700; font-size: .67rem; box-shadow: none; padding: 5px 10px; }
.public-site .rating b { font-family: var(--body); font-size: 1.12rem; font-weight: 800; color:var(--gold); }
.public-site .rating small { font-size:.7rem; }
.public-site .bars { gap: 2px; }
.public-site .bars i { width: 3px; height: 11px; }
.public-site .recommend-mark { display: flex; align-items: center; justify-content: center; margin: 2px 0 20px; width: 59px; height: 59px; font-size: 2.6rem; font-weight: 300; color:var(--red); border:1px solid rgba(255,102,94,.35); border-radius: 50%; background: rgba(255,102,94,.06); }
.public-site .suggestion-panel p { max-width: 340px; line-height: 1.75; margin-top:10px; }
.public-site .suggestion-panel { background: linear-gradient(130deg, rgba(106, 55, 63, .22), transparent 75%),var(--panel); }
.public-site .empty, .public-site .loading-note { padding: 24px 2px; color: var(--muted); line-height: 1.7; }
.public-site .connection-note { display:grid; align-items:start; justify-items:start; gap: 10px; padding: 18px 0 24px; }
.public-site .connection-note strong { font-size:.95rem; letter-spacing:-.01em; }
.public-site .connection-note p { color:var(--muted); line-height:1.6; font-size:.85rem; }
.public-site .connection-symbol { color:var(--red); display:grid;place-items:center; width:38px;height:38px;border:1px solid var(--line);border-radius:50%;font-size:1.2rem; }
.public-site .foot { border-top: 1px solid var(--line); margin-top: 65px; padding: 30px 0 45px; display: flex; flex-direction: column; gap: 24px; }
.public-site .footer-wordmark { font-size: 2.5rem; font-weight: 790; letter-spacing: -.08em; line-height:1; }
.public-site .footer-wordmark > span:first-child { color:var(--red);font-family:Georgia,serif;font-style:italic;font-weight:400; }
.public-site .footer-row { display: flex; justify-content: space-between; flex-wrap:wrap; gap: 15px; font-size:.66rem; letter-spacing:.09em; color:var(--faint); }
.public-site .tabs { background: var(--bg); }
.public-site .tabs .btn { padding: 12px 5px; }
.public-site .tabs .btn[aria-selected="true"] { background: var(--red); color: #0d090a; }
@media(max-width:1080px) { .public-site .intro-mark{display:none}.public-site .hero { gap:25px; padding:28px; grid-template-columns: minmax(225px,40%) minmax(0,1fr); }.public-site .quiet-cover-title { font-size:clamp(2rem,6vw,4rem); } }
@media(max-width:899px) { .public-site .intro{min-height:0;padding:48px 0 36px}.public-site .hero { grid-template-columns:1fr; padding:30px; }.public-site .hero .art { width:min(100%,400px); margin:0 auto; }.public-site .hero .info { text-align:left; }.public-site .hero h1 { max-width:17ch; }.public-site .archive-intro { padding:50px 0 25px; display:block; }.public-site .archive-intro > p{margin-top:14px}.public-site .cols { grid-template-columns:1fr; }.public-site .tabs { display:flex; }.public-site [data-pane]:not(.on) { display:none; }.public-site .top-links { display:none; }.public-site .public-bar{justify-content:space-between}.public-site .intro-title { font-size:clamp(2.65rem,8vw,4.8rem); } }
@media(max-width:540px) { .public-site .public-bar { padding:19px 0; }.public-site .brand-name { font-size:1.45rem; }.public-site .intro { padding:40px 0 35px; }.public-site .intro-title { font-size:clamp(2.65rem,11vw,4rem); margin:18px 0; }.public-site .intro-copy { font-size:.89rem; }.public-site .section-context { display:none; }.public-site .hero { padding:20px; min-height:0; }.public-site .hero .art { width:min(100%,330px); }.public-site .quiet-cover-title { font-size:clamp(2.3rem,13vw,4.1rem); }.public-site .hero h1 { font-size:clamp(2.55rem,10vw,3.7rem); }.public-site .hero .muted{font-size:.94rem}.public-site .archive-intro h2 { font-size:2.25rem; }.public-site .panel{padding:19px}.public-site .panel-heading h2{font-size:1.9rem}.public-site .item { grid-template-columns:52px minmax(0,1fr); }.public-site .item .thumb {width:52px;height:52px}.public-site .item .r { grid-column:2;display:flex; flex-wrap:wrap; align-items:center; justify-content:flex-start; }.public-site .item .when { margin-left:auto; }.public-site .foot{margin-top:35px}.public-site .footer-row{flex-direction:column}.public-site .theme-btn{padding:9px 11px;font-size:.71rem} }
@media(prefers-reduced-motion:reduce) { .public-site .vinyl,.public-site .meter i,.public-site .status .dot { animation:none !important; } }