.story { position: relative; display: flex; flex-direction: column; align-items: center; gap: var(--sp-g); width: 100%; text-align: center; color: var(--story-ink, var(--color-on-dark)); }
.story-head { position: relative; display: grid; justify-items: center; width: 100%; padding: .4em .15em .5em; background: var(--paper-pattern), linear-gradient(120deg, var(--paper), var(--paper-shade), var(--paper)); border: 3px double var(--gold); outline: 1px solid var(--gold); outline-offset: 3px; box-shadow: 0 3px 18px var(--color-shadow); }
.story-head::before, .story-head::after { content: ""; position: absolute; width: 12px; height: 12px; pointer-events: none; }
.story-head::before { top: 3px; left: 3px; border-left: 2px solid var(--color-line); border-top: 2px solid var(--color-line); }
.story-head::after { bottom: 3px; right: 3px; border-right: 2px solid var(--color-line); border-bottom: 2px solid var(--color-line); }
.story-title { font-family: var(--font-body); font-size: var(--fs-head); font-weight: var(--fw-head); line-height: var(--lh-head); letter-spacing: -.055em; color: var(--color-ink); }
.story-copy { display: grid; gap: var(--sp-p); font-weight: var(--fw-body); }
.story-copy p { line-height: var(--lh-body); }
.frame-page { background: var(--navy); }
.empathy-page { background: radial-gradient(ellipse at 0 35%, var(--blue-deep), transparent 65%), var(--navy); }
.environment-page { --flame-opacity: .5; --story-ink: var(--color-on-dark); background: radial-gradient(ellipse at 50% 46%, var(--steel-light), transparent 68%), repeating-linear-gradient(132deg, transparent 0 44px, var(--steel-scratch) 45px, transparent 46px 137px), repeating-linear-gradient(8deg, transparent 0 2px, var(--steel-grain) 3px, transparent 4px 7px), var(--steel); }
.frame-page::before { content: ""; position: absolute; pointer-events: none; z-index: 1; inset: calc(var(--header-h) + 12px) 12px 12px; border: 1px solid var(--gold-soft); }

.environment-page::after, .salary-page::after, .balance-page::after, .company-page::after, .recruit-page::after, .entry-page::after { content: ""; position: absolute; z-index: 0; pointer-events: none; top: var(--header-h); right: 0; left: 0; height: calc(100dvh - var(--header-h)); background: url('assets/flames.png') center bottom / cover no-repeat; opacity: var(--flame-opacity, .65); mask-image: linear-gradient(90deg, var(--navy), transparent 42% 58%, var(--navy)); }
.roles-page::after { content: ""; position: absolute; pointer-events: none; inset: var(--header-h) 0 0; background: url('assets/flames.png') center / cover; animation: fire-breathe 4.8s ease-in-out infinite alternate; }
.voices { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; width: 100%; }
.voice { font-size: clamp(13px, 3.4vw, 16px); white-space: nowrap; position: relative; padding: .55em .2em; font-weight: 900; line-height: 1.4; border: 1px solid var(--gold); background: var(--blue-deep); box-shadow: inset 0 0 0 3px var(--navy); color: var(--color-on-dark); }
.voice:nth-child(2) { background: var(--green-deep); }
.team-figure { position: relative; width: calc(100% + 24px); height: var(--figure-h); flex-shrink: 0; }
.team-figure img { width: 100%; height: 100%; object-fit: cover; object-position: center 35%; mask-image: linear-gradient(transparent, var(--navy) 12% 88%, transparent); animation: figure-float var(--motion-float) ease-in-out infinite alternate; }
.empathy-close { position: relative; width: 100%; padding: .45em .15em; font-weight: 900; color: var(--color-on-dark); background: var(--navy-glass); border-block: 1px solid var(--gold); }
.raster-figure { width: calc(100% + 24px); flex-shrink: 0; }
.raster-figure img { width: 100%; height: 100%; object-fit: contain; mask-image: linear-gradient(transparent, var(--navy) 10% 88%, transparent); }
.environment-figure { height: var(--door-h); }
.salary-figure { height: var(--stack-h); }
.salary-figure img { object-fit: cover; object-position: center 58%; }
.balance-figure { width: calc(100% + 24px); height: var(--clock-h); flex-shrink: 0; }
.clock-art { display: block; width: 100%; height: 100%; mask-image: linear-gradient(transparent, var(--navy) 10% 88%, transparent); }
.clock-hand { transform-box: view-box; transform-origin: 768px 470px; transform: rotate(var(--clock-start)); animation: clock-hand-turn var(--clock-turn) linear infinite; animation-play-state: paused; }
.clock-hand--hour { --clock-start: 240deg; --clock-turn: var(--clock-hour-turn); }
.clock-hand--minute { --clock-start: 0deg; --clock-turn: var(--clock-minute-turn); }
.balance-page.is-active .clock-hand { animation-play-state: running; }
.environment-text { width: 100%; padding: .65em .2em; color: var(--color-on-dark); background: linear-gradient(145deg, var(--steel-light), var(--steel)); border: 3px double var(--gold); }
.environment-close { font-weight: 900; color: var(--gold-light); text-underline-offset: .35em; text-decoration: underline; text-decoration-color: var(--gold); }
.duel-figure { width: calc(100% + 24px); height: var(--duel-h); flex-shrink: 0; }
.duel-figure img { width: 100%; height: 100%; object-fit: cover; object-position: center 40%; mask-image: linear-gradient(transparent, var(--navy) 10% 90%, transparent); }
.ratio-pair { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; width: 100%; align-items: stretch; }
.ratio-item { position: relative; display: grid; justify-items: center; gap: var(--sp-1); padding: .5em .1em; border: 3px double var(--gold); background: linear-gradient(140deg, var(--blue-deep), var(--navy)); }
.ratio-item:nth-child(2) { background: linear-gradient(140deg, var(--green-deep), var(--navy)); }
.pie { width: var(--pie-size); height: var(--pie-size); border: 4px solid var(--color-on-dark); border-radius: 50%; background: conic-gradient(var(--green) 0 20%, var(--blue) 20% 100%); box-shadow: 0 0 0 2px var(--color-ink); }
.pie--build { background: conic-gradient(var(--green) 0 80%, var(--blue) 80% 100%); }
.ratio-caption { font-size: var(--ratio-caption-size); font-weight: 900; line-height: 1.4; letter-spacing: -.055em; white-space: nowrap; color: var(--color-on-dark); }
.roles-close { width: 100%; padding: .35em .2em; font-weight: 900; color: var(--color-on-dark); background: var(--navy-glass); border: 3px double var(--gold); clip-path: polygon(4% 0, 96% 0, 100% 25%, 100% 75%, 96% 100%, 4% 100%, 0 75%, 0 25%); }
.rail-art { position: absolute; inset: 18px; pointer-events: none; border: 1px solid var(--gold-soft); background: radial-gradient(ellipse at 0 30%, var(--blue-deep), transparent 60%), radial-gradient(ellipse at 100% 80%, var(--green-deep), transparent 60%), var(--navy); }
.rail-art::after { content: ""; position: absolute; inset: 35% 0 0; background: url('assets/flames.png') center bottom / cover no-repeat; opacity: .55; mask-image: linear-gradient(transparent, var(--navy) 45%); }
.rail-plaque { position: relative; z-index: 1; padding: 24px; background: var(--paper-pattern), var(--paper); border: 4px double var(--gold); outline: 1px solid var(--gold); outline-offset: 5px; }
.review-dialog { max-width: min(90vw, 430px); padding: 28px; color: var(--color-on-dark); background: var(--steel); border: 3px double var(--gold); border-radius: 3px; box-shadow: var(--shadow-soft); font-family: var(--font-body); }
.review-dialog::backdrop { background: var(--color-shadow); backdrop-filter: blur(4px); }
.review-dialog h2 { font-size: 21px; line-height: 1.5; margin-bottom: 14px; }
.review-dialog p { font-size: 15px; line-height: 1.9; margin-bottom: 22px; }
.review-close { display: block; margin-left: auto; padding: 10px 25px; font: 700 15px var(--font-body); color: var(--color-on-dark); background: var(--bg-accent); border: 0; border-radius: var(--radius-pill); cursor: pointer; }
@keyframes clock-hand-turn { from { transform: rotate(var(--clock-start)); } to { transform: rotate(calc(var(--clock-start) + 360deg)); } }
@keyframes figure-float { from { translate: 0 1px; } to { translate: 0 -4px; } }
@keyframes fire-breathe { from { opacity: .78; filter: brightness(1); } to { opacity: 1; filter: brightness(1.12); } }

.rail-caption { min-width: 0; overflow-wrap: anywhere; }
.experience-page { background: radial-gradient(ellipse at 100% 55%, var(--green-deep), transparent 65%), var(--steel); }
.full-lead { width: 100%; }
.full-figure { width: calc(100% + 24px); height: var(--new-figure-h); flex-shrink: 0; }
.full-figure img { width: 100%; height: 100%; object-fit: cover; object-position: center 38%; mask-image: linear-gradient(transparent, var(--navy) 7% 93%, transparent); animation: figure-float var(--motion-float) ease-in-out infinite alternate; }
.strong-close { width: 100%; padding: .45em .2em; border-block: 1px solid var(--gold); background: var(--navy-glass); font-weight: var(--fw-body); color: var(--color-on-dark); }
.salary-page { background: radial-gradient(ellipse at 50% 75%, var(--blue-deep), transparent 70%), var(--navy); }

.salary-main { display: block; width: 100%; padding: .65em .85em .5em; text-align: left; font-family: var(--font-body); font-weight: var(--fw-body); color: var(--color-on-dark); background: linear-gradient(125deg, var(--navy-glass), var(--steel)); border-block: 1px solid var(--gold-soft); border-left: 3px solid var(--gold); }
.salary-range { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); align-items: center; gap: .35em; line-height: 1; }
.salary-amount { display: grid; justify-items: start; justify-self: center; gap: .35em; min-width: 0; }
.salary-label { font-size: var(--fs-ui); line-height: 1.3; letter-spacing: .12em; text-align: left; }
.salary-value { display: inline-flex; align-items: center; justify-content: center; gap: .1em; font-size: var(--salary-number); font-weight: 900; white-space: nowrap; }
.salary-digits { font-family: inherit; font-weight: inherit; font-variant-numeric: lining-nums tabular-nums; line-height: .95; letter-spacing: -.06em; }
.salary-unit { font-size: var(--salary-unit-size); letter-spacing: -.04em; }
.salary-between { display: block; font-size: var(--fs-ui); line-height: 1; transform: translateY(.8em); }
.salary-between::after { content: ""; display: block; width: 1.8em; height: 7px; background: var(--gold); clip-path: polygon(0 40%, 76% 40%, 76% 0, 100% 50%, 76% 100%, 76% 60%, 0 60%); }
.reward-pair { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; width: 100%; }
.reward-pair p { padding: .4em .2em; border: 3px double var(--gold); background: var(--navy-glass); font-weight: var(--fw-body); }
.reward-number { display: block; color: var(--gold-light); font-size: 1.35em; line-height: 1.4; }
.salary-close { padding-block: .35em; border-block: 1px solid var(--gold-soft); font-weight: var(--fw-body); }
.bonus-page .story, .company-page .story { min-height: var(--summary-min-h); justify-content: space-between; }
.bonus-page { background: radial-gradient(ellipse at 50% 48%, var(--gold-soft), transparent 54%), var(--steel); }

.bonus-crest { position: relative; width: calc(100% + 24px); aspect-ratio: 2 / 1; flex-shrink: 0; }
.bonus-crest img { display: block; width: 100%; height: 100%; object-fit: contain; }
.balance-page { background: radial-gradient(ellipse at 25% 35%, var(--blue-deep), transparent 70%), repeating-linear-gradient(132deg, transparent 0 60px, var(--steel-grain) 61px, transparent 62px 120px), var(--steel); }
.work-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; width: 100%; }
.work-card { display: grid; justify-items: center; align-content: center; gap: var(--sp-1); min-height: 6.2em; padding: .6em .2em; background: var(--navy-glass); border: 3px double var(--gold); font-weight: 900; line-height: 1.6; }
.work-card strong { color: var(--gold-light); font-size: 1.12em; }
.future-page { background: radial-gradient(ellipse at 50% 40%, var(--gold-soft), transparent 60%), var(--navy); }
.future-copy { width: 100%; padding-block: .45em; border-block: 1px solid var(--gold); background: var(--navy-glass); font-weight: var(--fw-body); }
.company-page { --summary-min-h: var(--company-min-h); --flame-opacity: .25; background: radial-gradient(ellipse at 50% 45%, var(--steel-light), transparent 70%), var(--steel); }
.company-details { display: grid; grid-template-rows: repeat(3, 1fr); flex-grow: 1; width: 100%; text-align: left; border-top: 2px solid var(--gold); }
.company-row { display: grid; align-items: center; grid-template-columns: 5em minmax(0, 1fr); gap: .5em; padding: 1.2em .2em; border-bottom: 1px solid var(--gold-soft); font-weight: var(--fw-body); }
.company-row dt { color: var(--gold-light); }
.recruit-page, .entry-page { color: var(--color-on-dark); background: repeating-linear-gradient(132deg, transparent 0 90px, var(--steel-grain) 91px, transparent 92px 180px), var(--steel); }
.recruit-page { --flame-opacity: .18; }
.document-content { width: 100%; }
.document-head { position: relative; display: grid; gap: var(--sp-1); padding-bottom: 1em; margin-top: var(--document-title-offset); margin-bottom: 1.5em; border-bottom: 2px solid var(--gold); }
.document-kicker { justify-self: start; background: var(--navy-glass); font: 600 var(--fs-ui)/1.3 var(--font-en); color: var(--gold-light); letter-spacing: .14em; }
.document-title { font: 900 var(--fs-head)/var(--lh-head) var(--font-body); letter-spacing: -.055em; color: var(--color-on-dark); }
.job-details { border-top: 1px solid var(--gold-soft); }
.job-row { display: grid; grid-template-columns: 5.3em minmax(0, 1fr); gap: .7em; padding-block: 1em; border-bottom: 1px solid var(--gold-soft); }
.job-label { color: var(--gold-light); font-weight: 900; }
.job-value { font-weight: 700; line-height: 1.85; }
.job-value .ln { overflow-wrap: anywhere; }
.entry-form { display: grid; gap: 1.4em; }
.entry-field { display: grid; gap: .5em; }
.entry-label { font-weight: 900; color: var(--color-on-dark); }
.entry-required { color: var(--red-strong); }
.entry-review { display: flex; justify-content: center; align-items: center; gap: .7em; min-height: 56px; width: 100%; padding: .7em; color: var(--color-ink); background: linear-gradient(125deg, var(--gold), var(--gold-light)); border: 3px double var(--gold-dim); font: 900 16px/1.4 var(--font-body); letter-spacing: .04em; cursor: pointer; }
.review-dialog { max-height: 88dvh; overflow-y: auto; }
.review-values { display: grid; gap: 12px; margin-bottom: 22px; }
.review-values > div { display: grid; gap: 5px; padding-bottom: 10px; border-bottom: 1px solid var(--color-line); }
.review-values dt { color: var(--gold-light); font-size: 13px; font-weight: 900; }
.review-values dd { color: var(--color-on-dark); font-size: 15px; line-height: 1.7; white-space: pre-wrap; overflow-wrap: anywhere; }

@media (min-width: 960px) and (max-width: 1199px) {
  .rail-page-stack { flex-wrap: wrap; }
  .rail-caption { flex-basis: 100%; }
}