:root {
  --history-black: #000;
  --history-ivory: #f2eee5;
  --history-muted: rgba(242, 238, 229, .78);
  --history-gold: #c69a48;
  --history-serif: "Bodoni Moda", Georgia, serif;
  --history-sans: "Manrope", Arial, sans-serif;
}

* { box-sizing: border-box; }
html { background: var(--history-black); scroll-behavior: smooth; }
body { margin: 0; min-width: 320px; overflow-x: hidden; background: var(--history-black); color: var(--history-ivory); font-family: var(--history-sans); }
img { display: block; max-width: 100%; }
.history-skip { position: fixed; z-index: 2000; top: -80px; left: 16px; padding: 12px 18px; border: 1px solid var(--history-gold); background: #080806; color: var(--history-ivory); }
.history-skip:focus { top: 12px; }
.history-family { overflow: clip; background: #000; }

.history-scene {
  position: relative;
  isolation: isolate;
  min-height: max(760px, 94svh);
  display: flex;
  align-items: center;
  padding: calc(var(--fs-shell-height, 88px) + clamp(46px, 6vh, 84px)) clamp(28px, 7vw, 132px) clamp(74px, 10vh, 120px);
  overflow: hidden;
  border-bottom: 1px solid rgba(198, 154, 72, .09);
  background: #000;
}

.history-content { position: relative; z-index: 2; width: min(660px, 44vw); }
.history-image-left .history-content { margin-left: auto; }
.history-scene .chapter { margin: 0 0 20px; color: var(--history-gold); font-size: clamp(15px, 1.05vw, 18px); font-weight: 500; line-height: 1.45; letter-spacing: .16em; text-transform: uppercase; }
.history-scene h1,
.history-scene h2 { margin: 0 0 30px; color: var(--history-ivory); font-family: var(--history-serif); font-weight: 400; letter-spacing: -.035em; text-wrap: balance; }
.history-scene h1 { font-size: clamp(82px, 9.8vw, 154px); line-height: .88; }
.history-scene h2 { font-size: clamp(52px, 5.4vw, 88px); line-height: 1.03; }
.history-copy { max-width: 650px; color: var(--history-muted); font-size: clamp(18px, 1.3vw, 23px); font-weight: 400; line-height: 1.68; }
.history-copy p { margin: 0 0 22px; }
.history-copy p:last-child { margin-bottom: 0; }
.history-copy--compact { font-size: clamp(17px, 1.18vw, 21px); line-height: 1.6; }
.history-copy--compact p { margin-bottom: 15px; }
.history-close { margin: 34px 0 0; color: var(--history-gold); font-family: var(--history-serif); font-size: clamp(25px, 2.2vw, 38px); font-weight: 400; line-height: 1.3; text-wrap: balance; }

.history-visual { position: absolute; z-index: -2; inset: 0; margin: 0; overflow: hidden; background: #050505; }
.history-visual img { width: 100%; height: 100%; object-fit: cover; object-position: center; filter: contrast(1.035) brightness(.92); }
.history-image-right .history-visual { left: 43%; }
.history-image-left .history-visual { right: 43%; }
.history-image-right .history-visual::after,
.history-image-left .history-visual::after,
.history-full .history-visual::after { content: ""; position: absolute; inset: 0; pointer-events: none; }
.history-image-right .history-visual::after { background: linear-gradient(90deg, #000 0%, rgba(0,0,0,.88) 12%, rgba(0,0,0,.3) 48%, rgba(0,0,0,.08) 76%), linear-gradient(180deg, #000 0%, transparent 13%, transparent 84%, #000 100%); }
.history-image-left .history-visual::after { background: linear-gradient(270deg, #000 0%, rgba(0,0,0,.9) 12%, rgba(0,0,0,.3) 48%, rgba(0,0,0,.08) 76%), linear-gradient(180deg, #000 0%, transparent 13%, transparent 84%, #000 100%); }
.history-visual figcaption { position: absolute; z-index: 2; right: clamp(18px, 3vw, 46px); bottom: 22px; max-width: calc(100% - 44px); color: rgba(242,238,229,.63); font-size: 12px; font-weight: 400; line-height: 1.45; letter-spacing: .05em; text-align: right; text-shadow: 0 2px 10px #000; }
.history-image-left .history-visual figcaption { right: auto; left: clamp(18px, 3vw, 46px); text-align: left; }

.history-hero { min-height: max(800px, 100svh); }
.history-hero .history-visual img { object-position: 52% center; filter: saturate(.9) contrast(1.05) brightness(.94); }
.history-portrait .history-visual { inset-block: 8%; }
.history-portrait .history-visual img { object-position: 50% 9%; }
.history-work .history-visual img { object-position: center; filter: saturate(.88) contrast(1.04) brightness(.9); }
.history-place .history-visual { inset-block: 7%; }
.history-place .history-visual img { object-position: center 5%; filter: grayscale(1) contrast(1.04) brightness(.9); }
.history-family-memory .history-visual { inset-block: 10%; }
.history-family-memory .history-visual img { object-position: center; filter: grayscale(1) contrast(1.03) brightness(.86); }

.history-full { min-height: max(760px, 100svh); justify-content: center; text-align: center; }
.history-full .history-content { width: min(920px, 84vw); margin: 0 auto; text-shadow: 0 2px 18px rgba(0,0,0,.9); }
.history-full .history-copy { max-width: 780px; margin-inline: auto; color: rgba(255,252,245,.9); }
.history-full .history-visual::after { background: radial-gradient(ellipse at 50% 47%, rgba(0,0,0,.3), rgba(0,0,0,.62) 68%, rgba(0,0,0,.92) 100%), linear-gradient(180deg, #000 0%, transparent 15%, transparent 82%, #000 100%); }
.history-generation .history-visual img { object-position: center; filter: saturate(.82) contrast(1.04) brightness(.8); }
.history-verbs { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px 22px; margin: 34px 0 0; color: var(--history-ivory); font-size: 14px; font-weight: 500; letter-spacing: .16em; text-transform: uppercase; }
.history-verbs span:not(:last-child)::after { content: "·"; margin-left: 22px; color: var(--history-gold); }

.history-today { min-height: max(800px, 106svh); }
.history-today .history-visual img { filter: saturate(.78) contrast(1.05) brightness(.68); }
.history-today .history-visual::after { background: radial-gradient(ellipse at 50% 42%, rgba(0,0,0,.3), rgba(0,0,0,.7) 67%, #000 100%), linear-gradient(180deg, #000 0%, transparent 18%, transparent 78%, #000 100%); }
.history-today h2 span { color: var(--history-gold); }
.history-signature { margin: 44px 0 0; color: var(--history-ivory); font-family: var(--history-serif); font-size: clamp(36px, 4.8vw, 76px); font-weight: 400; line-height: 1.04; letter-spacing: -.025em; }
.history-signature span { display: block; margin-top: 14px; color: var(--history-gold); font-family: var(--history-sans); font-size: clamp(19px, 2.2vw, 34px); font-weight: 400; line-height: 1.2; letter-spacing: .03em; }

@media (max-width: 1100px) {
  .history-scene { min-height: max(720px, 92svh); padding-inline: clamp(26px, 5vw, 62px); }
  .history-content { width: min(580px, 48vw); }
  .history-image-right .history-visual { left: 47%; }
  .history-image-left .history-visual { right: 47%; }
  .history-scene h2 { font-size: clamp(46px, 5vw, 68px); }
  .history-copy { font-size: clamp(17px, 1.55vw, 20px); line-height: 1.62; }
}

@media (max-width: 760px) {
  html { scroll-behavior: auto; }
  .history-scene,
  .history-full { min-height: auto; display: flex; flex-direction: column; align-items: stretch; padding: calc(var(--fs-shell-height, 76px) + 54px) 22px 78px; text-align: left; }
  .history-content,
  .history-image-left .history-content,
  .history-full .history-content { width: 100%; margin: 0; }
  .history-scene h1 { font-size: clamp(74px, 23vw, 104px); margin-bottom: 26px; }
  .history-scene h2 { font-size: clamp(42px, 12vw, 60px); line-height: 1.05; margin-bottom: 25px; }
  .history-copy,
  .history-copy--compact { font-size: 18px; line-height: 1.64; }
  .history-copy p,
  .history-copy--compact p { margin-bottom: 18px; }
  .history-close { font-size: 27px; margin-top: 28px; }
  .history-visual,
  .history-image-right .history-visual,
  .history-image-left .history-visual,
  .history-portrait .history-visual,
  .history-place .history-visual,
  .history-family-memory .history-visual { position: relative; inset: auto; order: 2; width: calc(100% + 44px); height: auto; aspect-ratio: 4 / 3; margin: 44px -22px -28px; }
  .history-visual--square { aspect-ratio: 1 / 1; }
  .history-portrait .history-visual { aspect-ratio: 4 / 5; }
  .history-visual img,
  .history-portrait .history-visual img,
  .history-place .history-visual img,
  .history-family-memory .history-visual img { object-position: center; }
  .history-portrait .history-visual img { object-position: center 6%; }
  .history-place .history-visual img { object-position: center 4%; }
  .history-image-right .history-visual::after,
  .history-image-left .history-visual::after { background: linear-gradient(180deg, #000 0%, rgba(0,0,0,.04) 16%, rgba(0,0,0,.08) 77%, #000 100%); }
  .history-visual figcaption,
  .history-image-left .history-visual figcaption { right: 18px; bottom: 16px; left: 18px; text-align: left; font-size: 11px; }
  .history-full .history-visual { position: absolute; inset: 0; order: initial; width: auto; height: auto; aspect-ratio: auto; margin: 0; }
  .history-full { min-height: max(760px, 100svh); justify-content: center; }
  .history-full .history-content { text-align: left; }
  .history-full .history-copy { margin: 0; }
  .history-full .history-visual::after { background: linear-gradient(180deg, rgba(0,0,0,.9) 0%, rgba(0,0,0,.52) 32%, rgba(0,0,0,.68) 72%, #000 100%); }
  .history-generation .history-visual img { object-position: 52% center; }
  .history-verbs { justify-content: flex-start; gap: 10px 16px; line-height: 1.55; }
  .history-verbs span:not(:last-child)::after { margin-left: 16px; }
  .history-signature { margin-top: 38px; font-size: clamp(37px, 12vw, 54px); }
  .history-signature span { font-size: clamp(18px, 5.7vw, 25px); line-height: 1.25; }
}

@media (max-width: 390px) {
  .history-scene,
  .history-full { padding-inline: 18px; }
  .history-visual,
  .history-image-right .history-visual,
  .history-image-left .history-visual,
  .history-portrait .history-visual,
  .history-place .history-visual,
  .history-family-memory .history-visual { width: calc(100% + 36px); margin-inline: -18px; }
  .history-scene .chapter { font-size: 14px !important; letter-spacing: .12em !important; }
  .history-copy,
  .history-copy--compact { font-size: 17px; }
  .history-close { font-size: 25px; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
}