.progress{ position:fixed; top:0; left:0; height:3px; background:var(--gold); width:0; z-index:60; transition:width .1s linear; }

  /* HERO (OGP-friendly) */
  .a-hero .frame{ max-width:var(--maxw); margin:0 auto; padding:28px 40px 0; }
  .a-hero .crumb{ margin-bottom:28px; }
  .a-hero .meta-top{ display:flex; gap:12px; align-items:center; margin-bottom:20px; flex-wrap:wrap; }
  .a-hero .cat{ font-family:var(--mono); font-size:11px; letter-spacing:.16em; text-transform:uppercase; color:#fff; background:var(--gold); padding:7px 14px; border-radius:100px; }
  .a-hero .ty{ font-family:var(--mono); font-size:11px; letter-spacing:.14em; text-transform:uppercase; color:#fff; background:var(--ink); padding:7px 13px; border-radius:100px; }
  .a-hero .tags{ font-family:var(--mono); font-size:11px; letter-spacing:.08em; color:var(--ink-3); }
  .a-hero h1{ font-family:var(--disp); font-weight:700; font-size:clamp(28px,6.2vw,94px); line-height:1.14; letter-spacing:-.02em; margin:0 0 28px; max-width:none; }
  .a-hero .deck{ font-size:17px; line-height:2; color:var(--ink-2); max-width:58ch; margin:0 0 30px; }
  .a-hero .byline{ display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:18px; padding:20px 0; border-top:1px solid var(--line); border-bottom:1px solid var(--line); }
  .a-hero .who{ display:flex; align-items:center; gap:13px; }
  .a-hero .who .av{ width:42px; height:42px; border-radius:50%; overflow:hidden; border:1px solid var(--line); }
  .a-hero .who .av .ph{ aspect-ratio:1; border:0; border-radius:0; }
  .a-hero .who .nm{ font-weight:700; font-size:13.5px; }
  .a-hero .who .rl{ font-family:var(--mono); font-size:11px; color:var(--ink-3); }
  .a-hero .info{ font-family:var(--mono); font-size:11px; letter-spacing:.06em; color:var(--ink-3); display:flex; gap:20px; }
  .a-hero .actions{ display:flex; gap:9px; }
  .a-hero .actions button{ font-family:var(--mono); font-size:11px; letter-spacing:.06em; padding:9px 15px; border:1px solid var(--line); background:var(--paper-3); border-radius:100px; cursor:pointer; color:var(--ink-2); display:flex; gap:7px; align-items:center; transition:.2s; }
  .a-hero .actions button:hover{ border-color:var(--ink); color:var(--ink); }
  .a-hero .keyvis{ max-width:var(--maxw); margin:36px auto 0; padding:0 40px; }
  .a-hero .keyvis .ph{ aspect-ratio:16/9; }
  .a-hero .keyvis figcaption{ font-family:var(--mono); font-size:11px; color:var(--ink-3); margin-top:12px; }

  .body-wrap{ padding-top:58px; }
  .label-mod{ font-family:var(--mono); font-size:10px; letter-spacing:.2em; text-transform:uppercase; color:var(--gold); display:block; margin-bottom:14px; }

  /* ===== Sound Ethics blue hero block ===== */
  .a-hero{ background:radial-gradient(120% 90% at 82% -10%, rgba(194,255,61,.12), transparent 55%), var(--blue); color:#fff; padding-bottom:48px; }
  .a-hero .frame{ padding-top:36px; }
  .a-hero .crumb, .a-hero .crumb a{ color:rgba(255,255,255,.6); }
  .a-hero .crumb .cur{ color:#fff; }
  .a-hero .crumb .sep{ color:rgba(255,255,255,.32); }
  .a-hero .cat{ background:var(--acid); color:#0b0b0d; }
  .a-hero .ty{ background:rgba(255,255,255,.16); color:#fff; }
  .a-hero .tags{ color:rgba(255,255,255,.66); }
  .a-hero .tags a{ color:inherit; text-decoration:none; transition:.2s; }
  .a-hero .tags a:hover{ color:var(--acid); }
  .a-hero h1{ color:#fff; }
  .a-hero .deck{ color:rgba(255,255,255,.82); }
  .a-hero .byline{ border-color:rgba(255,255,255,.22); }
  .a-hero .who .nm{ color:#fff; }
  .a-hero .who .rl{ color:rgba(255,255,255,.6); }
  .a-hero .who .av{ border-color:rgba(255,255,255,.3); }
  .a-hero .info{ color:rgba(255,255,255,.6); }
  .a-hero .actions button{ background:rgba(255,255,255,.1); border-color:rgba(255,255,255,.26); color:#fff; }
  .a-hero .actions button:hover{ background:#fff; color:var(--ink); border-color:#fff; }
  .a-hero .keyvis .ph{ border-color:rgba(255,255,255,.22); }
  .a-hero .keyvis figcaption{ color:rgba(255,255,255,.55); }
  .sec-anchor{ scroll-margin-top:84px; }

  /* inline TOC module */
  .m-toc{ max-width:var(--measure); background:var(--paper-3); border:1px solid var(--line); border-radius:8px; padding:28px 32px; }
  .m-toc .tt{ font-family:var(--mono); font-size:11px; letter-spacing:.2em; text-transform:uppercase; color:var(--gold); display:flex; align-items:center; gap:10px; margin-bottom:18px; }
  .m-toc .tt::before{ content:""; width:22px; height:1px; background:var(--gold); }
  .m-toc ol{ list-style:none; margin:0; padding:0; counter-reset:toc; columns:2; column-gap:40px; }
  .m-toc li{ counter-increment:toc; break-inside:avoid; }
  .m-toc a{ display:flex; gap:11px; padding:7px 0; text-decoration:none; color:var(--ink-2); font-size:14px; line-height:1.5; border-bottom:1px solid var(--line-2); transition:.2s; }
  .m-toc a::before{ content:counter(toc,decimal-leading-zero); font-family:var(--mono); font-size:11px; color:var(--gold); }
  .m-toc a:hover{ color:var(--ink); padding-left:4px; }

  .endline{ max-width:var(--measure); margin:50px auto 0; text-align:center; font-family:var(--head); font-weight:900; color:var(--gold); font-size:20px; letter-spacing:.3em; }

  @media (max-width:860px){
    .a-hero .frame,.a-hero .keyvis{ padding-left:22px; padding-right:22px; }
    .a-hero .byline{ flex-direction:column; align-items:flex-start; }
    .m-toc ol{ columns:1; }
  }

  /* ===== 2-COLUMN LAYOUT + STICKY SIDEBAR ===== */
  .layout{ max-width:1220px; margin:0 auto; padding:0 40px; display:grid; grid-template-columns:minmax(0,1fr) 320px; gap:54px; align-items:start; }
  .layout .article{ max-width:100%; margin:0; padding:0; }
  .layout .body-wrap{ padding-top:50px; }
  .layout .main-col .module{ margin-left:0; margin-right:0; max-width:100%; }
  .layout .main-col .module[style*="max-width"]{ max-width:100% !important; }
  /* white reading sheet floating on the dark page */
  .main-col.sheet{ background:#fff; border-radius:16px; padding:6px 48px 48px; box-shadow:0 40px 80px -50px rgba(0,0,0,.7); }
  @media (max-width:600px){ .main-col.sheet{ padding:6px 22px 32px; border-radius:12px; } }
  .layout .m-related{ max-width:100%; margin-top:64px; }
  .layout .m-related .grid{ grid-template-columns:1fr 1fr; gap:22px; }
  .related-foot{ margin-top:110px; margin-bottom:104px; }
  .related-foot .grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:28px; }
  @media (max-width:860px){ .related-foot .grid{ grid-template-columns:1fr; } }

  /* sidebar */
  .side-col{ position:sticky; top:80px; max-height:calc(100vh - 100px); overflow-y:auto; overflow-x:hidden; background:#fff; border-radius:16px; padding:30px 24px; box-shadow:0 40px 80px -50px rgba(0,0,0,.7); }
  .side-col .wgt-head::before{ background:#54c40a; }
  .side-col .s-item.top .rk{ background:#54c40a; color:#0b0b0d; }
  .side-col .sw-search button:hover{ background:#54c40a; color:#0b0b0d; }
  .side-col::-webkit-scrollbar{ width:6px; }
  .side-col::-webkit-scrollbar-thumb{ background:var(--line); border-radius:10px; }
  .side-col::-webkit-scrollbar-track{ background:transparent; }
  .wgt{ margin-bottom:32px; }
  .wgt:last-child{ margin-bottom:0; }
  .wgt-head{ font-family:var(--mono); font-size:11px; letter-spacing:.16em; text-transform:uppercase; color:var(--ink); display:flex; align-items:center; gap:10px; margin-bottom:16px; padding-bottom:11px; border-bottom:1px solid var(--ink); }
  .wgt-head::before{ content:""; width:13px; height:13px; background:var(--gold); border-radius:2px; flex:none; }
  .wgt-head .jp{ color:var(--ink-3); font-size:10px; letter-spacing:.04em; margin-left:auto; }

  /* search widget */
  .sw-search{ display:flex; gap:8px; }
  .sw-search input{ flex:1; min-width:0; border:1px solid var(--line); background:var(--paper-3); border-radius:100px; padding:12px 18px; font-family:var(--sans); font-size:13px; color:var(--ink); outline:none; transition:border-color .2s; }
  .sw-search input:focus{ border-color:var(--ink); }
  .sw-search button{ background:var(--ink); color:var(--paper); border:0; border-radius:100px; padding:0 18px; font-family:var(--mono); font-size:12px; letter-spacing:.06em; cursor:pointer; transition:.2s; flex:none; }
  .sw-search button:hover{ background:var(--gold); }
  .sw-tags{ display:flex; flex-wrap:wrap; gap:7px; margin-top:14px; }
  .sw-tags a{ font-family:var(--mono); font-size:10px; letter-spacing:.04em; color:var(--ink-2); text-decoration:none; border:1px solid var(--line); border-radius:100px; padding:5px 11px; transition:.2s; }
  .sw-tags a:hover{ border-color:var(--ink); color:var(--ink); }

  /* article items (popular / related) */
  .s-item{ display:grid; grid-template-columns:88px 1fr; gap:13px; padding:12px 0; border-bottom:1px solid var(--line-2); text-decoration:none; color:inherit; align-items:start; }
  .s-item:last-child{ border-bottom:0; }
  .s-item .ban{ position:relative; aspect-ratio:4/3; border-radius:5px; overflow:hidden; border:1px solid var(--line); background:var(--paper-3); }
  .s-item .ban img{ width:100%; height:100%; object-fit:cover; display:block; }
  .s-item .rk{ position:absolute; left:0; top:0; width:24px; height:24px; background:var(--ink); color:var(--paper); font-family:var(--head); font-weight:900; font-size:12px; display:flex; align-items:center; justify-content:center; }
  .s-item.top .rk{ background:var(--gold); }
  .s-item .t{ font-size:12.5px; line-height:1.55; font-weight:700; letter-spacing:.01em; }
  .s-item:hover .t{ color:var(--gold); }
  .s-item .mt{ font-family:var(--mono); font-size:10px; letter-spacing:.04em; color:var(--ink-3); margin-top:6px; }

  @media (max-width:980px){
    .layout{ grid-template-columns:1fr; gap:0; padding-left:22px; padding-right:22px; }
    .side-col{ position:static; max-height:none; overflow:visible; margin-top:40px; padding:26px 22px; }
    .layout .m-related .grid{ grid-template-columns:1fr; }
  }