/* ============ Reset & base ============ */
* { box-sizing: border-box; margin: 0; padding: 0; }
html, body { background: #0a0a0a; color: #f4f4f4; font-family: var(--sans-text); -webkit-font-smoothing: antialiased; }
body { overflow-x: hidden; }
a { color: inherit; text-decoration: none; }
img { display: block; max-width: 100%; }

:root {
  --fg: #f4f4f4;
  --fg-mute: #999;
  --line: #2a2a2a;
  --accent: #ffdb1f;
  /* English: unified on Neue Haas Grotesk Text (alias the other latin vars to it).
     Japanese: keeps the original Shippori Mincho B1 serif on --serif. */
  --sans-text:    'neue-haas-grotesk-text', 'Inter', sans-serif;
  --sans-display: var(--sans-text);
  --mono:         var(--sans-text);
  --serif:        'Shippori Mincho B1', serif;
}

/* ============ HERO ============ */
/* Sticky so the next section slides up and covers it on scroll */
.hero {
  position: sticky;   /* stays put; News (z2, opaque) scrolls up over it → manifesto held centred, no void */
  top: 0;
  height: 100vh;
  width: 100%;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  z-index: 1;
}
/* Manifesto = FIRST block of the continuous flow over the sticky, dissolved-to-black hero (z1).
   It sits at z2 — the same layer as News/About/footer — so it scrolls WITH them instead of being
   pinned inside the hero and covered by News. Transparent bg → only the text rises over the black
   backdrop. margin-top = dissolve runway: keeps it below the fold until the astro is fully black. */
.intro-manifesto {
  position: relative; z-index: 2;
  display: flex; flex-direction: column; align-items: center;
  text-align: center;
  padding: 0 6vw;  /* reordered 2026-06-08: DREAMS now sits mid-page between two .sec-rule dividers (which own the gaps), no wave runway. The 30vh runway moved to .news-section (the new first block over the dissolve). */
  background: transparent;
}
.intro-manifesto .manifesto-title { margin: 0; }  /* DREAMS only; body text removed 2026-06-08, the 2rem gap it left is closed */

/* Section dividers (manifesto↔News, News↔About). Each one OWNS the full inter-section gap — all the
   former section paddings/margins that made these gaps are zeroed — so the two gaps are byte-for-byte
   identical and a hairline can sit at the EXACT vertical midpoint (top:50%). height = the former
   News→About gap (392px @16px root) so News→About is unchanged and manifesto→News grows to match it. */
.sec-rule {
  position: relative;
  z-index: 2;
  background: #0a0a0a;
  height: 24.5rem;
}
.sec-rule::before {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  width: min(1040px, 90vw);
  border-top: 1px solid var(--line);
}
/* DREAMS↔VISION divider only: hairline removed + gap shortened to 2/3 (24.5rem→16.33rem) per client 2026-06-08.
   Targets just the .sec-rule immediately after .intro-manifesto; the News↔DREAMS and in-About dividers are unchanged. */
.intro-manifesto + .sec-rule { height: calc(24.5rem * 2 / 3); }
.intro-manifesto + .sec-rule::before { display: none; }
.hero-bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: 0;
}

/* Hero top hairline — restored from the original v3 hero (it was the 3-tag row's border-bottom; tags omitted
   per request). Full-bleed line at the same y the tag-row line sat: top 24vh + that row's ~30px box. */
.hero-rule {
  position: absolute;
  top: calc(24vh + 30px);
  left: 0; right: 0;
  border-top: 1px solid rgba(200, 200, 200, 0.22);
  z-index: 5;
  pointer-events: none;
}

/* ===== Ink-dissolve transition: scroll covers the astro to black (fast), manifesto reveals on black.
   Lives inside the sticky .hero (z1); the menu/header (fixed, z80+) stay above it. ===== */
.home-dissolve { position: absolute; inset: 0; z-index: 50; pointer-events: none; }
.home-dissolve .cover-layer { position: absolute; inset: 0; z-index: 5; background: #0a0a0a;
  -webkit-mask: url(#coverMask); mask: url(#coverMask); }
.home-dissolve .edge-glitch { position: absolute; inset: 0; z-index: 6; filter: url(#sliceGlitch); }
.home-dissolve .grain-band { position: absolute; inset: 0; z-index: 6; background: #6c6a64; opacity: .7;
  -webkit-mask: url(#grainMask); mask: url(#grainMask); }
.home-dissolve .rim-glow { position: absolute; inset: 0; z-index: 7; background: #f2ecdd; opacity: .13;
  -webkit-mask: url(#rimGlowMask); mask: url(#rimGlowMask); mix-blend-mode: screen; }
.home-dissolve .rim-layer { position: absolute; inset: 0; z-index: 8; background: #f6f1e6;
  -webkit-mask: url(#rimMask); mask: url(#rimMask); }

/* Evolve-style 48-column vertical hairlines — fixed overlay covering the entire viewport. */
.grid-overlay {
  position: fixed;
  inset: 0;
  z-index: 90;
  pointer-events: none;
  background-image:
    linear-gradient(to right,
      rgba(200, 200, 200, 0.06) 1px,
      transparent 1px);
  background-size: calc(100vw / 48) 100%;
  background-repeat: repeat;
}

/* Horizontal section-boundary hairlines */
/* Hero is now a sticky black backdrop (no divider line) — the transparent manifesto sits over it. */
.works, .site-foot {
  border-bottom: 1px solid rgba(200, 200, 200, 0.22);
}

/* Site header = fixed top row, always visible on scroll. No border (the line lives below the 3-tag row, inside hero). */
.site-header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 80;
  display: grid;
  grid-template-columns: auto 1fr;  /* logo + title; the right block is positioned absolutely */
  align-items: start;
  gap: 2rem;
  padding: 1.4rem 2vw;
  font-family: var(--sans-text);
  font-size: 11px;
  font-weight: 400;
  letter-spacing: -0.04em;
  line-height: 1.45;
  pointer-events: none;
}
.site-header > *,
.site-header a,
.site-header button { pointer-events: auto; }
.brand {
  display: inline-flex;
  align-items: flex-start;
  transform: translateY(-5px);
  /* Tighten hover hit-area (and render) to the visible wordmark — the PNG has
     ~36% top / ~26% bottom transparent padding. clip-path also clips pointer
     events, so the transparent margins no longer trigger the glitch. Horizontal
     insets kept loose so the ~5px sideways glitch isn't clipped. */
  clip-path: inset(33% 5% 23% 5%);
}
.brand-logo { height: 60px; width: auto; display: block; filter: url(#logoGlitch); }

.header-block { color: var(--fg); }
.header-block a { color: var(--fg); border-bottom: 1px solid transparent; transition: border-color 0.2s; }
.header-block a:hover { border-color: var(--fg); }
.header-block--mid   { text-align: left; }
.header-block--right { position: absolute; top: 1.4rem; right: calc(2vw + 4rem); text-align: right; }  /* pinned top-right, nudged left to clear #lang-toggle in the corner; independent of the title's Flip */

.menu-btn {
  justify-self: end;
  background: transparent;
  border: 1px solid var(--fg);
  color: var(--fg);
  font-family: var(--sans-text);
  font-size: 11px;
  font-weight: 400;
  letter-spacing: -0.02em;
  padding: 0.35rem 0.9rem;
  cursor: pointer;
}
.menu-btn:hover { background: var(--fg); color: #0a0a0a; }

/* "=" menu-expansion mark — mobile only. Hidden on desktop (shown in the touch media query). */
.menu-toggle { display: none; }

/* ====== JP / EN language switch ====== */
.lang-toggle {
  display: flex; align-items: center; gap: 0.4em;
  font-family: var(--sans-text); font-size: 11px; font-weight: 400;
  letter-spacing: -0.04em; line-height: 1.45; color: var(--fg);
  user-select: none;
}
.lang-toggle button {
  background: transparent; border: 0; padding: 0; margin: 0;
  font: inherit; letter-spacing: inherit; color: inherit; cursor: pointer;
  opacity: 0.45;                                         /* the non-current language is dimmed */
  transition: opacity 0.2s, color 0.2s;
}
.lang-toggle button.is-active { opacity: 1; font-weight: 500; }   /* active = current state (bold) */
.lang-toggle button:hover { opacity: 1; color: var(--accent); }   /* hover = next action (yellow) — feedback_ui_hover_vs_active */
.lang-toggle .lang-sep { opacity: 0.35; }
/* desktop: pin the header switch to the very top-right corner (the right meta is nudged left to clear it).
   height = the 2-line meta's height (2 × 1.45em); with the flex align-items:center the JP/EN then sits at the
   meta's vertical midpoint (between the email line and the Tokyo line) instead of riding up on the first line. */
#lang-toggle { position: absolute; top: 1.4rem; right: 2vw; z-index: 1; height: 2.9em; }
/* the in-panel twin is mobile-only (revealed in the touch media query) */
.lang-toggle--menu { display: none; }

/* ====== Shopify "Editions" Winter '26 homage — intro block ======
   All numbers采寸 from the raw shopify.com/editions/winter2026 CSS (not the zoomed video):
   menu = headline-6 18px / lh .95 / -.02em / bold;  desc = narrative-3+text-17 17px SERIF / lh .97 / -.04em;
   legal = bodycopy-2 14px + text-10 10px;  motion = .6s cubic-bezier(.41,.19,.13,.95),
   slide stagger index×20ms, fade stagger index×75ms.  Start = right panel → End = title top-left + menu bottom-left. */
.edition {
  position: fixed;
  inset: 0;
  z-index: 96;   /* above .partners (z95) so the bottom-left menu stays in front of the badge cards (cards z95 > grid-overlay z90 > nothing; menu z96 on top) */
  pointer-events: none;
  color: var(--fg);
  font-family: var(--sans-text);
  opacity: 1;
  transition: opacity 0.5s ease 0.25s;   /* leaving HERO: the menu fades IN only after the title has cleared (delay) */
}
body.is-preloading .edition { opacity: 0; transition: none; }
.edition a { pointer-events: auto; color: inherit; text-decoration: none; }
.ed-animating .ed-item { pointer-events: none; }   /* hit-testing off mid-flight — items overlap and nobody clicks that fast */

.ed-frame {
  position: absolute;
  border: 1px solid rgba(244, 244, 244, 0.4);
  transition: opacity 0.6s ease;                      /* identical to .ed-desc → frame fades in lockstep with the centre copy */
}

/* Title = the existing site-header copy (.header-block--mid) — it keeps the header's exact font
   and grid coordinates. START pulls it into the panel (fixed; see .is-block #ed-title). */

.ed-desc {
  position: absolute;
  max-width: 300px;                                   /* max-w-300 = 18.75rem */
  margin: 0;
  font-family: Georgia, 'Times New Roman', serif;     /* narrative-3 = serif (HWCigars→Georgia) */
  font-size: 17px;                                    /* text-17 = 1.0625rem */
  line-height: 0.97;
  letter-spacing: -0.04em;
  color: var(--fg);
  transition: opacity 0.6s ease;                      /* fades IN PLACE — never moves (not a Flip target) */
}

.ed-menu { position: absolute; display: flex; flex-direction: column; }
.ed-item {
  display: flex;
  justify-content: space-between;                     /* label … roman numeral */
  align-items: flex-end;
  padding-block: 2px;                                 /* py-2 */
  font-size: 18px;                                    /* headline-6 */
  font-weight: 500;                                   /* Medium — one notch lighter than Bold (kit has 400/500/700) */
  line-height: 0.95;
  letter-spacing: -0.02em;
  transition: color 0.22s ease;
}
.ed-item:hover { color: var(--accent); }
/* KAGVYA navigation cut: fully inert — no click, no hover accent, no pointer cursor (not a 404, just unresponsive).
   Specificity (0,3,1) intentionally beats the touch rule `body.m-menu-open .edition a{pointer-events:auto}` (0,2,2),
   so it stays inert on mobile even while the hamburger panel is open. */
.edition a.ed-item.is-inert { pointer-events: none; }
.ed-item.is-inert:hover { color: inherit; }
.ed-num { font-weight: 400; opacity: 0.5; font-size: 0.66em; align-self: flex-start; }

.ed-legal { position: absolute; display: flex; flex-direction: column; align-items: flex-start; }
.ed-legal span { font-size: 14px; }                   /* bodycopy-2 */
.ed-legal a { font-size: 10px; margin-top: 4px; opacity: 0.65; }  /* text-10, mt-4 */
.ed-legal a:hover { opacity: 1; text-decoration: underline; }

/* ---- START state: small, tightly-packed centred panel (title / desc / menu, snug) ---- */
.is-block .ed-frame { top: 49vh; left: 43vw; width: 14vw; height: 38vh; opacity: 1; }   /* whole block dropped into the ENTERTAINMENT zone (centre ~68vh); internal spacing unchanged */
.is-block #ed-title { position: fixed; top: 52vh; left: 44vw; max-width: 14vw; font-size: 12px; opacity: 0; }   /* START: invisible (Flip fades it in 0→1 en route to the header); 12px → Flip restores 11px for END */
.is-block .ed-menu  { top: 72vh; left: 44vw; width: 12vw; }   /* origin of the menu's flight to END (invisible at START) */
.is-block .ed-item  { opacity: 0; }                           /* START: items invisible → Flip fades them in (0→1) as they fly to END */

/* ---- END state: title returns to its native header slot (right of logo); desc fades IN PLACE; menu → bottom-left ---- */
.is-spread .ed-frame { opacity: 0; }
/* #ed-title: no rule → falls back to its static header-grid position (its original coordinates) */
.is-spread .ed-desc  { top: 59vh; left: 44vw; opacity: 0; }   /* same coords as START → fades without moving */
.is-spread .ed-menu  { top: auto; bottom: 9vh; left: 4vw; width: 8rem; }   /* nudged right off the edge (Shopify keeps a margin too); narrow so labels↔numerals sit close = taller, leaner column */

/* ---- Intro (NO scroll-lock): the big ENTERTAINMENT title STAYS through the wave (raised above the
   dissolve via z-index, below). The menu + header tagline are invisible at START (opacity 0, see the
   .is-block rules above) and the Flip fades them in (0→1) as they travel to END on the first scroll;
   scrolling back to the top runs the same Flip in reverse so every element returns. ---- */
body.is-preloading #ed-title { opacity: 0; }                 /* keep the header tagline hidden through the preloader so it never flashes */

.hero-title {
  position: relative;
  z-index: 5;                                       /* BELOW the ink-dissolve (.home-dissolve z50): the rising black eats the title together with the astro — it exits naturally, no fade needed */
  margin-top: auto;                                 /* pushed toward Hero bottom */
  padding: 0 2vw 6vh;
  font-family: var(--sans-text);                    /* Evolve uses TEXT face, not Display */
  font-weight: 500;                                 /* true Medium — kit now includes 500 */
  font-size: clamp(3rem, 8vw, 9rem);                /* aligned with Evolve em-cascade (~5vw inner + parent) */
  line-height: 1;                                   /* Evolve filters__wrap line-height: 1 */
  letter-spacing: -0.04em;
  text-transform: uppercase;
  text-align: center;
}
.hero-title .line { display: block; overflow: hidden; }
.hero-title .line span { display: inline-block; transform: translateY(110%); opacity: 0; }
.hero-title.is-in .line span {
  transform: translateY(0);
  opacity: 1;
  transition:
    transform 0.95s cubic-bezier(0.2, 0.8, 0.2, 1),
    opacity 0.75s ease-out;
}
.hero-title.is-in .line:nth-child(2) span { transition-delay: 0.10s; }
.hero-title.is-in .line:nth-child(3) span { transition-delay: 0.20s; }

.hero-foot {
  position: relative;
  z-index: 5;
  /* NO margin-top:auto — the .hero-title's margin-top:auto pushes the whole bottom group down
     (two auto margins would split the free space and float the title to the middle). */
  display: flex;
  justify-content: space-between;
  padding: 1.2rem 1.5rem 1.2rem;
  font-family: var(--sans-text);
  font-size: 11px;
  font-weight: 400;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--fg-mute);
}

/* ============ SECTION COMMON ============ */
.section-title {
  display: grid;
  grid-template-columns: 1fr 2fr;
  gap: 2rem;
  align-items: center;                 /* center "— NEWS" with "LATEST UPDATES" vertically */
  padding-bottom: 1.5rem;
  margin-bottom: 1.5rem;
  border-bottom: 1px solid var(--line);
}
.section-title .num {
  font-family: var(--mono);
  font-size: 10.5px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--fg-mute);
}
.section-title h2, .section-title h3 {
  font-family: var(--sans-display);
  font-weight: 500;                    /* one notch lighter (was 700) */
  font-size: clamp(2rem, 6vw, 4.5rem);
  line-height: 1;
  letter-spacing: -0.02em;
  text-transform: uppercase;
}

/* Hide the "— MANIFESTO" label + its underline (kept only the title below) */
.manifesto > .section-title { display: none; }

/* News heading = a single left-aligned "NEWS" (a notch smaller than the old LATEST UPDATES),
   sitting above the list with a generous gap to the content. */
.news .section-title { display: block; border-bottom: none; padding-bottom: 0; max-width: 1040px; margin-inline: auto; margin-bottom: 2.9rem; }
.news .section-title h3 { font-size: clamp(1.6rem, 4.4vw, 3.3rem); }   /* one size down from LATEST UPDATES (was up to 4.5rem) */
.news-list { border-top: none; }
.section-title .section-lead {
  grid-column: 2;
  margin-top: 1rem;
  font-size: 13px;
  line-height: 1.7;
  color: var(--fg-mute);
  max-width: 480px;
}

/* ============ WORKS ============ */
.works {
  position: relative;
  z-index: 2;
  background: #0a0a0a;
  padding: 6rem 2vw 6rem;            /* top breathing room before the table */
}
.works-wrap {
  position: relative;                /* anchor for the hover image inside */
}
/* Sticky table head so column labels stay visible just below the fixed header (lifted up) */
.works-table .row-head {
  position: sticky;
  top: 4rem;
  background: #0a0a0a;
  z-index: 3;
}

/* Manifesto and footer also above the sticky Hero */
.manifesto, .site-foot {
  position: relative;
  z-index: 2;
  background: #0a0a0a;
}
.works-wrap {
  position: relative;
}
.works-table {
  position: relative;                /* containing block for the hover-stack inside */
}
.works-table .row {
  display: grid;
  grid-template-columns: 2fr 1.4fr 3fr 1fr 2fr;
  align-items: baseline;
  padding: 1.1rem 0.5rem;
  font-family: var(--sans-text);
  font-size: clamp(11px, 0.85vw, 13px);
  font-weight: 500;
  letter-spacing: -0.02em;
  cursor: pointer;
  transition: background 0.2s, color 0.2s;
}
.works-table .row-head {
  color: var(--fg-mute);
  cursor: default;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  font-size: 11px;
  padding-bottom: 2.5rem;            /* halved (was 5rem) */
}
.works-table .col-name { grid-column: 1; color: var(--fg); }
.works-table .col-cat  { grid-column: 2; color: var(--fg-mute); text-align: left; }
.works-table .col-idx  { grid-column: 4; color: var(--fg-mute); text-align: right; }
.works-table .col-meta { grid-column: 5; color: var(--fg-mute); text-align: right; padding-right: 0.5rem; }

/* Hovered row: a slim white bar (~32% of the row height) centered vertically — hugs the text tightly.
   Image stack on top still inverts where it overlaps the bar. */
.works-table a.row:hover {
  background-image: linear-gradient(
    to bottom,
    transparent 0%,
    transparent 34%,
    #ffffff 34%,
    #ffffff 66%,
    transparent 66%,
    transparent 100%
  );
  color: #0a0a0a;
}
.works-table a.row:hover .col-name,
.works-table a.row:hover .col-cat,
.works-table a.row:hover .col-meta { color: #0a0a0a; }
.works-table a.row:hover .col-idx  { color: var(--accent); }

/* Hover image stack — every hover appends a new <img>, all at the SAME position/size/angle.
   Each image runs its OWN scale 0→1 transition independently of the others. */
.hover-stack {
  position: absolute;
  top: 58%;                            /* nudged down from 50% so the image sits a touch lower */
  left: 50%;
  width: 30vw;
  max-width: 440px;
  aspect-ratio: 4/5;
  pointer-events: none;
  transform: translate(-50%, -50%);
  z-index: 5;
  /* Where the stack overlaps the white hover row, the difference blend inverts
     the row's white into the image's complement colour. Over the page's near-black
     background it's effectively a no-op so the image renders normally. */
  mix-blend-mode: difference;
}
.hover-stack img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transform: scale(0);
  transform-origin: center center;
  /* Fully opaque the entire time — overlapping layers never let the older one
     show through. Scale alone drives both bloom-in and scale-out. */
  transition: transform 0.72s cubic-bezier(0.4, 0, 0.6, 1);
  box-shadow: 0 30px 70px rgba(0, 0, 0, 0.6);
}
.hover-stack img.is-shown {
  transform: scale(1);
}

/* ============ MANIFESTO + NEWS ============ */
.manifesto {
  padding: 8rem 1.5rem;
}
.manifesto.news-section { padding: 30vh 1.5rem 0; }   /* reordered 2026-06-08: News is now the FIRST block over the dissolve → it carries the 30vh wave runway (lowers the NEWS heading into view as the astro finishes dissolving). bottom 0: the News→DREAMS gap is owned by the .sec-rule divider that follows. */
.manifesto-title {
  font-family: var(--sans-text);
  font-weight: 500;
  font-size: clamp(2.7rem, 9.7vw, 9.7rem);
  line-height: 0.82;
  letter-spacing: -0.025em;
  text-transform: uppercase;
  text-align: center;
  margin: 2rem 0;
}
.manifesto-title .line { display: block; }
.manifesto-title .line span { display: inline-block; }
/* Reveal = pure opacity fade, driven by scroll right after the ink-dissolve (see initHomeDissolve). */
/* .manifesto-jp / .manifesto-lead rules removed 2026-06-08 (body text deleted). Restorable: _restore-manifesto-text.html */

/* News */
.news {
  margin-top: 0;        /* manifesto→News gap now owned by the .sec-rule divider before this section */
  padding-top: 0;
}
.news-list {
  list-style: none;
  max-width: 1040px;         /* slightly wider block (was 960) */
  margin-inline: auto;
}
.news-row {
  display: grid;
  grid-template-columns: 120px 1fr auto;
  gap: 1.5rem;
  padding: 1.2rem 0.5rem;
  font-size: 13.5px;
  line-height: 1.6;
}
.news-date {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.08em;
  font-variant-numeric: tabular-nums;   /* fixed-width digits so the scramble/decode doesn't jitter the date */
  color: var(--fg-mute);
  margin-left: -0.5rem;        /* cancel the row's left padding so the date column lines up with the NEWS heading (shifted left vs the old centred column) */
}
.news-title { color: var(--fg); }
.news-link {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--fg-mute);
  border-bottom: 1px solid var(--fg-mute);
}
.news-link:hover { color: var(--accent); border-color: var(--accent); }

/* ============ FOOTER ============ */
.site-foot {
  padding: 2.6rem 1.5rem 1.2rem;
  font-size: 12px;
  line-height: 1.7;
  color: var(--fg-mute);
}
.foot-grid {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 2rem;
  margin-bottom: 3rem;
}
.foot-brand { color: var(--fg); font-weight: 500; margin-bottom: 0.4rem; }
/* Footer privacy-policy link — brighter than the muted legal line, accent on hover (site link idiom). */
.foot-link { color: var(--fg-mute); text-decoration: none; border-bottom: 1px solid transparent; transition: color 0.2s, border-color 0.2s; }
.foot-link:hover { color: var(--accent); border-color: var(--accent); }
.foot-bottom {
  display: flex;
  flex-direction: column;        /* two muted lines (legal / Privacy Policy) — same as the original footer, content only changed */
  align-items: flex-end;         /* right-aligned, clear of the always-on bottom-left menu */
  gap: 0.1rem;                   /* tight line spacing so the footprint stays close to the original */
  padding-top: 0.9rem;
  border-top: 1px solid var(--line);
  font-family: var(--mono);
  font-size: 10.5px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

/* ============ COMPANY / ABOUT ============ */
.about-co {
  position: relative;
  z-index: 2;
  background: #0a0a0a;
  padding: 0 1.5rem 5rem;          /* top 0: NEWS→ABOUT gap now owned by the .sec-rule divider before this section. bottom 5rem */
}
.about-head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  margin-bottom: 0;          /* empty meta bar collapsed; NEWS→ABOUT gap owned by the .sec-rule divider above */
  padding-bottom: 0;
}
.about-head .num {
  font-family: var(--mono);
  font-size: 10.5px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--fg-mute);
}

.co-block {
  max-width: 760px;
  margin: 0 auto 7rem;               /* centered column on screen; text inside stays left-aligned */
}
.co-block:has(+ .sec-rule) { margin-bottom: 0; }   /* the divider owns the full gap below it; hairline stays centered */
.co-label {
  display: block;
  font-family: var(--mono);
  font-size: 10.5px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--fg-mute);
  margin-bottom: 1.6rem;
}
/* Vertical roll-swap on the Vision/Mission/Values word — triggered by hovering the
   whole block area (Framer / creativeapes-style). Only the English word rolls; the
   leading "—" stays put. Enter rolls up to the duplicate, leave rolls back down. */
.lbl-roll { display: inline-block; overflow: hidden; height: 1.15em; vertical-align: bottom; }
.lbl-roll__track { display: flex; flex-direction: column; transition: transform 0.55s cubic-bezier(0.16, 1, 0.3, 1); }
.lbl-roll__track > span { display: block; line-height: 1.15; }
.co-block:hover .lbl-roll__track { transform: translateY(-50%); }
@media (hover: none) { .co-block:hover .lbl-roll__track { transform: none; } }
.co-title {
  font-family: var(--serif);                 /* Japanese display = Shippori Mincho B1 (matches manifesto-jp) */
  font-weight: 800;
  font-size: clamp(1.4rem, 3.4vw, 2.6rem);   /* reduced from 4.2rem max — sub-heading scale */
  line-height: 1.42;
  letter-spacing: 0;
  margin-bottom: 1.8rem;
}
.co-title .line { display: block; overflow: hidden; }
.co-title .line span { display: inline-block; transform: translateY(110%); }
.co-title.is-in .line span { transform: translateY(0); transition: transform 0.95s cubic-bezier(0.2, 0.8, 0.2, 1); }
.co-title.is-in .line:nth-child(2) span { transition-delay: 0.08s; }

.co-body {
  max-width: 680px;
  font-size: 14px;
  line-height: 1.95;
  color: #c4c4c4;
}
.co-values {
  list-style: none;
  margin-top: 2.6rem;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.85rem 2.5rem;
  max-width: 680px;
}
.co-values li {
  font-size: 13px;
  line-height: 1.55;
  color: var(--fg-mute);
}

/* Company data — spec sheet */
.co-data {
  max-width: 760px;
  margin: 0 auto;                    /* ideals→会社概要 gap is now owned by the .sec-rule divider above */
  border-top: 1px solid rgba(200, 200, 200, 0.22);
}
.co-data > div {
  display: grid;
  grid-template-columns: 100px 1fr;
  gap: 1.2rem;
  padding: 1.05rem 0.5rem;
  border-bottom: 1px solid var(--line);
  font-size: 13.5px;
  line-height: 1.6;
}
.co-data dt {
  font-family: var(--mono);
  font-size: 12px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--fg-mute);
}
.co-data dd { color: var(--fg); }
.co-data:not(.biz-data) dd { font-size: 14px; }   /* 会社概要: 括り12px / 項目(値)を一律 14px に */
.co-data .ceo-en { color: #c0c0c0; }   /* CEO romaji: same 14px size as the kanji, color lighter than --fg #f4f4f4 (client 2026-06-08; #d5d5d5 → #c0c0c0, one notch fainter) */
.co-data dd a { border-bottom: 1px solid var(--fg-mute); transition: color 0.2s, border-color 0.2s; }
.co-data dd a:hover { color: var(--accent); border-color: var(--accent); }

/* Business — 事業内容. Sits right under .co-data as one corporate-profile cluster, sharing the
   spec-sheet visual language (top/bottom hairlines, label column). Each segment is a
   [data-highlight-text] target so it brightens char-by-char on scrub, same as Vision/Mission/Values. */
/* Company-profile blocks (会社概要 + 事業内容). Both carry an identical serif heading in a quiet,
   administrative register (not a Vision/Mission display statement) so the pair reads as one set. */
.co-profile { max-width: 760px; margin: 0 auto; }
.co-profile--biz { margin-top: 12rem; }   /* gap between 会社概要 (company data) and 事業内容 — doubled from 6rem */
.co-profile .co-title {
  font-size: clamp(1.15rem, 2.2vw, 1.6rem);
  font-weight: 600;
  margin-bottom: 1.6rem;
}
/* Business list rendered in the EXACT 会社概要 (.co-data) language — same hairline rows, mono label
   column, white values — so it reads as a continuation of the company-data sheet and reuses the same
   row-by-row blur reveal (initDataReveal animates every .co-data, ::before "—" included). */
.co-data.biz-data { margin: 0 auto; }
.co-data.biz-data > div { grid-template-columns: 200px 1fr; align-items: start; padding: 1.4rem 0.5rem; }
.co-data.biz-data dt {              /* the 括り (business name): matched to the item size (13.5px). The 200px
                                       column and the row height (governed by the taller dd) are unchanged. */
  font-size: 13.5px;
  letter-spacing: 0.04em;
  line-height: 1.85;
  padding-top: 0;
  white-space: nowrap;
}
.co-data.biz-data dd { color: var(--fg); }
.biz-data ul { list-style: none; margin: 0; padding: 0; }
.biz-data li {
  position: relative;
  padding-left: 1.3rem;
  font-size: 13.5px;
  line-height: 1.85;
  color: var(--fg);
}
.biz-data li::before {
  content: "—";
  position: absolute;
  left: 0;
  color: var(--fg-mute);
}

/* Scroll reveal — fade-up for label / body / values / data */
.co-reveal {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity 0.8s ease-out, transform 0.8s cubic-bezier(0.2, 0.8, 0.2, 1);
}
.co-reveal.is-in { opacity: 1; transform: none; }

/* ============ RESPONSIVE ============ */
@media (max-width: 768px) {
  /* Edition block: narrow the right panel and shrink on phones. */
  .is-block .ed-frame { right: 4vw; width: 60vw; }
  .is-block .ed-title, .is-block .ed-desc, .is-block .ed-menu, .is-block .ed-legal { left: 8vw; }
  .is-block .ed-menu { width: 80vw; }
  .is-block .ed-title .ed-main { font-size: clamp(1.5rem, 7vw, 2rem); }
  .section-title { grid-template-columns: 1fr; }
  .section-title .section-lead { grid-column: 1; }
  .works-table .row { grid-template-columns: 1fr; gap: 0.4rem; }
  .works-table .col-cat { text-align: left; }
  .foot-grid { grid-template-columns: 1fr; }
  .foot-bottom { flex-direction: column; gap: 0.5rem; }
  .hover-image { display: none; }
  .news-row { grid-template-columns: 100px 1fr; }
  .co-values { grid-template-columns: 1fr; }
  .co-data > div { grid-template-columns: 1fr; gap: 0.3rem; }
  .about-co { padding: calc(2.5rem * 2 / 3) 1.5rem 5rem; }   /* top trimmed (5rem→2.5rem→×2/3) per client 2026-06-08 — part of the mobile DREAMS→VISION gap; bottom stays 5rem */
  .co-block { margin-bottom: 5rem; }
  .sec-rule { height: 9rem; }      /* shrink the inter-section gap on small screens */
  /* Mobile DREAMS↔VISION gap (client 2026-06-08): trimmed in steps — base override 24.5rem*2/3 → /3 (half) →
     now ×2/3 again. With the matching .about-co padding-top above, DREAMS→VISION ≈ 114px (2/3 of the prior 171). */
  .intro-manifesto + .sec-rule { height: calc(24.5rem / 3 * 2 / 3); }
  /* 会社概要 → 事業内容 gap on mobile: 12rem → 8rem (2/3) per client 2026-06-08. */
  .co-profile--biz { margin-top: 8rem; }
  /* NEWS → DREAMS gap on mobile: 9rem → 13.5rem (×1.5) per client 2026-06-08. The divider spans the whole gap
     (both adjacent sections have 0 padding here), so .sec-rule::before (top:50%) stays at the exact midpoint
     between the NEWS and DREAMS blocks. */
  .manifesto.news-section + .sec-rule { height: 13.5rem; }
  /* VALUES → 会社概要 gap on mobile: 9rem → 13.5rem (×1.5) per client 2026-06-08. This in-about divider also
     spans the full gap (VALUE co-block bottom-margin = 0, 会社概要 top-margin = 0), so .sec-rule::before
     (top:50%) sits at the exact midpoint between the VALUES and 会社概要 blocks. */
  .about-co .sec-rule { height: 13.5rem; }
}

/* ============ TOUCH DEVICES (iPhone/iPad) — ink-dissolve fix ============
   The ink-dissolve wave masks its layers with feTurbulence SVG masks (mask:url(#coverMask) etc.).
   Mobile Safari / iOS WebKit CANNOT apply those masks, so each layer paints UNMASKED as a solid
   fill — the topmost rim-layer (#f6f1e6, cream) then covers the whole hero and hides the astro,
   leaving a frozen cream screen (the bug the boss hit on his iPhone). Dropping the wave on touch
   devices restores the dark astro hero AND removes ~10 feTurbulence layers (a big mobile perf win).
   The hero stays a sticky black backdrop; the opaque-black manifesto (z2) rises over it and covers
   the astro on scroll, so the astro→black flow still works without the filtered wave. */
@media (hover: none) and (pointer: coarse) {
  #home-dissolve { display: none !important; }
  .intro-manifesto { background: #0a0a0a; }
}

/* ============ WebKit/Safari (desktop, incl. macOS) — same ink-dissolve fix ============
   macOS desktop Safari shares the iOS feTurbulence-mask break (verified: WebKit washes the
   manifesto cream where Chromium renders it black). The touch media query above does NOT catch
   desktop Safari (hover:hover, pointer:fine), so the broken cream wave would still ship to Mac
   Safari users. The <head> gate adds html.no-fx-wave when navigator.vendor is Apple (= WebKit),
   before paint. Reuses the exact same proven fallback: no wave, solid-black manifesto rising over
   the sticky astro hero. (Re-enabling on Safari needs a non-feTurbulence wave technique.) */
html.no-fx-wave #home-dissolve { display: none !important; }
html.no-fx-wave .intro-manifesto { background: #0a0a0a; }

/* ROOT-CAUSE FIX for "the black edge leads the wave in the early phase": the #0a0a0a above is a
   NO-WAVE fallback (touch / WebGL fail), but no-fx-wave is now added unconditionally for the shader
   rebuild, so it wrongly opaqued the manifesto even when the shader wave IS present — creating a
   SECOND, straight astro→black edge that races the wave's torn front (front-load only papered over
   it and never covered the organic valleys). wave-fx.js adds html.wave-ok once the shader is
   confirmed drawing; the manifesto then returns to TRANSPARENT so the wave's own organic black (the
   sticky-hero canvas) is the SOLE boundary — the original single-edge design. Higher specificity
   than the rules above (2 classes) so it also overrides the touch media-query opaque. */
html.wave-ok .intro-manifesto { background: transparent; }

/* Same single-edge fix for NEWS. After the 2026-06-08 reorder NEWS is the FIRST block over the dissolving
   hero, and it carries .manifesto → opaque #0a0a0a, which re-created the straight astro→black edge that
   leads the wave (the "black region" bug, reintroduced). When the shader is confirmed (wave-ok) NEWS goes
   transparent too, so the wave's own organic black is again the SOLE boundary. In the no-wave fallback NEWS
   stays opaque (.manifesto #0a0a0a) and covers the astro as it rises — identical to how the manifesto
   behaved while it was first. Mobile flicker stays handled by the UNCHANGED wave-done video-drop below. */
html.wave-ok .manifesto.news-section { background: transparent; }

/* MOBILE-ONLY companion to the transparent manifesto. The astro <video> is a sticky, full-screen,
   always-playing layer pinned BEHIND the entire page. With the manifesto now transparent it is no
   longer opaquely covered, and mobile hardware video-overlay compositing lets it bleed/flicker
   THROUGH the page during scroll (astro shows even at the page bottom). PC composites correctly, so
   this is scoped to touch and leaves PC byte-for-byte unchanged. Once the wave has fully covered the
   astro (html.wave-done, set by wave-fx.js), drop the video entirely + give the hero a solid black
   backstop — the astro is never meant to be seen again until you scroll back to the top, so nothing
   can bleed. wave-fx.js also pauses/replays the element across that threshold. */
@media (hover: none) and (pointer: coarse) {
  .hero { background: #0a0a0a; }
  html.wave-done .hero-bg { display: none; }
}

/* ============ MOBILE HEADER (touch only — PC is never affected) ============
   Per client (mobile-only): menu Flip animation OFF (see initEdition isTouch branch); compact the
   fixed header into an opaque gray band pinned frontmost; drop the menu-animation tagline (#ed-title);
   shrink + nudge the right meta left; add a "=" mark that toggles a simple menu panel. */
@media (hover: none) and (pointer: coarse) {
  /* --- compact opaque header band, raised above the grid overlay (z90) = frontmost --- */
  .site-header {
    z-index: 100;
    background: #2a2a2a;            /* fixed gray band — single tunable shade */
    padding: 6px 4vw;              /* trimmed so logo(44)+pad(12)=56 = min-height → band stays 56px despite the bigger logo */
    gap: 0.5rem;
    align-items: center;
    min-height: 56px;
  }
  .brand { transform: none; }       /* band is tight; drop the -5px nudge */
  .brand-logo { height: 44px; }     /* slightly larger; align-items:center keeps it vertically centred */

  /* give up the menu-animation tagline on mobile */
  .header-block--mid { display: none; }

  /* right meta: smaller + nudged left to clear the "=" mark */
  .header-block--right {
    top: 50%;
    transform: translateY(-50%);
    right: 2.9rem;
    font-size: 9px;
    line-height: 1.3;
  }

  /* "=" menu-expansion mark, far right of the band */
  .menu-toggle {
    display: flex;
    position: absolute;
    top: 50%;
    right: 2.5vw;                 /* nudged a touch closer to the edge */
    transform: translateY(-50%);
    flex-direction: column;
    justify-content: center;
    gap: 4px;
    width: 20px;                  /* smaller mark (was 26) */
    height: 20px;
    padding: 0;
    background: transparent;
    border: 0;
    cursor: pointer;
    z-index: 101;
  }
  .menu-toggle span {
    display: block;
    width: 100%;
    height: 1.5px;
    background: #8a8a8a;          /* muted gray — softer presence than --fg white (utility/admin element) */
    transition: transform 0.25s ease;
  }
  /* "=" → "×" while the panel is open (translate = half of gap+bar = 4/2 + 1.5/2 = 2.75) */
  body.m-menu-open .menu-toggle span:nth-child(1) { transform: translateY(2.75px) rotate(45deg); }
  body.m-menu-open .menu-toggle span:nth-child(2) { transform: translateY(-2.75px) rotate(-45deg); }

  /* --- menu panel (animation OFF; opened by the "=" mark) --- */
  body.m-nav .edition { z-index: 99; }                 /* just under the band so the band caps its top edge */
  body.m-nav .ed-menu {
    position: fixed;
    top: 56px;                                          /* directly under the band (= min-height) */
    left: 0; right: 0;
    width: 100%;
    background: #2a2a2a;
    padding: 0.4rem 4vw 1.2rem;
    gap: 0;
    opacity: 0;
    transform: translateY(-8px);
    pointer-events: none;
    transition: opacity 0.2s ease, transform 0.2s ease;
  }
  body.m-nav.m-menu-open .ed-menu { opacity: 1; transform: none; pointer-events: auto; }
  body.m-nav .ed-item {
    opacity: 1 !important;                              /* beat .is-block .ed-item { opacity:0 } */
    font-size: 1.5rem;
    padding-block: 0.6rem;
    border-bottom: 1px solid rgba(244, 244, 244, 0.12);
  }

  /* language switch — desktop corner toggle hidden; JP/EN sits at the foot of the opened hamburger panel
     (tentative placement: the 56px band's centre is occupied by the email meta, so the panel is the clean home). */
  #lang-toggle { display: none; }
  .lang-toggle--menu {
    display: flex; justify-content: flex-start; align-items: baseline; gap: 0.55em;
    margin-top: 0.5rem; padding-top: 1rem;
    border-top: 1px solid rgba(244, 244, 244, 0.12);
    font-size: 1.05rem; letter-spacing: 0; color: var(--fg);
  }
  .lang-toggle--menu button { opacity: 0.5; }
  .lang-toggle--menu button.is-active { opacity: 1; font-weight: 600; }

  /* Wave runway (mobile) = 2/3 of the desktop 30vh. Reordered 2026-06-08: it lives on the NEWS section
     (now the first block over the dissolve) so the NEWS heading lowers into view as the astro finishes
     dissolving. DREAMS, now mid-page on black, needs no runway. */
  .manifesto.news-section { padding-top: 20vh; }

  /* Hero title fit-to-width: desktop clamp floors at 3rem(48px), which makes the longest line
     "ENTERTAINMENT" (~393px @48px) overflow the right edge on phones (≈+19px @390, +86px @320).
     Size it by vw instead so the longest line fills the width with a small margin = as large as
     possible while fully visible (measured: 10.5vw fits with ~9% side margin across 320–430px;
     capped at 3.5rem so wide touch devices/iPad don't go edge-to-edge). */
  .hero-title { font-size: clamp(2rem, 10.5vw, 3.5rem); }
}

/* ============ 提携企業 / Partners — static badge cards (Dark Acrylic, NO cursor fx) ============ */
.partners{ position:relative; z-index:95; background:#0a0a0a; padding:6rem 1.5rem 7rem; }
  /* z 95 = above .grid-overlay (z90, the fixed 48-col vertical hairlines) so the lines never paint over the
     cards/logos. The section sits low on the page and never overlaps the fixed header (z80), so this is safe. */
.partners .co-profile{ max-width:760px; margin:0 auto; }
.partners-title{ font-family:var(--sans-text); text-transform:uppercase; letter-spacing:.18em;
  font-weight:600; font-size:clamp(14px,1.4vw,16px); color:#9a9a9a; margin:0 0 1.9rem; }
.partner-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:1.1rem; margin-top:.4rem; }
.partner-card{ position:relative; aspect-ratio:16/10; display:grid; place-items:center; text-decoration:none;
  transform:perspective(820px) rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg));
  transform-style:preserve-3d;                          /* so the logo can float in the card's 3D space */
  transition:transform .3s cubic-bezier(.2,.7,.2,1); will-change:transform; }
/* glass surface as a pseudo (z=0) — very dark, close to the page bg (#0a0a0a); edges kept subtle (faint border + whisper top highlight) */
.partner-card::before{ content:""; position:absolute; inset:0; border-radius:14px;
  background:linear-gradient(180deg, rgba(255,255,255,.03), rgba(255,255,255,.008));
  border:1px solid rgba(255,255,255,.055);
  -webkit-backdrop-filter:blur(11px); backdrop-filter:blur(11px);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.08), 0 24px 50px rgba(0,0,0,.55); }
/* logo floats ~32px in front of the surface → it parallaxes (moves with) the tilt, not stuck on the axis */
.partner-card img{ position:relative; max-width:56%; max-height:46%; object-fit:contain; opacity:.92;
  transform:translateZ(32px); filter:drop-shadow(0 6px 13px rgba(0,0,0,.45)); }
@media (max-width: 760px){
  .partners{ padding:4rem 1.5rem 5rem; }
  .partner-grid{ grid-template-columns:1fr; max-width:340px; margin:.4rem auto 0; gap:1rem; }
}

/* ============ SMARTPHONE-ONLY refinements (touch devices only; PC = hover:hover/pointer:fine is untouched) ============ */
@media (hover: none) and (pointer: coarse) {
  /* 1) NEWS — drop the 配信ハブ / MV links (and the extra line they wrapped onto); rows stay a clean date | title grid */
  .news-link { display: none; }
  .news-row { grid-template-columns: 100px 1fr; }

  /* 2) 事業内容 — stack the bullets UNDER each business name, left-aligned (the 200px label column is too tight on phones) */
  .co-data.biz-data > div { grid-template-columns: 1fr; gap: 0.45rem; padding: 1.1rem 0.5rem; }
  .co-data.biz-data dt { white-space: normal; }

  /* 3) ROOT FIX for the menu tap-jacking: the closed mobile menu panel is invisible (opacity:0) but its links stayed
     tappable (.edition a{pointer-events:auto}), so taps on content under the panel's top region (e.g. the first
     partner card) hit an unseen menu item and navigated to NEWS/etc. Make the menu links inert unless the panel is
     actually open — then taps pass through to the content below. */
  .edition a { pointer-events: none; }
  body.m-menu-open .edition a { pointer-events: auto; }
}