/* ───────────────────────────────────────────────────────────────
   musako.net — global styles
   ワイヤー段階: 低fi · cream + ink + terracotta · 手書き要素

   Tailwind v4 (Vite プラグイン) と併用する前提。
   Tailwind は別ファイル（src/styles/global.css 等）で `@import "tailwindcss";`
   している想定で、本ファイルはトークン + .w-* クラスのみを提供します。
   ─────────────────────────────────────────────────────────── */

/* ─ Design tokens ────────────────────────────────────────────── */
:root{
  --w-cream:        #f2efeb;
  --w-cream-deep:   #e8e4df;
  --w-paper:        #fcfbf8;
  --w-ink:          #1a1714;
  --w-ink-soft:     #3a342d;
  --w-ink-mute:     #7a7268;
  --w-ink-line:     #2b2722;
  --w-accent:       #c25a3c;   /* terracotta */
  --w-accent-soft:  #d98266;
  --w-accent-pale:  #f1d8cc;
  --w-rule:         rgba(26,23,20,.85);
  --w-rule-soft:    rgba(26,23,20,.35);
  --w-rule-faint:   rgba(26,23,20,.18);

  --w-font-hand:    "Klee One", "Yusei Magic", "Zen Maru Gothic", system-ui, sans-serif;
  --w-font-body:    system-ui, -apple-system, sans-serif;
  --w-font-mincho:  "Noto Serif JP", "Hiragino Mincho ProN", "Yu Mincho", "游明朝", "MS PMincho", serif;
  --w-font-mono:    "JetBrains Mono", "Menlo", monospace;

  --w-head-font:    var(--w-font-body);
  --w-density:      1;
}

html, body { background: var(--w-paper); margin:0; }
body{
  font-family: var(--w-font-body);
  color: var(--w-ink);
  -webkit-font-smoothing: antialiased;
}

/* SVG filter source — hidden, referenced via filter:url(#rough) */
.rough-source{ position:absolute; width:0; height:0; }

/* ─ Frame ────────────────────────────────────────────────────── */
.w-frame{
  background: var(--w-paper);
  color: var(--w-ink);
  position: relative;
  overflow-x: clip; /* 水平はみ出しのみ抑制（position:sticky と両立） */
  font-family: var(--w-font-body);
  max-width: 1120px;
  margin: 0 auto;
}

/* ─ Sketch primitives ────────────────────────────────────────── */
.ink, .ink-box, .ink-line, .ink-divider, .ink-rule{ filter: url(#rough); }
.ink-box{
  border: 1.6px solid var(--w-ink-line);
  border-radius: 2px;
  background: transparent;
}
.ink-box.soft  { border-color: var(--w-rule-soft); }
.ink-box.dash  { border-style: dashed; }
.ink-box.fill  { background: var(--w-cream); }
.ink-box.fill-deep { background: var(--w-cream-deep); }
.ink-box.fill-accent { background: var(--w-accent-pale); border-color: var(--w-accent); }

.ink-rule{ height: 0; border: 0; border-top: 1.6px solid var(--w-ink-line); margin: 0; }
.ink-rule.thin   { border-top-width: 1px; opacity:.55; }
.ink-rule.double { border-top: 4px double var(--w-ink-line); }

/* ─ Text bars (body-copy placeholder) ────────────────────────── */
.bar{
  display: block;
  height: 7px;
  background: var(--w-ink-soft);
  opacity: .68;
  border-radius: 1px;
  margin: 6px 0;
}
.bar.short{ width: 40%; }
.bar.med  { width: 70%; }
.bar.long { width: 92%; }
.bar.full { width: 100%; }
.bar.soft { opacity: .35; }
.bar.tall { height: 10px; }
.bars > .bar:last-child{ width: 55%; }

/* ─ Image placeholder ────────────────────────────────────────── */
.ph-img{
  border: 1.6px solid var(--w-ink-line);
  background:
    repeating-linear-gradient( 45deg,
      transparent 0 8px,
      var(--w-rule-faint) 8px 9px);
  position: relative;
  filter: url(#rough);
}
.ph-img::after{
  content: '';
  position:absolute; inset:0;
  background:
    linear-gradient(  to top right, transparent calc(50% - .8px), var(--w-rule-soft) calc(50% - .8px) calc(50% + .8px), transparent calc(50% + .8px) ),
    linear-gradient(  to top left,  transparent calc(50% - .8px), var(--w-rule-soft) calc(50% - .8px) calc(50% + .8px), transparent calc(50% + .8px) );
}
.ph-img .ph-tag{
  position:absolute; left:6px; bottom:6px;
  font-family: var(--w-font-hand);
  font-size: 11px;
  background: var(--w-paper);
  padding: 1px 6px;
  border: 1px solid var(--w-ink-line);
  filter: none;
}
.ph-img.hero{
  background:
    repeating-linear-gradient( 45deg,
      var(--w-cream-deep) 0 12px,
      var(--w-cream) 12px 13px);
}
.ph-img.fill-accent{
  background:
    repeating-linear-gradient( 45deg,
      var(--w-accent-pale) 0 12px,
      var(--w-paper) 12px 13px);
}

/* ─ Headlines ────────────────────────────────────────────────── */
.h-hand, .w-hd{ font-family: var(--w-head-font); letter-spacing: .01em; }
.h-mincho   { font-family: var(--w-font-mincho); }
.h-gothic   { font-family: var(--w-font-body); font-weight: 700; }
.hd-mega { font-size: 38px; line-height: 1.15; font-weight: 600; }
.hd-xl   { font-size: 26px; line-height: 1.2;  font-weight: 600; }
.hd-lg   { font-size: 19px; line-height: 1.25; font-weight: 600; }
.hd-md   { font-size: 15px; line-height: 1.3;  font-weight: 600; }
.hd-sm   { font-size: 12.5px; line-height:1.3; font-weight: 600; }

/* ─ Chips / Buttons ──────────────────────────────────────────── */
.chip{
  display:inline-flex; align-items:center; gap:4px;
  font-size: 11px; font-weight: 600;
  padding: 2px 7px;
  border: 1.4px solid var(--w-ink-line);
  border-radius: 2px;
  background: var(--w-paper);
  white-space: nowrap;
  filter: url(#rough);
}
.chip.accent { background: var(--w-accent); color: var(--w-paper); border-color: var(--w-accent); }
.chip.ink    { background: var(--w-ink);    color: var(--w-paper); border-color: var(--w-ink); }
.chip.ghost  { background: transparent; }
.chip.soft   { border-color: var(--w-rule-soft); color: var(--w-ink-soft); }

.w-btn{
  display:inline-flex; align-items:center; gap:6px;
  font-family: var(--w-font-body); font-weight: 600; font-size: 13px;
  padding: 8px 14px;
  border: 1.6px solid var(--w-ink-line);
  background: var(--w-paper);
  color: var(--w-ink);
  text-decoration: none;
  cursor: pointer;
  filter: url(#rough);
}
.w-btn.primary{ background: var(--w-accent); color: var(--w-paper); border-color: var(--w-accent); }
.w-btn.ink    { background: var(--w-ink);    color: var(--w-paper); border-color: var(--w-ink); }
.w-btn.lg     { font-size: 15px; padding: 11px 20px; }

/* ─ Ticker ───────────────────────────────────────────────────── */
.w-ticker{
  display: flex; align-items: center;
  background: var(--w-ink);
  color: var(--w-paper);
  font-family: var(--w-font-body);
  font-size: 12px;
  letter-spacing: .02em;
  padding: 6px 12px;
  gap: 14px;
  white-space: nowrap;
  overflow: hidden;
}
.w-ticker .tk-label{
  background: var(--w-accent);
  color: var(--w-paper);
  font-family: var(--w-head-font);
  font-weight: 700;
  padding: 2px 8px;
  letter-spacing: .08em;
  flex: 0 0 auto;
}
.w-ticker .tk-item{ display:inline-flex; align-items:center; gap:8px; opacity:.92; }
.w-ticker .tk-time{ color: var(--w-accent-soft); font-family: var(--w-font-mono); font-size: 11px; }
.w-ticker .tk-dot{ width:4px; height:4px; background: var(--w-paper); opacity:.4; border-radius:50%; }

/* ─ Masthead / Nav ───────────────────────────────────────────── */
.w-masthead{
  display: flex; align-items: flex-end; justify-content: space-between;
  padding: 18px 28px 12px;
  border-bottom: 1.6px solid var(--w-ink-line);
}
.w-masthead.compact{ padding: 12px 20px 8px; }
.w-mast-meta{
  font-family: var(--w-font-mono);
  font-size: 11px;
  color: var(--w-ink-soft);
  text-transform: uppercase;
  letter-spacing: .15em;
  width: 110px;
}
.w-mast-meta.right{ text-align: right; }
.w-logo{
  font-family: 'Boldonse', var(--w-head-font);
  font-size: 44px;
  line-height: 1;
  font-weight: 400;
  letter-spacing: -.01em;
}
.w-logo .dot{ color: var(--w-accent); }

.w-nav{
  display:flex; align-items:center; gap: 18px;
  padding: 8px 28px;
  font-family: var(--w-font-body);
  font-size: 13px;
  border-bottom: 1px solid var(--w-rule-soft);
}
.w-nav a, .w-nav .nv{
  padding: 4px 2px;
  color: var(--w-ink);
  text-decoration: none;
}
.w-nav .nv.active, .w-nav a.active{
  border-bottom: 2px solid var(--w-accent);
  font-weight: 700;
}
.w-nav .tail{
  margin-left: auto;
  font-size: 12px;
  color: var(--w-ink-soft);
}

/* ─ Magazine masthead (logo top / nav row below) ─────────────── */
.w-magmast{
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  padding: 16px 28px;
  background: var(--w-ink);
  color: var(--w-cream);
  border-bottom: 1.6px solid #000;
}
.w-magmast .w-logo{ font-size: 32px; color: var(--w-cream); }
.w-magmast .w-logo .dot{ color: var(--w-accent); }
.w-magmast nav{ display:flex; gap:16px; font-size:13px; flex-wrap: wrap; justify-content: center; }
.w-magmast a{ color: var(--w-cream); text-decoration: none; }
.w-magmast a:hover{ opacity: 0.85; }
.w-magmast .tipoff{ color: var(--w-accent); font-weight: 700; }

.w-magmast .mm-tagline{
  font-family: var(--w-font-mono);
  font-size: 10px;
  letter-spacing: 0.18em;
  color: rgba(242,239,235,0.6);
  text-transform: uppercase;
  margin-bottom: 2px;
}
.w-magmast .mm-nav{
  display: flex;
  gap: 22px;
  margin-top: 8px;
  flex-wrap: wrap;
  justify-content: center;
}
.w-magmast a.mm-pill{
  display: inline-block;
  padding: 4px 2px;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.08em;
  color: var(--w-cream);
  background: transparent;
  border: none;
  border-bottom: 1.6px solid transparent;
  transition: color .15s ease, border-color .15s ease;
  text-decoration: none;
}
.w-magmast a.mm-pill:hover{
  color: var(--w-accent);
  border-bottom-color: var(--w-accent);
  opacity: 1;
}

/* ─ Live bar (hybrid top) ────────────────────────────────────── */
.w-livebar{
  background: var(--w-ink); color: var(--w-paper);
  padding: 6px 28px; font-size: 11px;
  font-family: var(--w-font-mono); letter-spacing: .04em;
  display: flex; align-items: center; gap: 14px;
}
.w-livebar .live-dot{ color: var(--w-accent-soft); font-weight: 700; }
.w-livebar .dim{ opacity: .55; }
.w-livebar .sub{ opacity: .85; }
.w-livebar .end{ margin-left: auto; opacity: .55; }

/* ─ Tabbar / mobile ──────────────────────────────────────────── */
.w-tabbar{
  display:flex; align-items:center; justify-content:space-around;
  border-top: 1px solid var(--w-rule-soft);
  background: var(--w-paper);
  padding: 6px 0 10px;
}
.w-tabbar .tb{
  display:flex; flex-direction: column; align-items: center; gap: 2px;
  font-family: var(--w-head-font);
  font-size: 10px;
  color: var(--w-ink-soft);
  width: 56px;
}
.w-tabbar .tb.active{ color: var(--w-accent); }
.w-tabbar .tb .ic{
  width:22px; height:22px;
  border: 1.4px solid currentColor; border-radius: 5px;
  filter: url(#rough);
}

/* ─ Story card ───────────────────────────────────────────────── */
.w-card{
  position: relative;
  background: var(--w-paper);
  border: 1.6px solid var(--w-ink-line);
  padding: 10px;
  filter: url(#rough);
}
.w-card .cat{
  position:absolute; top: -10px; left: 8px;
  background: var(--w-paper);
  padding: 0 6px;
  font-family: var(--w-head-font);
  font-size: 11px;
  font-weight: 700;
}
.w-card .cat.accent{ color: var(--w-accent); }

/* ─ Misc / utility ───────────────────────────────────────────── */
.smallcaps{
  font-family: var(--w-font-mono);
  text-transform: uppercase;
  letter-spacing: .18em;
  font-size: 11px;
  color: var(--w-ink-soft);
}
.handnote{
  font-family: var(--w-head-font);
  color: var(--w-accent);
  font-size: 13px;
  transform: rotate(-1.5deg);
  display: inline-block;
}
.handnote.straight{ transform: none; }

.dense-scope{ font-size: calc(13px * var(--w-density)); }
.dense-scope .bar{ margin: calc(6px * var(--w-density)) 0; }

/* ─ Map sketch ───────────────────────────────────────────────── */
.w-mapwrap{
  border: 1.6px solid var(--w-ink-line);
  background: var(--w-cream);
  filter: url(#rough);
  position: relative;
  overflow: hidden;
}
.w-pin{
  position:absolute;
  width: 14px; height: 14px;
  border-radius: 50%;
  background: var(--w-accent);
  border: 2px solid var(--w-paper);
  box-shadow: 0 0 0 1.2px var(--w-ink-line);
  transform: translate(-50%,-50%);
}
.w-pin.open  { background: var(--w-accent); }
.w-pin.close { background: var(--w-ink); }
.w-pin.evt   { background: var(--w-paper); border-color: var(--w-ink); }

/* ─ Page wrap ────────────────────────────────────────────────── */
.pg{ display: block; width: 100%; }
.pg .pad{ padding: 18px 28px; }

/* ─ Section label ────────────────────────────────────────────── */
.sec-label{
  display:flex; align-items:center; gap: 10px;
  margin: 18px 0 8px;
  font-family: var(--w-head-font);
  font-weight: 700;
  font-size: 15px;
}
.sec-label::before{
  content:''; width: 18px; height: 18px;
  background: var(--w-accent);
  filter: url(#rough);
  flex: 0 0 18px;
}
.sec-label .more{
  margin-left: auto;
  font-family: var(--w-font-body);
  font-weight: 500;
  font-size: 12px;
  color: var(--w-ink-soft);
  border-bottom: 1px solid currentColor;
}

/* ─ Footer ───────────────────────────────────────────────────── */
.w-footer{
  background: var(--w-ink);
  color: var(--w-paper);
  padding: 22px 28px;
  font-size: 12px;
}
.w-footer .logo{
  font-family: var(--w-head-font);
  font-size: 22px;
  color: var(--w-paper);
}
.w-footer .logo .dot{ color: var(--w-accent-soft); }
.w-footer .row{
  display:flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 12px;
}
.w-footer .f-nav{
  display:flex; gap:18px 20px; font-size:13px; flex-wrap: wrap;
}
.w-footer .f-nav a{ color: var(--w-paper); text-decoration: none; white-space: nowrap; }
.w-footer .f-nav a:hover{ opacity: 0.8; }
.w-footer .copy{
  margin-top:14px; font-size:10px; opacity:.4;
  border-top:1px solid rgba(255,255,255,.18); padding-top:8px;
}
@media (max-width: 700px){
  .w-footer .row{ flex-direction: column; align-items: flex-start; gap: 14px; }
  .w-footer .f-nav{ gap: 10px 18px; font-size: 12px; }
}

/* ─ Experience corner ────────────────────────────────────────── */
.w-exp{
  background: var(--w-cream-deep);
  border-top: 1.6px solid var(--w-ink-line);
  border-bottom: 1.6px solid var(--w-ink-line);
  padding: 22px 28px;
}
.w-exp .lead{
  font-family: var(--w-head-font);
  font-size: 17px;
  font-weight: 700;
}
.w-exp .grid{
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 14px;
  margin-top: 12px;
}

/* ─ Calendar sketch ──────────────────────────────────────────── */
.w-cal{
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  border: 1.6px solid var(--w-ink-line);
  filter: url(#rough);
}
.w-cal .cell{
  aspect-ratio: 1;
  border-right: 1px solid var(--w-rule-soft);
  border-bottom: 1px solid var(--w-rule-soft);
  padding: 4px 5px;
  font-size: 10px;
  font-family: var(--w-font-mono);
  color: var(--w-ink-soft);
  position: relative;
}
.w-cal .cell.has::after{
  content:''; position:absolute; left:5px; bottom:5px; right:5px;
  height: 4px;
  background: var(--w-accent);
}
.w-cal .cell.has2::after{
  background: linear-gradient(90deg, var(--w-accent) 0 60%, var(--w-ink) 60% 100%);
}
.w-cal .head{
  aspect-ratio: auto;
  padding: 4px 6px;
  background: var(--w-ink);
  color: var(--w-paper);
  font-family: var(--w-head-font);
  font-size: 11px;
}

/* ─ Annotation ───────────────────────────────────────────────── */
.annot{
  position:absolute;
  font-family: var(--w-head-font);
  color: var(--w-accent);
  font-size: 12px;
  background: var(--w-paper);
  padding: 2px 6px;
  border: 1.2px solid var(--w-accent);
  filter: url(#rough);
}

/* ─ Responsive — fold to single column under 720px ───────────── */
@media (max-width: 720px){
  .w-frame{ font-size: 13px; }
  .w-masthead{ padding: 14px 16px 10px; }
  .w-masthead .w-mast-meta{ display: none; }
  .w-logo{ font-size: 32px; }
  .w-nav{ padding: 8px 16px; gap: 12px; overflow-x: auto; }
  .w-nav .tail{ display: none; }
  .pg .pad{ padding: 14px 16px; }
  .hd-mega{ font-size: 26px; }
  .hd-xl{ font-size: 20px; }
  .w-exp .grid{ grid-template-columns: 1fr; }
  .w-magmast{ padding: 10px 12px; gap: 6px; }
  .w-magmast .w-logo{ font-size: 24px; }
  .w-magmast nav{ font-size: 12px; gap: 10px; }
  .w-magmast .mm-tagline{ font-size: 9px; letter-spacing: 0.14em; }
  .w-magmast a.mm-pill{ padding: 4px 12px; font-size: 11px; }
  .grid-2{ grid-template-columns: 1fr !important; }
  .grid-3{ grid-template-columns: 1fr 1fr !important; }
  .grid-4{ grid-template-columns: 1fr 1fr !important; }
  .hide-sm{ display: none !important; }
}

/* ───────────────────────────────────────────────────────────────────
   Article body（microCMS リッチテキスト用）
   Tailwind v4 preflight が h1-h6/p/ul/ol のマージンをリセットするので
   ここで段落・見出しの間隔・装飾を戻す。class="w-article-body" を
   付けた要素の子孫に効く。
   ─────────────────────────────────────────────────────────────────── */
.w-article-body { color: var(--w-ink); font-size: 15px; line-height: 1.9; }
.w-article-body > * + * { margin-top: 1em; }
.w-article-body h2 {
  font-size: 1.25em; font-weight: 700; line-height: 1.4;
  margin-top: 1.8em; padding-bottom: .3em;
  border-bottom: 1.6px solid var(--w-ink-line);
}
.w-article-body h3 {
  font-size: 1.1em; font-weight: 700; line-height: 1.4;
  margin-top: 1.6em;
  padding-left: .6em; border-left: 4px solid var(--w-accent);
}
.w-article-body h4 { font-size: 1em; font-weight: 700; margin-top: 1.4em; }
.w-article-body p { margin: 0; }
.w-article-body ul, .w-article-body ol { padding-left: 1.5em; }
.w-article-body ul { list-style: disc; }
.w-article-body ol { list-style: decimal; }
.w-article-body li + li { margin-top: .3em; }
.w-article-body a { color: var(--w-accent); text-decoration: underline; }
.w-article-body strong { font-weight: 700; }
.w-article-body em { font-style: italic; }
.w-article-body blockquote {
  border-left: 4px solid var(--w-rule-soft);
  padding: .4em 1em; color: var(--w-ink-mute); font-style: italic;
}
.w-article-body code {
  background: var(--w-cream); padding: 1px 6px; border-radius: 3px;
  font-family: var(--w-font-mono); font-size: .9em;
}
.w-article-body pre {
  background: var(--w-cream); padding: 12px 14px; border-radius: 3px;
  overflow-x: auto; font-size: .85em;
}
.w-article-body pre code { background: transparent; padding: 0; }
.w-article-body img {
  max-width: 100%; height: auto;
  border: 1px solid var(--w-ink-line); margin: 1em 0;
}
.w-article-body hr {
  border: none; border-top: 1.6px solid var(--w-ink-line); margin: 2em 0;
}
.w-article-body table {
  border-collapse: collapse; width: 100%; font-size: .95em;
}
.w-article-body th, .w-article-body td {
  border: 1px solid var(--w-ink-line); padding: 6px 10px; text-align: left;
}
.w-article-body th { background: var(--w-cream); font-weight: 700; }