/* Nagashima 100th microsite — bundled foundation (tokens + reset + typography + animations + utilities) */


/* ===== na-tokens.css ===== */

/* ==========================================================================
   na-tokens.css
   Nagashima Group 100th Anniversary Microsite — Design Tokens
   --------------------------------------------------------------------------
   Single source of truth for colors, spacing, typography, motion, shadows.
   All tokens are declared on :root as CSS custom properties.

   Two coexisting palettes:
     1. Corporate palette (from design.md §2)  - prefix --na-c-*
     2. Editorial 100th palette (inferred from modules) - prefix --na-ed-*

   Class names in other files use the .na- prefix only. This file declares
   no selectors other than :root.
   ========================================================================== */

:root {
  /* ---------------------------------------------------------------------- */
  /* 1. CORPORATE PALETTE  (design.md §2-1)                                 */
  /* ---------------------------------------------------------------------- */
  --na-c-navy:            #2B5587;  /* Primary brand — headings, reversed card bg */
  --na-c-navy-dark:       #1E3F67;  /* Deep navy — footer bg, strong emphasis */
  --na-c-navy-light:      #3A6AA5;  /* Lighter navy — hover states on primary */
  --na-c-sky:             #29AAE1;  /* Accent — lines/dots/numbers only, never fills */
  --na-c-sky-hover:       #0E8AC2;  /* Accent hover state */
  --na-c-sky-soft:        #E6F4FB;  /* Ice aqua — tag bg, section bands */
  --na-c-gold:            #C5A572;  /* Anniversary Gold — 100th marks only (until 2027) */

  /* ---------------------------------------------------------------------- */
  /* 2. EDITORIAL 100周年 PALETTE  (inferred from modules)                   */
  /*    Used for the anniversary microsite long-form story sections.        */
  /*    Values chosen as the median of 5 reference modules.                 */
  /* ---------------------------------------------------------------------- */
  --na-ed-ink:            #14110F;  /* Sumi ink — primary editorial heading color */
  --na-ed-ink-body:       #2D2D30;  /* Editorial body text */
  --na-ed-ink-sub:        #52525B;  /* Editorial sub text / captions */
  --na-ed-ink-muted:      #7A7268;  /* Editorial muted / metadata */
  --na-ed-cream:          #F6EFE2;  /* Paper cream — editorial page bg */
  --na-ed-cream-light:    #FAF8F3;  /* Lighter cream — subtle panels */
  --na-ed-cream-deep:     #EDE4D3;  /* Deeper parchment — inset cards */
  --na-ed-gold:           #B6883A;  /* Antique gold — editorial accent */
  --na-ed-gold-deep:      #8B6914;  /* Deeper antique gold — rules, marks */
  --na-ed-gold-light:     #D4B87C;  /* Lighter antique gold — hover / highlights */
  --na-ed-bg-dark:        #0F1419;  /* Sumi black — dark editorial panels */
  --na-ed-bg-dark-soft:   #1C1710;  /* Sepia-dark — alternate dark bg */
  --na-ed-rule:           #E0DBCE;  /* Hairline rule color on cream */
  --na-ed-rule-strong:    #D8D3C7;  /* Stronger hairline rule */
  --na-ed-seal:           #8B2020;  /* Vermillion seal — rare accent only */

  /* ---------------------------------------------------------------------- */
  /* 3. NEUTRALS  (design.md §2-2)                                          */
  /* ---------------------------------------------------------------------- */
  --na-bg-base:           #FFFFFF;  /* Page background (pure white) */
  --na-bg-fog:            #FAFBFC;  /* Off-white for section breaks */
  --na-bg-subtle:         #F5F7FA;  /* Card / form background */
  --na-bg-hover:          #F0F4F8;  /* Hover background */
  --na-text-primary:      #1A1A1A;  /* Body text (not pure black) */
  --na-text-secondary:    #4B5563;  /* Sub text */
  --na-text-muted:        #6B7280;  /* Caption / helper */
  --na-text-light:        #9CA3AF;  /* Disabled / copyright */
  --na-border-default:    #E5E7EB;  /* Default rule / divider */
  --na-border-strong:     #D1D5DB;  /* Input / card outline */

  /* ---------------------------------------------------------------------- */
  /* 4. FUNCTIONAL COLORS  (design.md §2-3)                                 */
  /* ---------------------------------------------------------------------- */
  --na-color-success:     #2E9E6E;  /* Success / OK / positive */
  --na-color-warning:     #E8A63C;  /* Warning / pending */
  --na-color-danger:      #C84A4A;  /* Error / negative */
  --na-color-info:        #4A8BC8;  /* Info / notice */

  /* ---------------------------------------------------------------------- */
  /* 5. SPACING SCALE  (8px base — design.md §6-3)                          */
  /* ---------------------------------------------------------------------- */
  --na-space-1:   4px;   /* Minimum */
  --na-space-2:   8px;   /* Tight */
  --na-space-3:   12px;  /* Narrow */
  --na-space-4:   16px;  /* Standard */
  --na-space-5:   20px;  /* Comfortable */
  --na-space-6:   24px;  /* Loose */
  --na-space-8:   32px;  /* Within-section */
  --na-space-10:  40px;  /* Between groups */
  --na-space-12:  48px;  /* Section break (sm) */
  --na-space-16:  64px;  /* Section break (md) */
  --na-space-20:  80px;  /* Large section */
  --na-space-24:  96px;  /* Hero gap (lg+) */

  /* ---------------------------------------------------------------------- */
  /* 6. BORDER RADIUS  (design.md §6-4)                                     */
  /* ---------------------------------------------------------------------- */
  --na-radius-sm:    2px;    /* Badges / tags */
  --na-radius-md:    6px;    /* Standard cards & inputs */
  --na-radius-lg:    12px;   /* Large cards / modals */
  --na-radius-full:  999px;  /* Pill buttons / avatars */

  /* ---------------------------------------------------------------------- */
  /* 7. SHADOWS  (design.md §6-5)                                           */
  /* ---------------------------------------------------------------------- */
  --na-shadow-sm:  0 1px 2px rgba(43, 85, 135, 0.04);   /* Subtle lift */
  --na-shadow-md:  0 2px 8px rgba(43, 85, 135, 0.06);   /* Standard card */
  --na-shadow-lg:  0 8px 24px rgba(43, 85, 135, 0.10);  /* Hover / raised */
  --na-shadow-xl:  0 16px 48px rgba(43, 85, 135, 0.14); /* Modal / overlay */

  /* ---------------------------------------------------------------------- */
  /* 8. MOTION  (design.md §6-6)                                            */
  /* ---------------------------------------------------------------------- */
  --na-ease-micro:   ease-out;                         /* 150ms hover color */
  --na-ease-fast:    cubic-bezier(0.4, 0, 0.2, 1);     /* 200ms button/link */
  --na-ease-base:    cubic-bezier(0.4, 0, 0.2, 1);     /* 300ms card/modal */
  --na-ease-slow:    cubic-bezier(0.4, 0, 0.2, 1);     /* 500ms scroll-linked */
  --na-duration-micro: 150ms; /* Hover color changes */
  --na-duration-fast:  200ms; /* Buttons / links */
  --na-duration-base:  300ms; /* Cards / modals */
  --na-duration-slow:  500ms; /* Scroll-linked reveals */

  /* ---------------------------------------------------------------------- */
  /* 9. TYPOGRAPHY STACKS                                                   */
  /* ---------------------------------------------------------------------- */
  --na-font-jp:        'Noto Sans JP', 'Hiragino Kaku Gothic ProN', 'Yu Gothic', 'Meiryo', sans-serif;       /* JA body */
  --na-font-en:        'Inter', 'Helvetica Neue', 'Arial', sans-serif;                                       /* EN / numerals */
  --na-font-jp-serif:  'Shippori Mincho B1', 'Noto Serif JP', 'Yu Mincho', 'Hiragino Mincho ProN', serif;    /* Editorial JA serif */
  --na-font-en-serif:  'Cormorant Garamond', 'Times New Roman', Georgia, serif;                              /* Editorial EN serif */

  /* ---------------------------------------------------------------------- */
  /* 10. LAYOUT / CONTAINER  (design.md §6-2)                               */
  /* ---------------------------------------------------------------------- */
  --na-container-max:     1200px;  /* Default max content width */
  --na-container-narrow:  780px;   /* Narrow reading column */
  --na-container-wide:    1440px;  /* Wide hero layouts */
  --na-gutter-sm:         20px;    /* Horizontal padding on mobile */
  --na-gutter-md:         40px;    /* Horizontal padding on desktop */

  /* ---------------------------------------------------------------------- */
  /* 11. BREAKPOINTS (documentation only — used as reference)                */
  /*    sm: <= 640px     mobile                                              */
  /*    md: 641 - 1024px tablet                                              */
  /*    lg: 1025 - 1440px laptop                                             */
  /*    xl: > 1440px     desktop                                             */
  /*                                                                         */
  /*    Media query helpers (copy into modules):                             */
  /*    @media (min-width: 641px)  { ... }  // md+                           */
  /*    @media (min-width: 1025px) { ... }  // lg+                           */
  /*    @media (min-width: 1441px) { ... }  // xl+                           */
  /* ---------------------------------------------------------------------- */
  --na-bp-sm:  640px;
  --na-bp-md:  1024px;
  --na-bp-lg:  1440px;
}

/* ===== na-reset.css ===== */

/* ==========================================================================
   na-reset.css
   Scoped reset — does NOT touch html/body or global element selectors.
   HubSpot's theme layer owns those. This reset only applies inside
   .na-scope (the wrapper modules should place around their markup).
   ========================================================================== */

/* Box-sizing, scoped. */
.na-scope,
.na-scope *,
.na-scope *::before,
.na-scope *::after {
  box-sizing: border-box;
}

/* Baseline scope: establishes colors, font family, smoothing. */
.na-scope {
  color: var(--na-text-primary);
  font-family: var(--na-font-jp);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

/* Normalize margin for structural elements inside the scope. */
.na-scope h1,
.na-scope h2,
.na-scope h3,
.na-scope h4,
.na-scope h5,
.na-scope h6,
.na-scope p,
.na-scope figure,
.na-scope blockquote,
.na-scope ul,
.na-scope ol,
.na-scope dl {
  margin: 0;
}

/* Media elements behave predictably. */
.na-scope img,
.na-scope svg,
.na-scope video,
.na-scope canvas,
.na-scope picture {
  display: block;
  max-width: 100%;
  height: auto;
}

/* Form elements inherit font. */
.na-scope input,
.na-scope button,
.na-scope textarea,
.na-scope select {
  font: inherit;
  color: inherit;
}

/* Buttons — strip default chrome; per-component styles add back. */
.na-scope button {
  background: none;
  border: 0;
  padding: 0;
  cursor: pointer;
}

/* Anchor baseline. */
.na-scope a {
  color: inherit;
  text-decoration: none;
}

/* Remove default list style from opt-in .na-list lists. */
.na-scope ul.na-list,
.na-scope ol.na-list {
  list-style: none;
  padding: 0;
}

/* .na-section — a baseline vertical rhythm wrapper modules can use. */
.na-section {
  position: relative;
  padding-top: var(--na-space-16);
  padding-bottom: var(--na-space-16);
}

@media (min-width: 1025px) {
  .na-section {
    padding-top: var(--na-space-24);
    padding-bottom: var(--na-space-24);
  }
}

/* ===== na-typography.css ===== */

/* ==========================================================================
   na-typography.css
   Single Google Fonts import + typographic base classes.
   Sizes use clamp() for fluid scaling between mobile and desktop
   per design.md §3-4.
   ========================================================================== */

/* One-shot Google Fonts load for the entire microsite. */
@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@400;500;700;900&family=Inter:wght@400;500;600;700;800&family=Shippori+Mincho+B1:wght@400;500;600;700;800&family=Cormorant+Garamond:ital,wght@0,400;0,500;0,600;0,700;1,400;1,500&display=swap');

/* --------------------------------------------------------------------------
   Font family helpers — opt in to specific stacks.
   -------------------------------------------------------------------------- */
.na-font-gothic    { font-family: var(--na-font-jp); }
.na-font-mincho    { font-family: var(--na-font-jp-serif); }
.na-font-sans-en   { font-family: var(--na-font-en); }
.na-font-serif-en  { font-family: var(--na-font-en-serif); }

/* --------------------------------------------------------------------------
   Heading scale — fluid via clamp(min, preferred, max).
   Mobile → Desktop from design.md §3-4.
   -------------------------------------------------------------------------- */

.na-h1 {
  font-family: var(--na-font-jp);
  font-weight: 900;
  font-size: clamp(32px, 4.6vw, 56px);
  line-height: 1.25;
  letter-spacing: 0.01em;
  color: var(--na-text-primary);
}

.na-h2 {
  font-family: var(--na-font-jp);
  font-weight: 700;
  font-size: clamp(24px, 3.2vw, 40px);
  line-height: 1.3;
  letter-spacing: 0.01em;
  color: var(--na-text-primary);
}

.na-h3 {
  font-family: var(--na-font-jp);
  font-weight: 700;
  font-size: clamp(20px, 2.2vw, 28px);
  line-height: 1.35;
  color: var(--na-text-primary);
}

.na-h4 {
  font-family: var(--na-font-jp);
  font-weight: 700;
  font-size: clamp(18px, 1.6vw, 22px);
  line-height: 1.4;
  color: var(--na-text-primary);
}

/* --------------------------------------------------------------------------
   Body copy.
   -------------------------------------------------------------------------- */
.na-body {
  font-family: var(--na-font-jp);
  font-weight: 400;
  font-size: clamp(15px, 1.1vw, 16px);
  line-height: 1.75;
  color: var(--na-text-primary);
}

.na-body-lg {
  font-family: var(--na-font-jp);
  font-weight: 400;
  font-size: clamp(16px, 1.3vw, 18px);
  line-height: 1.8;
  color: var(--na-text-primary);
}

.na-small {
  font-family: var(--na-font-jp);
  font-weight: 400;
  font-size: clamp(13px, 0.95vw, 14px);
  line-height: 1.7;
  color: var(--na-text-secondary);
}

.na-caption {
  font-family: var(--na-font-jp);
  font-weight: 400;
  font-size: 12px;
  line-height: 1.6;
  color: var(--na-text-muted);
}

/* --------------------------------------------------------------------------
   Eyebrow / kicker — small uppercase label above headings.
   -------------------------------------------------------------------------- */
.na-eyebrow {
  font-family: var(--na-font-en);
  font-weight: 600;
  font-size: clamp(11px, 0.9vw, 12px);
  line-height: 1;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--na-c-navy);
}

.na-kicker {
  font-family: var(--na-font-jp);
  font-weight: 500;
  font-size: clamp(12px, 1vw, 13px);
  line-height: 1.5;
  letter-spacing: 0.08em;
  color: var(--na-text-muted);
}

/* --------------------------------------------------------------------------
   Editorial pull quote — uses mincho serif.
   -------------------------------------------------------------------------- */
.na-quote {
  font-family: var(--na-font-jp-serif);
  font-weight: 500;
  font-size: clamp(18px, 2vw, 24px);
  line-height: 1.85;
  letter-spacing: 0.04em;
  color: var(--na-ed-ink);
}

/* ===== na-animations.css ===== */

/* ==========================================================================
   na-animations.css
   Shared keyframes and [data-na-reveal] utility used with na-reveal.js.
   ========================================================================== */

/* --------------------------------------------------------------------------
   Keyframes
   -------------------------------------------------------------------------- */

@keyframes na-fadeUp {
  from {
    opacity: 0;
    transform: translate3d(0, 24px, 0);
  }
  to {
    opacity: 1;
    transform: translate3d(0, 0, 0);
  }
}

@keyframes na-fadeIn {
  from { opacity: 0; }
  to   { opacity: 1; }
}

@keyframes na-revealRight {
  from {
    opacity: 0;
    transform: translate3d(-32px, 0, 0);
  }
  to {
    opacity: 1;
    transform: translate3d(0, 0, 0);
  }
}

@keyframes na-revealLeft {
  from {
    opacity: 0;
    transform: translate3d(32px, 0, 0);
  }
  to {
    opacity: 1;
    transform: translate3d(0, 0, 0);
  }
}

/* Slow drift for background layers. */
@keyframes na-drift {
  0%   { transform: translate3d(0, 0, 0); }
  50%  { transform: translate3d(-2%, 1%, 0); }
  100% { transform: translate3d(0, 0, 0); }
}

/* --------------------------------------------------------------------------
   [data-na-reveal] — element starts hidden, na-reveal.js adds .is-visible
   when the element enters the viewport.
   -------------------------------------------------------------------------- */

[data-na-reveal] {
  opacity: 0;
  transform: translate3d(0, 24px, 0);
  transition:
    opacity var(--na-duration-slow) var(--na-ease-slow),
    transform var(--na-duration-slow) var(--na-ease-slow);
  will-change: opacity, transform;
}

[data-na-reveal].is-visible {
  opacity: 1;
  transform: translate3d(0, 0, 0);
}

/* Direction variants. */
[data-na-reveal="right"]          { transform: translate3d(-32px, 0, 0); }
[data-na-reveal="right"].is-visible { transform: translate3d(0, 0, 0); }

[data-na-reveal="left"]           { transform: translate3d(32px, 0, 0); }
[data-na-reveal="left"].is-visible  { transform: translate3d(0, 0, 0); }

[data-na-reveal="fade"]           { transform: none; }
[data-na-reveal="fade"].is-visible { transform: none; }

/* --------------------------------------------------------------------------
   Reduced motion — cancel all transforms and shorten durations.
   -------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  [data-na-reveal],
  [data-na-reveal].is-visible,
  [data-na-reveal="right"],
  [data-na-reveal="left"],
  [data-na-reveal="fade"] {
    opacity: 1;
    transform: none;
    transition: none;
  }

  .na-scope *,
  .na-scope *::before,
  .na-scope *::after {
    animation-duration: 0.001ms;
    animation-iteration-count: 1;
    transition-duration: 0.001ms;
  }
}

/* ===== na-utilities.css ===== */

/* ==========================================================================
   na-utilities.css
   Small reusable utility classes. Keep this file minimal.
   ========================================================================== */

/* --------------------------------------------------------------------------
   Containers (design.md §6-2)
   -------------------------------------------------------------------------- */
.na-container {
  width: 100%;
  max-width: var(--na-container-max);
  margin-inline: auto;
  padding-inline: var(--na-gutter-sm);
}

.na-container--narrow {
  width: 100%;
  max-width: var(--na-container-narrow);
  margin-inline: auto;
  padding-inline: var(--na-gutter-sm);
}

@media (min-width: 641px) {
  .na-container,
  .na-container--narrow {
    padding-inline: var(--na-gutter-md);
  }
}

/* --------------------------------------------------------------------------
   Aspect ratio helpers
   -------------------------------------------------------------------------- */
.na-aspect-16x9 { aspect-ratio: 16 / 9; }
.na-aspect-4x3  { aspect-ratio: 4 / 3; }
.na-aspect-1x1  { aspect-ratio: 1 / 1; }

.na-aspect-16x9 > img,
.na-aspect-4x3  > img,
.na-aspect-1x1  > img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* --------------------------------------------------------------------------
   Visually hidden — accessible to screen readers, hidden visually.
   -------------------------------------------------------------------------- */
.na-visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* --------------------------------------------------------------------------
   Focus ring (design.md §6-7) — WCAG 2.1 AA
   Apply .na-focus-ring or use :focus-visible inside .na-scope.
   -------------------------------------------------------------------------- */
.na-focus-ring:focus-visible,
.na-scope a:focus-visible,
.na-scope button:focus-visible,
.na-scope input:focus-visible,
.na-scope select:focus-visible,
.na-scope textarea:focus-visible,
.na-scope [tabindex]:focus-visible {
  outline: 2px solid var(--na-c-sky);
  outline-offset: 2px;
  border-radius: var(--na-radius-sm);
}

/* --------------------------------------------------------------------------
   Gold hairline divider — the thin rule used across editorial sections.
   -------------------------------------------------------------------------- */
.na-divider-gold {
  display: block;
  width: 64px;
  height: 1px;
  margin: var(--na-space-4) 0;
  background: var(--na-ed-gold);
  border: 0;
}

.na-divider-gold--center {
  margin-left: auto;
  margin-right: auto;
}

.na-divider-gold--wide {
  width: 120px;
}

/* --------------------------------------------------------------------------
   Chips & tags (design.md §7-6)
   -------------------------------------------------------------------------- */
.na-chip {
  display: inline-flex;
  align-items: center;
  gap: var(--na-space-2);
  padding: 4px 10px;
  font-family: var(--na-font-jp);
  font-size: 12px;
  font-weight: 500;
  line-height: 1.4;
  border-radius: var(--na-radius-full);
  background: var(--na-c-sky-soft);
  color: var(--na-c-navy);
}

.na-chip--navy {
  background: var(--na-c-navy);
  color: #fff;
}

.na-chip--gold {
  background: var(--na-ed-cream-deep);
  color: var(--na-ed-gold-deep);
}

.na-tag {
  display: inline-flex;
  align-items: center;
  padding: 4px 10px;
  font-family: var(--na-font-jp);
  font-size: 11px;
  font-weight: 700;
  line-height: 1.4;
  letter-spacing: 0.04em;
  border-radius: var(--na-radius-sm);
  background: var(--na-c-navy);
  color: #fff;
}

.na-tag--category {
  background: var(--na-c-sky-soft);
  color: var(--na-c-navy);
}

.na-tag--new {
  background: var(--na-c-sky);
  color: #fff;
}