.journey-gate-main {
  max-width: 36rem;
  margin: 0 auto;
}

.journey-gate-card {
  text-align: center;
  padding: 2rem 0 3rem;
}

.journey-gate-lede {
  margin: 0.75rem 0 1.5rem;
  color: rgba(18, 18, 18, 0.72);
}

[data-theme="dark"] .journey-gate-lede {
  color: rgba(255, 255, 255, 0.72);
}

.journey-gate-form {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  align-items: stretch;
  margin-top: 1rem;
}

.journey-gate-input {
  width: 100%;
  padding: 0.75rem 1rem;
  border-radius: 0.5rem;
  border: 1px solid rgba(18, 18, 18, 0.2);
  font: inherit;
  background: var(--surface, #fff);
  color: inherit;
}

[data-theme="dark"] .journey-gate-input {
  border-color: rgba(255, 255, 255, 0.25);
  background: rgba(0, 0, 0, 0.35);
}

.journey-gate-input--error {
  border-color: #c62828;
}

.journey-gate-err {
  margin: 0;
  font-size: 0.875rem;
  font-weight: 600;
  text-align: center;
  color: #c62828 !important;
}

[data-theme="dark"] .journey-gate-err {
  color: #ff5252 !important;
}

.journey-gate-btn {
  margin-top: 0.25rem;
  padding: 0.75rem 1.25rem;
  border-radius: 999px;
  border: none;
  font: inherit;
  font-weight: 600;
  cursor: pointer;
  background: #111;
  color: #fff;
}

[data-theme="dark"] .journey-gate-btn {
  background: #f5f5f5;
  color: #111;
}

.journey-gate-back {
  margin-top: 2rem;
}

.journey-gate-back-link {
  display: inline-block;
  padding: 0.5rem 1rem;
  border-radius: 999px;
  border: 1px solid rgba(18, 18, 18, 0.2);
  text-decoration: none;
  color: inherit;
  font-weight: 500;
}

[data-theme="dark"] .journey-gate-back-link {
  border-color: rgba(255, 255, 255, 0.25);
}

/*
 * Reveal scroll-in applies transform on ancestors; that breaks viewport-fixed
 * .journey-narrative-fullpage (same issue as .project-story__iframe-compare).
 */
body.journey-narrative-open .writing-flow--narrative-only,
body.journey-narrative-open .journey-narrative-fullpage,
html.reveal-animated body.journey-narrative-open .writing-flow--narrative-only.reveal,
html.reveal-animated body.journey-narrative-open .writing-flow--narrative-only.reveal.is-visible,
html.reveal-animated body.journey-narrative-open .journey-narrative-fullpage.reveal,
html.reveal-animated body.journey-narrative-open .journey-narrative-fullpage.reveal.is-visible {
  opacity: 1 !important;
  transform: none !important;
}

body.journey-narrative-open .writing-flow--narrative-only {
  overflow: visible;
  margin: 0;
  padding: 0;
}

/* Full-bleed scroll narrative (edge-to-edge below header) */
.journey-page-main {
  max-width: none !important;
  width: 100%;
  padding-left: 0;
  padding-right: 0;
}

/* Writing post uses .container + .narrow + .writing-flow (prose max-width); override so iframe is full viewport like /journey/. */
body.journey-narrative-open main.container.main-pad.narrow {
  width: 100% !important;
  max-width: none !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
  padding-inline: 0 !important;
  box-sizing: border-box;
}

body.journey-narrative-open main.main-pad {
  padding-top: 1.15rem;
  padding-bottom: 0;
}

/* No in-page title/hero: narrative fills from below site header */
body.journey-narrative-open:has(.writing-flow--narrative-only) main.main-pad {
  padding-top: 0;
}

body.journey-narrative-open #writing-detail,
body.journey-narrative-open #project-detail {
  width: 100%;
  max-width: none;
}

body.journey-narrative-open #project-detail .writing-flow {
  max-width: none !important;
  width: 100% !important;
  margin-inline: 0 !important;
  display: block !important;
}

body.journey-narrative-open:has(#project-detail .writing-flow--narrative-only) #project-main {
  padding-top: 0;
}

/* Title + hero stay readable width; narrative breaks out below */
body.journey-narrative-open #writing-detail .writing-article-header {
  width: 100%;
  max-width: min(860px, 92vw);
  margin-inline: auto;
  padding-inline: clamp(1rem, 4vw, 1.5rem);
  box-sizing: border-box;
}

body.journey-narrative-open #writing-detail .writing-flow {
  max-width: none !important;
  width: 100% !important;
  margin-inline: 0 !important;
  display: block !important;
}

body.journey-narrative-open .journey-narrative-fullpage {
  width: 100%;
  max-width: none;
}

body.journey-narrative-open .journey-page-main {
  padding-bottom: 0;
}

/* Full-page iframe: parent rarely scrolls; fixed header + transform hide avoids sticky+transform bugs. */
body.journey-narrative-open .site-header {
  position: fixed;
  left: 0;
  right: 0;
  top: 0;
  width: 100%;
  box-sizing: border-box;
  z-index: 20;
}

/*
 * Fixed shell below header. app.js sets --journey-header-offset from ResizeObserver
 * on .site-header; rem fallbacks cover first paint before measure runs.
 */
.journey-narrative-fullpage {
  position: fixed;
  top: var(--journey-header-offset, 5rem);
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 1;
  width: 100%;
  max-width: 100vw;
  margin: 0;
  padding: 0;
  transition: top 0.32s cubic-bezier(0.22, 1, 0.36, 1);
}

body.journey-narrative-open.journey-no-header-pad .journey-narrative-fullpage {
  top: 0;
}

/* Desktop: iframe stays full-viewport; header overlays (no height resize → no bottom shake). */
@media (min-width: 981px) {
  body.journey-narrative-open .journey-narrative-fullpage,
  body.journey-narrative-open.journey-no-header-pad .journey-narrative-fullpage {
    top: 0;
    transition: none;
  }
}

@media (max-width: 980px) {
  .journey-narrative-fullpage {
    top: var(--journey-header-offset, 5.5rem);
  }

  body.journey-narrative-open.journey-no-header-pad .journey-narrative-fullpage {
    top: 0;
  }
}

.journey-experience-iframe {
  display: block;
  width: 100%;
  height: 100%;
  min-height: 0;
  border: 0;
  background: #fdfdfd;
  overflow: hidden;
  -ms-overflow-style: none;
  scrollbar-width: none;
}

.journey-experience-iframe::-webkit-scrollbar {
  display: none;
  width: 0;
  height: 0;
}

/* Parent document: narrative scrolls inside iframe only — no visible page scrollbar. */
html:has(body #journey-experience-frame),
html:has(body.journey-narrative-open) {
  overflow: hidden;
  scrollbar-gutter: auto;
}

html:has(body #journey-experience-frame)::-webkit-scrollbar,
html:has(body.journey-narrative-open)::-webkit-scrollbar {
  display: none;
  width: 0;
  height: 0;
}

body:has(#journey-experience-frame),
body.journey-narrative-open {
  overflow: hidden;
  -ms-overflow-style: none;
  scrollbar-width: none;
}

body:has(#journey-experience-frame)::-webkit-scrollbar,
body.journey-narrative-open::-webkit-scrollbar {
  display: none;
  width: 0;
  height: 0;
}

/* Scroll-to-top sits on parent document; stay above full-viewport iframe. */
body.journey-narrative-open .scroll-top-btn {
  z-index: 50;
}

.journey-hidden {
  display: none !important;
}