*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;background:#e7e2d8;color:#171714;font-family:Arial,Helvetica,sans-serif}a{color:inherit;text-decoration:none}button{font:inherit}header{position:fixed;z-index:20;top:0;left:0;right:0;height:64px;padding:0 4vw;display:flex;align-items:center;justify-content:space-between;background:#111;color:#eee;border-bottom:1px solid #333}.brand{font-weight:800;letter-spacing:.08em}.brand small{font-size:8px;font-weight:400;margin-left:12px;color:#999}nav{display:flex;gap:24px;font-size:11px;letter-spacing:.12em}#menu{display:none;background:none;border:0;color:white;font-size:22px}.intro{position:fixed;inset:0;background:#000;z-index:100;display:grid;place-items:center}.intro video{width:100%;height:100%;object-fit:contain}.intro button{position:absolute;right:3vw;bottom:3vw;background:none;color:#aaa;border:1px solid #555;padding:10px 14px}.hero{height:100vh;min-height:650px;position:relative;background:#111;color:white;overflow:hidden}.hero>video{width:100%;height:100%;object-fit:cover;filter:grayscale(1);opacity:.58}.shade{position:absolute;inset:0;background:linear-gradient(90deg,rgba(0,0,0,.8),transparent 65%),linear-gradient(0deg,rgba(0,0,0,.55),transparent 45%)}.heroCopy{position:absolute;left:7vw;top:50%;transform:translateY(-45%)}.heroCopy p,.eyebrow{font-size:10px;letter-spacing:.22em}.hero h1{font-family:Georgia,serif;font-size:clamp(64px,10vw,150px);line-height:.76;margin:24px 0 36px;font-weight:400}.heroCopy button{background:none;color:white;border:1px solid #aaa;padding:12px 16px;font-size:10px;letter-spacing:.14em}.scroll{position:absolute;bottom:30px;right:5vw;font-size:11px;letter-spacing:.16em}.panel,.dark{padding:110px 6vw}.dark{background:#151514;color:#ddd}.head{display:grid;grid-template-columns:60px 1fr 1fr;gap:25px;align-items:end;margin-bottom:55px;border-bottom:1px solid currentColor;padding-bottom:22px}.head b{font-size:11px}.head h2{font-family:Georgia,serif;font-size:54px;font-weight:400;margin:0}.head p{margin:0;color:#777}.filters{display:flex;gap:10px;margin-bottom:25px}.filters button{background:none;border:1px solid #999;padding:8px 12px;font-size:10px}.filters .active{background:#111;color:white}.grid{display:grid;grid-template-columns:repeat(4,1fr);gap:2px}.card{height:340px;position:relative;overflow:hidden;background:#222;color:#fff;cursor:pointer}.card img{width:100%;height:100%;object-fit:cover;filter:grayscale(1);transition:.4s}.card:hover img{filter:grayscale(.2);transform:scale(1.025)}.card .cap{position:absolute;inset:auto 0 0;padding:60px 18px 18px;background:linear-gradient(transparent,rgba(0,0,0,.85))}.cap h3{font-family:Georgia,serif;font-size:24px;margin:0 0 5px}.cap p{font-size:10px;margin:0;color:#bbb}.missing{display:grid;place-items:center;height:100%;background:#333}.mapList{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:#444}.place{background:#151514;padding:30px;min-height:150px}.place b{font-family:Georgia,serif;font-size:28px}.place p{color:#888;font-size:12px}.timeList{border-left:1px solid #555;margin-left:15px}.time{display:grid;grid-template-columns:130px 1fr;gap:30px;padding:0 0 34px 28px;position:relative}.time:before{content:'';width:7px;height:7px;border-radius:50%;background:#111;position:absolute;left:-4px;top:5px}.time b{font-size:12px}.time h3{font-family:Georgia,serif;margin:0;font-size:24px;font-weight:400}.blogList{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:#444}.blog{background:#151514;padding:28px;min-height:190px;cursor:pointer}.blog small{color:#777}.blog h3{font-family:Georgia,serif;font-size:23px;font-weight:400}.about{padding:14vw 12vw;background:#c9c0ae}.about h2{font-family:Georgia,serif;font-weight:400;font-size:clamp(38px,6vw,90px);max-width:1100px}.about>p:last-child{max-width:650px;line-height:1.7}dialog{width:min(1100px,94vw);height:min(780px,92vh);padding:0;border:0;background:#111;color:#eee}dialog::backdrop{background:rgba(0,0,0,.8)}.x{position:fixed;right:4vw;top:4vh;z-index:3;border:0;background:#fff;width:38px;height:38px;font-size:25px}.storyView{display:grid;grid-template-columns:1fr 1fr;min-height:100%}.storyImage img{width:100%;height:100%;object-fit:cover;filter:grayscale(1)}.storyText{padding:60px;overflow:auto}.storyText h2{font-family:Georgia,serif;font-size:48px;font-weight:400}.storyText .meta{font-size:11px;color:#999;letter-spacing:.1em}.storyText p{line-height:1.65;color:#ccc}.storyText .videoNote{border-top:1px solid #444;padding-top:20px;color:#888;font-size:11px}.diaryText{max-width:760px;margin:auto;padding:70px 35px}.diaryText h2{font-family:Georgia,serif;font-size:44px;font-weight:400}.diaryText p{white-space:pre-line;line-height:1.75;color:#ccc}@media(max-width:850px){nav{display:none}nav.open{display:flex;position:absolute;top:64px;left:0;right:0;background:#111;padding:25px;flex-direction:column}#menu{display:block}.head{grid-template-columns:40px 1fr}.head p{grid-column:2}.grid{grid-template-columns:1fr 1fr}.mapList,.blogList{grid-template-columns:1fr 1fr}.storyView{grid-template-columns:1fr}.storyImage{height:40vh}.storyText{padding:30px}}@media(max-width:520px){.grid,.mapList,.blogList{grid-template-columns:1fr}.card{height:420px}.panel,.dark{padding:90px 18px}.head h2{font-size:42px}}/* v3 — digital restoration refinements */
:root{--paper:#e7e2d8;--ink:#171714;--night:#151514;--line:#4b4944}body{overflow-x:hidden}.modalOpen{overflow:hidden}.card{animation:cardIn .55s both;animation-delay:var(--delay,0ms)}@keyframes cardIn{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}.cap small{font-size:9px;letter-spacing:.16em;color:#aaa}.subtitle{font-family:Georgia,serif;font-style:italic;color:#aaa;font-size:17px;margin:-24px 0 30px;line-height:1.4}.mediaBlock{margin-top:36px;border-top:1px solid #444;padding-top:18px}.mediaBlock video{display:block;width:100%;max-height:420px;background:#000}.mediaLabel{font-size:9px;letter-spacing:.18em;color:#999;margin-bottom:10px}.galleryMedia{margin-top:24px}.storyImage{position:relative;background:#050505}.storyIndex{position:absolute;left:18px;bottom:16px;background:rgba(0,0,0,.65);padding:7px 9px;font-size:9px;letter-spacing:.18em}.place,.time{appearance:none;color:inherit;text-align:left;border:0;font:inherit;cursor:pointer}.place{position:relative}.place .dot{display:block;width:7px;height:7px;border-radius:50%;background:#aaa;margin-bottom:24px;transition:.25s}.place:hover .dot{transform:scale(1.8);background:#fff}.place em{display:block;font-style:normal;font-size:9px;letter-spacing:.15em;color:#777;margin-top:8px}.time{width:100%;background:transparent}.time:hover h3{text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:5px}.head,.about{opacity:.55;transform:translateY(8px);transition:.7s}.head.seen,.about.seen{opacity:1;transform:none}.about:after{content:'ORIGINAL FLASH EDITION · 2010   /   HTML5 RESTORATION · 2026';display:block;margin-top:70px;padding-top:18px;border-top:1px solid rgba(0,0,0,.35);font-size:9px;letter-spacing:.2em}.videoNote b{font-weight:400;color:#bbb}@media(max-width:850px){.mediaBlock video{max-height:55vh}.subtitle{margin-top:-15px}.storyIndex{bottom:10px}}

/* v3.3 intro controls */
.intro{transition:opacity .18s ease}.intro.introOut{opacity:0;pointer-events:none}.intro video{pointer-events:none}.intro button{z-index:102;pointer-events:auto;cursor:pointer;min-width:112px;background:rgba(0,0,0,.55)}.intro button:hover,.intro button:focus{color:#fff;border-color:#aaa;outline:none}


/* v3.5 — explicit modal return controls */
dialog{position:relative;overflow:hidden}
.x{position:absolute;right:18px;top:18px;z-index:20;width:auto;height:auto;min-height:38px;padding:10px 14px;border:1px solid #777;background:rgba(17,17,17,.92);color:#eee;font-size:10px;line-height:1;letter-spacing:.12em;cursor:pointer;white-space:nowrap}
.x:hover,.x:focus{background:#eee;color:#111;border-color:#eee;outline:none}
.storyText{padding-top:74px}
.diaryText{padding-top:82px}
@media(max-width:850px){.x{position:fixed;right:12px;top:76px}.storyText{padding-top:72px}}

/* v3.6 — recovered media is intentionally visible before the transcript */
.mediaNav{display:flex;gap:8px;flex-wrap:wrap;margin:0 0 18px}.mediaNav span{border:1px solid #555;padding:7px 9px;font-size:8px;letter-spacing:.16em;color:#aaa}.storyCopy{margin-top:34px;border-top:1px solid #333;padding-top:22px}.storyText>.mediaBlock{margin-top:18px}.storyText>.mediaBlock+.mediaBlock{margin-top:22px}

/* v3.7 — keep both original media components explicit and visible */
.storyMediaPair{display:grid;grid-template-columns:1fr;gap:22px;margin-top:10px}.storyMediaPair .mediaBlock{margin-top:0}.galleryMedia{display:block!important;visibility:visible!important;opacity:1!important}.mediaError{margin-top:10px}.mediaNav span:last-child{white-space:nowrap}@media(min-width:1180px){.storyMediaPair{grid-template-columns:1fr 1fr}.storyMediaPair .mediaBlock video{max-height:340px}}

/* v3.8 — long-form story reading + full-width multimedia */
#story{width:min(1240px,96vw);height:94vh;max-height:94vh;overflow-y:auto;overflow-x:hidden;scrollbar-gutter:stable;background:#111}
#storyBody{min-height:100%}
#story .x{position:sticky;float:right;right:18px;top:18px;margin:18px 18px -56px 0;z-index:30}
.storyDetail{min-height:100%;display:block;padding-bottom:70px}
.storyLead{display:grid;grid-template-columns:minmax(320px,44%) 1fr;min-height:620px;border-bottom:1px solid #333}
.storyLead .storyImage{min-height:620px;position:relative}
.storyLead .storyImage img{display:block;width:100%;height:100%;min-height:620px;object-fit:cover;filter:grayscale(1)}
.storyLead .storyText{padding:78px 64px 64px;overflow:visible}
.storyLead .storyText h2{font-size:clamp(42px,5vw,68px);line-height:.98;margin:22px 0 32px}
.storyLead .storyCopy{margin-top:34px;border-top:1px solid #333;padding-top:24px}
.storyLead .storyCopy p{font-size:17px;line-height:1.75;margin:0;color:#d1d1d1}
.storyMedia{max-width:1080px;margin:0 auto;padding:70px 48px 10px;display:grid;grid-template-columns:1fr;gap:64px}
.storyMedia .mediaBlock{margin:0;padding:0;border-top:0}
.storyMedia .mediaLabel{margin:0 0 14px;font-size:10px;letter-spacing:.2em;color:#aaa}
.storyMedia .mediaBlock video{width:100%;height:auto;max-height:none;aspect-ratio:16/9;object-fit:contain;background:#000;border:1px solid #2b2b2b}
.storyMedia .videoNote{margin:0;padding:24px 0;border-top:1px solid #444}
@media(max-width:850px){
  #story{width:100vw;height:100vh;max-height:100vh;margin:0}
  #story .x{position:sticky;top:10px;right:10px;margin:10px 10px -52px 0}
  .storyLead{grid-template-columns:1fr;min-height:0}
  .storyLead .storyImage{height:52vh;min-height:360px}
  .storyLead .storyImage img{height:100%;min-height:0}
  .storyLead .storyText{padding:54px 28px 44px}
  .storyLead .storyCopy p{font-size:16px}
  .storyMedia{padding:48px 18px 20px;gap:46px}
}


/* v4 — project credits */
.credits{background:#0f0f0e;color:#d8d8d4;padding:120px 12vw 100px;border-top:1px solid #2c2c29}.creditsInner{max-width:920px}.credits .eyebrow{color:#777;margin:0 0 34px}.credits h2{font-family:Georgia,serif;font-size:clamp(52px,7vw,96px);font-weight:400;line-height:.95;margin:0 0 58px;color:#eee}.creditsInner>p:not(.eyebrow){max-width:790px;font-family:Georgia,serif;font-size:clamp(18px,2vw,25px);line-height:1.65;color:#c9c9c5}.creditsLead{font-size:clamp(21px,2.25vw,29px)!important}.creditLines{margin-top:72px;padding-top:28px;border-top:1px solid #3b3b37;display:grid;grid-template-columns:repeat(3,1fr);gap:32px}.creditLines p{font-size:12px;line-height:1.65;margin:0;color:#ddd}.creditLines span{display:block;font-size:8px;letter-spacing:.18em;color:#777;margin-bottom:9px}@media(max-width:850px){.credits{padding:95px 28px 70px}.creditLines{grid-template-columns:1fr;gap:24px;margin-top:54px}.credits h2{margin-bottom:42px}}

.creditLines a{color:inherit;text-decoration:none;border-bottom:1px solid #666}.creditLines a:hover{color:#fff;border-bottom-color:#fff}

/* v4.2 — long Journey entries: independent, reliable modal scrolling */
#diary{
  width:min(980px,96vw);
  height:94vh;
  max-height:94vh;
  overflow-y:auto;
  overflow-x:hidden;
  scrollbar-gutter:stable;
  overscroll-behavior:contain;
  -webkit-overflow-scrolling:touch;
  background:#111;
}
#diaryBody{min-height:100%;}
#diary .x{
  position:sticky;
  float:right;
  right:18px;
  top:18px;
  margin:18px 18px -56px 0;
  z-index:30;
}
#diary .diaryText{
  max-width:760px;
  margin:0 auto;
  padding:78px 35px 90px;
}
#diary .diaryText p{
  overflow:visible;
}
@media(max-width:850px){
  #diary{
    width:100vw;
    height:100vh;
    max-height:100vh;
    margin:0;
  }
  #diary .x{
    position:sticky;
    top:10px;
    right:10px;
    margin:10px 10px -52px 0;
  }
  #diary .diaryText{
    padding:70px 24px 80px;
  }
}

/* v4.3 — photographic poster frames for original multimedia */
.mediaStage{position:relative;background:#050505;overflow:hidden;border:1px solid #2b2b2b}
.storyMedia .mediaStage video{display:block;width:100%;border:0;background:#050505}
.posterPlay{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:68px;height:68px;border-radius:50%;border:1px solid rgba(255,255,255,.75);background:rgba(0,0,0,.38);color:#fff;font-size:22px;line-height:1;cursor:pointer;backdrop-filter:blur(2px);transition:background .2s,transform .2s,opacity .2s}
.posterPlay:hover{background:rgba(0,0,0,.62);transform:translate(-50%,-50%) scale(1.04)}
.posterPlay.hidden{opacity:0;pointer-events:none}
@media(max-width:600px){.posterPlay{width:56px;height:56px;font-size:18px}}
/* v4.4 — public-facing media fallback: no technical path/error messages */

/* v4.6 — intro audio control */
.introControls{position:absolute;right:3vw;bottom:3vw;z-index:102;display:flex;align-items:center;gap:10px;color:#777;font-size:10px;letter-spacing:.14em}.intro .introControls button{position:static;right:auto;bottom:auto;min-width:0;border:0;border-bottom:1px solid #555;padding:8px 2px;background:rgba(0,0,0,.35);color:#aaa;letter-spacing:.14em}.intro .introControls button:hover,.intro .introControls button:focus{color:#fff;border-bottom-color:#aaa}.intro .introControls span{color:#555}
/* v4.7 — corrected historical timeline */
.time:not(button){cursor:default}.time:not(button):hover h3{text-decoration:none}.time small{display:block;margin-top:7px;line-height:1.55;color:#777;max-width:760px}.time.linked small{color:#666}.time.linked:hover small{color:#333}
.dark .time.linked:hover small{color:#aaa}
/* v4.8 — robust poster layer independent of the native video poster rendering */
.mediaStage{aspect-ratio:16/9}
.mediaPoster{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:1;background:#050505;transition:opacity .2s ease}
.mediaStage .posterPlay{z-index:2}
.mediaStage.isPlaying .mediaPoster{opacity:0;pointer-events:none}
.mediaStage.isPlaying .posterPlay{opacity:0;pointer-events:none}

/* v4.9 — archive portraits and project recognition */
.card img,.card:hover img,.storyLead .storyImage img{filter:none}
.card img,.storyLead .storyImage img{object-position:center center}
.card img[src$="story_back_7.jpg"],.storyLead img[src$="story_back_7.jpg"]{object-position:38% center}
.card img[src$="story_back_15.jpg"],.storyLead img[src$="story_back_15.jpg"]{object-position:center 42%}
.creditsPhoto{margin:72px 0 0;max-width:920px}.creditsPhoto img{display:block;width:100%;height:auto}.creditsPhoto figcaption{margin-top:12px;font-size:10px;line-height:1.5;letter-spacing:.05em;color:#777}.recognition{margin-top:72px;padding-top:28px;border-top:1px solid #3b3b37;max-width:790px}.recognitionLabel{margin:0 0 18px!important;font-family:Arial,Helvetica,sans-serif!important;font-size:8px!important;letter-spacing:.18em;color:#777!important}.recognition h3{margin:0 0 10px;font-family:Georgia,serif;font-size:clamp(24px,3vw,36px);font-weight:400;color:#eee}.recognition>p:last-child{margin:0;font-family:Arial,Helvetica,sans-serif;font-size:12px;line-height:1.65;color:#aaa}@media(max-width:850px){.creditsPhoto,.recognition{margin-top:54px}}

/* v5.0 — reliable media launch + restored monochrome-to-colour story cards */
.mediaStage{position:relative;aspect-ratio:16/9;background:#050505;overflow:hidden}
.mediaStage>video{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;background:#050505;z-index:0}
.mediaCover{position:absolute;inset:0;z-index:3;width:100%;height:100%;padding:0;border:0;background:#050505;cursor:pointer;overflow:hidden}
.mediaCover .mediaPoster{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:1;pointer-events:none}
.mediaCover .posterPlay{z-index:4;pointer-events:none}
.mediaStage.isPlaying .mediaCover{opacity:0;visibility:hidden;pointer-events:none;transition:opacity .18s ease,visibility 0s linear .18s}
.card img{filter:grayscale(1);transition:filter .38s ease,transform .4s ease}
.card:hover img{filter:grayscale(0);transform:scale(1.025)}
.storyLead .storyImage img{filter:none}

/* v5.1 — optical play centering + mobile polish */
.posterPlay{
  display:grid;
  place-items:center;
  font-size:0;
  line-height:0;
}
.posterPlay::before{
  content:"";
  display:block;
  width:0;
  height:0;
  border-top:8px solid transparent;
  border-bottom:8px solid transparent;
  border-left:13px solid #fff;
  transform:translateX(2px);
}
@media(max-width:600px){
  .posterPlay::before{border-top-width:7px;border-bottom-width:7px;border-left-width:11px;transform:translateX(2px)}
}
@media(hover:none){
  .card:active img{filter:grayscale(.15);transform:scale(1.012)}
  .filters button,.heroCopy button,.intro .introControls button{min-height:44px}
}
@media(max-width:520px){
  .hero{min-height:100svh;height:100svh}
  .heroCopy{left:24px;right:24px}
  .hero h1{font-size:clamp(58px,20vw,92px)}
  .storyMedia .mediaStage{aspect-ratio:16/9}
  .mediaCover{touch-action:manipulation}
}

/* v5.4 — robust full-screen story modal on phones / iOS Safari */
@media(max-width:850px){
  #story[open]{
    display:block !important;
    position:fixed !important;
    inset:0 !important;
    width:100dvw !important;
    max-width:none !important;
    height:100dvh !important;
    max-height:none !important;
    margin:0 !important;
    padding:0 !important;
    border:0 !important;
    overflow-y:auto !important;
    overflow-x:hidden !important;
    z-index:1000 !important;
    -webkit-overflow-scrolling:touch;
    overscroll-behavior:contain;
  }
  #story::backdrop{background:rgba(0,0,0,.88)}
  #storyBody{display:block !important;width:100%;min-height:100%;}
  #story .storyDetail{display:block !important;width:100%;min-height:100%;}
  #story .storyLead{display:block !important;width:100%;}
  #story .storyLead .storyImage{width:100%;height:46svh;min-height:300px;}
  #story .storyLead .storyText{display:block !important;width:100%;padding:58px 24px 42px;}
  #story .storyMedia{display:block !important;width:100%;padding:44px 16px 36px;}
  #story .storyMedia .mediaBlock{margin-bottom:46px;}
  #story .x{position:sticky !important;top:10px;right:10px;float:right;z-index:1100;}
}

/* v5.5 — refined play button proportions and optical centering */
.posterPlay{
  width:54px;
  height:54px;
}
.posterPlay::before{
  border-top-width:8px;
  border-bottom-width:8px;
  border-left-width:13px;
  transform:translate(2px,1px);
}
@media(max-width:600px){
  .posterPlay{width:48px;height:48px}
  .posterPlay::before{
    border-top-width:7px;
    border-bottom-width:7px;
    border-left-width:12px;
    transform:translate(2px,1px);
  }
}