/* === 16-CHAPTER EDITORIAL SYSTEM === */

/* 01 / KEEP ROLLING */
.hero-stone-visual {
  position: absolute;
  right: clamp(1rem, 4vw, 5rem);
  top: clamp(5.5rem, 10vh, 8rem);
  width: min(34vw, 34rem);
  height: min(46vh, 32rem);
  overflow: hidden;
  opacity: .72;
}
.hero-stone-visual::after {
  content: '';
  position: absolute;
  inset: 0;
  border: clamp(.35rem, .8vw, .8rem) solid var(--ink);
}
.hero-stone-visual img { width: 100%; height: 100%; object-fit: cover; object-position: 52% 62%; }
.chapter--hero h1 { max-width: 10ch; }

/* 02 / ORIGIN */
.chapter--origin {
  display: grid;
  grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr);
  grid-template-rows: auto 1fr;
  column-gap: var(--space-4);
}
.chapter--origin .eyebrow { grid-column: 1 / -1; }
.chapter--origin h2 { align-self: center; }
.origin-copy {
  align-self: center;
  max-width: 42rem;
  padding-left: var(--space-3);
  border-left: clamp(.25rem, .4vw, .5rem) solid var(--moss);
}
.origin-copy blockquote {
  margin: var(--space-2) 0;
  font: 800 clamp(1.8rem, 3.3vw, 4.2rem)/1.12 RobotoCondensed, SourceHan, sans-serif;
  letter-spacing: -.04em;
}
.origin-copy .chapter__lead { border: 0 !important; padding-left: 0 !important; }
.monster-peek--origin {
  width: min(18vw, 16rem);
  right: clamp(1rem, 3vw, 3rem);
  top: clamp(5.5rem, 9vh, 8rem);
  z-index: 2;
}

/* 03 / BELIEF AND THE MOUNTAIN-TO-CITY CUT */
.chapter--belief { color: var(--paper); display: flex; flex-direction: column; justify-content: flex-end; }
.chapter--belief .chapter__background { object-position: center 58%; }
.chapter--belief .chapter__scrim { background: rgb(10 13 14 / 48%); }
.chapter--belief h2 { max-width: 13ch; }
.belief-list {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--space-2);
  margin-top: var(--space-3);
  width: min(78%, 75rem);
}
.belief-list p { border-top: var(--line); padding-top: var(--space-1); max-width: 24rem; }
.terrain-transition {
  position: absolute;
  right: calc(-1 * clamp(1rem, 2vw, 2rem));
  bottom: calc(-1 * clamp(1rem, 4vh, 3rem));
  width: min(30vw, 31rem);
  height: min(36vh, 24rem);
  overflow: hidden;
}
.terrain-transition img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  clip-path: polygon(18% 7%, 100% 0, 100% 100%, 0 100%);
}
.transition-stone {
  position: absolute;
  left: 3%;
  bottom: 18%;
  width: clamp(2rem, 3vw, 3.2rem);
  aspect-ratio: 1;
  border-radius: 46% 54% 42% 58%;
  background: var(--moss);
}

/* 05 / VENUE */
.chapter--venue .metrics dd { white-space: nowrap; }

/* 06 / ROUTE EXPERIENCE */
.chapter--routes { isolation: isolate; }
.route-texture {
  position: absolute;
  z-index: -1;
  inset: 0 0 0 auto;
  width: 42%;
  height: 100%;
  object-fit: cover;
  opacity: .25;
}
.chapter--routes h2 { max-width: 12ch; }
.route-pillars {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--space-2);
  margin-top: var(--space-4);
  width: min(88%, 84rem);
}
.route-pillars article { border-top: var(--line); padding-top: var(--space-1); }
.route-pillars article > span { color: var(--moss); font: 800 clamp(.75rem, 1vw, .95rem)/1 RobotoCondensed, sans-serif; }
.route-pillars h3 { font-size: clamp(1.35rem, 2.1vw, 2.6rem); margin: var(--space-1) 0; }
.route-pillars p { max-width: 20rem; color: var(--muted); }

/* 07 / ISLAND ANATOMY */
.chapter--anatomy {
  display: grid;
  grid-template-columns: minmax(0, .65fr) minmax(0, 1.35fr);
  grid-template-rows: auto auto 1fr;
  gap: var(--space-2) var(--space-4);
}
.chapter--anatomy .eyebrow, .chapter--anatomy h2, .anatomy-note { grid-column: 1; }
.anatomy-note { align-self: end; max-width: 28rem; border-top: var(--line); padding-top: var(--space-2); }
.island-map { grid-column: 2; grid-row: 1 / span 3; align-self: center; position: relative; }
.island-map img { width: 100%; height: min(70vh, 42rem); object-fit: cover; object-position: 58% 50%; }
.island-map figcaption { position: absolute; inset: 0; }
.map-note {
  position: absolute;
  max-width: 13rem;
  padding: clamp(.4rem, .7vw, .7rem) clamp(.5rem, .8vw, .8rem);
  background: var(--moss);
  color: var(--ink);
  font-size: clamp(.75rem, 1vw, 1rem);
  font-weight: 700;
}
.map-note::after { content: ''; position: absolute; width: clamp(2.5rem, 5vw, 5rem); border-top: 1px solid var(--moss); }
.map-note--one { left: 5%; top: 14%; }
.map-note--two { right: 3%; bottom: 12%; }
.map-note--three { left: 38%; bottom: 30%; }

/* 08 / SIGNATURE PROJECT */
.campaign-evidence {
  position: absolute;
  left: clamp(1.25rem, 6vw, 7rem);
  bottom: clamp(1.4rem, 4vh, 3rem);
  z-index: 3;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  width: min(34vw, 31rem);
  gap: clamp(.35rem, .6vw, .65rem);
}
.campaign-evidence img {
  width: 100%;
  aspect-ratio: 3 / 4;
  object-fit: cover;
  border: 2px solid var(--paper);
}
.chapter--campaign .poster-strip--figma { left: clamp(1.25rem, 6vw, 7rem); right: auto; max-width: 31vw; overflow: hidden; }
.chapter--campaign .poster-strip--figma img { width: clamp(3.6rem, 5.4vw, 5.8rem); }

/* 09 / TRANSLATION */
.chapter--translation h2 { max-width: 15ch; }
.translation-grid {
  display: grid;
  grid-template-columns: 1.05fr .8fr 1.15fr;
  gap: clamp(.5rem, .9vw, 1rem);
  margin-top: var(--space-3);
}
.translation-grid img { width: 100%; height: min(40vh, 24rem); object-fit: cover; }
.translation-grid figcaption { padding-top: var(--space-1); border-top: var(--line); margin-top: var(--space-1); }
.translation-note { margin-top: var(--space-2); max-width: 50rem; opacity: .76; font-size: clamp(.8rem, 1vw, 1rem); }

/* 10 / PROCESS */
.chapter--process {
  display: grid;
  grid-template-columns: minmax(0, .68fr) minmax(0, 1.32fr);
  grid-template-rows: auto auto 1fr;
  gap: var(--space-2) var(--space-4);
}
.chapter--process .eyebrow, .chapter--process h2, .process-list { grid-column: 1; }
.process-list { list-style: none; padding: 0; margin: var(--space-2) 0 0; }
.process-list li { display: grid; grid-template-columns: clamp(2.2rem, 3vw, 3rem) 1fr; padding: clamp(.45rem, .8vh, .8rem) 0; border-top: var(--line); }
.process-list span { color: var(--moss); font-family: RobotoCondensed, sans-serif; }
.process-gallery { grid-column: 2; grid-row: 1 / -1; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(.55rem, .9vw, 1rem); align-self: stretch; }
.process-gallery figure { min-width: 0; display: flex; flex-direction: column; }
.process-gallery img { width: 100%; height: min(25vh, 15rem); flex: 1 1 auto; object-fit: cover; }
.process-gallery figure:nth-child(1) img { object-position: 50% 58%; }
.process-gallery figure:nth-child(2) img { object-position: 50% 50%; }
.process-gallery figure:nth-child(3) img { object-position: 50% 24%; }
.process-gallery figure:nth-child(4) img { object-position: 50% 22%; }
.process-gallery figcaption { padding-top: clamp(.3rem, .5vw, .5rem); border-top: var(--line); font-size: clamp(.72rem, .85vw, .88rem); font-weight: 700; }

/* 11 / PEOPLE */
.chapter--people h2 { max-width: 13ch; }
.people-grid { display: grid; grid-template-columns: 1fr 1.2fr 1fr; gap: clamp(.5rem, .9vw, 1rem); margin-top: var(--space-3); }
.people-grid img { width: 100%; height: min(43vh, 26rem); object-fit: cover; }
.people-grid figure:nth-child(2) { transform: translateY(calc(-1 * clamp(1rem, 2vw, 2rem))); }
.people-grid figcaption { margin-top: var(--space-1); font-weight: 700; }
.people-tags { display: flex; gap: var(--space-1); flex-wrap: wrap; list-style: none; padding: 0; margin: var(--space-2) 0 0; }
.people-tags li { border: 1px solid currentColor; padding: clamp(.35rem, .6vw, .55rem) clamp(.5rem, .8vw, .8rem); }

/* 13 / CONTENT MATRIX */
#what-we-create.chapter--matrix { display: grid; grid-template-columns: minmax(0, .78fr) minmax(0, 1.22fr); gap: var(--space-2) var(--space-3); justify-content: stretch; }
.chapter--matrix .eyebrow, .chapter--matrix h2, .creation-matrix, .matrix-evidence { grid-column: 1; }
.creation-matrix article { border-top: var(--line); padding: var(--space-1) 0; }
.creation-matrix article > span { color: var(--moss); font-family: RobotoCondensed, sans-serif; }
.creation-matrix h3 { font-size: clamp(1.35rem, 2vw, 2.3rem); margin: clamp(.35rem, .6vw, .6rem) 0; }
.matrix-posters { grid-column: 2; grid-row: 1 / span 5; display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(.35rem, .6vw, .65rem); align-items: end; align-self: center; padding-bottom: var(--space-2); }
.matrix-posters > figure { min-width: 0; }
.matrix-posters img { width: 100%; max-height: min(43vh, 23rem); aspect-ratio: 3 / 4; object-fit: cover; }
.matrix-posters > figure:nth-child(2) { transform: translateY(calc(-1 * clamp(1rem, 2vw, 2rem))); }
.matrix-posters figcaption { margin-top: clamp(.28rem, .45vw, .45rem); font-size: clamp(.68rem, .78vw, .8rem); line-height: 1.35; font-weight: 700; }
.matrix-evidence { align-self: end; width: min(82%, 24rem); margin-bottom: clamp(.6rem, 1.4vh, 1rem); }
.matrix-evidence img { width: 100%; height: min(10vh, 5.5rem); object-fit: cover; }
.matrix-evidence figcaption { margin-top: clamp(.25rem, .4vw, .45rem); font-size: clamp(.68rem, .8vw, .8rem); color: var(--muted); }

/* 14 / PARTNERS */
.chapter--partners h2 { max-width: 13ch; }
.partner-paths { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-2); margin-top: var(--space-3); }
.partner-paths article { border-top: var(--line); padding-top: var(--space-1); }
.partner-paths h3 { font-size: clamp(1.4rem, 2.2vw, 2.8rem); }
.partner-values { display: flex; flex-wrap: wrap; gap: var(--space-1); list-style: none; padding: 0; margin: var(--space-2) 0 0; }
.partner-values li { border: 1px solid rgb(237 243 243 / 52%); padding: clamp(.35rem, .6vw, .55rem) clamp(.5rem, .8vw, .8rem); }
.collaboration-flow { display: grid; grid-template-columns: repeat(5, 1fr); list-style: none; padding: 0; margin-top: var(--space-3); counter-reset: flow; }
.collaboration-flow li { border-top: clamp(.12rem, .2vw, .2rem) solid var(--moss); padding: var(--space-1) var(--space-1) 0 0; }
.collaboration-flow li::before { counter-increment: flow; content: '0' counter(flow); display: block; margin-bottom: var(--space-1); color: var(--moss); font-family: RobotoCondensed, sans-serif; }

/* 15 / CONTACT */
.photo-credits { position: absolute; left: clamp(1.25rem, 6vw, 7rem); bottom: clamp(.75rem, 1.4vh, 1.2rem); color: var(--muted); font-size: clamp(.62rem, .72vw, .76rem); line-height: 1.4; }

/* === RESPONSIVE RECOMPOSITION === */
@media (max-width: 900px) {
  .story-nav::after { content: attr(data-current); font: 800 clamp(.72rem, 2vw, .88rem)/1 RobotoCondensed, sans-serif; color: var(--moss); }
  .hero-stone-visual { right: calc(-1 * clamp(2rem, 10vw, 6rem)); width: 62vw; opacity: .38; }
  .chapter--origin, .chapter--anatomy, .chapter--process, #what-we-create.chapter--matrix { display: block; }
  .origin-copy { margin-top: var(--space-3); }
  .monster-peek--origin { width: clamp(7rem, 25vw, 10rem); right: 1rem; top: clamp(7rem, 22vh, 12rem); opacity: .48; }
  .belief-list, .route-pillars, .partner-paths { grid-template-columns: 1fr; width: 100%; }
  .belief-list { gap: var(--space-1); }
  .terrain-transition { position: relative; inset: auto; width: 100%; height: min(28vh, 15rem); margin-top: var(--space-3); }
  .route-texture { width: 100%; opacity: .14; }
  .island-map, .process-gallery, .matrix-posters { margin-top: var(--space-3); }
  .island-map img { height: auto; aspect-ratio: 4 / 3; }
  .process-gallery { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .process-gallery img { height: auto; aspect-ratio: 3 / 4; }
  .campaign-evidence, .chapter--campaign .poster-strip--figma { position: relative; inset: auto; width: 100%; max-width: none; overflow: hidden; margin-top: var(--space-2); }
  .translation-grid, .people-grid { grid-template-columns: 1fr; }
  .translation-grid img, .people-grid img { height: auto; aspect-ratio: 4 / 3; }
  .people-grid figure:nth-child(2), .matrix-posters > figure:nth-child(2) { transform: none; }
  .matrix-posters { grid-template-columns: repeat(3, minmax(0, 1fr)); overflow: hidden; }
  .matrix-evidence { width: 100%; margin-top: var(--space-2); margin-bottom: 0; }
  .collaboration-flow { grid-template-columns: 1fr; }
  .photo-credits { position: relative; inset: auto; margin-top: var(--space-2); }
}

@media (max-width: 560px) {
  .chapter--hero h1 { font-size: clamp(3rem, 16vw, 5rem); }
  .origin-copy blockquote { font-size: clamp(1.5rem, 8vw, 2.5rem); }
  .matrix-posters { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .map-note { font-size: clamp(.65rem, 2.6vw, .78rem); max-width: 8rem; }
  .campaign-evidence img { width: 100%; }
  .chapter--campaign .poster-strip--figma img { width: 5.4rem; flex: 0 0 auto; }
}

@media (max-height: 700px) and (min-width: 901px) {
  .chapter { padding-top: clamp(4.8rem, 9vh, 6rem); padding-bottom: clamp(1.5rem, 4vh, 3rem); }
  .translation-grid img, .people-grid img { height: min(35vh, 20rem); }
  .route-pillars { margin-top: var(--space-2); }
}

@media (max-height: 600px) and (min-width: 901px) {
  .chapter h2 { font-size: clamp(2.5rem, 6vw, 5rem); }
  .poster-strip img { width: clamp(3.3rem, 5vw, 4.7rem); }
  .people-tags, .partner-values { font-size: clamp(.7rem, .85vw, .8rem); }
}

@media (max-height: 500px) and (min-width: 901px) {
  .chapter__lead { font-size: clamp(.85rem, 1.4vw, 1.15rem); }
  .terrain-transition, .matrix-evidence, .people-tags { display: none; }
}