/* =====================================================================
   AEGIS — BEHIND THE CURTAIN 記事ページ共通スタイル（articles/*.html 用）
   D4 2026-07-10 制定。
   ・羊皮紙の書面（実素材 ../assets/tex-parchment-fine.jpg＝profile.htmlと同じ紙）を
     暗い舞台裏（documentary.htmlと同じ緋のクロワゾネ地）に一枚置く。
   ・世界観語彙は documentary.html を継承（金の縫い目・封蝋・Cinzel/Shippori）。
   ・ink系配色は profile.html（羊皮紙地でAA検証済）と同系統の墨/セピア。
   ・新しい記事は _TEMPLATE.html をコピーして作る。このCSSは共通＝原則触らない。
   ・JSなしで全文が読める（このCSSとフォントだけで完結）。
   ===================================================================== */
:root{
  --ink:#0c0509;
  --crimson:#7a1122;
  --gold:#c8a96a;
  --gold-soft:#e6d3a0;
  --gold-bright:#f1e2b4;
  --ivory:#f4ecd7;
  --ivory-muted:#cdbf9f;
  --paper-ink:#2b2118;
  --paper-ink-soft:#584a39;
  --paper-ink-faint:#645640;
  --max:820px;
  --ease-opera:cubic-bezier(.22,.61,.24,1);
}
*{box-sizing:border-box;}
html{background:var(--ink);color:var(--ivory);scroll-behavior:smooth;-webkit-text-size-adjust:100%;}
body{
  margin:0;min-width:320px;overflow-x:hidden;
  font-family:"Noto Serif JP","Shippori Mincho",serif;line-height:1.9;
  /* documentary.htmlの口上と同じ緋のクロワゾネ地（濃度も同じ＝タイル継ぎ目を沈める） */
  background:
    linear-gradient(180deg, rgba(12,5,8,.97), rgba(30,7,13,.9) 50%, rgba(12,5,8,.98)),
    url("../assets/pat-crimson-cloisonne_AdobeStock_424671422.jpg") center/620px;
  background-blend-mode:normal,multiply;
}
img{max-width:100%;display:block;}
.sr-only{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0;}

/* ---- ナビ（documentary.htmlの晩課のバーと同語彙） ---- */
.playbill-nav{
  position:fixed;top:0;left:0;right:0;z-index:60;
  display:flex;align-items:center;justify-content:space-between;
  padding:12px clamp(16px,3vw,34px);
  background:linear-gradient(180deg,rgba(10,4,7,.92),rgba(10,4,7,.55) 72%,transparent);
  pointer-events:none;
}
.playbill-nav::before{
  content:"";position:absolute;inset:0;z-index:-1;opacity:0;
  background:rgba(10,4,7,.94);
  box-shadow:0 1px 0 rgba(200,169,106,.22), 0 10px 24px rgba(0,0,0,.4);
  transition:opacity .35s var(--ease-opera);
}
.playbill-nav.scrolled::before{
  opacity:1;
  -webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);
}
.playbill-nav a{pointer-events:auto;text-decoration:none;}
.playbill-nav__mark{
  font-family:"Cinzel",serif;font-weight:800;letter-spacing:.24em;font-size:clamp(.95rem,1.4vw,1.1rem);
  background:linear-gradient(180deg,#f0e2b6,#b48b4c);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;
}
.playbill-nav__links{display:flex;gap:clamp(12px,2.4vw,26px);align-items:center;pointer-events:auto;}
.playbill-nav__links a{
  font-family:"Cinzel",serif;font-weight:600;font-size:clamp(.69rem,.85vw,.72rem);
  letter-spacing:.24em;text-transform:uppercase;color:rgba(230,211,160,.72);
  transition:opacity .3s var(--ease-opera);opacity:.85;
}
.playbill-nav__links a:hover{opacity:1;color:var(--gold-bright);}
.playbill-nav__links a.here{color:var(--gold-bright);border-bottom:1px solid rgba(200,169,106,.55);padding-bottom:2px;}
@media (max-width:640px){ .playbill-nav__links a.nav-opt{display:none;} }
@media (max-width:400px){
  .playbill-nav{padding:12px 12px;}
  .playbill-nav__links{gap:10px;}
  .playbill-nav__links a{letter-spacing:.15em;}
}

/* JP/EN 言語スイッチ(2026-07-11・記事共有CSS/ダーク版). [lang=ja]/--current は
   .playbill-nav__links a より高い特異性で必要箇所だけ上書き(TOPで実証済み). */
.playbill-nav__divider{
  width:1px;height:14px;margin:0 clamp(2px,.6vw,7px);flex:0 0 auto;
  background:linear-gradient(180deg,transparent,rgba(200,169,106,.55),transparent);
}
.lang-switch{display:inline-flex;align-items:center;gap:clamp(5px,.9vw,9px);pointer-events:auto;flex:0 0 auto;}
.lang-switch__opt{
  font-family:"Cinzel",serif;font-weight:600;font-size:clamp(.62rem,.85vw,.72rem);
  letter-spacing:.2em;text-transform:uppercase;color:rgba(230,211,160,.72);white-space:nowrap;
  text-decoration:none;opacity:.85;transition:opacity .3s var(--ease-opera),color .3s var(--ease-opera);
}
.lang-switch__opt[lang="ja"]{font-family:"Shippori Mincho","Noto Serif JP",serif;letter-spacing:.12em;}
a.lang-switch__opt:hover{opacity:1;color:var(--gold-bright);}
.lang-switch__opt--current{
  color:var(--gold-bright);opacity:1;cursor:default;
  border-bottom:1px solid rgba(200,169,106,.55);padding-bottom:2px;
}
.lang-switch__slash{color:rgba(200,169,106,.4);font-family:"Cinzel",serif;font-size:.7rem;}
@media (max-width:440px){
  .playbill-nav__divider{display:none;}
  .playbill-nav__links{gap:clamp(9px,2.2vw,14px);}
  .lang-switch{gap:4px;}
  .lang-switch__opt{letter-spacing:.06em;}
  .lang-switch__opt[lang="ja"]{letter-spacing:.02em;}
}

/* ---- 書面の間（記事本体の器） ---- */
.folio{
  position:relative;width:min(100%,var(--max));margin:0 auto;
  padding:clamp(84px,12vh,120px) clamp(16px,4vw,32px) clamp(48px,7vw,80px);
}
.folio__crumb{
  margin:0 0 clamp(16px,2.4vw,24px);
  font-family:"Shippori Mincho",serif;font-weight:600;
  font-size:clamp(.78rem,1vw,.85rem);letter-spacing:.14em;
}
.folio__crumb a{
  color:rgba(230,211,160,.78);text-decoration:none;
  border-bottom:1px solid rgba(200,169,106,.35);padding-bottom:2px;
  transition:color .3s var(--ease-opera);
}
.folio__crumb a:hover{color:var(--gold-bright);}
.folio__crumb a:focus-visible{outline:2px solid var(--gold-bright);outline-offset:3px;}

/* ---- 羊皮紙の書面 ---- */
.sheet{
  position:relative;
  padding:clamp(30px,5vw,58px) clamp(22px,5vw,60px) clamp(34px,5vw,56px);
  color:var(--paper-ink);
  background:
    linear-gradient(180deg, rgba(58,36,18,.12), rgba(58,36,18,0) 14%, rgba(58,36,18,0) 82%, rgba(58,36,18,.18)),
    url("../assets/tex-parchment-fine.jpg") center top/800px auto repeat;
  border:1px solid rgba(36,22,10,.55);
  box-shadow:0 30px 60px rgba(0,0,0,.55), 0 6px 16px rgba(0,0,0,.4);
}
.sheet::before{content:"";position:absolute;inset:7px;border:1px solid rgba(94,66,32,.3);pointer-events:none;}
.sheet__kicker{
  margin:0;font-family:"Cinzel",serif;font-weight:600;
  font-size:clamp(.7rem,.95vw,.78rem);letter-spacing:.4em;text-indent:.4em;
  text-transform:uppercase;color:var(--paper-ink-faint);
}
.sheet__meta{display:flex;align-items:center;gap:14px;flex-wrap:wrap;margin:clamp(14px,2vw,20px) 0 0;}
.sheet__tag{
  font-family:"Shippori Mincho",serif;font-weight:700;font-size:.74rem;letter-spacing:.24em;text-indent:.24em;
  color:var(--crimson);border:1px solid rgba(122,17,34,.5);padding:4px 6px 3px 10px;
}
.sheet__date{font-family:"Shippori Mincho",serif;font-weight:600;font-size:.82rem;letter-spacing:.16em;color:var(--paper-ink-soft);}
.sheet__title{
  margin:clamp(14px,2vw,22px) 0 0;font-family:"Shippori Mincho","Noto Serif JP",serif;font-weight:800;
  font-size:clamp(1.35rem,3.2vw,2.05rem);line-height:1.6;letter-spacing:.04em;color:#241a10;
  /* D4: 記事タイトルは長文になるためkeep-allにしない＝日本語の自然改行（禁則処理あり）。
     keep-allは390pxで実測97pxのはみ出し（"VTuber史上初の"芸術作品"…"の長ラン）を生んだ */
  text-wrap:balance;word-break:normal;
}
.sheet__rule{display:flex;align-items:center;gap:12px;margin:clamp(18px,2.6vw,28px) 0 0;}
.sheet__rule::before,.sheet__rule::after{
  content:"";flex:1;height:1px;
  background:linear-gradient(90deg,transparent,rgba(94,66,32,.55));
}
.sheet__rule::after{transform:scaleX(-1);}
.sheet__body{margin:clamp(20px,3vw,32px) 0 0;}
.sheet__body p{
  margin:0;
  font-size:clamp(.95rem,1.25vw,1.06rem);line-height:2.15;letter-spacing:.05em;color:var(--paper-ink);
  overflow-wrap:break-word;
}
.sheet__body p + p{margin-top:clamp(14px,2vw,22px);}
.sheet__body em{font-style:normal;font-weight:700;color:#5c2510;}
/* ---- D7 2026-07-10: 記事①（社長確定本文）用の組 ----
   ・「ーーーーーー」区切り → 文字を刷らず装飾罫（金の細罫＋封蝋＝既存モチーフ流用）
   ・中央の長文 = プロデューサー囚人Pの声明文 → 書簡調のブロック（字下げ・行間広め・
     問いかけ行はセンター強調）。安いAI装飾は使わない ---- */
.sheet__body .sheet__stamp{ /* 冒頭日付＝書面に押した日付印の扱い */
  display:inline-block;margin:0 0 clamp(10px,1.4vw,14px);
  font-family:"Cinzel","Shippori Mincho",serif;font-weight:700;
  font-size:clamp(.92rem,1.3vw,1.05rem);letter-spacing:.18em;color:var(--crimson);
  border:1px solid rgba(122,17,34,.5);padding:5px 10px 4px 14px;
  transform:rotate(-1.4deg);
}
.sheet__rule--divider{margin:clamp(30px,4.5vw,46px) 0;}
.sheet__statement{ /* 声明文＝書簡ブロック（左右を一段字下げ） */
  margin:0;padding:0 clamp(4px,2.5vw,26px);
}
.sheet__statement p{line-height:2.25;}
.sheet__statement p + p{margin-top:clamp(16px,2.4vw,26px);}
.sheet__statement .sheet__q{ /* 『クラシック音楽は廃れたのか？』＝問いかけの立て行 */
  text-align:center;font-family:"Shippori Mincho","Noto Serif JP",serif;font-weight:800;
  font-size:clamp(1.06rem,1.7vw,1.3rem);letter-spacing:.06em;color:var(--crimson);
}

.sheet__foot{margin:clamp(28px,4vw,44px) 0 0;display:grid;justify-items:center;gap:12px;text-align:center;}
.sheet__sig{
  margin:0;font-family:"Cinzel",serif;font-weight:700;
  font-size:clamp(.72rem,.95vw,.8rem);letter-spacing:.3em;text-indent:.3em;
  text-transform:uppercase;color:var(--paper-ink-faint);
}

/* ---- 封蝋（documentary.htmlのchain-rule__sealと同レシピ＝ノイズ×blobマスク） ---- */
.wax{
  flex:0 0 auto;width:clamp(20px,2.6vw,28px);height:clamp(20px,2.6vw,28px);position:relative;
  background:
    url("data:image/svg+xml;charset=utf-8,<svg xmlns='http://www.w3.org/2000/svg' width='120' height='120'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/><feColorMatrix type='matrix' values='0 0 0 0 0  0 0 0 0 0  0 0 0 0 0  .6 .6 .6 0 0'/></filter><rect width='120' height='120' filter='url(%23n)' opacity='.55'/></svg>"),
    radial-gradient(circle at 38% 32%, #a92b3f 0%, #7e1628 44%, #56101c 78%, #3c0810 100%);
  background-size:cover,cover;background-blend-mode:multiply,normal;
  -webkit-mask-image:url("data:image/svg+xml;charset=utf-8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'><path d='M91.47,50C91.67,57.91 91.06,66.71 87.54,74.12C84.01,81.54 77.66,90.87 70.31,94.47C62.96,98.08 51.74,97.47 43.42,95.76C35.1,94.04 25.98,89.85 20.38,84.19C14.77,78.53 12.14,69.65 9.79,61.81C7.43,53.97 4.56,44.92 6.23,37.15C7.91,29.38 13.62,20.49 19.85,15.2C26.08,9.92 35.27,6.86 43.59,5.43C51.92,4 62.68,3.09 69.81,6.63C76.93,10.17 82.72,19.42 86.33,26.65C89.94,33.88 91.27,42.09 91.47,50Z' fill='%23000'/></svg>");
          mask-image:url("data:image/svg+xml;charset=utf-8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'><path d='M91.47,50C91.67,57.91 91.06,66.71 87.54,74.12C84.01,81.54 77.66,90.87 70.31,94.47C62.96,98.08 51.74,97.47 43.42,95.76C35.1,94.04 25.98,89.85 20.38,84.19C14.77,78.53 12.14,69.65 9.79,61.81C7.43,53.97 4.56,44.92 6.23,37.15C7.91,29.38 13.62,20.49 19.85,15.2C26.08,9.92 35.27,6.86 43.59,5.43C51.92,4 62.68,3.09 69.81,6.63C76.93,10.17 82.72,19.42 86.33,26.65C89.94,33.88 91.27,42.09 91.47,50Z' fill='%23000'/></svg>");
  -webkit-mask-size:100% 100%;mask-size:100% 100%;
  filter:drop-shadow(0 2px 3px rgba(0,0,0,.35));
  transform:rotate(-8deg);
}
.wax::after{content:"";position:absolute;inset:26%;border-radius:50%;
  box-shadow:inset 0 1.5px 2px rgba(30,2,8,.85), inset 0 -1px 1.5px rgba(255,170,150,.28);}
.wax--lg{width:clamp(32px,4.2vw,44px);height:clamp(32px,4.2vw,44px);transform:rotate(6deg);}

/* ---- 戻り導線（documentary.htmlの札=billと同語彙） ---- */
.folio__nav{display:flex;justify-content:center;margin:clamp(26px,4vw,40px) 0 0;}
.folio__back{
  display:inline-flex;flex-direction:column;align-items:center;gap:5px;text-decoration:none;
  min-width:clamp(190px,28vw,250px);padding:clamp(12px,1.6vw,16px) clamp(20px,3vw,30px);
  border:1px solid rgba(200,169,106,.34);border-radius:2px;position:relative;
  background:linear-gradient(180deg,rgba(200,169,106,.07),rgba(200,169,106,.02));
  transition:transform .5s var(--ease-opera);
}
.folio__back::before{content:"";position:absolute;inset:3px;border:1px solid rgba(200,169,106,.14);border-radius:1px;pointer-events:none;}
.folio__back:hover{transform:translateY(-3px);}
.folio__back:focus-visible{outline:2px solid var(--gold-bright);outline-offset:3px;}
.folio__backname{
  font-family:"Cinzel",serif;font-weight:700;letter-spacing:.26em;text-indent:.26em;
  font-size:clamp(.8rem,1.1vw,.95rem);color:var(--gold-soft);
}
.folio__backstate{
  font-family:"Shippori Mincho",serif;font-size:clamp(.72rem,.85vw,.74rem);
  letter-spacing:.18em;color:rgba(205,191,159,.62);
}

/* ---- フッター ---- */
.footer{
  position:relative;text-align:center;padding:clamp(36px,5vw,56px) 20px clamp(28px,4vw,40px);
  background:linear-gradient(180deg,rgba(10,4,7,.98),#0a0406);
  border-top:1px solid rgba(200,169,106,.28);
}
.footer__mark{
  font-family:"Cinzel",serif;font-weight:800;letter-spacing:.24em;font-size:clamp(1.1rem,2.4vw,1.6rem);
  background:linear-gradient(180deg,#f0e2b6,#b48b4c);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;
}
.footer__meta{
  margin-top:14px;font-family:"Cinzel",serif;font-weight:600;letter-spacing:.2em;
  font-size:clamp(.72rem,1vw,.8rem);text-transform:uppercase;color:rgba(205,191,159,.6);
}

@media (prefers-reduced-motion:reduce){
  .folio__back,.playbill-nav::before{transition-duration:.001s !important;}
}