/* ============================================================
   loudfare / MFDomain — shared editorial design system
   "music magazine + control sheet + underground manifesto"
   Dark-led: Ink Black ground, Paper Bone text, Editorial Red accent.
   ============================================================ */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0;}
:root{
  /* loudfare palette — keyed to the 响 logo: deep navy + periwinkle + editorial red. No black, no gold. */
  --ink:#0b1030; --ink2:#0f1442; --ink3:#161c55;
  --bone:#eaeefb; --paper:#cdd6ef; --paper2:#bcc6e8;
  --newsprint:#8e96bf; --muted:#7b83ad; --muted2:rgba(234,238,251,.62);
  --red:#D81F26; --burgundy:#171d54; --gold:#9aa9e6; --blue:#4AA3FF;
  --line:rgba(234,238,251,.18); --line-d:rgba(11,16,48,.16);
  --sans:'Inter',-apple-system,BlinkMacSystemFont,system-ui,Arial,sans-serif;
  --serif:'Playfair Display',Georgia,'Times New Roman',serif;
  --mono:'IBM Plex Mono','SFMono-Regular',Menlo,Consolas,monospace;
}
html{scroll-behavior:smooth;}
body{font-family:var(--sans);line-height:1.6;-webkit-font-smoothing:antialiased;background:var(--ink);color:var(--bone);overflow-x:hidden;}
.wrap{width:min(1320px,calc(100% - 32px));margin:0 auto;}
.narrow{width:min(900px,calc(100% - 32px));margin:0 auto;}
img{display:block;max-width:100%;}
a{color:inherit;text-decoration:none;}
.mono{font-family:var(--mono);letter-spacing:.08em;text-transform:uppercase;}
.topline{font-family:var(--mono);font-size:11px;letter-spacing:.18em;text-transform:uppercase;color:var(--muted2);}
.red{color:var(--red);} .gold{color:var(--gold);}

/* UTILITY BAR */
.util{background:var(--ink);border-bottom:1px solid var(--line);}
.util-in{display:flex;align-items:center;justify-content:space-between;height:30px;font-family:var(--mono);font-size:9.5px;letter-spacing:.18em;text-transform:uppercase;color:var(--muted2);}
.util .dot{color:var(--red);}
@media(max-width:620px){.util-in .hide{display:none;}}

/* NAV / MASTHEAD */
nav{position:sticky;top:0;z-index:50;background:rgba(8,8,8,.92);backdrop-filter:blur(14px);border-bottom:1px solid var(--line);}
.nav-in{display:flex;align-items:center;justify-content:space-between;height:68px;gap:18px;}
.brand-wrap{display:flex;align-items:baseline;gap:10px;}
.brand{font-family:var(--serif);font-weight:900;font-size:30px;letter-spacing:-.02em;color:var(--bone);line-height:1;}
.brand .x{color:var(--red);font-style:italic;}
.brand-by{font-family:var(--mono);font-size:9.5px;letter-spacing:.16em;text-transform:uppercase;color:var(--muted2);}
.brand-by b{color:var(--bone);font-weight:500;}
.navlinks{display:flex;gap:24px;align-items:center;font-family:var(--mono);font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--muted2);}
.navlinks a:hover{color:var(--bone);}
.navlinks a.active{color:var(--bone);border-bottom:2px solid var(--red);padding-bottom:2px;}
.navlinks .cta{border:1px solid var(--bone);color:var(--bone);padding:9px 15px;}
.navlinks .cta:hover{background:var(--red);border-color:var(--red);color:#fff;}
@media(max-width:940px){.navlinks a:not(.cta){display:none;}}

/* BUTTONS — flat, editorial, no novelty */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;height:50px;padding:0 26px;border:1px solid currentColor;background:transparent;color:inherit;font-family:var(--mono);font-size:11px;letter-spacing:.13em;text-transform:uppercase;cursor:pointer;transition:transform .16s ease,background .16s ease,color .16s ease,border-color .16s ease;}
.btn:hover{transform:translateY(-2px);}
.btn.red{background:var(--red);border-color:var(--red);color:#fff;}
.btn.red:hover{background:#ec2b32;}
.btn.bone{background:var(--bone);border-color:var(--bone);color:var(--ink);}
.btn.bone:hover{background:#fff;border-color:#fff;}
.btn.gold{background:var(--gold);border-color:var(--gold);color:var(--ink);}
.btn.sm{height:42px;padding:0 18px;font-size:10px;}
.actions{display:flex;gap:12px;flex-wrap:wrap;}

/* HERO / COVER STORY */
.hero{border-bottom:1px solid var(--line);background:var(--ink);}
.hero-in{padding:64px 0 56px;}
@media(max-width:780px){.hero-in{padding:42px 0 38px;}}
.kicker{display:flex;align-items:center;gap:12px;font-family:var(--mono);font-size:11px;letter-spacing:.2em;text-transform:uppercase;color:var(--red);}
.kicker .rule{flex:0 0 48px;height:1px;background:var(--red);}
.kicker .muted{color:var(--muted2);}
.hero h1{font-family:var(--serif);font-weight:900;letter-spacing:-.02em;line-height:.96;font-size:clamp(54px,9vw,128px);margin:22px 0 0;color:var(--bone);}
.hero h1 .red{color:var(--red);}
.hero .deck{font-family:var(--sans);font-size:clamp(17px,1.9vw,21px);line-height:1.55;color:var(--bone);margin:22px 0 0;max-width:62ch;}
.hero .deck strong{color:var(--bone);}
.hero .hr{height:1px;background:var(--line);margin:30px 0 24px;}
.hero .byline{font-family:var(--mono);font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:var(--muted);margin-top:18px;}

/* TICKER */
.strip{background:var(--ink);color:var(--bone);border-top:1px solid var(--line);border-bottom:1px solid var(--line);overflow:hidden;white-space:nowrap;}
.strip-track{display:inline-block;padding:12px 0;font-family:var(--mono);font-size:11px;letter-spacing:.14em;text-transform:uppercase;animation:scroll 46s linear infinite;}
.strip-track span{margin:0 16px;}
.strip-track .b{color:var(--red);}
@keyframes scroll{from{transform:translateX(0);}to{transform:translateX(-50%);}}

/* SECTIONS / BANDS */
section{padding:84px 0;}
.band-ink{background:var(--ink);color:var(--bone);border-bottom:1px solid var(--line);}
.band-paper{background:var(--paper);color:var(--ink);border-bottom:1px solid var(--line-d);}
.band-burgundy{background:var(--burgundy);color:var(--bone);border-bottom:1px solid var(--line);}
.band-paper .topline{color:var(--muted);}
h2{font-family:var(--serif);font-weight:900;letter-spacing:-.015em;line-height:.98;font-size:clamp(34px,5.2vw,68px);margin:14px 0 18px;}
h3{font-family:var(--serif);font-weight:700;}
.lead{font-size:17px;line-height:1.62;max-width:64ch;}
.band-ink .lead,.band-burgundy .lead{color:var(--muted2);}
.band-paper .lead{color:#2b3360;}

/* OLD STACK vs NEW ROUTE */
.oldnew{display:grid;grid-template-columns:1fr 1fr;gap:0;margin-top:34px;border:1px solid var(--line);}
.band-paper .oldnew{border-color:var(--line-d);}
@media(max-width:780px){.oldnew{grid-template-columns:1fr;}}
.col{padding:30px;border-right:1px solid var(--line);}
.band-paper .col{border-right-color:var(--line-d);}
@media(max-width:780px){.col{border-right:none;border-bottom:1px solid var(--line);}}
.col:last-child{border-right:none;border-bottom:none;}
.col .ct{font-family:var(--mono);font-size:10px;letter-spacing:.16em;text-transform:uppercase;color:var(--muted);margin-bottom:16px;}
.col.newr .ct{color:var(--red);}
.col ul{list-style:none;}
.col li{font-family:var(--mono);font-size:13px;text-transform:uppercase;letter-spacing:.02em;padding:9px 0;border-top:1px solid var(--line);display:flex;gap:10px;}
.band-paper .col li{border-top-color:var(--line-d);}
.col li:first-child{border-top:none;}
.col.old li{color:var(--muted2);}
.band-paper .col.old li{color:var(--muted);}
.col.old li .m{color:var(--newsprint);}
.col.newr li .m{color:var(--red);}

/* THREE ACTION BOXES */
.boxes{display:grid;grid-template-columns:repeat(3,1fr);gap:0;margin-top:34px;border:1px solid var(--line-d);}
@media(max-width:900px){.boxes{grid-template-columns:1fr;}}
.box{padding:32px;border-right:1px solid var(--line-d);display:flex;flex-direction:column;}
.box:last-child{border-right:none;}
@media(max-width:900px){.box{border-right:none;border-bottom:1px solid var(--line-d);}.box:last-child{border-bottom:none;}}
.box.dark{background:var(--ink);color:var(--bone);}
.box .bt{font-family:var(--mono);font-size:10px;letter-spacing:.16em;text-transform:uppercase;color:var(--muted);}
.box.dark .bt{color:var(--red);}
.box h3{font-size:clamp(24px,3vw,34px);letter-spacing:-.015em;line-height:1;margin:8px 0 12px;font-weight:900;}
.box p{font-size:14px;line-height:1.55;color:#2b3360;}
.box.dark p{color:var(--muted2);}
.box .links{list-style:none;margin:18px 0 22px;}
.box .links li{font-family:var(--mono);font-size:11px;text-transform:uppercase;letter-spacing:.04em;padding:7px 0;border-top:1px solid var(--line-d);}
.box.dark .links li{border-top-color:var(--line);}
.box .links a{display:flex;justify-content:space-between;}
.box .links a:hover{color:var(--red);}
.box .btn{align-self:flex-start;margin-top:auto;}

/* LANES (reusable detail panels) */
.duo{display:grid;grid-template-columns:1fr 1fr;gap:0;margin-top:34px;border:1px solid var(--line-d);}
@media(max-width:820px){.duo{grid-template-columns:1fr;}}
.lane{padding:36px;border-right:1px solid var(--line-d);display:flex;flex-direction:column;}
.lane:last-child{border-right:none;}
@media(max-width:820px){.lane{border-right:none;border-bottom:1px solid var(--line-d);}.lane:last-child{border-bottom:none;}}
.lane.dark{background:var(--ink);color:var(--bone);}
.lane .tag{font-family:var(--mono);font-size:10px;letter-spacing:.16em;text-transform:uppercase;color:var(--muted);}
.lane.dark .tag{color:var(--red);}
.lane h3{font-weight:900;letter-spacing:-.015em;font-size:clamp(26px,3.4vw,40px);line-height:1;margin:8px 0 12px;}
.lane .desc{font-size:14.5px;line-height:1.55;color:#2b3360;}
.lane.dark .desc{color:var(--muted2);}
.lane ul{list-style:none;margin:20px 0 26px;}
.lane li{font-family:var(--mono);font-size:13px;text-transform:uppercase;letter-spacing:.03em;padding:11px 0;border-top:1px solid var(--line-d);display:flex;gap:12px;line-height:1.5;}
.lane.dark li{border-top-color:var(--line);}
.lane li .n{color:var(--red);}
.lane .btn{align-self:flex-start;margin-top:auto;}

/* QUOTE BAND */
.quote{text-align:center;}
.quote h2{font-style:italic;font-weight:900;font-size:clamp(34px,5vw,68px);}
.quote .big{font-family:var(--serif);font-weight:700;font-size:clamp(22px,3vw,40px);line-height:1.12;max-width:26ch;margin:0 auto;}
.quote .big .red{color:var(--red);}

/* MODULE GRID (idea-to-release etc.) */
.modules{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;margin-top:30px;background:var(--line);border:1px solid var(--line);}
@media(max-width:900px){.modules{grid-template-columns:repeat(2,1fr);}}
@media(max-width:520px){.modules{grid-template-columns:1fr;}}
.mod{background:var(--ink);padding:22px;min-height:118px;display:flex;flex-direction:column;justify-content:space-between;}
.band-paper .modules{background:var(--line-d);border-color:var(--line-d);}
.band-paper .mod{background:var(--paper);}
.mod .mn{font-family:var(--mono);font-size:10px;letter-spacing:.12em;color:var(--red);}
.mod .mttl{font-family:var(--serif);font-weight:700;font-size:18px;line-height:1.1;margin-top:8px;}

/* PAGE HEAD (sub-pages) */
.page-head{border-bottom:1px solid var(--line);background:var(--ink);}
.page-head .ph-in{padding:56px 0 44px;}
.page-head h1{font-family:var(--serif);font-weight:900;letter-spacing:-.02em;line-height:.98;font-size:clamp(44px,7vw,104px);margin:18px 0 0;color:var(--bone);}
.page-head .deck{font-size:clamp(16px,1.8vw,20px);line-height:1.55;color:var(--muted2);margin:20px 0 0;max-width:60ch;}

/* FORMS / INTAKE */
.intake{max-width:640px;margin-top:30px;}
.band-paper .intake .flabel,.intake .flabel{font-family:var(--mono);font-size:10px;letter-spacing:.12em;text-transform:uppercase;color:var(--muted);margin:16px 0 6px;display:block;}
.intake .row{display:grid;grid-template-columns:1fr 1fr;gap:10px;}
@media(max-width:520px){.intake .row{grid-template-columns:1fr;}}
.intake input,.intake select,.intake textarea{font-family:var(--mono);font-size:13px;letter-spacing:.03em;padding:13px 14px;border:1px solid var(--ink);background:#fff;color:var(--ink);width:100%;}
.band-ink .intake input,.band-ink .intake select,.band-ink .intake textarea{background:var(--ink3);border-color:var(--line);color:var(--bone);}
.intake input:focus,.intake select:focus,.intake textarea:focus{outline:none;border-color:var(--red);}
.intake textarea{min-height:96px;resize:vertical;}
.checks{display:grid;grid-template-columns:repeat(2,1fr);gap:6px 16px;margin-top:8px;}
@media(max-width:520px){.checks{grid-template-columns:1fr;}}
.checks label{font-family:var(--mono);font-size:11px;letter-spacing:.04em;text-transform:uppercase;display:flex;gap:8px;align-items:center;cursor:pointer;color:inherit;}
.checks input{width:auto;}
.intake .btn{margin-top:18px;}
.privacy-note{font-family:var(--mono);font-size:10px;line-height:1.7;letter-spacing:.02em;color:var(--muted);margin-top:14px;max-width:60ch;}
.privacy-note a{color:var(--red);text-decoration:underline;}

/* TRACKS (underground) */
.tracks{list-style:none;margin-top:24px;border-top:1px solid var(--line);}
.tracks li{display:flex;align-items:center;gap:16px;padding:16px 0;border-bottom:1px solid var(--line);}
.tracks li .num{font-family:var(--mono);font-size:11px;color:var(--muted);width:28px;}
.tracks li .title{flex:1;font-family:var(--serif);font-weight:700;font-size:20px;}
.tracks li .play{background:transparent;border:1px solid var(--line);width:36px;height:36px;cursor:pointer;font-family:var(--mono);font-size:11px;color:var(--bone);transition:.16s;}
.tracks li .play:hover{border-color:var(--red);color:var(--red);}
.tracks li.playing .play{background:var(--red);border-color:var(--red);color:#fff;}
.tracks li .time{font-family:var(--mono);font-size:10px;color:var(--muted);min-width:78px;text-align:right;}
audio{display:none;}

/* FOOTER */
footer{background:var(--ink);color:var(--bone);padding:40px 0 56px;border-top:1px solid var(--line);}
.foot-grid{display:grid;grid-template-columns:.9fr 1.1fr 1.4fr 1fr;gap:28px;font-family:var(--mono);font-size:11px;letter-spacing:.08em;text-transform:uppercase;}
@media(max-width:780px){.foot-grid{grid-template-columns:1fr 1fr;}}
.foot-grid .ftitle{font-family:var(--serif);font-weight:900;font-size:20px;text-transform:none;letter-spacing:-.01em;}
.foot-grid .ftitle .x{color:var(--red);font-style:italic;}
.foot-grid small{display:block;color:var(--muted2);line-height:1.7;text-transform:none;letter-spacing:.02em;margin-top:6px;}
.foot-grid .r{text-align:right;}
.foot-grid .r a:hover,.foot-legal a:hover{color:var(--red);}
.foot-legal{border-top:1px solid var(--line);margin-top:26px;padding-top:18px;}
.foot-legal a{font-family:var(--mono);font-size:10px;letter-spacing:.1em;text-transform:uppercase;color:var(--muted2);margin-right:22px;}
.foot-disc{color:rgba(244,239,230,.4);font-family:var(--mono);font-size:9px;line-height:1.7;margin-top:14px;max-width:900px;text-transform:none;letter-spacing:.02em;}

/* COOKIE BANNER */
#cc{display:none;position:fixed;bottom:18px;left:18px;right:18px;max-width:720px;margin:0 auto;background:var(--ink);color:var(--bone);border:1px solid var(--line);border-left:3px solid var(--red);z-index:1000;font-family:var(--mono);font-size:11px;line-height:1.6;letter-spacing:.02em;padding:16px 20px;align-items:center;gap:14px;justify-content:space-between;flex-wrap:wrap;}
#cc a{color:var(--red);text-decoration:underline;}
#cc .ccb{display:flex;gap:10px;}
#cc button{font-family:var(--mono);font-size:10px;letter-spacing:.12em;text-transform:uppercase;padding:9px 16px;cursor:pointer;border:1px solid var(--line);}
#cc .acc{background:var(--red);color:#fff;border-color:var(--red);font-weight:700;}
#cc .dec{background:transparent;color:var(--muted2);}

/* REROUTES / toolkit */
.toolkit{display:grid;grid-template-columns:repeat(2,1fr);gap:1px;margin-top:34px;background:var(--line);border:1px solid var(--line);}
@media(max-width:780px){.toolkit{grid-template-columns:1fr;}}
.band-paper .toolkit{background:var(--line-d);border-color:var(--line-d);}
.tk{background:var(--ink);padding:26px;}
.band-paper .tk{background:var(--paper);}
.tk .tkn{font-family:var(--mono);font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--red);}
.tk h3{font-family:var(--serif);font-weight:700;font-size:22px;margin:8px 0 4px;letter-spacing:-.01em;}
.tk .tkb{font-size:13px;color:var(--muted2);line-height:1.5;margin-bottom:14px;}
.band-paper .tk .tkb{color:#2b3360;}
.tklist{list-style:none;}
.tklist li{border-top:1px solid var(--line);}
.band-paper .tklist li{border-top-color:var(--line-d);}
.tklist a{display:flex;align-items:baseline;justify-content:space-between;gap:10px;padding:11px 0;font-family:var(--mono);font-size:12px;letter-spacing:.02em;text-transform:uppercase;}
.tklist a:hover{color:var(--red);}
.tklist .tname{font-weight:600;}
.tklist .tnote{flex:1;color:var(--muted);font-size:10px;text-transform:none;letter-spacing:0;text-align:right;}
.band-paper .tklist .tnote{color:var(--muted);}
.tklist .ttag{font-size:9px;letter-spacing:.1em;border:1px solid var(--line);padding:2px 6px;color:var(--muted2);}
.tklist .ttag.loudfare{border-color:var(--red);color:var(--red);}
.band-paper .tklist .ttag{border-color:var(--line-d);}

/* loudfare STUDIO — service modules */
.svcs{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;margin-top:34px;background:var(--line);border:1px solid var(--line);}
@media(max-width:900px){.svcs{grid-template-columns:1fr 1fr;}}
@media(max-width:560px){.svcs{grid-template-columns:1fr;}}
.svc{background:var(--ink);padding:28px 26px;min-height:188px;}
.band-paper .svcs{background:var(--line-d);border-color:var(--line-d);}
.band-paper .svc{background:var(--paper);}
.svc .sn{font-family:var(--mono);font-size:11px;letter-spacing:.14em;color:var(--red);}
.svc h3{font-family:var(--serif);font-weight:700;font-size:23px;line-height:1.04;margin:10px 0 9px;letter-spacing:-.01em;}
.svc p{font-size:13.5px;line-height:1.56;color:var(--muted2);}
.band-paper .svc p{color:#2b3360;}
.keylines{margin-top:30px;display:flex;flex-direction:column;gap:6px;}
.keylines p{font-family:var(--serif);font-weight:700;font-size:clamp(18px,2.2vw,26px);line-height:1.15;}
.keylines .red{color:var(--red);}

/* THE STUDIO — signal chain (studio session / control-sheet) */
.studio-lead{display:flex;gap:28px;align-items:flex-end;flex-wrap:wrap;}
.meter{display:flex;align-items:flex-end;gap:5px;height:64px;}
.meter span{width:7px;background:var(--red);opacity:.9;display:block;}
.chain{margin-top:36px;border-top:1px solid var(--line);}
.band-paper .chain{border-top-color:var(--line-d);}
.stage{display:grid;grid-template-columns:130px 1fr 210px;gap:26px;padding:28px 0;border-bottom:1px solid var(--line);align-items:start;}
.band-paper .stage{border-bottom-color:var(--line-d);}
@media(max-width:760px){.stage{grid-template-columns:1fr;gap:10px;}}
.stage .sno{font-family:var(--mono);font-size:12px;letter-spacing:.12em;color:var(--red);text-transform:uppercase;}
.stage .sno b{display:block;font-family:var(--serif);font-weight:900;font-size:44px;color:var(--bone);letter-spacing:-.02em;line-height:.9;margin-bottom:8px;}
.band-paper .stage .sno b{color:var(--ink);}
.stage h3{font-family:var(--serif);font-weight:700;font-size:clamp(22px,2.6vw,32px);line-height:1.04;margin-bottom:9px;}
.stage p{font-size:15px;line-height:1.58;color:var(--muted2);max-width:56ch;}
.band-paper .stage p{color:#2b3360;}
.stage .desk{font-family:var(--mono);font-size:10px;letter-spacing:.1em;text-transform:uppercase;color:var(--muted);border:1px solid var(--line);padding:10px 12px;align-self:start;line-height:1.5;}
.band-paper .stage .desk{border-color:var(--line-d);}
.stage.star{border-bottom:none;}
.stage.star h3{color:var(--red);}

/* CONCIERGE re-skin (editorial red) */
.gws{ --cyan:#D81F26; --ion:#ec2b32; --gold:#C8A96A; }
.gws-fab,.gws-btn.primary{ color:#fff !important; }
.gws-fab .dot{ background:#fff; }