/*
Theme Name: 金融の裏側 — The Backstage of Money
Author: Finance Backstage
Description: お金の裏側を解き明かす、ダーク×ゴールドの金融教養ブログテーマ。背景動画ヒーロー、生成カバー、モバイルドロワー、インタラクティブ図版に対応。
Version: 1.0.0
Requires at least: 6.0
Requires PHP: 7.4
Text Domain: finance-backstage
*/

  /* ============================================================
     TOKENS — dual theme (dark primary / light ledger-paper)
     ============================================================ */
  :root {
    --bg:#ECE6D7; --bg-2:#E4DCC8; --bg-3:#D8CFB6;
    --fg:#211D16; --fg-muted:#59513F; --fg-faint:#8A8065;
    --gold:#8F6F2C; --gold-2:#6F531C;
    --line:rgba(90,70,30,0.20); --line-2:rgba(90,70,30,0.10);
    --teal:#3E6E66; --oxblood:#9A3418; --bronze:#8A6428;
    --guilloche:120,95,40; --guilloche-a:0.20;
    --panel-sh:rgba(60,45,15,0.10); --sel:rgba(154,123,52,0.22);
    --chip-ink:#1c1509; --glow:rgba(46,86,150,0.07); --glow2:rgba(120,150,205,0.06);
  }
  @media (prefers-color-scheme: dark) {
    :root {
      --bg:#090706; --bg-2:#100C08; --bg-3:#17110A;
      --fg:#EDE6D6; --fg-muted:#A39A82; --fg-faint:#665F4C;
      --gold:#C6A15B; --gold-2:#E7CB88;
      --line:rgba(214,183,120,0.13); --line-2:rgba(214,183,120,0.06);
      --teal:#86A8A0; --oxblood:#C15238; --bronze:#B8905A;
      --guilloche:198,161,91; --guilloche-a:0.30;
      --panel-sh:rgba(0,0,0,0.6); --sel:rgba(198,161,91,0.24);
      --chip-ink:#15100a; --glow:rgba(46,86,150,0.26); --glow2:rgba(120,150,205,0.10);
    }
  }
  :root[data-theme="light"] {
    --bg:#ECE6D7; --bg-2:#E4DCC8; --bg-3:#D8CFB6;
    --fg:#211D16; --fg-muted:#59513F; --fg-faint:#8A8065;
    --gold:#8F6F2C; --gold-2:#6F531C;
    --line:rgba(90,70,30,0.20); --line-2:rgba(90,70,30,0.10);
    --teal:#3E6E66; --oxblood:#9A3418; --bronze:#8A6428;
    --guilloche:120,95,40; --guilloche-a:0.20;
    --panel-sh:rgba(60,45,15,0.10); --sel:rgba(154,123,52,0.22);
    --chip-ink:#1c1509; --glow:rgba(46,86,150,0.07); --glow2:rgba(120,150,205,0.06);
  }
  :root[data-theme="dark"] {
    --bg:#090706; --bg-2:#100C08; --bg-3:#17110A;
    --fg:#EDE6D6; --fg-muted:#A39A82; --fg-faint:#665F4C;
    --gold:#C6A15B; --gold-2:#E7CB88;
    --line:rgba(214,183,120,0.13); --line-2:rgba(214,183,120,0.06);
    --teal:#86A8A0; --oxblood:#C15238; --bronze:#B8905A;
    --guilloche:198,161,91; --guilloche-a:0.30;
    --panel-sh:rgba(0,0,0,0.6); --sel:rgba(198,161,91,0.24);
    --chip-ink:#15100a; --glow:rgba(46,86,150,0.26); --glow2:rgba(120,150,205,0.10);
  }

  :root {
    --serif:"Yu Mincho","YuMincho","Hiragino Mincho ProN","Hiragino Mincho Pro",
            "Songti SC","SimSun",serif;
    --gothic:"Yu Gothic Medium","Yu Gothic","YuGothic","Hiragino Kaku Gothic ProN",
             "Hiragino Sans","Meiryo",sans-serif;
    --mono:"SFMono-Regular","SF Mono","Menlo","Consolas",ui-monospace,monospace;
    --maxw:1240px;
  }

  * { box-sizing:border-box; }
  html { -webkit-text-size-adjust:100%; scroll-behavior:smooth; }
  @media (prefers-reduced-motion:reduce){ html{scroll-behavior:auto;} }
  body {
    margin:0; background:var(--bg); color:var(--fg);
    font-family:var(--gothic); font-size:16px; line-height:1.85;
    font-feature-settings:"palt" 1; -webkit-font-smoothing:antialiased;
    text-rendering:optimizeLegibility; overflow-x:hidden;
    transition:background-color .5s ease, color .5s ease;
  }
  ::selection { background:var(--sel); }
  img { max-width:100%; }

  #guilloche { position:fixed; inset:0; width:100%; height:100%; z-index:0;
    pointer-events:none; opacity:0; transition:opacity 1.4s ease; }
  #guilloche.on { opacity:1; }
  .veil { position:fixed; inset:0; z-index:1; pointer-events:none;
    background:radial-gradient(120% 90% at 50% -10%, transparent 45%, var(--bg) 100%); }

  /* elegant light that trails the cursor (desktop / pointer:fine only) */
  #cursorGlow { position:fixed; top:0; left:0; width:260px; height:260px; border-radius:50%;
    pointer-events:none; z-index:40; opacity:0; will-change:transform;
    transition:opacity .6s ease;
    background:radial-gradient(circle at 50% 50%,
      rgba(231,203,136,0.06) 0%, rgba(150,160,190,0.03) 42%, transparent 66%);
    mix-blend-mode:screen; filter:blur(8px); }
  @media (prefers-reduced-motion:reduce){ #cursorGlow{ display:none; } }
  @media (pointer:coarse){ #cursorGlow{ display:none; } }

  .progress { position:fixed; top:0; left:0; height:2px; width:0%;
    background:linear-gradient(90deg,transparent,var(--gold),var(--gold-2));
    z-index:60; transition:width .1s linear; }

  /* ============================================================
     TOP BAR
     ============================================================ */
  .topbar { position:sticky; top:0; z-index:50;
    display:flex; align-items:center; justify-content:space-between;
    gap:20px; padding:16px clamp(18px,4vw,48px);
    background:color-mix(in srgb, var(--bg) 82%, transparent);
    -webkit-backdrop-filter:blur(14px); backdrop-filter:blur(14px);
    border-bottom:1px solid var(--line); }
  .brand { display:flex; align-items:center; gap:12px; cursor:pointer;
    background:none; border:none; padding:0; color:inherit; font-family:inherit; }
  .brand .seal { width:26px; height:26px; flex:none; }
  .brand .bt { display:flex; flex-direction:column; align-items:flex-start; line-height:1.1; }
  .brand .bt b { font-family:var(--serif); font-size:18px; letter-spacing:.06em; color:var(--fg); font-weight:500; }
  .brand .bt small { font-size:9.5px; letter-spacing:.34em; text-transform:uppercase; color:var(--gold); margin-top:3px; }
  .nav { display:flex; align-items:center; gap:6px; }
  .nav a { font-size:13px; letter-spacing:.04em; color:var(--fg-muted); text-decoration:none;
    padding:9px 14px; border-radius:3px; transition:color .2s ease, background-color .2s ease; cursor:pointer; }
  .nav a:hover, .nav a.active { color:var(--gold); }
  .nav a:focus-visible { outline:2px solid var(--gold); outline-offset:2px; }
  .tb-actions { display:flex; align-items:center; gap:8px; }
  .icon-btn { appearance:none; width:40px; height:40px; border-radius:50%;
    border:1px solid var(--line); background:transparent; color:var(--fg-muted);
    display:grid; place-items:center; cursor:pointer;
    transition:color .2s, border-color .2s; }
  .icon-btn:hover { color:var(--gold); border-color:var(--gold); }
  .icon-btn:focus-visible { outline:2px solid var(--gold); outline-offset:2px; }
  .icon-btn svg { width:18px; height:18px; }
  @media (max-width:820px){ .nav{ display:none; } }

  main { position:relative; z-index:2; }
  .wrap { max-width:var(--maxw); margin:0 auto; padding:0 clamp(18px,4vw,48px); }
  .eyebrow { font-size:10.5px; letter-spacing:.30em; text-transform:uppercase; color:var(--fg-faint);
    display:inline-flex; align-items:center; gap:12px; font-weight:500; }
  .eyebrow::before { content:""; width:26px; height:1px; background:var(--gold); opacity:.85; }
  h1,h2,h3 { font-family:var(--serif); font-weight:500; text-wrap:balance;
    line-height:1.3; letter-spacing:.01em; margin:0; }
  .it { font-family:var(--serif); font-style:italic; color:var(--gold); font-weight:500; }
  .jp-em { color:var(--gold); }
  .num { font-variant-numeric:tabular-nums lining-nums; font-feature-settings:"tnum" 1; }

  /* category chips */
  .chip { display:inline-flex; align-items:center; gap:7px; font-size:11px; letter-spacing:.14em;
    text-transform:uppercase; font-weight:600; color:var(--cat,var(--gold)); }
  .chip::before { content:""; width:6px; height:6px; border-radius:50%; background:var(--cat,var(--gold)); }

  /* ============================================================
     PAGE HEADER (blog masthead)
     ============================================================ */
  .masthead { position:relative; min-height:clamp(540px,82vh,880px); display:flex; align-items:center;
    padding:clamp(96px,14vh,160px) 0 clamp(56px,9vh,96px); text-align:left; overflow:hidden; }
  .masthead > .wrap { width:100%; }
  .masthead .glow { position:absolute; left:22%; top:42%; transform:translate(-50%,-50%);
    width:min(820px,120%); height:520px; pointer-events:none; z-index:0;
    background:radial-gradient(58% 60% at 50% 50%, var(--glow), transparent 70%),
               radial-gradient(38% 42% at 50% 56%, var(--glow2), transparent 74%); }
  /* hero background video (local only — assets/bg.mp4). Absent gracefully if not found. */
  .masthead .hero-media { position:absolute; inset:0; z-index:0; overflow:hidden; pointer-events:none;
    background:var(--bg); }
  .masthead .hero-media video { width:100%; height:100%; object-fit:cover; object-position:center;
    opacity:.95; display:block; }
  /* darken only the left (behind the text) + soft top/bottom fades; keep the right clear so the film shows */
  .masthead .hero-media::after { content:""; position:absolute; inset:0;
    background:
      linear-gradient(90deg, var(--bg) 0%, color-mix(in srgb,var(--bg) 80%,transparent) 28%, color-mix(in srgb,var(--bg) 28%,transparent) 54%, transparent 72%),
      linear-gradient(180deg, color-mix(in srgb,var(--bg) 55%,transparent) 0%, transparent 24%, transparent 60%, var(--bg) 100%); }
  @media (prefers-reduced-motion:reduce){ .masthead .hero-media video{ display:none; } }
  @media (max-width:760px){
    .masthead { min-height:clamp(480px,74vh,720px); }
    .masthead .hero-media video{ opacity:.75; }
    .masthead .hero-media::after{
      background:linear-gradient(180deg, color-mix(in srgb,var(--bg) 50%,transparent) 0%, color-mix(in srgb,var(--bg) 78%,transparent) 52%, var(--bg) 100%); } }
  .masthead .mh-in { position:relative; z-index:1; display:flex; flex-direction:column;
    align-items:flex-start; gap:22px; }
  .masthead h1 { font-size:clamp(1.9rem,5vw,3.5rem); line-height:1.2; letter-spacing:.015em; }
  .masthead .lede { max-width:35rem; margin:0; color:var(--fg-muted);
    font-size:clamp(15px,2.2vw,17px); line-height:1.95; font-family:var(--serif); }
  .masthead .lede .it { margin-right:.35em; }
  .masthead .mh-stat { display:inline-flex; gap:26px; align-items:center; margin-top:4px;
    font-size:11.5px; letter-spacing:.18em; text-transform:uppercase; color:var(--fg-faint); }
  .masthead .mh-stat b { font-family:var(--serif); font-size:20px; color:var(--gold);
    font-weight:500; letter-spacing:0; margin-right:.25em; }
  .masthead .rule { width:1px; height:30px; background:var(--line); }
  .cta-outline { appearance:none; background:transparent; cursor:pointer; margin-top:8px;
    font-family:var(--gothic); font-size:11.5px; letter-spacing:.24em; text-transform:uppercase;
    color:var(--fg); border:1px solid var(--line); border-radius:2px; padding:15px 32px;
    transition:border-color .3s, color .3s, letter-spacing .3s; }
  .cta-outline:hover { border-color:var(--gold); color:var(--gold); letter-spacing:.28em; }
  .cta-outline:focus-visible { outline:2px solid var(--gold); outline-offset:3px; }

  /* ============================================================
     FEATURED HERO CARD
     ============================================================ */
  .feature { position:relative; display:block; text-decoration:none; color:inherit;
    border:1px solid var(--line); border-radius:6px; overflow:hidden; background:var(--bg-2);
    margin-bottom:clamp(40px,6vh,72px); }
  .feature .cover { position:relative; aspect-ratio:24/7; background:var(--bg-3); }
  .feature .cover canvas { display:block; width:100%; height:100%; }
  .feature .cover::after { content:""; position:absolute; inset:0;
    background:linear-gradient(90deg, var(--bg-2) 0%, color-mix(in srgb,var(--bg-2) 70%,transparent) 42%, transparent 72%); }
  @media (max-width:760px){ .feature .cover{ aspect-ratio:4/5; } .feature .cover::after{
    background:linear-gradient(180deg, transparent 30%, var(--bg-2) 96%); } }
  .feature .body { position:absolute; inset:0; display:flex; flex-direction:column;
    justify-content:center; gap:13px; padding:clamp(22px,4vw,48px);
    max-width:min(500px,60%); z-index:2; }
  @media (max-width:760px){ .feature .body{ max-width:100%; justify-content:flex-end;
    padding:clamp(22px,6vw,30px); } }
  .feature .tagline { display:inline-flex; align-items:center; gap:10px; font-size:11px;
    letter-spacing:.2em; text-transform:uppercase; color:var(--fg-faint); }
  .feature h2 { font-size:clamp(1.35rem,3.3vw,2.1rem); line-height:1.28; letter-spacing:.01em; }
  .feature .ex { color:var(--fg-muted); font-size:14px; line-height:1.8; max-width:30rem;
    display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; }
  .feature .rd { display:inline-flex; align-items:center; gap:10px; margin-top:4px;
    font-size:13px; letter-spacing:.08em; color:var(--gold); }
  .feature .rd svg { width:16px; height:16px; transition:transform .3s cubic-bezier(.16,1,.3,1); }
  .feature:hover .rd svg { transform:translateX(6px); }
  .feature:hover h2 { color:var(--gold); }
  .feature h2, .feature .rd { transition:color .25s ease; }
  .feature:focus-visible { outline:2px solid var(--gold); outline-offset:3px; }

  /* ============================================================
     CONTENT LAYOUT (list + sidebar)
     ============================================================ */
  .layout { display:grid; grid-template-columns:minmax(0,1fr) 320px;
    gap:clamp(32px,4vw,64px); align-items:start; padding-bottom:clamp(60px,10vh,120px); }
  @media (max-width:940px){ .layout{ grid-template-columns:1fr; } }

  .listhead { display:flex; align-items:baseline; justify-content:space-between; gap:16px;
    margin-bottom:26px; padding-bottom:16px; border-bottom:1px solid var(--line); }
  .listhead .lt { font-family:var(--serif); font-size:1.25rem; color:var(--fg); }
  .listhead .cnt { font-size:12px; color:var(--fg-faint); letter-spacing:.08em; }

  .grid { display:grid; grid-template-columns:1fr 1fr; gap:clamp(20px,2.5vw,32px); }
  @media (max-width:560px){ .grid{ grid-template-columns:1fr; } }

  .card { display:flex; flex-direction:column; text-decoration:none; color:inherit;
    background:var(--bg-2); border:1px solid var(--line); border-radius:5px; overflow:hidden;
    transition:transform .4s cubic-bezier(.16,1,.3,1), border-color .3s ease, box-shadow .4s ease; }
  .card:hover { transform:translateY(-5px); border-color:color-mix(in srgb,var(--gold) 55%,var(--line));
    box-shadow:0 26px 50px -34px var(--panel-sh); }
  .card:focus-visible { outline:2px solid var(--gold); outline-offset:3px; }
  .card .cv { position:relative; aspect-ratio:3/2; background:var(--bg-3); overflow:hidden; }
  .card .cv canvas { display:block; width:100%; height:100%; }
  .card .cv .rt { position:absolute; top:12px; right:12px; font-size:10.5px; letter-spacing:.1em;
    color:var(--fg); background:color-mix(in srgb,var(--bg) 62%,transparent);
    -webkit-backdrop-filter:blur(6px); backdrop-filter:blur(6px);
    padding:4px 9px; border-radius:20px; border:1px solid var(--line); }
  .card .in { padding:20px 20px 22px; display:flex; flex-direction:column; gap:11px; flex:1; }
  .card h3 { font-size:1.12rem; line-height:1.42; letter-spacing:.01em; transition:color .25s ease; }
  .card:hover h3 { color:var(--gold); }
  .card .ex { font-size:13.5px; line-height:1.8; color:var(--fg-muted);
    display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; }
  .card .cmeta { margin-top:auto; padding-top:12px; display:flex; align-items:center;
    justify-content:space-between; gap:10px; font-size:11.5px; color:var(--fg-faint); letter-spacing:.04em; }

  .empty { padding:60px 20px; text-align:center; color:var(--fg-faint); font-size:14px;
    border:1px dashed var(--line); border-radius:5px; }

  /* ============================================================
     SIDEBAR WIDGETS
     ============================================================ */
  .side { display:flex; flex-direction:column; gap:26px; position:sticky; top:82px; }
  @media (max-width:940px){ .side{ position:static; } }
  .widget { background:var(--bg-2); border:1px solid var(--line); border-radius:5px;
    padding:22px 20px; }
  .widget .wt { font-size:11px; letter-spacing:.24em; text-transform:uppercase; color:var(--gold);
    display:flex; align-items:center; gap:10px; margin-bottom:18px; }
  .widget .wt::after { content:""; flex:1; height:1px; background:var(--line); }

  .search { display:flex; align-items:center; gap:10px; background:var(--bg-3);
    border:1px solid var(--line); border-radius:4px; padding:0 12px; }
  .search svg { width:16px; height:16px; color:var(--fg-faint); flex:none; }
  .search input { flex:1; background:none; border:none; outline:none; color:var(--fg);
    font-family:var(--gothic); font-size:14px; padding:12px 0; }
  .search input::placeholder { color:var(--fg-faint); }

  .catlist { display:flex; flex-direction:column; gap:2px; }
  .catlist button { display:flex; align-items:center; justify-content:space-between; gap:10px;
    width:100%; background:none; border:none; cursor:pointer; text-align:left;
    padding:11px 8px; border-radius:4px; color:var(--fg-muted); font-family:var(--gothic);
    font-size:13.5px; transition:background-color .2s, color .2s; border-bottom:1px solid var(--line-2); }
  .catlist button:last-child { border-bottom:none; }
  .catlist button:hover { color:var(--fg); background:var(--bg-3); }
  .catlist button[aria-pressed="true"] { color:var(--gold); }
  .catlist button .lft { display:flex; align-items:center; gap:10px; }
  .catlist button .dot { width:7px; height:7px; border-radius:50%; flex:none; }
  .catlist button .n { font-size:12px; color:var(--fg-faint); font-variant-numeric:tabular-nums; }
  .catlist button:focus-visible { outline:2px solid var(--gold); outline-offset:1px; }

  .pop { display:flex; flex-direction:column; gap:4px; }
  .pop a { display:grid; grid-template-columns:auto 1fr; gap:14px; align-items:center;
    text-decoration:none; color:inherit; padding:12px 0; border-bottom:1px solid var(--line-2); }
  .pop a:last-child { border-bottom:none; }
  .pop a .rk { font-family:var(--serif); font-size:1.4rem; color:var(--gold); opacity:.55; width:26px;
    text-align:center; font-variant-numeric:tabular-nums; transition:opacity .2s; }
  .pop a:hover .rk { opacity:1; }
  .pop a .pt { font-size:13px; line-height:1.55; color:var(--fg-muted); transition:color .2s;
    display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; }
  .pop a:hover .pt { color:var(--fg); }
  .pop a:focus-visible { outline:2px solid var(--gold); outline-offset:2px; }

  .tags { display:flex; flex-wrap:wrap; gap:8px; }
  .tags button { background:var(--bg-3); border:1px solid var(--line); color:var(--fg-muted);
    font-family:var(--gothic); font-size:12px; padding:7px 12px; border-radius:20px; cursor:pointer;
    transition:all .2s; }
  .tags button:hover { color:var(--gold); border-color:var(--gold); }
  .tags button:focus-visible { outline:2px solid var(--gold); outline-offset:2px; }

  .news p { font-size:13px; color:var(--fg-muted); line-height:1.75; margin:0 0 14px; }
  .news .row { display:flex; gap:8px; }
  .news input { flex:1; min-width:0; background:var(--bg-3); border:1px solid var(--line); border-radius:4px;
    color:var(--fg); font-family:var(--gothic); font-size:13px; padding:11px 12px; outline:none; }
  .news input:focus { border-color:var(--gold); }
  .news button { flex:none; background:var(--gold); color:var(--chip-ink); border:none; border-radius:4px;
    font-family:var(--gothic); font-weight:600; font-size:13px; padding:0 16px; cursor:pointer;
    transition:background-color .2s; }
  .news button:hover { background:var(--gold-2); }
  .news button:focus-visible { outline:2px solid var(--gold); outline-offset:2px; }
  .news .ok { font-size:12.5px; color:var(--teal); margin:12px 0 0; }
  .news small { display:block; margin-top:10px; font-size:11px; color:var(--fg-faint); }

  /* ============================================================
     ARTICLE VIEW
     ============================================================ */
  .article { padding-bottom:clamp(70px,12vh,140px); }
  .article .wrap { position:relative; }
  .art-glow { position:absolute; left:50%; top:120px; transform:translateX(-50%);
    width:min(860px,124%); height:460px; pointer-events:none; z-index:0;
    background:radial-gradient(54% 60% at 50% 42%, var(--glow), transparent 72%); }
  .art-back, .art-hd, .art-cover, .prose, .art-foot, .art-more { position:relative; z-index:1; }
  .art-back { display:inline-flex; align-items:center; gap:8px; background:none; border:none;
    cursor:pointer; color:var(--fg-muted); font-family:var(--gothic); font-size:13px; letter-spacing:.04em;
    padding:0; margin:clamp(28px,5vh,52px) 0 26px; transition:color .2s; }
  .art-back:hover { color:var(--gold); }
  .art-back svg { width:16px; height:16px; }
  .art-back:focus-visible { outline:2px solid var(--gold); outline-offset:3px; }
  .art-hd { max-width:760px; margin:0 auto; }
  .art-hd .top { display:flex; align-items:center; gap:16px; flex-wrap:wrap; margin-bottom:20px; }
  .art-hd h1 { font-size:clamp(1.9rem,5.2vw,3.3rem); line-height:1.28; letter-spacing:.01em; }
  .art-hd .sub { margin-top:20px; font-family:var(--serif); font-size:clamp(1.05rem,2.6vw,1.3rem);
    line-height:1.85; color:var(--fg-muted); }
  .art-hd .byline { display:flex; align-items:center; gap:14px; margin-top:26px; padding-top:22px;
    border-top:1px solid var(--line); font-size:12.5px; color:var(--fg-faint); letter-spacing:.06em; }
  .art-hd .byline .av { width:34px; height:34px; border-radius:50%; border:1px solid var(--gold);
    display:grid; place-items:center; font-family:var(--serif); color:var(--gold); font-size:14px; }
  .art-cover { max-width:1000px; margin:clamp(30px,5vh,54px) auto; aspect-ratio:16/6;
    border-radius:6px; overflow:hidden; border:1px solid var(--line); background:var(--bg-3); }
  .art-cover canvas { display:block; width:100%; height:100%; }

  .prose { max-width:680px; margin:0 auto; }
  .prose > * { margin:0 0 1.4em; }
  .prose p { color:var(--fg-muted); font-size:17px; line-height:2.05; font-family:var(--serif); }
  .prose p strong { color:var(--fg); font-weight:600; }
  .prose h3 { font-family:var(--serif); font-size:clamp(1.35rem,3.4vw,1.7rem); color:var(--fg);
    margin:2em 0 .7em; line-height:1.4; }
  .prose h3 .k { display:block; font-family:var(--gothic); font-size:11px; letter-spacing:.24em;
    text-transform:uppercase; color:var(--gold); margin-bottom:12px; }
  .prose h3 .k::before { content:"— "; }
  .panel .plabel .t::before { content:"— "; }
  .prose blockquote { margin:2.6em auto; padding:0 clamp(6px,4vw,44px); border:none; text-align:center;
    font-family:var(--serif); font-size:clamp(1.35rem,3.7vw,1.95rem); line-height:1.68;
    color:var(--gold); font-weight:500; letter-spacing:.01em; }
  .prose blockquote cite { display:block; margin-top:18px; font-family:var(--gothic); font-size:12px;
    letter-spacing:.14em; color:var(--fg-faint); font-style:normal; }
  .prose ul { padding-left:0; list-style:none; }
  .prose ul li { position:relative; padding-left:26px; margin-bottom:.8em; color:var(--fg-muted); line-height:1.9; }
  .prose ul li::before { content:""; position:absolute; left:4px; top:.85em; width:8px; height:1px; background:var(--gold); }

  .art-foot { max-width:680px; margin:clamp(40px,7vh,80px) auto 0; padding-top:30px;
    border-top:1px solid var(--line); }
  .art-foot .tgs { display:flex; flex-wrap:wrap; gap:8px; }
  .art-more { max-width:1000px; margin:clamp(50px,8vh,90px) auto 0; }
  .art-more .lt { font-family:var(--serif); font-size:1.3rem; margin-bottom:22px; color:var(--fg); }

  /* ============================================================
     EMBEDDED INTERACTIVE PANELS (inside articles)
     ============================================================ */
  .panel { margin:2.4em 0; padding:clamp(22px,4vw,36px); background:var(--bg-2);
    border:1px solid var(--line); border-radius:5px; position:relative; overflow:hidden;
    box-shadow:0 30px 70px -50px var(--panel-sh); }
  .panel::before { content:""; position:absolute; top:0; left:0; right:0; height:1px;
    background:linear-gradient(90deg,transparent,var(--gold),transparent); opacity:.5; }
  .panel .plabel { display:flex; align-items:center; justify-content:space-between; gap:14px;
    flex-wrap:wrap; margin-bottom:12px; }
  .panel .plabel .t { font-size:10.5px; letter-spacing:.24em; text-transform:uppercase; color:var(--gold); }
  .panel .ph { font-family:var(--serif); font-size:clamp(1.05rem,2.6vw,1.35rem); color:var(--fg);
    margin:0 0 8px; line-height:1.4; }
  .panel .pd { font-size:13.5px; color:var(--fg-muted); line-height:1.75; margin:0 0 22px; }
  .panel .pd .gold { color:var(--gold); }
  .controls { display:flex; flex-wrap:wrap; gap:18px 36px; align-items:flex-end; margin-bottom:24px; }
  .ctrl { flex:1 1 220px; }
  .ctrl label { display:flex; justify-content:space-between; align-items:baseline; font-size:12px;
    color:var(--fg-muted); margin-bottom:11px; letter-spacing:.04em; }
  .ctrl label b { font-family:var(--serif); font-size:1.2rem; color:var(--gold); font-weight:500; }
  input[type=range] { -webkit-appearance:none; appearance:none; width:100%; height:2px;
    background:var(--line); border-radius:2px; outline:none; cursor:pointer; }
  input[type=range]::-webkit-slider-thumb { -webkit-appearance:none; width:18px; height:18px;
    border-radius:50%; background:var(--gold); border:3px solid var(--bg-2); cursor:pointer;
    box-shadow:0 0 0 1px var(--gold); transition:transform .15s; }
  input[type=range]::-webkit-slider-thumb:hover { transform:scale(1.15); }
  input[type=range]::-moz-range-thumb { width:18px; height:18px; border-radius:50%; background:var(--gold);
    border:3px solid var(--bg-2); box-shadow:0 0 0 1px var(--gold); cursor:pointer; }
  input[type=range]:focus-visible { outline:2px solid var(--gold); outline-offset:6px; }
  .readout { display:flex; flex-wrap:wrap; gap:24px 40px; margin-top:24px; padding-top:22px;
    border-top:1px solid var(--line-2); }
  .readout .r .v { font-family:var(--serif); font-size:clamp(1.5rem,4vw,2.2rem); color:var(--fg); line-height:1; }
  .readout .r .v.g { color:var(--gold); } .readout .r .v.bad { color:var(--oxblood); }
  .readout .r .k { font-size:11.5px; color:var(--fg-muted); margin-top:10px; letter-spacing:.03em; }
  .canvas-hold { position:relative; width:100%; } .canvas-hold canvas { display:block; width:100%; height:auto; }
  .mm-stack { display:flex; flex-direction:column; gap:4px; margin-top:4px; }
  .mm-row { position:relative; height:26px; border-radius:2px; overflow:hidden; background:var(--bg-3); }
  .mm-row .bar { position:absolute; inset:0 auto 0 0; background:linear-gradient(90deg,var(--gold-2),var(--gold));
    width:0%; transition:width .8s cubic-bezier(.16,1,.3,1); }
  .mm-row .lbl { position:relative; z-index:2; height:100%; display:flex; align-items:center;
    padding:0 12px; font-size:11.5px; color:var(--fg); font-variant-numeric:tabular-nums; }

  /* ============================================================
     FOOTER
     ============================================================ */
  .foot { border-top:1px solid var(--line); background:var(--bg-2); }
  .foot .wrap { padding:clamp(44px,7vh,72px) clamp(18px,4vw,48px); }
  .foot .top { display:grid; grid-template-columns:1.4fr 1fr 1fr; gap:36px; margin-bottom:44px; }
  @media (max-width:720px){ .foot .top{ grid-template-columns:1fr; gap:28px; } }
  .foot h4 { font-family:var(--gothic); font-size:11px; letter-spacing:.22em; text-transform:uppercase;
    color:var(--gold); margin:0 0 16px; font-weight:600; }
  .foot .about b { font-family:var(--serif); font-size:20px; color:var(--fg); font-weight:500;
    display:block; margin-bottom:12px; }
  .foot .about p { margin:0; font-size:13.5px; color:var(--fg-muted); line-height:1.85; max-width:26rem; }
  .foot ul { list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:11px; }
  .foot ul a { color:var(--fg-muted); text-decoration:none; font-size:13.5px; transition:color .2s; cursor:pointer; }
  .foot ul a:hover { color:var(--gold); }
  .foot .bottom { display:flex; flex-wrap:wrap; justify-content:space-between; gap:14px;
    padding-top:26px; border-top:1px solid var(--line-2); font-size:11.5px; letter-spacing:.06em; color:var(--fg-faint); }
  .foot .disc { max-width:56rem; margin-top:14px; font-size:11.5px; line-height:1.85; color:var(--fg-faint); }

  a { color:var(--gold); text-underline-offset:3px; }
  a:focus-visible { outline:2px solid var(--gold); outline-offset:3px; }

  .reveal { opacity:0; transform:translateY(24px);
    transition:opacity .9s cubic-bezier(.16,1,.3,1), transform .9s cubic-bezier(.16,1,.3,1); }
  .reveal.in { opacity:1; transform:none; }
  @media (prefers-reduced-motion:reduce){
    .reveal{ opacity:1 !important; transform:none !important; transition:none !important; }
    .card, .feature, .rd svg { transition:none !important; }
  }

  /* ============================================================
     MOBILE REFINEMENTS  (PC ≥821px is untouched)
     ============================================================ */
  /* mobile menu drawer (categories consolidated into the top-right icon) */
  .menu-btn { display:none; }
  .drawer-scrim { position:fixed; inset:0; z-index:65; background:rgba(0,0,0,.55);
    opacity:0; transition:opacity .3s ease; }
  .drawer-scrim.open { opacity:1; }
  .drawer { position:fixed; top:0; right:0; height:100%; height:100dvh; width:min(320px,82%); z-index:70;
    background:var(--bg-2); border-left:1px solid var(--line); box-shadow:-30px 0 80px -40px #000;
    transform:translateX(101%); transition:transform .38s cubic-bezier(.16,1,.3,1);
    display:flex; flex-direction:column; padding:14px 20px 30px; }
  .drawer.open { transform:none; }
  .drawer-head { display:flex; align-items:center; justify-content:space-between; padding:6px 0 14px;
    border-bottom:1px solid var(--line); }
  .drawer-head .dh-t { font-size:11px; letter-spacing:.26em; text-transform:uppercase; color:var(--gold); }
  .drawer-sec { font-size:11px; letter-spacing:.18em; text-transform:uppercase; color:var(--fg-faint);
    margin:22px 0 4px; }
  .drawer-nav { display:flex; flex-direction:column; }
  .drawer-nav a { display:flex; align-items:center; gap:13px; padding:15px 2px; color:var(--fg-muted);
    text-decoration:none; font-size:15.5px; border-bottom:1px solid var(--line-2); transition:color .2s; }
  .drawer-nav a:hover, .drawer-nav a.active { color:var(--gold); }
  .drawer-nav .ddot { width:8px; height:8px; border-radius:50%; flex:none; }
  @media (max-width:820px){
    .topbar { padding:11px 15px; gap:12px; }
    .brand .seal { width:23px; height:23px; }
    .brand .bt b { font-size:16px; }
    .brand .bt small { font-size:8.5px; letter-spacing:.22em; }
    .icon-btn { width:44px; height:44px; }            /* 44px touch target */
    .tb-actions { gap:6px; }
    .menu-btn { display:grid; }
  }
  @media (max-width:760px){
    .masthead { padding:clamp(56px,9vh,84px) 0 clamp(34px,6vh,56px);
      min-height:clamp(420px,62svh,560px); }
    .masthead .hero-media video { object-position:70% center; } /* shift video left on mobile only */
    .masthead .mh-in { gap:18px; }
    .masthead h1 { font-size:clamp(1.5rem,6.1vw,2rem); }
    .masthead .lede { font-size:14.5px; line-height:1.9; }
    .masthead .glow { left:24%; top:46%; width:min(330px,90%); height:250px; }
    /* compact, landscape featured card on mobile */
    .feature .cover { aspect-ratio:16/9; }
    .feature .ex { display:none; }
    .feature h2 { font-size:clamp(1.2rem,4.8vw,1.55rem); }
    .feature .tagline { font-size:10px; }
    .feature .body { gap:10px; padding:18px 20px; }
    .art-cover { aspect-ratio:16/9; }
    .art-glow { top:76px; height:320px; }
    .prose p { font-size:16px; line-height:1.98; }
    .listhead { margin-bottom:20px; }
  }
  @media (max-width:430px){
    .wrap { padding:0 16px; }
    .brand .bt small { display:none; }                /* declutter tiny screens */
    .masthead h1 { font-size:clamp(1.32rem,5.6vw,1.7rem); }
    .feature .body { max-width:100%; }
    .readout { gap:20px 28px; }
  }


/* ============================================================
   WordPress integration tweaks
   ============================================================ */
.card .cv img, .feature .cover img, .art-cover img { width:100%; height:100%; object-fit:cover; display:block; }
.art-back { text-decoration:none; }
.chip { text-decoration:none; }

/* category list as links */
.catlist a.catrow { display:flex; align-items:center; justify-content:space-between; gap:10px; width:100%;
  text-decoration:none; padding:11px 8px; border-radius:4px; color:var(--fg-muted); font-size:13.5px;
  transition:background-color .2s, color .2s; border-bottom:1px solid var(--line-2); }
.catlist a.catrow:last-child { border-bottom:none; }
.catlist a.catrow:hover { color:var(--fg); background:var(--bg-3); }
.catlist a.catrow.active { color:var(--gold); }
.catlist a.catrow .lft { display:flex; align-items:center; gap:10px; }
.catlist a.catrow .dot { width:7px; height:7px; border-radius:50%; flex:none; }
.catlist a.catrow .n { font-size:12px; color:var(--fg-faint); font-variant-numeric:tabular-nums; }

/* tag links */
.tags a, .tgs a { display:inline-block; background:var(--bg-3); border:1px solid var(--line); color:var(--fg-muted);
  font-size:12px; padding:7px 12px; border-radius:20px; text-decoration:none; transition:all .2s; }
.tags a:hover, .tgs a:hover { color:var(--gold); border-color:var(--gold); }

/* subscribe button */
.news .news-sub { display:inline-block; background:var(--gold); color:var(--chip-ink); text-decoration:none;
  font-weight:600; font-size:13px; padding:11px 18px; border-radius:4px; transition:background-color .2s; }
.news .news-sub:hover { background:var(--gold-2); }

/* archive / search / category header */
.masthead-lite { padding:clamp(48px,9vh,96px) 0 clamp(18px,3vh,32px); }
.masthead-lite .eyebrow { margin-bottom:16px; }
.masthead-lite h1 { font-size:clamp(1.8rem,5vw,3.1rem); line-height:1.18; letter-spacing:.01em; }
.masthead-lite .ml-desc { margin:16px 0 0; color:var(--fg-muted); font-size:15px; max-width:40rem; line-height:1.9; }

/* pagination */
.fin-pager { display:flex; flex-wrap:wrap; gap:8px; margin-top:44px; }
.fin-pager .page-numbers { display:inline-flex; min-width:42px; height:42px; align-items:center; justify-content:center;
  padding:0 12px; border:1px solid var(--line); border-radius:3px; color:var(--fg-muted); text-decoration:none;
  font-size:13px; font-variant-numeric:tabular-nums; transition:all .2s; }
.fin-pager .page-numbers:hover { border-color:var(--gold); color:var(--gold); }
.fin-pager .page-numbers.current { background:var(--gold); color:var(--chip-ink); border-color:var(--gold); }
.fin-pager .page-numbers.current:hover { color:var(--chip-ink); }
.fin-pager .page-numbers.dots { border-color:transparent; }

/* WP content niceties inside .prose */
.prose img { border-radius:5px; height:auto; max-width:100%; }
.prose figure { margin:2em 0; }
.prose figcaption { font-size:12.5px; color:var(--fg-faint); margin-top:8px; text-align:center; }
.prose ol { padding-left:1.4em; }
.prose ol li { color:var(--fg-muted); line-height:1.9; margin-bottom:.6em; }


/* ===== sidebar official-LINE / LP CTA widget ===== */
.widget.cta-widget { background:linear-gradient(180deg, color-mix(in srgb,var(--gold) 9%, var(--bg-2)), var(--bg-2));
  border-color:color-mix(in srgb,var(--gold) 42%, var(--line)); }
.cta-widget .cta-eyebrow { display:block; font-size:10px; letter-spacing:.24em; text-transform:uppercase; color:var(--gold); }
.cta-widget .cta-h { font-family:var(--serif); font-weight:500; font-size:1.25rem; color:var(--fg); margin:10px 0 10px; line-height:1.4; }
.cta-widget .cta-p { font-size:13px; color:var(--fg-muted); line-height:1.8; margin:0 0 16px; }
.cta-widget .cta-btn { display:block; text-align:center; text-decoration:none; font-weight:600; font-size:14px;
  padding:13px 16px; border-radius:4px; color:var(--chip-ink);
  background:linear-gradient(180deg,var(--gold-2),var(--gold));
  box-shadow:0 10px 26px -14px rgba(198,161,91,.6);
  transition:transform .2s ease, box-shadow .3s ease; }
.cta-widget .cta-btn:hover { transform:translateY(-2px); box-shadow:0 16px 34px -14px rgba(198,161,91,.75); }


/* ============================================================
   MOBILE（760px以下 / PC(>760)は変更なし）
   ・最新記事カードを低く（2枚見えるように）
   ・注目カード：カテゴリ非表示／タイトル2行／左上にうすく「注目の記事」
   ============================================================ */
.feat-badge { display:none; }   /* PC(>760)では非表示 */
@media (max-width:760px){
  /* 最新記事カードを低く */
  .card .cv { aspect-ratio: 2 / 1; }
  .card .in { padding:14px 16px 16px; gap:8px; }
  .card h3 { font-size:1.02rem; line-height:1.4; }
  .card .ex { font-size:12.5px; line-height:1.7; }
  .grid { gap:16px; }

  /* 注目カード：背景と文字のごちゃつきを解消 */
  .feature .tagline { display:none; }               /* カテゴリ＋下部の「注目の記事」を消す */
  .feature h2 { display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; }  /* タイトル2行 */
  .feature .feat-badge {                            /* 画像の左上に、うすい字のまま「注目の記事」 */
    display:block; position:absolute; top:14px; left:0; z-index:3;
    padding-left:1em;                               /* 左に1文字ぶんの余白 */
    font-size:11px; letter-spacing:.08em; color:var(--fg-muted); }
}