/* Bali: clear ocean, green volcanic highlands, and ceremonial gold. */
:root {
  --paper: #fffdf8;
  --ink: #143f4b;
  --muted: #526b72;
  --line: #d2e3e1;
  --gold: #966b17;
  --light: #edf7ee;
  --ocean: #087b8c;
  --ocean-deep: #075968;
  --ocean-pale: #eaf9fb;
  --volcano: #26704d;
  --volcano-pale: #edf7ee;
  --sacred: #e7b54b;
  --sacred-pale: #fff3d9;
}

body { background: var(--paper); }
h1 em, h2 em { color: var(--ocean); }
.header { background: rgba(255, 253, 248, .98); border-bottom-color: #bcdedc; }
.header::after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  bottom: -2px;
  height: 3px;
  background: linear-gradient(90deg, #2bb6ca 0%, #78cdb1 52%, #e7b54b 100%);
}
.brand small { color: var(--ocean-deep); }
.header nav a:hover { color: var(--ocean); }
.hero-copy {
  background: radial-gradient(ellipse at 0 0, #fff2d9 0%, transparent 56%),
    linear-gradient(145deg, #fffdf8 20%, #eaf9fb 100%);
}
.hero .eyebrow, .hero-foot { color: var(--ocean-deep); }
.live-dot { background: #29a697; }
.fine-line { background: var(--sacred); }
.hero-description { color: #405f68; }
.primary { background: var(--ocean); color: #fff; }
.primary:hover { background: var(--ocean-deep); }
.hero-image { background: #80bfa9; }
.hero-image > img { filter: none; }
.hero-image::after {
  background: linear-gradient(180deg, rgba(7, 45, 56, .38) 0%, transparent 33%,
    rgba(7, 45, 56, .08) 56%, rgba(7, 45, 56, .78) 100%);
}
.hero-image figcaption { color: #fff8e6; }
.caption-rule { background: #f4ca70; }
.facts { background: #fff; }
.fact-value, .fact-location strong { color: var(--ocean-deep); }
.facts > div > span:last-child { color: var(--muted); }
.location-symbol { color: #bc8522; }
.about { background: #fffdf8; }
.about-columns > div, .field-copy > p:not(.eyebrow),
.people-heading > p, .person-bio, .dialog-help { color: #48636a; }
.field { background: #fff; }
.field-main, .field-images figcaption { background: #eef8f7; }
.field-images figcaption { color: #45636b; }
.field-secondary { border-color: #fff; box-shadow: 0 12px 30px #07596818; }
.timeline b { color: var(--ocean-deep); }
.timeline > .history-psn {
  background: var(--sacred-pale);
  border: 1px solid #e8cc91;
  padding: 14px 12px;
  margin-top: 8px;
}
.field-copy > p.history-source {
  color: var(--muted);
  font-size: 10px;
  line-height: 1.8;
  margin-top: 16px;
}

/* Clear-water backgrounds keep news inviting and easy to scan. */
.news { background: var(--ocean-pale); border-color: #cce7e8; }
.news-heading > p, .news-card > p, .news-card .news-featured-copy > p,
.article-body p { color: #45636b; }
.news-filters button, .research-views button { border-color: #8bbdbf; background: #ffffff70; }
.news-filters button[aria-pressed=true], .research-views button[aria-pressed=true] {
  background: var(--ocean);
  border-color: var(--ocean);
  color: #fff;
}
.news-card { background: #fff; border-color: #c9e3e5; }
.news-meta, .news-editorial-note, .article-date-note,
.article-images figcaption, .article-sources p, .article-sources a { color: #526b72; }
.news-category { color: var(--ocean-deep); }
.news-read:hover, .article-sources a:hover { color: var(--ocean); }
.news-featured {
  background: linear-gradient(120deg, #fff9ea, #fff0d0);
  color: var(--ink);
  border-color: #e8cc91;
}
.news-featured .news-category { color: #85601b; }
.news-featured .news-meta { color: #6b644f; }
.news-featured .news-featured-copy > p { color: #5d6359; }
.news-featured .news-read { color: var(--ocean-deep); border-color: #ddc58f; }
.news-featured .news-read:hover { color: #85601b; }
.psn-mark { background: #ffffff60; border-color: #c99b3a; }
.psn-mark::before { border-color: #d9b36380; }
.psn-mark strong { color: #866018; }
.psn-mark span { color: #5f6250; }
.news-archive-card { background: #f7fdfe; }
.article-context { border-color: var(--sacred); }
.article-context p { color: #626550; }
.article-images img { background: #edf8f8; }

/* Green highlands identify the resource and development sections. */
.project, .research { background: var(--volcano-pale); }
.project h2 em, .research h2 em { color: var(--volcano); }
.project-intro > p, .project-note, .research-heading > p,
.research-reading-note p, .study-summary { color: #45634f; }
.phase-selector, .phase-tab { border-color: #b0d4bc; }
.phase-tab.active { background: #d9efdf; color: #205e40; }
.phase-tab:hover { background: #e1f3e5; }
.phase-number { color: #526e5c; }
.phase-panel {
  background: linear-gradient(135deg, #fffef8, #dbf0e0);
  color: #205e40;
  border: 1px solid #b5d9bf;
}
.phase-panel .eyebrow { color: #42694d; }
.phase-panel > p:not(.eyebrow) { color: #41654d; }
.phase-cumulative { border-color: #adcdb4; color: #476b54; }
.phase-cumulative strong { color: #205e40; }
.phase-copy { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.phase-year { color: #26704d; font-size: 14px; font-weight: 700; line-height: 1.4; }
.phase-target { display: flex; align-items: baseline; gap: 12px; margin: 4px 0 20px; color: #2f6944; }
.phase-target > span { font-size: 11px; }
.phase-target > strong { font-size: 32px; line-height: 1; font-weight: 500; }
.schedule-source { margin-top: 24px; padding: 20px 24px; border-left: 3px solid #b5944b; background: #fffdf5; color: #456451; }
.schedule-source h3 { font-size: 14px; font-weight: 600; margin: 0 0 10px; }
.schedule-source p { max-width: 1000px; font-size: 12px; line-height: 1.9; }
.schedule-source p + p { margin-top: 8px; }
.schedule-links { display: flex; flex-wrap: wrap; gap: 10px 24px; margin-top: 14px; }
.schedule-links a { font-size: 12px; color: #205e40; text-decoration: underline; text-underline-offset: 4px; }
@media (max-width: 600px) {
  .phase-year { font-size: 13px; }
  .schedule-source { padding: 17px; }
  .schedule-links { flex-direction: column; gap: 12px; }
}
.research-feature {
  background: linear-gradient(120deg, #fcfff9, #dff2e5);
  color: #205e40;
  border: 1px solid #b9d9c2;
}
.research-number { border-color: #adcdb4; }
.research-number strong { color: #26704d; }
.research-number > span, .research-feature .eyebrow,
.research-feature p:not(.eyebrow) { color: #41654d; }
.research-jump { color: #205e40; border-color: #74a987; }
.research-reading-note { border-color: var(--sacred); }
.study-card, .research-footnote { border-color: #bdd9c5; }
.study-date strong { color: var(--volcano); }
.study-date span, .study-org, .research-footnote { color: #506b58; }
.study-metric { color: #815c16; }
.study-scope-note {
  max-width: 830px;
  padding: 12px 16px;
  margin-top: 16px;
  border-left: 2px solid #74a987;
  background: #fffef8;
  color: #42634d;
  font-size: 12px;
  line-height: 1.85;
}
.study-details summary, .study-group-title { color: #2d6744; }
.study-detail-block { background: #fffef8; border-color: #9ac3a6; }
.study-detail-block h5, .study-details .study-detail-block p { color: #42634d; }

/* Warm white and gold echo Bali's sacred places and hospitality. */
.approach {
  background: linear-gradient(130deg, #fff8e9, #fff2d7);
  border-color: #ead8b5;
}
.approach h2 em { color: #876322; }
.approach-heading > p, .principles p { color: #65614f; }
.principles article { border-color: #d8bb7b; }
.principle-index { color: #997021; }
.people { background: #fffaf0; border-color: #e7dcc6; }
.people-group-title { border-color: #dfcda8; }
.person-role { color: #85601b; }
.person-education { color: #5b6e67; }
.person-header img, .team-person > img { background: #eef6ec; }
.questions { background: #fff; }
.faq-list, .questions details { border-color: #d2e3e1; }
.questions details p { color: #48636a; }
.enquiries {
  background: linear-gradient(120deg, #d9f4f5, #eefbf7 65%, #fff4da);
  color: var(--ink);
  border-top: 1px solid #bcdedc;
}
.enquiry-copy .eyebrow, .enquiry-meta > span { color: var(--ocean-deep); }
.enquiry-copy h2 em { color: var(--ocean); }
.enquiry-copy > p:not(.eyebrow) { color: #405f68; }
.enquiries .cream { background: var(--ocean); color: #fff; }
.enquiries .cream:hover { background: var(--ocean-deep); }
.enquiry-art i { border-color: #30a5b333; }
.footer { background: #fffdf8; }
.footer-bottom { color: #526b72; }
dialog { background: #fffdf8; border-color: #a5ccce; }
dialog::backdrop { background: #103b4a99; }
input, textarea, form select { border-color: #93b9bb; background: #fff; }

@media (max-width: 600px) {
  .research-number { border-color: #adcdb4; }
}

/* Original source maps retain their legends, scale and attribution. */
.project-map { margin-top: 64px; padding-top: 44px; border-top: 1px solid #a9d1d0; scroll-margin-top: 100px; }
.map-heading { display: grid; grid-template-columns: 1fr 1.2fr; gap: 40px; align-items: end; margin-bottom: 30px; }
.map-heading h3 { font-size: clamp(25px, 3vw, 38px); font-weight: 500; line-height: 1.25; color: var(--ocean-deep); margin: 10px 0 0; }
.map-heading > p { color: #48636a; font-size: 14px; line-height: 1.9; margin: 0; }
.map-grid { display: grid; grid-template-columns: 1fr 1.25fr; gap: 26px; align-items: start; }
.map-figure { margin: 0; min-width: 0; background: #fffdf8; border: 1px solid #b9d6d3; padding: 22px; }
.map-caption-heading { margin-bottom: 18px; }
.map-caption-heading > span { color: #85601b; font-size: 12px; letter-spacing: .12em; }
.map-caption-heading h4 { margin: 8px 0 0; font-size: 20px; font-weight: 500; color: var(--ocean-deep); }
.map-image-button { display: block; width: 100%; padding: 0; border: 0; background: #fff; cursor: zoom-in; }
.map-image-button img { display: block; width: 100%; height: auto; object-fit: contain; }
.map-figure figcaption p { margin: 18px 0 0; color: #405f68; font-size: 13px; line-height: 1.8; }
.map-figure figcaption .map-source { font-size: 11px; color: #617772; }
.map-expand { display: flex; justify-content: space-between; width: 100%; gap: 15px; margin-top: 20px; padding: 12px 0 0; border: 0; border-top: 1px solid #c8ded7; background: transparent; color: var(--ocean-deep); cursor: pointer; font-size: 13px; text-align: left; }
.map-note { font-size: 12px; color: #526b72; line-height: 1.8; margin: 20px 0 0; max-width: 950px; }
#project-map-dialog { width: min(94vw, 1320px); max-width: 94vw; max-height: 92dvh; padding: 0; overflow: hidden; }
.map-dialog-header { display: flex; align-items: center; gap: 16px; padding: 16px 20px; border-bottom: 1px solid #c8ded7; }
.map-dialog-header h2 { flex: 1; margin: 0; font-size: 21px; line-height: 1.3; }
#map-zoom { border: 1px solid #86aaa7; border-radius: 0; background: #fff; color: var(--ocean-deep); padding: 10px 14px; cursor: pointer; font-size: 12px; }
#map-zoom[aria-pressed="true"] { background: var(--ocean-deep); color: #fff; }
.map-close { position: static; flex: 0 0 44px; width: 44px; height: 44px; padding: 0; border: 0; background: transparent; color: var(--ink); font-size: 30px; cursor: pointer; }
#project-map-view { overflow: auto; max-height: calc(92dvh - 85px); background: #fff; padding: 12px; }
#project-map-view img { display: block; width: 100%; height: auto; max-width: none; }
#project-map-view.zoomed img { width: 180%; }
.map-image-button:focus-visible, .map-expand:focus-visible, #map-zoom:focus-visible, .map-close:focus-visible, #project-map-view:focus-visible { outline: 3px solid #c89b35; outline-offset: 3px; }
@media (max-width: 850px) {
  .map-heading, .map-grid { grid-template-columns: 1fr; gap: 24px; }
  .map-image-button { max-width: 780px; margin-inline: auto; }
}
@media (max-width: 600px) {
  .project-map { margin-top: 42px; padding-top: 32px; }
  .map-figure { padding: 16px; }
  .map-dialog-header { padding: 10px 12px; gap: 8px; }
  .map-dialog-header h2 { font-size: 16px; }
  #map-zoom { padding: 8px; }
  #project-map-view { padding: 6px; }
}

/* Keep the two planning alternatives readable next to each development stage. */
.phase-capacity { font-size: 28px; }
.phase-year { font-size: 12px; }
.phase-big { font-size: clamp(48px, 5.2vw, 66px); white-space: nowrap; }
.capacity-note { margin-top: 28px; padding: 22px 24px; background: #f9fcf3; border: 1px solid #b5d9bf; color: #355d43; }
.capacity-note h3 { margin: 0 0 12px; font-size: 15px; font-weight: 600; }
.capacity-note p { font-size: 13px; line-height: 1.9; }
.capacity-note p + p { margin-top: 8px; }
.capacity-note .capacity-range-note { font-size: 12px; color: #536e58; }
@media (max-width: 820px) and (min-width: 601px) {
  .phase-layout { grid-template-columns: 1fr; }
}
@media (max-width: 600px) {
  .phase-tab { grid-template-columns: 20px minmax(0, 1fr) auto 16px; gap: 8px; }
  .phase-capacity { font-size: 25px; }
  .phase-year { font-size: 11px; }
  .phase-big { font-size: clamp(45px, 12vw, 62px); }
  .capacity-note { padding: 18px; }
}

/* A sunlit Bali cover: open space and a clear image without a dark overlay. */
.header { background: rgba(255, 255, 255, .98); }
.hero {
  grid-template-columns: .95fr 1.15fr;
  align-items: center;
  min-height: 610px;
  background: radial-gradient(ellipse at 0 0, #fff5da 0, transparent 46%),
    linear-gradient(120deg, #ffffff 22%, #f0fcfc 66%, #ddf7f6 100%);
}
.hero-copy { background: none; padding: 58px 3.5vw 46px 6vw; min-width: 0; }
.hero h1 { color: #164d5b; font-size: clamp(48px, 4.7vw, 76px); }
.hero h1 em { color: #087e91; }
:lang(ja) .hero h1 { font-size: clamp(42px, 4.4vw, 68px); line-height: 1.25; }
.hero .eyebrow { color: #126576; font-size: 10px; letter-spacing: .09em; margin-bottom: 27px; }
.hero .live-dot { width: 7px; height: 7px; background: #00a7a0; box-shadow: 0 0 0 5px #c9f1eb; }
.hero-description { color: #466872; font-size: 15px; line-height: 1.9; max-width: 430px; }
.hero .primary { background: #087e91; border-radius: 8px; padding: 17px 25px; box-shadow: 0 7px 18px #087e911a; }
.hero .primary:hover { background: #086477; }
.hero-foot { margin-top: 0; padding-top: 34px; font-size: 10px; color: #3e6f72; }
.hero-foot .fine-line { width: 36px; height: 3px; background: #e8ad35; }
.hero-image {
  align-self: center;
  min-height: 0;
  margin: 38px 4vw 38px 0;
  background: #fff;
  border: 1px solid #fff;
  border-radius: 22px;
  box-shadow: 0 18px 50px #2b8a9715;
}
.hero-image > img {
  position: static;
  width: 100%;
  height: auto;
  object-fit: contain;
  object-position: center;
  transform: none;
  filter: none;
}
.hero-image::after { display: none; }
.hero-image .photo-top {
  left: 20px; right: auto; top: 20px;
  padding: 9px 12px; gap: 18px;
  border: 1px solid #ffffffb3; border-radius: 6px;
  color: #145363; background: #fffffff0;
  font-size: 9px; font-weight: 600; letter-spacing: .1em;
}
.hero-image .image-title {
  position: static; max-width: none;
  padding: 18px 24px 0; color: #1e6672;
  font-size: 25px; line-height: 1.35;
}
.hero-image .image-title span { white-space: normal; }
.hero-image .image-title br { display: none; }
:lang(ja) .hero-image .image-title { font-size: 24px; line-height: 1.5; }
.hero-image figcaption {
  position: static; color: #4c6b72;
  padding: 9px 24px 20px; font-size: 10px; line-height: 1.7; gap: 10px;
}
.hero-image .caption-rule { background: #dca228; flex: 0 0 20px; }
.facts { background: #f4fcfa; border-top: 1px solid #cbe9e5; border-bottom-color: #cbe9e5; }
.facts .fact-value, .facts .fact-location strong { color: #08798b; }
@media (min-width: 1600px) {
  .hero { min-height: 710px; }
  .hero-copy { padding-top: 74px; padding-bottom: 62px; }
}
@media (max-width: 1100px) {
  .hero { grid-template-columns: 1fr 1.1fr; min-height: 560px; }
  .hero-copy { padding: 44px 3.5vw 40px 4vw; }
  .hero h1 { font-size: 52px; }
  :lang(ja) .hero h1 { font-size: 43px; }
  .hero .eyebrow { font-size: 8px; }
  .hero-description { font-size: 13px; }
  .hero-image { margin-right: 3vw; border-radius: 16px; }
  .hero-image .image-title, :lang(ja) .hero-image .image-title { font-size: 21px; padding: 16px 18px 0; }
  .hero-image figcaption { padding: 8px 18px 18px; }
  .hero-image .photo-top { left: 14px; top: 14px; font-size: 8px; }
}
@media (max-width: 820px) {
  .hero { grid-template-columns: 1fr; min-height: 0; }
  .hero-copy { padding: 42px 6vw 28px; }
  .hero h1 { font-size: clamp(46px, 7.3vw, 62px); }
  :lang(ja) .hero h1 { font-size: clamp(41px, 6.5vw, 57px); }
  .hero-description { max-width: 570px; font-size: 14px; }
  .hero-foot { padding-top: 25px; }
  .hero-image { margin: 0 6vw 34px; }
}
@media (max-width: 600px) {
  .hero-copy { padding: 36px 24px 28px; }
  .hero h1 { font-size: clamp(43px, 10.8vw, 61px); }
  :lang(ja) .hero h1 { font-size: clamp(38px, 10vw, 54px); }
  .hero .eyebrow { font-size: 8px; margin-bottom: 24px; }
  .hero-image { margin: 0 18px 28px; }
  .hero-image .image-title, :lang(ja) .hero-image .image-title { font-size: 20px; }
  .hero-image .photo-top { top: 12px; left: 12px; padding: 7px 9px; font-size: 7px; }
  .hero-image figcaption { font-size: 9px; }
}

/* Brighten the original archive image without changing photographic content. */
.photo-tone-definitions { position: absolute; width: 0; height: 0; overflow: hidden; pointer-events: none; }
.hero-image > img { filter: url(#archive-photo-brightness); }

/* The map viewer clones this class, retaining the same correction at every zoom. */
.map-brightness-corrected { filter: url(#archive-photo-brightness); }

/* Keep the supplied group and portrait photographs complete, with no overlap. */
.field-images { display: grid; grid-template-columns: minmax(0, 1fr); gap: 24px; padding: 0; width: 100%; max-width: none; margin-top: 10px; }
.field-main, .field-secondary { overflow: hidden; background: #fff; border: 1px solid #c6ded9; }
.field-secondary { position: static; width: 62%; max-width: 300px; margin: 0 0 0 auto; box-shadow: none; }
.field-main img, .field-secondary img { display: block; width: 100%; height: auto; aspect-ratio: auto; object-fit: contain; }
.field-photo-button { display: block; width: 100%; border: 0; padding: 0; background: #fff; cursor: zoom-in; }
.field-images figcaption { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 9px 14px; padding: 13px 15px; font-size: 11px; line-height: 1.7; }
.field-photo-open { padding: 3px 0; border: 0; border-bottom: 1px solid #90b8b6; background: transparent; color: #075968; font-size: 11px; white-space: nowrap; }
.field-photo-button:focus-visible, .field-photo-open:focus-visible { outline: 3px solid #c89b35; outline-offset: 3px; }
.field-photo-people { filter: url(#field-people-tone); }
.field-photo-equipment { filter: url(#field-equipment-tone); }
@media (max-width: 600px) {
  .field-images { gap: 20px; margin: 0; }
  .field-secondary { width: 78%; max-width: 300px; margin-inline: auto; }
}

/* Hide only the original photo’s black edge: x 7–599, y 7–445. */
.hero-photo-crop { position: relative; width: 100%; aspect-ratio: 593 / 439; overflow: hidden; }
.hero-photo-crop > img { display: block; position: absolute; width: 104.55311973%; max-width: none; height: auto; left: -1.18043845%; top: -1.59453303%; transform: none; filter: url(#archive-photo-brightness); }