/**
 * NARITA TIME - Base CSS
 *
 * DESIGN.md v1.0 準拠
 * 「街を歩く編集者の目」
 *
 * カラー:Snow × Paper × Terracotta × Deep Indigo
 *
 * @package naritatime
 */

/* ============================================================
   1. デザイントークン
   ============================================================ */

:root {

    /* ========== カラーシステム ========== */

    /* ベース */
    --ntm-snow: #FFFFFF;
    --ntm-paper: #F8F5EE;
    --ntm-paper-deep: #EEEAE0;

    /* メイン:テラコッタ(成田の朱・暖簾) */
    --ntm-terracotta: #B84F37;  /* v1.73.0: #C2533A は紙4.20:1でAA未達。小さな文字34箇所で使っていたため明度を5%下げてAA適合(紙4.58/白4.99)。装飾用途の見た目はほぼ不変 */
    --ntm-terracotta-light: #D67560;
    --ntm-terracotta-deep: #9A3F2A;
    /* v1.61.0: 本文リンク専用。ブランドのテラコッタ(#C2533A)は紙色上で 4.20:1 で
       AA基準(4.5:1)に僅かに届かないため、リンクだけ僅かに沈めた色を用意する。
       装飾・アクセント(バッジ/罫線/大きな文字)は従来の terracotta を継続使用。 */
    --ntm-link: #AE4630;        /* on paper = 5.19:1 (AA適合) */

    /* サブメイン:Deep Indigo(藍・夜の参道) */
    --ntm-indigo: #1F2A44;
    --ntm-indigo-light: #2E3D5C;
    --ntm-indigo-deep: #131B2E;

    /* 補助 */
    --ntm-sand: #D6B98F;
    --ntm-sand-soft: #E4D2B0;
    --ntm-moss: #5B7B5B;
    --ntm-moss-soft: #7A9A7A;

    /* テキスト */
    --ntm-ink: #2C2C2C;
    --ntm-slate: #5A5A5A;
    --ntm-slate-soft: #6E6E6E;  /* v1.73.0: #8A8A8A は白3.45:1/紙3.17:1でAA未達。0.68rem の補助文字14箇所で使っていたため AA を満たす最も薄い色に変更 */

    /* 罫線・境界 */
    --ntm-hairline: #E5E1D5;
    --ntm-hairline-soft: #F0ECE0;
    --ntm-border: #D5D0C2;

    /* 機能色 */
    --ntm-error: #C04848;
    --ntm-success: #5B8A5B;

    /* ========== タイポグラフィ ========== */

    --ntm-font-serif: 'Noto Serif JP', 'Hiragino Mincho ProN', 'Yu Mincho', serif;
    --ntm-font-sans: 'Noto Sans JP', -apple-system, BlinkMacSystemFont,
                     'Hiragino Kaku Gothic ProN', 'Yu Gothic', 'Meiryo', sans-serif;
    --ntm-font-en-italic: 'Cormorant Garamond', 'EB Garamond', Georgia, serif;
    --ntm-font-en: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;

    /* タイプスケール */
    --ntm-text-display: 4.5rem;    /* 72px - ヒーロー大見出し */
    --ntm-text-h1: 3rem;           /* 48px - 記事タイトル */
    --ntm-text-h2: 2.25rem;        /* 36px - セクション見出し */
    --ntm-text-h3: 1.75rem;        /* 28px - サブ見出し */
    --ntm-text-h4: 1.375rem;       /* 22px - 小見出し */
    --ntm-text-lg: 1.125rem;       /* 18px - リード文 */
    --ntm-text-base: 1rem;         /* 16px - 本文 */
    --ntm-text-sm: 0.875rem;       /* 14px - 補助 */
    --ntm-text-xs: 0.75rem;        /* 12px - ラベル */

    /* 行間 */
    --ntm-leading-tight: 1.3;
    --ntm-leading-snug: 1.5;
    --ntm-leading-normal: 1.7;
    --ntm-leading-relaxed: 1.85;
    --ntm-leading-loose: 2.0;

    /* 字間 */
    --ntm-tracking-tight: -0.01em;
    --ntm-tracking-normal: 0;
    --ntm-tracking-wide: 0.05em;
    --ntm-tracking-wider: 0.1em;
    --ntm-tracking-widest: 0.15em;

    /* ========== スペーシング ========== */

    --ntm-space-1: 4px;
    --ntm-space-2: 8px;
    --ntm-space-3: 12px;
    --ntm-space-4: 16px;
    --ntm-space-5: 24px;
    --ntm-space-6: 32px;
    --ntm-space-7: 40px;
    --ntm-space-8: 48px;
    --ntm-space-10: 64px;
    --ntm-space-12: 96px;
    --ntm-space-16: 128px;
    --ntm-space-20: 160px;

    /* ========== レイアウト ========== */

    --ntm-content-max: 1280px;
    --ntm-content-narrow: 720px;
    --ntm-content-wide: 1440px;
    --ntm-padding-pc: 32px;
    --ntm-padding-tablet: 24px;
    --ntm-padding-mobile: 20px;

    /* ========== 装飾 ========== */

    --ntm-border-width: 1px;
    --ntm-border-width-thick: 2px;

    /* シャドウ(控えめ・必要時のみ) */
    --ntm-shadow-sm: 0 1px 2px rgba(31, 42, 68, 0.04);
    --ntm-shadow-md: 0 4px 16px rgba(31, 42, 68, 0.06);
    --ntm-shadow-lg: 0 12px 32px rgba(31, 42, 68, 0.08);

    /* トランジション */
    --ntm-ease: cubic-bezier(0.4, 0, 0.2, 1);
    --ntm-ease-out: cubic-bezier(0.16, 1, 0.3, 1);
    --ntm-transition-fast: 0.2s var(--ntm-ease);
    --ntm-transition-normal: 0.3s var(--ntm-ease);
    --ntm-transition-slow: 0.5s var(--ntm-ease-out);

    /* ========== Z-INDEX ========== */

    --ntm-z-base: 1;
    --ntm-z-dropdown: 100;
    --ntm-z-sticky: 200;
    --ntm-z-fixed: 300;
    --ntm-z-overlay: 400;
    --ntm-z-modal: 500;
    --ntm-z-popover: 600;
    --ntm-z-tooltip: 700;
}

/* ============================================================
   2. リセット & ベース
   ============================================================ */

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

html {
    -webkit-text-size-adjust: 100%;
    text-size-adjust: 100%;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
    scroll-behavior: smooth;
}

body.ntm-theme {
    margin: 0;
    padding: 0;
    font-family: var(--ntm-font-sans);
    font-size: var(--ntm-text-base);
    font-weight: 400;
    line-height: var(--ntm-leading-relaxed);
    color: var(--ntm-ink);
    background: var(--ntm-snow);
    overflow-x: hidden;
}

/* SWELL 上書き対応 */
body.ntm-theme p,
body.ntm-theme li,
body.ntm-theme dd {
    font-family: var(--ntm-font-sans);
    color: var(--ntm-ink);
}

img, picture, video, svg {
    max-width: 100%;
    height: auto;
    display: block;
}

a {
    color: var(--ntm-indigo);
    text-decoration: none;
    transition: color var(--ntm-transition-fast);
}

a:hover {
    color: var(--ntm-terracotta);
}

button {
    font-family: inherit;
    cursor: pointer;
    border: none;
    background: none;
    padding: 0;
    color: inherit;
}

ul, ol {
    margin: 0;
    padding: 0;
    list-style: none;
}

/* ============================================================
   3. アクセシビリティ
   ============================================================ */

.ntm-skip-link {
    position: absolute;
    top: -100px;
    left: 0;
    z-index: var(--ntm-z-tooltip);
    padding: var(--ntm-space-3) var(--ntm-space-5);
    background: var(--ntm-indigo);
    color: var(--ntm-snow);
    font-size: var(--ntm-text-sm);
    transition: top var(--ntm-transition-fast);
}

.ntm-skip-link:focus {
    top: 0;
    color: var(--ntm-snow);
}

/* スクリーンリーダー・検索エンジン向けに意味を残しつつ視覚的に隠す（見出し階層の補完等） */
.ntm-sr-only {
    position: absolute !important;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

:focus-visible {
    outline: 2px solid var(--ntm-terracotta);
    outline-offset: 2px;
}

::selection {
    background: var(--ntm-terracotta);
    color: var(--ntm-snow);
}

/* ============================================================
   4. レイアウトコンテナ
   ============================================================ */

.ntm-main {
    min-height: 60vh;
    background: var(--ntm-snow);
}

.ntm-content-inner {
    max-width: var(--ntm-content-max);
    margin: 0 auto;
    padding-left: var(--ntm-padding-pc);
    padding-right: var(--ntm-padding-pc);
}

.ntm-content-narrow {
    max-width: var(--ntm-content-narrow);
    margin-left: auto;
    margin-right: auto;
}

.ntm-content-wide {
    max-width: var(--ntm-content-wide);
    margin: 0 auto;
    padding-left: var(--ntm-padding-pc);
    padding-right: var(--ntm-padding-pc);
}

.ntm-section {
    padding: var(--ntm-space-12) 0;
}

.ntm-section + .ntm-section {
    padding-top: 0;
}

.ntm-section-inner {
    max-width: var(--ntm-content-max);
    margin: 0 auto;
    padding-left: var(--ntm-padding-pc);
    padding-right: var(--ntm-padding-pc);
}

/* ============================================================
   5. 罫線(NARITA TIME の重要要素)
   ============================================================ */

.ntm-rule {
    width: 40px;
    height: 2px;
    background: var(--ntm-terracotta);
    border: none;
    margin: var(--ntm-space-3) 0 var(--ntm-space-5);
}

.ntm-rule-long {
    width: 100%;
    height: 1px;
    background: var(--ntm-hairline);
    border: none;
    margin: 0;
}

.ntm-rule-center {
    width: 60px;
    height: 2px;
    background: var(--ntm-terracotta);
    border: none;
    margin: var(--ntm-space-5) auto;
}

/* ============================================================
   6. レスポンシブ
   ============================================================ */

@media (max-width: 1024px) {
    :root {
        --ntm-padding-pc: var(--ntm-padding-tablet);
    }

    .ntm-section {
        padding: var(--ntm-space-10) 0;
    }
}

@media (max-width: 768px) {
    :root {
        --ntm-padding-pc: var(--ntm-padding-mobile);
        --ntm-text-display: 3rem;
        --ntm-text-h1: 2.25rem;
        --ntm-text-h2: 1.75rem;
        --ntm-text-h3: 1.5rem;
        --ntm-space-12: 64px;
        --ntm-space-16: 80px;
    }

    .ntm-section {
        padding: var(--ntm-space-10) 0;
    }
}

/* ============================================================
   v1.61.0: 動きの抑制（WCAG 2.3.3 / JIS X 8341-3 レベルAAA 項目）
   OS で「視差効果を減らす」を有効にした利用者には、サイト全体の
   アニメーション・トランジションを実質停止する。個別セクションの
   丁寧なフォールバック（静止した最終状態を見せる等）はそのまま有効。
   ============================================================ */
@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;
    }
}