/* Hallmark · pre-emit critique: P5 H5 E4 S5 R4 V5
 * Hallmark · genre: editorial · macrostructure: Split Studio
 * nav: logo + menu + lang · footer: mast-headed · enrichment: castle photo, toned + masked
 * theme: custom · vibe: "black lacquer, gold leaf, quiet luxury"
 * paper: oklch(13% 0.008 85) · accent: oklch(78% 0.125 85)
 * display: Cormorant Garamond · body: IBM Plex Sans
 * axes: dark / roman-serif / chromatic-amber · studied: no · context: brand doc + site spec
 */

@import url("tokens.css");

/* ═══ Base ══════════════════════════════════════════════════════ */

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

html, body {
  overflow-x: clip;               /* clip, never hidden — keeps position:sticky alive */
  margin: 0;
  padding: 0;
}

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

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
}

body {
  /* Transparent on purpose: html paints the paper, and .page-bg (z-index:-1)
     sits between the two. A background here would bury the castle. */
  background: transparent;
  color: var(--color-ink);
  font-family: var(--font-body);
  font-size: var(--text-base);
  font-weight: 350;               /* −50 on dark, per the dark-mode recipe */
  line-height: 1.62;
  font-synthesis-weight: none;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4 {
  font-family: var(--font-display);
  font-style: normal;             /* headers are roman — always */
  font-weight: 500;
  line-height: 1.06;
  letter-spacing: -0.018em;
  margin: 0;
  overflow-wrap: anywhere;
  min-width: 0;
  text-wrap: balance;
}

p { margin: 0; }
img, svg, iframe { display: block; max-width: 100%; }

/* 和文・中文は欧文より行間と字間を開けないと詰まって見える。
   Latin keeps its own tighter setting. */
:root:lang(ja) p,
:root:lang(zh) p,
:root:lang(ja) li,
:root:lang(zh) li {
  line-height: 1.92;
  letter-spacing: 0.025em;
}
:root:lang(ja) h1, :root:lang(ja) h2,
:root:lang(zh) h1, :root:lang(zh) h2 { letter-spacing: 0.02em; line-height: 1.3; }
:root:lang(ar) p, :root:lang(ar) li { line-height: 1.95; }

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

:focus-visible {
  outline: var(--rule-bold) solid var(--color-focus);
  outline-offset: 3px;
  border-radius: var(--radius-xs);
  /* never transitioned — the ring must appear on the same frame as focus */
}

.u-visually-hidden {
  position: absolute; width: 1px; height: 1px;
  margin: -1px; padding: 0; border: 0;
  clip-path: inset(50%); overflow: hidden; white-space: nowrap;
}

.skip-link {
  position: absolute; inset-block-start: var(--space-2xs);
  inset-inline-start: var(--space-2xs);
  z-index: var(--z-toast);
  transform: translateY(-200%);
  background: var(--color-accent); color: var(--color-accent-ink);
  padding: var(--space-2xs) var(--space-sm);
  font-size: var(--text-sm); text-decoration: none;
}
.skip-link:focus-visible { transform: none; }

/* ═══ Layout primitives ═════════════════════════════════════════ */

.shell { padding-inline: var(--page-gutter); }

/* Sections do not all breathe the same. A page where every block has the
   same padding reads as a stack of equal boxes. */
.band { padding-block: var(--space-3xl); }
.band--tight { padding-block: var(--space-2xl); }

/* Information carries one or two rows; 7rem top and bottom leaves a hole. */
#news { padding-block: var(--space-2xl) var(--space-xl); }
#news .head { margin-block-end: var(--space-md) !important; }

/* The pillars sit close under the hero — they finish the fold, not open
   a new chapter. */
/* 認定書を足して縦に伸びた分、下の余白を詰める。
   直後のお知らせとの間合いはファイル末尾でまとめて調整している。 */
.pillars { padding-block-end: var(--space-md); }

.rule-top { border-block-start: var(--rule-hair) solid var(--color-rule-2); }

/* Section head — vertical stack only, single column at every width */
.head { display: grid; gap: var(--space-sm); max-width: var(--measure); }
.head__title { font-size: var(--text-display-s); }
.head__lede {
  color: var(--color-ink-2);
  font-size: var(--text-md);
  max-width: 52ch;
}

/* ═══ Header — logo · menu · language · CTA ═════════════════════ */

.nav {
  position: sticky; inset-block-start: 0; z-index: var(--z-sticky);
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--space-lg);
  padding-block: var(--space-2xs);
  background: color-mix(in oklab, var(--color-paper) 90%, transparent);
  backdrop-filter: blur(14px);
  border-block-end: var(--rule-hair) solid transparent;
  transition: border-color var(--dur-short) var(--ease-out);
}
.nav[data-scrolled="true"] { border-block-end-color: var(--color-rule-2); }

.brand { display: inline-flex; align-items: center; min-height: 44px; flex: 0 0 auto; }
.brand__img { width: auto; height: 2.6rem; }

.menu { display: flex; align-items: center; gap: var(--space-md); flex: 1 1 auto; }
.menu__link {
  min-height: 44px; display: inline-flex; align-items: center;
  font-size: var(--text-sm);
  color: var(--color-ink-2);
  text-decoration: none; white-space: nowrap;
  transition: color var(--dur-micro) var(--ease-out);
}
.menu__link:hover, .menu__link:focus-visible { color: var(--color-accent); }

.nav__end { display: flex; align-items: center; gap: var(--space-md); flex: 0 0 auto; }

.langs {
  display: flex; align-items: center;
  gap: var(--space-2xs);
  padding-inline-end: var(--space-2xs);
  border-inline-end: var(--rule-hair) solid var(--color-rule);
}
.langs__btn {
  appearance: none; background: none; border: 0;
  padding: var(--space-3xs) var(--space-2xs);
  min-height: 44px;
  font: inherit; font-size: var(--text-sm);
  color: var(--color-muted);
  cursor: pointer; white-space: nowrap;
  transition: color var(--dur-micro) var(--ease-out);
}
.langs__btn:hover { color: var(--color-ink); }
.langs__btn[aria-pressed="true"] { color: var(--color-accent); }
.langs__short { display: none; }   /* swapped in below 40 rem — see § Responsive */

/* ═══ Buttons ═══════════════════════════════════════════════════ */

.btn {
  --btn-bd: var(--color-rule);
  display: inline-flex; align-items: center; justify-content: center;
  gap: var(--space-2xs);
  min-height: 44px;
  padding: var(--space-2xs) var(--space-md);
  border: var(--rule-hair) solid var(--btn-bd);
  border-radius: var(--radius-none);
  background: transparent;
  color: var(--color-ink);
  font: inherit; font-size: var(--text-sm);
  letter-spacing: 0.09em; text-transform: uppercase;
  text-decoration: none; white-space: nowrap;   /* clickable text never wraps */
  cursor: pointer;
  transition:
    border-color var(--dur-micro) var(--ease-out),
    color var(--dur-micro) var(--ease-out),
    background-color var(--dur-micro) var(--ease-out),
    transform var(--dur-micro) var(--ease-out);
}
.btn:hover, .btn.is-hover { --btn-bd: var(--color-accent); color: var(--color-accent); }
.btn:active, .btn.is-active { transform: translateY(1px); }
.btn[disabled], .btn.is-disabled {
  color: var(--color-neutral); --btn-bd: var(--color-rule-2);
  cursor: not-allowed; transform: none;
}

.btn--solid {
  background: var(--color-accent);
  border-color: var(--color-accent);
  color: var(--color-accent-ink);
  font-weight: 500;
}
.btn--solid:hover, .btn--solid.is-hover {
  background: var(--color-accent-dim); border-color: var(--color-accent-dim);
  color: var(--color-accent-ink);
}
.btn--solid[disabled], .btn--solid.is-disabled {
  background: var(--color-paper-3); border-color: var(--color-paper-3);
  color: var(--color-neutral);
}

/* Typographic link — the underline draws in on hover */
.tlink {
  color: var(--color-ink);
  text-decoration: none;
  white-space: nowrap;
  background-image: linear-gradient(var(--color-accent), var(--color-accent));
  background-repeat: no-repeat;
  background-position: 0 100%;
  background-size: 0% var(--rule-hair);
  padding-block-end: 2px;
  transition: background-size var(--dur-short) var(--ease-out), color var(--dur-micro) var(--ease-out);
}
.tlink:hover, .tlink:focus-visible { background-size: 100% var(--rule-hair); color: var(--color-accent); }
[dir="rtl"] .tlink { background-position: 100% 100%; }

/* ═══ Hero — text + film over the castle silhouette ═════════════ */

.hero { position: relative; isolation: isolate; }

/* ═══ Page background — Nagoya Castle, held behind everything ═══
   Fixed to the viewport so it reads as the ground the page sits on, not a
   band inside one section. Masked to nothing at the top so the header and
   the hero headline keep full contrast. */

.page-bg {
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background-image: url("../image/site/nagoya-castle-bg.jpg");
  background-size: cover;
  background-position: center 78%;
  background-repeat: no-repeat;
  opacity: 0.30;
  /* Still fades to nothing under the header so the logo and menu keep
     their contrast — but reaches full strength sooner and higher. */
  -webkit-mask-image: linear-gradient(to bottom,
    transparent 0%,
    rgb(0 0 0 / 0.55) 14%,
    rgb(0 0 0 / 1) 38%);
  mask-image: linear-gradient(to bottom,
    transparent 0%,
    rgb(0 0 0 / 0.55) 14%,
    rgb(0 0 0 / 1) 38%);
}

/* Vignette: pulls the corners down so the castle reads as depth rather
   than a flat photographic field behind the middle of the page. */
.page-bg::after {
  content: "";
  position: absolute; inset: 0;
  background: radial-gradient(118% 78% at 50% 42%,
    transparent 38%,
    color-mix(in oklab, var(--color-shade) 62%, transparent) 100%);
}

/* ═══ Grain — one fine layer over everything ════════════════════
   Flat dark fields read as screen. A trace of noise reads as material. */

.grain {
  position: fixed; inset: 0;
  z-index: var(--z-overlay);
  pointer-events: none;
  opacity: 0.032;
  mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.82' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* ═══ Scroll reveal — one pattern, applied once per block ═══════
   The hidden state is gated behind html.js so the page is complete
   at rest if the script never runs. */

html.js .r {
  opacity: 0;
  transform: translateY(16px);
  transition:
    opacity 760ms var(--ease-out),
    transform 760ms var(--ease-out);
  transition-delay: calc(var(--d, 0) * 90ms);
}
html.js .r.is-in { opacity: 1; transform: none; }

/* Photographs settle out of a slow push-in rather than sliding. */
html.js .r-img img {
  transform: scale(1.06);
  transition: transform 1100ms var(--ease-out);
}
html.js .r-img.is-in img { transform: none; }

@media (prefers-reduced-motion: reduce) {
  html.js .r,
  html.js .r.is-in { opacity: 1; transform: none; transition: none; }
  html.js .r-img img,
  html.js .r-img.is-in img { transform: none; transition: none; }
}

.hero__inner {
  display: grid;
  grid-template-columns: minmax(0, 5.4fr) minmax(0, 6.6fr);
  gap: var(--space-2xl);
  align-items: center;
  padding-block: var(--space-2xl) var(--space-xl);
  min-height: min(76vh, 46rem);
}
.hero__text { display: grid; gap: var(--space-md); min-width: 0; }

.hero__eyebrow {
  font-size: var(--text-xs);
  letter-spacing: 0.28em; text-transform: uppercase;
  color: var(--color-accent);
}

.hero__title {
  font-size: var(--text-display-s);
  font-weight: 500;
  line-height: 1.08;
  letter-spacing: 0.01em;
}
.hero__title em {
  font-style: normal;              /* no italic in headers */
  color: var(--color-accent);
}

.hero__sub {
  font-size: var(--text-md);
  color: var(--color-ink);
  max-width: 40ch;
}
.hero__lede {
  color: var(--color-ink-2);
  font-size: var(--text-base);
  max-width: 46ch;
}

.hero__actions { display: flex; flex-wrap: wrap; gap: var(--space-sm); margin-block-start: var(--space-2xs); }

.hero__media-col { display: grid; gap: var(--space-sm); min-width: 0; }
.hero__media { margin: 0; min-width: 0; }
.hero__media-note { margin: 0; font-size: var(--text-sm); color: var(--color-muted); max-width: 44ch; }

/* ═══ Credentials — hairline strip, typographic, no cards ═══════ */

.creds {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  border-block: var(--rule-hair) solid var(--color-rule-2);
}
.creds__item {
  padding: var(--space-md) var(--space-md) var(--space-md) 0;
  border-inline-end: var(--rule-hair) solid var(--color-rule-2);
}
.creds__item:last-child { border-inline-end: 0; }
.creds__k {
  display: block;
  font-size: var(--text-xs);
  letter-spacing: 0.2em; text-transform: uppercase;
  color: var(--color-accent);
  margin-block-end: var(--space-2xs);
  padding-block-end: var(--space-2xs);
  border-block-end: var(--rule-hair) solid color-mix(in oklab, var(--color-accent) 30%, transparent);
}
.creds__v {
  display: block;
  font-family: var(--font-display);
  font-size: var(--text-xl); line-height: 1.15;
  color: var(--color-ink);
  overflow-wrap: anywhere;
}
.creds__note { display: block; font-size: var(--text-sm); color: var(--color-muted); margin-block-start: var(--space-3xs); }

/* Certificate specimen — sits under the third credential, at that column's
   width. The shadow does the work: nothing else should frame it. */
.certificate { margin: var(--space-md) 0 0; max-inline-size: 22rem; }
.certificate__frame {
  display: block;
  box-shadow: 0 1px 0 rgb(255 255 255 / 0.07), 0 14px 34px -16px rgb(0 0 0 / 0.8);
  transition: transform 420ms var(--ease-out), box-shadow 420ms var(--ease-out);
}
.certificate__frame img { display: block; inline-size: 100%; block-size: auto; }
.certificate__frame:hover,
.certificate__frame:focus-visible {
  transform: translateY(-2px);
  box-shadow: 0 1px 0 rgb(255 255 255 / 0.1), 0 20px 44px -16px rgb(0 0 0 / 0.85);
}
.certificate__cap {
  display: flex; flex-wrap: wrap; align-items: baseline;
  gap: var(--space-3xs) var(--space-2xs);
  margin-block-start: var(--space-2xs);
  font-size: var(--text-xs); color: var(--color-muted);
}
.certificate__tag {
  padding: 0 var(--space-3xs);
  border: var(--rule-hair) solid var(--color-rule);
  letter-spacing: 0.1em; color: var(--color-neutral);
}

@media (prefers-reduced-motion: reduce) {
  .certificate__frame, .certificate__frame:hover { transform: none; transition: none; }
}

/* ═══ Information — dated list, rows separated by hairlines ═════ */

.news { list-style: none; margin: 0; padding: 0; border-block-start: var(--rule-hair) solid var(--color-rule-2); }
.news__item {
  display: grid;
  grid-template-columns: 10rem minmax(0, 1fr);
  gap: var(--space-md);
  padding-block: var(--space-md);
  border-block-end: var(--rule-hair) solid var(--color-rule-2);
}
.news__date {
  font-size: var(--text-sm); color: var(--color-accent);
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.06em;
}
.news__body { min-width: 0; }
.news__title { font-size: var(--text-md); color: var(--color-ink); }
/* 見出しは記事ページへの入口。下線は hover まで出さない。 */
.news__link { display: inline-block; color: var(--color-ink); text-decoration: none; transition: color 240ms var(--ease-out); }
.news__link:hover, .news__link:focus-visible { color: var(--color-accent); text-decoration: underline; text-underline-offset: 4px; }
.news__lead { margin-block-start: var(--space-3xs); font-size: var(--text-sm); color: var(--color-muted); max-width: 62ch; }
.news__more { margin-block-start: var(--space-lg); }

/* 本文。CMS のリッチエディタから来た HTML もここで受ける。 */
.news__text { margin-block-start: var(--space-3xs); font-size: var(--text-sm); color: var(--color-ink-2); max-width: 62ch; }
.news__text > * + * { margin-block-start: var(--space-xs); }
.news__text strong, .news__text b { color: var(--color-ink); font-weight: 600; }
.news__text a { color: var(--color-accent); text-underline-offset: 3px; }
.news__text ul, .news__text ol { padding-inline-start: 1.3em; }
.news__text li + li { margin-block-start: var(--space-3xs); }
.news__text h3, .news__text h4 {
  font-family: var(--font-display); font-size: var(--text-md);
  color: var(--color-ink); font-weight: 400;
}
.news__text blockquote {
  margin-inline: 0; padding-inline-start: var(--space-sm);
  border-inline-start: var(--rule-hair) solid var(--color-rule);
  color: var(--color-muted);
}
.news__text img { display: block; inline-size: 100%; block-size: auto; max-inline-size: 32rem; }
.news__text figure { margin: 0; }
.news__text figcaption { margin-block-start: var(--space-2xs); font-size: var(--text-xs); color: var(--color-muted); }
.news__text hr { border: 0; border-block-start: var(--rule-hair) solid var(--color-rule-2); }
.news__empty { font-size: var(--text-sm); color: var(--color-muted); }

/* ═══ Brand image band — full-bleed plate with a caption ════════ */

.imageband { position: relative; }
.imageband__fig { margin: 0; position: relative; }
/* The caption sits over marbled beef — bright and busy. Sink the lower
   third toward the lacquer so the gold type keeps its contrast. */
.imageband__fig::after {
  content: "";
  position: absolute; inset: 0;
  pointer-events: none;
  background: linear-gradient(to top,
    color-mix(in oklab, var(--color-shade) 86%, transparent) 0%,
    color-mix(in oklab, var(--color-shade) 32%, transparent) 30%,
    transparent 62%);
}
.imageband__fig img {
  width: 100%;
  height: clamp(15rem, 42vh, 27rem);
  object-fit: cover;
  object-position: center 62%;      /* keep the skyline, trim empty sky */
}
.imageband__cap {
  position: absolute;
  z-index: 1;                       /* above the ::after scrim */
  inset-block-end: clamp(1.5rem, 5vw, 3.5rem);
  inset-inline-start: var(--page-gutter);
  inset-inline-end: var(--page-gutter);
  font-family: var(--font-display);
  font-size: clamp(2rem, 5.6vw, 4.25rem);
  line-height: 1.06;
  letter-spacing: 0.04em;
  color: var(--color-accent);
  text-shadow: 0 2px 30px var(--color-shade), 0 0 2px var(--color-shade);
  overflow-wrap: anywhere;
}
/* A short gold rule above the line, so the caption reads as a statement
   placed on the photograph rather than text dropped over it. */
.imageband__cap::before {
  content: "";
  display: block;
  inline-size: 3.5rem; block-size: var(--rule-bold);
  background: var(--color-accent);
  margin-block-end: var(--space-xs);
}

/* ═══ Feature modules — text column, photo bled to the edge ═════
   The photo runs off the viewport rather than sitting in a neat box.
   That asymmetry is what keeps the page from reading as a template. */

.feature {
  display: grid;
  grid-template-columns: minmax(0, 27rem) minmax(0, 1fr);
  align-items: center;
  column-gap: var(--space-2xl);
  padding-block: var(--space-2xl);
  padding-inline-start: var(--page-gutter);   /* photo runs out the end edge */
}
/* Two feature blocks back to back left a dead field of castle between
   them. Let them sit closer and carry a hairline instead. */
.feature + .feature { border-block-start: var(--rule-hair) solid var(--color-rule-2); }
.feature__body {
  grid-column: 1; grid-row: 1;
  display: grid; gap: var(--space-md);
  min-width: 0;
}
.feature__body p { color: var(--color-ink-2); }
.feature__title { font-size: var(--text-display-s); }

.feature__media {
  grid-column: 2; grid-row: 1;
  margin: 0; min-width: 0;
  aspect-ratio: 4 / 3;
  background: var(--color-paper-2);
  overflow: hidden;
  box-shadow: 0 24px 80px -40px var(--color-shade);
}
.feature__media img {
  width: 100%; height: 100%; object-fit: cover;
  transition: transform 900ms var(--ease-out);
}
.feature__media:hover img { transform: scale(1.035); }
@media (prefers-reduced-motion: reduce) {
  .feature__media:hover img { transform: none; }
}

/* A hairline of gold where the photograph meets the page, so the bleed
   reads as a deliberate edge instead of a crop. */
.feature__media::after {
  content: "";
  position: absolute; inset-block: 0;
  inset-inline-start: 0;
  width: var(--rule-hair);
  background: linear-gradient(to bottom,
    transparent, var(--color-accent-dim) 22%, var(--color-accent-dim) 78%, transparent);
  opacity: 0.5;
}
.feature__media { position: relative; }
.feature--flip .feature__media::after { inset-inline-start: auto; inset-inline-end: 0; }

/* Flipped: photo bleeds off the start edge, text sits on the end side. */
.feature--flip {
  grid-template-columns: minmax(0, 1fr) minmax(0, 27rem);
  padding-inline-start: 0;
  padding-inline-end: var(--page-gutter);
}
.feature--flip .feature__media { grid-column: 1; }
.feature--flip .feature__body  { grid-column: 2; }

/* ═══ Criteria — the three certification rules ══════════════════ */

.criteria { list-style: none; margin: 0; padding: 0; display: grid; gap: 0; }
.criteria__item {
  display: grid;
  grid-template-columns: 3rem minmax(0, 1fr);
  gap: var(--space-sm);
  align-items: baseline;
  padding-block: var(--space-sm);
  border-block-start: var(--rule-hair) solid var(--color-rule-2);
}
.criteria__item:last-child { border-block-end: var(--rule-hair) solid var(--color-rule-2); }
.criteria__n {
  font-family: var(--font-display);
  font-size: var(--text-2xl);
  line-height: 1;
  color: var(--color-accent);
  font-variant-numeric: tabular-nums;
  opacity: 0.85;
}
.criteria__t { color: var(--color-ink); min-width: 0; font-size: var(--text-md); }

/* ═══ Brand concept — statement band ════════════════════════════ */

.concept {
  background: var(--color-shade);
  border-block: var(--rule-hair) solid var(--color-rule-2);
  padding-block: var(--space-3xl);
}
.concept__inner {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: var(--space-2xl);
  align-items: center;
}
.concept__text { display: grid; gap: var(--space-md); min-width: 0; }
.concept__media {
  margin: 0; min-width: 0;
  aspect-ratio: 3 / 2;
  overflow: hidden;
  background: var(--color-paper-2);
}
.concept__media img { width: 100%; height: 100%; object-fit: cover; }
.concept__line {
  font-family: var(--font-display);
  font-size: clamp(1.75rem, 4vw, 3.25rem);
  line-height: 1.12;
  letter-spacing: 0.02em;
  color: var(--color-accent);
  max-width: 22ch;
  overflow-wrap: anywhere;
}
.concept__sub { font-size: var(--text-md); color: var(--color-ink); }
.concept__body { color: var(--color-ink-2); max-width: 46ch; }

/* ═══ Marks — the three brand promises ══════════════════════════ */

.marks { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--space-2xs); }
.marks__item {
  display: grid;
  grid-template-columns: 1.4rem minmax(0, 1fr);
  gap: var(--space-2xs);
  align-items: baseline;
  color: var(--color-ink);
  font-size: var(--text-sm);
}
.marks__item::before {
  content: "→";
  color: var(--color-accent);
  font-size: var(--text-base);
}
[dir="rtl"] .marks__item::before { content: "←"; }

/* ═══ Organisation card — address block beside the form ═════════ */

.orgcard {
  padding-block-start: var(--space-md);
  border-block-start: var(--rule-hair) solid var(--color-rule);
}
.orgcard__name {
  font-family: var(--font-display);
  font-size: var(--text-lg);
  color: var(--color-accent);
  margin-block-end: var(--space-xs);
}
.orgcard__list {
  display: grid;
  grid-template-columns: 5rem minmax(0, 1fr);
  gap: var(--space-2xs) var(--space-sm);
  margin: 0;
  font-size: var(--text-sm);
}
.orgcard__list dt { color: var(--color-muted); }
.orgcard__list dd { margin: 0; color: var(--color-ink-2); overflow-wrap: anywhere; }
.orgcard__note { margin-block-start: var(--space-sm); font-size: var(--text-sm); color: var(--color-muted); }

/* Values the client still has to supply. Marked so nobody mistakes a
   placeholder for a real address. */
.pending {
  display: inline-block;
  padding: 1px var(--space-2xs);
  border: var(--rule-hair) dashed var(--color-neutral);
  color: var(--color-neutral);
  font-size: var(--text-xs);
  letter-spacing: 0.04em;
}

/* ═══ Film player ═══════════════════════════════════════════════ */

.player {
  position: relative;
  aspect-ratio: 16 / 9;
  background: var(--color-paper-2);
  border: var(--rule-hair) solid var(--color-rule);
  overflow: hidden;
}
/* Self-hosted film. No YouTube chrome, no third-party frame, and it plays
   in mainland China where the embed would not. */
.player__video {
  width: 100%; height: 100%;
  object-fit: cover;
  display: block;
  background: var(--color-shade);
}

.player__sound {
  position: absolute;
  inset-block-end: var(--space-sm);
  inset-inline-end: var(--space-sm);
  z-index: var(--z-raised);
  display: inline-flex; align-items: center;
  min-height: 44px;
  padding: var(--space-2xs) var(--space-sm);
  border: var(--rule-hair) solid var(--color-rule);
  background: color-mix(in oklab, var(--color-paper) 72%, transparent);
  backdrop-filter: blur(10px);
  color: var(--color-ink);
  font: inherit; font-size: var(--text-sm);
  letter-spacing: 0.08em; text-transform: uppercase;
  white-space: nowrap;
  cursor: pointer;
  transition: border-color var(--dur-micro) var(--ease-out), color var(--dur-micro) var(--ease-out);
}
.player__sound:hover { border-color: var(--color-accent); color: var(--color-accent); }
.player__sound[aria-pressed="true"] { border-color: var(--color-accent); color: var(--color-accent); }

/* ═══ Contact form ══════════════════════════════════════════════ */

.form-band { background: var(--color-paper-2); }

.form-wrap {
  display: grid;
  grid-template-columns: 5fr 7fr;
  gap: var(--space-2xl);
  align-items: start;
}
.form-aside { display: grid; gap: var(--space-md); min-width: 0; max-width: 40ch; }
.form-aside p { color: var(--color-ink-2); }
.form-aside dl { display: grid; gap: var(--space-sm); margin: 0; }
.form-aside dt {
  font-size: var(--text-xs); letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--color-accent);
}
.form-aside dd { margin: 0; font-size: var(--text-sm); color: var(--color-ink-2); }

.form { display: grid; gap: var(--space-md); min-width: 0; }
.form__row { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-md); }

.field { display: grid; gap: var(--space-3xs); min-width: 0; }
.field__label {
  font-size: var(--text-xs); letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--color-muted);
}
.field__req { color: var(--color-accent); }

.field input,
.field select,
.field textarea {
  width: 100%;
  min-height: 44px;
  padding: var(--space-2xs) var(--space-xs);
  background: var(--color-paper);
  border: var(--rule-hair) solid var(--color-rule);
  border-radius: var(--radius-none);
  color: var(--color-ink);
  font: inherit; font-size: var(--text-base);
  transition: border-color var(--dur-micro) var(--ease-out);
}
.field textarea { min-height: 8rem; resize: vertical; line-height: 1.55; }
.field select {
  appearance: none;
  background-image: linear-gradient(45deg, transparent 50%, var(--color-muted) 50%),
                    linear-gradient(135deg, var(--color-muted) 50%, transparent 50%);
  background-position: right 1.1rem center, right 0.75rem center;
  background-size: 6px 6px, 6px 6px;
  background-repeat: no-repeat;
  padding-inline-end: var(--space-lg);
}
[dir="rtl"] .field select {
  background-position: left 0.75rem center, left 1.1rem center;
  background-image: linear-gradient(135deg, transparent 50%, var(--color-muted) 50%),
                    linear-gradient(45deg, var(--color-muted) 50%, transparent 50%);
}
.field input:hover, .field select:hover, .field textarea:hover { border-color: var(--color-neutral); }
.field input::placeholder, .field textarea::placeholder { color: var(--color-neutral); }

.field[data-invalid="true"] input,
.field[data-invalid="true"] select,
.field[data-invalid="true"] textarea { border-color: var(--color-danger); }

.field__error {
  font-size: var(--text-sm); color: var(--color-danger);
  display: none;
}
.field[data-invalid="true"] .field__error { display: block; }

/* Spam trap: out of sight and out of the tab order, so only a bot reaches it.
   display:none is avoided because some bots skip hidden fields on purpose. */
.form__trap { position: absolute; inline-size: 1px; block-size: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; inset-inline-start: -9999px; }

.form__foot { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-md); }
.form__consent { font-size: var(--text-sm); color: var(--color-muted); max-width: 46ch; }

/* Submit button states — loading / error / success */
.submit[data-state="loading"] { color: var(--color-neutral); pointer-events: none; }
.submit__spinner { display: none; inline-size: 0.85em; block-size: 0.85em; border: 2px solid currentColor; border-block-start-color: transparent; border-radius: 50%; }
.submit[data-state="loading"] .submit__spinner { display: block; animation: spin 720ms linear infinite; }
.submit[data-state="loading"] .submit__idle,
.submit[data-state="error"]   .submit__idle,
.submit[data-state="success"] .submit__idle { display: none; }
.submit__loading, .submit__error, .submit__success { display: none; }
.submit[data-state="loading"] .submit__loading { display: inline; }
.submit[data-state="error"]   .submit__error   { display: inline; }
.submit[data-state="success"] .submit__success { display: inline; }
.submit[data-state="error"]   { --btn-bd: var(--color-danger); color: var(--color-danger); background: transparent; }
.submit[data-state="success"] { --btn-bd: var(--color-accent); }

@keyframes spin { to { transform: rotate(360deg); } }

.form__status { font-size: var(--text-sm); color: var(--color-ink-2); }
.form__status:empty { display: none; }

/* ═══ Footer — mast-headed ══════════════════════════════════════ */

.foot {
  display: grid; gap: var(--space-lg);
  padding-block: var(--space-2xl) var(--space-xl);
  border-block-start: var(--rule-hair) solid var(--color-rule-2);
}
.foot__top { display: flex; align-items: center; gap: var(--space-md); flex-wrap: wrap; }
.foot__badge { width: 5rem; height: auto; flex: 0 0 auto; }
.foot__id { display: grid; gap: var(--space-3xs); min-width: 0; }
.foot__org {
  font-family: var(--font-display);
  font-size: var(--text-xl);
  color: var(--color-ink);
  overflow-wrap: anywhere;
}
.foot__orgjp { font-size: var(--text-sm); color: var(--color-ink-2); }
.foot__tagline {
  font-size: var(--text-xs);
  letter-spacing: 0.24em; text-transform: uppercase;
  color: var(--color-accent);
}
.foot__menu { display: flex; flex-wrap: wrap; gap: var(--space-md); }
.foot__meta {
  display: flex; flex-wrap: wrap; gap: var(--space-sm) var(--space-lg);
  align-items: baseline;
  padding-block-start: var(--space-md);
  border-block-start: var(--rule-hair) solid var(--color-rule-2);
  font-size: var(--text-sm); color: var(--color-muted);
}
.foot__note { max-width: 60ch; font-size: var(--text-xs); color: var(--color-neutral); }

/* ═══ One orchestrated entrance ═════════════════════════════════ */

.reveal {
  opacity: 0;
  transform: translateY(10px);
  animation: reveal var(--dur-long) var(--ease-out) forwards;
  animation-delay: calc(var(--i, 0) * 70ms);
}
@keyframes reveal { to { opacity: 1; transform: none; } }

/* ═══ Responsive ════════════════════════════════════════════════ */

/* The menu row is the first thing to run out of space. Below 74 rem it
   moves under the logo as its own scrollable row rather than squeezing. */
@media (max-width: 74rem) {
  .nav { flex-wrap: wrap; gap: var(--space-sm); padding-block: var(--space-2xs) 0; }
  .menu {
    order: 3; flex-basis: 100%;
    gap: var(--space-md);
    border-block-start: var(--rule-hair) solid var(--color-rule-2);
    overflow-x: auto; scrollbar-width: none;
  }
  .menu::-webkit-scrollbar { display: none; }
}

@media (max-width: 60rem) {
  .hero__inner { grid-template-columns: minmax(0, 1fr); gap: var(--space-xl); }
  .hero__media-col { order: -1; }
  /* Narrow viewports crop the photo hard, so pull it back a step. */
  .page-bg { opacity: 0.22; background-position: center 72%; }

  /* The bleed needs width to read as a bleed. Stack instead. */
  .feature {
    grid-template-columns: minmax(0, 1fr);
    gap: var(--space-lg);
    padding-inline: var(--page-gutter);
    padding-block: var(--space-2xl);
  }
  .feature__body,
  .feature--flip .feature__body { grid-column: 1; grid-row: 2; max-width: none; }
  .feature__media,
  .feature--flip .feature__media {
    grid-column: 1; grid-row: 1;
    aspect-ratio: 16 / 10;
    margin-inline: calc(var(--page-gutter) * -1);
  }

  .concept__inner { grid-template-columns: minmax(0, 1fr); gap: var(--space-lg); }
  .concept__media { order: -1; }
  .form-wrap { grid-template-columns: minmax(0, 1fr); gap: var(--space-xl); }
  .creds { grid-template-columns: minmax(0, 1fr); }
  .creds__item { border-inline-end: 0; border-block-end: var(--rule-hair) solid var(--color-rule-2); padding-inline-end: 0; }
  .creds__item:last-child { border-block-end: 0; }
  .band { padding-block: var(--space-2xl); }
  .concept { padding-block: var(--space-2xl); }
}

@media (max-width: 40rem) {
  /* The header row has three jobs and ~335 px to do them in. Shorten the
     language labels rather than letting the CTA slide off the edge. */
  .nav { gap: var(--space-2xs); }
  .brand__img { height: 2rem; }
  .nav__end { gap: var(--space-2xs); }
  .langs { gap: 0; padding-inline-end: var(--space-3xs); }
  .langs__btn { padding-inline: var(--space-3xs); min-width: 26px; }
  .langs__full { display: none; }
  .langs__short { display: inline; }
  .nav .btn { padding-inline: var(--space-xs); letter-spacing: 0.06em; }
  .menu { gap: var(--space-sm); }

  .form__row { grid-template-columns: minmax(0, 1fr); }
  .hero__actions .btn { flex: 1 1 100%; }
  .news__item { grid-template-columns: minmax(0, 1fr); gap: var(--space-3xs); }
  .criteria__item { grid-template-columns: 2.25rem minmax(0, 1fr); gap: var(--space-2xs); }
  .foot__badge { width: 3.5rem; }
}

/* 320 px — the narrowest phone still in service. Everything in the header
   gives up a little so nothing gives up the edge. */
@media (max-width: 23rem) {
  :root { --page-gutter: 1rem; }
  .brand__img { height: 1.75rem; }
  .langs__btn { min-width: 20px; }
  .nav .btn { padding-inline: var(--space-2xs); font-size: var(--text-xs); }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 150ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 150ms !important;
  }
  .reveal { animation: reveal-reduced 150ms linear forwards; }
  @keyframes reveal-reduced { to { opacity: 1; transform: none; } }
  .submit[data-state="loading"] .submit__spinner { animation-duration: 1200ms; animation-iteration-count: infinite; }
}

@media print {
  .nav, .player__facade, .form-band, .page-bg { display: none; }
  body { background: #fff; color: #000; }
}

/* ═══ Sub pages — お知らせ一覧 / 記事 ═══════════════════════════ */

/* 本文ページでは名古屋城を薄くして、読む面を優先する。 */
.page-bg--quiet { opacity: 0.07; }

.page { padding-block: calc(var(--space-4xl) + var(--space-xl)) var(--space-4xl); }
.page__title {
  font-family: var(--font-display); font-weight: 400;
  font-size: var(--text-2xl); line-height: 1.2; color: var(--color-ink);
}
.page--article { max-inline-size: 48rem; }

/* 一覧ページは行間をトップより広くとる。読み物の密度にする。 */
.news--page { margin-block-start: var(--space-xl); }
.news--page .news__item { padding-block: var(--space-md); }

.article__title {
  margin-block-start: var(--space-2xs);
  font-family: var(--font-display); font-weight: 400;
  font-size: var(--text-xl); line-height: 1.3; color: var(--color-ink);
  text-wrap: balance;
}
.article .news__text {
  margin-block-start: var(--space-lg);
  font-size: var(--text-base); color: var(--color-ink-2); max-width: none;
}
.article .news__text > * + * { margin-block-start: var(--space-sm); }
.article .news__text img { max-inline-size: 100%; }
.article__missing { color: var(--color-muted); }
.article__back {
  margin-block-start: var(--space-2xl);
  padding-block-start: var(--space-lg);
  border-block-start: var(--rule-hair) solid var(--color-rule-2);
}

/* ═══ 認定基準 → お知らせ の間合い ═════════════════════════════
   メディアクエリ内の .band が後勝ちするため、ここで最後に上書きする。 */
.pillars + .band { padding-block-start: var(--space-xl); }

@media (max-width: 60rem) {
  .pillars + .band { padding-block-start: var(--space-lg); }
}