/* ドロクサーアーカイブ 共通の土台（docs/design-foundation.md） */
@import url("https://fonts.googleapis.com/css2?family=Dela+Gothic+One&family=Zen+Kaku+Gothic+New:wght@400;500;700;900&display=swap");

:root{
  --paper:#FFFFFF; --ink:#000000; --grey:#6E6E73; --rule:#DADADF;
  --live:#9146FF; --live-ground:#F1EAFF;
  --display:"Dela Gothic One","Zen Kaku Gothic New",sans-serif;
  --text:"Zen Kaku Gothic New","Hiragino Sans",sans-serif;
  --measure:40em; --gutter:clamp(16px,4vw,48px); --max:1480px;
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--paper);color:var(--ink);font:400 16px/1.85 var(--text);-webkit-font-smoothing:antialiased}
a{color:inherit}
img{display:block;max-width:100%}
:focus-visible{outline:3px solid var(--live);outline-offset:2px}

.wrap{max-width:var(--max);margin:0 auto;padding:0 var(--gutter)}

/* 見出し：極太の文字そのものを主役にする */
.d1,.d2,.d3{font-family:var(--display);font-weight:400;line-height:1.08;letter-spacing:.01em;margin:0}
.d1{font-size:clamp(44px,8vw,112px)}
.d2{font-size:clamp(30px,4.6vw,56px)}
.d3{font-size:clamp(22px,2.6vw,30px)}
.lead{max-width:var(--measure);color:var(--grey);margin:.6em 0 0}

/* サイトの頭 */
.site{border-bottom:2px solid var(--ink)}
.site .wrap{display:flex;align-items:center;gap:32px;min-height:68px;flex-wrap:wrap}
.mark{font-family:var(--display);font-size:22px;text-decoration:none;line-height:1}
.nav{display:flex;gap:24px;margin-left:auto}
.nav a{text-decoration:none;font-weight:700;font-size:15px;padding:22px 0 18px;border-bottom:4px solid transparent}
.nav a[aria-current="page"]{border-bottom-color:var(--ink)}
.nav a:hover{border-bottom-color:var(--rule)}

/* 操作 */
.btn{display:inline-block;background:var(--ink);color:var(--paper);text-decoration:none;font-weight:700;font-size:15px;padding:12px 20px;border:2px solid var(--ink)}
.btn:hover{background:var(--paper);color:var(--ink)}
.btn.sub{background:var(--paper);color:var(--ink)}
.btn.sub:hover{background:var(--ink);color:var(--paper)}
.link{font-weight:700;text-decoration:underline;text-decoration-thickness:2px;text-underline-offset:4px}
.link:hover{color:var(--live)}

/* 区切り */
.sec{padding:clamp(36px,4.5vw,64px) 0;border-top:2px solid var(--ink)}
.sec-head{display:flex;align-items:baseline;justify-content:space-between;gap:24px;flex-wrap:wrap;margin-bottom:22px}

/* 紫は「いま流れている」ものだけ */
.live{color:var(--live)}
.avatar{border-radius:50%;object-fit:cover;background:var(--rule)}

/* サイトの尻 */
.foot{border-top:2px solid var(--ink);padding:40px 0 56px;font-size:14px;color:var(--grey)}
.foot nav{display:flex;flex-wrap:wrap;gap:8px 24px;margin-bottom:16px}
.foot nav a{color:var(--ink);font-weight:700;text-decoration:none}

@media (prefers-reduced-motion:reduce){ *{animation:none!important;transition:none!important} }