/* ============================================================
   STEGANOGRAPHY TOKYO — shared styles
   Plain HTML/CSS. No build step, no webfonts (system grotesque
   stack chosen to resemble the mockup at zero load cost).
   ============================================================ */

:root {
  --font: "Helvetica Neue", Helvetica, Arial,
          "Hiragino Kaku Gothic ProN", "Hiragino Sans",
          "Yu Gothic", "YuGothic", "Meiryo", system-ui, sans-serif;

  --ink:        #e8e5d9;            /* primary cream text          */
  --ink-dim:    #cdcabe;            /* secondary text              */
  --ink-faint:  rgba(232,229,217,.42);
  --box:        rgba(38,42,40,.34); /* nav pill background         */
  --box-hover:  rgba(70,74,70,.62);
  --solid-bg:   #e7e4d8;            /* filled button               */
  --solid-ink:  #1b1e1b;
  --edge:       1.6rem;             /* base screen margin          */
}

* { box-sizing: border-box; margin: 0; padding: 0; }

html { -webkit-text-size-adjust: 100%; }

body {
  font-family: var(--font);
  color: var(--ink);
  background: #0c0e0c;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* ---- full-viewport stage with photo + layered overlays ------- */
.stage {
  position: relative;
  min-height: 100svh;
  min-height: 100vh;
  padding: clamp(1.6rem, 3.5vw, 3rem);
  overflow: hidden;
  isolation: isolate;
  /* diagonal dark wedge on the right + soft vignette + the photo */
  background:
    linear-gradient(104deg,
      transparent 0%,
      transparent 48%,
      rgba(12,14,12,.30) 66%,
      rgba(10,12,10,.78) 86%,
      rgba(7,8,7,.97) 100%),
    radial-gradient(120% 120% at 42% 44%,
      transparent 30%,
      rgba(16,20,16,.30) 78%,
      rgba(10,12,10,.55) 100%),
    url("bg.jpg") center / cover no-repeat;
}

a { color: inherit; text-decoration: none; }

/* ---- masthead (top-left) ------------------------------------- */
.masthead { position: relative; z-index: 4; }

.brand__en {
  font-size: .82rem;
  font-weight: 700;
  letter-spacing: .04em;
  text-transform: uppercase;
}
.brand__jp {
  font-size: clamp(1.15rem, 1.9vw, 1.5rem);
  font-weight: 700;
  letter-spacing: .02em;
  margin-top: .15rem;
}

.nav-cats {
  margin-top: 1.5rem;
  display: flex;
  flex-wrap: wrap;
  gap: 1.4rem;
  font-size: .9rem;
  letter-spacing: .12em;
  color: var(--ink-dim);
}
.nav-cats a { transition: color .2s ease; }
.nav-cats a:hover,
.nav-cats a:focus-visible { color: #fff; }

/* ---- right-hand main navigation ------------------------------ */
.nav-main {
  position: absolute;
  top: clamp(20%, 24vh, 26%);
  right: clamp(1.6rem, 3.5vw, 3rem);
  z-index: 4;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: .55rem;
  text-align: right;
}
.nav-main a {
  display: inline-block;
  padding: .42rem 1rem;
  font-size: .92rem;
  letter-spacing: .12em;
  background: var(--box);
  backdrop-filter: blur(2px);
  transition: background .2s ease, color .2s ease;
}
.nav-main a:hover,
.nav-main a:focus-visible { background: var(--box-hover); color: #fff; }
.nav-main a[aria-current="page"] {
  background: var(--box-hover);
  font-weight: 700;
}

/* ---- placeholder copy block (mid-left) ----------------------- */
.placeholder {
  position: absolute;
  left: clamp(1.6rem, 3.5vw, 3rem);
  top: 56%;
  z-index: 2;
  max-width: 34ch;
  font-size: .8rem;
  line-height: 1.55;
  color: var(--ink-faint);
  word-break: break-all;
}

/* ---- bottom-right wordmark ----------------------------------- */
.hero {
  position: absolute;
  right: clamp(1.6rem, 3.5vw, 3rem);
  bottom: clamp(5.5rem, 12vh, 9rem);
  z-index: 3;
  text-align: right;
}
.hero__jp {
  font-size: clamp(1.1rem, 2.4vw, 2rem);
  font-weight: 500;
  letter-spacing: .02em;
  color: var(--ink-dim);
}
.hero__en {
  font-size: clamp(2.4rem, 7vw, 6.2rem);
  font-weight: 600;
  line-height: .98;
  letter-spacing: -.005em;
  margin-top: .1em;
}

/* ---- call-to-action buttons (bottom-left) -------------------- */
.cta {
  position: absolute;
  left: clamp(1.6rem, 3.5vw, 3rem);
  bottom: clamp(1.8rem, 4vh, 3rem);
  z-index: 3;
  display: flex;
  gap: 1rem;
  flex-wrap: wrap;
}
.btn {
  display: inline-flex;
  align-items: center;
  padding: .9rem 1.5rem;
  font-size: .92rem;
  letter-spacing: .08em;
  transition: transform .15s ease, background .2s ease, color .2s ease;
}
.btn--solid { background: var(--solid-bg); color: var(--solid-ink); }
.btn--ghost { border: 1px solid var(--ink-dim); color: var(--ink); }
.btn:hover { transform: translateY(-2px); }
.btn--solid:hover { background: #fff; }
.btn--ghost:hover { border-color: #fff; color: #fff; }

/* ---- TBD sub-pages ------------------------------------------- */
.page {
  position: relative;
  z-index: 3;
  min-height: 58svh;
  min-height: 58vh;
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.page__crumb {
  font-size: clamp(1.1rem, 2.4vw, 1.9rem);
  font-weight: 500;
  letter-spacing: .14em;
  color: var(--ink-dim);
  text-shadow: 0 2px 16px rgba(0, 0, 0, .6);
}
.page__tbd {
  font-size: clamp(3rem, 9vw, 7rem);
  font-weight: 600;
  letter-spacing: .02em;
  margin-top: .1em;
  text-shadow: 0 2px 22px rgba(0, 0, 0, .55);
}
.page__body {
  margin-top: 1.2rem;
  max-width: min(78ch, 92%);
  padding: 1.1rem 1.5rem;
  font-size: clamp(.95rem, 1.4vw, 1.08rem);
  line-height: 1.95;
  color: var(--ink);
  background: rgba(8, 10, 8, .55);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  /* 日本語の改行を文節境界（<wbr>）でのみ許可し、単語の途中で割れないようにする */
  word-break: keep-all;
  line-break: strict;
  overflow-wrap: anywhere;
}
.page__body p + p { margin-top: 1.1em; }

/* ---- staggered load animation -------------------------------- */
@media (prefers-reduced-motion: no-preference) {
  .masthead, .nav-main, .placeholder, .hero, .cta, .page {
    animation: rise .8s cubic-bezier(.2, .7, .2, 1) both;
  }
  .nav-main   { animation-delay: .08s; }
  .placeholder{ animation-delay: .16s; }
  .hero       { animation-delay: .12s; }
  .cta        { animation-delay: .22s; }
  @keyframes rise {
    from { opacity: 0; transform: translateY(14px); }
    to   { opacity: 1; transform: translateY(0); }
  }
}

:focus-visible { outline: 2px solid #fff; outline-offset: 3px; }

/* ============================================================
   Mobile / narrow screens — unstack the absolute hero layout
   ============================================================ */
@media (max-width: 760px) {
  .stage {
    display: flex;
    flex-direction: column;
    gap: 2rem;
    padding-bottom: 2.5rem;
    background:
      linear-gradient(180deg,
        rgba(8,10,8,.55) 0%,
        rgba(10,12,10,.35) 40%,
        rgba(8,10,8,.78) 100%),
      url("bg.jpg") center / cover no-repeat;
  }
  .nav-main {
    position: static;
    flex-direction: row;
    flex-wrap: wrap;
    align-items: flex-start;
    justify-content: flex-start;
    text-align: left;
    gap: .5rem;
    margin-top: .5rem;
  }
  .placeholder { position: static; max-width: none; top: auto; }
  .hero {
    position: static;
    text-align: left;
    margin-top: auto;
  }
  .cta { position: static; }
  .page { min-height: 40svh; }
}