/* Google Fonts（一括管理） */
@import url('https://fonts.googleapis.com/css2?family=Nunito+Sans:wght@400;600;700&family=Inter:wght@300;400;600&display=swap');

/* ===== デザイントークン（一括管理） ===== */
:root {
  /* カラー */
  --brand: #393a3c;
  --brand-gold: #393a3c; /* 後方互換 */
  --gray-700: #374151;
  --gray-600: #4b5563;
  --gray-500: #6b7280;
  --gray-400: #9ca3af;
  --gray-200: #e5e7eb;
  --gray-100: #f3f4f6;
  --white: #ffffff;
  --black: #000000;

  /* 余白スケール */
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-4: 1rem;
  --space-6: 1.5rem;
  --space-8: 2rem;

  /* Z-index */
  --z-header: 100;
  --z-mobile-menu: 120;
  --z-search-panel: 140;
  --z-float-button: 150;

  /* トランジション */
  --duration-fast: 0.15s;
  --duration-normal: 0.3s;
  --duration-slow: 0.5s;
}

/* ブランドカラー用ユーティリティ（Tailwindの代わりに使用） */
.bg-brand { background-color: var(--brand); }
.text-brand { color: var(--brand); }
.border-brand { border-color: var(--brand); }
.hover\:bg-brand:hover { background-color: var(--brand); }
.hover\:text-brand:hover { color: var(--brand); }
body { font-family: 'Inter', sans-serif; -webkit-font-smoothing: antialiased; }
main {
    font-size: 1.0625rem; /* 17px - 全ページ統一 */
    line-height: 1.85;
}
.serif { font-family: 'Cormorant Garamond', 'Noto Serif JP', serif; }

/* メインコンテンツの本文（全ページ共通） */
main p {
    font-size: 1.0625rem;
    line-height: 1.85;
    color: var(--gray-700);
}
main li {
    font-size: 1.0625rem;
    line-height: 1.85;
}

/* メイン見出し（全ページ共通） */
main h1 {
    font-size: 2rem;
    line-height: 1.25;
    letter-spacing: 0.03em;
}
@media (min-width: 768px) {
    main h1 {
        font-size: 2.5rem;
    }
}
@media (min-width: 1024px) {
    main h1 {
        font-size: 3rem;
    }
}
main h2,
main h3 {
    letter-spacing: 0.03em;
}
main h2 { font-size: 1.5rem; line-height: 1.4; }
main h3 { font-size: 1.25rem; line-height: 1.5; }

/* TOPページヒーロー：スマホ78vh／PCは92vh */
#top-hero {
  height: 78vh;
  height: 78dvh;
}
@media (min-width: 768px) {
  #top-hero {
    height: 92vh;
    height: 92dvh;
  }
}

/* ヒーロー画像オーバーレイ：自然に馴染むドロップシャドウ */
.hero-overlay-shadow {
  filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.5))
          drop-shadow(0 2px 4px rgba(0, 0, 0, 0.35));
}

/* 記事カード画像のホバーズーム（0.5秒） */
.article-card-zoom {
  overflow: hidden;
}
.article-card-zoom img {
  transition: transform var(--duration-slow) ease;
}
.article-card-zoom:hover img {
  transform: scale(1.05);
}
.logo-text { letter-spacing: 0.3em; }

/* ページ見出し（英語）: Nunito Sans（Google Fonts） */
.page-heading { font-family: 'Nunito Sans', sans-serif; }
.tracking-widest-extra { tracking: 0.3em; }

/* メインカラム内テキストの行数制限（タイトル最大3行・本文最大3行） */
.article-title {
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
    line-height: 1.4;
}

.article-body {
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
    line-height: 1.7;
    min-height: calc(1.7em * 3);
}

/* モバイル用バーガーメニュー（三本線 → 開いたとき ×） */
#menu-toggle {
    position: relative;
}
#menu-toggle .hamburger-line {
    display: block;
    position: absolute;
    left: 50%;
    top: 50%;
    width: 18px;
    height: 1px;
    margin: 0;
    background-color: #000;
    border-radius: 9999px;
    transform-origin: center;
    transition: transform var(--duration-fast) ease, opacity var(--duration-fast) ease;
}
#menu-toggle .hamburger-line:nth-child(1) {
    transform: translate(-50%, -50%) translateY(-4px);
}
#menu-toggle .hamburger-line:nth-child(2) {
    transform: translate(-50%, -50%);
}
#menu-toggle .hamburger-line:nth-child(3) {
    transform: translate(-50%, -50%) translateY(4px);
}
#menu-toggle.is-open .hamburger-line:nth-child(1) {
    transform: translate(-50%, -50%) rotate(45deg);
}
#menu-toggle.is-open .hamburger-line:nth-child(2) {
    opacity: 0;
    transform: translate(-50%, -50%) scaleX(0);
}
#menu-toggle.is-open .hamburger-line:nth-child(3) {
    transform: translate(-50%, -50%) rotate(-45deg);
}

/* ヘッダーのアニメーション用 */
#site-header {
    transition: box-shadow var(--duration-normal) ease, border-color var(--duration-normal) ease;
}
/* ページ最上部では影・ボーダーなし（ツライチ）、スクロール後に表示 */
#site-header:not(.header-shadow) {
    border-bottom-color: transparent !important;
}
#site-header.header-shadow {
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.10);
}
#site-header-wrapper {
    transition: padding var(--duration-normal) ease;
}

/* 上段ロゴはHTML側のtop-1/2 -translate-y-1/2で常に縦横中央配置 */

/* デスクトップ時、スクロール後のコンパクトヘッダー用（やや低めの高さ） */
@media (min-width: 1024px) {
    #site-header-wrapper.header-condensed {
        padding-top: 0.5rem;
        padding-bottom: 0.5rem;
    }

    /* コンパクト時はナビの上マージンもさらに詰める */
    #site-header-wrapper.header-condensed #desktop-nav {
        margin-top: 0.25rem;
    }
}

/* 上段ヘッダー（ロゴ行）をスクロール時に隠す */
#header-top-row {
    transition: max-height var(--duration-normal) ease, opacity var(--duration-normal) ease, transform var(--duration-normal) ease;
}
#header-top-row.header-top-collapsed {
    max-height: 0;
    opacity: 0;
    transform: translateY(-100%);
    overflow: hidden;
}

@media (max-width: 767px) {
    /* スマホ時はヘッダー上下の余白も圧縮しつつ、ロゴのための最小限のマージンを確保 */
    #site-header-wrapper {
        padding-top: 0.25rem;
        padding-bottom: 0.25rem;
    }
}

/* グローバルメニューの幅を揃えてホバー時にズレないように（最長の「DRESSENCEについて」に合わせる） */
.global-nav-item {
    min-width: 6rem;
}
@media (min-width: 1024px) {
    .global-nav-item {
        min-width: 10rem;
    }
}

/* デスクトップナビのマージン調整と縦中央寄せ */
#desktop-nav {
    transition: margin var(--duration-normal) ease;
    align-items: center;
}
#desktop-nav.nav-condensed {
    margin-top: 0.25rem;
}

/* Journal記事（Hodinkee風レイアウト・タイポグラフィ） */
.journal-article .journal-body {
    font-size: 1.0625rem; /* 17px - 長文読みやすさ */
    line-height: 1.85;
}
.journal-article .journal-prose p {
    font-size: 1.0625rem;
    line-height: 1.85;
    color: var(--gray-700);
}
.journal-article blockquote {
    font-style: italic;
    font-size: 1.3125rem; /* 21px */
    line-height: 1.5;
}
@media (min-width: 768px) {
    .journal-article blockquote {
        font-size: 1.5rem; /* 24px */
    }
}
.journal-article header h1 {
    font-size: 2rem; /* 32px */
    line-height: 1.25;
}
@media (min-width: 768px) {
    .journal-article header h1 {
        font-size: 2.5rem; /* 40px */
    }
}
@media (min-width: 1024px) {
    .journal-article header h1 {
        font-size: 3rem; /* 48px */
    }
}
.journal-article header [class*="text-[10px]"] {
    font-size: 10px;
}
.journal-article header .text-\[11px\] {
    font-size: 11px;
}

/* 記事ページ：ワイドヒーロー画像（フルブリード・高インパクト） */
.journal-hero {
    width: 100%;
    aspect-ratio: 21 / 9;
    overflow: hidden;
    background: var(--gray-100);
}
.journal-hero img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}
@media (max-width: 767px) {
    .journal-hero { aspect-ratio: 16 / 9; }
}

/* サブ画像＋キャプション（ミニマル） */
.journal-figure {
    margin: 2.5rem 0;
}
.journal-figure img {
    width: 100%;
    aspect-ratio: 4 / 3;
    object-fit: cover;
    background: var(--gray-100);
}
.journal-figcaption {
    margin-top: 0.5rem;
    font-size: 0.6875rem; /* 11px */
    letter-spacing: 0.08em;
    color: var(--gray-500);
    text-align: center;
}

/* ヘッダー検索窓 */
#site-search-input {
  border-color: var(--gray-200);
}
#site-search-input:focus {
  border-color: var(--gray-200);
  outline: none;
}
#site-search-form button[type="submit"] {
  background-color: var(--brand);
  color: var(--white);
  border-color: var(--brand);
}
#site-search-form button[type="submit"]:hover {
  opacity: 0.9;
}

/* 記事本文下のタグ（クリックでタグフィルターへ） */
.article-tag {
    display: inline-block;
    padding: var(--space-1) var(--space-2);
    font-size: 10px;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--white);
    background-color: var(--brand);
    border-radius: 2px;
    text-decoration: none;
    transition: opacity var(--duration-fast) ease;
}
.article-tag:hover {
    opacity: 0.85;
}

/* Support: <details> のデフォルト三角を隠し、独自の開閉表示にする */
details summary::-webkit-details-marker {
    display: none;
}