/*
 * Continuous water chapter system.
 * The hero establishes the environment; every following chapter keeps the
 * same water, ink and light language while using a different content object.
 */
:root {
  --section-water-ink: #123f76;
  --section-water-body: rgba(31, 72, 116, .76);
  --section-water-muted: rgba(34, 72, 115, .56);
  --section-water-rule: rgba(35, 86, 143, .19);
  --section-water-glass: rgba(253, 255, 255, .78);
  --section-water-glass-strong: rgba(254, 255, 255, .9);
  --section-water-shadow: 0 24px 70px rgba(29, 84, 124, .07);
  --section-water-max: 1160px;
}

html body main > section#faces,
html body main > section#work,
html body main > section#thinking,
html body main > section#future,
html body main > section#life {
  position: relative;
  isolation: isolate;
  min-height: 820px;
  padding: clamp(54px, 5.8vw, 78px) 6vw clamp(76px, 8vw, 112px) !important;
  overflow: hidden;
  color: var(--section-water-ink);
  border: 0 !important;
  background-color: #f7fbfd !important;
  background-image:
    linear-gradient(105deg, rgba(255,255,255,.95) 0%, rgba(251,254,255,.9) 48%, rgba(239,249,252,.84) 100%),
    url("assets/hero/cici-water-surface-illustration-v1.webp") !important;
  background-repeat: no-repeat !important;
  background-size: cover !important;
  background-position: center center !important;
}

html body main > section#faces::before,
html body main > section#work::before,
html body main > section#thinking::before,
html body main > section#future::before,
html body main > section#life::before {
  content: "";
  position: absolute;
  z-index: -1;
  inset: -5%;
  pointer-events: none;
  background: url("assets/hero/cici-water-surface-illustration-v1.webp") center / 112% 112% no-repeat;
  opacity: .025 !important;
  transform: translate3d(-1.5%, 0, 0) scale(1.025);
  animation: chapter-water-breathe 18s ease-in-out infinite alternate;
}

html body main > section#work {
  background-image:
    linear-gradient(100deg, rgba(255,255,255,.96) 0%, rgba(251,254,255,.91) 50%, rgba(237,248,252,.84) 100%),
    url("assets/hero/cici-water-surface-illustration-v1.webp") !important;
  background-position: 47% center !important;
}

html body main > section#thinking {
  background-image:
    linear-gradient(112deg, rgba(255,255,255,.95) 0%, rgba(249,253,255,.89) 58%, rgba(244,251,253,.9) 100%),
    url("assets/hero/cici-water-surface-illustration-v1.webp") !important;
  background-position: 64% center !important;
}

html body main > section#future.future-lab {
  background-image:
    linear-gradient(108deg, rgba(255,255,255,.96) 0%, rgba(250,254,255,.9) 54%, rgba(235,247,251,.84) 100%),
    url("assets/hero/cici-water-surface-illustration-v1.webp") !important;
  background-color: #f7fbfd !important;
  background-position: 58% center !important;
}

html body main > section#life {
  background-image:
    linear-gradient(100deg, rgba(255,255,255,.95) 0%, rgba(250,254,255,.89) 56%, rgba(237,248,252,.85) 100%),
    url("assets/hero/cici-water-surface-illustration-v1.webp") !important;
  background-position: 42% center !important;
}

#work::before { animation-delay: -4s !important; animation-direction: alternate-reverse !important; }
#thinking::before { animation-delay: -8s !important; }
#future::before { animation-delay: -12s !important; animation-direction: alternate-reverse !important; }
#life::before { animation-delay: -16s !important; }

@keyframes chapter-water-breathe {
  0% { opacity: .018; transform: translate3d(-1.2%, -.35%, 0) scale(1.025); }
  52% { opacity: .04; }
  100% { opacity: .025; transform: translate3d(1.2%, .5%, 0) scale(1.04); }
}

/* One consistent chapter entrance, with enough difference in spatial rhythm. */
#faces > .chapter-heading,
#work > .chapter-heading,
#thinking > .chapter-heading,
#future > .chapter-heading,
#life > .chapter-heading {
  width: min(100%, var(--section-water-max)) !important;
  margin: 0 auto clamp(30px, 3.8vw, 48px) !important;
  padding: 0 0 18px !important;
  border: 0 !important;
}

#faces > .chapter-heading::after,
#work > .chapter-heading::after,
#thinking > .chapter-heading::after,
#future > .chapter-heading::after,
#life > .chapter-heading::after {
  width: 32px !important;
  height: 1px !important;
  bottom: 0 !important;
  background: rgba(24, 76, 132, .52) !important;
}

#faces > .chapter-heading .section-label,
#work > .chapter-heading .section-label,
#thinking > .chapter-heading .section-label,
#future > .chapter-heading .section-label,
#life > .chapter-heading .section-label {
  margin-bottom: 16px !important;
  color: rgba(20, 68, 119, .72) !important;
  font-size: 10px !important;
}

#faces > .chapter-heading h2,
#work > .chapter-heading h2,
#thinking > .chapter-heading h2,
#future > .chapter-heading h2,
#life > .chapter-heading h2 {
  max-width: 760px;
  color: var(--section-water-ink) !important;
  font-size: clamp(32px, 3.2vw, 46px) !important;
  line-height: 1.05 !important;
}

#thinking > .chapter-heading > p,
#future > .chapter-heading > p,
#life > .chapter-heading > p {
  max-width: 650px !important;
  margin-top: 14px !important;
  color: var(--section-water-body) !important;
  font-size: 13px !important;
  line-height: 1.8 !important;
}

/* Resume: open profile dossier. */
#faces .resume-editorial {
  width: min(100%, var(--section-water-max));
  margin-inline: auto;
}

#faces .resume-editorial__intro {
  grid-template-columns: 220px minmax(0, 1fr) !important;
  gap: clamp(42px, 6vw, 88px) !important;
  min-height: 230px !important;
  padding: 0 0 30px !important;
  border: 0 !important;
}

#faces .resume-editorial__portrait {
  width: 190px !important;
  margin-left: 18px;
  border: 1px solid rgba(255,255,255,.86) !important;
  box-shadow: 0 18px 42px rgba(24, 74, 115, .15), 0 0 0 1px rgba(34, 85, 138, .13) !important;
}

#faces .resume-editorial__about {
  max-width: 780px;
  padding-left: 0 !important;
}

#faces .resume-editorial__about::before { margin-bottom: 16px !important; }
#faces .resume-editorial__about h2 {
  margin-bottom: 13px !important;
  color: var(--section-water-ink);
  font-size: clamp(32px, 3.1vw, 44px) !important;
}

#faces .resume-editorial__about > p:not(.resume-editorial__eyebrow) {
  color: var(--section-water-body);
  font-size: 13px !important;
  line-height: 1.8 !important;
}

#faces .resume-editorial__columns {
  grid-template-columns: minmax(0, 1.72fr) minmax(270px, .78fr) !important;
  gap: clamp(42px, 6vw, 78px) !important;
  padding-top: 28px;
  border-top: 1px solid var(--section-water-rule);
}

#faces .resume-history-block,
#faces .resume-index-block,
#faces .resume-download-block {
  border-color: var(--section-water-rule) !important;
  background: transparent !important;
  box-shadow: none !important;
}

#faces .resume-history-block > header,
#faces .resume-index-block > header {
  border-color: var(--section-water-rule) !important;
}

#faces .resume-history-list article::before {
  left: -16.5px;
  width: 6px;
  height: 6px;
  background: #f8fdff !important;
  box-shadow: 0 0 0 4px rgba(70, 134, 192, .11), 0 0 12px rgba(54, 126, 188, .18);
}

#faces .resume-icon-grid li {
  border: 0 !important;
  background: rgba(247, 253, 255, .2) !important;
}

#faces .resume-icon-grid img { filter: saturate(.72) hue-rotate(3deg); }

/* Projects: a low-density water archive. */
#work .project-folder {
  width: min(100%, var(--section-water-max)) !important;
  margin-inline: auto !important;
}

#work .folder-tabs {
  min-height: 64px !important;
  border-color: var(--section-water-rule) !important;
}

#work .folder-tabs button,
#work .folder-tabs button.active,
#work .folder-tabs button.is-active {
  min-height: 64px !important;
  padding: 10px 0 12px !important;
  color: var(--section-water-muted) !important;
}

#work .folder-tabs button.active,
#work .folder-tabs button.is-active { color: var(--section-water-ink) !important; }

#work .folder-page,
#work .folder-page[data-tone] {
  padding-top: 30px !important;
}

#work .folder-page-header {
  margin-bottom: 0 !important;
  padding-bottom: 24px !important;
  border-color: var(--section-water-rule) !important;
}

#work .folder-page-header h3 { color: var(--section-water-ink); }
#work .folder-page-header p,
#work .folder-page-header span { color: var(--section-water-muted); }

#work .project-file {
  min-height: 154px !important;
  padding: 18px 8px !important;
  border-color: var(--section-water-rule) !important;
}

#work .project-file:hover,
#work .project-file.active {
  background: rgba(246, 252, 255, .34) !important;
}

#work .project-file-cover {
  overflow: hidden;
  border: 1px solid rgba(38, 91, 145, .14) !important;
  background: rgba(235, 248, 253, .36) !important;
  box-shadow: 0 14px 38px rgba(37, 89, 128, .08);
}

#work .project-file-cover-empty img {
  width: 52px;
  height: 52px;
  opacity: .34;
}

#work .project-file-copy strong { color: var(--section-water-ink); }
#work .project-file-description,
#work .project-file-data { color: var(--section-water-body); }

/* Workflow: calm, equal columns with soft local focus instead of cards. */
#thinking .workflow-portals {
  width: min(100%, var(--section-water-max));
  margin-inline: auto;
  border-color: var(--section-water-rule) !important;
}

#thinking .workflow-portals button {
  min-height: 266px !important;
  padding: 27px 28px 24px !important;
  border-color: var(--section-water-rule) !important;
}

#thinking .workflow-portals button:hover,
#thinking .workflow-portals button:focus-visible {
  padding-left: 31px !important;
  background: rgba(247, 253, 255, .34) !important;
}

#thinking .workflow-portals small,
#thinking .workflow-portals strong { color: var(--section-water-ink); }
#thinking .workflow-portals span { color: var(--section-water-body); }
#thinking .workflow-portals i { color: var(--section-water-ink); }

/* Future: one generous scene, switched from a restrained text rail. */
#future { min-height: 860px; }

#future > .chapter-heading { margin-bottom: 22px !important; }

#future .future-stage {
  width: min(100%, var(--section-water-max));
  min-height: 510px !important;
  margin-inline: auto !important;
  padding: 0 !important;
  overflow: visible !important;
}

#future .future-depth,
#future .future-road-network,
#future .future-stage-note { display: none !important; }

#future .future-world-nav {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  width: 100%;
  margin: 0 0 20px;
  border-bottom: 1px solid var(--section-water-rule);
}

#future .future-world-nav button {
  position: relative;
  min-height: 48px;
  padding: 6px 12px 12px;
  border: 0;
  color: var(--section-water-muted);
  font: 400 12px/1.4 var(--sans);
  text-align: left;
  background: transparent;
  cursor: pointer;
  transition: color .25s ease, background .25s ease;
}

#future .future-world-nav button::after {
  content: "";
  position: absolute;
  right: 12px;
  bottom: -1px;
  left: 12px;
  height: 2px;
  background: #3778b9;
  opacity: 0;
  transform: scaleX(.4);
  transform-origin: left;
  transition: opacity .25s ease, transform .35s cubic-bezier(.22,1,.36,1);
}

#future .future-world-nav button span {
  display: block;
  margin-bottom: 5px;
  color: rgba(26, 72, 119, .48);
  font: 500 9px/1 var(--mono);
  letter-spacing: .12em;
}

#future .future-world-nav button:hover,
#future .future-world-nav button:focus-visible,
#future .future-world-nav button.is-active {
  color: var(--section-water-ink);
  background: rgba(249, 254, 255, .23);
  outline: none;
}

#future .future-world-nav button.is-active::after {
  opacity: .9;
  transform: scaleX(1);
}

#future .future-world:not(.is-preview-active):not(.is-active) { display: none !important; }

#future .future-world.is-preview-active,
#future .future-world.is-active {
  display: block !important;
  width: 100% !important;
  margin: 0 !important;
}

#future .future-world.is-preview-active .world-trigger,
#future .future-world.is-active .world-trigger,
#future .future-world.is-preview-active .world-home .world-trigger {
  display: grid !important;
  grid-template-columns: minmax(0, 1.12fr) minmax(310px, .88fr) !important;
  grid-template-rows: 430px !important;
  gap: clamp(34px, 5vw, 72px) !important;
  width: 100% !important;
  height: auto !important;
  min-height: 430px !important;
  align-items: center !important;
  padding: 0 !important;
  background: transparent !important;
  transform: none !important;
}

#future .future-world .world-trigger::before {
  left: 2% !important;
  top: 52% !important;
  width: 55% !important;
  opacity: .76;
  background: radial-gradient(ellipse, rgba(235,249,255,.58), rgba(198,229,245,.2) 50%, transparent 74%) !important;
  filter: blur(16px) !important;
}

#future .future-world .world-scene-image,
#future .future-world.is-active .world-scene-image {
  order: 1 !important;
  width: 100% !important;
  height: 430px !important;
  min-height: 430px !important;
  padding: 0 !important;
  object-fit: contain !important;
  filter: drop-shadow(0 24px 30px rgba(45, 91, 128, .15)) !important;
  transform: scale(.94) !important;
}

#future .future-world .world-trigger:hover .world-scene-image,
#future .future-world .world-trigger:focus-visible .world-scene-image {
  transform: translateY(-3px) scale(.965) !important;
}

#future .future-world .world-svg { display: none !important; }

#future .future-world .world-label,
#future .future-world.is-active .world-label {
  order: 2 !important;
  display: grid !important;
  width: 100% !important;
  min-height: 250px !important;
  padding: 32px 30px !important;
  align-content: center;
  border: 1px solid rgba(255,255,255,.65) !important;
  border-radius: 18px !important;
  opacity: 1 !important;
  color: var(--section-water-ink);
  background: var(--section-water-glass) !important;
  box-shadow: var(--section-water-shadow) !important;
  backdrop-filter: blur(18px) saturate(1.08) !important;
  -webkit-backdrop-filter: blur(18px) saturate(1.08) !important;
}

#future .future-world .world-label small { color: rgba(25, 70, 116, .64); }
#future .future-world .world-label strong { color: var(--section-water-ink); }
#future .future-world .world-summary { color: var(--section-water-body) !important; }
#future .future-world .world-label i {
  padding-top: 16px;
  border-top: 1px solid var(--section-water-rule);
  color: var(--section-water-ink);
}

#future .world-detail {
  width: min(100%, 740px);
  margin: 18px 0 0 auto !important;
  padding: 24px 28px !important;
  border: 1px solid rgba(255,255,255,.6);
  border-radius: 18px;
  color: var(--section-water-ink);
  background: rgba(247,253,255,.58) !important;
  box-shadow: var(--section-water-shadow);
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
}

/* Life: the physical photo book floats directly on the same water. */
#life .life-stack-heading { width: min(100%, var(--section-water-max)) !important; }

#life .circular-gallery {
  width: min(100%, var(--section-water-max));
  height: clamp(500px, 49vw, 590px);
  margin-inline: auto;
  background: transparent !important;
}

#life .circular-gallery__viewport { top: 28px; }

#life .circular-gallery__track {
  box-shadow: 0 34px 66px rgba(32, 79, 117, .18), 0 5px 12px rgba(31, 75, 111, .09) !important;
}

#life .circular-gallery__status,
#life .circular-gallery__controls { color: var(--section-water-ink); }

/* The docked river guide belongs to the water instead of a white utility bar. */
body.guide-docked .thought-river-guide,
.thought-river-guide {
  border-color: rgba(28, 79, 132, .1) !important;
  background-color: rgba(250, 253, 254, .5) !important;
  background-image:
    linear-gradient(90deg, rgba(255,255,255,.5), rgba(246,252,254,.5)),
    url("assets/hero/cici-water-surface-illustration-v1.webp") !important;
  background-size: auto, cover !important;
  background-position: center !important;
  box-shadow: 0 8px 24px rgba(32, 81, 121, .035) !important;
  backdrop-filter: blur(15px) saturate(1.05) !important;
  -webkit-backdrop-filter: blur(15px) saturate(1.05) !important;
}

/* Docked navigation is a standalone interface surface, not a crop of the hero. */
body.guide-docked .thought-river-guide {
  border-color: rgba(40, 78, 126, .11) !important;
  background-color: rgba(247, 250, 252, .92) !important;
  background-image: none !important;
  box-shadow:
    0 1px 0 rgba(255, 255, 255, .9) inset,
    0 1px 0 rgba(40, 78, 126, .09),
    0 10px 28px rgba(30, 66, 104, .06) !important;
  backdrop-filter: blur(18px) saturate(1.04) !important;
  -webkit-backdrop-filter: blur(18px) saturate(1.04) !important;
}

.thought-river-guide__water,
.thought-river-guide.is-launched .thought-river-guide__water { opacity: .22 !important; }

@media (max-width: 900px) {
  html body main > section#faces,
  html body main > section#work,
  html body main > section#thinking,
  html body main > section#future,
  html body main > section#life {
    min-height: auto;
    padding: 48px 28px 76px !important;
    background-size: auto 100% !important;
  }

  #faces .resume-editorial__columns { grid-template-columns: 1fr !important; }
  #future .future-world-nav { overflow-x: auto; grid-template-columns: repeat(5, minmax(132px, 1fr)); }
}

@media (max-width: 720px) {
  #faces .resume-editorial__intro {
    grid-template-columns: 96px minmax(0, 1fr) !important;
    gap: 22px !important;
  }

  #faces .resume-editorial__portrait { width: 92px !important; margin-left: 0; }

  #work .project-file {
    min-height: 138px !important;
    padding-inline: 0 !important;
  }

  #thinking .workflow-portals button {
    min-height: 164px !important;
    padding: 22px 4px !important;
  }

  #future .future-world.is-preview-active .world-trigger,
  #future .future-world.is-active .world-trigger {
    grid-template-columns: 1fr !important;
    grid-template-rows: 260px auto !important;
    gap: 10px !important;
    min-height: 0 !important;
  }

  #future .future-world .world-scene-image,
  #future .future-world.is-active .world-scene-image {
    height: 260px !important;
    min-height: 260px !important;
  }

  #future .future-world .world-label,
  #future .future-world.is-active .world-label {
    min-height: 210px !important;
    padding: 26px 24px !important;
  }

  #life .circular-gallery { height: 500px; }
}

@media (prefers-reduced-motion: reduce) {
  #faces::before,
  #work::before,
  #thinking::before,
  #future::before,
  #life::before { animation: none !important; }

  #future .future-world-nav button,
  #future .future-world-nav button::after,
  #future .world-scene-image { transition: none !important; }
}