/* ============================================================================
   inner-pages.css - Model, Capabilities, Values, Research, About
   ----------------------------------------------------------------------------
   Loaded after assets/eugeny.css and assets/common-home.css, and only on the
   secondary routes. It inherits the Common Ground world from the home sheet:
   warm ivory paper, ink blue, pale blue bands, one coral accent, Fraunces
   display against system UI, flat surfaces, hairline rules, hard edges.

   Each route gets its own editorial rhythm:
     Model        numbered register, numerals in the left gutter
     Capabilities ink plate hero, hairline task mosaic, media register
     Values       principle ledger with alternating indents and a close plate
     Research     narrow measured thread with one full bleed milestone
     About        letterhead masthead, release table, portrait scene

   Contrast: body copy is ink on ivory or on pale blue. Coral is used for
   numerals, dots and rules; coral text on pale blue uses a darker mix.
   No gradients anywhere.
   ========================================================================== */

:root {
  --ip-accent-on-ink: #f18a62;
  --ip-thread: clamp(18px, 3vw, 44px);
}

body.inner { background-color: var(--ch-ivory); }

body.inner ::selection { background: var(--ch-ink); color: var(--ch-ivory); }
body.inner :focus-visible { outline: 2px solid var(--ch-ink); outline-offset: 3px; }

/* Light focus ring on the ink surfaces. */
body.inner .ip-hero--ink :focus-visible,
body.inner .ip-panel :focus-visible,
body.inner .ip-plate-copy :focus-visible {
  outline-color: #f4eee1;
}
body.inner .ip-hero--ink ::selection,
body.inner .ip-panel ::selection,
body.inner .ip-plate-copy ::selection { background: #f4eee1; color: var(--ch-ink); }
body.inner .ip-hero--ink .ch-dot,
body.inner .ip-panel .ch-dot,
body.inner .ip-plate-copy .ch-dot { color: var(--ip-accent-on-ink); }
body.inner .ip-hero--ink a:hover,
body.inner .ip-panel a:hover,
body.inner .ip-plate-copy a:hover { color: #fdf8ea; }


/* ----------------------------------------------------------------------------
   01. Shared type and measure
   ------------------------------------------------------------------------- */
.ip-lede {
  margin-top: clamp(16px, 1.8vw, 24px);
  max-width: 46ch;
  font-size: clamp(1.04rem, 1.15vw, 1.2rem);
  line-height: 1.58;
  color: var(--ch-body);
}

.ip-stand {
  font-family: var(--ch-display);
  font-size: clamp(1.02rem, 1.3vw, 1.2rem);
  font-weight: 500;
  line-height: 1.38;
  letter-spacing: -.006em;
  color: var(--ch-ink-2);
  max-width: 42ch;
}

.ip-num {
  font-family: var(--ch-display);
  font-size: .82rem;
  font-weight: 600;
  letter-spacing: .08em;
  color: #8a3220;
}

.ip-prose { display: grid; gap: 1em; max-width: 60ch; }
.ip-prose p {
  font-size: clamp(1rem, 1.02vw, 1.06rem);
  line-height: 1.62;
  color: var(--ch-body);
}
.ip-prose a { color: var(--ch-ink); text-underline-offset: .24em; }
.ip-prose a:hover { color: #9a3b1e; }

.ip-sec { padding: clamp(38px, 4.4vw, 62px) 0; }
.ip-sec--tight { padding-top: 0; }

.ip-sec-head {
  display: grid;
  grid-template-columns: minmax(0, .46fr) minmax(0, .54fr);
  gap: clamp(14px, 3vw, 48px);
  align-items: end;
  padding-bottom: clamp(18px, 2.2vw, 28px);
  border-bottom: 1px solid var(--ch-line-2);
}
.ip-sec-head h2 {
  font-family: var(--ch-display);
  font-size: clamp(1.75rem, 3vw, 2.7rem);
  font-weight: 600;
  line-height: 1.05;
  letter-spacing: -.014em;
  color: var(--ch-ink);
  max-width: 18ch;
  grid-column: 1;
}
.ip-sec-head .ch-kicker { grid-column: 1; margin-bottom: 0; }
.ip-sec-head .ip-stand { grid-column: 2; grid-row: 2; }
.ip-sec-head--single { grid-template-columns: minmax(0, 1fr); }
.ip-sec-head--single .ip-stand { grid-column: 1; grid-row: auto; margin-top: 14px; }

.ip-band { background: var(--ch-band); }
.ip-on-ink { color: #efe9da; }


/* ----------------------------------------------------------------------------
   02. Hero variants
   ------------------------------------------------------------------------- */
.ip-hero { position: relative; padding: 0; }

.ip-hero-grid {
  display: grid;
  grid-template-columns: minmax(0, 46%) minmax(0, 54%);
  align-items: stretch;
  min-height: clamp(420px, 43vw, 600px);
}

.ip-hero-copy {
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: clamp(34px, 4vw, 58px) clamp(26px, 3vw, 46px) clamp(32px, 3.6vw, 52px)
           var(--ch-edge);
}

.ip-hero h1 {
  font-family: var(--ch-display);
  font-size: clamp(2.45rem, 4.9vw, 4.25rem);
  font-weight: 600;
  line-height: 1;
  letter-spacing: -.018em;
  color: var(--ch-ink);
  max-width: 12ch;
}

.ip-hero .ch-cta-row { margin-top: clamp(20px, 2.2vw, 28px); }

.ip-hero-plate {
  position: relative;
  margin: 0;
  overflow: hidden;
  background: #e6e3d1;
}
.ip-hero-plate img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.ip-hero-plate--desk img { object-position: 58% 46%; }
.ip-hero-plate--coast img { object-position: 46% 66%; }

/* Ink plate hero, used by Capabilities. */
.ip-hero--ink { background: var(--ch-ink); color: #f0ebde; }
.ip-hero--ink .ch-kicker { color: #c9d6e6; }
.ip-hero--ink h1 { color: #fdf8ea; }
.ip-hero--ink .ip-lede { color: #e3e6e3; }
.ip-hero--ink .ch-link { color: #f7f2e4; border-bottom-color: rgba(247, 242, 228, .45); }
.ip-hero--ink .ch-link .ch-ic { color: var(--ip-accent-on-ink); }
.ip-hero--ink .ch-link:hover { color: #f7f2e4; border-bottom-color: #f7f2e4; }

/* Text only hero, used by Research. */
.ip-hero--wide .ip-hero-copy {
  padding: clamp(40px, 5vw, 72px) 0 clamp(26px, 3vw, 40px);
  min-height: 0;
}
.ip-hero--wide h1 {
  font-size: clamp(2.55rem, 5.4vw, 4.6rem);
  max-width: 17ch;
}
.ip-hero--wide .ip-lede { max-width: 52ch; }

.ip-hero-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 6px 14px;
  margin-top: clamp(22px, 2.6vw, 34px);
  padding-top: 16px;
  border-top: 1px solid var(--ch-line-2);
  font-size: .8rem;
  font-weight: 600;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--ch-label);
  max-width: 60rem;
}
.ip-hero-meta a {
  color: var(--ch-ink-2);
  text-decoration: none;
  border-bottom: 1px solid transparent;
  padding-bottom: 2px;
  transition: border-color .2s var(--ch-ease-soft), color .2s var(--ch-ease-soft);
}
.ip-hero-meta a:hover { color: var(--ch-ink); border-bottom-color: var(--ch-orange); }
.ip-hero-meta .ip-meta-sep { color: var(--ch-orange); }

/* Small labels stacked above a title, used by Capabilities. */
.ip-verbs {
  list-style: none;
  margin: clamp(20px, 2.4vw, 30px) 0 0;
  padding: 14px 0 0;
  border-top: 1px solid rgba(247, 242, 228, .28);
  display: flex;
  flex-wrap: wrap;
  gap: 6px 20px;
  max-width: 44rem;
}
.ip-verbs a {
  font-size: .78rem;
  font-weight: 600;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: #e9e4d6;
  text-decoration: none;
  border-bottom: 1px solid transparent;
  padding-bottom: 2px;
}
.ip-verbs a:hover { color: #fffdf6; border-bottom-color: var(--ip-accent-on-ink); }


/* ----------------------------------------------------------------------------
   03. Facts band, used by Model
   ------------------------------------------------------------------------- */
.ip-facts {
  border-top: 1px solid var(--ch-line-2);
  border-bottom: 1px solid var(--ch-line-2);
  background: var(--ch-ivory-2);
}
.ip-facts-inner {
  margin: 0;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
}
.ip-fact {
  padding: clamp(16px, 1.9vw, 22px) clamp(16px, 2vw, 26px);
  border-right: 1px solid var(--ch-line);
  min-width: 0;
}
.ip-fact:last-child { border-right: 0; }
.ip-fact dt {
  font-size: .7rem;
  font-weight: 600;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--ch-label);
}
.ip-fact dd {
  margin: 7px 0 0;
  font-family: var(--ch-display);
  font-size: clamp(1rem, 1.35vw, 1.32rem);
  font-weight: 600;
  line-height: 1.16;
  letter-spacing: -.01em;
  color: var(--ch-ink);
}


/* ----------------------------------------------------------------------------
   04. Model register: numbered entries in a left gutter
   ------------------------------------------------------------------------- */
.ip-register-head {
  padding: clamp(38px, 4.4vw, 62px) 0 clamp(4px, 1vw, 12px);
}
.ip-register-head h2 {
  font-family: var(--ch-display);
  font-size: clamp(1.9rem, 3.4vw, 3.1rem);
  font-weight: 600;
  line-height: 1.04;
  letter-spacing: -.014em;
  color: var(--ch-ink);
  max-width: 20ch;
  margin-top: 12px;
}

.ip-entry {
  display: grid;
  grid-template-columns: clamp(48px, 7vw, 92px) minmax(0, 1fr);
  gap: clamp(14px, 3vw, 44px);
  padding: clamp(26px, 3.2vw, 40px) 0;
  border-top: 1px solid var(--ch-line);
}
.ip-entry .ip-num {
  padding-top: .42em;
  font-size: .9rem;
}
.ip-entry h2 {
  font-family: var(--ch-display);
  font-size: clamp(1.55rem, 2.6vw, 2.35rem);
  font-weight: 600;
  line-height: 1.08;
  letter-spacing: -.012em;
  color: var(--ch-ink);
  max-width: 22ch;
}
.ip-entry .ip-stand { margin-top: 10px; }
.ip-entry .ip-prose { margin-top: clamp(14px, 1.7vw, 20px); }


/* ----------------------------------------------------------------------------
   05. Model feature band: one sense rail inside the pale blue band
   ------------------------------------------------------------------------- */
.ip-feature { background: var(--ch-band); padding: clamp(32px, 4vw, 58px) 0; }
.ip-feature-grid {
  display: grid;
  grid-template-columns: minmax(0, .46fr) minmax(0, .54fr);
  gap: clamp(20px, 3.4vw, 52px);
  align-items: start;
}
.ip-feature h2 {
  font-family: var(--ch-display);
  font-size: clamp(1.75rem, 3vw, 2.7rem);
  font-weight: 600;
  line-height: 1.05;
  letter-spacing: -.014em;
  color: var(--ch-band-ink);
  max-width: 20ch;
  margin-top: 10px;
}
.ip-feature .ip-stand { color: var(--ch-band-ink); margin-top: 12px; }
.ip-feature-kicker { display: flex; align-items: baseline; gap: 10px; }
.ip-feature .ip-prose p { color: #22364e; }

.ip-senses {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 1px;
  margin: clamp(22px, 2.6vw, 32px) 0 0;
  padding: 0;
  list-style: none;
  background: rgba(27, 47, 92, .26);
  border: 1px solid rgba(27, 47, 92, .26);
}
.ip-senses li {
  display: flex;
  align-items: center;
  gap: 9px;
  padding: clamp(13px, 1.6vw, 18px) clamp(10px, 1.4vw, 16px);
  background: var(--ch-band);
  font-size: .82rem;
  font-weight: 600;
  letter-spacing: .01em;
  color: var(--ch-band-ink);
}
.ip-senses .ch-ic { width: 16px; height: 16px; color: #2b3f60; }


/* ----------------------------------------------------------------------------
   06. Capabilities: task mosaic
   ------------------------------------------------------------------------- */
.ip-tasks {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: 1px;
  margin-top: clamp(22px, 2.6vw, 32px);
  background: var(--ch-line);
  border: 1px solid var(--ch-line);
}
.ip-task {
  background: var(--ch-card);
  padding: clamp(18px, 2vw, 26px);
  display: flex;
  flex-direction: column;
  gap: 7px;
  min-width: 0;
  min-height: clamp(160px, 15vw, 200px);
  transition: background-color .22s var(--ch-ease-soft);
}
.ip-task:nth-child(1) { grid-column: span 5; }
.ip-task:nth-child(2) { grid-column: span 4; }
.ip-task:nth-child(3) { grid-column: span 3; }
.ip-task:nth-child(4) { grid-column: span 3; }
.ip-task:nth-child(5) { grid-column: span 5; }
.ip-task:nth-child(6) { grid-column: span 4; }
.ip-task h3 {
  font-family: var(--ch-display);
  font-size: clamp(1.12rem, 1.6vw, 1.42rem);
  font-weight: 600;
  line-height: 1.12;
  letter-spacing: -.01em;
  color: var(--ch-ink);
}
.ip-task p:not(.ip-num) {
  font-size: .94rem;
  line-height: 1.55;
  color: var(--ch-body);
  max-width: 38ch;
}
.ip-task:target { background: var(--ch-ivory-2); }


/* ----------------------------------------------------------------------------
   07. Capabilities: media register on pale blue
   ------------------------------------------------------------------------- */
.ip-media { background: var(--ch-band); }
.ip-media-list {
  margin: clamp(18px, 2vw, 26px) 0 0;
  padding: 0;
  list-style: none;
  border-top: 1px solid rgba(27, 47, 92, .26);
}
.ip-media-row {
  display: grid;
  grid-template-columns: 62px minmax(140px, 230px) minmax(0, 1fr);
  gap: clamp(14px, 2.4vw, 34px);
  align-items: baseline;
  padding: clamp(18px, 2.2vw, 26px) 0;
  border-bottom: 1px solid rgba(27, 47, 92, .18);
}
.ip-media-row .ip-num { color: #8a3220; }
.ip-media-name {
  display: flex;
  align-items: center;
  gap: 10px;
  font-family: var(--ch-display);
  font-size: clamp(1.3rem, 2vw, 1.75rem);
  font-weight: 600;
  line-height: 1.1;
  letter-spacing: -.01em;
  color: var(--ch-band-ink);
}
.ip-media-name .ch-ic { width: 18px; height: 18px; color: #2b3f60; }
.ip-media-row p:not(.ip-num) {
  font-size: 1rem;
  line-height: 1.58;
  color: #22364e;
  max-width: 64ch;
}


/* ----------------------------------------------------------------------------
   08. Capabilities: upscaling ladder, pure rule geometry
   ------------------------------------------------------------------------- */
.ip-scale {
  display: grid;
  grid-template-columns: minmax(0, .44fr) minmax(0, .56fr);
  gap: clamp(24px, 4vw, 60px);
  align-items: center;
  margin-top: clamp(20px, 2.4vw, 30px);
}
.ip-ladder {
  position: relative;
  aspect-ratio: 5 / 4;
  max-height: 340px;
  border: 1px solid var(--ch-line-2);
  background: var(--ch-card);
}
.ip-ladder span {
  position: absolute;
  border: 1px solid var(--ch-line-2);
  background: transparent;
}
.ip-ladder .ip-ladder-a { inset: 9%; }
.ip-ladder .ip-ladder-b { inset: 26%; border-color: rgba(27, 47, 92, .34); }
.ip-ladder .ip-ladder-c { inset: 42%; border-color: rgba(27, 47, 92, .46); }
.ip-ladder .ip-ladder-dot {
  inset: auto;
  left: 50%;
  top: 50%;
  width: 9px;
  height: 9px;
  translate: -50% -50%;
  border: 0;
  background: var(--ch-orange);
}


/* ----------------------------------------------------------------------------
   09. Capabilities: knowledge cells and access panel
   ------------------------------------------------------------------------- */
.ip-knit {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1px;
  margin-top: clamp(22px, 2.6vw, 32px);
  background: var(--ch-line);
  border-block: 1px solid var(--ch-line);
}
.ip-knit-cell {
  background: var(--ch-ivory);
  padding: clamp(18px, 2.2vw, 28px);
  display: flex;
  flex-direction: column;
  gap: 8px;
  min-width: 0;
}
.ip-knit-cell h3 {
  font-family: var(--ch-display);
  font-size: clamp(1.16rem, 1.7vw, 1.45rem);
  font-weight: 600;
  line-height: 1.1;
  color: var(--ch-ink);
}
.ip-knit-cell p { font-size: .95rem; line-height: 1.55; color: var(--ch-body); }

.ip-panel {
  background: var(--ch-ink);
  color: #e8e3d6;
  padding: clamp(28px, 3.6vw, 52px) clamp(22px, 3.2vw, 48px);
  display: grid;
  grid-template-columns: minmax(0, .58fr) minmax(0, .42fr);
  gap: clamp(24px, 3.6vw, 52px);
  align-items: center;
}
.ip-panel .ch-kicker { color: #c9d6e6; }
.ip-panel h2 {
  font-family: var(--ch-display);
  font-size: clamp(1.7rem, 2.8vw, 2.5rem);
  font-weight: 600;
  line-height: 1.06;
  letter-spacing: -.012em;
  color: #fdf8ea;
  max-width: 20ch;
  margin-top: 10px;
}
.ip-panel .ip-stand { color: #dbe2ea; margin-top: 12px; }
.ip-panel .ip-prose { margin-top: 16px; }
.ip-panel .ip-prose p { color: #dfe4e9; }
.ip-panel .ip-prose a { color: #faf5e8; }

.ip-exchange { display: grid; gap: 8px; align-content: center; }
.ip-exchange-node {
  border: 1px solid rgba(247, 242, 228, .32);
  padding: 12px 14px;
}
.ip-exchange-node strong {
  display: block;
  font-family: var(--ch-display);
  font-size: 1.05rem;
  font-weight: 600;
  color: #fdf8ea;
}
.ip-exchange-node span { font-size: .8rem; line-height: 1.4; color: #c5d2e1; }
.ip-exchange-arrow {
  display: grid;
  place-items: center;
  height: 22px;
  color: var(--ip-accent-on-ink);
}
.ip-exchange-arrow .ch-ic { width: 18px; height: 18px; rotate: 90deg; }
.ip-exchange-arrow i { display: none; }


/* ----------------------------------------------------------------------------
   10. Capabilities: make it yours band
   ------------------------------------------------------------------------- */
.ip-make { background: var(--ch-band); }
.ip-make-grid {
  display: grid;
  grid-template-columns: minmax(0, .48fr) minmax(0, .52fr);
  gap: clamp(20px, 3.4vw, 52px);
  align-items: start;
}
.ip-make h2 {
  font-family: var(--ch-display);
  font-size: clamp(1.8rem, 3.1vw, 2.8rem);
  font-weight: 600;
  line-height: 1.05;
  letter-spacing: -.014em;
  color: var(--ch-band-ink);
  max-width: 16ch;
}
.ip-make .ip-stand { color: var(--ch-band-ink); margin-top: 12px; }
.ip-make .ip-prose p { color: #22364e; }
.ip-make .ip-prose a { color: var(--ch-band-ink); }


/* ----------------------------------------------------------------------------
   11. Values: principle ledger with alternating indents
   ------------------------------------------------------------------------- */
.ip-hero-simple {
  padding: clamp(40px, 5vw, 74px) 0 clamp(26px, 3vw, 40px);
}
.ip-hero-simple h1 {
  font-family: var(--ch-display);
  font-size: clamp(2.55rem, 5.2vw, 4.4rem);
  font-weight: 600;
  line-height: 1;
  letter-spacing: -.018em;
  color: var(--ch-ink);
  max-width: 14ch;
}

.ip-principles {
  margin-top: clamp(24px, 3vw, 36px);
  padding: 0;
  border-top: 2px solid var(--ch-ink);
}
.ip-principle {
  display: grid;
  grid-template-columns: clamp(58px, 8vw, 108px) minmax(0, 1fr);
  gap: clamp(14px, 3vw, 44px);
  padding: clamp(24px, 3vw, 38px) 0;
  border-bottom: 1px solid var(--ch-line);
}
.ip-principle:nth-child(even) { padding-left: clamp(0px, 7vw, 120px); }
.ip-principle-num {
  font-family: var(--ch-display);
  font-size: clamp(1.7rem, 3vw, 2.9rem);
  font-weight: 600;
  line-height: .9;
  letter-spacing: -.02em;
  color: rgba(27, 47, 92, .55);
}
.ip-principle h2 {
  font-family: var(--ch-display);
  font-size: clamp(1.55rem, 2.7vw, 2.4rem);
  font-weight: 600;
  line-height: 1.08;
  letter-spacing: -.012em;
  color: var(--ch-ink);
  max-width: 22ch;
}
.ip-principle .ip-stand { margin-top: 10px; }
.ip-principle .ip-prose { margin-top: clamp(12px, 1.5vw, 18px); }

/* Values hero stack, three flat layers. */
.ip-stack {
  border-top: 2px solid var(--ch-ink);
  align-self: center;
  width: min(100%, 27rem);
  margin-left: auto;
}
.ip-stack-row {
  display: grid;
  grid-template-columns: 92px minmax(0, 1fr);
  gap: 16px;
  align-items: baseline;
  padding: 14px 0;
  border-bottom: 1px solid var(--ch-line);
}
.ip-stack-row dt {
  font-family: var(--ch-display);
  font-size: 1.02rem;
  font-weight: 600;
  color: var(--ch-ink);
}
.ip-stack-row dd {
  margin: 0;
  font-size: .88rem;
  line-height: 1.45;
  color: var(--ch-body);
}
.ip-hero-split {
  display: grid;
  grid-template-columns: minmax(0, 1.02fr) minmax(0, .98fr);
  gap: clamp(22px, 4vw, 64px);
  align-items: center;
}

/* Values hero as a two part split, title left, lede right. */
.ip-hero-split--text {
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr);
  gap: clamp(18px, 4vw, 64px);
  align-items: end;
}
.ip-hero-split--text .ip-lede { margin-top: 0; padding-bottom: 6px; }

/* Values layers band. */
.ip-layers { background: var(--ch-band); padding: clamp(30px, 3.8vw, 54px) 0; }
.ip-layers-grid {
  display: grid;
  grid-template-columns: minmax(0, .5fr) minmax(0, .5fr);
  gap: clamp(22px, 3.6vw, 56px);
  align-items: center;
}
.ip-layers h2 {
  font-family: var(--ch-display);
  font-size: clamp(1.55rem, 2.6vw, 2.2rem);
  font-weight: 600;
  line-height: 1.1;
  letter-spacing: -.012em;
  color: var(--ch-band-ink);
  max-width: 24ch;
}
.ip-layers .ip-stand { color: #22364e; margin-top: 12px; }
.ip-layers .ip-stack { border-top-color: var(--ch-band-ink); margin: 0; width: 100%; }
.ip-layers .ip-stack-row { border-bottom-color: rgba(27, 47, 92, .28); }
.ip-layers .ip-stack-row dt { color: var(--ch-band-ink); }
.ip-layers .ip-stack-row dd { color: #22364e; }

/* Close plate, image beside a solid ink panel. */
.ip-plate {
  display: grid;
  grid-template-columns: minmax(0, 1.06fr) minmax(0, .94fr);
  background: var(--ch-frame);
}
.ip-plate-art {
  position: relative;
  margin: 0;
  min-height: clamp(300px, 36vw, 480px);
  overflow: hidden;
  background: #e6e3d1;
}
.ip-plate-art img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 34% 68%;
}
.ip-plate--model .ip-plate-art img { object-position: 66% 52%; }
.ip-link-on-ink { color: #faf5e8; border-bottom-color: rgba(247, 242, 228, .45); }
.ip-link-on-ink .ch-ic { color: var(--ip-accent-on-ink); }
.ip-link-on-ink:hover { color: #faf5e8; border-bottom-color: #faf5e8; }
.ip-plate-copy {
  background: var(--ch-ink);
  color: #f0ebde;
  padding: clamp(28px, 3.6vw, 54px) clamp(24px, 3.6vw, 52px);
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 12px;
}
.ip-plate-copy .ch-kicker { color: #c9d6e6; }
.ip-plate-copy p:not(.ch-kicker) {
  font-size: clamp(1rem, 1.1vw, 1.1rem);
  line-height: 1.6;
  color: #e2e6e6;
  max-width: 40ch;
}
.ip-plate-statement {
  font-family: var(--ch-display);
  font-size: clamp(1.3rem, 2.1vw, 1.85rem);
  font-weight: 500;
  line-height: 1.25;
  letter-spacing: -.01em;
  color: #fbf6e9;
  max-width: 24ch;
}


/* ----------------------------------------------------------------------------
   12. Research: measured thread with markers
   ------------------------------------------------------------------------- */
.ip-ideas {
  margin-top: clamp(26px, 3.2vw, 44px);
  border-left: 1px solid var(--ch-line-2);
  padding-left: var(--ip-thread);
}
.ip-idea {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, .82fr) minmax(0, 1.18fr);
  gap: clamp(18px, 3.4vw, 56px);
  padding: clamp(28px, 3.4vw, 46px) 0;
  border-top: 1px solid var(--ch-line);
}
.ip-idea:first-child { border-top: 0; padding-top: 0; }
.ip-idea::before {
  content: "";
  position: absolute;
  left: calc(-1 * var(--ip-thread));
  top: clamp(28px, 3.4vw, 46px);
  width: 9px;
  height: 9px;
  translate: -50% 4px;
  background: var(--ch-orange);
}
.ip-idea:first-child::before { top: 4px; }
.ip-idea h2 {
  font-family: var(--ch-display);
  font-size: clamp(1.5rem, 2.5vw, 2.2rem);
  font-weight: 600;
  line-height: 1.08;
  letter-spacing: -.012em;
  color: var(--ch-ink);
  max-width: 20ch;
  margin-top: 10px;
}
.ip-idea .ip-stand { margin-top: 10px; }
.ip-idea .ip-prose { align-self: end; }

/* Milestone plate between ideas. */
.ip-milestone {
  height: clamp(190px, 25vw, 340px);
  overflow: hidden;
  background: #e6e3d1;
}
.ip-milestone img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 48% 56%;
}

.ip-coda { background: var(--ch-band); }
.ip-coda-grid {
  display: grid;
  grid-template-columns: minmax(0, .48fr) minmax(0, .52fr);
  gap: clamp(20px, 3.6vw, 56px);
  align-items: start;
}
.ip-coda h2 {
  font-family: var(--ch-display);
  font-size: clamp(1.9rem, 3.3vw, 3rem);
  font-weight: 600;
  line-height: 1.04;
  letter-spacing: -.014em;
  color: var(--ch-band-ink);
  max-width: 16ch;
}
.ip-coda .ip-stand { color: var(--ch-band-ink); margin-top: 12px; }
.ip-coda .ip-prose p { color: #22364e; }


/* ----------------------------------------------------------------------------
   13. About: masthead, letter, release table, scene
   ------------------------------------------------------------------------- */
.ip-masthead {
  padding: clamp(34px, 4.4vw, 62px) 0 clamp(20px, 2.4vw, 30px);
  border-bottom: 2px solid var(--ch-ink);
}
.ip-masthead h1 {
  font-family: var(--ch-display);
  font-size: clamp(2.5rem, 5.2vw, 4.4rem);
  font-weight: 600;
  line-height: 1;
  letter-spacing: -.018em;
  color: var(--ch-ink);
  max-width: 16ch;
  margin-top: 12px;
}
.ip-masthead .ip-lede { max-width: 56ch; }
.ip-masthead-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 26px;
  margin-top: clamp(22px, 2.6vw, 32px);
  font-size: .74rem;
  font-weight: 600;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--ch-label);
}

.ip-letter {
  display: grid;
  grid-template-columns: minmax(0, .4fr) minmax(0, .6fr);
  gap: clamp(20px, 3.6vw, 60px);
  padding: clamp(30px, 3.8vw, 52px) 0;
  border-bottom: 1px solid var(--ch-line);
  align-items: start;
}
.ip-letter h2 {
  font-family: var(--ch-display);
  font-size: clamp(1.7rem, 2.8vw, 2.5rem);
  font-weight: 600;
  line-height: 1.06;
  letter-spacing: -.012em;
  color: var(--ch-ink);
  max-width: 16ch;
}

.ip-table { margin-top: clamp(8px, 1vw, 14px); }
.ip-row {
  display: grid;
  grid-template-columns: minmax(0, .3fr) minmax(0, .7fr);
  gap: clamp(12px, 3vw, 44px);
  padding: clamp(15px, 1.9vw, 22px) 0;
  border-bottom: 1px solid var(--ch-line);
  align-items: baseline;
}
.ip-row:first-child { border-top: 1px solid var(--ch-line-2); }
.ip-row h3 {
  font-family: var(--ch-display);
  font-size: clamp(1.08rem, 1.5vw, 1.3rem);
  font-weight: 600;
  line-height: 1.2;
  letter-spacing: -.008em;
  color: var(--ch-ink);
}
.ip-row p {
  font-size: .98rem;
  line-height: 1.6;
  color: var(--ch-body);
  max-width: 60ch;
}

.ip-scene {
  display: grid;
  grid-template-columns: minmax(0, .44fr) minmax(0, .56fr);
  gap: clamp(22px, 3.6vw, 56px);
  align-items: center;
  padding: clamp(30px, 3.8vw, 52px) 0;
  border-bottom: 1px solid var(--ch-line);
}
.ip-scene-art {
  margin: 0;
  overflow: hidden;
  aspect-ratio: 4 / 3;
  background: #e6e3d1;
}
.ip-scene-art img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 30% 42%;
}
.ip-scene h2 {
  font-family: var(--ch-display);
  font-size: clamp(1.7rem, 2.8vw, 2.5rem);
  font-weight: 600;
  line-height: 1.06;
  letter-spacing: -.012em;
  color: var(--ch-ink);
  max-width: 18ch;
}
.ip-scene .ip-stand { margin-top: 12px; }
.ip-scene .ip-prose { margin-top: clamp(12px, 1.6vw, 18px); }

.ip-foundation {
  padding: clamp(26px, 3.2vw, 42px) 0;
  border-bottom: 1px solid var(--ch-line);
  display: grid;
  grid-template-columns: minmax(0, .4fr) minmax(0, .6fr);
  gap: clamp(20px, 3.6vw, 60px);
}
.ip-foundation h2 {
  font-family: var(--ch-display);
  font-size: clamp(1.7rem, 2.8vw, 2.5rem);
  font-weight: 600;
  line-height: 1.06;
  letter-spacing: -.012em;
  color: var(--ch-ink);
  padding-left: 16px;
  border-left: 3px solid var(--ch-orange);
}


/* ----------------------------------------------------------------------------
   14. Keep reading, shared by every route
   ------------------------------------------------------------------------- */
.ip-next { padding: clamp(34px, 4vw, 56px) 0 clamp(30px, 3.2vw, 46px); }
.ip-next-head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px 30px;
  padding-bottom: 16px;
  border-bottom: 1px solid var(--ch-line-2);
}
.ip-next-head h2 {
  font-family: var(--ch-display);
  font-size: clamp(1.3rem, 1.9vw, 1.65rem);
  font-weight: 600;
  letter-spacing: -.01em;
  color: var(--ch-ink);
}
.ip-next-head p { font-size: .88rem; color: var(--ch-body); }
.ip-next-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(14px, 2vw, 28px);
  margin-top: clamp(16px, 1.8vw, 22px);
}
.ip-next-card {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding-top: 14px;
  border-top: 2px solid var(--ch-ink);
  text-decoration: none;
  color: inherit;
  min-width: 0;
  transition: translate .22s var(--ch-ease-soft), border-color .22s var(--ch-ease-soft);
}
.ip-next-card:hover { translate: 0 -2px; border-top-color: var(--ch-orange); }
.ip-next-card h3 {
  font-family: var(--ch-display);
  font-size: clamp(1.16rem, 1.7vw, 1.42rem);
  font-weight: 600;
  line-height: 1.14;
  letter-spacing: -.01em;
  color: var(--ch-ink);
  max-width: 20ch;
}
.ip-next-card p {
  font-size: .92rem;
  line-height: 1.55;
  color: var(--ch-body);
  max-width: 32ch;
}
.ip-next-go {
  display: inline-flex;
  align-items: center;
  gap: .4em;
  margin-top: auto;
  padding-top: 8px;
  font-size: .8rem;
  font-weight: 600;
  letter-spacing: .04em;
  color: var(--ch-ink-2);
}
.ip-next-go .ch-ic {
  width: 1.5em;
  height: .8em;
  color: var(--ch-orange);
  transition: translate .25s var(--ch-ease);
}
.ip-next-card:hover .ip-next-go .ch-ic,
.ip-next-card:focus-visible .ip-next-go .ch-ic { translate: 4px 0; }


/* ----------------------------------------------------------------------------
   15. Motion, one authored entrance and quiet hover
   ------------------------------------------------------------------------- */
@media (prefers-reduced-motion: no-preference) {
  .ip-hero-copy > * { animation: ip-rise .8s var(--ch-ease) both; }
  .ip-hero-copy .ch-kicker { animation-delay: .03s; }
  .ip-hero-copy h1 { animation-delay: .06s; }
  .ip-hero-copy .ip-lede { animation-delay: .14s; }
  .ip-hero-copy .ch-cta-row,
  .ip-hero-copy .ip-verbs,
  .ip-hero-copy .ip-hero-meta { animation-delay: .22s; }

  .ip-hero-plate img { animation: ip-plate 1.1s var(--ch-ease) .06s both; }
  .ip-masthead > * { animation: ip-rise .75s var(--ch-ease) both; }
  .ip-masthead h1 { animation-delay: .06s; }
  .ip-masthead .ip-lede { animation-delay: .14s; }

  .ip-task,
  .ip-principle,
  .ip-next-card {
    animation: ip-settle .72s var(--ch-ease) both;
    animation-timeline: view();
    animation-range: entry 4% cover 22%;
  }
}

@supports not (animation-timeline: view()) {
  .ip-task,
  .ip-principle,
  .ip-next-card { animation: none; }
}

@keyframes ip-rise {
  from { opacity: 0; translate: 0 14px; }
  to   { opacity: 1; translate: 0 0; }
}
@keyframes ip-plate {
  from { clip-path: inset(0 0 0 100%); }
  to   { clip-path: inset(0 0 0 0); }
}
@keyframes ip-settle {
  from { opacity: 0; translate: 0 10px; }
  to   { opacity: 1; translate: 0 0; }
}


/* ----------------------------------------------------------------------------
   16. Responsive, 360 to 1440
   ------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  .ip-hero-copy > *,
  .ip-hero-plate img,
  .ip-masthead > *,
  .ip-task,
  .ip-principle,
  .ip-next-card {
    animation: none !important;
  }
  .ip-next-card:hover { translate: none; }
  .ip-next-card:hover .ip-next-go .ch-ic { translate: none; }
}
@media (max-width: 1180px) {
  .ip-hero-grid { grid-template-columns: minmax(300px, 48%) minmax(0, 52%); }
  .ip-hero-copy { padding-left: var(--ch-edge); }
}

@media (max-width: 1020px) {
  .ip-hero-grid { grid-template-columns: minmax(0, 1fr); min-height: 0; }
  .ip-hero-copy {
    padding: clamp(30px, 5vw, 44px) var(--ch-gutter) clamp(26px, 4vw, 36px);
  }
  .ip-hero h1 { max-width: 16ch; font-size: clamp(2.4rem, 6.4vw, 3.4rem); }
  .ip-hero-plate { aspect-ratio: 16 / 9; }
  .ip-hero--wide .ip-hero-copy { padding-inline: 0; }
  .ip-hero-split--text { grid-template-columns: minmax(0, 1fr); gap: 6px; }
  .ip-hero-split--text .ip-lede { margin-top: 16px; padding-bottom: 0; }
  .ip-feature-grid,
  .ip-layers-grid { grid-template-columns: minmax(0, 1fr); gap: 16px; }
  .ip-feature h2, .ip-layers h2 { max-width: 24ch; }

  .ip-sec-head { grid-template-columns: minmax(0, 1fr); gap: 12px; align-items: start; }
  .ip-sec-head .ip-stand { grid-column: 1; grid-row: auto; }
  .ip-sec-head h2 { max-width: 22ch; }

  .ip-facts-inner { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ip-fact:nth-child(2) { border-right: 0; }
  .ip-fact:nth-child(1),
  .ip-fact:nth-child(2) { border-bottom: 1px solid var(--ch-line); }

  .ip-task:nth-child(n) { grid-column: span 6; }
  .ip-task:nth-child(5) { grid-column: span 12; min-height: 0; }

  .ip-media-row { grid-template-columns: 48px minmax(120px, 190px) minmax(0, 1fr); }

  .ip-scale { grid-template-columns: minmax(0, 1fr); }
  .ip-ladder { max-width: 420px; }

  .ip-knit { grid-template-columns: minmax(0, 1fr); }

  .ip-panel { grid-template-columns: minmax(0, 1fr); }
  .ip-exchange { max-width: 26rem; }

  .ip-make-grid,
  .ip-coda-grid { grid-template-columns: minmax(0, 1fr); }

  .ip-principle:nth-child(even) { padding-left: 0; }

  .ip-hero-split { grid-template-columns: minmax(0, 1fr); }
  .ip-stack { margin: 8px 0 0; }

  .ip-plate { grid-template-columns: minmax(0, 1fr); }
  .ip-plate-art { aspect-ratio: 16 / 9; min-height: 0; }

  .ip-idea { grid-template-columns: minmax(0, 1fr); gap: 14px; }
  .ip-idea .ip-prose { align-self: start; }

  .ip-letter,
  .ip-foundation { grid-template-columns: minmax(0, 1fr); gap: 14px; }
  .ip-scene { grid-template-columns: minmax(0, 1fr); }
  .ip-scene-art { aspect-ratio: 16 / 10; }

  .ip-next-grid { grid-template-columns: minmax(0, 1fr); }
  .ip-next-card { border-top-width: 1px; padding: 14px 0 0; }
  .ip-next-card p { max-width: 52ch; }
}

@media (max-width: 720px) {
  .ip-entry { grid-template-columns: minmax(0, 1fr); gap: 6px; }
  .ip-entry .ip-num { padding-top: 0; }

  .ip-task:nth-child(n) { grid-column: span 12; min-height: 0; }

  .ip-media-row { grid-template-columns: 40px minmax(0, 1fr); gap: 10px 14px; }
  .ip-media-row p:not(.ip-num) { grid-column: 2; }

  .ip-principle { grid-template-columns: minmax(0, 1fr); gap: 8px; }
  .ip-principle-num { font-size: 1.5rem; }

  .ip-row { grid-template-columns: minmax(0, 1fr); gap: 6px; }

  .ip-plate-copy { padding: clamp(24px, 5vw, 36px) var(--ch-gutter); }
  .ip-plate-copy > * { max-width: 52ch; }

  .ip-ideas { padding-left: clamp(16px, 4vw, 24px); }
  .ip-idea::before { left: calc(-1 * clamp(16px, 4vw, 24px)); }

  .ip-hero-meta { font-size: .72rem; letter-spacing: .08em; }
  .ip-senses { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ip-senses li:last-child { grid-column: span 2; }
  .ip-stack-row { grid-template-columns: 84px minmax(0, 1fr); gap: 12px; }
  .ip-verbs { gap: 6px 14px; }
  .ip-verbs a { font-size: .72rem; }
}

@media (max-width: 460px) {
  .ip-facts-inner { grid-template-columns: minmax(0, 1fr); }
  .ip-fact { border-right: 0; border-bottom: 1px solid var(--ch-line); }
  .ip-fact:last-child { border-bottom: 0; }
  .ip-hero h1 { font-size: clamp(2.15rem, 9.4vw, 2.7rem); }
  .ip-hero-simple h1 { font-size: clamp(2.2rem, 10vw, 2.8rem); }
  .ip-media-name { font-size: 1.22rem; }
  .ip-plate-statement { font-size: 1.22rem; }
  .ip-stack-row { grid-template-columns: minmax(0, 1fr); gap: 2px; }
}