/* Shared material palette: directional light over matte, readable foundations. */
:root{
  --metal-gold:linear-gradient(118deg,#8b6431 0%,#c69c52 19%,#f6e5b8 35%,#b98d45 49%,#e3c783 69%,#fff0ca 81%,#ac7c37 100%);
  --metal-silver:linear-gradient(118deg,#85878a 0%,#c5c8ca 18%,#fffdf4 35%,#a6a9ad 49%,#e0e1df 68%,#e7d4a4 81%,#a6a4a0 100%);
  --metal-champagne:linear-gradient(115deg,#c1a269,#f5e6c0 34%,#cdb076 60%,#f2e4c8 83%,#b9995f);
  --metal-edge:linear-gradient(115deg,#705531,#e1c68b 32%,#bec1c2 54%,#776448 77%,#c0a577);
  --metal-surface:linear-gradient(135deg,#262624,#131414 47%,#1b1c1b);
  --metal-bronze:#8b6431;--metal-highlight:#f5e6c0;--metal-neutral:#c4c5c2;--metal-line:#73654d;
  --metal-depth:0 18px 42px #0005,inset 0 1px #f8ead018,inset 0 -1px #0009;
  --metal-gold-glow:0 0 18px #c69c5228;--metal-silver-glow:0 0 18px #d0d4d018;
}
body{background:radial-gradient(ellipse at 80% 5%,#b98c320c,transparent 43%),#090a0a}
header{border-bottom-color:#9f875873;box-shadow:0 1px #fff3c008}.brand{color:#ecebe7;text-shadow:0 1px 1px #000}.brand span{color:#d4bd8b}
nav a{transition:color .25s,text-shadow .25s}nav a:hover{color:var(--metal-highlight);text-shadow:var(--metal-gold-glow)}
.section-label{border-image:var(--metal-edge) 1}.section-label h2,.micro,.edition{color:#cfba8c}
.action-card{background:var(--metal-surface);box-shadow:var(--metal-depth);--edge-a:#e2c68d;--edge-b:#c6cacc}
.action-card::before{background-image:var(--metal-edge)}.action-card:hover{box-shadow:inset 0 0 0 1px #d8be8477,0 16px 32px #0005;background:linear-gradient(130deg,#302c23,#141616 58%,#202223)}
.card-bottom h3,.collection strong,.radio-preview-intro h2{color:#ece9df;text-shadow:0 1px #050505}
.card-top>span:first-child,.arrow,.collection-icon,.collection-expand{color:#d5bd87}.card-bottom p{color:#bbbcb8}
.collection,.signup-card{background:linear-gradient(135deg,#22221e66,#0c0d0e);box-shadow:var(--metal-depth);border-color:#75664a88}
.collection summary:hover{background:#d1b47708}.pieces article{background:var(--metal-surface);border:1px solid #74664c55;box-shadow:var(--metal-depth)}
.back,.signup-page button:not(:disabled){background:var(--metal-champagne);border:1px solid #d5bd87;color:#14130f;box-shadow:0 5px 14px #0005,inset 0 1px #fff5dc88}
.back:hover,.signup-page button:hover:not(:disabled){filter:brightness(1.08)}.signup-page input:not([type=checkbox]){border-color:#766b52}
.section-tag,.closing em{color:#d4bd88}.detail h1,.document h1,.privacy-copy h1{color:#e3e4df}.closing-note,.detail>p:not(.micro){color:#bfc0bb}
.medium-photography.revealed::after{background:radial-gradient(ellipse at 55% 35%,#fff0c5 0%,#e2be72 46%,#9d6f2d 100%)}
.receiver-maker{font-size:10px;letter-spacing:.12em;line-height:1.5;max-width:69%;color:#ddc99d}.receiver-maker b{font-size:9px;letter-spacing:.14em;white-space:nowrap}.display-rail .monitor-label{max-width:65%;line-height:1.6}
/* A genuine layout grid, with one alignment axis for all hero copy. */
.intro{padding-bottom:54px}.intro::after{display:none}.intro-stage{display:grid;grid-template-columns:minmax(0,1.12fr) minmax(0,.88fr);align-items:center;gap:clamp(24px,4vw,64px);padding:16px 0 10px}
.hero-copy,.hero-art{min-width:0}.hero-vapor{font-size:clamp(43px,5.1vw,84px);line-height:1.08;letter-spacing:-.055em}
.hero-copy .intro-bottom{margin:30px 0 0;grid-template-columns:minmax(0,1fr) 44px;gap:23px 20px;align-items:center}
.hero-copy .intro-statements .vapor-description{font-size:clamp(13px,1.2vw,18px);line-height:1.85;color:var(--metal-neutral)}
.hero-copy .independent-statement{grid-column:1/-1;text-align:left;margin:3px 0 0;padding:9px 0;font:400 clamp(20px,2.15vw,32px)/1.35 Georgia,serif;letter-spacing:.035em;background-image:var(--metal-champagne);background-size:230% 100%}
.hero-copy .down{width:42px;height:42px;font-size:22px;border-color:#9a8153;box-shadow:inset 0 1px #fff0c015}
/* Fallback text color precedes clipped metallic gradients. */
.hero-vapor .vapor-word{color:#e2e4e2}.hero-vapor em .vapor-word{color:#d4b47a}
@supports ((background-clip:text) or (-webkit-background-clip:text)){
  .brand,.detail h1,.privacy-copy h1,.document h1,.card-bottom h3,.collection strong{background-image:var(--metal-silver);background-clip:text;-webkit-background-clip:text;-webkit-text-fill-color:transparent;color:transparent;text-shadow:none;filter:drop-shadow(0 1px 1px #0008)}
  .brand span{-webkit-text-fill-color:#d4bd8b}
  .hero-vapor .vapor-word{background-image:var(--metal-silver);background-size:240% 100%;background-clip:text;-webkit-background-clip:text;-webkit-text-fill-color:transparent;color:transparent;filter:drop-shadow(0 1px 0 #fff5dc12) drop-shadow(0 2px 1px #0008)}
  .hero-vapor em .vapor-word{background-image:var(--metal-gold)}
}
.hero-vapor.vapor-revealed .vapor-word{animation:metal-condense 2.5s cubic-bezier(.16,.65,.28,1) calc(var(--word,0)*45ms) both,vapor-gold-edge 1.7s ease-out calc(1.8s + var(--word,0)*45ms) both,metal-reflection 24s ease-in-out 5s infinite}
@keyframes metal-reflection{0%,87%{background-position:100% 0}94%,100%{background-position:0% 0}}
/* Original artwork is the stable face; only masked outer-fur copies move. */
.hero-art{display:grid;place-items:center;position:relative}.wolf-scene{position:relative;width:100%;max-width:560px;aspect-ratio:1222/1287;isolation:isolate;margin:0}
.wolf-scene::before{content:"";position:absolute;inset:12% 2% 6%;z-index:-1;border-radius:50%;background:radial-gradient(ellipse,#c79c4612,transparent 68%);pointer-events:none}
.wolf-float,.wolf-breathe{position:relative;width:100%;height:100%;transform-origin:50% 58%}.wolf-float{animation:wolf-float 13s ease-in-out infinite}.wolf-breathe{animation:wolf-breathe 8.5s ease-in-out infinite}
.wolf-original,.wolf-fur{display:block;width:100%;height:auto;aspect-ratio:1222/1287;object-fit:contain}.wolf-original{filter:drop-shadow(0 14px 28px #0008)}
.wolf-fur{display:none;position:absolute;inset:0;pointer-events:none;opacity:.3;mask-size:100% 100%;mask-repeat:no-repeat;-webkit-mask-size:100% 100%;-webkit-mask-repeat:no-repeat}
@supports ((mask-image:linear-gradient(white,transparent)) or (-webkit-mask-image:linear-gradient(white,transparent))){.wolf-fur{display:block}}
.wolf-fur-left{mask-image:url('/assets/brand/wolf-fur-left-mask.svg');-webkit-mask-image:url('/assets/brand/wolf-fur-left-mask.svg');animation:fur-left 10s ease-in-out infinite}
.wolf-fur-right{mask-image:url('/assets/brand/wolf-fur-right-mask.svg');-webkit-mask-image:url('/assets/brand/wolf-fur-right-mask.svg');animation:fur-right 11.5s ease-in-out -3s infinite}
.wolf-eyes{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;overflow:visible}.eye-embers{opacity:.2;animation:ember-breathe 7.7s ease-in-out -2s infinite}
@keyframes wolf-breathe{0%,100%{transform:scale(1)}50%{transform:scale(1.008)}}
@keyframes wolf-float{0%,100%{transform:translateY(0)}50%{transform:translateY(-3px)}}
@keyframes fur-left{0%,100%{transform:translate(0,0);opacity:.18}50%{transform:translate(-.65px,.45px);opacity:.38}}
@keyframes fur-right{0%,100%{transform:translate(0,0);opacity:.2}50%{transform:translate(.65px,-.4px);opacity:.36}}
@keyframes ember-breathe{0%,100%{opacity:.14}45%{opacity:.42}70%{opacity:.23}}
.wolf-scene[data-motion=paused] *,.page-motion-paused *,.page-motion-paused *::before,.page-motion-paused *::after{animation-play-state:paused!important}
@media(max-width:1100px) and (min-width:761px){.intro-stage{grid-template-columns:1.15fr .85fr;gap:25px}.hero-vapor{font-size:clamp(40px,4.8vw,56px)}.hero-copy .independent-statement{font-size:22px}}
@media(max-width:760px){.intro-stage{grid-template-columns:minmax(0,1fr);gap:26px;padding-top:6px}.hero-vapor{font-size:clamp(35px,8.8vw,62px);line-height:1.08}.hero-copy .intro-bottom{margin-top:25px}.hero-copy .independent-statement{font-size:clamp(21px,4.7vw,29px)}.hero-art{padding:0 6%}.wolf-scene{max-width:380px;width:88%}.intro{padding-bottom:37px}.hero-copy .intro-statements .vapor-description{max-width:560px;font-size:14px}.wolf-fur{display:none}.receiver-maker{font-size:8px;max-width:66%;letter-spacing:.08em}.receiver-maker b{font-size:7px}.display-rail .monitor-label{font-size:7px}}
@media(max-width:620px){header{flex-wrap:wrap;gap:8px 18px;padding:22px 0;min-height:105px}header nav{width:100%;margin:0;justify-content:space-between;gap:12px;font-size:10px}header nav a{padding:7px 0}.signup-page header{gap:16px}.signup-page .brand{margin-right:auto}.signup-page .home-link,.signup-page .listen-nav{font-size:11px;white-space:nowrap}}
@media(prefers-reduced-motion:reduce){.wolf-float,.wolf-breathe,.wolf-fur,.eye-embers,.hero-vapor.vapor-revealed .vapor-word{animation:none!important;transform:none;filter:none}.wolf-fur{display:none}.eye-embers{opacity:.15}.hero-vapor.vapor-waiting .vapor-word{opacity:1}.hero-vapor .vapor-word{filter:none}.medium-photography.revealed::after{animation:none!important;opacity:0}nav a{transition:none}}

@keyframes metal-condense{0%{opacity:0;filter:blur(16px);transform:translate(22px,-14px) skewX(-9deg) scale(1.08)}35%{opacity:.35;filter:blur(8px);transform:translate(-6px,5px) skewX(3deg)}70%{opacity:.86;filter:blur(2px);transform:translate(2px,-1px)}100%{opacity:1;filter:drop-shadow(0 1px 0 #f7eac71c) drop-shadow(0 2px 1px #0009);transform:none}}

/* The same material system on both full and compact broadcast receivers. */
.receiver{
  --radio-panel:#0c0d0e;--radio-grid:#d6c8a126;--radio-axis:#a7aaa9;
  --radio-gold:#e6c17e;--radio-silver:#bec2c4;--radio-track:#333437;--radio-glow:#e3b95b;--radio-highlight:#fff1c6;--radio-bronze:#9e7032;
  background:repeating-linear-gradient(0deg,#fff8e903 0,#fff8e903 1px,transparent 1px,transparent 4px),linear-gradient(125deg,#404144,#181a1c 30%,#25272a 70%,#555453);
  border-color:#a99b7b;box-shadow:0 24px 60px #0008,inset 0 1px 1px #fff5da66,inset 0 -3px 5px #000b,0 0 28px #c3a2640b;
}
.receiver::before{border-color:#d6c19a24;box-shadow:inset 0 1px #ffffff10,inset 0 -1px #0008;background:transparent}
.receiver::after{content:"";position:absolute;inset:1px;border-radius:inherit;pointer-events:none;z-index:3;background:linear-gradient(115deg,transparent 38%,#ffe9b50a 46%,#ffffff10 49%,#ffe1a20a 52%,transparent 61%);background-size:260% 100%;opacity:.7;animation:receiver-metal-sheen 25s ease-in-out infinite}
.receiver-maker{color:#e1cd9e;text-shadow:0 1px #000}.receiver-maker b,.receiver-model{color:#c0c4c0}
.receiver-screw{border-color:#8e8775;background:linear-gradient(45deg,#1c1d1f 43%,#b1a68c 49%,#222527 55%)}
.receiver-display{background:linear-gradient(135deg,#181a1c,#090b0d 60%,#151619);border-color:#77705c;box-shadow:inset 0 3px 17px #000c,inset 0 1px #f6e7bf17,0 1px #f4e3b54a,0 0 22px #d8b2640a}
.receiver-display::before{background:radial-gradient(ellipse at 45% 30%,#e4bb6120,transparent 70%);opacity:.13}
.receiver[data-state=playing] .receiver-display{box-shadow:inset 0 3px 17px #000b,inset 0 1px #f6e7bf24,0 1px #f4e3b54a,0 0 25px #dfb76420}
.receiver[data-state=playing] .receiver-display::before{animation:receiver-ember-light 8.5s ease-in-out infinite}
.station-call,.display-rail,.signal-caption{color:#aeb3b5}.radio-status.is-live{color:#f0d39b}.radio-status.is-live::before{background:#f2ce83;border-color:#f2ce83;box-shadow:0 0 9px #e5b95599}
.station-frequency strong{color:#e6c17e;text-shadow:none}.station-frequency>span{color:#c4c6c8}
@supports ((background-clip:text) or (-webkit-background-clip:text)){.station-frequency strong{background-image:var(--metal-gold);background-clip:text;-webkit-background-clip:text;-webkit-text-fill-color:transparent;filter:drop-shadow(0 0 8px #dab46533)}}
.signal-panel{background:var(--radio-panel);border-color:#b4a27738;box-shadow:inset 0 1px 8px #0008,0 1px #f8e8bc0c}
.radio-presets button{background:linear-gradient(165deg,#55575a 0%,#333639 12%,#25282b 44%,#171b1e 100%);border-color:#888978;border-bottom-color:#0b100c;color:#d4d8dc;box-shadow:0 5px 9px #0007,inset 0 1px #f7eedb40,inset 1px 0 #f9edcc12}
.radio-presets button:hover{border-color:#d8c398;box-shadow:0 6px 14px #0007,inset 0 1px #fff2cc66}
.radio-presets button[aria-pressed=true]{background:linear-gradient(150deg,#8e794d 0%,#514831 18%,#302d21 48%,#24231f);border-color:#e1c58d;border-bottom-color:#806532;box-shadow:0 4px 11px #0008,inset 0 1px #fff1c273,0 0 17px #dbb35d20}
.radio-presets button[aria-pressed=true] span,.radio-presets button[aria-pressed=true] small{color:#ffe5ab}.radio-presets button[aria-pressed=true] i{background:#f4ce7e;box-shadow:0 0 9px #efc46b99}
.transport-button{background:var(--metal-gold);border-color:#ead199;border-bottom-color:#80602b;box-shadow:0 5px 10px #0008,inset 0 1px #fff6dcbb,inset 0 -1px #73552855;color:#141411}
.transport-button:hover{filter:brightness(1.08);box-shadow:0 6px 14px #0008,inset 0 1px #fff6dccc,0 0 16px #dbb35d22}
.mute-button,.monitor-modes button{background:linear-gradient(150deg,#363a3d,#171b1e 70%);border-color:#82877677;color:#c8cdd0;box-shadow:inset 0 1px #ffffef1a,0 2px 4px #0004}
.monitor-modes button[aria-pressed=true],.mute-button[aria-pressed=true]{background:linear-gradient(135deg,#5d5137,#27241e);border-color:#d1b77e;color:#f2d9a2;box-shadow:inset 0 1px #fff0c040,0 0 10px #e0b25916}
.volume-console label,.receiver-message{color:#b7bdbf}.volume-console input{accent-color:#e0c489}.receiver-bottom{border-top-color:#d3c59f25;color:#abb0b3}
.radio-recovery button,.radio-recovery a,.resume-monitor,.signal-mode-toggle{background:var(--metal-surface);border-color:#a792646e;color:#dfca9b;box-shadow:inset 0 1px #f2e8c817}
.radio-full-link,.standalone-player{color:#e2cfa4}.receiver :is(button,a,input):focus-visible{outline-color:#f9e7b8}
[data-radio-receiver][data-material-visible=false] .receiver::after,[data-radio-receiver][data-material-visible=false] .receiver-display::before{animation-play-state:paused!important}
@keyframes receiver-metal-sheen{0%,88%{background-position:140% 0}96%,100%{background-position:-60% 0}}
@keyframes receiver-ember-light{0%,100%{opacity:.1}50%{opacity:.3}}
@media(prefers-reduced-motion:reduce){.receiver::after,.receiver .receiver-display::before{animation:none!important}.receiver::after{opacity:0}.receiver[data-state=playing] .receiver-display::before{opacity:.16}}

/* Center the stacked mobile composition; the desktop split stays left aligned. */
@media(max-width:760px){
  .home-shell .intro>.edition{justify-content:center;text-align:center;flex-wrap:wrap;gap:8px 24px}
  .hero-copy{text-align:center}
  .hero-copy .intro-bottom{grid-template-columns:minmax(0,1fr);justify-items:center}
  .hero-copy .intro-statements{width:100%}
  .hero-copy .intro-statements .vapor-description{max-width:32em;margin-inline:auto}
  .hero-copy .independent-statement{text-align:center;grid-row:2}
  .hero-copy .down{grid-row:3;justify-self:center}
}