:root{
    --ground:#2B0F16;
    --wine:#6E1E2C;
    --wine-lift:#8A2A3A;
    --ink:#F0E9DC;
    --mute:#A9968F;
    --brass:#C9A86A;
    --hair:rgba(201,168,106,.28);
    --shell:520px;
  }

  *,*::before,*::after{box-sizing:border-box}
  html{-webkit-text-size-adjust:100%}

  body{
    margin:0;
    background:var(--ground);
    background-image:radial-gradient(120% 70% at 50% -10%, rgba(110,30,44,.55) 0%, rgba(43,15,22,0) 62%);
    background-repeat:no-repeat; background-attachment:fixed;
    color:var(--ink);
    font-family:"Shippori Mincho B1", serif;
    -webkit-font-smoothing:antialiased;
    min-height:100vh; min-height:100dvh;
  }

  a{color:inherit;text-decoration:none}
  :focus-visible{outline:2px solid var(--brass);outline-offset:3px}
  [hidden]{display:none !important}

  .spine{
    position:fixed; top:0; left:0; height:100%; width:34px;
    display:flex; align-items:center; justify-content:center;
    writing-mode:vertical-rl;
    font-family:"Marcellus",serif; font-size:12px; letter-spacing:.34em;
    color:var(--mute); opacity:.9;
    border-right:1px solid var(--hair); background:rgba(0,0,0,.12);
    z-index:2;
  }
  @media (max-width:399px){ .spine{display:none} }

  .shell{
    max-width:var(--shell); margin:0 auto;
    padding:52px 22px calc(48px + env(safe-area-inset-bottom));
  }
  @media (min-width:400px){ .shell{padding-left:46px} }

  /* ---------- 共通 ---------- */

  .rule{
    height:1px;
    background:linear-gradient(90deg,transparent,var(--brass) 22%,var(--brass) 78%,transparent);
    opacity:.55; margin:20px 0; transform-origin:50% 50%;
  }
  
  

  .btn{
    display:flex; align-items:center; gap:12px;
    padding:17px 18px;
    border:1px solid var(--hair); border-radius:2px;
    background:var(--wine);
    font-family:"Zen Kaku Gothic New",sans-serif;
    font-size:15px; font-weight:500; letter-spacing:.05em;
    transition:background .16s ease, transform .1s ease, border-color .16s ease;
  }
  .btn:hover{background:var(--wine-lift);border-color:var(--brass)}
  .btn:active{transform:translateY(1px)}
  .btn svg{flex:0 0 20px;width:20px;height:20px;fill:var(--ink);opacity:.92}
  .btn .arrow{margin-left:auto;font-size:12px;color:var(--ink);letter-spacing:0}

  .listen{display:grid;gap:10px;min-height:60px}
  .listen .btn:nth-child(1){gap:8px;margin-top:12px}
  .subrow{display:grid;gap:10px;max-width:190px;margin:16px auto 0}
  .subrow a{
    display:flex; align-items:center; justify-content:center; min-height:44px; padding:12px 4px;
    border:1px solid var(--hair); border-radius:2px;
    transition:background .16s ease,border-color .16s ease;
  }
  .subrow a:hover{background:rgba(110,30,44,.42);border-color:var(--brass)}
  .subrow svg{width:17px;height:17px;fill:var(--ink);opacity:.8}

  .sectlabel{
    display:flex; align-items:baseline; justify-content:space-between;
    padding-bottom:12px; border-bottom:1px solid var(--hair);
    font-family:"Marcellus",serif; font-size:12px;
    letter-spacing:.3em; color:var(--mute);
  }

  /* ---------- トップ ---------- */

  #home > header{text-align:center}

  .wordmark{
    font-family:Georgia,"Times New Roman",serif; font-weight:700;
    font-size:clamp(30px,10vw,42px); line-height:1; margin:0;
    letter-spacing:.08em; text-indent:.08em; animation:settle 1.4s cubic-bezier(.16,1,.3,1) both;
  }
  @keyframes settle{
    from{letter-spacing:.62em;text-indent:.62em;opacity:0}
    to  {letter-spacing:.08em;text-indent:.08em;opacity:1}
  }

  .hosts{
    font-family:"Marcellus",serif; font-size:12px;
    letter-spacing:.16em; color:var(--mute); margin:0;
  }

  #home .listen{margin-top:40px}
  .eps{margin:54px 0 0}

  .ep{
    display:grid; grid-template-columns:34px 1fr; gap:0 14px;
    align-items:start; padding:20px 2px;
    border-bottom:1px solid var(--hair);
    transition:background .16s ease;
  }
  a.ep:hover{background:rgba(110,30,44,.3)}
  .ep__num{
    font-family:"Marcellus",serif; font-size:15px; line-height:1.4;
    color:var(--brass); text-align:right; padding-top:3px;
  }
  .ep__title{font-size:16px;font-weight:700;margin:0;letter-spacing:.02em;line-height:1.6}
  .ep__meta{
    font-family:"Zen Kaku Gothic New",sans-serif;
    font-size:12px; color:var(--mute); margin:8px 0 0; letter-spacing:.06em;
  }

  /* ---------- エピソード ---------- */

  .back{
    display:inline-flex; align-items:center; gap:8px;
    font-family:"Marcellus",serif; font-size:12px; letter-spacing:.22em;
    color:var(--mute); margin-bottom:32px;
  }
  .back:hover{color:var(--ink)}

  .cover{
    width:176px; aspect-ratio:1; display:block;
    border:1px solid var(--hair); border-radius:2px;
    object-fit:cover; background:rgba(0,0,0,.25); margin-bottom:26px;
  }

  .eyebrow{
    display:flex; align-items:center; gap:12px;
    font-family:"Marcellus",serif; font-size:12px; letter-spacing:.3em;
    color:var(--mute); margin:0 0 16px;
  }
  .eyebrow::before{content:"";width:26px;height:1px;background:var(--brass);flex:0 0 26px}

  .ep__h1{
    font-size:clamp(21px,5.4vw,27px);
    font-weight:700; line-height:1.55; letter-spacing:.01em; margin:0;
  }
  .ep__stamp{
    font-family:"Marcellus",serif; font-size:12px; letter-spacing:.2em;
    color:var(--mute); margin:16px 0 0;
  }
  #episode .listen{margin-top:30px}
  .ep__body{
    font-size:16px; line-height:1.95; margin:0;
    white-space:pre-wrap; word-break:break-word;
  }

  .nav2{display:grid;gap:0;margin-top:0}
  .nav2 a{
    display:flex; align-items:center; gap:12px;
    padding:18px 4px; border-bottom:1px solid var(--hair);
    font-size:14px; line-height:1.6;
  }
  .nav2 a:hover{color:var(--ink)}
  .nav2 .dir{
    font-family:"Marcellus",serif; font-size:12px; letter-spacing:.2em;
    color:var(--mute); flex:0 0 44px;
  }

  /* ---------- 状態 ---------- */

  .skel{padding:20px 2px;border-bottom:1px solid var(--hair)}
  .skel span{
    display:block; height:13px; border-radius:1px;
    background:linear-gradient(90deg,rgba(240,233,220,.07),rgba(240,233,220,.16),rgba(240,233,220,.07));
    background-size:200% 100%;
  }
  .skel span+span{margin-top:9px;width:44%;height:10px}
  

  .btnskel{
    height:56px; border:1px solid var(--hair); border-radius:2px;
    background:rgba(110,30,44,.35);
  }
  

  .empty{
    font-family:"Zen Kaku Gothic New",sans-serif;
    font-size:12px; line-height:2; color:var(--mute); padding:24px 2px; margin:0;
  }
  .empty a{border-bottom:1px solid var(--brass);color:var(--ink)}

  .foot{margin:48px 0 0;text-align:center}
  .foot a.mail{
    font-family:"Marcellus",serif; font-size:13px; letter-spacing:.12em;
    border-bottom:1px solid var(--brass); padding-bottom:3px;
  }
  .colophon{
    font-family:"Marcellus",serif; font-size:12px; letter-spacing:.3em;
    color:rgba(169,150,143,.6); margin:38px 0 0;
  }

  @media (prefers-reduced-motion:reduce){
    *{transition:none !important}
    .wordmark{letter-spacing:.08em;text-indent:.08em;opacity:1}
    .rule{transform:none}
  }

  .ep__body a{text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:4px;overflow-wrap:anywhere}
  .btn{min-height:56px}
  .hosts{line-height:1.9;text-wrap:balance}
  .ep__num{font-variant-numeric:tabular-nums}
  .ep__meta,.ep__stamp{font-variant-numeric:tabular-nums}
  .cover{width:clamp(100px,26vw,144px);height:auto;margin-bottom:22px}
  .back{min-height:32px;margin-bottom:22px}
  .wordmark{font-size:clamp(24px,8.2vw,42px);white-space:nowrap}
  @keyframes settle{from{letter-spacing:.14em;text-indent:.14em;opacity:0}to{letter-spacing:.08em;text-indent:.08em;opacity:1}}
  @media (max-width:399px){.shell{padding-top:38px}.hosts{font-size:12px;letter-spacing:.1em}.ep__stamp{letter-spacing:.1em}}
  @media (prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important;transition:none!important;scroll-behavior:auto!important}}