@charset "UTF-8";
:root {
  --paper: #f2eee4;
  --paper-deep: #e7e0d2;
  --ink: #152a38;
  --blue: #244a5a;
  --river: #638d91;
  --muted: #66736f;
  --vermilion: #bd4d35;
  --gold: #c89b55;
  --white: #fffdf7;
  --line: rgba(21, 42, 56, .22);
  --sans: Arial, Helvetica, sans-serif;
  --serif: Georgia, 'Times New Roman', serif;
  --control-h: 64px;
}
* { box-sizing: border-box; }
html, body { margin: 0; width: 100%; height: 100%; background: #111c22; color: var(--ink); font-family: var(--sans); }
body { overflow: hidden; }
button, a { font: inherit; }
button { color: inherit; }
.skip-link { position: fixed; top: 10px; left: 10px; z-index: 100; transform: translateY(-150%); background: var(--ink); color: white; padding: 12px 18px; }
.skip-link:focus { transform: translateY(0); }
.deck { position: relative; width: min(100vw, 177.7778vh); height: min(100vh, 56.25vw); height: min(100dvh, 56.25vw); margin: auto; top: 50%; transform: translateY(-50%); overflow: hidden; background: var(--paper); box-shadow: 0 24px 90px rgba(0,0,0,.3); isolation: isolate; }
.deck::before { content: ""; pointer-events: none; z-index: 40; position: absolute; inset: 0; opacity: .13; background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.88' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.15'/%3E%3C/svg%3E"); mix-blend-mode: multiply; }
.slide { display: none; position: absolute; inset: 0; overflow: hidden; padding: 4.1% 5.3% 8.4%; background: var(--paper); }
.slide.is-active { display: grid; animation: slide-in .48s cubic-bezier(.2,.72,.25,1) both; }
@keyframes slide-in { from { opacity: .2; transform: translateX(20px); } to { opacity: 1; transform: translateX(0); } }
.photo-frame { position: relative; margin: 0; overflow: hidden; background: #d8d2c4; }
.photo-frame img { display: block; width: 100%; height: 100%; object-fit: cover; }
.photo-frame figcaption { position: absolute; left: 0; right: 0; bottom: 0; padding: 10px 14px 9px; color: #fff; font-size: clamp(9px, .72vw, 13px); line-height: 1.35; letter-spacing: .035em; background: linear-gradient(transparent, rgba(5,15,20,.76)); text-shadow: 0 1px 4px rgba(0,0,0,.55); }
.photo-credit { display: none; }
.kicker, .eyebrow, .folio, .overline, .cover-index, .time-mark, .attraction-number, .food-no, .ceremony-foot, .law-bottom, .three-words, .food-sequence, .close-footer, .keyboard-hint, .map-caption, .recovery-topline, .impact-note { font-size: clamp(9px, .76vw, 14px); letter-spacing: .15em; text-transform: uppercase; }
.eyebrow { margin: 0; color: var(--vermilion); font-weight: 700; }
.folio { margin: 0; color: var(--muted); font-size: clamp(8px, .65vw, 12px); text-align: right; }
.section-head { position: absolute; left: 5.3%; right: 5.3%; top: 4.1%; display: flex; justify-content: space-between; align-items: center; z-index: 2; }
.overline { margin: 0 0 1.5em; color: var(--river); font-weight: 700; }
h1, h2, h3, p { margin-top: 0; }
h1, h2 { font-family: var(--serif); font-weight: 400; letter-spacing: -.045em; }
h2 { margin-bottom: .3em; font-size: clamp(38px, 5.4vw, 96px); line-height: .99; }
h2 em { color: var(--vermilion); font-weight: 400; }
.body-copy { max-width: 38em; color: #43545a; font-size: clamp(13px, 1.26vw, 21px); line-height: 1.62; }
/* Cover */
.slide-cover { grid-template-columns: 47% 53%; padding: 0; background: #e8e1d3; }
.cover-copy { position: relative; z-index: 2; align-self: center; margin: 7% -7% 8% 12%; padding: 7% 7% 6% 0; }
.kicker { display: flex; align-items: center; gap: 11px; margin-bottom: 14%; color: var(--blue); font-weight: 700; }
.kicker-mark { width: 28px; height: 2px; background: var(--vermilion); }
.cover-index { margin-bottom: 1.25em; color: var(--muted); font-size: clamp(8px,.68vw,12px); }
.cover-index span { margin-left: 1.6em; color: var(--vermilion); }
.cover-copy h1 { margin: 0 0 .12em; font-size: clamp(68px, 10vw, 176px); line-height: .78; color: var(--ink); }
.title-period { color: var(--vermilion); }
.cover-subtitle { margin: 1.35em 0 .8em; color: var(--blue); font-family: var(--serif); font-size: clamp(24px, 3vw, 48px); line-height: 1.1; }
.cover-deck { max-width: 28em; color: var(--muted); font-size: clamp(12px,1vw,17px); line-height: 1.6; }
.cover-jp { position: absolute; left: 74%; top: 26%; color: rgba(189,77,53,.13); writing-mode: vertical-rl; font-family: var(--serif); font-size: clamp(72px, 10vw, 160px); }
.cover-photo { height: 100%; }
.cover-photo img { filter: saturate(.8); }
.cover-stamp { position: absolute; right: 5%; bottom: 10%; z-index: 3; padding: 13px 17px; color: white; border: 1px solid rgba(255,255,255,.68); font-family: var(--serif); font-size: 15px; letter-spacing: .2em; line-height: 1.55; text-align: center; }
.cover-stamp span { font-family: var(--sans); font-size: 8px; letter-spacing: .12em; }
/* Overview */
.slide-overview { grid-template-columns: 49% 51%; align-items: center; }
.overview-copy { padding: 4% 4% 0 6%; }
.overview-copy h2 { font-size: clamp(42px,5.7vw,100px); }
.overview-copy .body-copy { margin-top: 2.2em; }
.note-line { display: flex; gap: 11px; align-items: center; max-width: 34em; padding-top: 1.2em; border-top: 1px solid var(--line); color: var(--blue); font-size: clamp(10px,.9vw,15px); line-height: 1.4; }
.note-dot { flex: none; width: 8px; height: 8px; border-radius: 50%; background: var(--vermilion); }
.overview-photo { align-self: center; justify-self: stretch; height: 68%; margin: 5% 0 3% 4%; }
.overview-photo img { filter: saturate(.82); }
.overview-vertical { position: absolute; right: 1.1%; top: 28%; writing-mode: vertical-rl; font-size: 10px; letter-spacing: .26em; color: var(--river); }
/* Geography */
.slide-geography { grid-template-columns: 43% 57%; align-items: center; background: #e8e2d6; }
.geo-copy { z-index: 2; padding: 3% 2% 0 7%; }
.geo-copy h2 { font-size: clamp(42px,5.2vw,90px); }
.geo-photo { height: 70%; margin: 4% 0 2% 2%; transform: rotate(1.3deg); box-shadow: 16px 18px 0 rgba(36,74,90,.13); }
.geo-photo img { filter: saturate(.7); }
.geo-facts { display: flex; gap: 1.5em; flex-wrap: wrap; margin-top: 2.2em; color: var(--muted); font-size: clamp(9px,.75vw,13px); }
.geo-facts b { display: block; margin-bottom: .55em; color: var(--vermilion); font-family: var(--serif); font-size: 1.35em; font-weight: 400; }
.delta-lines { position: absolute; right: 2%; top: 18%; width: 28%; height: 58%; opacity: .18; pointer-events: none; }
.delta-lines span { position: absolute; left: 50%; top: 0; width: 1px; height: 100%; background: var(--river); transform-origin: bottom; }
.delta-lines span:nth-child(1) { transform: rotate(-38deg); }.delta-lines span:nth-child(2) { transform: rotate(-20deg); }.delta-lines span:nth-child(3) { transform: rotate(20deg); }.delta-lines span:nth-child(4) { transform: rotate(38deg); }
/* Waterways graphic */
.slide-waterways { grid-template-columns: 42% 58%; align-items: center; background: #dce8e3; }
.waterways-copy { padding: 3% 3% 0 6%; z-index: 2; }
.waterways-copy h2 { font-size: clamp(44px,5.5vw,94px); }
.map-label { display: flex; align-items: center; gap: 12px; margin-top: 3em; color: var(--ink); font-size: 12px; font-weight: 700; letter-spacing: .12em; }
.map-label small { color: var(--muted); font-size: 10px; font-weight: 400; letter-spacing: .1em; }
.map-dot { width: 12px; height: 12px; border: 2px solid var(--vermilion); border-radius: 50%; box-shadow: 0 0 0 5px rgba(189,77,53,.12); }
.river-graphic { position: relative; height: 82%; margin: 6% 4% 0 0; overflow: hidden; background-color: #d5e1dc; background-image: linear-gradient(rgba(21,42,56,.035) 1px,transparent 1px),linear-gradient(90deg,rgba(21,42,56,.035) 1px,transparent 1px); background-size: 32px 32px; }
.river-main { position: absolute; top: -8%; left: 48%; width: 12%; height: 52%; background: #7da4a4; transform: rotate(8deg); border-radius: 48%; }
.river-branch { position: absolute; top: 33%; left: 48%; width: 72%; height: 9%; background: #7da4a4; border-radius: 50%; transform-origin: 0 50%; }
.river-branch.b1 { transform: rotate(20deg); }.river-branch.b2 { transform: rotate(42deg); top: 35%; }.river-branch.b3 { transform: rotate(68deg); top: 36%; }.river-branch.b4 { transform: rotate(154deg); top: 36%; }.river-branch.b5 { transform: rotate(178deg); top: 39%; }
.river-label { position: absolute; z-index: 1; color: var(--blue); font-size: 10px; letter-spacing: .18em; }.label-city { top: 22%; left: 46%; }.label-bay { bottom: 12%; left: 42%; color: #597c82; }
.island-shape { position: absolute; width: 12%; height: 5%; border-radius: 50%; background: #a8b9a1; transform: rotate(-16deg); }.island-one { left: 17%; bottom: 22%; }.island-two { right: 14%; bottom: 32%; }.island-three { right: 26%; bottom: 14%; }
.map-caption { position: absolute; bottom: 11%; right: 5%; color: var(--muted); font-size: 8px; }
/* History */
.slide-history { grid-template-columns: 45% 55%; align-items: center; }
.history-copy { padding: 4% 3% 0 7%; z-index: 1; }
.history-copy h2 { font-size: clamp(46px,5.4vw,94px); }
.history-photo { height: 64%; margin: 4% 0 0 0; }
.history-photo img { filter: saturate(.72); }
.history-side-note { margin-top: 2em; padding-left: 16px; border-left: 2px solid var(--vermilion); color: var(--muted); font-family: var(--serif); font-size: clamp(16px,1.7vw,28px); line-height: 1.2; }
.history-date { position: absolute; left: 7%; bottom: 12%; display: flex; align-items: baseline; gap: 15px; color: var(--vermilion); font-family: var(--serif); font-size: clamp(26px,3vw,48px); }
.history-date span { color: var(--muted); font-family: var(--sans); font-size: clamp(10px,.9vw,15px); }
/* Prewar */
.slide-prewar { grid-template-columns: 53% 47%; align-items: center; background: #e9e4d9; }
.prewar-photo { height: 73%; margin: 4% 0 0 0; box-shadow: 12px 12px 0 #c9c1b0; }
.prewar-photo img { filter: saturate(.55) contrast(1.02); }
.prewar-copy { padding: 5% 5% 0 12%; }
.prewar-copy h2 { font-size: clamp(42px,5vw,86px); }
.three-words { display: flex; gap: 12px; align-items: center; margin-top: 2.5em; color: var(--blue); font-size: 10px; font-weight: 700; }.three-words i { color: var(--vermilion); font-style: normal; }
/* 1945 */
.slide-1945 { display: none; padding: 0; color: white; background: #1a252a; }
.slide-1945.is-active { display: block; }
.tragedy-photo { position: absolute; inset: 0; background: #26383c; }
.tragedy-photo img { opacity: .65; filter: grayscale(1) contrast(.95); }
.tragedy-photo figcaption { left: 4%; right: auto; bottom: 8%; max-width: 48%; background: none; font-size: 10px; }
.tragedy-shade { position: absolute; inset: 0; background: linear-gradient(90deg,rgba(12,22,26,.96) 0%,rgba(12,22,26,.82) 47%,rgba(12,22,26,.18) 100%); }
.tragedy-content { position: absolute; left: 10%; top: 15%; width: 47%; z-index: 2; }
.tragedy-content .eyebrow { color: #e4ac73; }
.time-mark { margin: 2.2em 0 .8em; color: #e4d3b3; font-weight: 700; }.time-mark span { color: #dc7456; }
.tragedy-content h2 { margin-bottom: .1em; font-family: var(--sans); font-size: clamp(72px,10vw,170px); font-weight: 700; letter-spacing: -.075em; }.tragedy-content h2 span { font-size: .25em; letter-spacing: .08em; }
.tragedy-lede { max-width: 18em; margin: 1em 0 .8em; color: white; font-family: var(--serif); font-size: clamp(20px,2.2vw,36px); line-height: 1.15; }
.tragedy-copy { max-width: 39em; color: #d3d6d3; font-size: clamp(12px,1vw,16px); line-height: 1.65; }
.tragedy-footnote { margin-top: 2.2em; color: #e5ba8b; font-family: var(--serif); font-size: clamp(13px,1.1vw,18px); font-style: italic; }
.tragedy-vertical { position: absolute; right: 4%; top: 18%; writing-mode: vertical-rl; color: rgba(255,255,255,.75); font-size: 9px; letter-spacing: .3em; }
/* Impact */
.slide-impact { grid-template-columns: 55% 45%; align-items: center; background: #f0e8dd; }
.impact-panel { padding: 6% 4% 0 9%; z-index: 1; }
.impact-panel h2 { font-size: clamp(45px,5.5vw,94px); }
.impact-mark { display: block; margin-bottom: 1em; color: rgba(189,77,53,.16); font-family: var(--serif); font-size: clamp(70px,10vw,160px); letter-spacing: -.08em; line-height: .7; }
.estimate { display: flex; gap: 18px; align-items: center; margin-top: 2em; padding-top: 1.2em; border-top: 1px solid var(--line); }
.estimate strong { color: var(--vermilion); font-family: var(--serif); font-size: clamp(38px,4.5vw,72px); font-weight: 400; white-space: nowrap; }.estimate span { color: var(--blue); font-size: clamp(10px,.85vw,14px); line-height: 1.5; }.estimate small { color: var(--muted); }
.impact-note { margin-top: 1.5em; color: var(--muted); font-size: 9px; }
.impact-art { position: relative; height: 72%; margin: 7% 8% 0 0; overflow: hidden; background: #ddcfc0; }
.sun-disc { position: absolute; top: 14%; left: 34%; width: 32%; aspect-ratio: 1; border-radius: 50%; background: var(--vermilion); opacity: .88; }
.impact-lines { position: absolute; inset: 4% 0 0; opacity: .22; background: repeating-linear-gradient(164deg,transparent 0 17px,#334d53 18px 19px,transparent 20px 31px); }
.impact-art span { position: absolute; bottom: 8%; left: 9%; color: #384e54; font-size: 9px; letter-spacing: .2em; line-height: 1.6; }
/* recovery */
.slide-recovery { grid-template-columns: 52% 48%; align-items: center; }
.recovery-photo { height: 72%; margin: 5% 0 0; background: #d0c9bc; }
.recovery-photo img { filter: saturate(.7); }
.recovery-copy { padding: 4% 5% 0 11%; }
.recovery-copy h2 { font-size: clamp(46px,5.5vw,94px); }
.recovery-date { display: flex; gap: 14px; align-items: center; margin-top: 2.5em; padding-top: 1em; border-top: 1px solid var(--line); color: var(--muted); font-size: clamp(10px,.9vw,15px); line-height: 1.4; }
.recovery-date b { color: var(--vermilion); font-family: var(--serif); font-size: clamp(30px,3vw,48px); font-weight: 400; }
/* law */
.slide-rebuild-law { display: none; background: #e5e0d5; }
.slide-rebuild-law.is-active { display: block; }
.law-copy { position: absolute; left: 9%; top: 19%; width: 46%; z-index: 2; }
.law-copy h2 { font-size: clamp(48px,5.9vw,100px); }
.law-copy blockquote { margin: 2em 0 .5em; padding-left: 20px; border-left: 2px solid var(--vermilion); color: var(--blue); font-family: var(--serif); font-size: clamp(18px,2vw,32px); font-style: italic; line-height: 1.2; }
.quote-credit { color: var(--muted); font-size: 10px; letter-spacing: .08em; }
.law-year { position: absolute; right: 18%; top: 17%; color: rgba(189,77,53,.15); font-family: var(--serif); font-size: clamp(100px,17vw,280px); letter-spacing: -.1em; }
.law-image { position: absolute; right: 7%; bottom: 14%; width: 38%; height: 38%; transform: rotate(2deg); box-shadow: 10px 12px 0 rgba(21,42,56,.14); }
.law-image img { filter: saturate(.65); }
.law-caption { position: absolute; right: 0; bottom: 0; padding: 8px 12px; color: white; background: rgba(21,42,56,.8); font-size: 10px; }
.law-bottom { position: absolute; left: 9%; bottom: 12%; color: var(--blue); font-size: 9px; letter-spacing: .2em; }.law-bottom span { padding: 0 1em; color: var(--vermilion); }
/* park */
.slide-park { grid-template-columns: 58% 42%; padding: 0; }
.park-image { height: 100%; }
.park-image img { filter: saturate(.68); }
.park-image figcaption { padding: 16px 20px; }
.park-panel { align-self: center; padding: 8% 12%; }
.park-panel h2 { margin: .7em 0 .55em; font-size: clamp(42px,5vw,84px); }
.park-caption { margin-top: 2.3em; color: var(--vermilion); font-family: var(--serif); font-size: clamp(14px,1.3vw,21px); font-style: italic; }
/* Dome */
.slide-dome { grid-template-columns: 57% 43%; padding: 0; background: #e6e2d8; }
.dome-photo { height: 100%; }
.dome-photo img { filter: saturate(.68); }
.dome-copy { align-self: center; padding: 9% 13% 7% 12%; }
.dome-copy h2 { margin: .6em 0; font-size: clamp(44px,5.2vw,88px); }
.heritage-tag { display: flex; gap: 14px; align-items: center; margin-top: 2em; padding-top: 1em; border-top: 1px solid var(--line); color: var(--muted); font-size: clamp(10px,.82vw,14px); line-height: 1.4; }
.tag-number { color: var(--vermilion); font-family: var(--serif); font-size: clamp(30px,3.4vw,54px); }
.dome-note { margin-top: 2em; color: var(--blue); font-family: var(--serif); font-size: clamp(13px,1.15vw,18px); font-style: italic; }
.dome-vertical { position: absolute; right: 2%; bottom: 17%; writing-mode: vertical-rl; color: var(--muted); font-size: 8px; letter-spacing: .18em; }
/* Cranes */
.slide-cranes { grid-template-columns: 49% 51%; align-items: center; }
.cranes-copy { padding: 4% 2% 0 7%; z-index: 2; }
.cranes-copy h2 { font-size: clamp(45px,5.4vw,92px); }
.peace-line { margin-top: 2.4em; color: var(--vermilion); font-family: var(--serif); font-size: clamp(16px,1.6vw,26px); font-style: italic; }
.cranes-photo { height: 70%; width: 83%; justify-self: center; transform: rotate(1.2deg); box-shadow: 12px 14px 0 rgba(36,74,90,.13); }
.cranes-photo img { object-position: center 42%; }
.crane-motif { position: absolute; right: 5%; top: 18%; color: rgba(189,77,53,.18); font-family: var(--serif); font-size: clamp(30px,4vw,60px); writing-mode: vertical-rl; }
/* ceremony */
.slide-ceremony { display: none; color: var(--white); background: #1c333c; }
.slide-ceremony.is-active { display: block; }
.ceremony-background { position: absolute; inset: 0; opacity: .23; background: radial-gradient(ellipse at 70% 35%,#6c9696,transparent 43%),linear-gradient(145deg,#172c35,#263b41 60%,#101f26); }
.ceremony-background::after { content: ""; position: absolute; inset: 42% 0 0; opacity: .4; background: repeating-linear-gradient(0deg,transparent 0 13px,rgba(224,233,219,.1) 14px 15px,transparent 16px 26px); }
.slide-ceremony .eyebrow { color: #e2ac82; }.slide-ceremony .folio { color: #d0d9d3; }
.ceremony-content { position: absolute; left: 14%; top: 23%; width: 54%; }
.ceremony-date { margin: 0 0 .15em; color: #edb27e; font-family: var(--serif); font-size: clamp(84px,14vw,220px); letter-spacing: -.1em; line-height: .9; }.ceremony-date span { color: #d36a4e; font-size: .65em; }
.slide-ceremony .overline { color: #a9c0b7; }.slide-ceremony h2 { font-size: clamp(48px,6.5vw,110px); }.slide-ceremony h2 em { color: #e39b77; }.slide-ceremony .body-copy { max-width: 34em; color: #d5ded9; }
.ceremony-time { display: flex; gap: 15px; align-items: center; margin-top: 2.5em; color: #edb27e; font-size: 12px; letter-spacing: .2em; }.ceremony-time span:first-child { font-family: var(--serif); font-size: 25px; letter-spacing: .04em; }.ceremony-time i { width: 80px; height: 1px; background: #edb27e; }
.ceremony-foot { position: absolute; left: 14%; bottom: 13%; color: rgba(255,255,255,.58); font-size: 9px; }
/* culture */
.slide-culture { display: none; grid-template-columns: 45% 35% 20%; grid-template-rows: 28% 72%; align-items: center; }
.slide-culture.is-active { display: grid; }
.culture-heading { grid-column: 1; grid-row: 2; align-self: start; padding: 10% 6% 0 4%; }
.culture-heading h2 { font-size: clamp(44px,5.5vw,92px); }
.culture-heading p { max-width: 24em; color: var(--muted); font-family: var(--serif); font-size: clamp(16px,1.45vw,23px); line-height: 1.35; }
.culture-main { grid-column: 2 / 4; grid-row: 1 / 3; align-self: stretch; margin: 5% 0 4% 2%; }
.culture-main img { filter: saturate(.75); }
.culture-callout { position: absolute; left: 5%; bottom: 13%; display: flex; gap: 12px; align-items: flex-start; color: var(--blue); }.culture-callout > span { color: var(--vermilion); font-family: var(--serif); font-size: 24px; }.culture-callout p { margin: 0; font-family: var(--serif); font-size: 18px; line-height: 1.2; }.culture-callout small { color: var(--muted); font-family: var(--sans); font-size: 10px; }
.culture-side-note { position: absolute; right: 5%; bottom: 12%; z-index: 2; max-width: 220px; color: white; font-family: var(--serif); font-size: 16px; font-style: italic; text-align: right; text-shadow: 0 1px 4px rgba(0,0,0,.8); }
/* kagura */
.slide-kagura { grid-template-columns: 57% 43%; align-items: center; background: #e7e0d4; }
.kagura-photo { height: 72%; margin: 5% 0 0; }
.kagura-photo img { filter: grayscale(1) sepia(.18); }
.kagura-copy { padding: 5% 7% 0 12%; }
.kagura-copy h2 { font-size: clamp(45px,5.2vw,86px); }
.kagura-stamp { display: flex; gap: 12px; align-items: center; margin-top: 2em; color: var(--vermilion); font-family: var(--serif); font-size: 34px; }.kagura-stamp span { font-family: var(--sans); font-size: 9px; letter-spacing: .2em; }
.kagura-note { margin-top: 2em; color: var(--muted); font-size: 10px; line-height: 1.45; }
/* food */
.slide-food { grid-template-columns: 42% 58%; align-items: center; background: #eee7dc; }
.food-intro { padding: 4% 2% 0 7%; }
.food-intro h2 { font-size: clamp(42px,5.1vw,88px); }
.food-main { height: 65%; margin: 4% 5% 0 0; }
.food-main img { filter: saturate(.82); }
.food-sequence { position: absolute; right: 7%; bottom: 13%; display: flex; gap: 12px; align-items: center; color: var(--blue); font-size: 9px; }.food-sequence i { color: var(--vermilion); font-style: normal; }
.food-aside { position: absolute; left: 7%; bottom: 14%; max-width: 25%; color: var(--vermilion); font-family: var(--serif); font-size: clamp(14px,1.4vw,22px); font-style: italic; line-height: 1.2; }
/* local foods */
.slide-local-food { grid-template-columns: 42% 32% 26%; grid-template-rows: 28% 72%; align-items: center; }
.local-food-title { grid-column: 1; grid-row: 2; align-self: start; padding: 7% 4% 0 5%; }.local-food-title h2 { font-size: clamp(42px,5vw,84px); }
.oyster-photo { grid-column: 2; grid-row: 1 / 3; height: 75%; margin-top: 5%; }.oyster-photo img { object-position: center; }
.sweets-photo { grid-column: 3; grid-row: 1; height: 85%; margin: 22% 8% 0 6%; }
.local-food-notes { grid-column: 3; grid-row: 2; align-self: start; padding: 10% 10% 0 8%; }.local-food-notes article { margin-bottom: 1.5em; }.local-food-notes article span { color: var(--vermilion); font-size: 9px; letter-spacing: .15em; }.local-food-notes h3 { margin: .25em 0; font-family: var(--serif); font-size: clamp(18px,2vw,30px); font-weight: 400; }.local-food-notes p { color: var(--muted); font-size: clamp(10px,.85vw,14px); line-height: 1.45; }
/* attractions */
.slide-attractions { display: none; }
.slide-attractions.is-active { display: block; }
.attractions-title { position: absolute; left: 5.3%; top: 15%; display: flex; align-items: end; gap: 5%; width: 89%; }.attractions-title h2 { width: 48%; margin: 0; font-size: clamp(42px,5.3vw,90px); }.attractions-title > p { max-width: 25em; margin: 0 0 .4em; color: var(--muted); font-family: var(--serif); font-size: clamp(14px,1.35vw,22px); line-height: 1.35; }
.attraction-grid { position: absolute; left: 5.3%; right: 5.3%; top: 43%; bottom: 13%; display: grid; grid-template-columns: repeat(3,1fr); gap: 2.5%; }
.attraction-card { min-width: 0; }.attraction-card figure { height: 54%; }.attraction-card figure img { filter: saturate(.76); transition: transform .5s ease; }.attraction-card:hover figure img { transform: scale(1.035); }.attraction-number { margin: 1.1em 0 .5em; color: var(--vermilion); font-size: 8px; }.attraction-card h3 { margin: 0 0 .35em; font-family: var(--serif); font-size: clamp(17px,1.75vw,28px); font-weight: 400; }.attraction-card p { max-width: 24em; color: var(--muted); font-size: clamp(10px,.84vw,14px); line-height: 1.45; }.attractions-note { position: absolute; right: 5.3%; bottom: 9%; color: var(--muted); font-size: 9px; font-style: italic; }
/* close */
.slide-close { display: none; padding: 0; color: white; background: #1c2b32; }
.slide-close.is-active { display: block; }
.close-photo { position: absolute; inset: 0; }.close-photo img { filter: saturate(.58) brightness(.68); }.close-overlay { position: absolute; inset: 0; background: linear-gradient(90deg,rgba(14,27,32,.94),rgba(14,27,32,.65) 50%,rgba(14,27,32,.05)); }
.close-content { position: absolute; left: 10%; top: 13%; width: 51%; z-index: 2; }.close-content .eyebrow { color: #e4ac82; }.close-kanji { margin: .4em 0 .15em; color: #e8b280; font-family: var(--serif); font-size: clamp(32px,5vw,75px); }.close-content h2 { font-size: clamp(48px,6.3vw,108px); }.close-content h2 em { color: #e69a76; }.close-copy { max-width: 31em; color: #e0e5e1; font-size: clamp(13px,1.15vw,19px); line-height: 1.5; }.qa { margin-top: 1.7em; color: #f1c18e; font-family: var(--serif); font-size: clamp(21px,2.3vw,38px); }.qa span { color: #d36a4e; }
.close-footer { position: absolute; z-index: 2; left: 5.3%; right: 5.3%; bottom: 11%; display: flex; justify-content: space-between; color: rgba(255,255,255,.72); font-size: 9px; }
/* controls */
.deck-controls { display: none; position: fixed; z-index: 80; left: 50%; bottom: max(14px, calc((100vh - min(100vh,56.25vw))/2 + 14px)); transform: translateX(-50%); display: flex; align-items: center; gap: 12px; width: min(410px, calc(100vw - 28px)); min-height: var(--control-h); padding: 8px 11px; color: var(--ink); background: rgba(250,248,242,.95); border: 1px solid rgba(21,42,56,.14); box-shadow: 0 5px 25px rgba(0,0,0,.14); backdrop-filter: blur(12px); }
.control-button { flex: none; display: grid; place-items: center; width: 44px; height: 44px; min-width: 44px; min-height: 44px; padding: 0; border: 0; background: transparent; color: var(--ink); cursor: pointer; font-size: 22px; transition: background .18s, color .18s; }.control-button:hover { background: var(--ink); color: white; }.control-button:focus-visible, .credits-close:focus-visible { outline: 3px solid var(--vermilion); outline-offset: 2px; }.control-button:disabled { opacity: .32; cursor: default; }.control-button:disabled:hover { background: transparent; color: var(--ink); }
.progress-wrap { flex: 1; min-width: 0; display: grid; grid-template-columns: auto 1fr; grid-template-rows: auto 5px; gap: 4px 10px; align-items: center; }.slide-count { color: var(--ink); font-family: var(--serif); font-size: 14px; white-space: nowrap; }.count-slash { padding: 0 3px; color: var(--vermilion); }.progress-track { height: 3px; background: #d5d2c9; overflow: hidden; }.progress-fill { display: block; width: 5%; height: 100%; background: var(--vermilion); transition: width .28s ease; }.slide-name { grid-column: 1 / -1; overflow: hidden; color: var(--muted); font-size: 9px; letter-spacing: .08em; text-overflow: ellipsis; white-space: nowrap; }
.fullscreen-toggle, .credits-toggle { width: 44px; height: 44px; min-width: 44px; min-height: 44px; font-size: 18px; }.credits-toggle { color: var(--vermilion); }
.keyboard-hint { position: fixed; z-index: 70; right: max(20px, calc((100vw - min(100vw,177.7778vh))/2 + 20px)); bottom: 25px; color: rgba(255,255,255,.72); font-size: 8px; letter-spacing: .1em; }.keyboard-hint span { letter-spacing: .06em; text-transform: none; }.keyboard-hint b { padding: 0 7px; color: #dc8165; }.keyboard-hint kbd { border: 1px solid rgba(255,255,255,.45); padding: 2px 5px; font-family: var(--sans); font-size: 8px; }
.credits-dialog { width: min(780px, calc(100vw - 30px)); max-height: min(82vh, 760px); padding: 26px 30px; border: 1px solid rgba(21,42,56,.2); color: var(--ink); background: var(--paper); box-shadow: 0 25px 90px rgba(0,0,0,.36); }.credits-dialog::backdrop { background: rgba(10,19,23,.72); backdrop-filter: blur(4px); }.credits-top { display: flex; justify-content: space-between; align-items: center; }.credits-top .eyebrow { margin: 0; }.credits-close { width: 40px; height: 40px; border: 0; background: transparent; font-size: 30px; cursor: pointer; }.credits-dialog h2 { margin: 16px 0 10px; font-size: clamp(34px,4vw,54px); }.credits-intro, .fact-sources { color: var(--muted); font-size: 13px; line-height: 1.55; }.credits-list { display: grid; grid-template-columns: 1fr 1fr; gap: 0 24px; max-height: 45vh; overflow: auto; border-top: 1px solid var(--line); }.credit-item { padding: 12px 0; border-bottom: 1px solid var(--line); }.credit-item h3 { margin: 0 0 5px; font-family: var(--serif); font-size: 16px; font-weight: 400; }.credit-item p { margin: 0; color: var(--muted); font-size: 11px; line-height: 1.5; }.credit-item a { color: #275f6b; }.fact-sources { margin: 18px 0 0; font-size: 11px; }.credits-button { position: fixed; z-index: 60; right: 10px; bottom: 10px; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
.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; }
@media (max-aspect-ratio: 4/3) {
  .deck { width: 100vw; height: 100dvh; top: 0; transform: none; }
  .slide { padding-bottom: 13%; }
  .deck-controls { bottom: 12px; }
  .keyboard-hint { display: none; }
}
@media (max-width: 760px) {
  :root { --control-h: 58px; }
  .deck { width: 100vw; height: 100dvh; top: 0; transform: none; }
  .slide { padding: 74px 7% 82px; }
  .section-head { left: 7%; right: 7%; top: 4%; }.folio { max-width: 45%; font-size: 7px; }.eyebrow { font-size: 8px; }
  h2 { font-size: clamp(36px,11vw,62px); }.body-copy { font-size: 14px; }
  .slide-cover { display: none; padding: 0; grid-template-columns: 1fr; grid-template-rows: 50% 50%; }.slide-cover.is-active { display: grid; }.cover-photo { grid-row: 1; height: 100%; }.cover-copy { grid-row: 2; align-self: start; margin: 0; padding: 7% 8%; }.cover-copy .kicker { margin-bottom: 5%; }.cover-index { margin-bottom: .7em; }.cover-copy h1 { font-size: clamp(58px,16vw,96px); }.cover-subtitle { margin: .7em 0 .5em; font-size: 25px; }.cover-deck { font-size: 12px; }.cover-jp { top: -130%; left: 75%; }.cover-stamp { top: 4%; bottom: auto; right: 5%; font-size: 10px; }
  .slide-overview { grid-template-columns: 1fr; grid-template-rows: 49% 43%; align-content: center; }.overview-copy { padding: 0; }.overview-copy h2 { font-size: clamp(36px,10vw,58px); }.overview-copy .body-copy { margin-top: 1em; }.note-line { margin: .8em 0; }.overview-photo { grid-row: 2; height: 100%; margin: 2% 0 0; }.overview-vertical { display: none; }
  .slide-geography { grid-template-columns: 1fr; grid-template-rows: 49% 43%; align-content: center; }.geo-copy { padding: 0; }.geo-copy h2 { font-size: clamp(36px,10vw,58px); }.geo-photo { grid-row: 2; height: 100%; margin: 2% 0 0; }.geo-facts { margin-top: 1em; gap: 1em; }.delta-lines { display: none; }
  .slide-waterways { grid-template-columns: 1fr; grid-template-rows: 36% 58%; align-content: center; }.waterways-copy { padding: 0; }.waterways-copy h2 { font-size: clamp(37px,10vw,58px); }.map-label { margin-top: .35em; }.river-graphic { grid-row: 2; height: 100%; margin: 2% 0 0; }.map-caption { bottom: 18%; right: 7%; font-size: 7px; }
  .slide-history { grid-template-columns: 1fr; grid-template-rows: 47% 43%; align-content: center; }.history-copy { padding: 0; }.history-copy h2 { font-size: clamp(38px,10vw,60px); }.history-side-note { display: none; }.history-photo { grid-row: 2; height: 100%; margin: 2% 0 0; }.history-date { left: 7%; bottom: 17%; }
  .slide-prewar { grid-template-columns: 1fr; grid-template-rows: 46% 45%; align-content: center; }.prewar-photo { grid-row: 1; height: 100%; margin: 2% 0; }.prewar-copy { padding: 3% 0 0; }.prewar-copy h2 { font-size: clamp(38px,10vw,60px); }.three-words { margin-top: 1.2em; }
  .tragedy-content { left: 8%; top: 13%; width: 78%; }.tragedy-content h2 { font-size: clamp(76px,20vw,130px); }.tragedy-content .eyebrow { max-width: 80%; }.time-mark { margin: 2em 0 .7em; }.tragedy-lede { font-size: 24px; }.tragedy-copy { font-size: 13px; }.tragedy-footnote { font-size: 13px; }.tragedy-photo img { object-position: 70% center; }.tragedy-shade { background: linear-gradient(90deg,rgba(12,22,26,.94),rgba(12,22,26,.72)); }.tragedy-vertical { display: none; }.tragedy-photo figcaption { max-width: 80%; bottom: 18%; }
  .slide-impact { grid-template-columns: 1fr; grid-template-rows: auto 38%; align-content: center; }.impact-panel { padding: 3% 0 0; }.impact-panel h2 { font-size: clamp(40px,10vw,62px); }.impact-mark { position: absolute; right: 8%; top: 12%; font-size: 54px; }.estimate { margin-top: 1.2em; }.impact-art { grid-row: 2; height: 100%; margin: 2% 0 0; }
  .slide-recovery { grid-template-columns: 1fr; grid-template-rows: 43% 57%; align-content: center; }.recovery-photo { grid-row: 1; height: 100%; margin: 2% 0; }.recovery-copy { padding: 5% 0 0; }.recovery-copy h2 { font-size: clamp(40px,10vw,62px); }.recovery-date { margin-top: 1em; }
  .law-copy { left: 7%; top: 19%; width: 78%; }.law-copy h2 { font-size: clamp(42px,11vw,68px); }.law-year { right: 8%; top: 15%; font-size: 100px; }.law-image { right: 9%; bottom: 20%; width: 45%; height: 27%; }.law-bottom { left: 7%; bottom: 15%; width: 50%; line-height: 1.8; font-size: 7px; }.law-bottom span { padding: 0 .25em; }
  .slide-park { grid-template-columns: 1fr; grid-template-rows: 52% 48%; padding: 0; }.park-image { grid-row: 1; height: 100%; }.park-panel { padding: 7% 8%; }.park-panel h2 { font-size: clamp(37px,10vw,58px); }.park-panel .body-copy { font-size: 13px; }.park-caption { margin-top: 1em; }
  .slide-dome { grid-template-columns: 1fr; grid-template-rows: 48% 52%; padding: 0; }.dome-photo { grid-row: 1; height: 100%; }.dome-copy { padding: 6% 8%; }.dome-copy h2 { margin: .3em 0; font-size: clamp(36px,10vw,58px); }.dome-copy .body-copy { font-size: 13px; }.heritage-tag { margin-top: 1em; }.dome-note { margin-top: 1em; }.dome-vertical { display: none; }
  .slide-cranes { grid-template-columns: 1fr; grid-template-rows: 48% 47%; align-content: center; }.cranes-copy { padding: 4% 0 0; }.cranes-copy h2 { font-size: clamp(38px,10vw,60px); }.cranes-photo { grid-row: 2; width: 80%; height: 100%; margin: 1% 0 0; }.peace-line { margin-top: 1em; }.crane-motif { top: 35%; }
  .ceremony-content { left: 8%; top: 20%; width: 83%; }.ceremony-date { font-size: clamp(90px,24vw,150px); }.slide-ceremony h2 { font-size: clamp(44px,11vw,68px); }.slide-ceremony .body-copy { font-size: 13px; }.ceremony-foot { left: 8%; bottom: 18%; font-size: 7px; }
  .slide-culture { grid-template-columns: 1fr; grid-template-rows: 42% 58%; padding-top: 15%; }.culture-heading { grid-column: 1; grid-row: 1; padding: 4% 0 0; }.culture-heading h2 { font-size: clamp(40px,10vw,62px); }.culture-heading p { max-width: 100%; font-size: 16px; }.culture-main { grid-column: 1; grid-row: 2; margin: 2% 0 0; }.culture-callout { bottom: 19%; left: 8%; }.culture-side-note { bottom: 19%; right: 8%; font-size: 12px; max-width: 150px; }
  .slide-kagura { grid-template-columns: 1fr; grid-template-rows: 44% 56%; align-content: center; }.kagura-photo { grid-row: 1; height: 100%; margin: 2% 0; }.kagura-copy { padding: 4% 0 0; }.kagura-copy h2 { font-size: clamp(39px,10vw,60px); }.kagura-copy .body-copy { font-size: 13px; }.kagura-stamp { margin-top: 1em; }.kagura-note { margin-top: 1em; }
  .slide-food { grid-template-columns: 1fr; grid-template-rows: 44% 45%; align-content: center; }.food-intro { padding: 4% 0 0; }.food-intro h2 { font-size: clamp(38px,10vw,60px); }.food-main { grid-row: 2; height: 100%; margin: 2% 0 0; }.food-sequence { bottom: 17%; right: 8%; gap: 6px; font-size: 7px; }.food-aside { bottom: 17%; left: 8%; max-width: 28%; font-size: 12px; }
  .slide-local-food { grid-template-columns: 1fr 1fr; grid-template-rows: auto 42% auto; align-content: center; }.local-food-title { grid-column: 1 / 3; grid-row: 1; padding: 2% 0 4%; }.local-food-title h2 { font-size: clamp(38px,10vw,60px); }.oyster-photo { grid-column: 1; grid-row: 2; height: 100%; margin: 0 4% 0 0; }.sweets-photo { grid-column: 2; grid-row: 2; height: 100%; margin: 0 0 0 4%; }.local-food-notes { grid-column: 1 / 3; grid-row: 3; display: grid; grid-template-columns: 1fr 1fr; gap: 1em; padding: 7% 0 0; }.local-food-notes article { margin: 0; }.local-food-notes p { font-size: 11px; }
  .slide-attractions { padding-top: 14%; }.attractions-title { position: static; display: block; width: auto; margin-top: 7%; }.attractions-title h2 { width: 100%; font-size: clamp(36px,9vw,56px); }.attractions-title > p { margin-top: .5em; font-size: 14px; }.attraction-grid { top: 39%; bottom: 14%; grid-template-columns: 1fr 1fr 1fr; gap: 3%; }.attraction-card figure { height: 41%; }.attraction-card h3 { font-size: 15px; }.attraction-card p { font-size: 9px; line-height: 1.3; }.attraction-number { font-size: 7px; }.attractions-note { bottom: 12%; font-size: 8px; }
  .close-content { left: 8%; top: 12%; width: 80%; }.close-kanji { margin: .2em 0; font-size: 40px; }.close-content h2 { font-size: clamp(44px,11vw,68px); }.close-copy { font-size: 14px; }.qa { font-size: 25px; }.close-footer { left: 7%; right: 7%; bottom: 18%; font-size: 7px; }.close-photo img { object-position: 62% center; }
  .deck-controls { width: calc(100vw - 24px); gap: 3px; min-height: 58px; padding: 5px; }.control-button { width: 44px; height: 44px; min-width: 44px; min-height: 44px; }.fullscreen-toggle, .credits-toggle { width: 44px; min-width: 44px; }.progress-wrap { gap: 3px 6px; }.slide-count { font-size: 12px; }.slide-name { font-size: 8px; }.credits-dialog { padding: 20px; }.credits-list { grid-template-columns: 1fr; max-height: 42vh; }
}
@media (max-width: 390px) {
  .fullscreen-toggle, .credits-toggle { width: 44px; min-width: 44px; }
  .slide { padding-left: 6%; padding-right: 6%; }
  .section-head { left: 6%; right: 6%; }
  .attraction-grid { left: 6%; right: 6%; gap: 2%; }.attraction-card h3 { font-size: 13px; }.attraction-card p { font-size: 8px; }
  .deck-controls { gap: 1px; }.control-button { width: 44px; min-width: 44px; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior: auto !important; animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
}
@media (prefers-contrast: more) {
  :root { --muted: #3e4b4c; --line: rgba(21,42,56,.5); }
  .body-copy { color: #263c43; }
}