/* ============================================================
   Fire & Fragrance Japan — mobile-first stylesheet
   Base styles target ~375–430px phones.
   min-width media queries add tablet/desktop enhancements.
   Hover styles live only inside @media (hover: hover).
   ============================================================ */

/* 1. RESET */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

html {
  font-size: 16px;
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
}

body {
  font-family: var(--font-body);
  line-height: 1.7;
  color: var(--white);
  background: var(--ink);
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

img { max-width: 100%; height: auto; display: block; }
a { text-decoration: none; color: inherit; }
ul { list-style: none; }
button { cursor: pointer; border: none; background: none; font: inherit; color: inherit; }

a, button { -webkit-tap-highlight-color: transparent; }

:focus-visible {
  outline: 2px solid var(--white);
  outline-offset: 3px;
}

/* 2. TOKENS */
:root {
  --ink:        #0A0A0A;
  --ink-mid:    #141414;
  --ink-light:  #1E1E1E;
  --ink-raise:  #2A2A2A;
  --white:      #F8F5F0;
  --paper:      #EDEAE4;
  --paper-mid:  #E2DDD6;
  --charcoal:   #111111;
  --gray-dark:  #3C3C3C;
  --gray:       #5F5A52;   /* ≥ 4.5:1 on paper */
  --gray-light: #C4C0B8;
  --gray-mid:   #DEDAD2;

  /* Japanese flag red — used only for the Okinawa map's selected-island
     state. Not a general accent colour. */
  --red: #BC002D;

  /* text on dark surfaces — kept legible on phones in daylight */
  --t-strong: rgba(248,245,240,0.95);
  --t-body:   rgba(248,245,240,0.72);
  --t-soft:   rgba(248,245,240,0.55);
  --t-faint:  rgba(248,245,240,0.52);  /* ≥ 4.5:1 on ink (WCAG AA) */
  --hairline: rgba(248,245,240,0.14);

  /* Noto Sans JP sits behind the Latin faces so Japanese glyphs render
     well in either language (the JP webfont loads on first JA switch). */
  --font-display: 'Bebas Neue', 'Noto Sans JP', 'Hiragino Kaku Gothic ProN', 'Arial Narrow', Impact, sans-serif;
  --font-body:    'Inter', 'Noto Sans JP', 'Hiragino Kaku Gothic ProN', 'Hiragino Sans', 'Noto Sans CJK JP', 'Yu Gothic', 'Meiryo', -apple-system, BlinkMacSystemFont, sans-serif;   /* Japanese: the webfont loads on desktop only; phones use their system font */

  --max-w:      1200px;
  --max-w-wide: 1440px;
  --nav-h:      64px;
  --px:         1.25rem;
  --py:         4.5rem;

  --ease:     cubic-bezier(0.16, 1, 0.3, 1);
  --tap:      44px; /* minimum touch target */
}

@media (min-width: 768px) {
  :root {
    --nav-h: 72px;
    --px: clamp(2rem, 5vw, 5rem);
    --py: clamp(5rem, 9vw, 8.5rem);
  }
}

h1, h2, h3, h4 { font-family: var(--font-display); line-height: 1; font-weight: 400; }

/* 3. SHARED PRIMITIVES */

.label {
  display: block;
  font-family: var(--font-body);
  font-size: 0.75rem;              /* 12px: readable on phones */
  font-weight: 700;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--t-soft);
  margin-bottom: 1rem;
}

.display {
  font-family: var(--font-display);
  letter-spacing: 0.02em;
  line-height: 0.95;
}

.section {
  padding: var(--py) var(--px);
}
.section__inner { max-width: var(--max-w); margin: 0 auto; }

.section--mid   { background: var(--ink-mid); }

.section--paper .label,
.section--white .label,
.now .label,
.behind .label,
.split--paper .label { color: var(--gray); }

.body-copy {
  font-size: 1rem;
  line-height: 1.85;
  color: var(--t-body);
  max-width: 58ch;
}
.section--paper .body-copy,
.section--white .body-copy,
.now .body-copy,
.behind .body-copy,
.split--paper .body-copy { color: var(--gray-dark); }

.title {
  font-family: var(--font-display);
  font-size: clamp(2.6rem, 10vw, 5.5rem);
  line-height: 0.95;
  letter-spacing: 0.02em;
  color: var(--t-strong);
  margin-bottom: 1.25rem;
}
.section--paper .title,
.section--white .title,
.now .title,
.behind .title,
.split--paper .title { color: var(--charcoal); }

/* 4. BUTTONS — every button is a comfortable touch target */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.6rem;
  min-height: 48px;
  padding: 0.85rem 1.75rem;
  font-family: var(--font-body);
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  white-space: nowrap;
  transition: background 0.25s var(--ease), color 0.25s var(--ease), border-color 0.25s var(--ease);
}

.btn--primary {
  background: var(--white);
  color: var(--ink);
  border: 1px solid var(--white);
}
.btn--outline {
  background: transparent;
  color: var(--white);
  border: 1px solid rgba(248,245,240,0.4);
}
.btn:active { transform: translateY(1px); }

@media (hover: hover) {
  .btn--primary:hover { background: var(--paper); border-color: var(--paper); }
  .btn--outline:hover { border-color: var(--white); background: rgba(248,245,240,0.08); }
}

/* On narrow phones primary action rows stack full-width */
.btn-row {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  align-items: stretch;
}
@media (min-width: 560px) {
  .btn-row { flex-direction: row; align-items: center; }
  .btn-row .btn { align-self: auto; }
}

.link-arrow {
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  min-height: var(--tap);
  font-family: var(--font-body);
  font-size: 0.8rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.link-arrow svg { flex-shrink: 0; transition: transform 0.2s var(--ease); }
@media (hover: hover) {
  .link-arrow:hover svg { transform: translateX(4px); }
}

/* 5. NAVIGATION */
.nav {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 1000;
  height: calc(var(--nav-h) + env(safe-area-inset-top, 0px));
  padding-top: env(safe-area-inset-top, 0px);
  transition: background 0.35s var(--ease), border-color 0.35s;
  border-bottom: 1px solid transparent;
}
.nav.scrolled,
.nav--solid {
  background: rgba(10,10,10,0.95);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border-bottom-color: var(--hairline);
}

.nav__inner {
  height: var(--nav-h);
  max-width: var(--max-w-wide);
  margin: 0 auto;
  padding: 0 var(--px);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
}

.nav__logo {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  min-height: var(--tap);
  flex-shrink: 0;
}
.nav__logo-mark { width: 32px; height: 32px; }
.nav__logo-text { display: flex; flex-direction: column; line-height: 1.15; }
.nav__logo-primary {
  font-family: var(--font-display);
  font-size: 1.05rem;
  color: var(--white);
  letter-spacing: 0.05em;
}
.nav__logo-sub {
  font-size: 0.66rem;
  font-weight: 600;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--t-faint);
}

.nav__links { display: none; }

.nav__badge { display: none; }

/* Language switch — always visible in the header, tap-first */
.lang-switch {
  display: flex;
  align-items: center;
  flex-shrink: 0;
  margin-left: auto;
}
.lang-switch button,
.lang-switch a {
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: var(--tap);
  padding: 0 0.6rem;
  font-family: var(--font-body);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  color: var(--t-faint);
  transition: color 0.2s;
}
.lang-switch a + a { border-left: 1px solid var(--hairline); }
.lang-switch a[aria-current="true"] { color: var(--white); }
@media (hover: hover) {
  .lang-switch a:hover { color: var(--white); }
}
@media (min-width: 1024px) {
  .lang-switch { margin-left: 0; }
}

/* Hamburger — full 44px hit area */
.nav__toggle {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 6px;
  width: var(--tap);
  height: var(--tap);
  z-index: 1010;
}
.nav__toggle span {
  display: block;
  width: 24px; height: 2px;
  background: var(--white);
  transition: transform 0.3s var(--ease), opacity 0.3s;
  transform-origin: center;
}
.nav__toggle[aria-expanded="true"] span:nth-child(1) { transform: translateY(8px) rotate(45deg); }
.nav__toggle[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.nav__toggle[aria-expanded="true"] span:nth-child(3) { transform: translateY(-8px) rotate(-45deg); }

/* Full-screen mobile menu — big Bebas links, one thumb-length list */
.nav__menu {
  position: fixed;
  inset: 0;
  z-index: 999;
  background: var(--ink);
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  overflow-y: auto;
  padding: calc(var(--nav-h) + env(safe-area-inset-top, 0px) + 1rem) var(--px) 2.5rem;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.3s var(--ease), visibility 0s linear 0.3s;
}
/* Flex spacers center the menu when there's room, but let it scroll
   (instead of clipping the top) on short/landscape screens */
.nav__menu::before,
.nav__menu::after {
  content: '';
  flex: 1 0 0;
}
.nav__menu.open {
  opacity: 1;
  visibility: visible;
  transition: opacity 0.3s var(--ease);
}
.nav__menu a:not(.btn) {
  display: flex;
  align-items: baseline;
  gap: 0.9rem;
  padding: 0.7rem 0;                /* ≥48px rows */
  font-family: var(--font-display);
  font-size: clamp(2.4rem, 10vw, 4rem);
  letter-spacing: 0.03em;
  color: var(--t-strong);
  border-bottom: 1px solid var(--hairline);
}
.nav__menu a:not(.btn):last-of-type { border-bottom: none; }
.nav__menu a[aria-current="page"] { color: var(--white); }
.nav__menu-num {
  font-family: var(--font-body);
  font-size: 0.65rem;
  font-weight: 700;
  letter-spacing: 0.2em;
  color: var(--t-faint);
}
.nav__menu .btn { margin-top: 1.75rem; }

.nav__menu-foot {
  margin-top: 2rem;
  display: flex;
  align-items: center;
  gap: 0.6rem;
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--t-faint);
}

.pulse-dot {
  display: inline-block;
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--white);
  opacity: 0.8;
  flex-shrink: 0;
  animation: pulse-dot 2.5s ease-in-out infinite;
}

/* Desktop nav */
@media (min-width: 1024px) {
  .nav__toggle, .nav__menu { display: none; }
  .nav__links {
    display: flex;
    align-items: center;
    gap: 1.9rem;
  }
  .nav__links a {
    display: inline-flex;
    align-items: center;
    min-height: var(--tap);
    font-size: 0.78rem;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--t-soft);
    position: relative;
    transition: color 0.2s;
  }
  .nav__links a[aria-current="page"] { color: var(--white); }
  .nav__links a:not(.nav__cta)::after {
    content: '';
    position: absolute;
    bottom: 8px; left: 0;
    width: 0; height: 1px;
    background: var(--white);
    transition: width 0.25s var(--ease);
  }
  .nav__links a[aria-current="page"]:not(.nav__cta)::after { width: 100%; }
  @media (hover: hover) {
    .nav__links a:hover { color: var(--white); }
    .nav__links a:not(.nav__cta):hover::after { width: 100%; }
  }
  .nav__cta {
    background: var(--white);
    color: var(--ink) !important;
    padding: 0 1.4rem;
    min-height: 40px;
    font-weight: 700;
  }
  .nav__badge {
    display: flex;
    align-items: center;
    gap: 0.55rem;
    font-size: 0.68rem;
    font-weight: 600;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--t-faint);
    white-space: nowrap;
  }
}

/* 7. ORIENTATION (home intro statement) */
.orientation {
  padding: var(--py) var(--px);
  background: var(--ink);
}
.orientation__inner { max-width: 720px; margin: 0 auto; }
.orientation__text {
  font-size: clamp(1.2rem, 4.6vw, 1.75rem);
  line-height: 1.55;
  font-weight: 400;
  color: var(--t-strong);
}
.orientation__text strong { font-weight: 600; }

/* 8. THE WHY — full-screen stat moment */
.why {
  position: relative;
  min-height: 92vh;
  min-height: 92svh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: var(--py) var(--px);
  background: var(--ink);
  overflow: hidden;
}
.why__media {
  position: absolute; inset: 0;
}
.why__media img {
  width: 100%; height: 100%;
  object-fit: cover;
  opacity: 0.28;
}
.why__media::after {
  content: '';
  position: absolute; inset: 0;
  background: linear-gradient(to bottom, rgba(10,10,10,0.55), rgba(10,10,10,0.92));
}
.why__inner {
  position: relative; z-index: 2;
  max-width: var(--max-w);
  margin: 0 auto;
  width: 100%;
}
.why__stat {
  font-family: var(--font-display);
  font-size: clamp(8rem, 42vw, 24rem);
  line-height: 0.85;
  color: var(--white);
  letter-spacing: 0.01em;
}
.why__line {
  margin-top: 1.5rem;
  font-size: clamp(1.05rem, 4vw, 1.5rem);
  line-height: 1.6;
  color: var(--t-body);
  max-width: 34ch;
}
.why__line strong { color: var(--t-strong); font-weight: 600; }
.why .link-arrow { margin-top: 2rem; color: var(--t-strong); }

/* 9. NOW — the two pillars */
.now { background: var(--paper); color: var(--charcoal); padding: var(--py) var(--px); }
.now__inner { max-width: var(--max-w); margin: 0 auto; }
.now__head { margin-bottom: 2.5rem; }

.pillar {
  position: relative;
  display: block;
  overflow: hidden;
  background: var(--ink);
  color: var(--white);
  min-height: 420px;
}
.pillar__media {
  position: absolute; inset: 0;
}
.pillar__media img {
  width: 100%; height: 100%;
  object-fit: cover;
  filter: grayscale(35%) brightness(0.6);
  transition: filter 0.6s var(--ease), transform 0.8s var(--ease);
}
/* Touch reveal: .in-view is added by the scroll observer */
.pillar.in-view .pillar__media img { filter: grayscale(0%) brightness(0.72); }
.pillar__media::after {
  content: '';
  position: absolute; inset: 0;
  background: linear-gradient(to top, rgba(8,8,8,0.94) 0%, rgba(8,8,8,0.35) 55%, rgba(8,8,8,0.1) 100%);
}
.pillar__body {
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  min-height: 420px;
  padding: 1.5rem;
}
.pillar__num {
  font-family: var(--font-display);
  font-size: 1.1rem;
  letter-spacing: 0.1em;
  color: var(--t-soft);
}
.pillar__title {
  display: block;
  font-size: clamp(2.6rem, 11vw, 4.5rem);
  line-height: 0.95;
  color: var(--white);
  margin-bottom: 0.75rem;
}
.pillar__text {
  display: block;
  font-size: 0.95rem;
  line-height: 1.75;
  color: var(--t-body);
  max-width: 46ch;
  margin-bottom: 1.25rem;
}
.pillar .link-arrow { color: var(--white); }

.pillar:active .pillar__media img { filter: grayscale(0%) brightness(0.78); }

@media (min-width: 900px) {
  .pillar { flex: 1; min-height: 560px; }
  .pillar__body { min-height: 560px; padding: 2.25rem; }
  @media (hover: hover) {
    .pillar:hover .pillar__media img { filter: grayscale(0%) brightness(0.75); transform: scale(1.03); }
  }
}

/* 10. RHYTHM — how we actually gather */
.rhythm {
  background: var(--ink);
  padding: var(--py) var(--px);
}
.rhythm__inner {
  max-width: var(--max-w);
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: 2.5rem;
}
.rhythm__statement {
  font-family: var(--font-display);
  font-size: clamp(2.4rem, 10.5vw, 5.5rem);
  line-height: 1.02;
  letter-spacing: 0.02em;
  color: var(--white);
  max-width: 16ch;
}
.rhythm__note {
  font-size: 1rem;
  line-height: 1.85;
  color: var(--t-body);
  max-width: 50ch;
}
.rhythm__card {
  border: 1px solid var(--hairline);
  padding: 1.75rem 1.5rem;
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
}
.rhythm__card-line {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--t-strong);
}
@media (min-width: 900px) {
  .rhythm__inner {
    flex-direction: row;
    align-items: flex-end;
    justify-content: space-between;
  }
  .rhythm__card { min-width: 340px; }
  .rhythm__note { font-size: 1.1rem; line-height: 1.9; }
}

/* 11. GALLERY — swipeable, scroll-snap (replaces the hover marquee) */
.gallery {
  background: var(--ink);
  padding: 0 0 var(--py);
}
.gallery__viewport { outline: none; }
.gallery__viewport:focus-visible { box-shadow: inset 0 0 0 2px var(--accent); }
.gallery__track {
  display: flex;
  gap: 4px;
}
.gallery__item {
  flex: 0 0 auto;
  width: min(78vw, 420px);
  aspect-ratio: 4 / 5;
  overflow: hidden;
  background: var(--ink-light);
}
.gallery__item--wide { aspect-ratio: 4 / 3; width: min(88vw, 560px); }
.gallery__item img {
  width: 100%; height: 100%;
  object-fit: cover;
  filter: grayscale(30%) brightness(0.8);
  transition: filter 0.6s var(--ease);
}
.gallery__item.in-view img { filter: grayscale(0%) brightness(0.95); }
.no-js .gallery__item img[data-src] { display: none; }   /* held wheel photo: without JS the <noscript> JPEG next to it is shown instead */
.gallery__hint {
  padding: 1rem var(--px) 0;
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--t-faint);
  text-align: center;
}
@media (min-width: 1024px) {
  .gallery__hint { display: none; }
}

/* 12. VISION — outlined type: what we're believing for */
.vision {
  background: var(--ink);
  padding: var(--py) var(--px);
  border-top: 1px solid var(--hairline);
}
.vision__inner { max-width: var(--max-w); margin: 0 auto; }
.vision__intro {
  font-size: 1rem;
  line-height: 1.85;
  color: var(--t-body);
  max-width: 52ch;
  margin-bottom: 2.75rem;
}
.vision__foot {
  margin-top: 2.5rem;
  font-size: 0.92rem;
  line-height: 1.8;
  color: var(--t-soft);
  max-width: 52ch;
  font-style: italic;
}

/* 13. BEHIND — movement + organization */
/* A single focused statement, not a stretched-out card — centered in a
   readable column like the homepage's other one-block moments. Mobile
   stays a simple stack; ≥900px it becomes a wider editorial spread with
   the identity (label + heading) beside the description, so the section
   actually uses a desktop canvas instead of floating small inside it. */
.behind { background: var(--paper); color: var(--charcoal); padding: var(--py) var(--px); }
.behind__inner { max-width: 640px; margin: 0 auto; }
.behind__block { border-top: 1px solid rgba(0,0,0,0.15); padding-top: 1.5rem; }
.behind__block h3 {
  font-size: clamp(1.9rem, 7vw, 3rem);
  color: var(--charcoal);
  margin-bottom: 0.85rem;
}
.behind__block p {
  font-size: 1rem;
  line-height: 1.85;
  color: var(--gray-dark);
  max-width: 52ch;
}
.behind__block .link-arrow { margin-top: 1.1rem; color: var(--charcoal); }

@media (min-width: 900px) {
  .behind { padding-top: calc(var(--py) + 1.5rem); padding-bottom: calc(var(--py) + 1.5rem); }
  .behind__inner { max-width: 1080px; }
  .behind__block {
    display: flex;
    align-items: flex-start;
    gap: 4.5rem;
    padding-top: 2.25rem;
  }
  .behind__block-head { flex: 0 0 320px; }
  .behind__block-body { flex: 1; padding-top: 0.6rem; }
  .behind__block h3 { font-size: clamp(3.2rem, 5vw, 4.75rem); margin-bottom: 0; }
  .behind__block p { font-size: 1.1rem; line-height: 1.9; max-width: 58ch; }
  .behind__block .link-arrow { margin-top: 1.5rem; }
}

/* 14. PARTNER — pray / come / give */
.partner {
  position: relative;
  background: var(--ink);
  padding: var(--py) var(--px);
  overflow: hidden;
}
.partner__media { position: absolute; inset: 0; }
.partner__media img {
  width: 100%; height: 100%;
  object-fit: cover;
  opacity: 0.22;
}
.partner__media::after {
  content: '';
  position: absolute; inset: 0;
  background: linear-gradient(rgba(10,10,10,0.6), rgba(10,10,10,0.95));
}
.partner__inner { position: relative; z-index: 2; max-width: var(--max-w); margin: 0 auto; }
.partner__verbs {
  display: flex;
  flex-direction: column;
  margin: 1.5rem 0 2rem;
}
.partner__verb {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 1.1rem 0;
  border-bottom: 1px solid var(--hairline);
  font-family: var(--font-display);
  font-size: clamp(2.4rem, 10vw, 5rem);
  line-height: 1;
  letter-spacing: 0.02em;
  color: var(--t-strong);
}
.partner__verb:first-child { border-top: 1px solid var(--hairline); }
.partner__verb svg { flex-shrink: 0; color: var(--t-faint); transition: transform 0.25s var(--ease), color 0.25s; }
.partner__verb:active svg { transform: translateX(5px); }
@media (hover: hover) {
  .partner__verb:hover { color: var(--white); }
  .partner__verb:hover svg { transform: translateX(5px); color: var(--t-soft); }
}
.partner__verb-jp {
  font-family: var(--font-body);
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.24em;
  color: var(--t-faint);
  margin-left: auto;
}

/* 15. STATS (Okinawa page band + small stat rows) */
.stats-band { background: var(--paper); color: var(--charcoal); padding: var(--py) var(--px); }
.stats-band__inner {
  max-width: var(--max-w);
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1px;
  background: var(--gray-mid);
  border: 1px solid var(--gray-mid);
}
.stat-block { background: var(--paper); padding: 1.5rem 1.25rem; }
.stat-block__num {
  font-family: var(--font-display);
  font-size: clamp(2.4rem, 9vw, 4rem);
  color: var(--charcoal);
  line-height: 1;
  margin-bottom: 0.4rem;
}
.stat-block__label {
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--gray);
  margin-bottom: 0.5rem;
}

@media (min-width: 900px) {
  .stats-band__inner { grid-template-columns: repeat(4, 1fr); }
  .stat-block { padding: 2.25rem 1.75rem; }
}

/* The culture cluster's four facts settle into a 2-column grid once
   there's room, so related items form a tidy neighborhood, not a list.
   (A higher breakpoint than the photo wall above: prose wraps badly in
   a narrow column, small thumbnails don't mind it.) */
@media (min-width: 560px) {
  .archive__doc-list--grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    column-gap: 2rem;
  }
  .archive__doc-list--grid .archive__doc-list-item { border-bottom: none; padding: 0.8rem 0; }
}

/* 17. MAP — tap-to-pin island explorer */
.map-section { background: var(--ink); padding: var(--py) var(--px); }
.map-section__inner { max-width: var(--max-w); margin: 0 auto; }
.map-section__head { margin-bottom: 2rem; }

.map-frame {
  border: 1px solid var(--hairline);
  background: #0d0d0d;
}
.map-canvas { width: 100%; position: relative; }
.map-canvas svg { width: 100%; height: auto; display: block; }

/* Reset control for the tap-to-focus zoom */
.map-reset {
  position: absolute;
  right: 0.75rem;
  bottom: 0.75rem;
  z-index: 5;
  min-height: var(--tap);
  padding: 0.5rem 1.1rem;
  font-family: var(--font-body);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--t-strong);
  background: rgba(10,10,10,0.82);
  border: 1px solid rgba(248,245,240,0.3);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}
.map-reset[hidden] { display: none; }
@media (hover: hover) {
  .map-reset:hover { border-color: var(--white); color: var(--white); }
}

/* Zoomed state: focused group leads, the rest recede */
.island-group { transition: opacity 0.3s var(--ease); }
.island-group.is-dim { opacity: 0.22; }
.island-group.is-dim .island-label { opacity: 0; }
svg.is-zoomed .island-label { font-size: 8px; letter-spacing: 0.08em; }
@media (max-width: 700px) {
  svg.is-zoomed .island-label { font-size: 9px; }
}

.island-shape {
  fill: #2A2A2A;
  stroke: rgba(248,245,240,0.18);
  stroke-width: 1;
  transition: fill 0.25s, stroke 0.25s;
}
.island-group { cursor: pointer; }
.island-group:focus-visible { outline: none; }
.island-group:focus-visible .island-shape { stroke: var(--white); stroke-width: 2; }
.island-group.active .island-shape {
  fill: var(--red);
  stroke: rgba(188,0,45,0.9);
}
@media (hover: hover) {
  .island-group:hover .island-shape { fill: #4a4a44; }
  .island-group.active:hover .island-shape { fill: var(--red); }
}
/* Labels are tappable too — they enlarge the touch target of small islands.
   Sizes are in viewBox units (840 wide): on a ~350px phone the SVG renders
   at ~0.42x, so labels scale up as the canvas shrinks to stay legible. */
.island-label {
  font-family: var(--font-body);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  fill: rgba(248,245,240,0.55);
  transition: fill 0.25s;
  user-select: none;
  -webkit-user-select: none;
}
@media (max-width: 700px) {
  .island-label { font-size: 18px; letter-spacing: 0.06em; }
}
@media (max-width: 480px) {
  .island-label { font-size: 20px; letter-spacing: 0.04em; }
}

/* Orientation cues + sea names (decorative wayfinding text) */
.map-cue {
  font-family: var(--font-body);
  font-size: 9px;
  letter-spacing: 1.5px;
  fill: rgba(248,245,240,0.35);
}
.map-sea {
  font-family: var(--font-body);
  font-size: 9px;
  letter-spacing: 2px;
  fill: rgba(248,245,240,0.18);
}
@media (max-width: 700px) {
  .map-cue { font-size: 15px; }
  .map-sea { font-size: 14px; }
}
/* Invisible hit areas around small islands (~2x their visual size) */
.island-hit { fill: transparent; stroke: none; }

.map-note {
  padding: 0.9rem 1.25rem 1.1rem;
  border-top: 1px solid var(--hairline);
  font-size: 0.72rem;
  line-height: 1.6;
  letter-spacing: 0.06em;
  color: var(--t-faint);
}
@media (min-width: 900px) {
  .map-note { grid-column: 1 / -1; }
}
.island-group.active .island-label { fill: rgba(248,245,240,0.9); }
.ocean-grid { stroke: rgba(248,245,240,0.045); stroke-width: 0.5; }

.map-hint {
  padding: 1rem 1.25rem;
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--t-faint);
  border-bottom: 1px solid var(--hairline);
}

/* The docked detail card — always visible, fed by taps */
.island-card {
  border-top: 1px solid var(--hairline);
  padding: 1.5rem 1.25rem 1.75rem;
}
.island-card__jp {
  font-size: 0.75rem;
  letter-spacing: 0.2em;
  color: var(--t-faint);
  margin-bottom: 0.2rem;
}
.island-card__name {
  font-family: var(--font-display);
  font-size: clamp(2rem, 8vw, 3rem);
  color: var(--white);
  line-height: 1;
  margin-bottom: 1.25rem;
}
.island-card__rows { display: flex; flex-direction: column; }
.island-card__row {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 1rem;
  padding: 0.6rem 0;
  border-bottom: 1px solid var(--hairline);
}
.island-card__row:last-child { border-bottom: none; }
.island-card__key {
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--t-faint);
}
.island-card__val {
  font-family: var(--font-display);
  font-size: 1.15rem;
  letter-spacing: 0.03em;
  color: var(--t-strong);
  text-align: right;
}

@media (min-width: 900px) {
  .map-frame { display: grid; grid-template-columns: 1fr 320px; }
  .map-hint { grid-column: 1 / -1; }
  .island-card { border-top: none; border-left: 1px solid var(--hairline); padding: 2rem 1.75rem; }
}
.people-card {
  flex: 0 1 340px;
  max-width: 340px;
  background: var(--ink-light);
  border: 1px solid var(--hairline);
  padding: 2rem 1.75rem;
}
.people-card__name {
  font-family: var(--font-display);
  font-size: 1.6rem;
  color: var(--white);
  letter-spacing: 0.03em;
}
.people-card__jp {
  font-size: 0.75rem;
  color: var(--t-faint);
  letter-spacing: 0.12em;
  margin-bottom: 0.75rem;
}
.people-card__badge {
  display: inline-block;
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--t-strong);
  border: 1px solid var(--hairline);
  border-radius: 999px;
  padding: 0.28em 0.75em;
  margin-bottom: 1.1rem;
}
.people-card__bar {
  height: 3px;
  background: rgba(248,245,240,0.08);
  margin-bottom: 1.1rem;
  position: relative;
  overflow: hidden;
}
.people-card__bar-fill {
  position: absolute;
  top: 0; left: 0; height: 100%;
  background: var(--white);
  width: 0;
  transition: width 1.1s var(--ease) 0.15s;
}
.people-card.in-view .people-card__bar-fill { width: var(--fill); }
.people-card__stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0.6rem; }
.people-stat__val {
  font-family: var(--font-display);
  font-size: 1.15rem;
  white-space: nowrap;              /* "≈ 1,350,000" stays on one line */
  color: var(--white);
  line-height: 1.1;
}
.people-stat__key {
  font-size: 0.7rem;                /* 11.2px: readable on a phone */
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--t-faint);
  margin-top: 0.3rem;
}
.people-card__desc {
  margin-top: 1.25rem;
  font-size: 0.86rem;
  line-height: 1.75;
  color: var(--t-soft);
}
.people-card__fact {
  margin-top: 0.7rem;
  font-size: 0.86rem;
  line-height: 1.7;
  color: var(--t-faint);
  font-style: italic;
}

/* 18b. SOURCES — unobtrusive per-section citation disclosure */
.sources { margin-top: 2rem; padding-top: 1.1rem; border-top: 1px solid var(--hairline); }
.sources summary {
  cursor: pointer;
  list-style: none;
  min-height: 44px;                 /* comfortable tap target */
  display: flex; align-items: center;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--t-faint);
  display: flex;
  align-items: center;
  gap: 0.5em;
  -webkit-tap-highlight-color: transparent;
}
.sources summary::-webkit-details-marker { display: none; }
.sources summary::before { content: '+'; font-family: var(--font-body); font-weight: 400; }
.sources[open] summary::before { content: '\2212'; }
.sources summary:hover { color: var(--t-soft); }
.sources__body { margin-top: 0.9rem; font-size: 0.76rem; line-height: 1.75; color: var(--t-soft); }
.sources__body ul { margin: 0; padding: 0; list-style: none; }
.sources__body li { padding: 0.35rem 0; border-bottom: 1px solid var(--hairline); }
.sources__body li:last-child { border-bottom: none; }
.sources__body a { color: var(--t-strong); text-decoration: underline; text-underline-offset: 2px; }
.sources__note { margin-top: 0.75rem; font-style: italic; color: var(--t-faint); }

/* Light-surface variant (paper/white sections) */
.section--paper .sources,
.section--white .sources,
.stats-band .sources { border-top-color: var(--paper-mid); }
.section--paper .sources summary,
.section--white .sources summary,
.stats-band .sources summary { color: var(--gray); }
.section--paper .sources summary:hover,
.section--white .sources summary:hover,
.stats-band .sources summary:hover { color: var(--gray-dark); }
.section--paper .sources__body,
.section--white .sources__body,
.stats-band .sources__body { color: var(--gray-dark); }
.section--paper .sources__body li,
.section--white .sources__body li,
.stats-band .sources__body li { border-bottom-color: var(--paper-mid); }
.section--paper .sources__body a,
.section--white .sources__body a,
.stats-band .sources__body a { color: var(--charcoal); }
.section--paper .sources__note,
.section--white .sources__note,
.stats-band .sources__note { color: var(--gray); }
.stats-band .sources { max-width: var(--max-w); margin: 1.75rem auto 0; }

/* 19. SPLIT (image + content) */
.split {
  display: grid;
  grid-template-columns: 1fr;
}
.split__media {
  position: relative;
  overflow: hidden;
  background: var(--ink-light);
  aspect-ratio: 4 / 3;
}
.split__media img {
  position: absolute;
  inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  filter: grayscale(25%) brightness(0.85);
  transition: filter 0.6s var(--ease);
}
.split__media.in-view img,
.split.in-view .split__media img { filter: grayscale(0%) brightness(0.95); }
.split__content {
  padding: var(--py) var(--px);
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.split--dark  .split__content { background: var(--ink); }
@media (min-width: 900px) {
  .split { grid-template-columns: 1fr 1fr; min-height: 80vh; }
  .split__media { aspect-ratio: auto; min-height: 100%; }
  .split--flip .split__media { order: 2; }
}

/* 19b. PRAYER ROOM — desktop type scale
   Mobile stays exactly as it was: a single simple column. ≥900px the
   same single column just gets bigger and more confident — larger body
   copy, a wider (but still comfortable) measure, a touch more room
   between heading and text — rather than being restructured into a
   multi-zone editorial layout. */
.pr-expect__lede { font-weight: 600; color: var(--white); }

@media (min-width: 900px) {
  section[aria-label="Why the prayer room"] .body-copy,
  section[aria-label="What to expect"] .body-copy {
    font-size: 1.15rem;
    line-height: 1.9;
    max-width: 68ch;
  }
  section[aria-label="Why the prayer room"] .body-copy.mt-1,
  section[aria-label="What to expect"] .body-copy.mt-1 {
    margin-top: 1.5rem;
  }
  section[aria-label="Why the prayer room"] .title,
  section[aria-label="What to expect"] .title {
    font-size: clamp(3.2rem, 5vw, 4.75rem);
    margin-bottom: 1.75rem;
  }
}

/* 22. CONNECT — paths + form */
.paths { display: flex; flex-direction: column; gap: 1.25rem; margin-top: 2rem; }
.path {
  border: 1px solid var(--hairline);
  padding: 1.75rem 1.5rem;
  scroll-margin-top: calc(var(--nav-h) + 1.5rem);
}
.path__label {
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--t-faint);
  margin-bottom: 0.6rem;
}
.path__title {
  font-family: var(--font-display);
  font-size: clamp(2.2rem, 9vw, 3.4rem);
  color: var(--white);
  line-height: 1;
  margin-bottom: 1rem;
}
.path__text {
  font-size: 0.95rem;
  line-height: 1.85;
  color: var(--t-body);
  margin-bottom: 1.5rem;
  max-width: 54ch;
}
@media (min-width: 900px) {
  .paths { flex-direction: row; align-items: stretch; }
  .path { flex: 1; display: flex; flex-direction: column; }
  .path .btn, .path .link-arrow { margin-top: auto; align-self: flex-start; }
}

/* Forms */
.form { display: flex; flex-direction: column; gap: 1.25rem; }
.form__group { display: flex; flex-direction: column; gap: 0.5rem; }
.form__label {
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--t-soft);
}
.form__input, .form__textarea, .form__select {
  background: rgba(248,245,240,0.05);
  border: 1px solid rgba(248,245,240,0.14);
  padding: 0.9rem 1.1rem;
  min-height: 48px;
  font-family: var(--font-body);
  font-size: 1rem;              /* ≥16px prevents iOS zoom-on-focus */
  color: var(--white);
  outline: none;
  transition: border-color 0.2s;
  width: 100%;
  border-radius: 0;
  -webkit-appearance: none;
  appearance: none;
}
.form__select {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%23F8F5F0' stroke-width='1.5'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 1rem center;
  padding-right: 2.5rem;
}
.form__select option { color: var(--charcoal); background: var(--white); }
.form__input::placeholder, .form__textarea::placeholder { color: rgba(248,245,240,0.3); }
.form__input:focus, .form__textarea:focus, .form__select:focus { border-color: var(--white); }
.form__textarea { resize: vertical; min-height: 140px; }
.form__grid { display: grid; grid-template-columns: 1fr; gap: 1.25rem; }
.form__hint { font-size: 0.8rem; color: var(--t-faint); line-height: 1.6; }
@media (min-width: 560px) {
  .form__grid { grid-template-columns: 1fr 1fr; }
}

/* 23. CTA BANNER */
.cta-banner {
  position: relative;
  background: var(--ink);
  padding: var(--py) var(--px);
  overflow: hidden;
}
.cta-banner__media { position: absolute; inset: 0; }
.cta-banner__media img {
  width: 100%; height: 100%;
  object-fit: cover;
  opacity: 0.25;
}
.cta-banner__media::after {
  content: '';
  position: absolute; inset: 0;
  background: linear-gradient(rgba(10,10,10,0.55), rgba(10,10,10,0.94));
}
.cta-banner__inner { position: relative; z-index: 2; max-width: var(--max-w); margin: 0 auto; }
.cta-banner__title {
  font-size: clamp(2.8rem, 12vw, 6.5rem);
  line-height: 0.95;
  color: var(--white);
  margin-bottom: 1.25rem;
  max-width: 14ch;
}
.cta-banner__text {
  font-size: 1rem;
  line-height: 1.85;
  color: var(--t-body);
  max-width: 52ch;
  margin-bottom: 2rem;
}

/* 23b. CTA BANNER — SPLIT (evangelism "go with us" — text beside the CTA
   card, the same pairing used by the Prayer Room rhythm section, so the
   two feel like sister components). Mobile keeps the plain stack — the
   CTA simply sits under the text, unchanged from the base banner. */
@media (min-width: 900px) {
  .cta-banner--split .cta-banner__inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 4rem;
  }
  .cta-banner--split .cta-banner__text-col { flex: 1; }
  .cta-banner--split .cta-banner__title { font-size: clamp(2.6rem, 4.2vw, 4.5rem); }
  .cta-banner--split .cta-banner__text { margin-bottom: 0; }
  .cta-banner--split .cta-banner__cta { flex: 0 0 320px; }
}

/* 24. FOOTER */
.footer {
  background: #050505;
  padding: var(--py) var(--px) calc(1.5rem + env(safe-area-inset-bottom, 0px));
  border-top: 1px solid rgba(248,245,240,0.06);
}
.footer__inner { max-width: var(--max-w); margin: 0 auto; }
.footer__grid {
  display: flex;
  flex-direction: column;
  gap: 2.5rem;
  margin-bottom: 3rem;
}

.footer__brand-jp {
  font-size: 0.66rem;
  font-weight: 700;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--t-faint);
  margin-bottom: 1.1rem;
}
.footer__tagline {
  font-size: 0.9rem;
  line-height: 1.8;
  color: var(--t-soft);
  max-width: 34ch;
}
.footer__col h3 {
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.26em;
  text-transform: uppercase;
  color: var(--t-faint);
  margin-bottom: 1rem;
}
.footer__col ul { display: flex; flex-direction: column; }
.footer__col ul a {
  display: inline-flex;
  align-items: center;
  min-height: 40px;
  font-size: 0.92rem;
  color: var(--t-soft);
  transition: color 0.2s;
}
@media (hover: hover) {
  .footer__col ul a:hover { color: var(--white); }
}
.footer__rhythm {
  font-size: 0.9rem;
  line-height: 1.8;
  color: var(--t-soft);
  max-width: 36ch;
}
.footer__rhythm .pulse-dot { display: inline-block; margin-right: 0.5rem; }
.footer__bottom {
  border-top: 1px solid rgba(248,245,240,0.07);
  padding-top: 1.5rem;
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}
.footer__org {
  font-size: 0.78rem;
  color: var(--t-faint);
  line-height: 1.6;
}
.footer__copy { font-size: 0.75rem; color: rgba(248,245,240,0.5); }
@media (min-width: 900px) {
  .footer__grid { flex-direction: row; justify-content: space-between; gap: 3rem; }
  .footer__bottom { flex-direction: row; justify-content: space-between; align-items: baseline; }
}

/* 25. MOTION */
@keyframes pulse-dot {
  0%, 100% { transform: scale(1); opacity: 0.8; }
  50%      { transform: scale(1.6); opacity: 0.35; }
}
@keyframes rise {
  from { opacity: 0; transform: translateY(24px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* Scroll reveal — .reveal elements rise in when .in-view is added */
.reveal { transition: opacity 0.8s var(--ease), transform 0.8s var(--ease); }
.js .reveal { opacity: 0; transform: translateY(24px); }   /* hidden only once JS can reveal it */
.js .reveal.in-view { opacity: 1; transform: translateY(0); }
.reveal-d1 { transition-delay: 0.08s; }
.reveal-d2 { transition-delay: 0.16s; }
.reveal-d3 { transition-delay: 0.24s; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
  .reveal, .js .reveal { opacity: 1; transform: none; }
}

/* 26. UTILITIES */
.mt-1 { margin-top: 1rem; }
.mt-2 { margin-top: 2rem; }

::selection { background: var(--white); color: var(--ink); }

/* 27. JAPANESE MODE TYPOGRAPHY
   Bebas has no Japanese glyphs; translated display type renders in
   Noto Sans JP, sized and tracked for square glyphs. Untranslated brand
   type (the home hero, logo, FF names) keeps Bebas via glyph fallback. */
html[lang="ja"] { line-break: strict; }

html[lang="ja"] .title,
html[lang="ja"] .rhythm__statement,
html[lang="ja"] .pillar__title,
html[lang="ja"] .cta-banner__title,
html[lang="ja"] .path__title,
html[lang="ja"] .island-card__name,
html[lang="ja"] .partner__verb {
  font-weight: 900;
  line-height: 1.28;
  letter-spacing: 0.04em;
}

html[lang="ja"] .title              { font-size: clamp(1.7rem, 6.5vw, 3.4rem); }
html[lang="ja"] .rhythm__statement  { font-size: clamp(1.6rem, 6vw, 3rem); }
html[lang="ja"] .pillar__title      { font-size: clamp(1.8rem, 7vw, 2.8rem); }
html[lang="ja"] .cta-banner__title  { font-size: clamp(1.8rem, 7vw, 3.4rem); }
html[lang="ja"] .path__title        { font-size: clamp(1.6rem, 6.5vw, 2.4rem); }
html[lang="ja"] .island-card__name  { font-size: clamp(1.5rem, 6vw, 2.2rem); }
html[lang="ja"] .partner__verb      { font-size: clamp(1.7rem, 6.5vw, 3rem); }

html[lang="ja"] .stat-block__num,
html[lang="ja"] .people-card__name,
html[lang="ja"] .people-stat__val   { font-weight: 700; }

html[lang="ja"] .label { letter-spacing: 0.14em; }
html[lang="ja"] .btn                { letter-spacing: 0.06em; }
html[lang="ja"] .nav__menu a:not(.btn) {
  font-size: clamp(1.7rem, 7vw, 2.8rem);
  font-weight: 900;
  line-height: 1.3;
}
html[lang="ja"] .orientation__text  { line-height: 1.9; }
html[lang="ja"] .body-copy,
html[lang="ja"] .rhythm__note,
html[lang="ja"] .pillar__text { line-height: 2; }

/* ============================================================
   28. PHASE 2 (Oct 2026) — brand accent + editorial home hero
   Black / white / Japanese red. Official FF mark in the nav,
   wordmark in the footer. Appended so overrides win by order.
   ============================================================ */
:root {
  --accent:      #B91C32;   /* signature red: deeper, richer (Oct 2026) */
  --accent-deep: #8E1526;   /* hover / pressed */
  --on-accent:   #FFFFFF;
  --red:         #B91C32;   /* the Okinawa map's selected island now follows the accent */
}

/* --- accent on shared components --- */
.btn--primary { background: var(--accent); color: var(--on-accent); border-color: var(--accent); }
@media (hover: hover) {
  .btn--primary:hover { background: var(--accent-deep); border-color: var(--accent-deep); }
}
.pulse-dot { background: var(--white); opacity: 0.9; }  /* white, as originally designed */
.link-arrow svg { color: var(--accent); }
::selection { background: var(--accent); color: #FFFFFF; }

/* --- official mark in the nav (replaces the 72 px square PNG) --- */
.nav__logo-mark { width: auto; height: 28px; }
.nav__inner { gap: 0.75rem; }
.lang-switch a { padding: 0 0.45rem; }
@media (min-width: 1024px) {
  .nav__logo-mark { height: 34px; }
  .nav__inner { gap: 1.5rem; }
  .lang-switch a { padding: 0 0.6rem; }
  .nav__cta { background: var(--accent); color: var(--on-accent) !important; border-radius: 999px; }
  @media (hover: hover) { .nav__cta:hover { background: var(--accent-deep); } }
}

/* --- official wordmark in the footer --- */
.footer__wordmark { width: min(240px, 72%); height: auto; margin-bottom: 0.75rem; }

/* --- editorial hero (home) ---
   Phone: a flex column; the type block dissolves (display: contents) so
   eyebrow, title and tagline sit above the photo and the lead + buttons
   below it. Desktop: a two-column grid, type left, photo right, red strip
   across the bottom. The circular badge sits on the seam. */
.hero-ed {
  position: relative;
  min-height: 100vh;
  min-height: 100svh;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  background: var(--ink);
  color: var(--white);
}
.hero-ed__type { display: contents; }
.hero-ed__eyebrow {
  order: 1;
  margin: calc(var(--nav-h) + env(safe-area-inset-top, 0px) + 1.5rem) var(--px) 0.7rem;
  display: flex; align-items: center; gap: 0.6rem;
  font-size: 0.66rem; font-weight: 700; letter-spacing: 0.26em; text-transform: uppercase;
  color: var(--t-body);
}
.hero-ed__eyebrow::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--accent); flex-shrink: 0; }
.hero-ed__title {
  order: 2;
  margin: 0 var(--px);
  font-family: var(--font-display);
  font-size: clamp(3.6rem, 14.5vw, 6.4rem);
  line-height: 0.9;
  letter-spacing: 0.02em;
  color: var(--white);
  display: flex; flex-direction: column;
}
.hero-ed__title .outline { color: transparent; -webkit-text-stroke: 2px var(--accent); letter-spacing: 0.04em; }
@supports not (-webkit-text-stroke: 1px black) { .hero-ed__title .outline { color: var(--accent); } }
.hero-ed__jp {
  order: 3;
  margin: 0.7rem var(--px) 1.1rem;
  font-size: 0.72rem; letter-spacing: 0.34em; text-transform: uppercase;
  color: var(--t-soft);
}
.hero-ed__media { order: 4; position: relative; margin: 0 var(--px) 0 0; aspect-ratio: 3 / 2; background: var(--ink-light); }
.hero-ed__media img {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; object-position: 60% 35%;
  border-radius: 0 18px 18px 0;
}
.hero-ed__badge { position: absolute; z-index: 2; right: 0.6rem; top: -1.4rem; width: 96px; height: 96px; }  /* above the media::after nav gradient */
.hero-ed__cta { order: 5; padding: 1.5rem var(--px) 2rem; display: flex; flex-direction: column; gap: 1rem; }
.hero-ed__lead { font-size: 0.95rem; line-height: 1.7; color: var(--t-body); max-width: 34rem; }
.hero-ed__strip {
  order: 6;
  margin-top: auto;
  background: var(--accent); color: var(--on-accent);
  font-family: var(--font-display); font-size: 1.15rem; letter-spacing: 0.18em;
  padding: 0.55rem 0;
  white-space: nowrap; overflow: hidden;
  -webkit-mask-image: linear-gradient(to right, #000 88%, transparent);
          mask-image: linear-gradient(to right, #000 88%, transparent);
}
.hero-ed__strip-set { flex: 0 0 auto; white-space: nowrap; }
.hero-ed__strip-set span { padding: 0 1.1rem; }

@media (min-width: 1024px) {
  .hero-ed { display: grid; grid-template-columns: 1.08fr 0.92fr; grid-template-rows: 1fr auto; }
  .hero-ed__type {
    display: flex; flex-direction: column; justify-content: center; gap: 1.5rem;
    grid-column: 1; grid-row: 1;
    padding: calc(var(--nav-h) + 2rem) 4rem var(--nav-h) var(--px);
  }
  .hero-ed__eyebrow, .hero-ed__title, .hero-ed__jp { margin: 0; }
  .hero-ed__title { font-size: clamp(5.5rem, 9.2vw, 9.6rem); }
  .hero-ed__cta { padding: 0; gap: 1.5rem; }
  .hero-ed__lead { font-size: 1.1rem; }
  .hero-ed__media { grid-column: 2; grid-row: 1; margin: 0; aspect-ratio: auto; }
  .hero-ed__media img { border-radius: 0; object-position: 55% 40%; }
  .hero-ed__badge { width: 150px; height: 150px; right: auto; left: -75px; top: 16%; }
  .hero-ed__strip { grid-column: 1 / -1; grid-row: 2; margin-top: 0; font-size: 1.3rem; }
}

/* entrance motion mirrors the old hero; reduced-motion rules above still apply */
.hero-ed__eyebrow { animation: rise 0.8s var(--ease) 0.1s both; }
.hero-ed__title   { animation: rise 0.8s var(--ease) 0.22s both; }
.hero-ed__jp      { animation: rise 0.8s var(--ease) 0.32s both; }
.hero-ed__cta     { animation: rise 0.8s var(--ease) 0.44s both; }

/* Japanese mode: Bebas has no kana, so the strip and tagline fall back to Noto */
html[lang="ja"] .hero-ed__strip { font-weight: 700; letter-spacing: 0.12em; }
html[lang="ja"] .hero-ed__jp    { letter-spacing: 0.2em; }

/* keep the transparent nav legible where the hero photo runs under it */
.hero-ed__media::after {
  content: "";
  position: absolute; inset: 0;
  pointer-events: none;
  background: linear-gradient(to bottom, rgba(10,10,10,0.55) 0%, rgba(10,10,10,0) 22%);
  border-radius: 0 18px 18px 0;
}
@media (min-width: 1024px) { .hero-ed__media::after { border-radius: 0; } }
/* ============================================================
   29. PHASE 3 (Oct 2026) — sub-page editorial hero, What We Do,
   What We Believe, organisation block, Okinawa photo trio, nav fit
   ============================================================ */

/* --- sub-page hero: the home split, shorter, no strip --- */
.hero-ed--page .hero-ed__media { aspect-ratio: 16 / 10; }
.hero-ed--page .hero-ed__cta { padding-bottom: 2.5rem; }
.hero-ed--page .hero-ed__jp:last-of-type { margin-bottom: 1.1rem; }
.hero-ed--page { min-height: 0; }   /* interior heroes are as tall as their content on phones; the home hero keeps 100svh */
@media (min-width: 1024px) {
  .hero-ed--page { min-height: 72vh; min-height: 72svh; grid-template-rows: 1fr; }   /* desktop only: on phones the hero is as tall as its content */
  /* the phone aspect-ratio must not drive the desktop grid column width */
  .hero-ed--page .hero-ed__media { aspect-ratio: auto; }
  .hero-ed--page .hero-ed__type { min-width: 0; }
  .hero-ed--page .hero-ed__title { font-size: clamp(4.5rem, 7.5vw, 7.5rem); }
  .hero-ed--page .hero-ed__type { padding-bottom: calc(var(--nav-h) + 1rem); }
}
/* Japanese mode: translated title spans render in Noto, outlined span becomes solid red */
html[lang="ja"] .hero-ed__title span[data-i18n] { font-weight: 900; line-height: 1.15; letter-spacing: 0.04em; font-size: 0.82em; }
html[lang="ja"] .hero-ed__title .outline { color: var(--accent); -webkit-text-stroke: 0; }

.split--anchor { scroll-margin-top: var(--nav-h); }

/* --- Okinawa today: photo trio --- */
.trio { background: var(--ink); padding: var(--py) var(--px); }
.trio__inner { max-width: var(--max-w); margin: 0 auto; }
@media (min-width: 700px) { }

/* --- five-item nav: fit between 1024 and 1300 px ---
   the Okinawa badge is decorative and the home hero already carries it */
@media (min-width: 1024px) and (max-width: 1299px) {
  .nav__badge { display: none; }
  .nav__links { gap: 1.2rem; }
  .nav__links a { font-size: 0.72rem; }
  .nav__inner { gap: 1rem; }
}
@media (min-width: 1024px) {
}
@media (min-width: 1024px) {
}

/* --- Beliefs page --- */
.creed { background: var(--paper); color: var(--charcoal); padding: var(--py) var(--px); }
.creed--dark { background: var(--ink); color: var(--white); }
.creed__inner { max-width: var(--max-w); margin: 0 auto; }
.creed .title { color: inherit; }
.creed__lead { font-size: 1.05rem; line-height: 1.85; max-width: 64ch; }
.creed__text { display: flex; flex-direction: column; gap: 1.2rem; max-width: 68ch; margin-top: 1.5rem; }
.creed__text p { font-size: 1rem; line-height: 1.9; color: var(--gray-dark); }
.creed--dark .creed__text p, .creed--dark .creed__lead { color: var(--t-body); }
.cultures { display: grid; grid-template-columns: 1fr; gap: 0; margin-top: 2.25rem; border-top: 1px solid var(--hairline); }
.culture { padding: 1.6rem 0; border-bottom: 1px solid var(--hairline); }
.culture h3 { font-family: var(--font-display); font-weight: 400; font-size: clamp(1.7rem, 5.5vw, 2.3rem); line-height: 1; margin-bottom: 0.6rem; color: var(--white); }
.culture h3::before { content: ""; display: inline-block; width: 10px; height: 10px; border-radius: 50%; background: var(--accent); margin-right: 0.6rem; vertical-align: 0.15em; }
.culture p { font-size: 0.98rem; line-height: 1.85; color: var(--t-body); max-width: 56ch; }
@media (min-width: 900px) {
  .cultures { grid-template-columns: 1fr 1fr; column-gap: 4rem; }
  .culture { padding: 2rem 0; }
  .creed__text p { font-size: 1.06rem; }
}
html[lang="ja"] .culture h3 { font-weight: 900; font-size: clamp(1.3rem, 4vw, 1.7rem); line-height: 1.3; }
.partners { display: flex; flex-wrap: wrap; gap: 0.75rem; margin-top: 1.75rem; }
.partners span { font-family: var(--font-display); font-size: 1.5rem; letter-spacing: 0.05em; padding: 0.55rem 1.1rem; border: 1px solid rgba(0,0,0,0.2); }

/* --- Ministry page: three sections, one photo each --- */
/* Community photo (2:3, people in the lower half): crop keeps the children's feet, trims sky */
.pillar__media .photo--low, .split__media .photo--low { object-position: 50% 55%; }
.ministry .split__media { aspect-ratio: 4 / 3; }
.ministry .split__content { padding-top: 3.5rem; padding-bottom: 3.5rem; }
.ministry .split + .split { border-top: 1px solid var(--hairline); }
@media (min-width: 900px) {
  .ministry .split { min-height: 0; }
  .ministry .split__media { aspect-ratio: 4 / 5; min-height: 0; }
  .ministry .split__content { padding: var(--py) clamp(2rem, 6vw, 6rem); }
}

/* --- discreet organisation note (About, near the bottom) --- */
.org-note { background: var(--ink); padding: 0 var(--px) var(--py); }
.org-note__inner { max-width: var(--max-w); margin: 0 auto; padding-top: 1.75rem; border-top: 1px solid var(--hairline); }
.org-note__label { font-size: 0.62rem; font-weight: 700; letter-spacing: 0.24em; text-transform: uppercase; color: var(--t-faint); margin-bottom: 0.6rem; }
.org-note p { font-size: 0.86rem; line-height: 1.75; color: var(--t-soft); max-width: 68ch; }
.org-note strong { color: var(--t-body); font-weight: 600; }

/* ============================================================
   31. INTERIOR PAGES WITHOUT HERO (Oct 2026)
   The first section sits directly beneath the fixed navigation.
   ============================================================ */
.split--first,
.creed--first { padding-top: calc(var(--nav-h) + env(safe-area-inset-top, 0px)); }
.split--first .split__content { padding-top: 2.5rem; }
.split--first h1.title { font-size: clamp(2.8rem, 11vw, 4.5rem); }
@media (min-width: 900px) {
  .split--first { min-height: 0; }
  .split--first .split__media { aspect-ratio: 4 / 5; min-height: 0; }
  .split--first .split__content { padding-top: var(--py); }
  .split--first h1.title { font-size: clamp(3.4rem, 5.2vw, 5rem); }
}
.creed--first { padding-top: calc(var(--nav-h) + env(safe-area-inset-top, 0px) + 3rem); }
/* the fixed nav is transparent until scrolled; give it a base on hero-less pages */
body.no-hero .nav { background: rgba(10,10,10,0.92); border-bottom-color: var(--hairline); }
/* Beliefs: single column, no ornaments */
.cultures { grid-template-columns: 1fr !important; column-gap: 0 !important; }
.culture h3::before { display: none; }
.culture p { max-width: 68ch; }

/* ============================================================
   32. PRE-LAUNCH (Oct 2026) — photo captions, partner logos,
   thank-you page
   ============================================================ */
.photo-cap {
  position: absolute; left: 0.9rem; bottom: 0.8rem; z-index: 3;
  font-family: var(--font-body); font-size: 0.6rem; font-weight: 700; letter-spacing: 0.16em; text-transform: uppercase;
  color: rgba(248,245,240,0.82); text-shadow: 0 1px 4px rgba(0,0,0,0.8); pointer-events: none;
}
.creed--partners { padding-top: var(--py); }
.partners { list-style: none; display: grid; grid-template-columns: 1fr; gap: 1rem; margin-top: 2rem; max-width: 980px; }
.partners li { background: #000; border: 1px solid var(--hairline); border-radius: 6px; display: flex; align-items: center; justify-content: center; }
.partners a { display: block; padding: 1.25rem 1.5rem; }
.partners img { height: 64px; width: auto; display: block; }
@media (min-width: 560px) { .partners { grid-template-columns: repeat(3, 1fr); gap: 1.25rem; } .partners img { height: 56px; } }
@media (min-width: 900px) { .partners img { height: 72px; } }
@media (hover: hover) { .partners a:hover { opacity: 0.85; } }
.thanks { padding-top: calc(var(--nav-h) + env(safe-area-inset-top, 0px) + 4rem); min-height: 70vh; }
.thanks__inner { max-width: 720px; }
.thanks .title { font-size: clamp(3rem, 11vw, 5rem); }

/* ============================================================
   33. VISUAL IDENTITY KIT (Oct 2026) — carries the home page's
   editorial energy into the interior pages. Six devices, each used
   sparingly: chip label, circular stamp, handwritten aside,
   photo-paper print, info strip, outlined word. Plus wheel v2.
   ============================================================ */
:root { --font-hand: 'Caveat', 'Noto Sans JP', cursive; }

/* outlined word inside a heading (echoes JAPAN on the home hero) */
.ol { color: transparent; -webkit-text-stroke: 2px var(--accent); }
@supports not (-webkit-text-stroke: 1px black) { .ol { color: var(--accent); } }
.creed .ol, .trio .ol { -webkit-text-stroke-width: 2px; }
html[lang="ja"] .ol { color: var(--accent); -webkit-text-stroke: 0; }

/* handwritten aside — one per page at most */
.hand {
  display: inline-block; font-family: var(--font-hand); font-weight: 600;
  font-size: clamp(1.35rem, 2.2vw, 1.7rem); line-height: 1.1; color: var(--accent);
  transform: rotate(-2deg); margin-top: 1.25rem;
}
html[lang="ja"] .hand { font-family: var(--font-body); font-weight: 700; font-size: 1rem; letter-spacing: 0.12em; transform: none; }

/* photo-paper print: white border around a secondary photograph, optional rotated tag */
.print { position: relative; }
@media (max-width: 699px) { }

/* mono information strip */
.infostrip {
  border-top: 1px solid var(--hairline); border-bottom: 1px solid var(--hairline);
  padding: 0.65rem 0; white-space: nowrap; overflow: hidden;
  -webkit-mask-image: linear-gradient(to right, #000 90%, transparent); mask-image: linear-gradient(to right, #000 90%, transparent);
  font-size: 0.62rem; font-weight: 700; letter-spacing: 0.22em; text-transform: uppercase; color: var(--t-soft);
}
.infostrip span { padding: 0 1.4rem; }
.infostrip b { color: var(--white); font-weight: 700; }   /* red at 10px failed contrast (3.08:1) */
.org-note .infostrip { margin-bottom: 1.75rem; }

/* Home hero without eyebrow/tagline (Oct 2026): the title carries the spacing */
.hero-ed--clean .hero-ed__title { margin-top: calc(var(--nav-h) + env(safe-area-inset-top, 0px) + 2rem); margin-bottom: 2.25rem; }
@media (min-width: 1024px) {
  .hero-ed--clean .hero-ed__title { margin: 0 0 0.75rem; }
  .hero-ed--clean .hero-ed__type { gap: 2rem; }
}

/* ============================================================
   34. SPIN LOOPS (Oct 2026) — red word strip, ministry wheel and photo
   wheel share one physics system: js/spin-wheel.js (silent)
   ============================================================ */
.spin {
  overflow: hidden;
  touch-action: pan-y;                 /* vertical page scroll stays native */
  cursor: grab;
  -webkit-user-select: none; user-select: none;
}
.spin.is-grabbing { cursor: grabbing; }
.spin__track { display: flex; width: max-content; will-change: transform; }
.spin img { -webkit-user-drag: none; pointer-events: none; }

.mwheel {
  position: relative;
  width: calc(100vw - var(--sbw, 0px)); margin-left: calc(50% - 50vw + var(--sbw, 0px) / 2);
  outline: none;
}
.mwheel:focus-visible { box-shadow: inset 0 0 0 2px var(--accent); }
.mwheel__track { gap: 1rem; padding: 0.25rem 0; }
.mwheel .pillar { flex: 0 0 auto; width: min(82vw, 420px); min-height: 440px; }
.mwheel .pillar__body { min-height: 440px; }
.mwheel .pillar__media img { filter: grayscale(0%) brightness(0.72); }
@media (min-width: 900px) {
  .mwheel__track { gap: 1.25rem; }
  .mwheel .pillar { width: 420px; min-height: 520px; }
  .mwheel .pillar__body { min-height: 520px; }
}

/* ============================================================
   35. PEOPLE-GROUPS WHEEL (Okinawa, Oct 2026) — the shared spin loop
   (js/spin-wheel.js) with cards that flip to show where each group lives
   ============================================================ */
.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.pwheel {
  position: relative;
  width: calc(100vw - var(--sbw, 0px)); margin: 2.75rem 0 0 calc(50% - 50vw + var(--sbw, 0px) / 2);
  outline: none;
}
.pwheel:focus-visible { box-shadow: inset 0 0 0 2px var(--accent); }
.pwheel__track { gap: 1rem; padding: 0.25rem 0; align-items: stretch; }
@media (min-width: 900px) { .pwheel__track { gap: 1.5rem; } }

.pg-card { position: relative; flex: 0 0 auto; width: min(82vw, 340px); perspective: 1600px; }
.pg-card__inner {
  position: relative; height: 100%;
  display: grid;
  transform-style: preserve-3d;
  transition: transform 0.75s cubic-bezier(0.22, 0.75, 0.2, 1);
}
.pg-card.is-flipped .pg-card__inner { transform: rotateY(180deg); }
.pg-card__front, .pg-card__back {
  grid-area: 1 / 1;
  -webkit-backface-visibility: hidden; backface-visibility: hidden;
}
.pwheel .people-card { max-width: none; height: 100%; }
.pg-card__back {
  position: relative; overflow: hidden;
  transform: rotateY(180deg);
  display: flex; flex-direction: column; justify-content: flex-end;
  background: var(--ink-light);
  border: 1px solid var(--hairline);
}
.pg-card__back picture, .pg-card__back img {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover;
}
.pg-map { position: absolute; top: 12%; left: 4%; width: 92%; height: auto; }
.pg-map__land path { fill: #45453f; }
.pg-map__on path { fill: var(--accent); }
.pg-map__ring circle { fill: none; stroke: var(--accent); stroke-width: 2; opacity: 0.75; }   /* drawn by spin-wheel.js around very small islands */
.pg-card__place { position: relative; z-index: 1; padding: 1.75rem; }
.pg-card__place-name {
  display: block;
  font-family: var(--font-display); font-size: 2.4rem; line-height: 0.95; letter-spacing: 0.03em;
  color: var(--white);
}
.pg-card__place-sub {
  display: block; margin-top: 0.7rem;
  font-size: 0.7rem; font-weight: 600; letter-spacing: 0.18em; text-transform: uppercase;
  color: rgba(248,245,240,0.78);
}
html[lang="ja"] .pg-card__place-name { font-family: var(--font-body, inherit); font-weight: 700; font-size: 1.9rem; letter-spacing: 0.06em; line-height: 1.2; }
html[lang="ja"] .pg-card__place-sub { letter-spacing: 0.12em; }

/* the whole card is the flip button; it sits above both faces */
.pg-card__flip {
  position: absolute; inset: 0; z-index: 3;
  background: transparent; border: 0; padding: 0; cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.pwheel.is-grabbing .pg-card__flip { cursor: grabbing; }
.pg-card__flip:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }
.pg-card.in-view .people-card__bar-fill { width: var(--fill); }

.pwheel__hint {
  padding-top: 1rem;
  font-size: 0.7rem; font-weight: 600; letter-spacing: 0.2em; text-transform: uppercase;
  color: var(--t-faint); text-align: center;
}

/* reduced motion: a quick cross-fade instead of the 3-D turn */
@media (prefers-reduced-motion: reduce) {
  .pg-card__inner { transition: none; }
  .pg-card.is-flipped .pg-card__inner { transform: none; }
  .pg-card__back { transform: none; opacity: 0; transition: opacity 0.2s linear; }
  .pg-card.is-flipped .pg-card__back { opacity: 1; }
}
/* mainland-Japan card: the whole archipelago is taller than the Ryukyu map */
.pg-map--japan { top: 5%; left: 15%; width: 70%; }

/* ============================================================
   36. OKINAWA PHOTO WHEEL ("An island with its own voice") — the
   home photo wheel's look on the shared spin loop
   ============================================================ */
.owheel { width: calc(100vw - var(--sbw, 0px)); margin: 2.25rem 0 0 calc(50% - 50vw + var(--sbw, 0px) / 2); }
.owheel picture { display: block; width: 100%; height: 100%; }

/* ============================================================
   37. JAPANESE HEADINGS — keep words whole (Oct 2026 audit, D6)
   ============================================================ */
html[lang="ja"] .title,
html[lang="ja"] .cta-banner__title,
html[lang="ja"] .hero-ed__title { word-break: keep-all; overflow-wrap: anywhere; line-break: strict; }
html[lang="ja"] .cta-banner__title { font-size: clamp(2rem, 8.5vw, 5rem); line-height: 1.2; max-width: none; }
@media (max-width: 480px) {
  html[lang="ja"] .title { font-size: clamp(1.6rem, 7.4vw, 2.2rem); }
}
/* the outlined English flourish under a Japanese heading reads as a leftover; keep it only where marked */
html[lang="ja"] .ol:not(.ol--keep) { display: none; }