/* ============================================================
   v3 base — body, nav, mobile menu, footer (sub pages only).
============================================================ */

body {
  font-family: var(--font-jp), var(--font-en);
  font-size: var(--fs-base);
  color: var(--ink);
  background: var(--paper);
}

/* Top page locks horizontal scroll; vertical scroll drives the show. */
body.page-top { overflow-x: hidden; }

a { color: inherit; }

/* ============================================================
   Top header
============================================================ */
.site-nav {
  position: fixed; top: 0; left: 0; right: 0;
  height: var(--header-h);
  padding: 0 var(--gutter);
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--space-4);
  z-index: 90;
  background: transparent;
  pointer-events: none;
  /* Calm muted slate-blue, sits with the editorial palette and reads
     on every section bg (mustard / sage / coral / cream / stone /
     rose). Single source of truth in --brand-blue. */
  color: var(--brand-blue);
  opacity: 0;
  transition: opacity 600ms var(--ease-out) 300ms;
}
.site-nav.is-ready { opacity: 1; }
.site-nav > * { pointer-events: auto; }

/* Top-left wordmark logo removed per client (the brand symbol carries
   the identity instead). */
.site-nav__brand { display: none; }
.site-nav__list {
  display: flex; gap: clamp(16px, 2.4vw, 36px);
  font-family: var(--font-en);
  font-size: var(--fs-sm);
  letter-spacing: 0.16em;
  text-transform: uppercase;
}
.site-nav__link {
  padding: 6px 2px;
  opacity: 0.95;
  transition: opacity var(--dur-fast) var(--ease-out);
}
.site-nav__link:hover { opacity: 1; }

.site-nav__hamburger {
  display: none;
  width: 36px; height: 36px;
  position: relative;
  color: inherit;
}
.site-nav__hamburger span {
  position: absolute; left: 8px; right: 8px;
  height: 1.5px;
  background: currentColor;
}
.site-nav__hamburger span:nth-child(1) { top: 12px; }
.site-nav__hamburger span:nth-child(2) { top: 50%; transform: translateY(-50%); }
.site-nav__hamburger span:nth-child(3) { bottom: 12px; }

@media (max-width: 880px) {
  .site-nav__list { display: none; }
  .site-nav__hamburger { display: block; }
}

/* ============================================================
   Book spine — fixed vertical bar on the far left, like the spine
   of a book. Carries the brand title (vertical) and the menu
   (hamburger → mobile-menu overlay). Injected by main.js.
   ============================================================ */
:root { --spine-w: clamp(40px, 3.6vw, 52px); }

.book-spine {
  position: fixed;
  top: 0; left: 0; bottom: 0;
  width: var(--spine-w);
  z-index: 95;
  background: var(--brand-blue);
  color: var(--paper);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-between;
  padding: clamp(14px, 2vh, 22px) 0;
}
/* spine hamburger (menu) — only on mobile; desktop uses the 目次 */
.book-spine__menu {
  position: relative;
  width: 22px; height: 15px;
  background: none; border: 0; padding: 0; cursor: pointer;
  flex: 0 0 auto;
  display: none;
}
.book-spine__menu span {
  position: absolute; left: 0; right: 0; height: 1.5px;
  background: var(--paper);
  transition: opacity 0.3s ease;
}
.book-spine__menu span:nth-child(1) { top: 0; }
.book-spine__menu span:nth-child(2) { top: 50%; transform: translateY(-50%); }
.book-spine__menu span:nth-child(3) { bottom: 0; }
.book-spine__menu:hover span { opacity: 0.75; }

/* Vertical logo lockup — the company logo runs down the spine like a
   book-spine title (replaces the old "THE 404" text + tagline).
   The TITLE box is centred on the spine and rotated 90° as a whole; the
   logo image inside stays a normal horizontal image (robust sizing). */
.book-spine__title {
  --logo-h: clamp(11px, 1.2vw, 17px);       /* on-spine thickness */
  position: absolute;
  top: 50%;
  left: 50%;
  height: var(--logo-h);
  width: calc(var(--logo-h) * 6.71);        /* run length = thickness × logo aspect */
  transform: translate(-50%, -50%) rotate(90deg);
  transform-origin: center center;
  /* Draw the logo as a background image — avoids <img> intrinsic-sizing /
     reset quirks that were squashing it. */
  background: url("../img/logo-white-lg.png") center / contain no-repeat;
  text-decoration: none;
}
.book-spine__logo { display: none; }        /* markup kept for alt; drawn via bg */
.book-spine__foot {
  writing-mode: vertical-rl;
  font-family: var(--font-display);
  font-style: italic;
  font-size: 13px;
  letter-spacing: 0.1em;
  opacity: 0.6;
  flex: 0 0 auto;
}

/* Top nav sits to the RIGHT of the spine; the menu now lives on the
   spine, so the top horizontal links + hamburger are hidden. */
.site-nav { left: var(--spine-w); }
.site-nav__list { display: none; }
.site-nav__hamburger { display: none; }

/* Sub-pages: shift normal-flow content clear of the spine. */
body.page-sub { padding-left: var(--spine-w); }

/* ============================================================
   Index menu — right-aligned, horizontal English labels stacked
   vertically, like a refined editorial contents list. Injected by
   main.js. Hidden on mobile (spine hamburger takes over there).
   ============================================================ */
.book-toc {
  position: fixed;
  top: clamp(22px, 3.6vh, 40px);
  right: clamp(20px, 2.8vw, 42px);
  z-index: 95;
  display: flex;
  flex-direction: column;
  align-items: flex-end;                 /* right-aligned */
  gap: clamp(9px, 1.1vh, 13px);
  text-align: right;
}
/* "Index" heading — italic display serif with a hairline rule */
.book-toc__head {
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 400;
  font-size: clamp(17px, 1.7vw, 22px);
  letter-spacing: 0.04em;
  line-height: 1;
  color: var(--brand-blue);
  padding-bottom: 9px;
  margin-bottom: 4px;
  border-bottom: 1px solid rgba(60, 86, 112, 0.30);
}
/* Each entry: a small italic index number + an uppercase label */
.book-toc__link {
  position: relative;
  display: inline-flex;
  align-items: baseline;
  gap: 0.62em;
  text-decoration: none;
  line-height: 1;
  color: var(--ink);
  opacity: 0.68;
  transition: color 0.25s ease, opacity 0.25s ease;
}
.book-toc__n {
  font-family: var(--font-display);
  font-style: italic;
  font-size: clamp(10px, 0.95vw, 12.5px);
  color: currentColor;
  opacity: 0.55;
  font-variant-numeric: tabular-nums;
}
.book-toc__t {
  font-family: var(--font-display);   /* book-like display serif */
  font-size: clamp(13px, 1.25vw, 16.5px);
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}
/* Animated lead-in rule to the left of each entry */
.book-toc__link::before {
  content: "";
  position: absolute;
  top: 50%;
  right: calc(100% + 10px);
  width: 0;
  height: 1px;
  background: var(--brand-blue);
  transform: translateY(-50%);
  transition: width 0.28s cubic-bezier(0.22, 1, 0.36, 1);
}
.book-toc__link:hover,
.book-toc__link:focus-visible { opacity: 1; color: var(--brand-blue); }
.book-toc__link:hover::before,
.book-toc__link:focus-visible::before { width: 14px; }
/* Active (current section / page) — brand blue + a longer lead rule */
.book-toc__link.is-current { opacity: 1; color: var(--brand-blue); }
.book-toc__link.is-current .book-toc__n { opacity: 1; }
.book-toc__link.is-current::before { width: 22px; }

@media (max-width: 880px) {
  .book-toc { display: none; }          /* mobile → spine hamburger */
  .book-spine__menu { display: block; }
}

/* ============================================================
   Brand symbol — sits bottom-left (where the mascot was). On the TOP
   page it swaps per section (hero = monochrome black, others = master);
   on sub-pages it shows the master mark. Injected by main.js.
   ============================================================ */
.brand-symbol {
  position: fixed;
  left: calc(var(--spine-w) + var(--gutter));
  bottom: clamp(20px, 4vh, 44px);
  width: clamp(104px, 11vw, 148px);
  height: clamp(104px, 11vw, 148px);
  z-index: 2;
  pointer-events: none;
  user-select: none;
}
/* Two stacked marks that cross-fade between sections for a natural swap */
.brand-symbol img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
  transition: opacity 0.7s ease;
}
.brand-symbol__mono   { opacity: 0; }   /* shown on hero only */
.brand-symbol__master { opacity: 1; }   /* shown on every other section */
.brand-symbol.is-hero .brand-symbol__mono   { opacity: 1; }
.brand-symbol.is-hero .brand-symbol__master { opacity: 0; }
@media (max-width: 880px) {
  /* Mobile: symbol moves to the TOP-left and shrinks; the page-number
     folio is hidden — so the bottom only holds the 付箋 dock (no overlap). */
  .brand-symbol {
    top: clamp(12px, 2.2vh, 22px);
    bottom: auto;
    left: calc(var(--spine-w) + 4px);
    width: 72px; height: 72px;
  }
  .book-folio { display: none; }
}

/* ============================================================
   Folio — a book-style page / section number, bottom-right.
   On the TOP page it updates to the current section as you turn
   the pages; on sub-pages it shows that page's number. Injected
   by main.js.
   ============================================================ */
.book-folio {
  position: fixed;
  right: clamp(18px, 2.8vw, 42px);
  bottom: clamp(16px, 2.4vh, 30px);
  z-index: 94;
  pointer-events: none;
  font-family: var(--font-display);
  font-style: italic;
  font-size: clamp(14px, 1.4vw, 18px);
  letter-spacing: 0.12em;
  line-height: 1;
  color: var(--ink);
  opacity: 0.66;
  font-variant-numeric: tabular-nums;
}
.book-folio__cur { color: var(--brand-blue); }
.book-folio__sep,
.book-folio__tot { opacity: 0.7; }

/* ============================================================
   Mobile fullscreen menu (outside of mix-blend-mode stack)
============================================================ */
.mobile-menu {
  position: fixed; inset: 0;
  background: var(--ink);
  color: var(--paper);
  z-index: 130;
  display: flex; align-items: center; justify-content: center;
  opacity: 0;
  visibility: hidden;
  transition: opacity 400ms var(--ease-out), visibility 0s linear 400ms;
}
.mobile-menu.is-open {
  opacity: 1;
  visibility: visible;
  transition: opacity 400ms var(--ease-out), visibility 0s;
}
.mobile-menu__close {
  position: absolute;
  top: clamp(16px, 3vw, 28px);
  right: clamp(20px, 5vw, 40px);
  width: 44px; height: 44px;
  font-size: 32px;
  line-height: 1;
  color: var(--paper);
  font-family: var(--font-en);
}
.mobile-menu__list {
  display: flex; flex-direction: column;
  gap: clamp(20px, 3.5vw, 40px);
  text-align: center;
}
.mobile-menu__link {
  font-family: var(--font-display);
  font-size: clamp(32px, 8vw, 56px);
  font-style: italic;
  letter-spacing: 0.02em;
}
.mobile-menu__link:hover,
.mobile-menu__link[aria-current="true"] { color: var(--sec-mustard); }
body.menu-open { overflow: hidden; }

/* ============================================================
   Sub-page footer
============================================================ */
.site-footer {
  background: var(--ink);
  color: var(--paper);
  padding: var(--space-7) var(--gutter) var(--space-4);
}
.site-footer__inner {
  max-width: var(--maxw);
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1.2fr 2fr;
  gap: var(--space-6);
}
.site-footer__brand {
  display: flex; flex-direction: column;
  gap: var(--space-3);
}
.site-footer__logo { width: clamp(150px, 18vw, 220px); height: auto; }
.site-footer__tagline {
  font-family: var(--font-display);
  font-style: italic;
  font-size: var(--fs-lg);
  color: var(--sec-mustard);
}
.site-footer__cols {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-4);
}
.site-footer__head {
  font-family: var(--font-en);
  font-size: var(--fs-xs);
  letter-spacing: 0.2em;
  text-transform: uppercase;
  opacity: 0.5;
  margin-bottom: var(--space-3);
}
.site-footer__links {
  display: flex; flex-direction: column;
  gap: var(--space-2);
  font-size: var(--fs-sm);
}
.site-footer__links a { opacity: 0.85; transition: opacity var(--dur-fast); }
.site-footer__links a:hover { opacity: 1; }
.site-footer__addr {
  font-style: normal;
  font-size: var(--fs-sm);
  line-height: 1.9;
  opacity: 0.7;
}
.site-footer__bottom {
  max-width: var(--maxw);
  margin: var(--space-6) auto 0;
  padding-top: var(--space-3);
  border-top: 1px solid rgba(255,255,255,0.14);
  display: flex; justify-content: space-between;
  font-size: var(--fs-xs);
  opacity: 0.6;
  letter-spacing: 0.1em;
}
@media (max-width: 880px) {
  .site-footer__inner { grid-template-columns: 1fr; }
  .site-footer__cols { grid-template-columns: 1fr 1fr; }
  .site-footer__bottom { flex-direction: column; gap: var(--space-2); }
}

/* ============================================================
   Page-transition overlay
   A dark panel slides up from below to cover the viewport,
   then the browser navigates. On the destination page the
   panel begins at "covered" and slides up off-screen to
   reveal the new content. Managed by page-transition.js.
   ============================================================ */
.page-transition {
  position: fixed;
  inset: 0;
  z-index: 9998;
  /* Cover = the spine (帯) colour (--brand-blue: navy / black). */
  background: var(--brand-blue);
  transform: translateY(100%);
  pointer-events: none;
  will-change: transform;
  transition: transform 0.55s cubic-bezier(0.76, 0, 0.24, 1);
  /* Centre the chapter mark inside the paper cover */
  display: flex;
  align-items: center;
  justify-content: center;
}
/* Refined chapter mark — a small italic "404" in the brand blue with
   thin flanking rules, like a chapter divider on a fresh page. Quiet
   and tonal so it reads as a page-marker, not a billboard. */
/* The cover shows the company logo as a VERY faint watermark (replaces
   the old "404" text). Done purely in CSS — the literal "404" text is
   collapsed and the logo is drawn as a centered background image, so no
   per-page markup change is needed. */
.page-transition__mark {
  display: block;
  width: clamp(150px, 28vw, 340px);
  height: clamp(34px, 5vw, 60px);
  font-size: 0;              /* hide the literal "404" text */
  color: transparent;
  /* White logo on the dark cover, kept very faint. */
  background: url("../img/logo-white-lg.png") center / contain no-repeat;
  opacity: 0.1;              /* すごく薄め */
  user-select: none;
  pointer-events: none;
}
.page-transition__mark::before,
.page-transition__mark::after { display: none; }
/* INBOUND first paint — `pt-incoming` is added by the inline head
   script BEFORE the body is rendered (when arriving from another
   page). This positions the overlay already covering the viewport
   on frame 1, so the user never sees a flash of the new page
   underneath. page-transition.js then triggers the slide-off. */
html.pt-incoming .page-transition {
  transform: translateY(0);
  transition: none;
}
.page-transition.is-entering {
  /* Outbound — slides up from below to fully cover the viewport */
  transform: translateY(0);
}
.page-transition.is-leaving {
  /* On arrival, slides up off-screen revealing the new page */
  transform: translateY(-100%);
  transition: transform 0.6s cubic-bezier(0.4, 0, 0.2, 1);
}
@media (prefers-reduced-motion: reduce) {
  .page-transition { display: none; }
}

/* Client meeting: remove the "404" at the foot of the spine. */
.book-spine__foot { display: none; }

/* Black version — the brand symbol sits TOP-LEFT on desktop too (where
   the wordmark logo used to be). */
.brand-symbol { top: clamp(14px, 2.6vh, 28px); bottom: auto; }
/* ============================================================
   Sub-pages (下層ページ) — NO left spine bar. Use a normal top
   header (logo + menu) instead. The book chrome (spine / Index /
   folio) belongs to the TOP page only.
   ============================================================ */
body.page-sub .book-spine,
body.page-sub .book-toc,
body.page-sub .book-folio { display: none !important; }
body.page-sub { padding-left: 0; }
body.page-sub .site-nav { left: 0; background: var(--paper); }
body.page-sub .site-nav__brand {
  display: inline-block;
  width: clamp(112px, 13vw, 150px);
  height: clamp(18px, 2vw, 24px);
  background: url("../img/logo-black.png") left center / contain no-repeat;
}
body.page-sub .site-nav__brand img { display: none; }
body.page-sub .site-nav__list { display: flex; }
@media (max-width: 880px) {
  body.page-sub .site-nav__list { display: none; }
  body.page-sub .site-nav__hamburger { display: block; }
}