/* ==========================================================================
   Zero Next One BASE NIIKAPPU
   main.css
   Phase 4 / canonical shared foundation
   --------------------------------------------------------------------------
   Responsibility:
   - Reset / base layout
   - Design tokens
   - Font tokens
   - Header / footer
   - Common components
   - Shared cards / buttons / typography foundations

   Section-specific layout, background images, measured heights, and smartphone
   comp alignment are handled by:
   top-sec01.css ... top-sec09.css
   ========================================================================== */

/* --------------------------------------------------------------------------
   01. Design tokens
   -------------------------------------------------------------------------- */

:root {
  /* Brand colors */
  --color-blue-niikappu: #15273d;
  --color-blue-deep: #0f1b2b;
  --color-blue-muted: rgba(21, 39, 61, 0.72);

  --color-paper: #f7efdc;
  --color-paper-light: #fff8ea;
  --color-paper-warm: #f6eedc;
  --color-paper-card-strong: rgba(255, 250, 240, 0.94);
  --color-paper-dark: #e1d5ba;

  --color-ink: #1f1c16;
  --color-ink-deep: #15130f;
  --color-ink-muted: #6e6658;
  --color-white-soft: #fffaf0;

  --color-forest-deep: #243a2e;

  --color-amber: #b68b16;
  --color-amber-light: #e6b85a;
  --color-amber-deep: #7a471d;

  /* Font system */
  --font-heading: "Shippori Mincho", "Noto Serif JP", "Hiragino Mincho ProN", "Yu Mincho", "YuMincho", serif;
  --font-body: "Noto Sans JP", system-ui, -apple-system, BlinkMacSystemFont, "Helvetica Neue", sans-serif;
  --font-label: "Inter", "Noto Sans JP", system-ui, -apple-system, BlinkMacSystemFont, "Helvetica Neue", sans-serif;
  --font-ui: "Noto Sans JP", system-ui, -apple-system, BlinkMacSystemFont, "Helvetica Neue", sans-serif;

  /* Legacy aliases. Keep these because section CSS will be updated gradually. */

  /* Type scale / mobile first */
  --type-label: clamp(0.74rem, 2.9vw, 0.9rem);
  --type-title-lg: clamp(2.28rem, 9.4vw, 3rem);

  --type-lead: clamp(0.86rem, 3.35vw, 1rem);
  --type-button: clamp(0.96rem, 3.8vw, 1.14rem);

  /* Rhythm */
  --leading-title: 1.38;
  --leading-body-loose: 1.92;

  --tracking-label: 0.18em;
  --tracking-title: 0.06em;
  --tracking-body: 0.035em;
  --tracking-button: 0.075em;

  /* Layout */
  --site-max: 1180px;
  --side-padding: 26px;
  --section-padding-y: 92px;

  /* PC common layout tokens */
  --pc-header-top-gap: 0px;
  --pc-header-rail-height: 64px;
  --pc-header-height: 82px;
  --pc-header-radius: 18px;
  --pc-section-space: clamp(112px, 10vw, 160px);
  --pc-content-max: 1180px;
  --pc-visual-max: 1240px;
  --pc-text-max: 45ch;


  /* Surface / radius / shadow */
  --radius-button-pill: 999px;


  --shadow-paper-soft:
    0 8px 18px rgba(42, 32, 18, 0.075),
    inset 0 1px 0 rgba(255, 255, 255, 0.38);

  --shadow-button:
    0 8px 18px rgba(32, 29, 19, 0.15),
    inset 0 1px 0 rgba(255, 255, 255, 0.18);

  --shadow-button-soft:
    0 6px 14px rgba(32, 29, 19, 0.1),
    inset 0 1px 0 rgba(255, 255, 255, 0.24);

  --text-shadow-paper:
    0 1px 7px rgba(246, 238, 220, 0.68),
    0 0 12px rgba(246, 238, 220, 0.28);

  --text-shadow-dark:
    0 4px 18px rgba(0, 0, 0, 0.48),
    0 1px 0 rgba(0, 0, 0, 0.28);

  /* Motion */
  --ease-out-craft: cubic-bezier(0.25, 1, 0.5, 1);
}

/* --------------------------------------------------------------------------
   02. Reset / base
   -------------------------------------------------------------------------- */

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

html {
  min-height: 100%;
  scroll-behavior: smooth;
  background: var(--color-paper);
}

body {
  margin: 0;
  min-width: 320px;
  color: var(--color-ink);
  background:
    radial-gradient(circle at 50% 0%, rgba(255, 255, 255, 0.58), transparent 420px),
    linear-gradient(180deg, #fbf5e7 0%, var(--color-paper) 100%);
  font-family: var(--font-body);
  font-size: 15px;
  font-weight: 400;
  line-height: 1.85;
  letter-spacing: var(--tracking-body);
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

body.is-menu-open {
  overflow: hidden;
}

img,
picture,
svg {
  max-width: 100%;
}

img {
  display: block;
  height: auto;
}

a {
  color: inherit;
}

button,
input,
textarea,
select {
  font: inherit;
}

button {
  cursor: pointer;
}

::selection {
  background: rgba(230, 184, 90, 0.36);
}

/* --------------------------------------------------------------------------
   03. Accessibility
   -------------------------------------------------------------------------- */

.skip-link {
  position: fixed;
  left: 16px;
  top: 16px;
  z-index: 9999;
  padding: 10px 14px;
  border-radius: var(--radius-button-pill);
  color: var(--color-blue-niikappu);
  background: var(--color-paper-card-strong);
  text-decoration: none;
  box-shadow: var(--shadow-paper-soft);
  transform: translateY(-160%);
  transition: transform 0.25s var(--ease-out-craft);
}

.skip-link:focus {
  transform: translateY(0);
}

:where(a, button, input, textarea, select, summary):focus-visible {
  outline: 3px solid #946800 !important;
  outline-offset: 4px;
}

:where(.c-button, .l-site-header__nav-link, .l-site-footer__nav-link):focus-visible {
  border-radius: 999px;
}


/* --------------------------------------------------------------------------
   04. Base layout
   -------------------------------------------------------------------------- */

.l-main {
  position: relative;
  overflow: hidden;
}

.l-atelier-section {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  overflow: clip;
  padding: var(--section-padding-y) var(--side-padding);
}

/* --------------------------------------------------------------------------
   05. Header
   -------------------------------------------------------------------------- */

.l-site-header {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: 300;
  color: var(--color-white-soft);
  background: transparent;
  border-bottom: 0;
  box-shadow: none;
  pointer-events: none;
}

body[data-active-section="sec02"] .l-site-header,
body[data-active-section="sec03"] .l-site-header,
body[data-active-section="sec05"] .l-site-header,
body[data-active-section="sec06"] .l-site-header,
body[data-active-section="sec07"] .l-site-header,
body[data-active-section="sec08"] .l-site-header {
  color: var(--color-blue-niikappu);
}

body[data-active-section="sec01"] .l-site-header,
body[data-active-section="sec04"] .l-site-header,
body[data-active-section="sec09"] .l-site-header {
  color: var(--color-white-soft);
}

.l-site-header__inner {
  width: 100%;
  margin: 0;
  padding: 22px 25px 0;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  pointer-events: none;
}

.l-site-header__brand,
.l-site-header__menu-button {
  pointer-events: auto;
}

.l-site-header__brand {
  display: inline-flex;
  gap: 9px;
  color: inherit;
  text-decoration: none;
  text-shadow: 0 2px 10px rgba(0, 0, 0, 0.26);
}

body[data-active-section="sec02"] .l-site-header__brand,
body[data-active-section="sec03"] .l-site-header__brand,
body[data-active-section="sec05"] .l-site-header__brand,
body[data-active-section="sec06"] .l-site-header__brand,
body[data-active-section="sec07"] .l-site-header__brand,
body[data-active-section="sec08"] .l-site-header__brand {
  text-shadow: 0 1px 0 rgba(255, 255, 255, 0.58);
}

.l-site-header__brand-mark {
  display: grid;
  place-items: center;
  width: 42px;
  height: 42px;
  border: 1px solid currentColor;
  border-radius: 12px;
  color: currentColor;
  background: rgba(255, 255, 255, 0.08);
  font-family: var(--font-label);
  font-size: 0.58rem;
  font-weight: 700;
  line-height: 1;
  letter-spacing: 0.1em;
}

.l-site-header__brand-text {
  display: grid;
  gap: 0;
  line-height: 1.12;
}

.l-site-header__brand-small,
.l-site-header__brand-sub {
  color: currentColor;
  font-family: var(--font-ui);
  font-size: 0.62rem;
  font-weight: 500;
  line-height: 1.15;
  letter-spacing: 0.06em;
  opacity: 0.9;
}

.l-site-header__brand-main {
  color: currentColor;
  font-family: var(--font-label);
  font-size: 1.03rem;
  font-weight: 800;
  line-height: 1.05;
  letter-spacing: 0.08em;
}

.l-site-header__menu-button {
  position: relative;
  display: inline-grid;
  place-items: center;
  width: 54px;
  height: 42px;
  padding: 0;
  border: 0;
  color: inherit;
  background: transparent;
}

.l-site-header__menu-line,
.l-site-header__menu-button::before,
.l-site-header__menu-button::after {
  content: "";
  position: absolute;
  right: 0;
  width: 42px;
  height: 2px;
  border-radius: 999px;
  background: currentColor;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
  transition:
    transform 0.24s var(--ease-out-craft),
    opacity 0.24s var(--ease-out-craft);
}

.l-site-header__menu-button::before {
  top: 7px;
}

.l-site-header__menu-line {
  top: 20px;
}

.l-site-header__menu-button::after {
  top: 33px;
}

.l-site-header__menu-text {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

.l-site-header__menu-button[aria-expanded="true"]::before {
  transform: translateY(13px) rotate(36deg);
}

.l-site-header__menu-button[aria-expanded="true"] .l-site-header__menu-line {
  opacity: 0;
}

.l-site-header__menu-button[aria-expanded="true"]::after {
  transform: translateY(-13px) rotate(-36deg);
}

.l-site-header__nav {
  position: fixed;
  inset: 0;
  z-index: -1;
  display: grid;
  place-items: center;
  padding: 110px 28px 52px;
  color: var(--color-white-soft);
  background:
    radial-gradient(circle at 70% 12%, rgba(230, 184, 90, 0.16), transparent 360px),
    linear-gradient(150deg, rgba(13, 24, 35, 0.96), rgba(24, 42, 37, 0.97));
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition:
    opacity 0.25s var(--ease-out-craft),
    visibility 0.25s var(--ease-out-craft);
}

.l-site-header__nav.is-open {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
}

.l-site-header__nav-list {
  width: min(320px, 100%);
  display: grid;
  gap: 0;
  list-style: none;
  padding: 0;
  margin: 0;
}

.l-site-header__nav-item {
  border-bottom: 1px solid rgba(255, 250, 240, 0.16);
}

.l-site-header__nav-link {
  display: flex;
  justify-content: space-between;
  align-items: center;
  min-height: 58px;
  color: currentColor;
  font-family: var(--font-heading);
  font-size: 1.04rem;
  font-weight: 600;
  text-decoration: none;
  letter-spacing: 0.08em;
}

.l-site-header__nav-link::after {
  content: "→";
  opacity: 0.72;
}

/* --------------------------------------------------------------------------
   06. Footer — Closing Colophon v2
   -------------------------------------------------------------------------- */

.l-site-footer {
  position: relative;
  z-index: 1;
  isolation: isolate;
  overflow: hidden;
  overflow: clip;
  margin-top: -1px;
  color: rgba(255, 250, 240, 0.82);
  background:
    radial-gradient(
      ellipse at 76% -12%,
      rgba(182, 139, 22, 0.2) 0%,
      rgba(182, 139, 22, 0.08) 24%,
      rgba(182, 139, 22, 0) 55%
    ),
    radial-gradient(
      ellipse at 12% 108%,
      rgba(75, 103, 78, 0.2) 0%,
      rgba(75, 103, 78, 0.06) 34%,
      rgba(75, 103, 78, 0) 64%
    ),
    linear-gradient(155deg, #1b2929 0%, #14222b 46%, #101720 100%);
}

.l-site-footer::before {
  content: "";
  position: absolute;
  inset: 0 0 auto;
  z-index: 0;
  height: 1px;
  pointer-events: none;
  background:
    linear-gradient(
      90deg,
      rgba(255, 250, 240, 0),
      rgba(255, 250, 240, 0.22) 18%,
      rgba(230, 184, 90, 0.34) 50%,
      rgba(255, 250, 240, 0.18) 82%,
      rgba(255, 250, 240, 0)
    );
}

.l-site-footer::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background:
    repeating-linear-gradient(
      9deg,
      rgba(255, 255, 255, 0.012) 0,
      rgba(255, 255, 255, 0.012) 1px,
      transparent 1px,
      transparent 5px
    ),
    radial-gradient(circle at 22% 30%, rgba(255, 250, 240, 0.035), transparent 26rem);
  opacity: 0.7;
  mix-blend-mode: soft-light;
}

.l-site-footer__inner {
  position: relative;
  z-index: 1;
  display: grid;
  gap: 38px;
  width: min(var(--site-max), 100%);
  margin: 0 auto;
  padding: 64px var(--side-padding) 28px;
}

.l-site-footer__brand {
  min-width: 0;
}

.l-site-footer__brand-link {
  gap: 14px;
  color: var(--color-white-soft);
  text-decoration: none;
}

.l-site-footer__brand-mark {
  display: grid;
  flex: 0 0 auto;
  place-items: center;
  width: 50px;
  height: 50px;
  border: 1px solid rgba(255, 250, 240, 0.4);
  border-radius: 50%;
  color: #132438;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.22), rgba(255, 255, 255, 0)),
    rgba(255, 250, 240, 0.92);
  box-shadow:
    0 10px 24px rgba(0, 0, 0, 0.12),
    inset 0 0 0 1px rgba(255, 255, 255, 0.32);
  font-family: var(--font-label);
  font-size: 0.62rem;
  font-weight: 800;
  line-height: 1;
  letter-spacing: 0.09em;
}

.l-site-footer__brand-copy {
  display: grid;
  gap: 4px;
  min-width: 0;
}

.l-site-footer__brand-label {
  color: rgba(230, 184, 90, 0.78);
  font-family: var(--font-label);
  font-size: 0.62rem;
  font-weight: 700;
  line-height: 1;
  letter-spacing: 0.19em;
  text-transform: uppercase;
}

.l-site-footer__name {
  margin: 0;
  color: var(--color-white-soft);
  font-family: var(--font-label);
  font-size: clamp(1.22rem, 5.3vw, 1.48rem);
  font-weight: 800;
  line-height: 1.3;
  letter-spacing: 0.038em;
}

.l-site-footer__sub {
  margin: 20px 0 0;
  color: rgba(255, 250, 240, 0.72);
  font-family: var(--font-heading);
  font-size: 0.92rem;
  font-weight: 600;
  line-height: 1.75;
  letter-spacing: 0.045em;
}

.l-site-footer__description {
  max-width: 38ch;
  margin: 10px 0 0;
  color: rgba(255, 250, 240, 0.52);
  font-family: var(--font-ui);
  font-size: 0.8rem;
  font-weight: 400;
  line-height: 1.85;
  letter-spacing: 0.03em;
}

.l-site-footer__notice {
  max-width: 42ch;
  margin: 12px 0 0;
  color: rgba(255, 250, 240, 0.36);
  font-family: var(--font-ui);
  font-size: 0.72rem;
  font-weight: 400;
  line-height: 1.75;
  letter-spacing: 0.025em;
}

.l-site-footer__guide,
.l-site-footer__nav {
  min-width: 0;
}

.l-site-footer__nav {
  display: grid;
  gap: 34px;
}

.l-site-footer__nav-group {
  min-width: 0;
}

.l-site-footer__nav-heading {
  display: flex;
  align-items: baseline;
  gap: 10px;
  margin: 0 0 18px;
  color: rgba(230, 184, 90, 0.82);
  font-family: var(--font-label);
  font-size: 0.7rem;
  font-weight: 800;
  line-height: 1;
  letter-spacing: 0.2em;
  text-transform: uppercase;
}

.l-site-footer__nav-heading::after {
  content: "";
  flex: 1 1 auto;
  min-width: 28px;
  height: 1px;
  margin-left: 4px;
  background:
    linear-gradient(90deg, rgba(230, 184, 90, 0.32), rgba(255, 250, 240, 0));
}

.l-site-footer__nav-heading-ja {
  color: rgba(255, 250, 240, 0.42);
  font-family: var(--font-ui);
  font-size: 0.68rem;
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: none;
}

.l-site-footer__nav-list {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 4px 18px;
  list-style: none;
  margin: 0;
  padding: 0;
}

.l-site-footer__nav-list--support {
  grid-template-columns: 1fr;
  gap: 5px;
}

.l-site-footer__nav-item {
  min-width: 0;
}

.l-site-footer__nav-link {
  position: relative;
  display: inline-flex;
  align-items: center;
  min-height: 36px;
  max-width: 100%;
  color: rgba(255, 250, 240, 0.66);
  font-family: var(--font-ui);
  font-size: 0.84rem;
  font-weight: 500;
  line-height: 1.45;
  letter-spacing: 0.025em;
  text-decoration: none;
  transition:
    color 0.3s var(--ease-out-craft),
    opacity 0.3s var(--ease-out-craft),
    transform 0.3s var(--ease-out-craft);
}

.l-site-footer__nav-link:not(.l-site-footer__contact-link)::after {
  content: "";
  position: absolute;
  right: 0;
  bottom: 5px;
  left: 0;
  height: 1px;
  background: currentColor;
  opacity: 0;
  transform: scaleX(0.18);
  transform-origin: left center;
  transition:
    opacity 0.3s var(--ease-out-craft),
    transform 0.3s var(--ease-out-craft);
}

.l-site-footer__nav-link--support {
  color: rgba(255, 250, 240, 0.76);
  font-weight: 600;
}

.l-site-footer__contact-link {
  display: inline-grid;
  grid-template-columns: minmax(0, auto) 20px;
  align-items: center;
  column-gap: 11px;
  width: fit-content;
  min-height: 42px;
  padding: 0 0 7px;
  color: var(--color-white-soft);
  border-bottom: 1px solid rgba(230, 184, 90, 0.72);
  font-weight: 700;
  letter-spacing: 0.045em;
}

.l-site-footer__contact-arrow {
  display: inline-block;
  justify-self: end;
  color: rgba(230, 184, 90, 0.9);
  font-size: 1.12em;
  line-height: 1;
  transition: transform 0.3s var(--ease-out-craft);
}

.l-site-footer__bottom {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 14px 24px;
  padding-top: 22px;
  border-top: 1px solid rgba(255, 250, 240, 0.12);
}

.l-site-footer__copyright {
  margin: 0;
  color: rgba(255, 250, 240, 0.42);
  font-family: var(--font-ui);
  font-size: 0.68rem;
  line-height: 1.6;
  letter-spacing: 0.025em;
}

.l-site-footer__copyright small {
  font: inherit;
}

.l-site-footer__page-top {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  min-height: 32px;
  color: rgba(255, 250, 240, 0.62);
  font-family: var(--font-label);
  font-size: 0.68rem;
  font-weight: 700;
  line-height: 1;
  letter-spacing: 0.16em;
  text-decoration: none;
  transition:
    color 0.3s var(--ease-out-craft),
    transform 0.3s var(--ease-out-craft);
}

.l-site-footer__page-top-arrow {
  display: inline-block;
  color: rgba(230, 184, 90, 0.82);
  font-size: 1.1em;
  line-height: 1;
  transition: transform 0.3s var(--ease-out-craft);
}

.l-site-footer :where(a):focus-visible {
  outline-color: rgba(230, 184, 90, 0.95);
  outline-offset: 4px;
}

/* --------------------------------------------------------------------------
   07. Common typography components
   -------------------------------------------------------------------------- */

.c-section-kicker {
  margin: 0 0 18px;
  color: rgba(21, 39, 61, 0.82);
  font-family: var(--font-label);
  font-size: var(--type-label);
  font-weight: 800;
  line-height: 1.1;
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
}

.c-section-kicker::after {
  content: "";
  display: block;
  width: 58px;
  height: 1px;
  margin-top: 13px;
  background: currentColor;
  opacity: 0.64;
}

.c-section-title {
  margin: 0;
  color: var(--color-blue-niikappu);
  font-family: var(--font-heading);
  font-size: var(--type-title-lg);
  font-weight: 700;
  line-height: var(--leading-title);
  letter-spacing: var(--tracking-title);
}

.c-section-lead {
  margin: 20px 0 0;
  color: var(--color-ink);
  font-family: var(--font-body);
  font-size: var(--type-lead);
  font-weight: 500;
  line-height: var(--leading-body-loose);
  letter-spacing: var(--tracking-body);
}

/* --------------------------------------------------------------------------
   08. Common buttons
   -------------------------------------------------------------------------- */

.c-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  width: 100%;
  min-height: 56px;
  padding: 15px 22px;
  border: 1px solid transparent;
  border-radius: var(--radius-button-pill);
  color: var(--color-blue-niikappu);
  background: var(--color-paper-card-strong);
  box-shadow: var(--shadow-button-soft);
  font-family: var(--font-ui);
  font-size: var(--type-button);
  font-weight: 700;
  line-height: 1.2;
  text-decoration: none;
  letter-spacing: var(--tracking-button);
  transition:
    transform 0.25s var(--ease-out-craft),
    box-shadow 0.25s var(--ease-out-craft),
    background-color 0.25s var(--ease-out-craft),
    border-color 0.25s var(--ease-out-craft);
}

.c-button--primary,
.c-button--hero-primary,
.c-button--brand,
.c-button--camp-primary,
.c-button--ending-primary {
  color: var(--color-white-soft);
  background: var(--color-blue-niikappu);
}

.c-button--secondary,
.c-button--hero-secondary,
.c-button--camp-secondary,
.c-button--ending-secondary {
  color: var(--color-blue-niikappu);
  background: var(--color-paper-card-strong);
  border-color: rgba(21, 39, 61, 0.14);
}

.c-button--ghost {
  color: var(--color-blue-niikappu);
  background: rgba(255, 252, 245, 0.58);
  border-color: rgba(21, 39, 61, 0.18);
}

.c-button--ending-primary {
  color: #26170d;
  background: var(--color-amber);
  box-shadow: 0 14px 32px rgba(182, 139, 22, 0.3);
}

/* --------------------------------------------------------------------------
   09. Common paper / news cards
   -------------------------------------------------------------------------- */


/* --------------------------------------------------------------------------
   10. Placeholder
   -------------------------------------------------------------------------- */

.p-top-placeholder {
  background: var(--color-paper-light);
}

.p-top-placeholder__inner {
  width: min(860px, 100%);
  margin: 0 auto;
  padding: 36px;
  border: 1px dashed rgba(74, 61, 42, 0.18);
  border-radius: 22px;
  background: rgba(255, 252, 245, 0.62);
}

.p-top-placeholder__note {
  margin: 24px 0 0;
  color: var(--color-ink-muted);
  font-family: var(--font-ui);
  font-size: 0.92rem;
}

/* --------------------------------------------------------------------------
   11. Motion hooks
   -------------------------------------------------------------------------- */

[data-motion="flicker"] {
  animation: soft-flicker 9s ease-in-out infinite alternate;
}

[data-motion="breathe"] {
  animation: soft-breathe 7s ease-in-out infinite alternate;
}

@keyframes soft-flicker {
  from {
    opacity: 0.78;
    transform: scale(1);
  }

  to {
    opacity: 1;
    transform: scale(1.012);
  }
}

@keyframes soft-breathe {
  from {
    transform: translateY(0);
  }

  to {
    transform: translateY(-3px);
  }
}

/* --------------------------------------------------------------------------
   12. Small smartphone guard
   -------------------------------------------------------------------------- */

@media (max-width: 374px) {
  :root {
    --side-padding: 22px;
  }
}

/* --------------------------------------------------------------------------
   13. Tablet / PC common foundation — Header v2
   --------------------------------------------------------------------------

   Breakpoint policy:
   - 768px to 1023px keeps the menu-style header.
   - 1024px and wider switches to the horizontal PC header.
   - Scene Overlay: Sections 01 / 04 / 09.
   - Paper Rail: Sections 02 / 03 / 05 / 06 / 07 / 08 and lower pages.
   -------------------------------------------------------------------------- */

@media (min-width: 768px) {
  :root {
    --side-padding: clamp(32px, 4vw, 56px);
    --section-padding-y: var(--pc-section-space);

    --pc-header-top-gap: 10px;
    --pc-header-rail-height: 64px;
    --pc-header-height: 82px;
    --pc-header-radius: 18px;

    --type-label: 0.82rem;
    --type-title-lg: clamp(2.8rem, 4.8vw, 4.4rem);

    --type-lead: clamp(1rem, 1.15vw, 1.08rem);
    --type-button: 1rem;
  }

  html {
    scroll-padding-top: var(--pc-header-height, 82px);
  }

  body {
    font-size: 16px;
  }

  .l-atelier-section {
    scroll-margin-top: var(--pc-header-height, 82px);
  }

  /* The outer header never becomes a full-width white band. */
  .l-site-header,
  body[data-active-section="sec01"] .l-site-header,
  body[data-active-section="sec02"] .l-site-header,
  body[data-active-section="sec03"] .l-site-header,
  body[data-active-section="sec04"] .l-site-header,
  body[data-active-section="sec05"] .l-site-header,
  body[data-active-section="sec06"] .l-site-header,
  body[data-active-section="sec07"] .l-site-header,
  body[data-active-section="sec08"] .l-site-header,
  body[data-active-section="sec09"] .l-site-header {
    position: fixed;
    inset: 0 0 auto 0;
    z-index: 300;
    min-height: var(--pc-header-height, 82px);
    padding:
      var(--pc-header-top-gap, 10px)
      clamp(24px, 4vw, 48px)
      0;
    color: var(--color-blue-niikappu);
    background: transparent;
    border: 0;
    box-shadow: none;
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
    pointer-events: none;
  }

  /* Paper Rail is the default state. */
  .l-site-header__inner {
    position: relative;
    z-index: 2;
    width: min(var(--site-max), 100%);
    min-height: var(--pc-header-rail-height, 64px);
    margin: 0 auto;
    padding: 9px 14px 9px 16px;
    align-items: center;
    gap: 16px;
    color: var(--color-blue-niikappu);
    background:
      linear-gradient(180deg, rgba(255, 255, 255, 0.22), rgba(255, 255, 255, 0)),
      rgba(248, 243, 231, 0.86);
    border: 1px solid rgba(74, 55, 32, 0.12);
    border-radius: var(--pc-header-radius, 18px);
    box-shadow:
      0 10px 28px rgba(39, 31, 19, 0.07),
      inset 0 1px 0 rgba(255, 255, 255, 0.48);
    -webkit-backdrop-filter: blur(15px) saturate(1.04);
    backdrop-filter: blur(15px) saturate(1.04);
    pointer-events: auto;
    isolation: isolate;
    transition:
      color 0.36s var(--ease-out-craft),
      background-color 0.36s var(--ease-out-craft),
      border-color 0.36s var(--ease-out-craft),
      box-shadow 0.36s var(--ease-out-craft),
      -webkit-backdrop-filter 0.36s var(--ease-out-craft),
      backdrop-filter 0.36s var(--ease-out-craft);
  }

  .l-site-header__brand,
  .l-site-header__menu-button {
    position: relative;
    z-index: 3;
  }

  .l-site-header__brand {
    flex: 0 0 auto;
    gap: 10px;
    color: inherit;
    text-shadow: none;
    transition:
      color 0.32s var(--ease-out-craft),
      opacity 0.32s var(--ease-out-craft);
  }

  .l-site-header__brand-mark {
    width: 44px;
    height: 44px;
    border: 1px solid var(--color-blue-niikappu);
    border-radius: 50%;
    color: var(--color-paper-card-strong);
    background: var(--color-blue-niikappu);
    font-size: 0.62rem;
    letter-spacing: 0.08em;
    box-shadow: inset 0 0 0 1px rgba(255, 250, 240, 0.06);
    transition:
      color 0.32s var(--ease-out-craft),
      background-color 0.32s var(--ease-out-craft),
      border-color 0.32s var(--ease-out-craft),
      box-shadow 0.32s var(--ease-out-craft);
  }

  .l-site-header__brand-text {
    gap: 1px;
  }

  .l-site-header__brand-small,
  .l-site-header__brand-sub {
    color: var(--color-blue-muted);
    font-size: 0.6rem;
    letter-spacing: 0.065em;
    text-shadow: none;
    transition: color 0.32s var(--ease-out-craft);
  }

  .l-site-header__brand-main {
    color: inherit;
    font-size: 1.02rem;
    letter-spacing: 0.075em;
    transition: color 0.32s var(--ease-out-craft);
  }

  .l-site-header__menu-button {
    width: 48px;
    height: 42px;
    color: inherit;
  }

  .l-site-header__menu-line,
  .l-site-header__menu-button::before,
  .l-site-header__menu-button::after {
    right: 1px;
    width: 36px;
    height: 2px;
    background: currentColor;
    box-shadow: none;
  }

  .l-site-header__menu-button::before {
    top: 8px;
  }

  .l-site-header__menu-line {
    top: 20px;
  }

  .l-site-header__menu-button::after {
    top: 32px;
  }

  .l-site-header__menu-button[aria-expanded="true"]::before {
    transform: translateY(12px) rotate(36deg);
  }

  .l-site-header__menu-button[aria-expanded="true"]::after {
    transform: translateY(-12px) rotate(-36deg);
  }

  /* Tablet navigation remains a full-screen menu. */
  .l-site-header__nav {
    position: fixed;
    inset: 0;
    z-index: 1;
    display: grid;
    place-items: center;
    padding:
      calc(var(--pc-header-height, 82px) + 40px)
      clamp(32px, 8vw, 72px)
      54px;
    color: var(--color-white-soft);
    background:
      radial-gradient(circle at 72% 10%, rgba(230, 184, 90, 0.17), transparent 350px),
      radial-gradient(circle at 16% 78%, rgba(92, 122, 87, 0.15), transparent 390px),
      linear-gradient(150deg, rgba(12, 23, 34, 0.985), rgba(24, 43, 37, 0.985));
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition:
      opacity 0.28s var(--ease-out-craft),
      visibility 0.28s var(--ease-out-craft);
  }

  .l-site-header__nav.is-open {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
  }

  .l-site-header__nav-list {
    width: min(430px, 100%);
    display: grid;
    gap: 0;
  }

  .l-site-header__nav-item {
    border-bottom: 1px solid rgba(255, 250, 240, 0.15);
  }

  .l-site-header__nav-item--cta {
    margin-top: 20px;
    border-bottom: 0;
  }

  .l-site-header__nav-link {
    display: flex;
    justify-content: space-between;
    align-items: center;
    min-height: 62px;
    padding: 0 4px;
    color: rgba(255, 250, 240, 0.88);
    font-family: var(--font-heading);
    font-size: 1.06rem;
    font-weight: 600;
    line-height: 1.3;
    letter-spacing: 0.075em;
    text-decoration: none;
  }

  .l-site-header__nav-link::after {
    content: "→";
    opacity: 0.62;
  }

  .l-site-header__nav-link--cta {
    min-height: 52px;
    padding: 0 22px;
    border: 1px solid rgba(255, 250, 240, 0.35);
    border-radius: 999px;
    color: #122335;
    background: rgba(255, 250, 240, 0.92);
    box-shadow: 0 10px 22px rgba(0, 0, 0, 0.15);
    font-family: var(--font-ui);
    font-size: 0.96rem;
    font-weight: 700;
    letter-spacing: 0.05em;
  }

  .l-site-header__nav-link--cta::after {
    content: none;
    display: none;
  }

  .l-site-header__nav-label {
    min-width: 0;
  }

  .l-site-header__nav-arrow {
    display: inline-block;
    flex: 0 0 auto;
    margin-left: 12px;
    font-size: 1.08em;
    line-height: 1;
    transition: transform 0.3s var(--ease-out-craft);
  }

  /* Scene Overlay: dark visual Sections 01 / 04 / 09. */
  body[data-active-section="sec01"] .l-site-header__inner,
  body[data-active-section="sec04"] .l-site-header__inner,
  body[data-active-section="sec09"] .l-site-header__inner {
    color: var(--color-white-soft);
    background:
      linear-gradient(180deg, rgba(255, 255, 255, 0.035), rgba(255, 255, 255, 0)),
      rgba(8, 16, 18, 0.2);
    border-color: rgba(255, 250, 240, 0.13);
    box-shadow:
      0 10px 28px rgba(0, 0, 0, 0.08),
      inset 0 1px 0 rgba(255, 255, 255, 0.06);
    -webkit-backdrop-filter: blur(8px) saturate(0.94);
    backdrop-filter: blur(8px) saturate(0.94);
  }

  body[data-active-section="sec01"] .l-site-header__brand,
  body[data-active-section="sec04"] .l-site-header__brand,
  body[data-active-section="sec09"] .l-site-header__brand,
  body[data-active-section="sec01"] .l-site-header__menu-button,
  body[data-active-section="sec04"] .l-site-header__menu-button,
  body[data-active-section="sec09"] .l-site-header__menu-button {
    color: var(--color-white-soft);
    text-shadow: 0 2px 10px rgba(0, 0, 0, 0.22);
  }

  body[data-active-section="sec01"] .l-site-header__brand-mark,
  body[data-active-section="sec04"] .l-site-header__brand-mark,
  body[data-active-section="sec09"] .l-site-header__brand-mark {
    color: #10263b;
    background: rgba(255, 250, 240, 0.93);
    border-color: rgba(255, 250, 240, 0.9);
    box-shadow:
      0 4px 14px rgba(0, 0, 0, 0.12),
      inset 0 0 0 1px rgba(255, 255, 255, 0.36);
  }

  body[data-active-section="sec01"] .l-site-header__brand-small,
  body[data-active-section="sec01"] .l-site-header__brand-sub,
  body[data-active-section="sec04"] .l-site-header__brand-small,
  body[data-active-section="sec04"] .l-site-header__brand-sub,
  body[data-active-section="sec09"] .l-site-header__brand-small,
  body[data-active-section="sec09"] .l-site-header__brand-sub {
    color: rgba(255, 250, 240, 0.72);
  }

  .c-button {
    width: auto;
  }

  .c-section-lead {
    max-width: var(--pc-text-max);
  }

}

@media (min-width: 1024px) {
  :root {
    --side-padding: clamp(40px, 4.1vw, 64px);
    --pc-header-top-gap: 10px;
    --pc-header-rail-height: 66px;
    --pc-header-height: 84px;
  }

  html {
    scroll-padding-top: var(--pc-header-height, 84px);
  }

  .l-atelier-section {
    scroll-margin-top: var(--pc-header-height, 84px);
  }

  .l-site-header,
  body[data-active-section="sec01"] .l-site-header,
  body[data-active-section="sec02"] .l-site-header,
  body[data-active-section="sec03"] .l-site-header,
  body[data-active-section="sec04"] .l-site-header,
  body[data-active-section="sec05"] .l-site-header,
  body[data-active-section="sec06"] .l-site-header,
  body[data-active-section="sec07"] .l-site-header,
  body[data-active-section="sec08"] .l-site-header,
  body[data-active-section="sec09"] .l-site-header {
    min-height: var(--pc-header-height, 84px);
    padding:
      var(--pc-header-top-gap, 10px)
      clamp(24px, 3vw, 40px)
      0;
  }

  .l-site-header__inner {
    min-height: var(--pc-header-rail-height, 66px);
    padding: 8px 14px 8px 16px;
    gap: clamp(14px, 1.8vw, 24px);
  }

  .l-site-header__brand {
    min-width: 198px;
  }

  .l-site-header__brand-mark {
    width: 44px;
    height: 44px;
  }

  .l-site-header__brand-main {
    font-size: clamp(0.9rem, 0.92vw, 1rem);
  }

  .l-site-header__brand-small {
    font-size: 0.56rem;
  }

  .l-site-header__brand-sub {
    display: none;
  }

  .l-site-header__menu-button {
    display: none;
  }

  .l-site-header__nav {
    position: static;
    inset: auto;
    z-index: auto;
    display: block;
    width: auto;
    margin-left: auto;
    padding: 0;
    color: inherit;
    background: transparent;
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
  }

  .l-site-header__nav-list {
    width: auto;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: clamp(8px, 0.9vw, 13px);
  }

  .l-site-header__nav-item,
  .l-site-header__nav-item--cta {
    margin-top: 0;
    border: 0;
  }

  .l-site-header__nav-link {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 36px;
    padding: 0 2px;
    color: rgba(21, 39, 61, 0.76);
    font-family: var(--font-ui);
    font-size: clamp(0.68rem, 0.72vw, 0.76rem);
    font-weight: 700;
    line-height: 1;
    letter-spacing: 0.025em;
    text-decoration: none;
    white-space: nowrap;
    transition:
      color 0.3s var(--ease-out-craft),
      transform 0.3s var(--ease-out-craft);
  }

  .l-site-header__nav-link::after {
    content: "";
    position: absolute;
    right: 0;
    bottom: 3px;
    left: 0;
    height: 1px;
    background: currentColor;
    opacity: 0;
    transform: scaleX(0.24);
    transform-origin: center;
    transition:
      opacity 0.3s var(--ease-out-craft),
      transform 0.3s var(--ease-out-craft);
  }

  .l-site-header__nav-link[aria-current="true"] {
    color: var(--color-blue-niikappu);
  }

  .l-site-header__nav-link[aria-current="true"]::after {
    opacity: 0.58;
    transform: scaleX(1);
  }

  .l-site-header__nav-link--cta {
    min-height: 36px;
    padding: 0 14px;
    border: 1px solid rgba(21, 39, 61, 0.22);
    border-radius: 999px;
    color: var(--color-white-soft);
    background:
      linear-gradient(180deg, rgba(255, 255, 255, 0.08), rgba(255, 255, 255, 0)),
      var(--color-blue-niikappu);
    box-shadow:
      0 7px 16px rgba(21, 39, 61, 0.12),
      inset 0 0 0 1px rgba(255, 250, 240, 0.06);
    font-size: 0.72rem;
    letter-spacing: 0.035em;
  }

  .l-site-header__nav-link--cta::after {
    content: none;
    display: none;
  }

  .l-site-header__nav-arrow {
    display: inline-block;
    margin-left: 8px;
    font-size: 1.08em;
    opacity: 0.82;
  }

  /* Scene Overlay desktop navigation. */
  body[data-active-section="sec01"] .l-site-header__nav-link,
  body[data-active-section="sec04"] .l-site-header__nav-link,
  body[data-active-section="sec09"] .l-site-header__nav-link {
    color: rgba(255, 250, 240, 0.8);
  }

  body[data-active-section="sec01"] .l-site-header__nav-link[aria-current="true"],
  body[data-active-section="sec04"] .l-site-header__nav-link[aria-current="true"],
  body[data-active-section="sec09"] .l-site-header__nav-link[aria-current="true"] {
    color: var(--color-white-soft);
  }

  body[data-active-section="sec01"] .l-site-header__nav-link--cta,
  body[data-active-section="sec04"] .l-site-header__nav-link--cta,
  body[data-active-section="sec09"] .l-site-header__nav-link--cta {
    color: var(--color-white-soft);
    background: rgba(8, 18, 25, 0.34);
    border-color: rgba(255, 250, 240, 0.3);
    box-shadow:
      0 8px 18px rgba(0, 0, 0, 0.11),
      inset 0 0 0 1px rgba(255, 255, 255, 0.045);
  }

}

@media (min-width: 1280px) {
  :root {
    --site-max: 1180px;
    --side-padding: 56px;
    --pc-header-top-gap: 12px;
    --pc-header-rail-height: 70px;
    --pc-header-height: 90px;
  }

  .l-site-header,
  body[data-active-section="sec01"] .l-site-header,
  body[data-active-section="sec02"] .l-site-header,
  body[data-active-section="sec03"] .l-site-header,
  body[data-active-section="sec04"] .l-site-header,
  body[data-active-section="sec05"] .l-site-header,
  body[data-active-section="sec06"] .l-site-header,
  body[data-active-section="sec07"] .l-site-header,
  body[data-active-section="sec08"] .l-site-header,
  body[data-active-section="sec09"] .l-site-header {
    min-height: var(--pc-header-height, 90px);
    padding-top: var(--pc-header-top-gap, 12px);
    padding-right: clamp(28px, 4vw, 56px);
    padding-left: clamp(28px, 4vw, 56px);
  }

  .l-site-header__inner {
    min-height: var(--pc-header-rail-height, 70px);
    padding: 9px 17px 9px 18px;
    gap: clamp(20px, 2vw, 30px);
  }

  .l-site-header__brand {
    min-width: 222px;
  }

  .l-site-header__brand-mark {
    width: 48px;
    height: 48px;
    font-size: 0.66rem;
  }

  .l-site-header__brand-main {
    font-size: clamp(0.98rem, 1vw, 1.08rem);
  }

  .l-site-header__brand-small,
  .l-site-header__brand-sub {
    font-size: 0.59rem;
  }

  .l-site-header__brand-sub {
    display: block;
  }

  .l-site-header__nav-list {
    gap: clamp(12px, 1.12vw, 18px);
  }

  .l-site-header__nav-link {
    min-height: 38px;
    font-size: clamp(0.74rem, 0.7vw, 0.8rem);
    letter-spacing: 0.03em;
  }

  .l-site-header__nav-link--cta {
    min-height: 38px;
    padding: 0 17px;
    font-size: 0.76rem;
  }
}

@media (min-width: 1440px) {
  :root {
    --pc-content-max: 1180px;
    --pc-header-rail-height: 72px;
    --pc-header-height: 92px;
  }

  .l-site-header__inner {
    min-height: var(--pc-header-rail-height, 72px);
  }
}

/* --------------------------------------------------------------------------
   14. Footer v2 responsive layout
   -------------------------------------------------------------------------- */

@media (min-width: 768px) {
  .l-site-footer__inner {
    gap: 48px;
    padding:
      clamp(78px, 9vw, 90px)
      var(--side-padding)
      32px;
  }

  .l-site-footer__brand-link {
    gap: 17px;
  }

  .l-site-footer__brand-mark {
    width: 58px;
    height: 58px;
    font-size: 0.68rem;
  }

  .l-site-footer__brand-label {
    font-size: 0.66rem;
  }

  .l-site-footer__name {
    font-size: clamp(1.46rem, 2.45vw, 1.7rem);
  }

  .l-site-footer__sub {
    margin-top: 22px;
    font-size: 0.98rem;
  }

  .l-site-footer__description {
    max-width: 44ch;
    font-size: 0.84rem;
  }

  .l-site-footer__nav {
    grid-template-columns: minmax(0, 1.7fr) minmax(190px, 0.72fr);
    gap: 44px;
  }

  .l-site-footer__nav-list--primary {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 5px 20px;
  }

  .l-site-footer__nav-link {
    min-height: 38px;
    font-size: 0.88rem;
  }

  .l-site-footer__bottom {
    padding-top: 24px;
  }

  .l-site-footer__copyright,
  .l-site-footer__page-top {
    font-size: 0.7rem;
  }
}

@media (min-width: 1024px) {
  .l-site-footer__inner {
    grid-template-columns: minmax(310px, 5fr) minmax(0, 7fr);
    grid-template-areas:
      "brand guide"
      "bottom bottom";
    align-items: start;
    column-gap: clamp(58px, 6.6vw, 92px);
    row-gap: 58px;
    padding:
      clamp(84px, 8vw, 98px)
      var(--side-padding)
      32px;
  }

  .l-site-footer__brand {
    grid-area: brand;
    padding-top: 1px;
  }

  .l-site-footer__guide {
    grid-area: guide;
  }

  .l-site-footer__bottom {
    grid-area: bottom;
  }

  .l-site-footer__brand-mark {
    width: 58px;
    height: 58px;
  }

  .l-site-footer__name {
    font-size: clamp(1.55rem, 1.72vw, 1.76rem);
  }

  .l-site-footer__sub {
    font-size: 0.98rem;
  }

  .l-site-footer__description {
    max-width: 37ch;
  }

  .l-site-footer__nav {
    grid-template-columns: minmax(0, 1.72fr) minmax(170px, 0.68fr);
    gap: clamp(38px, 4vw, 54px);
  }

  .l-site-footer__nav-list--primary {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 5px 26px;
  }

  .l-site-footer__nav-heading {
    margin-bottom: 20px;
    font-size: 0.72rem;
  }

  .l-site-footer__nav-link {
    font-size: 0.9rem;
  }

  .l-site-footer__contact-link {
    min-height: 44px;
    font-size: 0.92rem;
  }

  .l-site-footer__bottom {
    padding-top: 26px;
  }
}

@media (min-width: 1280px) {
  .l-site-footer__inner {
    grid-template-columns: minmax(350px, 5fr) minmax(0, 7fr);
    column-gap: 90px;
    row-gap: 66px;
    padding: 98px var(--side-padding) 34px;
  }

  .l-site-footer__brand-mark {
    width: 62px;
    height: 62px;
    font-size: 0.72rem;
  }

  .l-site-footer__brand-label {
    font-size: 0.68rem;
  }

  .l-site-footer__name {
    font-size: clamp(1.7rem, 1.5vw, 1.9rem);
  }

  .l-site-footer__sub {
    margin-top: 24px;
    font-size: 1rem;
  }

  .l-site-footer__description {
    font-size: 0.86rem;
  }

  .l-site-footer__nav {
    grid-template-columns: minmax(0, 1.85fr) minmax(180px, 0.62fr);
    gap: 56px;
  }

  .l-site-footer__nav-list--primary {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px 42px;
  }

  .l-site-footer__nav-link {
    font-size: 0.92rem;
  }

  .l-site-footer__bottom {
    padding-top: 28px;
  }
}

@media (min-width: 1440px) {
  .l-site-footer__inner {
    padding-top: 106px;
    padding-bottom: 36px;
  }

  .l-site-footer__name {
    font-size: 1.9rem;
  }

  .l-site-footer__nav-link {
    font-size: 0.94rem;
  }
}

@media (hover: hover) and (pointer: fine) and (min-width: 1024px) {
  .l-site-header__brand:hover {
    opacity: 0.84;
  }

  .l-site-header__nav-link:not(.l-site-header__nav-link--cta):hover {
    color: var(--color-blue-niikappu);
    transform: translateY(-1px);
  }

  .l-site-header__nav-link:not(.l-site-header__nav-link--cta):hover::after {
    opacity: 0.68;
    transform: scaleX(1);
  }

  body[data-active-section="sec01"] .l-site-header__nav-link:not(.l-site-header__nav-link--cta):hover,
  body[data-active-section="sec04"] .l-site-header__nav-link:not(.l-site-header__nav-link--cta):hover,
  body[data-active-section="sec09"] .l-site-header__nav-link:not(.l-site-header__nav-link--cta):hover {
    color: var(--color-white-soft);
  }

  .l-site-header__nav-link--cta:hover {
    color: var(--color-white-soft);
    transform: translateY(-1px);
    box-shadow:
      0 10px 22px rgba(21, 39, 61, 0.18),
      inset 0 0 0 1px rgba(255, 250, 240, 0.08);
  }

  body[data-active-section="sec01"] .l-site-header__nav-link--cta:hover,
  body[data-active-section="sec04"] .l-site-header__nav-link--cta:hover,
  body[data-active-section="sec09"] .l-site-header__nav-link--cta:hover {
    background: rgba(8, 18, 25, 0.46);
    border-color: rgba(255, 250, 240, 0.42);
    box-shadow:
      0 10px 22px rgba(0, 0, 0, 0.16),
      inset 0 0 0 1px rgba(255, 255, 255, 0.055);
  }

  .l-site-header__nav-link--cta:hover .l-site-header__nav-arrow {
    transform: translateX(3px);
  }

  .c-button:hover {
    transform: translateY(-2px);
    box-shadow: var(--shadow-button);
  }


  .l-site-footer__brand-link,
  .l-site-footer__nav-link,
  .l-site-footer__page-top {
    transition:
      color 0.3s var(--ease-out-craft),
      opacity 0.3s var(--ease-out-craft),
      transform 0.3s var(--ease-out-craft);
  }

  .l-site-footer__brand-link:hover {
    opacity: 0.84;
  }

  .l-site-footer__nav-link:not(.l-site-footer__contact-link):hover {
    color: var(--color-white-soft);
    transform: translateY(-1px);
  }

  .l-site-footer__nav-link:not(.l-site-footer__contact-link):hover::after {
    opacity: 0.58;
    transform: scaleX(1);
  }

  .l-site-footer__contact-link:hover {
    color: var(--color-white-soft);
    border-color: rgba(230, 184, 90, 0.94);
  }

  .l-site-footer__contact-link:hover .l-site-footer__contact-arrow {
    transform: translateX(3px);
  }

  .l-site-footer__page-top:hover {
    color: var(--color-white-soft);
  }

  .l-site-footer__page-top:hover .l-site-footer__page-top-arrow {
    transform: translateY(-3px);
  }
}


/* --------------------------------------------------------------------------
   14. Smartphone header / menu / footer foundation
   --------------------------------------------------------------------------

   Scope:
   - 767px and below only.
   - Desktop and tablet header/footer rules above remain unchanged.
   - Section 01 smartphone header visibility is unlocked in top-sec01.css.
   -------------------------------------------------------------------------- */

@media (max-width: 767px) {
  :root {
    --sp-header-top: max(10px, env(safe-area-inset-top));
    --sp-header-side: clamp(10px, 3.35vw, 16px);
    --sp-header-height: clamp(52px, 14vw, 60px);
    --sp-header-radius: 17px;
  }

  html {
    scroll-padding-top: calc(var(--sp-header-height) + var(--sp-header-top) + 16px);
  }

  body.is-menu-open {
    overflow: hidden;
    overscroll-behavior: contain;
    touch-action: none;
  }

  .l-atelier-section {
    scroll-margin-top: calc(var(--sp-header-height) + var(--sp-header-top) + 18px);
  }

  /* Smartphone floating rail */
  .l-site-header,
  body[data-active-section="sec01"] .l-site-header,
  body[data-active-section="sec02"] .l-site-header,
  body[data-active-section="sec03"] .l-site-header,
  body[data-active-section="sec04"] .l-site-header,
  body[data-active-section="sec05"] .l-site-header,
  body[data-active-section="sec06"] .l-site-header,
  body[data-active-section="sec07"] .l-site-header,
  body[data-active-section="sec08"] .l-site-header,
  body[data-active-section="sec09"] .l-site-header {
    position: fixed;
    inset: 0 0 auto 0;
    z-index: 9999;
    min-height: calc(var(--sp-header-height) + var(--sp-header-top));
    color: var(--color-blue-niikappu);
    background: transparent;
    border: 0;
    box-shadow: none;
    pointer-events: none;
  }

  .l-site-header__inner {
    position: relative;
    z-index: 4;
    width: auto;
    min-height: var(--sp-header-height);
    margin: var(--sp-header-top) var(--sp-header-side) 0;
    padding: 7px 8px 7px 8px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    color: var(--color-blue-niikappu);
    border: 1px solid rgba(74, 55, 32, 0.13);
    border-radius: var(--sp-header-radius);
    -webkit-backdrop-filter: blur(14px) saturate(1.02);
    backdrop-filter: blur(14px) saturate(1.02);
    pointer-events: auto;
    transition:
      color 0.32s var(--ease-out-craft),
      background-color 0.32s var(--ease-out-craft),
      border-color 0.32s var(--ease-out-craft),
      box-shadow 0.32s var(--ease-out-craft),
      -webkit-backdrop-filter 0.32s var(--ease-out-craft),
      backdrop-filter 0.32s var(--ease-out-craft);
  }

  body[data-active-section="sec01"] .l-site-header__inner,
  body[data-active-section="sec04"] .l-site-header__inner,
  body[data-active-section="sec09"] .l-site-header__inner {
    color: var(--color-white-soft);
    border-color: rgba(255, 250, 240, 0.14);
    -webkit-backdrop-filter: blur(9px) saturate(0.96);
    backdrop-filter: blur(9px) saturate(0.96);
  }


  .l-site-header__brand {
    flex: 1 1 auto;
    min-width: 0;
    max-width: calc(100% - 54px);
    color: inherit;
    text-shadow: none;
  }

  body[data-active-section="sec01"] .l-site-header__brand,
  body[data-active-section="sec04"] .l-site-header__brand,
  body[data-active-section="sec09"] .l-site-header__brand,
  body.is-menu-open .l-site-header__brand {
    text-shadow: 0 2px 10px rgba(0, 0, 0, 0.26);
  }

  .l-site-header__brand-mark {
    width: clamp(34px, 9.7vw, 38px);
    height: clamp(34px, 9.7vw, 38px);
    border-radius: 50%;
    color: var(--color-white-soft);
    background:
      linear-gradient(180deg, rgba(255, 255, 255, 0.08), rgba(255, 255, 255, 0)),
      var(--color-blue-niikappu);
    border-color: rgba(21, 39, 61, 0.28);
    box-shadow:
      0 5px 14px rgba(21, 39, 61, 0.16),
      inset 0 0 0 1px rgba(255, 255, 255, 0.08);
    font-size: clamp(0.46rem, 1.65vw, 0.52rem);
    letter-spacing: 0.085em;
  }

  body[data-active-section="sec01"] .l-site-header__brand-mark,
  body[data-active-section="sec04"] .l-site-header__brand-mark,
  body[data-active-section="sec09"] .l-site-header__brand-mark,
  body.is-menu-open .l-site-header__brand-mark {
    color: #10263b;
    background:
      linear-gradient(180deg, rgba(255, 255, 255, 0.18), rgba(255, 255, 255, 0)),
      rgba(255, 250, 240, 0.94);
    border-color: rgba(255, 250, 240, 0.82);
    box-shadow:
      0 5px 16px rgba(0, 0, 0, 0.15),
      inset 0 0 0 1px rgba(255, 255, 255, 0.28);
  }

  .l-site-header__brand-text {
    min-width: 0;
    gap: 1px;
    line-height: 1.05;
  }

  .l-site-header__brand-small {
    max-width: 100%;
    overflow: hidden;
    color: currentColor;
    font-size: clamp(0.5rem, 1.65vw, 0.58rem);
    font-weight: 600;
    line-height: 1.05;
    letter-spacing: 0.055em;
    opacity: 0.78;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .l-site-header__brand-main {
    max-width: 100%;
    overflow: hidden;
    color: currentColor;
    font-size: clamp(0.72rem, 3.05vw, 0.88rem);
    font-weight: 850;
    line-height: 1.05;
    letter-spacing: 0.07em;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .l-site-header__brand-sub {
    display: none !important;
  }

  .l-site-header__menu-button {
    flex: 0 0 auto;
    width: 46px;
    height: 42px;
    border-radius: 14px;
    color: inherit;
    background: rgba(255, 255, 255, 0.06);
    pointer-events: auto;
  }

  body[data-active-section="sec02"] .l-site-header__menu-button,
  body[data-active-section="sec03"] .l-site-header__menu-button,
  body[data-active-section="sec05"] .l-site-header__menu-button,
  body[data-active-section="sec06"] .l-site-header__menu-button,
  body[data-active-section="sec07"] .l-site-header__menu-button,
  body[data-active-section="sec08"] .l-site-header__menu-button {
    background: rgba(21, 39, 61, 0.035);
  }


  .l-site-header__menu-line,
  .l-site-header__menu-button::before,
  .l-site-header__menu-button::after {
    right: 11px;
    width: 24px;
    height: 1.5px;
    box-shadow: none;
  }

  .l-site-header__menu-button::before {
    top: 12px;
  }

  .l-site-header__menu-line {
    top: 20px;
  }

  .l-site-header__menu-button::after {
    top: 28px;
  }

  .l-site-header__menu-button[aria-expanded="true"]::before {
    transform: translateY(8px) rotate(38deg);
  }

  .l-site-header__menu-button[aria-expanded="true"]::after {
    transform: translateY(-8px) rotate(-38deg);
  }

  /* Full-screen smartphone menu overlay / Night Forest Guide
     z-index policy:
     - .l-site-header: 9999
     - .l-site-header__inner: above overlay, contains the CLOSE control
     - .l-site-header__nav: below header rail, full-screen overlay
  */
  .l-site-header__nav {
    position: fixed;
    inset: 0;
    z-index: 1;
    display: block;
    height: 100dvh;
    min-height: 100dvh;
    padding:
      calc(var(--sp-header-top) + var(--sp-header-height) + 30px)
      max(24px, env(safe-area-inset-right))
      max(34px, env(safe-area-inset-bottom))
      max(24px, env(safe-area-inset-left));
    overflow-x: hidden;
    overflow-y: auto;
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
    color: var(--color-white-soft);
    isolation: isolate;
    touch-action: pan-y;
  }


  .l-site-header__nav::after {
    top: -88px;
    height: 220px;
  }


  /*
     The header itself carries the brand when the menu is open.
     The large in-overlay brand block creates visual competition, so it is
     hidden on smartphone without requiring an immediate PHP rewrite.
  */
  .l-site-header__nav-head {
    display: none !important;
  }

  .l-site-header__nav-kicker,
  .l-site-header__nav-list,
  .l-site-header__nav-actions,
  .l-site-header__nav-location {
    width: min(336px, 100%);
    margin-inline: auto;
  }


  .l-site-header__nav.is-open .l-site-header__nav-list {
    transition-delay: 0.03s;
  }

  .l-site-header__nav.is-open .l-site-header__nav-actions {
    transition-delay: 0.055s;
  }

  .l-site-header__nav.is-open .l-site-header__nav-location {
    transition-delay: 0.075s;
  }

  .l-site-header__nav-kicker {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-top: clamp(28px, 8.8vh, 54px);
    margin-bottom: 18px;
    color: rgba(203, 163, 88, 0.76);
    font-family: var(--font-label);
    font-size: 0.64rem;
    font-weight: 850;
    line-height: 1;
    letter-spacing: 0.24em;
  }

  .l-site-header__nav-kicker::after {
    content: "";
    flex: 1 1 auto;
    height: 1px;
    margin-left: 14px;
    background:
      repeating-linear-gradient(
        90deg,
        rgba(203, 163, 88, 0.28) 0,
        rgba(203, 163, 88, 0.28) 2px,
        transparent 2px,
        transparent 8px
      );
    opacity: 0.72;
  }

  .l-site-header__nav-kicker-ja {
    order: 3;
    margin-left: 12px;
    color: rgba(255, 250, 240, 0.38);
    font-family: var(--font-ui);
    font-size: 0.66rem;
    font-weight: 500;
    letter-spacing: 0.08em;
    white-space: nowrap;
  }

  .l-site-header__nav-list {
    counter-reset: zno-menu;
    display: grid;
    gap: 0;
    padding: 0;
  }

  .l-site-header__nav-list::before {
    display: none;
  }

  .l-site-header__nav-item {
    position: relative;
    counter-increment: zno-menu;
    border-bottom: 0;
  }

  .l-site-header__nav-item::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 1px;
    background:
      repeating-linear-gradient(
        90deg,
        rgba(255, 250, 240, 0.18) 0,
        rgba(255, 250, 240, 0.18) 2px,
        transparent 2px,
        transparent 7px
      );
    opacity: 0.74;
    pointer-events: none;
  }

  .l-site-header__nav-item--desktop-cta,
  .l-site-header__nav-item--cta {
    display: none;
  }

  .l-site-header__nav-link {
    position: relative;
    display: grid;
    grid-template-columns: 34px minmax(0, 1fr) 18px;
    align-items: center;
    column-gap: 10px;
    min-height: 53px;
    padding: 0 0;
    color: rgba(255, 250, 240, 0.84);
    font-family: var(--font-heading);
    font-size: clamp(0.93rem, 3.62vw, 1.04rem);
    font-weight: 560;
    line-height: 1.35;
    letter-spacing: 0.09em;
    text-decoration: none;
  }

  .l-site-header__nav-link::before {
    content: counter(zno-menu, decimal-leading-zero);
    color: rgba(203, 163, 88, 0.56);
    font-family: var(--font-heading);
    font-size: 0.68rem;
    font-weight: 500;
    letter-spacing: 0.1em;
  }

  .l-site-header__nav-link::after {
    content: "↗";
    color: rgba(203, 163, 88, 0.64);
    font-family: var(--font-label);
    font-size: 0.88rem;
    line-height: 1;
    opacity: 0.9;
    transform: translate(0, 0);
    transition: transform 0.18s var(--ease-out-craft), opacity 0.18s var(--ease-out-craft);
  }

  .l-site-header__nav-link[aria-current="true"] {
    color: var(--color-white-soft);
    background:
      linear-gradient(90deg, rgba(203, 163, 88, 0.08), transparent 56%);
  }

  .l-site-header__nav-link[aria-current="true"]::before,
  .l-site-header__nav-link[aria-current="true"]::after {
    color: rgba(203, 163, 88, 0.88);
  }

  .l-site-header__nav-link:hover::after,
  .l-site-header__nav-link:focus-visible::after {
    opacity: 1;
    transform: translate(2px, -2px);
  }


  .l-site-header__nav-actions {
    display: grid;
    gap: 13px;
    margin-top: 24px;
    padding-top: 21px;
    border-top: 0;
  }

  .l-site-header__nav-actions::before {
    content: "";
    height: 1px;
    background:
      linear-gradient(
        90deg,
        transparent,
        rgba(203, 163, 88, 0.26) 18%,
        rgba(203, 163, 88, 0.18) 72%,
        transparent
      );
  }

  .l-site-header__menu-cta {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: space-between;
    min-height: 54px;
    padding: 0 18px;
    overflow: hidden;
    color: rgba(255, 250, 240, 0.9);
    background:
      linear-gradient(180deg, rgba(255, 250, 240, 0.052), rgba(255, 250, 240, 0.018)),
      rgba(11, 33, 31, 0.56);
    border: 1px solid rgba(203, 163, 88, 0.5);
    border-radius: 999px;
    box-shadow:
      0 10px 24px rgba(0, 0, 0, 0.18),
      inset 0 1px 0 rgba(255, 250, 240, 0.08);
    font-family: var(--font-heading);
    font-size: 0.92rem;
    font-weight: 610;
    line-height: 1.35;
    letter-spacing: 0.11em;
    text-decoration: none;
  }

  .l-site-header__menu-cta::before {
    content: "";
    position: absolute;
    inset: 0;
    background:
      repeating-linear-gradient(
        12deg,
        rgba(255, 250, 240, 0.018) 0,
        rgba(255, 250, 240, 0.018) 1px,
        transparent 1px,
        transparent 8px
      );
    opacity: 0.75;
    pointer-events: none;
  }

  .l-site-header__menu-cta-arrow {
    position: relative;
    display: inline-block;
    margin-left: 14px;
    color: rgba(203, 163, 88, 0.88);
    line-height: 1;
    transform: translate(0, 0);
    transition: transform 0.18s var(--ease-out-craft);
  }

  .l-site-header__menu-cta:hover,
  .l-site-header__menu-cta:focus-visible {
    border-color: rgba(218, 183, 107, 0.72);
    background:
      linear-gradient(180deg, rgba(255, 250, 240, 0.07), rgba(255, 250, 240, 0.02)),
      rgba(13, 39, 36, 0.64);
  }

  .l-site-header__menu-cta:hover .l-site-header__menu-cta-arrow,
  .l-site-header__menu-cta:focus-visible .l-site-header__menu-cta-arrow {
    transform: translate(2px, -1px);
  }

  .l-site-header__menu-cta.is-tapped {
    opacity: 0.72;
  }

  .l-site-header__menu-support-link {
    display: inline-flex;
    align-items: center;
    justify-content: space-between;
    min-height: 42px;
    width: fit-content;
    max-width: 100%;
    color: rgba(255, 250, 240, 0.66);
    border-bottom: 1px dotted rgba(203, 163, 88, 0.38);
    font-family: var(--font-ui);
    font-size: 0.84rem;
    font-weight: 560;
    line-height: 1.35;
    letter-spacing: 0.07em;
    text-decoration: none;
  }

  .l-site-header__menu-support-arrow {
    display: inline-block;
    margin-left: 12px;
    color: rgba(203, 163, 88, 0.62);
    line-height: 1;
    transform: translate(0, 0);
    transition: transform 0.18s var(--ease-out-craft);
  }

  .l-site-header__menu-support-link:hover .l-site-header__menu-support-arrow,
  .l-site-header__menu-support-link:focus-visible .l-site-header__menu-support-arrow {
    transform: translate(2px, -1px);
  }

  .l-site-header__menu-support-link.is-tapped {
    opacity: 0.58;
  }

  .l-site-header__nav-location {
    margin-top: 26px;
    padding-top: 14px;
    color: rgba(255, 250, 240, 0.27);
    border-top: 1px dotted rgba(255, 250, 240, 0.12);
    font-family: var(--font-label);
    font-size: 0.58rem;
    font-weight: 800;
    line-height: 1;
    letter-spacing: 0.2em;
  }

  .l-site-header__nav-arrow {
    display: inline-block;
    margin-left: 12px;
    color: currentColor;
    line-height: 1;
  }

  /* Smartphone footer colophon */


  .l-site-footer__nav-list--support {
    grid-template-columns: 1fr;
  }

  .l-site-footer__nav-link {
    min-height: 40px;
    font-size: 0.88rem;
    line-height: 1.45;
  }

  .l-site-footer__contact-link {
    min-height: 44px;
    padding-bottom: 7px;
    font-size: 0.92rem;
  }


}


@media (max-width: 767px) and (max-height: 690px) {

  .l-site-header__nav-head {
    padding-bottom: 12px;
  }


}


@media (max-width: 767px) and (max-height: 690px) {
  .l-site-header__nav {
    padding-top: calc(var(--sp-header-top) + var(--sp-header-height) + 16px);
    padding-bottom: max(22px, env(safe-area-inset-bottom));
  }

  .l-site-header__nav-kicker {
    margin-top: 18px;
    margin-bottom: 10px;
  }

  .l-site-header__nav-link {
    min-height: 48px;
    font-size: 0.94rem;
  }

  .l-site-header__nav-actions {
    margin-top: 18px;
    padding-top: 16px;
  }

  .l-site-header__menu-cta {
    min-height: 50px;
  }

  .l-site-header__nav-location {
    margin-top: 18px;
    padding-top: 12px;
  }
}

@media (max-width: 389px) {
  .l-site-footer__nav-list {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 374px) {
  .l-site-header__inner {
    padding-right: 7px;
    padding-left: 7px;
  }

  .l-site-header__brand {
    gap: 7px;
  }

  .l-site-header__brand-small {
    font-size: 0.5rem;
  }

  .l-site-header__brand-main {
    font-size: 0.7rem;
    letter-spacing: 0.055em;
  }

  .l-site-header__menu-button {
    width: 44px;
  }
}

/* --------------------------------------------------------------------------
   15. Reduced motion
   -------------------------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    scroll-behavior: auto !important;
  }

  [data-motion],
  [data-anim],
  [data-parallax] {
    animation: none !important;
    transition: none !important;
  }
}

@media (prefers-reduced-motion: reduce) {
  .l-site-footer__brand-link,
  .l-site-footer__nav-link,
  .l-site-footer__nav-link::after,
  .l-site-footer__contact-arrow,
  .l-site-footer__page-top,
  .l-site-footer__page-top-arrow {
    transition: none !important;
  }
}

@media (prefers-reduced-motion: reduce) {
  .l-site-header__inner,
  .l-site-header__brand,
  .l-site-header__brand-mark,
  .l-site-header__menu-button,
  .l-site-header__menu-line,
  .l-site-header__menu-button::before,
  .l-site-header__menu-button::after,
  .l-site-header__nav,
  .l-site-header__nav::after,
  .l-site-header__nav-kicker,
  .l-site-header__nav-list,
  .l-site-header__nav-actions,
  .l-site-header__nav-location,
  .l-site-header__nav-link,
  .l-site-header__nav-link::after,
  .l-site-header__nav-arrow,
  .l-site-header__menu-cta,
  .l-site-header__menu-cta-arrow,
  .l-site-header__menu-support-arrow {
    transition: none !important;
  }
}

/* --------------------------------------------------------------------------
   17. Smartphone footer — Night Guide
   --------------------------------------------------------------------------
   Canonical smartphone footer presentation. PC footer remains unchanged.
   -------------------------------------------------------------------------- */

@media (max-width: 767px) {
  .l-site-footer {
    position: relative;
    overflow: hidden;
    color: rgba(255, 250, 240, 0.88);
    background:
      linear-gradient(158deg, rgba(6, 16, 26, 0.995) 0%, rgba(13, 32, 31, 0.992) 54%, rgba(6, 12, 20, 0.998) 100%) !important;
    border-top: 1px solid rgba(203, 163, 88, 0.14);
    isolation: isolate;
  }

  .l-site-footer::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -2;
    pointer-events: none;
    background:
      linear-gradient(180deg, rgba(255, 250, 240, 0.045), transparent 18%, transparent 82%, rgba(0, 0, 0, 0.22)),
      repeating-linear-gradient(
        12deg,
        rgba(255, 250, 240, 0.012) 0,
        rgba(255, 250, 240, 0.012) 1px,
        transparent 1px,
        transparent 8px
      );
    opacity: 0.68;
    mix-blend-mode: soft-light;
  }

  .l-site-footer::after {
    content: "";
    position: absolute;
    right: -92px;
    top: -72px;
    z-index: -1;
    width: 220px;
    height: 220px;
    border-radius: 50%;
    background: rgba(196, 153, 74, 0.11);
    filter: blur(30px);
    opacity: 0.56;
    pointer-events: none;
  }

  .l-site-footer__inner {
    width: min(100%, 560px);
    padding:
      clamp(60px, 16vw, 76px)
      max(24px, env(safe-area-inset-right))
      max(32px, env(safe-area-inset-bottom))
      max(24px, env(safe-area-inset-left));
    gap: 34px;
  }

  .l-site-footer__brand {
    gap: 0;
  }

  .l-site-footer__brand-link {
    gap: 12px;
    color: rgba(255, 250, 240, 0.9);
    text-decoration: none;
  }

  .l-site-footer__brand-mark {
    width: 46px;
    height: 46px;
    color: #10263b;
    background:
      linear-gradient(180deg, rgba(255, 255, 255, 0.18), rgba(255, 255, 255, 0)),
      rgba(255, 250, 240, 0.9);
    border: 1px solid rgba(255, 250, 240, 0.66);
    box-shadow:
      0 7px 18px rgba(0, 0, 0, 0.18),
      inset 0 0 0 1px rgba(255, 255, 255, 0.12);
    font-size: 0.56rem;
  }

  .l-site-footer__brand-label {
    color: rgba(203, 163, 88, 0.72);
    font-size: 0.58rem;
    letter-spacing: 0.16em;
  }

  .l-site-footer__name {
    color: rgba(255, 250, 240, 0.9);
    font-family: var(--font-heading);
    font-size: clamp(1.02rem, 4.6vw, 1.2rem);
    font-weight: 650;
    line-height: 1.32;
    letter-spacing: 0.045em;
  }

  .l-site-footer__sub {
    margin-top: 18px;
    color: rgba(255, 250, 240, 0.68);
    font-family: var(--font-heading);
  }

  .l-site-footer__description {
    color: rgba(255, 250, 240, 0.48);
    font-size: 0.76rem;
    letter-spacing: 0.04em;
  }

  .l-site-footer__notice {
    margin-top: 22px;
    padding-top: 16px;
    color: rgba(255, 250, 240, 0.34);
    border-top: 1px dotted rgba(255, 250, 240, 0.14);
    font-family: var(--font-ui);
    font-size: 0.66rem;
    font-weight: 400;
    line-height: 1.74;
    letter-spacing: 0.035em;
  }

  .l-site-footer__nav {
    display: grid;
    gap: 32px;
    margin-top: 2px;
  }

  .l-site-footer__nav-group {
    min-width: 0;
  }

  .l-site-footer__nav-heading {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 14px;
    color: rgba(203, 163, 88, 0.78);
    font-family: var(--font-label);
    font-size: 0.64rem;
    font-weight: 850;
    line-height: 1;
    letter-spacing: 0.22em;
  }

  .l-site-footer__nav-heading::after {
    content: "";
    flex: 1 1 auto;
    height: 1px;
    background:
      repeating-linear-gradient(
        90deg,
        rgba(203, 163, 88, 0.28) 0,
        rgba(203, 163, 88, 0.28) 2px,
        transparent 2px,
        transparent 8px
      );
    opacity: 0.72;
  }

  .l-site-footer__nav-list {
    counter-reset: zno-footer-guide;
    display: grid;
    grid-template-columns: 1fr !important;
    gap: 0;
    margin: 0;
    padding: 0;
    list-style: none;
  }

  .l-site-footer__nav-list > li {
    position: relative;
    counter-increment: zno-footer-guide;
  }

  .l-site-footer__nav-list > li::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 1px;
    background:
      repeating-linear-gradient(
        90deg,
        rgba(255, 250, 240, 0.17) 0,
        rgba(255, 250, 240, 0.17) 2px,
        transparent 2px,
        transparent 7px
      );
    mask-image: linear-gradient(90deg, transparent 0%, #000 9%, #000 88%, transparent 100%);
    opacity: 0.72;
    pointer-events: none;
  }

  .l-site-footer__nav-link,
  .l-site-footer__contact-link {
    position: relative;
    display: grid;
    grid-template-columns: 34px minmax(0, 1fr) 18px;
    align-items: center;
    column-gap: 10px;
    min-height: 46px;
    padding: 0;
    color: rgba(255, 250, 240, 0.78);
    font-family: var(--font-heading);
    font-size: 0.9rem;
    font-weight: 540;
    line-height: 1.35;
    letter-spacing: 0.085em;
    text-decoration: none;
    border-bottom: 0 !important;
  }

  .l-site-footer__nav-list:not(.l-site-footer__nav-list--support) .l-site-footer__nav-link::before {
    content: counter(zno-footer-guide, decimal-leading-zero);
    color: rgba(203, 163, 88, 0.54);
    font-family: var(--font-heading);
    font-size: 0.64rem;
    font-weight: 500;
    letter-spacing: 0.1em;
  }

  .l-site-footer__nav-list--support .l-site-footer__nav-link,
  .l-site-footer__nav-list--support .l-site-footer__contact-link {
    min-height: 44px;
    color: rgba(255, 250, 240, 0.72);
    font-family: var(--font-ui);
    font-size: 0.86rem;
    font-weight: 560;
    letter-spacing: 0.07em;
  }

  .l-site-footer__nav-link::after,
  .l-site-footer__contact-link::after {
    content: "↗";
    color: rgba(203, 163, 88, 0.62);
    font-family: var(--font-label);
    font-size: 0.84rem;
    line-height: 1;
    transform: translate(0, 0);
    transition: transform 0.18s var(--ease-out-craft), opacity 0.18s var(--ease-out-craft);
  }

  .l-site-footer__nav-link:hover,
  .l-site-footer__nav-link:focus-visible,
  .l-site-footer__contact-link:hover,
  .l-site-footer__contact-link:focus-visible {
    color: rgba(255, 250, 240, 0.95);
  }

  .l-site-footer__nav-link:hover::after,
  .l-site-footer__nav-link:focus-visible::after,
  .l-site-footer__contact-link:hover::after,
  .l-site-footer__contact-link:focus-visible::after {
    opacity: 1;
    transform: translate(2px, -2px);
  }

  .l-site-footer__contact-link {
    width: 100%;
    color: rgba(255, 250, 240, 0.86);
  }

  .l-site-footer__bottom {
    display: grid;
    gap: 16px;
    justify-content: stretch;
    padding-top: 22px;
    border-top: 1px dotted rgba(255, 250, 240, 0.13);
  }

  .l-site-footer__page-top {
    width: fit-content;
    min-height: 40px;
    color: rgba(203, 163, 88, 0.72);
    border-bottom: 1px dotted rgba(203, 163, 88, 0.34);
    font-family: var(--font-label);
    font-size: 0.68rem;
    font-weight: 800;
    letter-spacing: 0.16em;
    text-decoration: none;
  }


  .l-site-footer__copyright {
    color: rgba(255, 250, 240, 0.34);
    font-size: 0.66rem;
    line-height: 1.72;
    letter-spacing: 0.035em;
  }

  .l-site-footer__bottom::before {
    content: "HOKKAIDO / NIIKAPPU";
    display: block;
    order: -1;
    color: rgba(255, 250, 240, 0.26);
    font-family: var(--font-label);
    font-size: 0.58rem;
    font-weight: 800;
    line-height: 1;
    letter-spacing: 0.2em;
  }
}

@media (min-width: 431px) and (max-width: 767px) {
  .l-site-footer__inner {
    width: min(100%, 620px);
  }

  .l-site-footer__nav-list:not(.l-site-footer__nav-list--support) {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    column-gap: 20px;
  }

  .l-site-footer__nav-list:not(.l-site-footer__nav-list--support) > li:nth-child(odd)::after {
    right: 4px;
  }

  .l-site-footer__nav-list:not(.l-site-footer__nav-list--support) > li:nth-child(even)::after {
    left: 4px;
  }
}

@media (max-width: 374px) {
  .l-site-footer__inner {
    padding-right: max(22px, env(safe-area-inset-right));
    padding-left: max(22px, env(safe-area-inset-left));
  }

  .l-site-footer__nav-link,
  .l-site-footer__contact-link {
    grid-template-columns: 30px minmax(0, 1fr) 16px;
    column-gap: 8px;
    font-size: 0.86rem;
  }
}

/* Smartphone footer: navigation arrows and responsive columns */

@media (max-width: 767px) {
  .l-site-footer__contact-arrow,
  .l-site-footer__page-top-arrow,
  .l-site-footer__nav-arrow,
  .l-site-footer__link-arrow,
  .l-site-footer__contact-link > [aria-hidden="true"],
  .l-site-footer__page-top > [aria-hidden="true"] {
    display: none !important;
  }

  .l-site-footer__nav-list--support .l-site-footer__nav-link,
  .l-site-footer__nav-list--support .l-site-footer__contact-link {
    grid-template-columns: minmax(0, 1fr) 18px !important;
    align-items: center !important;
  }

  .l-site-footer__contact-link::after {
    content: "↗" !important;
    grid-column: 2;
    justify-self: end;
    align-self: center;
    color: rgba(203, 163, 88, 0.62);
    font-family: var(--font-label);
    font-size: 0.84rem;
    line-height: 1;
  }

  .l-site-footer__page-top {
    display: inline-flex !important;
    align-items: center !important;
    gap: 10px;
  }

  .l-site-footer__page-top::after {
    content: "↑" !important;
    margin-left: 0 !important;
    color: rgba(203, 163, 88, 0.78);
    font-family: var(--font-label);
    line-height: 1;
  }
}

@media (min-width: 390px) and (max-width: 767px) {
  .l-site-footer__nav-list:not(.l-site-footer__nav-list--support) {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    column-gap: 20px;
  }

  .l-site-footer__nav-list:not(.l-site-footer__nav-list--support) > li:nth-child(odd)::after {
    right: 4px;
  }

  .l-site-footer__nav-list:not(.l-site-footer__nav-list--support) > li:nth-child(even)::after {
    left: 4px;
  }

  .l-site-footer__nav-link,
  .l-site-footer__contact-link {
    min-height: 44px;
  }
}

@media (max-width: 389px) {
  .l-site-footer__nav-list:not(.l-site-footer__nav-list--support) {
    grid-template-columns: 1fr !important;
  }
}

/* --------------------------------------------------------------------------
   18. Official logo assets
   --------------------------------------------------------------------------
   Header uses the wolf mark; footer uses the full white logo.
   -------------------------------------------------------------------------- */

/* Overlay-only header fragments should never appear in the desktop rail. */
@media (min-width: 768px) {
  .l-site-header__nav-head,
  .l-site-header__nav-kicker,
  .l-site-header__nav-actions,
  .l-site-header__nav-location {
    display: none !important;
  }
}

/* Header official wolf mark */
.l-site-header__brand {
  align-items: center;
}

.l-site-header__logo-mark {
  place-items: center;
}

.l-site-header__logo-mark-img {
  display: block;
  width: auto;
  max-width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: center;
}

.l-site-header__logo-mark-img--light {
  display: none;
  filter: drop-shadow(0 2px 8px rgba(0, 0, 0, 0.25));
}

.l-site-header__logo-mark-img--dark {
  display: block;
  filter: drop-shadow(0 2px 8px rgba(21, 39, 61, 0.08));
}

/* Dark visual sections use the white wolf mark. */
body[data-active-section="sec01"] .l-site-header__logo-mark-img--dark,
body[data-active-section="sec04"] .l-site-header__logo-mark-img--dark,
body[data-active-section="sec09"] .l-site-header__logo-mark-img--dark,
body.is-menu-open .l-site-header__logo-mark-img--dark,
html.is-menu-open .l-site-header__logo-mark-img--dark {
  display: none;
}

body[data-active-section="sec01"] .l-site-header__logo-mark-img--light,
body[data-active-section="sec04"] .l-site-header__logo-mark-img--light,
body[data-active-section="sec09"] .l-site-header__logo-mark-img--light,
body.is-menu-open .l-site-header__logo-mark-img--light,
html.is-menu-open .l-site-header__logo-mark-img--light {
  display: block;
}

/* Footer official full logo */


.l-site-footer__logo-img {
  display: block;
  width: 100%;
  height: auto;
  object-fit: contain;
  object-position: left center;
}

.l-site-footer__logo-img--white {
  display: block;
  filter: drop-shadow(0 9px 18px rgba(0, 0, 0, 0.18));
}

.l-site-footer__logo-img--black {
  display: none;
}

/* Menu overlay optional logo head, kept compact if re-enabled later. */
.l-site-header__nav-head-logo {
  display: block;
  width: auto;
  height: 100%;
  object-fit: contain;
}

/* Desktop / tablet logo sizing */

@media (min-width: 1280px) {
  .l-site-header__logo-mark {
    width: 46px;
    height: 58px;
  }
}

/* Smartphone header logo sizing */
@media (max-width: 767px) {

  .l-site-header__brand {
    gap: 10px;
  }

  .l-site-header__brand-text {
    max-width: calc(100vw - 136px);
  }


  body.is-menu-open .l-site-header__brand,
  html.is-menu-open .l-site-header__brand {
    gap: 9px;
  }

}

@media (max-width: 389px) {


  .l-site-header__brand-text {
    max-width: calc(100vw - 132px);
  }

}


/* Official logo containment and fail-safe sizing */

/* Header: contain official wolf mark */
.l-site-header__brand {
  min-width: 0 !important;
  overflow: hidden !important;
}

.l-site-header__logo-mark {
  position: relative !important;
  display: inline-flex !important;
  flex: 0 0 auto !important;
  align-items: center !important;
  justify-content: center !important;
  width: 42px !important;
  height: 52px !important;
  max-width: 42px !important;
  max-height: 52px !important;
  overflow: hidden !important;
  line-height: 0 !important;
}

.l-site-header__logo-mark-img,
.l-site-header__logo-mark > img,
.l-site-header__brand img[src*="logo_zno_mark"] {
  position: absolute !important;
  inset: 0 !important;
  display: block !important;
  width: 100% !important;
  height: 100% !important;
  max-width: 100% !important;
  max-height: 100% !important;
  min-width: 0 !important;
  min-height: 0 !important;
  object-fit: contain !important;
  object-position: center center !important;
}

/* Fail-safe: no official mark image inside header may exceed this box. */
.l-site-header img[src*="logo_zno_mark"] {
  max-width: 52px !important;
  max-height: 62px !important;
}

/* Header mark color switching */
.l-site-header__logo-mark-img--light,
.l-site-header img[src*="logo_zno_mark_white"] {
  display: none !important;
}

.l-site-header__logo-mark-img--dark,
.l-site-header img[src*="logo_zno_mark_black"] {
  display: block !important;
}

body[data-active-section="sec01"] .l-site-header__logo-mark-img--dark,
body[data-active-section="sec04"] .l-site-header__logo-mark-img--dark,
body[data-active-section="sec09"] .l-site-header__logo-mark-img--dark,
body.is-menu-open .l-site-header__logo-mark-img--dark,
html.is-menu-open .l-site-header__logo-mark-img--dark,
body[data-active-section="sec01"] .l-site-header img[src*="logo_zno_mark_black"],
body[data-active-section="sec04"] .l-site-header img[src*="logo_zno_mark_black"],
body[data-active-section="sec09"] .l-site-header img[src*="logo_zno_mark_black"],
body.is-menu-open .l-site-header img[src*="logo_zno_mark_black"],
html.is-menu-open .l-site-header img[src*="logo_zno_mark_black"] {
  display: none !important;
}

body[data-active-section="sec01"] .l-site-header__logo-mark-img--light,
body[data-active-section="sec04"] .l-site-header__logo-mark-img--light,
body[data-active-section="sec09"] .l-site-header__logo-mark-img--light,
body.is-menu-open .l-site-header__logo-mark-img--light,
html.is-menu-open .l-site-header__logo-mark-img--light,
body[data-active-section="sec01"] .l-site-header img[src*="logo_zno_mark_white"],
body[data-active-section="sec04"] .l-site-header img[src*="logo_zno_mark_white"],
body[data-active-section="sec09"] .l-site-header img[src*="logo_zno_mark_white"],
body.is-menu-open .l-site-header img[src*="logo_zno_mark_white"],
html.is-menu-open .l-site-header img[src*="logo_zno_mark_white"] {
  display: block !important;
}

/* Keep header rail compact even if an image fails. */
.l-site-header__brand-text {
  min-width: 0 !important;
  overflow: hidden !important;
}

/* Footer: contain official full logo */
.l-site-footer__brand-link {
  display: inline-flex !important;
  align-items: flex-start !important;
  width: fit-content !important;
  max-width: 100% !important;
  overflow: visible !important;
}

.l-site-footer__logo {
  display: block !important;
  width: min(180px, 50vw) !important;
  max-width: min(180px, 50vw) !important;
  height: auto !important;
  max-height: none !important;
  overflow: hidden !important;
  line-height: 0 !important;
}

.l-site-footer__logo-img,
.l-site-footer__logo > img,
.l-site-footer img[src*="logo_zno_full"] {
  width: 100% !important;
  height: auto !important;
  max-width: 100% !important;
  max-height: none !important;
  min-width: 0 !important;
  min-height: 0 !important;
  object-fit: contain !important;
  object-position: left top !important;
}

.l-site-footer__logo-img--white,
.l-site-footer img[src*="logo_zno_full_white"] {
  display: block !important;
}

.l-site-footer__logo-img--black,
.l-site-footer img[src*="logo_zno_full_black"] {
  display: none !important;
}

/* Desktop / tablet sizing */
@media (min-width: 768px) {
  .l-site-header__logo-mark {
    width: 44px !important;
    height: 56px !important;
    max-width: 44px !important;
    max-height: 56px !important;
  }

  .l-site-header img[src*="logo_zno_mark"] {
    max-width: 56px !important;
    max-height: 68px !important;
  }

  .l-site-footer__logo {
    width: clamp(185px, 14vw, 235px) !important;
    max-width: clamp(185px, 14vw, 235px) !important;
  }
}

/* Smartphone sizing */
@media (max-width: 767px) {
  .l-site-header__logo-mark {
    width: clamp(30px, 8.6vw, 36px) !important;
    height: clamp(38px, 11vw, 44px) !important;
    max-width: clamp(30px, 8.6vw, 36px) !important;
    max-height: clamp(38px, 11vw, 44px) !important;
  }

  .l-site-header img[src*="logo_zno_mark"] {
    max-width: 42px !important;
    max-height: 50px !important;
  }



  /* If the older pseudo brand mark still exists, hide it once official logo is used. */
  .l-site-header__brand-mark,
  .l-site-footer__brand-mark {
    display: none !important;
  }
}

@media (max-width: 389px) {
  .l-site-header__logo-mark {
    width: 30px !important;
    height: 38px !important;
    max-width: 30px !important;
    max-height: 38px !important;
  }


}


/* Smartphone footer brand centering */

@media (max-width: 767px) {
  .l-site-footer__brand {
    display: grid !important;
    justify-items: center !important;
    text-align: center !important;
  }

  .l-site-footer__brand-link {
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
    width: 100% !important;
    max-width: 100% !important;
    margin-inline: auto !important;
    text-align: center !important;
  }

  .l-site-footer__logo {
    width: clamp(150px, 40vw, 176px) !important;
    max-width: 176px !important;
    margin-inline: auto !important;
  }

  .l-site-footer__logo-img,
  .l-site-footer__logo > img,
  .l-site-footer img[src*="logo_zno_full"] {
    object-position: center top !important;
  }

  .l-site-footer__sub,
  .l-site-footer__description,
  .l-site-footer__notice {
    margin-right: auto !important;
    margin-left: auto !important;
    text-align: center !important;
  }


  .l-site-footer__nav {
    width: 100%;
    text-align: left !important;
    justify-items: stretch !important;
  }

  .l-site-footer__nav-heading,
  .l-site-footer__nav-link,
  .l-site-footer__contact-link,
  .l-site-footer__bottom {
    text-align: left !important;
  }
}

@media (max-width: 389px) {
  .l-site-footer__logo {
    width: clamp(142px, 43vw, 160px) !important;
    max-width: 160px !important;
  }

  .l-site-footer__sub {
    max-width: 25ch;
  }

  .l-site-footer__description,
  .l-site-footer__notice {
    max-width: 30ch;
  }
}

/* Smartphone footer subcopy and description sizing */

@media (max-width: 767px) {
  .l-site-footer__sub {
    max-width: none !important;
    width: 100% !important;
    white-space: nowrap !important;
    text-align: center !important;
    font-size: clamp(0.76rem, 3.22vw, 0.88rem) !important;
    line-height: 1.62 !important;
    letter-spacing: 0.045em !important;
  }

  .l-site-footer__description {
    margin-top: 12px !important;
    line-height: 1.82 !important;
  }

  .l-site-footer__notice {
    max-width: 34ch !important;
    margin-right: auto !important;
    margin-left: auto !important;
    text-align: center !important;
  }
}

@media (max-width: 389px) {
  .l-site-footer__sub {
    font-size: 0.74rem !important;
    letter-spacing: 0.03em !important;
  }
}

@media (max-width: 350px) {
  .l-site-footer__sub {
    font-size: 0.7rem !important;
    letter-spacing: 0.015em !important;
  }
}

/* Footer description line control */

.l-site-footer__description-line {
  display: block;
}

@media (max-width: 767px) {
  .l-site-footer__description {
    display: grid !important;
    justify-items: center !important;
    gap: 3px !important;
    max-width: none !important;
    margin-right: auto !important;
    margin-left: auto !important;
    text-align: center !important;
  }

  .l-site-footer__description-line {
    display: block !important;
    white-space: nowrap !important;
  }

  .l-site-footer__description-line:nth-child(1) {
    letter-spacing: 0.035em;
  }

  .l-site-footer__description-line:nth-child(2) {
    letter-spacing: 0.04em;
  }
}

@media (max-width: 389px) {
  .l-site-footer__description {
    font-size: 0.74rem !important;
  }

  .l-site-footer__description-line:nth-child(1),
  .l-site-footer__description-line:nth-child(2) {
    letter-spacing: 0.025em;
  }
}

@media (max-width: 350px) {
  .l-site-footer__description {
    font-size: 0.7rem !important;
  }

  .l-site-footer__description-line:nth-child(1),
  .l-site-footer__description-line:nth-child(2) {
    letter-spacing: 0.01em;
  }
}

/* --------------------------------------------------------------------------
   Phase 5: shared Japanese line-breaking foundation
   Moved from typography-final.css; :where() keeps zero specificity.
   -------------------------------------------------------------------------- */
/* --------------------------------------------------------------------------
   01. Japanese line-breaking foundation
   -------------------------------------------------------------------------- */

:where(main h1, main h2, main h3, main h4, main h5) {
  line-break: strict;
  word-break: normal;
  overflow-wrap: normal;
  text-wrap: balance;
}

:where(main p, main li, main dt, main dd) {
  line-break: strict;
  word-break: normal;
  overflow-wrap: break-word;
  text-wrap: pretty;
}

/* Phrase-aware wrapping is progressive enhancement for supporting engines. */
@supports (word-break: auto-phrase) {
  :where(main h1, main h2, main h3, main h4, main h5, main p, main li, main dt, main dd) {
    word-break: auto-phrase;
    overflow-wrap: normal;
  }
}

/* A deliberate <br> is an art-directed phrase boundary. */
:where(main h1, main h2, main h3, main h4, main h5):has(br) {
  white-space: nowrap !important;
  text-wrap: nowrap !important;
}

/* --------------------------------------------------------------------------
   Phase 5: footer typography ownership
   Moved from the layout inline <style>; visual values are unchanged.
   -------------------------------------------------------------------------- */
@media (max-width: 767px) {
  .l-site-footer__inner {
    padding-inline: clamp(1.5rem, 6.4vw, 2rem);
  }

  .l-site-footer__nav-list--primary {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    column-gap: clamp(1rem, 4.5vw, 1.75rem);
    row-gap: 0;
    width: 100%;
  }

  .l-site-footer__nav-list--primary .l-site-footer__nav-item {
    min-width: 0;
    min-height: 4.5rem;
    display: flex;
    align-items: stretch;
  }

  .l-site-footer__nav-list--primary .l-site-footer__nav-link {
    width: 100%;
    min-width: 0;
    display: flex;
    align-items: center;
    padding-block: 1rem;
    font-size: clamp(1rem, 4.2vw, 1.16rem);
    line-height: 1.35;
  }

  .l-site-footer__nav-list--primary .l-site-footer__nav-link > span {
    min-width: 0;
    white-space: nowrap;
    word-break: keep-all;
    overflow-wrap: normal;
  }

  .l-site-footer__copyright {
    max-width: 100%;
    line-height: 1.7;
  }

  .l-site-footer__copyright small {
    display: block;
    overflow-wrap: normal;
    word-break: normal;
  }
}

@media (max-width: 359px) {
  .l-site-footer__nav-list--primary {
    grid-template-columns: 1fr;
  }

  .l-site-footer__nav-list--primary .l-site-footer__nav-item {
    min-height: 4rem;
  }
}