/* ==========================================================================
   大分市カヌー協会 — Mock v0.1 / Arc'teryx Dead Bird 流派
   tokens 準拠: /tmp/oitakanu_renewal/STYLE_GUIDE.md
   ========================================================================== */

/* ============ Tokens ============ */

:root {
  /* Spacing */
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-6: 1.5rem;
  --space-8: 2rem;
  --space-12: 3rem;
  --space-16: 4rem;
  --space-24: 6rem;
  --space-section: clamp(2.5rem, 1.5rem + 2vw, 5rem);
  --space-section-lg: clamp(3rem, 2rem + 3vw, 7rem);

  /* Type scale */
  --text-xs:    clamp(0.75rem, 0.7rem + 0.2vw, 0.8125rem);
  --text-sm:    clamp(0.875rem, 0.85rem + 0.2vw, 0.9375rem);
  --text-base:  clamp(1rem, 0.95rem + 0.25vw, 1.125rem);
  --text-lg:    clamp(1.125rem, 1.05rem + 0.4vw, 1.375rem);
  --text-xl:    clamp(1.375rem, 1.2rem + 0.7vw, 1.75rem);
  --text-2xl:   clamp(1.625rem, 1.35rem + 1vw, 2.375rem);
  --text-3xl:   clamp(1.875rem, 1.45rem + 1.4vw, 2.75rem);
  --text-hero:  clamp(3rem, 1.5rem + 7vw, 8rem);

  /* Leading & tracking */
  --leading-tight:    1.05;
  --leading-snug:     1.2;
  --leading-normal:   1.5;
  --leading-relaxed:  1.75;

  --tracking-tightest: -0.04em;
  --tracking-tight:    -0.02em;
  --tracking-normal:   -0.005em;
  --tracking-wide:     0.08em;
  --tracking-widest:   0.18em;

  /* Layout */
  --max-w:        1440px;
  --max-w-text:   720px;
  --gutter:       clamp(1.5rem, 1rem + 2vw, 3rem);

  /* Motion */
  --ease-out-expo:    cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in-out-expo: cubic-bezier(0.87, 0, 0.13, 1);
  --duration-fast:    200ms;
  --duration-normal:  400ms;
  --duration-slow:    800ms;

  /* Font stacks */
  --font-display: 'Inter Tight', 'Inter', system-ui, sans-serif;
  --font-body:    'Inter', system-ui, sans-serif;
  --font-ja:      'Noto Sans JP', 'Yu Gothic Medium', '游ゴシック Medium', 'Hiragino Sans', sans-serif;
}

/* ============ Theme: Dark (default) ============ */

:root,
[data-theme="dark"] {
  --bg-canvas:      #0A0A0A;
  --bg-elevated:    #141414;
  --bg-surface:     #1F1F1F;
  --border-subtle:  #2A2A2A;
  --border-strong:  #3D3D3D;
  --text-primary:   #F5F5F5;
  --text-secondary: #A8A8A8;
  --text-tertiary:  #888888;
  --accent:         #5A8C8C;
  --accent-hover:   #6FA0A0;
  --accent-deep:    #1F3A3A;
  /* card hover 専用 (light/dark 共通の青緑)。light theme の深緑 (#1F3A3A) は
     白地でほぼ識別不能だったため両 theme で目立つ #5A8C8C に固定。 */
  --hover-accent:   #5A8C8C;
  --shadow-overlay: linear-gradient(180deg, transparent 30%, rgba(0,0,0,0.7) 100%);
  --hero-photo-filter: brightness(0.55) contrast(1.15) saturate(0.9);
  --card-photo-filter: brightness(0.7) contrast(1.1) saturate(0.85);
  --grain-opacity: 0.04;
}

[data-theme="light"] {
  --bg-canvas:      #FAFAF7;
  --bg-elevated:    #FFFFFF;
  --bg-surface:     #F0EFEA;
  --border-subtle:  #E5E3DC;
  --border-strong:  #C8C5BC;
  --text-primary:   #0E0E0E;
  --text-secondary: #4A4A4A;
  --text-tertiary:  #707070;
  --accent:         #1F3A3A;
  --accent-hover:   #163030;
  --accent-deep:    #1F3A3A;
  --hover-accent:   #5A8C8C;
  --shadow-overlay: linear-gradient(180deg, transparent 35%, rgba(0,0,0,0.5) 100%);
  --hero-photo-filter: brightness(0.75) contrast(1.05) saturate(0.85);
  --card-photo-filter: brightness(0.95) contrast(1.0) saturate(0.9);
  --grain-opacity: 0.03;
}

/* ============ Reset ============ */

*, *::before, *::after { box-sizing: border-box; }

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  background: var(--bg-canvas);
}

body {
  margin: 0;
  font-family: var(--font-ja), var(--font-body);
  font-size: var(--text-base);
  line-height: var(--leading-normal);
  color: var(--text-primary);
  background: var(--bg-canvas);
  font-feature-settings: 'palt' 1, 'tnum' 1;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  transition: background-color var(--duration-normal) var(--ease-out-expo),
              color var(--duration-normal) var(--ease-out-expo);
}

img, picture, video, svg { max-width: 100%; display: block; }
ul { list-style: none; padding: 0; margin: 0; }
a { color: inherit; text-decoration: none; }
button { background: none; border: 0; cursor: pointer; color: inherit; font: inherit; padding: 0; }

::selection {
  background: var(--accent);
  color: var(--bg-canvas);
}

/* ============ Utility ============ */

.fade-in {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity var(--duration-slow) var(--ease-out-expo),
              transform var(--duration-slow) var(--ease-out-expo);
  will-change: opacity, transform;
}

.fade-in.is-visible {
  opacity: 1;
  transform: translateY(0);
}

/* ============ Nav ============ */

.nav {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 100;
  padding: var(--space-6) 0;
  transition: background-color var(--duration-normal) var(--ease-out-expo),
              border-color var(--duration-normal) var(--ease-out-expo),
              padding var(--duration-normal) var(--ease-out-expo);
  border-bottom: 1px solid transparent;
}

.nav.is-scrolled {
  background: rgba(10, 10, 10, 0.78);
  backdrop-filter: blur(20px) saturate(1.2);
  -webkit-backdrop-filter: blur(20px) saturate(1.2);
  border-bottom-color: var(--border-subtle);
  padding: var(--space-4) 0;
}

[data-theme="light"] .nav.is-scrolled {
  background: rgba(250, 250, 247, 0.85);
}

.nav__inner {
  max-width: var(--max-w);
  margin: 0 auto;
  padding: 0 var(--gutter);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-8);
}

.nav__brand {
  display: flex;
  flex-direction: column;
  gap: 2px;
  color: var(--text-primary);
}

.nav__brand-eng {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--text-sm);
  letter-spacing: var(--tracking-widest);
  text-transform: uppercase;
}

.nav__brand-ja {
  font-family: var(--font-ja);
  font-size: 0.6875rem;
  letter-spacing: 0.15em;
  color: var(--text-tertiary);
}

.nav__menu {
  display: flex;
  gap: clamp(1rem, 0.5rem + 1.5vw, 2.5rem);
}

.nav__menu a {
  font-family: var(--font-display);
  font-size: var(--text-xs);
  font-weight: 500;
  letter-spacing: var(--tracking-widest);
  text-transform: uppercase;
  color: var(--text-secondary);
  padding: var(--space-2) 0;
  position: relative;
  transition: color var(--duration-fast) var(--ease-out-expo);
}

.nav.is-scrolled .nav__menu a,
.nav.is-scrolled .nav__brand {
  color: var(--text-primary);
}

.nav__menu a::after {
  content: '';
  position: absolute;
  left: 0;
  bottom: 0;
  width: 0;
  height: 1px;
  background: var(--accent);
  transition: width var(--duration-normal) var(--ease-out-expo);
}

.nav__menu a:hover {
  color: var(--text-primary);
}

.nav__menu a:hover::after {
  width: 100%;
}

/* ===== Hamburger ===== */

.nav__hamburger {
  display: none;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  width: 36px;
  height: 36px;
  padding: 7px;
  background: none;
  border: 0;
  cursor: pointer;
  color: inherit;
  z-index: 110;
  position: relative;
}

.nav__hamburger-bar {
  display: block;
  width: 100%;
  height: 1.5px;
  background: currentColor;
  transition: transform var(--duration-fast) var(--ease-out-expo),
              opacity var(--duration-fast) var(--ease-out-expo);
}

.nav__hamburger[aria-expanded="true"] .nav__hamburger-bar:nth-child(1) {
  transform: translateY(6.5px) rotate(45deg);
}
.nav__hamburger[aria-expanded="true"] .nav__hamburger-bar:nth-child(2) {
  opacity: 0;
}
.nav__hamburger[aria-expanded="true"] .nav__hamburger-bar:nth-child(3) {
  transform: translateY(-6.5px) rotate(-45deg);
}

@media (max-width: 720px) {
  .nav__hamburger {
    display: flex;
    order: 99;  /* nav__inner の中で常に最右 */
  }

  /* desktop 用 theme-toggle は mobile で非表示 (menu 内に複製済)
     specificity を上げて後続の `.theme-toggle { display: flex }` (line ~370) に勝つ */
  .nav .theme-toggle--desktop {
    display: none;
  }

  .nav__menu {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    height: 100dvh;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: var(--space-8);
    background: var(--bg-canvas);
    transform: translateX(100%);
    transition: transform var(--duration-normal) var(--ease-out-expo);
    z-index: 105;
    padding: var(--space-section) var(--gutter);
    margin: 0;
    overscroll-behavior: none;
  }

  .nav__menu.is-open {
    transform: translateX(0);
  }

  .nav__menu a {
    font-size: var(--text-xl);
    color: var(--text-primary) !important;
    padding: var(--space-3) 0;
  }

  /* menu 内 theme-toggle: メニュー末尾、リストスタイル外 */
  .nav__menu-toggle {
    list-style: none;
    margin-top: var(--space-6);
  }

  .theme-toggle--in-menu {
    color: var(--text-primary);
  }

  body.nav-open {
    overflow: hidden;
  }

  /* hamburger を 一番右、間隔詰める */
  .nav__inner {
    gap: var(--space-3);
  }
}

/* desktop では menu 内 toggle を hide (デスクトップ用 toggle が右上に出る) */
@media (min-width: 721px) {
  .nav__menu-toggle {
    display: none;
  }

  /* desktop: dropdown groups を表示、mobile flat items を非表示 */
  .nav__mobile-item { display: none; }
}

@media (max-width: 720px) {
  /* mobile (hamburger): flat 9 items のみ表示、dropdown groups を非表示 */
  .nav__group--desktop { display: none; }
}

/* ===== Desktop dropdown ===== */
.nav__group { position: relative; list-style: none; }

.nav__group-trigger {
  font-family: var(--font-display);
  font-size: var(--text-xs);
  font-weight: 500;
  letter-spacing: var(--tracking-widest);
  text-transform: uppercase;
  color: var(--text-secondary);
  background: none;
  border: 0;
  cursor: pointer;
  padding: var(--space-2) 0;
  display: inline-flex;
  align-items: center;
  gap: 0.4em;
  transition: color var(--duration-fast) var(--ease-out-expo);
  position: relative;
}

.nav__group-trigger::after {
  content: '';
  position: absolute;
  left: 0;
  bottom: 0;
  width: 0;
  height: 1px;
  background: var(--accent);
  transition: width var(--duration-normal) var(--ease-out-expo);
}

.nav.is-scrolled .nav__group-trigger { color: var(--text-primary); }
.has-hero .nav:not(.is-scrolled) .nav__group-trigger { color: rgba(245, 245, 245, 0.92); }
.nav__group-trigger:hover { color: var(--text-primary); }
.nav__group-trigger:hover::after,
.nav__group-trigger[aria-expanded="true"]::after { width: 100%; }

.nav__group-caret {
  font-size: 0.6em;
  transition: transform var(--duration-fast) var(--ease-out-expo);
}
.nav__group-trigger[aria-expanded="true"] .nav__group-caret { transform: rotate(180deg); }

.nav__dropdown {
  position: absolute;
  top: calc(100% + 8px);
  left: 0;
  min-width: 180px;
  list-style: none;
  margin: 0;
  padding: var(--space-1);
  background: var(--bg-elevated);
  border: 1px solid var(--border-subtle);
  box-shadow: 0 12px 28px rgba(0, 0, 0, 0.18);
  opacity: 0;
  visibility: hidden;
  transform: translateY(-4px);
  transition: opacity var(--duration-fast) var(--ease-out-expo),
              transform var(--duration-fast) var(--ease-out-expo),
              visibility 0s linear var(--duration-fast);
  z-index: 60;
}

.nav__group-trigger[aria-expanded="true"] + .nav__dropdown {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
  transition: opacity var(--duration-fast) var(--ease-out-expo),
              transform var(--duration-fast) var(--ease-out-expo),
              visibility 0s linear 0s;
}

.nav__dropdown a {
  display: block;
  padding: var(--space-2) var(--space-3);
  font-family: var(--font-display);
  font-size: var(--text-xs);
  letter-spacing: var(--tracking-widest);
  text-transform: uppercase;
  color: var(--text-secondary);
  transition: color var(--duration-fast) var(--ease-out-expo),
              background var(--duration-fast) var(--ease-out-expo);
}

/* `.has-hero .nav:not(.is-scrolled) .nav__menu a` (hero overlay の白文字 rule、specificity
   (0,4,1)) が dropdown 内 link にも継承されてしまう問題。dropdown 背景は --bg-elevated
   (light=white, dark=#141414) なので、白文字だと light theme で完全に見えない。
   specificity を上回る (0,5,1) で必ず上書きする。 */
.nav .nav__menu .nav__dropdown a,
.has-hero .nav:not(.is-scrolled) .nav__menu .nav__dropdown a,
.nav.is-scrolled .nav__menu .nav__dropdown a {
  color: var(--text-secondary);
}

.nav__dropdown a::after { display: none; }
.nav__dropdown a:hover {
  color: var(--text-primary);
  background: var(--bg-surface);
}

/* When not scrolled, force white text over hero (両モード共通、ヒーロー上に黒オーバーレイがあるため白)。
   .has-hero (body or html) でフルブリード hero がある時のみ適用、無いページでは light mode で nav が消える事故を防ぐ */
.has-hero .nav:not(.is-scrolled) .nav__menu a,
.has-hero .nav:not(.is-scrolled) .nav__brand {
  color: rgba(245, 245, 245, 0.92);
}

.has-hero .nav:not(.is-scrolled) .nav__brand-ja {
  color: rgba(245, 245, 245, 0.65);
}

.theme-toggle {
  width: 36px;
  height: 36px;
  border-radius: 4px;
  border: 1px solid var(--border-subtle);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--text-secondary);
  transition: background-color var(--duration-fast) var(--ease-out-expo),
              border-color var(--duration-fast) var(--ease-out-expo);
}

.has-hero .nav:not(.is-scrolled) .theme-toggle {
  border-color: rgba(245, 245, 245, 0.3);
  color: rgba(245, 245, 245, 0.8);
}

/* ヒーロー上ではハンバーガー 3 本線も白くする */
.has-hero .nav:not(.is-scrolled) .nav__hamburger {
  color: rgba(245, 245, 245, 0.92);
}

/* menu 内 theme-toggle はパネル内 (背景 = bg-canvas) なので、scroll 状態に関わらず通常色にする */
.nav .nav__menu .theme-toggle--in-menu,
.nav:not(.is-scrolled) .nav__menu .theme-toggle--in-menu {
  color: var(--text-primary);
  border-color: var(--border-subtle);
}

.theme-toggle:hover {
  border-color: var(--accent);
  color: var(--accent);
}

.theme-toggle__icon { display: none; }
[data-theme="dark"] .theme-toggle__icon--sun { display: block; }
[data-theme="light"] .theme-toggle__icon--moon { display: block; }

/* ============ Hero ============ */

.hero {
  position: relative;
  min-height: 88vh;
  min-height: 88svh;
  display: flex;
  align-items: flex-end;
  overflow: hidden;
  padding-bottom: clamp(3rem, 1.5rem + 4vw, 6rem);
  padding-top: clamp(6rem, 5rem + 3vw, 9rem);
}

.hero__media {
  position: absolute;
  inset: 0;
  z-index: 0;
}

.hero__bg {
  position: absolute;
  inset: -8%;
  background-size: cover;
  background-position: center;
  filter: var(--hero-photo-filter);
  animation: hero-pan 36s var(--ease-in-out-expo) infinite alternate;
  will-change: transform;
}

.hero__overlay {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(180deg, rgba(10,10,10,0.45) 0%, rgba(10,10,10,0.05) 30%, rgba(10,10,10,0.7) 90%, rgba(10,10,10,1) 100%),
    linear-gradient(90deg, rgba(10,10,10,0.5) 0%, transparent 60%);
}

[data-theme="light"] .hero__overlay {
  background:
    linear-gradient(180deg, rgba(0,0,0,0.35) 0%, transparent 30%, rgba(0,0,0,0.55) 90%, rgba(0,0,0,0.85) 100%),
    linear-gradient(90deg, rgba(0,0,0,0.35) 0%, transparent 60%);
}

.hero__grain {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='200' height='200'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2'/><feColorMatrix values='0 0 0 0 0  0 0 0 0 0  0 0 0 0 0  0 0 0 0.6 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
  opacity: var(--grain-opacity);
  mix-blend-mode: overlay;
}

@keyframes hero-pan {
  from { transform: scale(1.05) translate(0, 0); }
  to   { transform: scale(1.15) translate(-2%, -1.5%); }
}

.hero__inner {
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: var(--max-w);
  margin: 0 auto;
  padding: 0 var(--gutter);
  color: #F5F5F5;
}

.hero__eyebrow {
  font-family: var(--font-display);
  font-size: var(--text-xs);
  font-weight: 500;
  letter-spacing: var(--tracking-widest);
  text-transform: uppercase;
  color: rgba(245, 245, 245, 0.7);
  margin: 0 0 var(--space-8);
  display: inline-flex;
  align-items: center;
  gap: var(--space-3);
}

.hero__eyebrow::before {
  content: '';
  width: 32px;
  height: 1px;
  background: var(--accent);
}

.hero__title {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--text-hero);
  line-height: 0.92;
  letter-spacing: var(--tracking-tightest);
  text-transform: uppercase;
  margin: 0;
  color: #FAFAF7;
}

.hero__title-line {
  display: block;
}

.hero__title-line:nth-child(2) {
  padding-left: clamp(2rem, 1rem + 4vw, 6rem);
}

.hero__sub {
  margin: var(--space-8) 0 0;
  font-family: var(--font-ja);
  font-size: var(--text-lg);
  font-weight: 500;
  letter-spacing: 0.1em;
  color: rgba(245, 245, 245, 0.8);
}

.hero__scroll {
  position: absolute;
  bottom: var(--space-8);
  left: 50%;
  transform: translateX(-50%);
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-3);
  color: rgba(245, 245, 245, 0.6);
}

.hero__scroll-label {
  font-family: var(--font-display);
  font-size: 0.6875rem;
  font-weight: 500;
  letter-spacing: var(--tracking-widest);
  text-transform: uppercase;
}

.hero__scroll-line {
  width: 1px;
  height: 48px;
  background: linear-gradient(180deg, currentColor, transparent);
  position: relative;
  overflow: hidden;
}

.hero__scroll-line::after {
  content: '';
  position: absolute;
  top: -100%;
  left: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(180deg, transparent, var(--accent), transparent);
  animation: scroll-pulse 2.6s var(--ease-in-out-expo) infinite;
}

@keyframes scroll-pulse {
  0%   { top: -100%; }
  100% { top: 100%; }
}

.hero__caption {
  position: absolute;
  bottom: var(--space-6);
  right: var(--gutter);
  z-index: 1;
  font-family: var(--font-display);
  font-size: 0.6875rem;
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: rgba(245, 245, 245, 0.5);
}

@media (max-width: 768px) {
  .hero__caption { display: none; }
  .hero__title-line:nth-child(2) { padding-left: 1.5rem; }
}

/* ============ Section header (asymmetric editorial) ============ */

.section-header {
  max-width: var(--max-w);
  margin: 0 auto;
  padding: 0 var(--gutter);
  display: grid;
  gap: var(--space-4);
  margin-bottom: var(--space-8);
}

.section-header--asymmetric {
  grid-template-columns: 1fr;
}

@media (min-width: 900px) {
  .section-header--asymmetric {
    grid-template-columns: 180px 1fr;
    align-items: end;
    gap: var(--space-8);
  }
}

.section-header__meta {
  display: flex;
  align-items: baseline;
  gap: var(--space-6);
  color: var(--text-tertiary);
}

.section-header__index {
  font-family: var(--font-display);
  font-size: var(--text-xs);
  font-weight: 500;
  letter-spacing: var(--tracking-wide);
  color: var(--accent);
}

.section-header__eyebrow {
  font-family: var(--font-display);
  font-size: var(--text-xs);
  font-weight: 500;
  letter-spacing: var(--tracking-widest);
  text-transform: uppercase;
}

.section-header__title {
  font-family: var(--font-display);
  font-size: var(--text-3xl);
  font-weight: 700;
  line-height: var(--leading-tight);
  letter-spacing: var(--tracking-tight);
  margin: 0;
  color: var(--text-primary);
}

.section-header__lede {
  font-family: var(--font-ja);
  font-size: var(--text-base);
  line-height: var(--leading-relaxed);
  color: var(--text-secondary);
  max-width: 36rem;
  margin: 0;
  grid-column: 1 / -1;
}

@media (min-width: 900px) {
  .section-header__lede {
    grid-column: 2 / -1;
    margin-top: var(--space-4);
  }
}

/* ============ Events ============ */

.events {
  padding: var(--space-section) 0;
  background: var(--bg-canvas);
}

.events__grid {
  max-width: var(--max-w);
  margin: 0 auto;
  padding: 0 var(--gutter);
  display: grid;
  gap: var(--space-8) var(--space-6);
  grid-template-columns: 1fr;
}

@media (min-width: 720px) {
  .events__grid { grid-template-columns: repeat(2, 1fr); }
}

@media (min-width: 1140px) {
  .events__grid { grid-template-columns: repeat(4, 1fr); }
}

.event-card {
  position: relative;
}

.event-card__link {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  text-decoration: none;
  color: inherit;
  position: relative;
  padding: var(--space-3);
  margin: calc(var(--space-3) * -1);
  border-radius: 6px;
  transition: background-color var(--duration-normal) var(--ease-out-expo);
}

/* hover で青緑系 tint を背景に乗せる。両 theme で同じ `--hover-accent` (= #5A8C8C) を
   使うので、light theme でも dark theme でも統一感のある「ホバーで緑っぽく地の色が
   変わる」効果が出る。light の深緑 (#1F3A3A) は白地でほぼ識別不能だったので、card
   hover 専用の dedicated トーン (青緑) を持たせる。 */
.event-card__link:hover {
  background-color: color-mix(in srgb, var(--hover-accent) 12%, transparent);
}

.event-card__title {
  transition: color var(--duration-fast) var(--ease-out-expo);
}

.event-card__link:hover .event-card__title {
  color: var(--hover-accent);
}

.event-card__media {
  position: relative;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  border: 1px solid var(--border-subtle);
  background: var(--bg-elevated);
  transition: border-color var(--duration-normal) var(--ease-out-expo);
}

.event-card__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: var(--card-photo-filter);
  transition: transform var(--duration-slow) var(--ease-out-expo),
              filter var(--duration-slow) var(--ease-out-expo);
}

.event-card__link:hover .event-card__media {
  border-color: var(--border-strong);
}

.event-card__link:hover .event-card__media img {
  transform: scale(1.04);
  filter: brightness(0.85) contrast(1.1) saturate(0.95);
}

.event-card__media::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, transparent 50%, rgba(0,0,0,0.35) 100%);
  pointer-events: none;
}

.event-card__body {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

.event-card__meta {
  font-family: var(--font-display);
  font-size: var(--text-xs);
  font-weight: 500;
  letter-spacing: var(--tracking-widest);
  text-transform: uppercase;
  color: var(--text-tertiary);
  margin: 0;
  display: flex;
  align-items: center;
  gap: var(--space-2);
}

.event-card__type {
  color: var(--accent);
}

.event-card__sep {
  color: var(--text-tertiary);
  opacity: 0.5;
}

.event-card__title {
  font-family: var(--font-ja);
  font-size: var(--text-lg);
  font-weight: 500;
  line-height: var(--leading-snug);
  letter-spacing: 0.02em;
  margin: 0;
  color: var(--text-primary);
  white-space: pre-line;  /* \n をそのまま改行表示 (set:html を使わずに済む) */
}

.event-card__sub {
  font-family: var(--font-display);
  font-size: var(--text-sm);
  color: var(--text-secondary);
  margin: 0;
}

.event-card__cta {
  margin-top: var(--space-2);
  font-family: var(--font-display);
  font-size: var(--text-xs);
  font-weight: 500;
  letter-spacing: var(--tracking-widest);
  text-transform: uppercase;
  color: var(--text-primary);
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
}

.event-card__cta--limited {
  color: var(--accent);
}

.event-card__arrow {
  transition: transform var(--duration-normal) var(--ease-out-expo);
}

.event-card__link:hover .event-card__arrow {
  transform: translateX(8px);
}

.events__see-all {
  display: inline-flex;
  align-items: center;
  gap: var(--space-3);
  margin: var(--space-12) auto 0;
  max-width: var(--max-w);
  padding: 0 var(--gutter);
  width: 100%;
  font-family: var(--font-display);
  font-size: var(--text-sm);
  font-weight: 500;
  letter-spacing: var(--tracking-widest);
  text-transform: uppercase;
  color: var(--text-primary);
  border-top: 1px solid var(--border-subtle);
  padding-top: var(--space-6);
  transition: color var(--duration-fast) var(--ease-out-expo),
              border-color var(--duration-fast) var(--ease-out-expo);
}

.events__see-all:hover {
  color: var(--accent);
  border-top-color: var(--accent);
}

/* 参加者名簿を events セクション内に小さく載せる用の mini panel。
   compact-list を流用しつつ、見出しを抑えて events 配下に従属させる。 */
.events__rosters {
  max-width: var(--max-w);
  margin: var(--space-12) auto 0;
  padding: var(--space-6) var(--gutter) 0;
  border-top: 1px solid var(--border-subtle);
}

.events__rosters-header {
  display: flex;
  align-items: baseline;
  gap: var(--space-3);
  margin: 0 0 var(--space-2);
  flex-wrap: wrap;
}

.events__rosters-eyebrow {
  font-family: var(--font-display);
  font-size: var(--text-xs);
  font-weight: 500;
  letter-spacing: var(--tracking-widest);
  text-transform: uppercase;
  color: var(--text-tertiary);
}

.events__rosters-title {
  font-family: var(--font-ja);
  font-size: 1rem;
  font-weight: 500;
  color: var(--text-primary);
  margin: 0;
}

.events__rosters .compact-list {
  margin: 0;
}

/* ============ Photo break ============ */

.photo-break {
  position: relative;
  height: clamp(28vh, 35vh, 42vh);
  overflow: hidden;
  margin: 0;
}

.photo-break__bg {
  position: absolute;
  inset: -5%;
  background-size: cover;
  background-position: center;
  filter: var(--hero-photo-filter);
}

.photo-break__overlay {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(180deg, rgba(10,10,10,0.4) 0%, transparent 30%, transparent 70%, rgba(10,10,10,0.6) 100%);
}

.photo-break__caption {
  position: absolute;
  bottom: var(--space-6);
  right: var(--gutter);
  font-family: var(--font-display);
  font-size: 0.6875rem;
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: rgba(245, 245, 245, 0.55);
}

/* ============ Stories ============ */
/* セクション間のメリハリのため、stories セクションだけ周囲と反対色にする。
   light theme: events (白) → stories (黒) → about (白) の交互配色。
   dark theme:  events (黒) → stories (白) → about (黒) の交互配色。
   child の card / heading も local 変数で自動反転。背景色のコントラスト自体で
   section 境界が明確になるため border は不要。 */
.stories {
  padding: var(--space-section) 0;
  /* light theme default: 黒地 + 白文字 */
  --bg-canvas:      #0E0E0E;
  --bg-elevated:    #1A1A1A;
  --bg-surface:     #242424;
  --border-subtle:  #2A2A2A;
  --border-strong:  #3D3D3D;
  --text-primary:   #FAFAF7;
  --text-secondary: #B8B8B8;
  --text-tertiary:  #888888;
  /* 黒地上では深緑 (#1F3A3A) は見えないので、dark theme の青緑 (#5A8C8C) に
     override。card hover tint や title accent が視認可能になる。 */
  --accent:         #5A8C8C;
  --accent-hover:   #6FA0A0;
  --card-photo-filter: brightness(0.7) contrast(1.1) saturate(0.85);
  background: var(--bg-canvas);
  color: var(--text-primary);
}

/* dark theme: stories は逆に白地 + 黒文字 (周囲の events/about が暗いから反転で目立たせる) */
[data-theme="dark"] .stories {
  --bg-canvas:      #FAFAF7;
  --bg-elevated:    #FFFFFF;
  --bg-surface:     #F0EFEA;
  --border-subtle:  #E5E3DC;
  --border-strong:  #C8C5BC;
  --text-primary:   #0E0E0E;
  --text-secondary: #4A4A4A;
  --text-tertiary:  #707070;
  /* 白地上では light theme の深緑 (#1F3A3A) に戻す */
  --accent:         #1F3A3A;
  --accent-hover:   #163030;
  --card-photo-filter: brightness(0.95) contrast(1.0) saturate(0.9);
}

.stories__grid {
  max-width: var(--max-w);
  margin: 0 auto;
  padding: 0 var(--gutter);
  display: grid;
  gap: var(--space-8) var(--space-6);
  grid-template-columns: 1fr;
}

@media (min-width: 720px) {
  .stories__grid { grid-template-columns: repeat(2, 1fr); }
}

@media (min-width: 1140px) {
  .stories__grid { grid-template-columns: repeat(3, 1fr); }
}

.story-card__link {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  color: inherit;
  text-decoration: none;
  padding: var(--space-3);
  margin: calc(var(--space-3) * -1);
  border-radius: 6px;
  transition: background-color var(--duration-normal) var(--ease-out-expo);
}

.story-card__link:hover {
  background-color: color-mix(in srgb, var(--hover-accent) 12%, transparent);
}

.story-card__title {
  transition: color var(--duration-fast) var(--ease-out-expo);
}

.story-card__link:hover .story-card__title {
  color: var(--hover-accent);
}

.story-card__media {
  aspect-ratio: 16 / 10;
  overflow: hidden;
  border: 1px solid var(--border-subtle);
  transition: border-color var(--duration-normal) var(--ease-out-expo);
}

.story-card__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: var(--card-photo-filter);
  transition: transform var(--duration-slow) var(--ease-out-expo);
}

.story-card__link:hover .story-card__media { border-color: var(--border-strong); }
.story-card__link:hover .story-card__media img { transform: scale(1.04); }

.story-card__meta {
  font-family: var(--font-display);
  font-size: var(--text-xs);
  font-weight: 500;
  letter-spacing: var(--tracking-widest);
  text-transform: uppercase;
  color: var(--text-tertiary);
  display: flex;
  gap: var(--space-3);
  margin: 0;
}

.story-card__title {
  font-family: var(--font-ja);
  font-size: var(--text-lg);
  font-weight: 500;
  line-height: var(--leading-snug);
  margin: var(--space-2) 0 0;
  color: var(--text-primary);
}

.story-card__excerpt {
  font-family: var(--font-ja);
  font-size: var(--text-sm);
  line-height: var(--leading-relaxed);
  color: var(--text-secondary);
  margin: var(--space-2) 0 0;
  max-width: 24rem;
}

/* ============ About ============ */

.about {
  padding: var(--space-section-lg) 0;
  background: var(--bg-canvas);
}
/* compact variant — トップページで「協会について」を小さく残す用途 */
.about--compact {
  padding: var(--space-12) 0;
}
.about--compact .about__inner {
  grid-template-columns: 1fr;
  gap: var(--space-4);
  max-width: 720px;
}
@media (min-width: 900px) {
  .about--compact .about__inner {
    grid-template-columns: 1fr;
    gap: var(--space-4);
  }
}
.about__title--compact {
  font-size: clamp(1.4rem, 2.2vw, 1.8rem);
  font-weight: 600;
  line-height: 1.4;
  margin: 0;
}

.about__inner {
  max-width: var(--max-w);
  margin: 0 auto;
  padding: 0 var(--gutter);
  display: grid;
  gap: var(--space-8);
  grid-template-columns: 1fr;
}

@media (min-width: 900px) {
  .about__inner {
    grid-template-columns: 1fr 1.4fr;
    gap: var(--space-12);
    align-items: start;
  }
}

.about__meta {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  align-items: flex-start;
}

.about__meta .section-header__index {
  font-size: var(--text-sm);
}

.about__title {
  font-family: var(--font-ja);
  font-size: var(--text-2xl);
  font-weight: 500;
  line-height: var(--leading-tight);
  letter-spacing: 0.01em;
  margin: 0;
  color: var(--text-primary);
}

.about__title-accent {
  color: var(--accent);
}

.about__body {
  margin-top: var(--space-6);
  font-family: var(--font-ja);
  font-size: var(--text-base);
  line-height: var(--leading-relaxed);
  color: var(--text-secondary);
  max-width: var(--max-w-text);
}

.about__body p { margin: 0 0 var(--space-4); }
.about__body p:last-child { margin-bottom: 0; }

/* 協会についての枠内に 2 つの艇庫拠点をコンパクトに併設。元 .facilities section が
   持っていた拠点紹介を about--compact に統合した小型版。 */
.about__bases {
  margin-top: var(--space-8);
  padding-top: var(--space-6);
  border-top: 1px solid var(--border-subtle);
}

.about__bases-label {
  font-family: var(--font-display);
  font-size: var(--text-xs);
  font-weight: 500;
  letter-spacing: var(--tracking-widest);
  text-transform: uppercase;
  color: var(--text-tertiary);
  margin: 0 0 var(--space-4);
}

.about__bases-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-6);
}

@media (min-width: 720px) {
  .about__bases-list { grid-template-columns: repeat(2, 1fr); gap: var(--space-8); }
}

.about__base { margin: 0; }

.about__base-link {
  display: block;
  text-decoration: none;
  color: inherit;
  padding: var(--space-3);
  margin: calc(var(--space-3) * -1);
  border-radius: 8px;
  transition: background-color var(--duration-normal) var(--ease-out-expo);
}
.about__base-link:hover {
  background-color: color-mix(in srgb, var(--hover-accent) 12%, transparent);
}
.about__base-link:hover .about__base-name { color: var(--hover-accent); }

.about__base-media {
  aspect-ratio: 16 / 9;
  overflow: hidden;
  background: var(--bg-elevated);
  border: 1px solid var(--border-subtle);
  border-radius: 6px;
  margin-bottom: var(--space-3);
}
.about__base-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  filter: var(--card-photo-filter);
}

.about__base-num {
  font-family: var(--font-display);
  font-size: var(--text-xs);
  letter-spacing: var(--tracking-widest);
  text-transform: uppercase;
  color: var(--text-tertiary);
  margin: 0 0 var(--space-2);
}

.about__base-name {
  font-family: var(--font-ja);
  font-size: var(--text-base);
  font-weight: 600;
  line-height: var(--leading-snug);
  color: var(--text-primary);
  margin: 0 0 var(--space-1);
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: var(--space-2);
  transition: color var(--duration-fast) var(--ease-out-expo);
}

.about__base-name-en {
  font-family: var(--font-display);
  font-size: var(--text-xs);
  font-weight: 400;
  letter-spacing: var(--tracking-wide);
  color: var(--text-tertiary);
}

.about__base-area {
  font-family: var(--font-ja);
  font-size: var(--text-xs);
  color: var(--text-secondary);
  margin: 0 0 var(--space-2);
}

.about__base-desc {
  font-family: var(--font-ja);
  font-size: var(--text-sm);
  line-height: var(--leading-relaxed);
  color: var(--text-secondary);
  margin: 0;
}

.about__cta {
  display: inline-flex;
  align-items: center;
  gap: var(--space-3);
  margin-top: var(--space-8);
  padding: var(--space-4) var(--space-8);
  font-family: var(--font-display);
  font-size: var(--text-xs);
  font-weight: 500;
  letter-spacing: var(--tracking-widest);
  text-transform: uppercase;
  color: var(--text-primary);
  border: 1px solid var(--border-strong);
  border-radius: 4px;
  transition: background-color var(--duration-normal) var(--ease-out-expo),
              border-color var(--duration-normal) var(--ease-out-expo),
              color var(--duration-normal) var(--ease-out-expo);
  align-self: flex-start;
}

.about__cta:hover {
  background: var(--accent);
  border-color: var(--accent);
  color: var(--bg-canvas);
}

[data-theme="light"] .about__cta:hover {
  color: #FAFAF7;
}

/* About inner placement: meta は左カラム、title/body/cta は右カラム */
@media (min-width: 900px) {
  .about__title { grid-column: 2; }
  .about__body { grid-column: 2; }
  .about__cta { grid-column: 2; }

  /* compact 版は 1col grid なので child の grid-column: 2 が implicit 2col 目を作って
     2 列レイアウトに戻ってしまう。compact の時は全 child を auto 配置に戻す。 */
  .about--compact .about__title,
  .about--compact .about__body,
  .about--compact .about__bases,
  .about--compact .about__cta { grid-column: auto; }
  /* grid item は default で justify-self: stretch → CTA が full-width に広がる。
     compact 版では CTA を本来の inline-flex 幅に戻す。 */
  .about--compact .about__cta { justify-self: start; }
}

/* ============ Knowledge ============ */

.knowledge {
  padding: var(--space-section) 0;
  background: var(--bg-canvas);
}

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

.knowledge__grid {
  margin-top: var(--space-8);
  border-top: 1px solid var(--border-subtle);
}

.knowledge-row {
  border-bottom: 1px solid var(--border-subtle);
}

.knowledge-row__link {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-2);
  padding: var(--space-6) 0;
  text-decoration: none;
  color: inherit;
  transition: padding var(--duration-normal) var(--ease-out-expo);
}

@media (min-width: 720px) {
  .knowledge-row__link {
    grid-template-columns: 64px 1fr 32px;
    gap: var(--space-8);
    align-items: baseline;
  }
}

.knowledge-row__link:hover {
  padding-left: var(--space-4);
}

.knowledge-row__link:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 4px;
}

.knowledge-row__num {
  font-family: var(--font-display);
  font-size: var(--text-sm);
  font-weight: 500;
  letter-spacing: var(--tracking-widest);
  color: var(--text-tertiary);
}

.knowledge-row__body {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  min-width: 0;
}

.knowledge-row__category {
  font-family: var(--font-display);
  font-size: var(--text-xs);
  font-weight: 500;
  letter-spacing: var(--tracking-widest);
  text-transform: uppercase;
  color: var(--accent);
  margin: 0;
}

.knowledge-row__title {
  font-family: var(--font-ja);
  font-size: var(--text-xl);
  font-weight: 500;
  line-height: var(--leading-snug);
  letter-spacing: 0.01em;
  color: var(--text-primary);
  margin: 0;
  transition: color var(--duration-fast) var(--ease-out-expo);
}

.knowledge-row__lede {
  font-family: var(--font-ja);
  font-size: var(--text-base);
  color: var(--text-secondary);
  line-height: var(--leading-relaxed);
  margin: 0;
  max-width: 56ch;
}

.knowledge-row__arrow {
  font-family: var(--font-display);
  font-size: var(--text-lg);
  color: var(--text-tertiary);
  text-align: right;
  transition: transform var(--duration-normal) var(--ease-out-expo),
              color var(--duration-fast) var(--ease-out-expo);
}

.knowledge-row__link:hover .knowledge-row__title { color: var(--accent); }
.knowledge-row__link:hover .knowledge-row__arrow {
  color: var(--accent);
  transform: translateX(8px);
}

/* ============ Compact list (Past Events / Touring 歩み / Rosters) ============ */
/* "似た 3col card wall" を回避するための行リスト形式 */

.compact-list {
  list-style: none;
  margin: var(--space-8) 0 0;
  padding: 0;
  border-top: 1px solid var(--border-subtle);
}

.compact-list__row {
  border-bottom: 1px solid var(--border-subtle);
}

.compact-list__link {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-1);
  padding: var(--space-4) var(--space-3);
  margin: 0 calc(var(--space-3) * -1);
  border-radius: 6px;
  text-decoration: none;
  color: inherit;
  transition: background-color var(--duration-normal) var(--ease-out-expo);
}

@media (min-width: 720px) {
  .compact-list__link {
    grid-template-columns: 110px 1fr 32px;
    gap: var(--space-6);
    align-items: baseline;
    padding: var(--space-3);
  }
}

.compact-list__link:hover {
  background-color: color-mix(in srgb, var(--hover-accent) 12%, transparent);
}
.compact-list__link:focus-visible {
  outline: 2px solid var(--hover-accent);
  outline-offset: 4px;
}

.compact-list__date {
  font-family: var(--font-display);
  font-size: var(--text-xs);
  font-weight: 500;
  letter-spacing: var(--tracking-widest);
  text-transform: uppercase;
  color: var(--text-tertiary);
}

.compact-list__title {
  font-family: var(--font-ja);
  font-size: var(--text-base);
  font-weight: 500;
  line-height: var(--leading-snug);
  color: var(--text-primary);
  margin: 0;
  transition: color var(--duration-fast) var(--ease-out-expo);
  min-width: 0;
}

.compact-list__tag {
  font-family: var(--font-display);
  font-size: var(--text-xs);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: var(--accent);
  margin-left: var(--space-3);
  font-weight: 500;
}

.compact-list__arrow {
  font-family: var(--font-display);
  font-size: var(--text-base);
  color: var(--text-tertiary);
  text-align: right;
  transition: transform var(--duration-normal) var(--ease-out-expo),
              color var(--duration-fast) var(--ease-out-expo);
}

@media (max-width: 719px) {
  .compact-list__arrow { display: none; }
}

.compact-list__link:hover .compact-list__title { color: var(--hover-accent); }
.compact-list__link:hover .compact-list__arrow {
  color: var(--hover-accent);
  transform: translateX(8px);
}

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

/* ============ Footer ============ */

/* 「フッターらしく」 — 両 theme で常時 dark、川面写真を低明度 overlay 付きで背景に。
   文字サイズも本文より 1 段絞ってメリハリを出す。 */
.footer {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  background: #0A0A0A;
  color: rgba(245, 245, 245, 0.72);
  padding: var(--space-section) 0 var(--space-12);
  border-top: 0;
}

.footer::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image: url("/images/orig/break.webp");
  background-size: cover;
  background-position: center 70%;
  filter: brightness(0.32) contrast(1.05) saturate(0.7);
  opacity: 0.55;
  z-index: -2;
}

.footer::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(10, 10, 10, 0.55) 0%, rgba(10, 10, 10, 0.92) 100%);
  z-index: -1;
}

.footer__inner {
  max-width: var(--max-w);
  margin: 0 auto;
  padding: 0 var(--gutter);
  display: grid;
  gap: var(--space-12);
  grid-template-columns: 1fr;
}

@media (min-width: 720px) {
  .footer__inner { grid-template-columns: 1.4fr 1fr 1fr 1fr; gap: var(--space-8); }
}

.footer__col {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

.footer__col a,
.footer__col p {
  font-family: var(--font-ja);
  font-size: 0.78rem;
  line-height: 1.55;
  color: rgba(245, 245, 245, 0.72);
  margin: 0;
  transition: color var(--duration-fast) var(--ease-out-expo);
}

.footer__col a:hover { color: var(--hover-accent); }

.footer__label {
  font-family: var(--font-display) !important;
  font-size: 0.65rem !important;
  font-weight: 500;
  letter-spacing: var(--tracking-widest);
  text-transform: uppercase;
  color: rgba(245, 245, 245, 0.5) !important;
  margin-bottom: var(--space-3) !important;
}

.footer__col--brand .footer__logo {
  font-family: var(--font-display);
  font-size: 0.95rem;
  font-weight: 700;
  letter-spacing: var(--tracking-widest);
  text-transform: uppercase;
  color: rgba(245, 245, 245, 0.95);
}

.footer__tagline {
  font-family: var(--font-ja) !important;
  font-size: 0.78rem !important;
  letter-spacing: 0.05em;
}

.footer__since {
  font-family: var(--font-display) !important;
  font-size: 0.62rem !important;
  letter-spacing: var(--tracking-widest);
  text-transform: uppercase;
  /* dark bg (#0A0A0A) 上で WCAG AA 4.5:1 を満たす (0.52 ≈ #6F6F6F → 4.6:1) */
  color: rgba(245, 245, 245, 0.52) !important;
  margin-top: var(--space-3) !important;
}

.footer__bottom {
  max-width: var(--max-w);
  margin: var(--space-12) auto 0;
  padding: var(--space-6) var(--gutter) 0;
  border-top: 1px solid rgba(245, 245, 245, 0.15);
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: var(--space-3);
  font-family: var(--font-display);
  font-size: 0.62rem;
  letter-spacing: var(--tracking-wide);
  /* copyright も読める contrast を確保 (0.52 → WCAG AA 4.6:1) */
  color: rgba(245, 245, 245, 0.52);
}

.footer__bottom p { margin: 0; }

/* ============ Trix attachment 装飾 (公開側) ============ */
/* 記事本文に貼った画像の下に Trix が自動で入れる「ファイル名 + サイズ」
   (e.g. download-4.jpg 96.09 KB) を非表示。caption テキスト機能は当面
   使わない運用なので figcaption 全体を畳む。 */
.oitakanu-article figcaption.attachment__caption,
.oitakanu-article .attachment__name,
.oitakanu-article .attachment__size {
  display: none;
}
.oitakanu-article figure.attachment {
  margin: 1.5em auto;
}
.oitakanu-article figure.attachment a {
  text-decoration: none;
}
.oitakanu-article figure.attachment img {
  display: block;
  margin: 0 auto;
  max-width: 100%;
  height: auto;
  border-radius: 4px;
}

/* ============ Reduced motion ============ */

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
  .hero__bg { animation: none !important; transform: none !important; }
  .hero__scroll-line::after { display: none; }
  .fade-in { opacity: 1; transform: none; }
}