/* =========================================================
   compania — style.css
   動きの土台（パララックス／背景クロスフェード／reveal）は
   参照サイトの構造を完全再現。色・タイポは compania 用に調整可。
   ========================================================= */

:root {
  /* セクションごとの背景色（スクロールでクロスフェード） */
  --bg-hero:      #ffffff;
  --bg-about:     #14140f;
  --bg-act:       #e2d8c6;
  --bg-activists: #3a1e20;
  --bg-anthology: #1f1f1b;

  --ink-dark:  #14140f;
  --ink-mid:   #4a463d;
  --ink-soft:  #8a8375;
  --paper:    #efeae2;
  --paper-2:  #f6f2ea;

  --line-dark:  rgba(20,20,15,0.18);
  --line-light: rgba(239,234,226,0.22);

  /* 全体で共有するイージング */
  --easing: cubic-bezier(.2,.7,.2,1);
}

/* CMSリンク・個別記事（既存デザインを維持するための最小追記） */
.legacy-cms-placeholder { display: none !important; }
#anthology a.work { color: inherit; text-decoration: none; display: flex; }
.article-page { background: var(--ink-dark); color: var(--paper); min-height: 100vh; padding: 120px 40px 80px; }
.article-wrap { max-width: 960px; margin: 0 auto; }
.article-back { color: inherit; text-decoration: none; font: 11px 'JetBrains Mono', monospace; letter-spacing: .18em; }
.article-title { font: 300 clamp(52px, 9vw, 120px)/.95 'Cormorant Garamond','Shippori Mincho',serif; margin: 80px 0 20px; }
.article-meta { opacity: .6; font: 11px 'JetBrains Mono',monospace; letter-spacing: .16em; }
.article-image { width: 100%; max-height: 650px; object-fit: cover; margin: 56px 0; }
.article-body { max-width: 720px; margin: 60px 0; font: 400 16px/2.2 'Noto Sans JP',sans-serif; }
@media (max-width: 900px) { .article-page { padding: 100px 20px 60px; } }

* { box-sizing: border-box; margin: 0; padding: 0; }

html, body {
  background: var(--bg-hero);
  color: var(--ink-dark);
  font-family: 'Inter', 'Noto Sans JP', system-ui, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
  scroll-behavior: smooth;
}

/* 日本語まわりのユーティリティ */
.jp {
  font-family: 'Noto Sans JP', 'Inter', sans-serif;
  font-feature-settings: "palt";
}
.jp-serif {
  font-family: 'Shippori Mincho', 'Cormorant Garamond', serif;
  font-feature-settings: "palt";
}
.jp-title {
  font-family: 'Shippori Mincho', 'Cormorant Garamond', serif;
  font-weight: 400;
  letter-spacing: 0.02em;
  font-feature-settings: "palt";
}

body[data-section="hero"] {
  background: #ffffff;
}

a { color: inherit; text-decoration: none; }

/* ---------- 固定クローム（上下レール） ---------- */

.rail {
  position: fixed;
  left: 0; right: 0;
  z-index: 50;
  padding: 20px 40px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-family: 'Inter', sans-serif;
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  pointer-events: none;
  transition: color 0.9s var(--easing);
  /* difference 合成でどんな背景でも文字が読める */
  mix-blend-mode: difference;
  color: #fff;
}
.rail > * { pointer-events: auto; }
.rail.top { top: 0; }
.rail.bottom { bottom: 0; font-size: 10px; }

.brand-mark {
  display: flex;
  align-items: center;
  gap: 10px;
}
.brand-mark .dot {
  width: 6px; height: 6px; border-radius: 50%;
  background: currentColor;
}

.nav-inline {
  display: flex;
  gap: 28px;
}
.nav-inline a {
  position: relative;
  opacity: 0.75;
  transition: opacity 0.3s var(--easing);
}
.nav-inline a:hover { opacity: 1; }
.nav-inline a .idx {
  font-family: 'JetBrains Mono', monospace;
  font-size: 9px;
  opacity: 0.6;
  margin-right: 6px;
}

.scroll-indicator {
  display: flex; align-items: center; gap: 10px;
}
.scroll-indicator .bar {
  width: 40px; height: 1px; background: currentColor;
  position: relative; overflow: hidden;
}
/* 左→右へ流れ続けるパルス */
.scroll-indicator .bar::after {
  content: '';
  position: absolute; inset: 0;
  background: currentColor;
  transform: translateX(-100%);
  animation: railpulse 2.4s var(--easing) infinite;
}
@keyframes railpulse {
  0% { transform: translateX(-100%); }
  60% { transform: translateX(100%); }
  100% { transform: translateX(100%); }
}

/* ---------- パララックス・ロゴ（背面固定レイヤー） ---------- */

.logo-stage {
  position: fixed;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  overflow: hidden;
}
.logo-stage .logo {
  width: 82vmin;
  height: 82vmin;
  max-width: 920px;
  max-height: 920px;
  margin-right: -12vmin; /* 右端から少しはみ出させる */
  /* 透過処理済みロゴマーク(CA)。SVG（ベクター）＝拡大しても劣化しない。
     旧ブラウザ向けに logo_mark.png（透過）も同梱済み。 */
  background-image: url('assets/logo_mark.svg');
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
  will-change: transform, filter, opacity;
  transition:
    filter 1.1s var(--easing),
    opacity 1.1s var(--easing),
    mix-blend-mode 0s;
  /* --logoBaseY: ロゴの基準位置を下げる量（パララックスは維持）
     JS が --logoY / --logoScale / --logoRot を更新 */
  --logoBaseY: 16vmin;
  transform: translate3d(0, calc(var(--logoBaseY, 0px) + var(--logoY, 0px)), 0) scale(var(--logoScale, 1)) rotate(var(--logoRot, 0deg));
}

/* セクションごとのロゴ処理（透過PNG＝黒アートワーク前提） */
body[data-section="hero"]      .logo { filter: none; opacity: 1; }
body[data-section="about"]     .logo { filter: invert(1); opacity: 0.10; }
body[data-section="act"]       .logo { filter: none; opacity: 0.08; }
body[data-section="activists"] .logo { filter: invert(1); opacity: 0.06; }
body[data-section="anthology"] .logo { filter: invert(1); opacity: 0.03; }

/* ---------- セクション背景レイヤー（クロスフェード） ---------- */

.bg-layer {
  position: fixed;
  inset: 0;
  z-index: 0;
  opacity: 0;
  transition: opacity 1.1s var(--easing);
  pointer-events: none;
}
.bg-layer.hero      { background: var(--bg-hero); }
.bg-layer.about     { background: var(--bg-about); }
.bg-layer.act       { background: var(--bg-act); }
.bg-layer.activists { background: var(--bg-activists); }
.bg-layer.anthology { background: var(--bg-anthology); }

body[data-section="hero"]      .bg-layer.hero,
body[data-section="about"]     .bg-layer.about,
body[data-section="act"]       .bg-layer.act,
body[data-section="activists"] .bg-layer.activists,
body[data-section="anthology"] .bg-layer.anthology { opacity: 1; }

/* ---------- コンテンツ ---------- */

main {
  position: relative;
  z-index: 2;
}

section {
  position: relative;
  min-height: 100vh;
  padding: 120px 40px 80px;
  display: flex;
  align-items: center;
}

.container {
  width: 100%;
  max-width: 1440px;
  margin: 0 auto;
}

/* セクション番号ラベル */
.sec-index {
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  opacity: 0.6;
  display: flex;
  align-items: center;
  gap: 12px;
}
.sec-index::before {
  content: '';
  width: 32px; height: 1px;
  background: currentColor;
  opacity: 0.7;
}

/* --- HERO --- */
#hero {
  min-height: 100vh;
  padding-top: 0;
  padding-bottom: 0;
}
.hero-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: center;
  min-height: 100vh;
  width: 100%;
  gap: 40px;
}
.hero-left {
  padding-left: 20px;
  align-self: end;         /* コンテンツをヒーロー下部へ寄せる */
  padding-bottom: 80px;    /* 下部レールとの余白 */
}
.hero-eyebrow {
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: var(--ink-mid);
  margin-bottom: 32px;
  display: flex; align-items: center; gap: 12px;
}
.hero-eyebrow::before {
  content: ''; width: 24px; height: 1px; background: currentColor;
}
.hero-stack {
  display: flex;
  flex-direction: column;
  gap: 0;
}
.hero-stack .word {
  font-family: 'Inter', sans-serif;
  font-weight: 400;
  font-size: clamp(28px, 3.4vw, 44px); /* 拡大：ヒーローの主役テキスト */
  line-height: 1.5;
  letter-spacing: 0.01em;
  color: var(--ink-dark);
  position: relative;
  display: inline-flex;
  align-items: baseline;
  gap: 24px;
}
.hero-stack .word .num {
  font-family: 'JetBrains Mono', monospace;
  font-weight: 400;
  font-size: 12px;
  letter-spacing: 0.2em;
  color: var(--ink-soft);
  min-width: 32px;
}
.hero-stack .word em {
  font-style: normal;
  font-weight: 500;
}

.hero-foot {
  margin-top: 40px;
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 40px;
  max-width: 480px;
  font-size: 13px;
  color: var(--ink-mid);
  line-height: 1.8;
  letter-spacing: 0.02em;
}
.hero-foot .meta {
  font-family: 'JetBrains Mono', monospace;
  font-size: 10px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--ink-soft);
}

/* --- 汎用 dark / light セクション --- */
section.dark { color: var(--paper); }
section.dark .sec-index { color: var(--paper); opacity: 0.55; }
section.dark .rule { background: var(--line-light); }

section.light { color: var(--ink-dark); }
section.light .rule { background: var(--line-dark); }

.rule {
  height: 1px;
  width: 100%;
  background: var(--line-dark);
}

/* セクションタイトル */
.sec-title {
  font-family: 'Cormorant Garamond', serif;
  font-weight: 300;
  font-size: clamp(72px, 10vw, 148px);
  line-height: 0.95;
  letter-spacing: -0.02em;
  margin-top: 40px;
}
.sec-title em { font-style: italic; font-weight: 300; }

/* --- ABOUT --- */
#about .container {
  display: grid;
  grid-template-columns: 1fr 1.1fr;
  gap: 120px;
  align-items: start;
}
#about .left { padding-top: 20px; }
#about .right {
  padding-top: 120px;
  max-width: 560px;
}
#about .right p {
  font-family: 'Cormorant Garamond', serif;
  font-weight: 300;
  font-size: 22px;
  line-height: 1.55;
  letter-spacing: 0.005em;
  margin-bottom: 28px;
}
#about .right p + p {
  font-family: 'Inter', sans-serif;
  font-size: 13px;
  line-height: 1.75;
  letter-spacing: 0.01em;
  color: rgba(239,234,226,0.65);
  max-width: 440px;
}
#about .stats {
  margin-top: 60px;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 32px;
  padding-top: 32px;
  border-top: 1px solid var(--line-light);
  max-width: 480px;
}
#about .stats .stat .k {
  font-family: 'Cormorant Garamond', serif;
  font-size: 42px;
  font-weight: 300;
  line-height: 1;
}
#about .stats .stat .l {
  font-family: 'JetBrains Mono', monospace;
  font-size: 9px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  opacity: 0.55;
  margin-top: 10px;
}

/* --- ACT（事業／サービス一覧） --- */
#act .container {
  display: grid;
  grid-template-columns: 1fr;
  gap: 80px;
}
#act .head {
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: end;
  gap: 40px;
}
#act .head .lede {
  max-width: 420px;
  font-family: 'Cormorant Garamond', serif;
  font-size: 20px;
  line-height: 1.5;
  font-weight: 300;
  color: var(--ink-mid);
}
#act .list {
  display: flex;
  flex-direction: column;
}
#act .item {
  display: grid;
  grid-template-columns: 60px 1.2fr 2fr 120px;
  align-items: baseline;
  gap: 32px;
  padding: 28px 4px;
  border-top: 1px solid var(--line-dark);
  transition: background 0.4s var(--easing), padding-left 0.4s var(--easing);
}
#act a.item { color: inherit; text-decoration: none; min-height: 44px; }
#act .item:last-child { border-bottom: 1px solid var(--line-dark); }
/* ホバーで右へスライド */
#act .item:hover { padding-left: 16px; background: rgba(20,20,15,0.03); }
#act .item .num {
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px;
  letter-spacing: 0.2em;
  color: var(--ink-soft);
}
#act .item .title {
  font-family: 'Cormorant Garamond', serif;
  font-size: 32px;
  font-weight: 300;
  letter-spacing: -0.005em;
}
#act .item .title em { font-style: italic; }
#act .item .desc {
  font-size: 13px;
  line-height: 1.65;
  color: var(--ink-mid);
  max-width: 460px;
}
#act .item .when {
  font-family: 'JetBrains Mono', monospace;
  font-size: 10px;
  letter-spacing: 0.18em;
  color: var(--ink-soft);
  text-align: right;
  text-transform: uppercase;
}
#act .item .when span { display:block; margin-top:8px; }

/* --- ACTIVISTS（メンバー／チーム） --- */
#activists .container {
  display: grid;
  grid-template-columns: 1fr;
  gap: 80px;
}
#activists .head {
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: end;
  gap: 40px;
}
#activists .head .lede {
  max-width: 420px;
  font-family: 'Cormorant Garamond', serif;
  font-size: 20px;
  line-height: 1.5;
  font-weight: 300;
  color: rgba(239,234,226,0.7);
}
#activists .roster {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 40px 32px;
}
#activists .member {
  display: flex;
  flex-direction: column;
  gap: 16px;
}
#activists .member .portrait {
  aspect-ratio: 3 / 4;
  background:
    repeating-linear-gradient(
      45deg,
      rgba(239,234,226,0.06) 0 2px,
      transparent 2px 8px
    ),
    rgba(239,234,226,0.04);
  border: 1px solid var(--line-light);
  position: relative;
  overflow: hidden;
}
#activists .member .portrait::after {
  content: attr(data-tag);
  position: absolute;
  left: 12px; bottom: 10px;
  font-family: 'JetBrains Mono', monospace;
  font-size: 9px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: rgba(239,234,226,0.4);
}
#activists .member .name {
  font-family: 'Cormorant Garamond', serif;
  font-size: 22px;
  font-weight: 300;
  line-height: 1.1;
  letter-spacing: -0.005em;
}
#activists .member .role {
  font-family: 'JetBrains Mono', monospace;
  font-size: 9px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  opacity: 0.55;
}

/* --- ANTHOLOGY（実績／アーカイブ） --- */
#anthology .container {
  display: grid;
  grid-template-columns: 1fr;
  gap: 80px;
}
#anthology .head {
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: end;
  gap: 40px;
}
#anthology .head .lede {
  max-width: 420px;
  font-family: 'Cormorant Garamond', serif;
  font-size: 20px;
  line-height: 1.5;
  font-weight: 300;
  color: rgba(239,234,226,0.7);
}
#anthology .works {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 24px;
  grid-auto-rows: minmax(180px, auto);
}
#anthology .work {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: 20px;
  border: 1px solid var(--line-light);
  background: rgba(239,234,226,0.02);
  transition: background 0.4s var(--easing), transform 0.4s var(--easing);
  aspect-ratio: 1 / 1;
}
/* ホバーで浮き上がる */
#anthology .work:hover {
  background: rgba(239,234,226,0.06);
  transform: translateY(-4px);
}
#anthology .work.wide  { grid-column: span 2; aspect-ratio: 2 / 1; }
#anthology .work.tall  { grid-row: span 2; aspect-ratio: 1 / 2; }
#anthology .work .top {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  font-family: 'JetBrains Mono', monospace;
  font-size: 9px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  opacity: 0.5;
}
#anthology .work .name {
  font-family: 'Cormorant Garamond', serif;
  font-size: 22px;
  font-weight: 300;
  line-height: 1.15;
  letter-spacing: -0.005em;
}
#anthology .work .name em { font-style: italic; }
#anthology .work .meta {
  font-family: 'JetBrains Mono', monospace;
  font-size: 9px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  opacity: 0.4;
  margin-top: 12px;
}

/* --- コロフォン（フッター） --- */
footer.colophon {
  position: relative;
  z-index: 2;
  color: var(--paper);
  padding: 80px 40px 40px;
  border-top: 1px solid var(--line-light);
  font-family: 'JetBrains Mono', monospace;
  font-size: 10px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
}
footer.colophon .row {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr 1fr;
  gap: 40px;
  max-width: 1440px;
  margin: 0 auto;
}
footer.colophon .row .col p {
  line-height: 1.9;
  opacity: 0.55;
}
footer.colophon .row .col p.h {
  opacity: 0.9;
  margin-bottom: 16px;
}
footer.colophon .sign {
  max-width: 1440px;
  margin: 60px auto 0;
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  padding-top: 32px;
  border-top: 1px solid var(--line-light);
  opacity: 0.5;
}
footer.colophon .sign .big {
  font-family: 'Cormorant Garamond', serif;
  font-size: 32px;
  text-transform: none;
  letter-spacing: -0.01em;
  font-weight: 300;
  color: var(--paper);
}

/* スクロールで浮かび上がる（reveal） */
.reveal {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity 1.1s var(--easing), transform 1.1s var(--easing);
}
.reveal.in {
  opacity: 1;
  transform: none;
}

/* モバイル */
@media (max-width: 900px) {
  .rail { padding: 16px 20px; }
  .nav-inline { display: none; }
  section { padding: 100px 20px 60px; }
  .hero-grid { grid-template-columns: 1fr; }
  .hero-left { padding-left: 0; padding-top: 100px; }
  .logo-stage { justify-content: center; opacity: 0.35; }
  .logo-stage .logo { margin-right: 0; width: 90vmin; height: 90vmin; }
  #about .container { grid-template-columns: 1fr; gap: 40px; }
  #about .right { padding-top: 0; }
  #act .head, #activists .head, #anthology .head { grid-template-columns: 1fr; }
  #act .item { grid-template-columns: 40px 1fr; }
  #act .item .desc, #act .item .when { grid-column: 1 / -1; padding-left: 60px; text-align: left; }
  #activists .roster { grid-template-columns: repeat(2, 1fr); }
  #anthology .works { grid-template-columns: repeat(2, 1fr); }
  #anthology .work.wide { grid-column: span 2; }
  #anthology .work.tall { grid-row: auto; aspect-ratio: 1 / 1; }
  footer.colophon .row { grid-template-columns: 1fr 1fr; }
}

/* =========================================================
   SP最適化（既存デザイン・アニメーションを維持する追記）
   ========================================================= */
.menu-toggle,.mobile-menu{display:none}
.menu-toggle{width:44px;height:44px;padding:11px;border:0;background:transparent;color:inherit;cursor:pointer}
.menu-toggle span{display:block;width:24px;height:2px;margin:4px auto;background:currentColor}
.mobile-menu{position:fixed;inset:0;z-index:100;background:rgba(20,20,15,.98);color:var(--paper);padding:24px;visibility:hidden;opacity:0;transition:opacity .35s var(--easing),visibility .35s}
.mobile-menu.is-open{visibility:visible;opacity:1}
.mobile-menu .menu-close{position:absolute;top:12px;right:16px;width:48px;height:48px;border:0;background:transparent;color:inherit;font:300 36px/1 Inter,sans-serif;cursor:pointer}
.mobile-menu nav{min-height:100%;display:flex;flex-direction:column;justify-content:center}
.mobile-menu nav a{display:flex;align-items:baseline;gap:18px;min-height:64px;padding:10px 4px;border-bottom:1px solid rgba(239,234,226,.2);font:300 clamp(36px,12vw,58px)/1 'Cormorant Garamond',serif}
.mobile-menu nav a span{font:10px 'JetBrains Mono',monospace;letter-spacing:.18em;opacity:.6}
body.menu-open{overflow:hidden}
.article-back{display:inline-flex;align-items:center;min-height:44px;padding:0 8px;margin-left:-8px}

@media (max-width:900px){
  .rail{padding:10px 16px;min-height:64px}.rail.bottom{padding:8px 16px;min-height:48px;gap:10px;letter-spacing:.12em}
  .menu-toggle{display:block}.mobile-menu{display:block}.brand-mark{min-height:44px}
  #progress-label{max-width:48vw;text-align:right;white-space:normal;line-height:1.35}.scroll-indicator{min-height:44px}.scroll-indicator .bar{width:24px}
  section{padding:84px 18px 56px}.hero-left{padding-top:70px}.hero-stack{margin-top:24px}.hero-stack .word{line-height:1.2;gap:16px}
  .hero-foot{margin-top:30px}.hero-foot .jp{font-size:14px;line-height:1.9}.hero-foot .meta{min-height:44px;display:flex;align-items:center}
  .logo-stage .logo{--logoBaseY:5vmin;width:86vmin;height:86vmin}
  .sec-index{letter-spacing:.14em}.sec-title{line-height:1.1}.lede,.jp-serif,.jp{line-height:1.9}
  #about .container{gap:30px}#act .head,#activists .head,#anthology .head{gap:26px;margin-bottom:38px}
  #act .item{padding:24px 0;gap:10px}#act .item .desc,#act .item .when{padding-left:50px}
  #activists .roster,#anthology .works{gap:10px}.member .name,.work .name{line-height:1.25}
  #anthology .work{min-height:44px;padding:16px}.colophon{padding-left:18px!important;padding-right:18px!important}
  .article-page{padding:72px 18px 52px}.article-title{font-size:clamp(38px,13vw,68px);line-height:1.05;margin:42px 0 16px;overflow-wrap:anywhere}
  .article-image{width:calc(100% + 36px);max-width:none;margin:36px -18px;max-height:none;height:auto}
  .article-body{margin:36px 0;font-size:16px;line-height:2;overflow-wrap:anywhere}
}
@media (max-width:600px){
  .hero-stack .word{font-size:clamp(30px,9vw,44px)}.hero-stack .num{font-size:9px}
  footer.colophon .row{gap:30px 18px}footer.colophon .sign{gap:10px;flex-wrap:wrap}
}
@media (hover:none){.nav-inline a:hover{opacity:.75}.work:hover,.member:hover{transform:none}}
@media (prefers-reduced-motion:reduce){.mobile-menu{transition:none}}

/* WORKS画像・記事ブロック・一覧 */
#anthology .work{position:relative;overflow:hidden}#anthology .work>*:not(.work-thumb){position:relative;z-index:1}.work-thumb{position:absolute;inset:0;background:center/cover no-repeat;opacity:.32;transition:opacity .4s var(--easing),transform .6s var(--easing)}#anthology .work:hover .work-thumb{opacity:.45;transform:scale(1.025)}.works-more{display:flex;justify-content:flex-end}.works-more a{display:inline-flex;align-items:center;gap:28px;min-height:48px;padding:0 4px;border-bottom:1px solid var(--line-light);font:10px 'JetBrains Mono',monospace;letter-spacing:.18em;text-transform:uppercase}
.article-blocks{margin-top:48px}.article-blocks .article-body,.article-blocks .article-image{margin-top:0;margin-bottom:64px}.article-image-block{display:block;width:100%;height:auto;max-height:none;object-fit:contain}.article-text-block{white-space:normal}
.works-page{min-height:100vh;background:#171714;color:var(--paper)}.works-list-wrap{width:min(1440px,100%);margin:auto;padding:48px 40px 80px}.works-list-head{display:grid;grid-template-columns:1fr 2fr 1fr;align-items:start;border-bottom:1px solid var(--line-light);padding-bottom:38px;margin-bottom:56px;font:10px 'JetBrains Mono',monospace;letter-spacing:.18em;text-transform:uppercase}.works-list-head>a{min-height:44px;display:flex;align-items:center}.works-list-head>p{text-align:right}.works-list-head h1{margin:12px 0 0;font:300 clamp(72px,10vw,150px)/.8 'Cormorant Garamond',serif;text-transform:none;letter-spacing:-.03em}.works-list-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:52px 24px}.works-list-card{display:block}.works-list-image{aspect-ratio:4/3;border:1px solid var(--line-light);background:rgba(239,234,226,.025);overflow:hidden;display:flex;align-items:center;justify-content:center}.works-list-image img{width:100%;height:100%;object-fit:cover;transition:transform .6s var(--easing)}.works-list-image span{font:9px 'JetBrains Mono',monospace;letter-spacing:.2em;opacity:.35}.works-list-card:hover img{transform:scale(1.025)}.works-list-copy{display:flex;justify-content:space-between;gap:16px;align-items:baseline;padding-top:16px}.works-list-copy h2{font:300 25px/1.2 'Cormorant Garamond',serif}.works-list-copy p{font:9px 'JetBrains Mono',monospace;letter-spacing:.16em;text-transform:uppercase;opacity:.5;text-align:right}.pagination{display:flex;justify-content:center;flex-wrap:wrap;gap:8px;margin-top:72px}.pagination a{min-width:44px;min-height:44px;padding:0 12px;border:1px solid var(--line-light);display:flex;align-items:center;justify-content:center;font:10px 'JetBrains Mono',monospace;letter-spacing:.12em}.pagination a.current{background:var(--paper);color:#171714}
@media(max-width:900px){.works-list-wrap{padding:30px 18px 64px}.works-list-head{grid-template-columns:1fr 1fr;margin-bottom:40px}.works-list-head>div{grid-column:1/-1;grid-row:2}.works-list-head>p{grid-column:2;grid-row:1}.works-list-grid{grid-template-columns:repeat(2,1fr);gap:38px 14px}.article-blocks .article-image{width:calc(100% + 36px);margin-left:-18px;margin-right:-18px}.article-blocks .article-body,.article-blocks .article-image{margin-bottom:48px}}
@media(max-width:600px){.works-list-grid{grid-template-columns:1fr}.works-list-copy h2{font-size:28px}.works-list-image{aspect-ratio:4/3}}

/* =========================================================
   SP調整: ブランドmixed case / ヒーロー上寄せ / ロゴ右1/3はみ出し＋下部
   ========================================================= */
.brand-mark{text-transform:none}
@media(max-width:900px){
  .hero-left{align-self:start;padding-top:124px;padding-bottom:24px}
  /* 英語ラベル(About〜Anthology)を小さく */
  .hero-stack .word{font-size:clamp(20px,6vw,28px);gap:14px}
  .logo-stage{justify-content:flex-end}
  /* ロゴを少し大きく・右1/3はみ出し・下部 */
  .logo-stage .logo{width:100vmin;height:100vmin;margin-right:-16vmin;--logoBaseY:44vmin;opacity:1}
}
/* ヒーロー一覧のアンカー化（クリックで各セクションへ） */
.hero-stack a.word{cursor:pointer;transition:opacity .3s var(--easing)}
.hero-stack a.word:hover{opacity:.55}