/* ============================================================
   Self-hosted Jost (replaces the former Google Fonts loader)
   ------------------------------------------------------------
   The Webflow CSS references `font-family: Jost` throughout, but
   its own @font-face is named "Jost Variablefont Wght" — the bare
   "Jost" family used to come from Google's webfont.js. That loader
   was removed for performance, so map "Jost" to the variable-font
   files already bundled in this repo. Fully self-hosted, no CDN.
   ============================================================ */
@font-face {
  font-family: 'Jost';
  src: url('/61f4e297ae5e661458335042/67fbc3a6018d8db0e47ed9fe_Jost-VariableFont_wght.woff2') format('woff2'),
       url('/61f4e297ae5e661458335042/67fbc3a6018d8db0e47ed9fe_Jost-VariableFont_wght.ttf') format('truetype');
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Jost';
  src: url('/61f4e297ae5e661458335042/67fbc3a6286c19f6c0859ed6_Jost-Italic-VariableFont_wght.woff2') format('woff2'),
       url('/61f4e297ae5e661458335042/67fbc3a6286c19f6c0859ed6_Jost-Italic-VariableFont_wght.ttf') format('truetype');
  font-weight: 100 900;
  font-style: italic;
  font-display: swap;
}

/* ============================================================
   Image aspect ratios
   ------------------------------------------------------------
   The markup carries width and height attributes so the browser can
   reserve layout space and avoid shift. Those attributes also land as
   a hard CSS height, so the moment anything caps the width, the
   picture keeps its full height and stretches. `height: auto` restores
   the true ratio; the attributes go on reserving space as before.

     .logo        stretched 15% at 390px wide and 23% at 800px, and
                  only came right around 1440.
     .press-image G&G rendered 640x710, a 0.90 ratio against its true
                  1.52; all four outlets were affected.
   ============================================================ */
.logo,
.press-image { height: auto; }

/* ============================================================
   About page layout (section-18 + portrait)
   ------------------------------------------------------------
   Owner layout-editor export 2026-08-14T06:23 (viewport 1728×942):

     section   50% wide, equal 25% L/R margins; top 7.5vh; content-tall (h:auto)
     padding   5vh top/bottom (≈47px @ 942)
     bio col   fills remaining row (~605 @ 1728 → flex)
     portrait  ~141 wide (~8.16vw), native 608/2109 ratio ≈ 0.2883
     panel     rgba(0,0,0,0.57) + blur 5px (shared with Press + Endeavors)
     page      ONE screen — zero vertical scroll; footer on first screen
               flush to bottom (no gap under footer)

   Fixed px heights from the editor are NOT locked — fluid only.
   Kill Webflow .section-18 { margin: 15vh 40vh 30vh }.
   ============================================================ */
.section-18 {
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  gap: 1.75rem 2rem;
  box-sizing: border-box;
  /* Equal gutters — owner marginLeft/Right 25%, width 50% */
  width: 50%;
  max-width: 50%;
  margin-left: 25% !important;
  margin-right: 25% !important;
  /* Content-tall panel; top 7.5vh shared panel rhythm (About/Press/Endeavors). */
  height: auto !important;
  min-height: 0 !important;
  max-height: none !important;
  margin-top: 7.5vh !important;
  margin-bottom: 0 !important;
  padding: 5vh clamp(1rem, 2.5vw, 3rem);
  /* Same black rectangle as Press + Endeavors */
  background-color: rgba(0, 0, 0, 0.57) !important;
  -webkit-backdrop-filter: blur(5px);
  backdrop-filter: blur(5px);
  /* Content-sized in the flex column above the footer — do not shrink
     (shrinking clipped bio into the footer on short desktops). */
  flex: 0 0 auto;
  position: relative;
  z-index: 1;
}

/* About — ONE screen when content fits (owner 1728×942: maxScroll 0).
   Navbar stays in flow (export panel top = nav height + 7.5vh). Footer
   pins to the bottom with no gap under it. Short viewports may scroll
   instead of clipping bio into the footer. */
body.main-body:has(section.section-18) {
  min-height: 100vh;
  min-height: 100dvh;
  height: auto;
  max-height: none;
  overflow-x: hidden;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
}
/* At owner-class desktop heights lock to one screen — zero vertical scroll. */
@media screen and (min-width: 768px) and (min-height: 860px) {
  body.main-body:has(section.section-18) {
    height: 100vh !important;
    height: 100dvh !important;
    max-height: 100vh !important;
    max-height: 100dvh !important;
    overflow: hidden !important;
  }
}
/* Navbar in normal flow so panel top 7.5vh sits under it (export geometry).
   Do NOT absolute-position here — that pulls the panel under the nav links. */
body.main-body:has(section.section-18) .navbar.w-nav {
  position: relative;
  flex-shrink: 0;
  z-index: 2;
}
/* Footer on the first screen, flush bottom of the column */
body.main-body:has(section.section-18) .homepage-footer {
  display: block;
  margin-top: auto; /* pin to bottom; eats free space above, none below */
  flex-shrink: 0;
  position: relative;
  z-index: 1;
}

.section-18 .main-section-div.right {
  flex: 1 1 auto;
  min-width: 0;
  max-width: none;
  width: auto;
  margin-left: 0;
  margin-right: 0;
}

.section-18 .about-sections.main-text {
  width: 100%;
  max-width: none;
  height: auto !important; /* never lock editor 469px */
}

.section-18 .div-block-16 {
  flex: 0 0 auto;
  align-self: center;
  /* ~141px @ 1728 (owner painting width). 0.2883 = 608/2109. */
  width: min(8.16vw, calc(52vh * 0.2883), 8.82rem);
  max-width: min(100%, 8.82rem);
  min-width: 5rem;
  display: block;
  line-height: 0;
}

.section-18 .div-block-16 picture {
  display: block;
  width: 100%;
  line-height: 0;
}

.section-18 .image-20 {
  /* Kill Webflow height:65vh / max-width:none lock. */
  width: 100% !important;
  max-width: 100% !important;
  height: auto !important;
  object-fit: contain;
  object-position: top center;
  display: block;
  vertical-align: top;
}

@media screen and (max-width: 991px) {
  .section-18 {
    width: 80%;
    max-width: 80%;
    margin-left: 10%;
    margin-right: 10%;
    gap: 1.25rem 1.5rem;
  }
  .section-18 .div-block-16 {
    width: min(12vw, calc(48vh * 0.2883), 8rem);
  }
}

@media screen and (max-width: 767px) {
  /* Stacked bio is taller than one phone screen — allow scroll on small only.
     Desktop About stays overflow:hidden at tall viewports. */
  body.main-body:has(section.section-18) {
    height: auto !important;
    max-height: none !important;
    min-height: 100vh;
    min-height: 100dvh;
    overflow-x: hidden !important;
    overflow-y: auto !important;
  }
  .section-18 {
    flex-direction: column;
    flex-wrap: wrap;
    justify-content: center;
    width: auto;
    max-width: none;
    margin-left: 5vw !important;
    margin-right: 5vw !important;
    margin-top: 0 !important;
    margin-bottom: 0 !important;
    /* padding clears stacked chrome */
    padding: 4vh 4vw 4vh;
    flex: 0 0 auto;
  }
  .section-18 .main-section-div.right {
    max-width: 100%;
    width: 100%;
    order: 1;
  }
  .section-18 .div-block-16 {
    width: min(36vw, calc(48vh * 0.2883), 10rem);
    max-width: 36vw;
    min-width: 5rem;
    margin-left: auto;
    margin-right: auto;
    order: 0;
  }
}

/* ============================================================
   Naoto Nakada — Light / Dark theme
   ------------------------------------------------------------
   Ports the light/dark toggle from nakadafoundation.org (Nakada
   Foundation). Here the theme swaps the hero painting between a
   daytime (light) and a nighttime (dark) edition. The site's
   text is light on both editions, so only the artwork changes.

   Loaded AFTER the Webflow shared stylesheet so these rules win.
   ============================================================ */

/* Daytime painting — Thomas Cole, The Voyage of Life: Youth (1842).
   HQ scan @ 4096×2802 (was 2000×1368 compressed). Same pathnames so
   preloads and the shared Webflow CSS keep working.
   --bg-day       : progressive JPG fallback.
   --bg-day-set   : WebP (preloaded) with the JPG inside image-set() so
                    older engines that ignore image-set() fall back to
                    the --bg-day line below. */
:root {
  --bg-day: url("/61f4e297ae5e661458335042/621f34cfb552ff45a4facfad_Thomas%20Cole%2C%20The%20Voyage%20of%20Life%20Youth%20%281842%29%20Compressed.jpg?v=ec594aaa");
  --bg-day-set: image-set(
    url("/61f4e297ae5e661458335042/621f34cfb552ff45a4facfad_Thomas%20Cole%2C%20The%20Voyage%20of%20Life%20Youth%20%281842%29%20Compressed.webp?v=ec594aaa") type("image/webp"),
    url("/61f4e297ae5e661458335042/621f34cfb552ff45a4facfad_Thomas%20Cole%2C%20The%20Voyage%20of%20Life%20Youth%20%281842%29%20Compressed.jpg?v=ec594aaa") type("image/jpeg")
  );

  /* Nighttime twin of the same Cole canvas @ 4096×2802 (nano-banana-pro edit,
     2026-08-06 re-render: true-night exposure, moon over the right of the
     range, lantern glow on the boat, cloud-palace kept as Cole painted it).
     Mirrors the day image-set pattern. */
  --bg-night: url("/61f4e297ae5e661458335042/621f34cfb552ff45a4facfad_Thomas%20Cole%2C%20The%20Voyage%20of%20Life%20Youth%20%281842%29%20Night.jpg?v=49a603ad");
  --bg-night-set: image-set(
    url("/61f4e297ae5e661458335042/621f34cfb552ff45a4facfad_Thomas%20Cole%2C%20The%20Voyage%20of%20Life%20Youth%20%281842%29%20Night.webp?v=49a603ad") type("image/webp"),
    url("/61f4e297ae5e661458335042/621f34cfb552ff45a4facfad_Thomas%20Cole%2C%20The%20Voyage%20of%20Life%20Youth%20%281842%29%20Night.jpg?v=49a603ad") type("image/jpeg")
  );
}

/* ---- Light mode = daytime painting (unchanged original look) ----
   Two declarations: the first (plain JPG) is the fallback; the second
   (WebP image-set) wins wherever image-set() is supported.

   The day canvas stays on the element itself in BOTH themes; the night
   canvas rides an ::after overlay whose opacity is animated. A single
   element cannot tween background-image, so cross-fading the two
   paintings needs the second one on its own layer. */
.background-image,
[data-theme="light"] .background-image,
[data-theme="dark"] .background-image {
  background-image: var(--bg-day);
  background-image: var(--bg-day-set);
  filter: none;
}

/* ---- Dark mode = dedicated nighttime painting (no CSS veil) ----
   Night rides ::after over the day base. Steady-state dark is instant
   opacity:1 — the .55s dissolve runs ONLY while html.nn-theme-animating
   (theme.js sets that class for the toggle click). Without the gate,
   every dark page load / page-nav crossfade replayed 0→1 and flashed
   the daytime painting. */
.background-image::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background-image: var(--bg-night);
  background-image: var(--bg-night-set);
  background-position: 50%;
  background-repeat: no-repeat;
  background-size: cover;
  opacity: 0;
  transition: none;
}

[data-theme="dark"] .background-image::after {
  opacity: 1;
}

/* Toggle-only dissolve (light ↔ dark). Page loads stay cut, no day flash. */
html.nn-theme-animating .background-image::after {
  transition: opacity .55s ease;
}

@media (prefers-reduced-motion: reduce) {
  html.nn-theme-animating .background-image::after { transition: none; }
}

/* ============================================================
   Theme toggle button (ported from nakadafoundation.org)
   ============================================================ */
/* Fixed to the viewport so the control is always reachable and never depends
   on the navbar's box (which computes to zero width). A subtle glass
   chip keeps the white icon legible over the painting and the white
   Talent page alike. */
.theme-toggle {
  position: fixed;
  top: 16px;
  right: 18px;
  z-index: 1000;
  width: 42px;
  height: 42px;
  padding: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  cursor: pointer;
  color: #fff;                              /* matches the white nav text */
  /* Opaque-enough fill so a paint frame never shows "through" the chip
     (was flashing transparent under the old view-transition crossfade). */
  background: rgba(255, 255, 255, 0.32);
  border: 1px solid rgba(255, 255, 255, 0.16);
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.22);
  -webkit-backdrop-filter: blur(4px);
  backdrop-filter: blur(4px);
  transition: color .15s ease, background .15s ease;
  /* Stay out of any page-nav view-transition snapshot group. */
  view-transition-name: none;
}

.theme-toggle:hover,
.theme-toggle:focus-visible {
  color: #ff8d1b;
  background: rgba(255, 255, 255, 0.45);  /* same orange hover as the nav text */
  outline: none;
}
/* Pin fill on press/focus so UA button defaults cannot clear it. */
.theme-toggle:active,
.theme-toggle:focus {
  background: rgba(255, 255, 255, 0.32);
  color: #fff;
  transform: none;
}
.theme-toggle:active:hover,
.theme-toggle:focus:hover {
  background: rgba(255, 255, 255, 0.45);
  color: #ff8d1b;
}

.theme-toggle svg {
  width: 18px;
  height: 18px;
  display: block;
  /* dark halo keeps the light icon legible on light backgrounds (e.g. Talent page) */
  filter: drop-shadow(0 1px 1px rgba(0, 0, 0, 0.5));
}

/* Dark mode shows the sun (click → light); light mode shows the moon (click → dark). */
[data-theme="dark"]  .icon-sun  { display: block; }
[data-theme="dark"]  .icon-moon { display: none; }
[data-theme="light"] .icon-sun  { display: none; }
[data-theme="light"] .icon-moon { display: block; }

/* Fallback before data-theme is set: show the sun. */
.icon-sun  { display: block; }
.icon-moon { display: none; }

@media screen and (max-width: 479px) {
  .theme-toggle { top: 14px; right: 14px; }
}

/* ============================================================
   Masthead position: identical on every page
   ------------------------------------------------------------
   The navbar is copied into all eight pages rather than shared, and
   Webflow tags whichever link points at the current page with
   w--current. On the homepage that is the logo, so the logo alone
   picked up a second, separately-authored set of geometry:

     .logo-nav-bar            margin-top: 1.5%   (and 6% under 479px)
     .logo-nav-bar.w--current margin-top: 0; padding-top: 2.5vh
                              3vh under 991px and under 767px
                              plus padding-bottom: 1.2vh under 479px

   Being the more specific selector it won everywhere, so the logo sat
   0.9px lower on the homepage than on the other seven at 1440x900, and
   1.9px lower at 390x844. The white flash between pages used to cover
   that; the crossfade does not, and it reads as a small settle. Hold
   the base geometry in both states so the masthead never moves.
   ============================================================ */
.logo-nav-bar.w--current {
  margin-top: 1.5%;
  padding-top: 0;
  padding-bottom: 0;
}
@media screen and (max-width: 479px) {
  /* Match the base rule's own 479px value. */
  .logo-nav-bar.w--current { margin-top: 6%; }
}

/* Gentle crossfade on theme switch where View Transitions are supported. */
::view-transition-old(root),
::view-transition-new(root) { animation-duration: .4s; }

/* ============================================================
   Cross-document view transitions
   ------------------------------------------------------------
   Page-to-page navigation crossfades instead of flashing white.
   Browsers without support ignore the at-rule and navigate the
   ordinary way, so there is no fallback to write.

   Pair this with the speculative loading in theme.js: the fade is
   only worth having if the next page is already in memory when the
   click lands.
   ============================================================ */
@view-transition {
  navigation: auto;
  types: page-nav;
}

/* Deliberately NO view-transition-name on the logo, nav or footer.
   Naming an element makes the browser tween it from where it sat on the
   old page to where it sits on the new one. The navbar is
   position: absolute, so it scrolls away with the page: leave /press
   halfway down and the logo's old position is far up the viewport,
   which the browser then animates back down. That reads as the logo
   flashing and jumping. Unnamed, the whole viewport simply crossfades
   in place and nothing moves. Named groups only pay off for chrome that
   is fixed or sticky, which this masthead is not. */

/* Navigating is a plainer movement than swapping the painting, so it
   runs shorter than the .4s above. Browsers that support navigation
   but not :active-view-transition-type() keep the .4s. */
:root:active-view-transition-type(page-nav)::view-transition-old(root),
:root:active-view-transition-type(page-nav)::view-transition-new(root) {
  animation-duration: .25s;
}

/* Respect a stated preference for less motion: navigate as a plain cut.
   Scoped to page-nav and to every group, named ones included — the theme
   toggle's own crossfade is left as it was. */
@media (prefers-reduced-motion: reduce) {
  :root:active-view-transition-type(page-nav)::view-transition-group(*),
  :root:active-view-transition-type(page-nav)::view-transition-old(*),
  :root:active-view-transition-type(page-nav)::view-transition-new(*) {
    animation: none;
  }
}

/* ============================================================
   Talent application form (talent.html)
   Styled for the light Talent page: dark text, subtle inputs,
   black submit with the site's orange accent on hover/focus.
   ============================================================ */
.talent-apply {
  font-family: Jost, sans-serif;
  color: #111;
  max-width: 640px;
  margin: 1.6rem auto 0;
  text-align: left;
}
.talent-apply-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1rem;
}
.talent-apply label {
  display: block;
  font-size: 0.82rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: #555;
  margin-bottom: 1rem;
}
.talent-apply label span { color: #ff8a1c; }
.talent-apply input,
.talent-apply select,
.talent-apply textarea {
  width: 100%;
  margin-top: 0.4rem;
  padding: 0.7rem 0.8rem;
  font-family: Jost, sans-serif;
  font-size: 1rem;
  color: #111;
  text-transform: none;
  letter-spacing: normal;
  background: #fff;
  border: 1px solid #d8d4cc;
  border-radius: 2px;
  box-sizing: border-box;
  transition: border-color .15s ease, box-shadow .15s ease;
}
.talent-apply textarea { resize: vertical; min-height: 7rem; }
.talent-apply input:focus,
.talent-apply select:focus,
.talent-apply textarea:focus {
  outline: none;
  border-color: #ff8a1c;
  box-shadow: 0 0 0 2px rgba(255, 138, 28, 0.18);
}
.talent-apply button[type="submit"] {
  display: inline-block;
  margin-top: 0.4rem;
  padding: 0.85rem 2.4rem;
  font-family: Jost, sans-serif;
  font-size: 0.9rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: #fff;
  background: #141414;
  border: none;
  border-radius: 2px;
  cursor: pointer;
  transition: background .2s ease;
}
.talent-apply button[type="submit"]:hover { background: #ff8a1c; }
.talent-apply button[type="submit"]:disabled { opacity: 0.6; cursor: default; }
.talent-apply-done,
.talent-apply-fail {
  margin-top: 1.1rem;
  font-size: 1rem;
  letter-spacing: 0.02em;
}
.talent-apply-done { color: #1c7a3c; }
.talent-apply-fail { color: #b0281a; }
@media screen and (max-width: 700px) {
  .talent-apply-row { grid-template-columns: 1fr; gap: 0; }
}

/* Visually-hidden text: available to screen readers and search engines,
   removed from the visual layout (used for per-page <h1> landmarks). */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* ============================================================
   Endeavors page layout (endeavors.html)
   Moved out of the page's inline <style> for maintainability.
   Classes are unique to that page, so these are inert elsewhere.
   The !important flags override Webflow's fixed-height hero panel
   so the stacked ventures can grow to their natural height.

   Dark panel top offset matches About + Press (7.5vh = 50% higher
   than the old ~15vh / 14vh). Same black rectangle tint.
   ============================================================ */
.the-label-div.endeavors-wrap { height: auto !important; margin-top: 7.5vh !important; margin-bottom: 10vh; }
.main-section-div.the-label-text.endeavors-panel {
  height: auto !important;
  min-height: 0 !important;
  padding: 6vh 6vw;
  background-color: rgba(0, 0, 0, 0.57) !important; /* match About / Press panel */
  -webkit-backdrop-filter: blur(5px);
  backdrop-filter: blur(5px);
}
.endeavor-intro { font-size: 1.35em !important; line-height: 1.5 !important; margin-bottom: 2.2rem !important; opacity: .95; }
.endeavor-name { font-size: 2em !important; margin-bottom: .3rem !important; }
.endeavor-tag { font-size: 1.15em !important; line-height: 1.4 !important; margin-bottom: .5rem !important; opacity: .8; }
.endeavor-link { font-size: 1.15em !important; }
.endeavor-link a { color: #fff; }
.endeavor-gap { margin-bottom: 2.4rem !important; }
.about-sections.the-label.label-story { width: auto !important; max-width: 40rem; font-size: 1.1em !important; line-height: 1.7 !important; margin-bottom: 1.6rem !important; opacity: .95; }
.about-sections.the-label.label-signup-label { font-size: 1.05em !important; line-height: 1.4 !important; margin-bottom: 1rem !important; opacity: .9; }
/* Success message reuses the story's exact look (.label-story classes); give it
   equal top & bottom margin so it sits balanced and the story text above does
   not shift when the form is replaced on a successful signup. */
.about-sections.the-label.label-story.subscribe-thankyou { margin-top: 1.6rem !important; margin-bottom: 1.6rem !important; }
/* On a successful signup the prompt + form are hidden and replaced by the
   shorter confirmation. To stop the dark panel ("black rectangle") from
   resizing or jumping, the script locks #subscribe-area to its pre-submit
   height; this centres the confirmation within that reserved space so
   nothing below it moves. */
.signup-area.area-done { display: flex; flex-direction: column; justify-content: center; }
/* Signup success — left-to-right glowing letter reveal.
   On success the script splits the confirmation into per-letter spans
   (.nn-rl) with a staggered animation-delay. Each letter fades in with a
   bright white glow that settles to the story's normal text-shadow, so the
   glow rides left-to-right and the finished line matches the rest of the page
   (the script then restores plain text; the effect is skipped under
   prefers-reduced-motion). */
/* Each letter runs TWO animations off the same per-letter delay:
   - fade: a soft opacity ramp so letters ease in gently (no hard snap).
   - glow: a short, bright text-shadow that settles quickly, so only the
     letter currently arriving (plus a ~2–3 letter trail) glows as the
     highlight travels left-to-right — not whole words lit at once. */
@keyframes nn-rl-fade {
  from { opacity: 0; }
  to   { opacity: 1; }
}
@keyframes nn-rl-glow {
  0%   { text-shadow: 0 0 13px #fff, 0 0 22px #fff; }
  55%  { text-shadow: 0 0 6px #fff, 0 0 12px #fff; }
  100% { text-shadow: 1px 1px 6px #613d1d; }
}
.subscribe-thankyou .nn-rl {
  opacity: 1; /* fallback if animations don't run */
  animation: nn-rl-fade 0.32s ease both, nn-rl-glow 0.14s ease-out both;
}

/* ============================================================
   Footer height — trim the empty space, keep it pinned to the bottom
   ------------------------------------------------------------
   The base .homepage-footer is a fixed 20vh, which left a large gap
   under "© NAOTO NAKADA / CELEBRATING INDIVIDUALITY". Sizing it to
   its content fixed that but, because body still had min-height:100%,
   left a gap BELOW the footer (the dark-green canvas showed through).
   So make the painting-page body a flex column and let the footer take
   the leftover space via margin-top:auto — it now sits flush at the
   bottom on every viewport, content-sized, with no gap above or below.

   Homepage: first screen is full-viewport wallpaper (hero band =
   100vh/100dvh). Footer stays in the document BELOW that band — scroll
   to reach it. Never hide the footer; never lock overflow on body.
   Scoped with :has(.landingpage) so locale indexes match.
   ============================================================ */
.main-body { display: flex; flex-direction: column; min-height: 100vh; }

/* Footer over the fixed Cole painting — no separate plate. Webflow used
   Background Image 1 + dark gradient, which hid the art on scroll. */
.homepage-footer {
  height: auto;
  min-height: 0;
  margin-top: auto;
  padding-top: 2vh;
  padding-bottom: 1.5vh;
  background-image: none !important;
  background-color: transparent !important;
}

/* Homepage: ONE screen, no vertical scroll. Footer sits on the first
   screen at the bottom (over the painting). Manifest Creativity sits at
   Webflow top: 40% (not viewport-centered). Scoped — does not touch About/
   Press/Endeavors panels. */
body.main-body:has(.the-label-div.landingpage) {
  height: 100vh !important;
  height: 100dvh !important;
  max-height: 100vh !important;
  max-height: 100dvh !important;
  min-height: 100vh;
  min-height: 100dvh;
  overflow: hidden !important; /* no vertical scroll */
  display: flex;
  flex-direction: column;
}
/* Navbar overlays the hero — must not push the page past 100vh */
body.main-body:has(.the-label-div.landingpage) .navbar.w-nav {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  width: 100%;
  z-index: 2;
}
/* Hero fills remaining space above the footer inside the 100vh column */
body.main-body:has(.the-label-div.landingpage) .the-label-div.landingpage {
  flex: 1 1 auto;
  height: auto !important;
  min-height: 0 !important;
  max-height: none !important;
  margin-top: 0 !important;
  margin-bottom: 0 !important;
  position: relative;
  display: flex !important;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
}
/* Manifest Creativity — Webflow resting spot (top: 40%, no translate) */
body.main-body:has(.the-label-div.landingpage) .about-sections.landingpage {
  position: absolute;
  top: 40%;
  left: 0;
  right: 0;
  bottom: auto;
  margin: 0;
  width: 100%;
  text-align: center;
  transform: none;
}
/* Footer on the first screen, bottom of the 100vh column */
body.main-body:has(.the-label-div.landingpage) .homepage-footer {
  display: block;
  margin-top: 0;
  flex-shrink: 0;
}

/* ============================================================
   Email submit arrow — flash-free hover glow
   ------------------------------------------------------------
   Two separate causes of the "flash" are handled here:
   1) The base styles swapped the arrow's background-image to a glow
      PNG on hover — the arrow blanked for a frame during the swap.
      Fix: keep the SAME arrow image on hover (below) so nothing swaps.
   2) Adding a filter for the first time on hover promoted the arrow
      to a new compositing layer, which itself blanked it for a frame.
      Fix: give it a transparent glow filter AT REST so the layer
      already exists; hover only changes the filter values (which the
      button's existing 75ms transition fades in). The two rest-state
      drop-shadows match the hover count so the transition interpolates.
   Net result: no image swap and no layer creation on hover — no flash.

   3) The glow was rectangular, not arrow-shaped: the <input type="submit">
      renders a NATIVE button surface (appearance:button), an opaque
      rectangle that drop-shadow glowed. appearance:none removes it so the
      only opaque pixels are the arrow PNG — the glow follows just the ">".
   ============================================================ */
.submit-button-1.inquire {
  -webkit-appearance: none;
  appearance: none;
  filter: drop-shadow(0 0 0 rgba(255, 255, 255, 0)) drop-shadow(0 0 0 rgba(255, 255, 255, 0)) !important;
  /* Smooth, filter-only fade so the glow eases in (the base 75ms "all"
     transition was abrupt enough to read as a flash on its own). */
  transition: filter 0.25s ease !important;
}
.submit-button-1.inquire:hover {
  background-image: url("/61f4e297ae5e661458335042/666fa4a8cafa6991b9d8a2a7_Right%20Arrow%20Round%20White.png") !important;
  filter: drop-shadow(0 0 4px #fff) drop-shadow(0 0 9px rgba(255, 255, 255, 0.6)) !important;
}

.endeavors-panel .email-form { margin: 0 auto; }
.endeavors-divider { width: 40%; max-width: 15rem; height: 1px; background: rgba(255,255,255,.35); margin: 3rem auto; }
@media (max-width: 767px) {
  .main-section-div.the-label-text.endeavors-panel { padding: 5vh 8vw; }
  .endeavor-intro { font-size: 1.15em !important; }
  .endeavor-name { font-size: 1.5em !important; }
  .endeavor-tag, .endeavor-link { font-size: 1em !important; }
  .about-sections.the-label.label-story { font-size: 1.02em !important; }
}

/* ============================================================
   Homepage hero headline reveal (index.html)
   ------------------------------------------------------------
   Replaces the former Webflow load animation so the "Manifest
   Creativity" headline no longer depends on JavaScript. The
   shared stylesheet sets `.about-sections.landingpage` to
   opacity:0; this file loads afterwards, so we reset it to
   opacity:1 and fade it in with a pure-CSS keyframe. Opacity
   only — no translate/slide (owner: soft fade in place).
   ============================================================ */
@keyframes nn-hero-fade {
  from { opacity: 0; }
  to   { opacity: 1; }
}
.about-sections.landingpage {
  opacity: 1;
  animation: nn-hero-fade 1.1s ease 0.1s both;
}

/* ============================================================
   Homepage hero link (index.html)
   ------------------------------------------------------------
   "Manifest Creativity" links to /endeavors. It reads as plain
   headline text at rest; on hover (or keyboard focus) it shifts to
   the site's orange accent to reveal its link nature (colour only —
   no underline).
   ============================================================ */
.hero-link {
  color: inherit;
  text-decoration: none;
  transition: color 0.2s ease;
}
.hero-link:hover,
.hero-link:focus-visible {
  color: #ff8d1b;
}

/* ============================================================
   Honeypot anti-spam field (subscribe & talent forms)
   ------------------------------------------------------------
   Visually hidden but present in the DOM; real visitors never
   fill it. Each form's script silently drops any submission
   where it is non-empty. (Server-side validation in the Cloudflare
   Worker remains the authoritative check.)
   ============================================================ */
.hp-field {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  opacity: 0;
  pointer-events: none;
}

/* Respect reduced-motion for the hero reveal. */
@media (prefers-reduced-motion: reduce) {
  .about-sections.landingpage { animation: none; opacity: 1; }
}

/* ============================================================
   Root (overscroll) background
   ------------------------------------------------------------
   Safari's rubber-band overscroll exposes the canvas behind the
   page. The base stylesheet leaves <html> transparent, so the
   white <body> propagated to the canvas and flashed white when
   scrolling past the top/bottom. Giving <html> its own very dark
   green stops the propagation, so the gutter reads as an
   intentional deep-forest tone in every browser.

   Giving <html> a background stops the browser from propagating the
   <body> background to the canvas, which made .main-body's own white
   paint OVER the hero painting. So make .main-body transparent:
   the painting shows through, and the dark-green canvas fills the
   overscroll gutter and any gaps above the footer.

   Painting scrolls WITH the page (nav + headline + art move together).
   Webflow used position:fixed; we override to absolute so scrolling
   carries the painting up instead of pinning it to the viewport.

   Scoped with :has() to painting pages only, so the intentionally
   light Talent page (<body class="body">) keeps its white canvas.
   Engines without :has() simply keep the original behaviour.
   ============================================================ */
/* ============================================================
   Root (overscroll) + fixed hero painting
   ------------------------------------------------------------
   Safari rubber-band overscroll: give <html> deep forest so the
   gutter is intentional. .main-body stays transparent so the fixed
   painting shows through.

   Webflow put .background-image at z-index:-10 (behind the html
   canvas). Lift it above the canvas; keep chrome above the painting.

   Owner about export 2026-08-11: painting is position:fixed full
   viewport — not document-scroll absolute.
   ============================================================ */
html:has(body.main-body) { background-color: #0b1810; }
.main-body {
  background-color: transparent;
}

/* Fixed full-bleed wallpaper (day/night via theme). */
.background-image {
  position: fixed !important;
  inset: 0 !important;
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
  bottom: 0 !important;
  width: 100vw !important;
  height: 100vh !important;
  height: 100dvh !important;
  z-index: 0;
  pointer-events: none;
}

/* Page chrome above the painting */
body.main-body > :not(.background-image) {
  position: relative;
  z-index: 1;
}

/* ============================================================
   Social icons — real <img> + filter-only hover glow
   ------------------------------------------------------------
   History of two flash classes:

   1) Hover: Webflow swapped each footer icon to a separate Glow PNG.
      Fix: never set background-image on :hover; glow with filter only.

   2) Page-nav (home ↔ about, etc.): empty anchors painted only via
      CSS background-image + filter. Cross-document view transitions
      snapshot/composite those layers late, so the glyphs blank for a
      frame while the navbar <img> logo stays solid. Fix: put the same
      PNGs in real <img> children (HTTP-cached content images, like the
      logo) and kill Webflow's background-image on the <a> entirely.
      Warm the two URLs from theme.js on every page so the next
      navigation already has decoded bitmaps.

   No view-transition-name on these (same rule as nav/footer chrome):
   home puts the footer on the first screen; about parks it below the
   fold — a shared name would tween the icons down the page.

   Transparent double drop-shadow at rest keeps a compositing layer so
   hover only changes filter values (no new layer on first glow).
   ============================================================ */
.social-media-link-block {
  /* Kill Webflow background icon + Glow hover swap on the <a>. */
  background-image: none !important;
  background-color: transparent !important;
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  filter: drop-shadow(0 0 0 rgba(255, 255, 255, 0)) drop-shadow(0 0 0 rgba(255, 255, 255, 0));
  transition: filter 0.25s ease;
  opacity: 1 !important;
  view-transition-name: none;
}
.social-media-link-block .social-media-icon-img {
  display: block;
  width: 100%;
  height: 100%;
  max-width: none;
  /* Match Webflow background-size: cover on the old empty <a>
     (contain letterboxed the tall PNG and shrank the glyph). */
  object-fit: cover;
  object-position: 50% 50%;
  pointer-events: none;
  border: 0;
  view-transition-name: none;
}
.social-media-link-block:hover,
.social-media-link-block:focus-visible {
  filter: drop-shadow(0 0 5px #fff) drop-shadow(0 0 10px rgba(255, 255, 255, 0.55)) !important;
}

/* ============================================================
   Endeavors — whole-venture click targets
   ------------------------------------------------------------
   Nakada Design and Nakada Foundation each link out as one block:
   name, tagline, and URL line all sit inside a single anchor, so
   clicking anywhere on the venture opens its site. Hover gives
   colour-only feedback on the URL line (no underline).
   ============================================================ */
.endeavor-block {
  display: block;
  text-decoration: none;
  color: inherit;
}
.endeavor-block .endeavor-link { transition: color 0.2s ease; }
.endeavor-block:hover .endeavor-link,
.endeavor-block:focus-visible .endeavor-link { color: #ff8d1b; }

/* ============================================================
   Press page — dark panel (press.html)
   ------------------------------------------------------------
   Webflow .press-section uses background #0101017a and margin-top
   15vh. Align with About + Endeavors: same black rectangle tint
   and 7.5vh top (50% higher than the old 15vh).
   ============================================================ */
.press-section,
.press-section.presspage {
  background-color: rgba(0, 0, 0, 0.57) !important;
  -webkit-backdrop-filter: blur(5px);
  backdrop-filter: blur(5px);
  margin-top: 7.5vh !important;
}

/* ============================================================
   Press captions (press.html)
   ------------------------------------------------------------
   Each press feature was an image-only link, invisible to search
   engines and screen readers beyond its alt text. A visible caption
   (outlet name + article title) now sits under every image: better
   SEO, better a11y, and a clearer scan of who covered the work.
   The caption picks up the site's warm text-shadow so it reads over
   the painting, and turns orange on hover as a colour-only link cue.
   ============================================================ */
.link-block-7 .press-image { margin-bottom: 0.75rem; }
.press-caption {
  font-family: Jost, sans-serif;
  color: #fff;
  text-shadow: 1px 1px 6px #613d1d;
  font-size: 1.05rem;
  line-height: 1.5;
  margin: 0 0 6vh;
  transition: color 0.2s ease;
}
.press-caption .press-outlet { font-weight: 600; letter-spacing: 0.02em; }
.link-block-7:hover .press-caption,
.link-block-7:focus-visible .press-caption { color: #ff8d1b; }
@media (max-width: 767px) {
  .press-caption { font-size: 0.95rem; margin-bottom: 4vh; }
}

/* ============================================================
   Talent page — dark theme (talent.html)
   ------------------------------------------------------------
   The Talent page (<body class="body">) is the one page with no
   hero painting, so the light/dark toggle used to change only the
   button icon. Its nav band and footer already sit on their own
   dark background images (legible in both modes); only the white
   content area between them needed a dark variant. In dark mode the
   page background goes deep-forest, headings and body copy flip to
   light, and the application form inverts to dark inputs — matching
   the rest of the site's dark treatment.
   ============================================================ */
[data-theme="dark"] body.body { background-color: #0b1810; }
[data-theme="dark"] .heading.talent { color: #f0ece4; }
[data-theme="dark"] .talent-text { color: #d8d4cc; }
[data-theme="dark"] .talent-text .italic-text { color: #f0ece4; }

[data-theme="dark"] .talent-apply { color: #f0ece4; }
[data-theme="dark"] .talent-apply label { color: #b8b4ac; }
[data-theme="dark"] .talent-apply input,
[data-theme="dark"] .talent-apply select,
[data-theme="dark"] .talent-apply textarea {
  background: #12181e;
  color: #f0ece4;
  border-color: #2c3532;
}
[data-theme="dark"] .talent-apply input:focus,
[data-theme="dark"] .talent-apply select:focus,
[data-theme="dark"] .talent-apply textarea:focus {
  border-color: #ff8a1c;
  box-shadow: 0 0 0 2px rgba(255, 138, 28, 0.22);
}
/* Cream submit button reads clearly on the dark canvas; keeps the
   site's orange hover. */
[data-theme="dark"] .talent-apply button[type="submit"] {
  background: #f0ece4;
  color: #141414;
}
[data-theme="dark"] .talent-apply button[type="submit"]:hover { background: #ff8a1c; color: #fff; }
[data-theme="dark"] .talent-apply-done { color: #5fd08a; }
[data-theme="dark"] .talent-apply-fail { color: #ff8a7a; }

/* ============================================================
   Language switch (sits beside the theme toggle)
   ------------------------------------------------------------
   A second glass chip to the RIGHT of the theme toggle opens a
   small menu of languages. The theme toggle shifts left to make
   room; both stay fixed top-right on every page. Hover is
   colour/glow only (no motion), matching the theme toggle.
   ============================================================ */
#theme-toggle { right: 66px; }               /* make room for the language chip */

.lang-switch {
  position: fixed;
  top: 16px;
  right: 18px;
  z-index: 1001;
}

.lang-toggle {
  width: 42px;
  height: 42px;
  padding: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  cursor: pointer;
  color: #fff;
  background: rgba(255, 255, 255, 0.32);
  border: 1px solid rgba(255, 255, 255, 0.16);
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.22);
  -webkit-backdrop-filter: blur(4px);
  backdrop-filter: blur(4px);
  transition: color .15s ease, background .2s ease, transform .15s ease;
}
.lang-toggle:hover { color: #ff8d1b; background: rgba(255, 255, 255, 0.45); }
.lang-toggle:active { transform: scale(0.92); }
.lang-toggle svg {
  width: 19px;
  height: 19px;
  display: block;
  /* dark halo keeps the light icon legible on light backgrounds (Talent page) */
  filter: drop-shadow(0 1px 1px rgba(0, 0, 0, 0.5));
}

.lang-menu {
  position: absolute;
  top: 50px;
  right: 0;
  margin: 0;
  padding: 6px;
  list-style: none;
  min-width: 156px;
  background: rgba(16, 18, 26, 0.92);
  border: 1px solid rgba(255, 255, 255, 0.16);
  border-radius: 12px;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.40);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
}
.lang-menu[hidden] { display: none; }
.lang-menu li { margin: 0; }
.lang-menu a {
  display: block;
  padding: 9px 14px;
  border-radius: 7px;
  font-family: Jost, sans-serif;
  font-size: 0.95rem;
  letter-spacing: 0.02em;
  line-height: 1.2;
  color: #f0ece4;
  text-decoration: none;
  white-space: nowrap;
  transition: color .15s ease, background .15s ease;
}
.lang-menu a:hover,
.lang-menu a:focus-visible {
  color: #ff8d1b;
  background: rgba(255, 255, 255, 0.06);
  outline: none;
}
.lang-menu a[aria-current="true"] { color: #ff8d1b; }   /* the active language */

@media screen and (max-width: 479px) {
  #theme-toggle { right: 62px; }
  .lang-switch { right: 14px; }
}

/* Legal pages (privacy + terms) — pull the H1 closer under the nav.
   Webflow .section uses margin-top: 10% of *width* (~127px on desktop),
   which left a large empty band under the navbar. */
body.scrolling-page-background .section {
  margin-top: 2.75rem !important;
}
body.scrolling-page-background .section > h1.heading {
  margin-top: 0.35rem;
  margin-bottom: 0.85rem;
}

/* Convenience note at the top of translated legal pages (es/fr/ja only).
   A subtle dark chip + warm text-shadow keeps it legible over the bright
   part of the hero painting, matching how the site's other over-painting
   text stays readable. */
.legal-i18n-note {
  font-family: Jost, sans-serif;
  font-size: 0.92rem;
  line-height: 1.55;
  font-style: italic;
  color: #f0ece4;
  max-width: 48rem;
  margin: 0 auto 1.8rem;
  padding: 0.7rem 1rem;
  background: rgba(8, 12, 28, 0.42);
  border-left: 2px solid #ff8a1c;
  border-radius: 3px;
  text-shadow: 1px 1px 6px #613d1d;
}