/* Casterly & Co. — multi-page chrome and elevations.
   Loads AFTER eri.css. Adds: scroll progress, cinematic page transitions,
   interior page headers, home directory lists, teaser bands, link affordances. */

/* ============================================================
   TWO-PANE READER — index of titles (sticky) + editorial detail.
   Replaces accordions for long-copy sections (Strategies, Focus).
   ============================================================ */
.reader { display: grid; grid-template-columns: minmax(248px, 0.82fr) minmax(0, 1.55fr); gap: clamp(36px, 6vw, 104px); align-items: start; }
.reader__nav { position: sticky; top: clamp(92px, 13vh, 150px); display: grid; }
.reader__tab {
  display: grid; grid-template-columns: 38px 1fr; gap: 16px; align-items: baseline;
  width: 100%; text-align: left; background: none; border: 0; cursor: pointer; color: inherit;
  padding: clamp(17px, 1.7vw, 23px) 0; border-top: 1px solid var(--cco-vellum-deep);
  position: relative; transition: padding-left 520ms cubic-bezier(0.16,1,0.3,1);
}
.reader__tab:first-child { border-top: 0; }
.reader__tab::before { content: ""; position: absolute; left: 0; top: 50%; height: 0; width: 2px; background: var(--cco-bronze-deep); transform: translateY(-50%); transition: height 480ms cubic-bezier(0.16,1,0.3,1); }
.reader__tab.is-active::before { height: 64%; }
.reader__tab.is-active { padding-left: 18px; }
.reader__tn { font-family: var(--cco-font-body); font-weight: 500; font-size: 0.95rem; color: var(--cco-bronze-deep); line-height: 1.5; font-feature-settings: "lnum" 1, "tnum" 1; font-variant-numeric: lining-nums tabular-nums; }
.reader__tt { font-family: var(--cco-font-body); font-weight: 500; font-size: clamp(1.12rem, 1.5vw, 1.42rem); line-height: 1.22; letter-spacing: 0.005em; color: color-mix(in srgb, var(--cco-slate) 50%, var(--cco-vellum)); transition: color 440ms ease; font-feature-settings: "lnum" 1, "tnum" 1; font-variant-numeric: lining-nums tabular-nums; }
.reader__tab:hover .reader__tt { color: color-mix(in srgb, var(--cco-slate) 78%, var(--cco-vellum)); }
.reader__tab.is-active .reader__tt { color: var(--cco-slate); }

.reader__stage { position: relative; }
.reader__panel { display: none; }
.reader__panel.is-active { display: block; animation: readerIn 760ms cubic-bezier(0.16,1,0.3,1); }
@keyframes readerIn { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: none; } }
.reader__meta { display: flex; align-items: center; gap: 16px; margin-bottom: clamp(26px, 3vw, 40px); }
.reader__meta .n { font-family: var(--cco-font-body); font-weight: 500; font-size: 1.04rem; color: var(--cco-bronze-deep); font-feature-settings: "lnum" 1, "tnum" 1; font-variant-numeric: lining-nums tabular-nums; }
.reader__meta .ln { flex: 1; height: 1px; background: var(--cco-vellum-deep); }
.reader__panel h3 { font-family: var(--cco-font-editorial); font-weight: 400; font-size: clamp(1.9rem, 3vw, 3rem); line-height: 1.12; letter-spacing: -0.01em; color: var(--cco-slate); margin: 0 0 clamp(26px, 3vw, 40px); max-width: 18ch; }
.reader__panel p { font-size: clamp(1.12rem, 1.45vw, 1.32rem); line-height: 1.66; color: color-mix(in srgb, var(--cco-slate) 76%, var(--cco-vellum)); margin: 0 0 1.15em; max-width: 62ch; }
.reader__panel p:last-child { margin-bottom: 0; }
.reader__panel p.lead { font-family: var(--cco-font-body); font-weight: 400; font-size: clamp(1.24rem, 1.6vw, 1.5rem); line-height: 1.5; color: var(--cco-slate); margin-bottom: clamp(22px, 2.4vw, 34px); max-width: 46ch; }
.reader__panel p.lead em { color: var(--cco-bronze-deep); font-style: italic; }

/* dark variant (on slate sections) */
.reader--dark .reader__tab { border-top-color: color-mix(in srgb, var(--cco-bronze-light) 22%, transparent); }
.reader--dark .reader__tab::before { background: var(--cco-bronze-light); }
.reader--dark .reader__tn { color: var(--cco-bronze-light); }
.reader--dark .reader__tt { color: color-mix(in srgb, var(--cco-vellum) 54%, transparent); }
.reader--dark .reader__tab:hover .reader__tt { color: color-mix(in srgb, var(--cco-vellum) 80%, transparent); }
.reader--dark .reader__tab.is-active .reader__tt { color: var(--cco-vellum); }
.reader--dark .reader__meta .n { color: var(--cco-bronze-light); }
.reader--dark .reader__meta .ln { background: color-mix(in srgb, var(--cco-bronze-light) 24%, transparent); }
.reader--dark .reader__panel h3 { color: var(--cco-vellum); }
.reader--dark .reader__panel p { color: color-mix(in srgb, var(--cco-vellum) 82%, transparent); }
.reader--dark .reader__panel p.lead { color: var(--cco-vellum); }
.reader--dark .reader__panel p.lead em { color: var(--cco-bronze-light); }

@media (max-width: 860px) {
  .reader { grid-template-columns: 1fr; gap: clamp(28px, 5vw, 44px); }
  .reader__nav { position: static; }
  .reader__stage { min-height: 0; }
  /* accordion mode: eri.js moves the stage directly beneath the active tab,
     so the open item reads in sequence instead of below the whole list */
  .reader__nav .reader__stage { margin: 4px 0 clamp(22px, 5vw, 34px); }
  .reader__nav .reader__stage .reader__meta { display: none; }
  /* the active row IS the title in this layout; the panel's repeated display
     heading goes visually quiet but stays for screen readers */
  .reader__nav .reader__stage .reader__panel h3 { position: absolute; width: 1px; height: 1px; margin: 0; padding: 0; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
}

/* ============================================================
   SCROLL-SPY TOUR — Investment Focus. Stacked chapters with a
   slate-duotone media strip each, and a sticky side index that
   tracks scroll position. Distinct from the click reader.
   ============================================================ */
.tour { display: grid; grid-template-columns: 210px minmax(0, 1fr); gap: clamp(36px, 6vw, 100px); align-items: start; }
.tour__rail { position: sticky; top: clamp(96px, 14vh, 150px); display: grid; align-self: start; }
.tour__link { display: grid; grid-template-columns: 34px 1fr; gap: 12px; align-items: baseline; text-align: left; background: none; border: 0; cursor: pointer; color: inherit; padding: clamp(13px, 1.3vw, 17px) 0; border-top: 1px solid var(--cco-vellum-deep); position: relative; transition: padding-left 460ms cubic-bezier(0.16,1,0.3,1); }
.tour__link:first-child { border-top: 0; }
.tour__link::before { content: ""; position: absolute; left: 0; top: 50%; height: 0; width: 2px; background: var(--cco-bronze-deep); transform: translateY(-50%); transition: height 440ms cubic-bezier(0.16,1,0.3,1); }
.tour__link.is-active::before { height: 60%; }
.tour__link.is-active { padding-left: 16px; }
.tour__ln { font-family: var(--cco-font-body); font-weight: 500; font-size: 0.86rem; color: var(--cco-bronze-deep); font-feature-settings: "lnum" 1, "tnum" 1; font-variant-numeric: lining-nums tabular-nums; }
.tour__lt { font-family: var(--cco-font-smallcaps); text-transform: uppercase; letter-spacing: 0.12em; font-size: 0.72rem; line-height: 1.3; color: color-mix(in srgb, var(--cco-slate) 48%, var(--cco-vellum)); transition: color 420ms ease; }
.tour__link.is-active .tour__lt { color: var(--cco-slate); }

.tour__chapters { display: grid; gap: clamp(72px, 12vh, 150px); }
.tour__chapter { scroll-margin-top: 120px; }
.tour__media { position: relative; aspect-ratio: 16/7; width: 100%; overflow: hidden; margin-bottom: clamp(30px, 3.4vw, 48px); background: var(--cco-slate-darker); }
.tour__media img { width: 100%; height: 100%; object-fit: cover; }
.tour__media .duo__scrim { position: absolute; inset: 0; }
.tour__badge { position: absolute; z-index: 3; left: clamp(20px, 2.4vw, 34px); bottom: clamp(16px, 2vw, 26px); font-family: var(--cco-font-editorial); font-size: clamp(2rem, 3.4vw, 3.2rem); color: var(--cco-vellum); line-height: 1; }
.tour__meta { display: flex; align-items: center; gap: 14px; margin-bottom: clamp(18px, 2vw, 26px); }
.tour__meta .lbl { font-family: var(--cco-font-smallcaps); text-transform: uppercase; letter-spacing: 0.3em; font-size: 0.62rem; color: var(--cco-bronze-deep); }
.tour__meta .ln { flex: 1; height: 1px; background: var(--cco-vellum-deep); }
.tour__chapter h3 { font-family: var(--cco-font-editorial); font-weight: 400; font-size: clamp(1.9rem, 3vw, 2.9rem); line-height: 1.12; letter-spacing: -0.01em; color: var(--cco-slate); margin: 0 0 clamp(22px, 2.6vw, 34px); max-width: 20ch; }
.tour__chapter p { font-size: clamp(1.12rem, 1.45vw, 1.32rem); line-height: 1.66; color: color-mix(in srgb, var(--cco-slate) 76%, var(--cco-vellum)); margin: 0 0 1.15em; max-width: 64ch; }
.tour__chapter p:first-of-type { font-size: clamp(1.24rem, 1.6vw, 1.5rem); line-height: 1.5; color: var(--cco-slate); max-width: 48ch; }
.tour__chapter p:last-child { margin-bottom: 0; }
@media (max-width: 860px) {
  .tour { grid-template-columns: 1fr; gap: 0; }
  .tour__rail { display: none; }
}

/* ============================================================
   MANIFESTO — Philosophy. Centered, ceremonial, stacked values
   with a medallion motif. No panel UI.
   ============================================================ */
.mani { max-width: 1080px; margin: 0 auto; }
.mani__item { text-align: center; padding: clamp(64px, 10vh, 132px) clamp(8px, 4vw, 40px); border-top: 1px solid var(--cco-vellum-deep); }
.mani__item:first-child { border-top: 0; padding-top: clamp(8px, 2vw, 24px); }
.mani__n { font-family: var(--cco-font-editorial); font-size: clamp(1.1rem, 1.6vw, 1.4rem); color: var(--cco-bronze-deep); letter-spacing: 0.04em; }
.mani__rule { width: 1px; height: clamp(34px, 5vh, 56px); background: color-mix(in srgb, var(--cco-bronze-deep) 50%, transparent); margin: clamp(18px, 2.4vw, 30px) auto; }
.mani__title { font-family: var(--cco-font-editorial); font-weight: 400; font-size: clamp(2rem, 4vw, 3.6rem); line-height: 1.1; letter-spacing: -0.01em; color: var(--cco-slate); margin: 0 auto clamp(26px, 3vw, 40px); max-width: 16ch; }
.mani__title em { color: var(--cco-bronze-deep); font-style: italic; }
.mani__body { display: grid; gap: 1.1em; max-width: 60ch; margin: 0 auto; }
.mani__body p { font-size: clamp(1.14rem, 1.5vw, 1.36rem); line-height: 1.68; color: color-mix(in srgb, var(--cco-slate) 76%, var(--cco-vellum)); margin: 0; }
.mani__body p:first-child { font-family: var(--cco-font-body); font-size: clamp(1.3rem, 1.7vw, 1.6rem); line-height: 1.5; color: var(--cco-slate); max-width: 44ch; margin: 0 auto; }

/* media-led reader: image atop each panel (Investment Focus option) */
.reader__img { position: relative; aspect-ratio: 16/7; width: 100%; overflow: hidden; margin-bottom: clamp(24px, 2.8vw, 38px); background: var(--cco-slate-darker); }
.reader__img img { width: 100%; height: 100%; object-fit: cover; }
.reader__img .duo__scrim { position: absolute; inset: 0; }
.reader__img .b { position: absolute; z-index: 3; left: clamp(16px,2vw,28px); bottom: clamp(12px,1.6vw,22px); font-family: var(--cco-font-editorial); font-size: clamp(1.7rem,3vw,2.8rem); color: var(--cco-vellum); line-height: 1; }

.reader__pager { display: flex; gap: 16px; margin-top: clamp(40px, 5vw, 68px); padding-top: clamp(24px, 2.6vw, 36px); border-top: 1px solid var(--cco-vellum-deep); }
.reader__pg { flex: 1; background: none; border: 0; cursor: pointer; text-align: left; display: grid; gap: 6px; padding: 4px 0; transition: opacity 320ms ease; }
.reader__pg--next { text-align: right; }
.reader__pg .d { font-family: var(--cco-font-smallcaps); text-transform: uppercase; letter-spacing: 0.28em; font-size: 0.58rem; color: var(--cco-bronze-deep); }
.reader__pg .t { font-family: var(--cco-font-body); font-weight: 500; font-size: clamp(1rem, 1.3vw, 1.18rem); color: color-mix(in srgb, var(--cco-slate) 70%, var(--cco-vellum)); line-height: 1.2; transition: color 320ms ease; }
.reader__pg:hover .t { color: var(--cco-slate); }
.reader--dark .reader__pager { border-top-color: color-mix(in srgb, var(--cco-bronze-light) 22%, transparent); }
.reader--dark .reader__pg .d { color: var(--cco-bronze-light); }
.reader--dark .reader__pg .t { color: color-mix(in srgb, var(--cco-vellum) 72%, transparent); }
.reader--dark .reader__pg:hover .t { color: var(--cco-vellum); }
@media (max-width: 480px) { .reader__pg .t { font-size: 0.92rem; } }
/* accordion mode: the full list sits directly above the open item, so the
   Previous/Next pager is redundant and only adds noise */
@media (max-width: 860px) { .reader__pager { display: none; } }

/* ============================================================
   PHILOSOPHY — editorial register. The words carry the page:
   open text on white, one slate statement, values full-width.
   (Replaced the frosted-glass band layout, June 2026.)
   ============================================================ */
.phil-ed__grid { display: grid; grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.35fr); gap: clamp(44px, 7vw, 120px); align-items: start; }
.phil-ed__head { position: sticky; top: clamp(110px, 14vh, 160px); display: grid; gap: clamp(20px, 2.4vw, 30px); justify-items: start; }
.phil-ed__title { font-family: var(--cco-font-editorial); font-weight: 400; font-size: clamp(2.3rem, 4.2vw, 4rem); line-height: 1.04; letter-spacing: -0.01em; margin: 0; color: var(--cco-slate-deep); }
.phil-ed__rule { width: clamp(34px, 4vw, 52px); height: 1px; background: var(--cco-bronze); }
.phil-ed__body { display: grid; gap: clamp(20px, 2.2vw, 30px); }
.phil-ed__body p { margin: 0; font-size: clamp(1.06rem, 1.32vw, 1.24rem); line-height: 1.72; color: var(--cco-stone); max-width: 58ch; text-wrap: pretty; }
.phil-ed__body p.is-lede { font-size: clamp(1.26rem, 1.7vw, 1.56rem); line-height: 1.5; color: var(--cco-slate-deep); }
@media (max-width: 880px) {
  .phil-ed__grid { grid-template-columns: 1fr; gap: clamp(32px, 6vw, 44px); }
  .phil-ed__head { position: static; }
}

/* quiet photographic breath between sections */
.phil-still { position: relative; height: clamp(300px, 52vh, 560px); overflow: hidden; }
.phil-still .duo { position: absolute; inset: 0; }
.phil-still img { width: 100%; height: 112%; object-fit: cover; }
.phil-still .duo__scrim { position: absolute; inset: 0; }

/* slate statement band */
.phil-state__display { font-family: var(--cco-font-editorial); font-weight: 400; font-size: clamp(1.8rem, 3.2vw, 3.1rem); line-height: 1.22; letter-spacing: -0.005em; color: var(--cco-vellum); max-width: 26ch; margin: 0 0 clamp(44px, 5.5vw, 80px); text-wrap: pretty; }
.phil-state__cols { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(30px, 4.5vw, 72px); }
.phil-state__cols p { margin: 0; font-size: clamp(1.04rem, 1.3vw, 1.2rem); line-height: 1.68; color: color-mix(in srgb, var(--cco-vellum) 84%, transparent); max-width: 50ch; text-wrap: pretty; }
@media (max-width: 760px) { .phil-state__cols { grid-template-columns: 1fr; } }

/* values — full-bleed photographic section, list at display scale */
.phil-values { position: relative; overflow: hidden; padding: clamp(104px, 14vw, 200px) clamp(28px, 7vw, 128px); color: var(--cco-vellum); background: var(--cco-slate-darker); }
.phil-values__media { position: absolute; inset: 0; z-index: 0; }
.phil-values__media img { width: 100%; height: 112%; object-fit: cover; }
.phil-values__media .duo__scrim { position: absolute; inset: 0; }
.phil-values__inner { position: relative; z-index: 2; max-width: 1280px; margin: 0 auto; }
.phil-values .sec-index .num { color: var(--cco-bronze-light); }
.phil-values .sec-index .ln { background: color-mix(in srgb, var(--cco-bronze-light) 28%, transparent); }
.phil-values__title { font-family: var(--cco-font-editorial); font-weight: 400; font-size: clamp(2.3rem, 4.2vw, 4rem); line-height: 1.04; color: var(--cco-vellum); margin: 0 0 clamp(40px, 5vw, 72px); }
/* values leads the page now: deepen its veil so the photo-after-photo header
   hand-off reads as a new movement, and the display-size list stays legible */
.phil-values .duo__scrim--veil { background: color-mix(in srgb, var(--cco-slate-darker) 72%, transparent); }
.phil-values .vlist__name { font-size: clamp(1.5rem, 2.6vw, 2.4rem); }
.phil-values .vlist__head { padding: clamp(22px, 2.8vw, 34px) 0; }
.phil-values .vlist__inner p { font-size: clamp(1.06rem, 1.32vw, 1.24rem); max-width: 58ch; }
.phil-values :focus-visible { outline-color: var(--cco-bronze-light); }

/* ---- legacy glass-band styles (kept only for versions/ restore) ---- */
.phil-band { position: relative; min-height: clamp(560px, 92vh, 920px); display: flex; align-items: center; overflow: hidden; }
.phil-band__media { position: absolute; inset: 0; z-index: 0; }
.phil-band__media img { width: 100%; height: 112%; object-fit: cover; }
.phil-band__media .duo__scrim { position: absolute; inset: 0; }
.phil-band__wrap { position: relative; z-index: 3; width: 100%; max-width: 1280px; margin: 0 auto; padding: clamp(48px, 8vh, 110px) clamp(24px, 6vw, 110px); display: flex; }
.phil-band:nth-child(even) .phil-band__wrap { justify-content: flex-end; }
.phil-band__glass {
  max-width: 600px; width: 100%;
  padding: clamp(36px, 4vw, 64px);
  background: color-mix(in srgb, var(--cco-slate-darker) 42%, transparent);
  border: 1px solid color-mix(in srgb, var(--cco-bronze-light) 26%, transparent);
  backdrop-filter: blur(26px) saturate(120%);
  -webkit-backdrop-filter: blur(26px) saturate(120%);
  box-shadow: 0 40px 100px -50px rgba(8,14,22,0.7);
}
.phil-band__n { font-family: var(--cco-font-editorial); font-size: clamp(1.1rem, 1.5vw, 1.35rem); color: var(--cco-bronze-light); letter-spacing: 0.04em; }
.phil-band__rule { width: clamp(34px, 4vw, 52px); height: 1px; background: color-mix(in srgb, var(--cco-bronze-light) 70%, transparent); margin: clamp(18px, 2vw, 26px) 0; }
.phil-band__title { font-family: var(--cco-font-editorial); font-weight: 400; font-size: clamp(2rem, 3.6vw, 3.4rem); line-height: 1.08; letter-spacing: -0.01em; color: var(--cco-vellum); margin: 0 0 clamp(22px, 2.6vw, 34px); max-width: 14ch; }
.phil-band__title em { color: var(--cco-bronze-light); font-style: italic; }
.phil-band__body { display: grid; gap: 1em; }
.phil-band__body p { font-size: clamp(1.1rem, 1.4vw, 1.28rem); line-height: 1.66; color: color-mix(in srgb, var(--cco-vellum) 86%, transparent); margin: 0; max-width: 50ch; }
.phil-band__body p:first-child { font-size: clamp(1.2rem, 1.55vw, 1.46rem); line-height: 1.54; color: var(--cco-vellum); }
.phil-more { display: grid; grid-template-rows: 0fr; transition: grid-template-rows 580ms cubic-bezier(0.16,1,0.3,1); }
.phil-more.is-open { grid-template-rows: 1fr; }
.phil-more__inner { overflow: hidden; display: grid; gap: 1em; }
.phil-more__inner > p { margin-top: 1em; }
.phil-toggle { margin-top: clamp(22px, 2.6vw, 32px); display: inline-flex; align-items: center; gap: 12px; background: none; border: 0; cursor: pointer; font-family: var(--cco-font-smallcaps); text-transform: uppercase; letter-spacing: 0.26em; font-size: 0.66rem; color: var(--cco-bronze-light); transition: gap 360ms ease; }
.phil-toggle i { width: 22px; height: 1px; background: var(--cco-bronze-light); display: block; transition: width 420ms cubic-bezier(0.16,1,0.3,1); }
.phil-toggle:hover { gap: 16px; }
.phil-toggle:hover i { width: 40px; }

/* clickable values list inside the Values band */
.vlist { display: grid; }
.vlist__item { border-top: 1px solid color-mix(in srgb, var(--cco-bronze-light) 24%, transparent); }
.vlist__item:first-child { border-top: 0; }
.vlist__head { display: flex; align-items: center; justify-content: space-between; gap: 16px; width: 100%; text-align: left; background: none; border: 0; cursor: pointer; color: inherit; padding: clamp(15px, 1.7vw, 21px) 0; }
.vlist__name { font-family: var(--cco-font-editorial); font-size: clamp(1.25rem, 1.9vw, 1.7rem); line-height: 1.15; color: color-mix(in srgb, var(--cco-vellum) 74%, transparent); transition: color 360ms ease; }
.vlist__item.is-open .vlist__name { color: var(--cco-bronze-light); }
.vlist__head:hover .vlist__name { color: var(--cco-vellum); }
.vlist__plus { position: relative; width: 18px; height: 18px; flex: none; }
.vlist__plus::before, .vlist__plus::after { content: ""; position: absolute; left: 50%; top: 50%; background: var(--cco-bronze-light); transition: transform 460ms cubic-bezier(0.16,1,0.3,1), opacity 360ms ease; }
.vlist__plus::before { width: 14px; height: 1px; transform: translate(-50%,-50%); }
.vlist__plus::after { width: 1px; height: 14px; transform: translate(-50%,-50%); }
.vlist__item.is-open .vlist__plus::after { transform: translate(-50%,-50%) rotate(90deg); opacity: 0; }
.vlist__panel { display: grid; grid-template-rows: 0fr; transition: grid-template-rows 520ms cubic-bezier(0.16,1,0.3,1); }
.vlist__item.is-open .vlist__panel { grid-template-rows: 1fr; }
.vlist__inner { overflow: hidden; }
.vlist__inner p { margin: 0 0 clamp(18px, 2vw, 26px); font-size: clamp(1.05rem, 1.35vw, 1.2rem); line-height: 1.62; color: color-mix(in srgb, var(--cco-vellum) 84%, transparent); max-width: 52ch; }
@media (max-width: 600px) {
  .phil-band { min-height: 0; }
  .phil-band__wrap, .phil-band:nth-child(even) .phil-band__wrap { justify-content: center; padding: clamp(64px, 12vh, 96px) 20px; }
  .phil-band__glass { max-width: none; padding: clamp(28px, 7vw, 40px); }
}

/* intro band for the philosophy page header lede */
.phil-intro { text-align: center; padding: clamp(80px, 11vw, 150px) clamp(24px, 6vw, 96px); max-width: 40ch; margin: 0 auto; }
.phil-intro .lede { font-family: var(--cco-font-editorial); font-weight: 400; font-size: clamp(1.7rem, 2.8vw, 2.6rem); line-height: 1.34; letter-spacing: -0.005em; color: var(--cco-slate); }
.phil-intro .lede em { color: var(--cco-bronze-deep); font-style: italic; }

/* italic emphasis in interior-page display headings → Cormorant Garamond italic */
.phead__title em, .split__title em, .teaser__title em, .mani__title em, .phil-band__title em, .phil-ed__title em, .phil-state__display em, .phil-values__title em, .tour__chapter h3 em, .reader__panel h3 em { font-family: var(--cco-font-body); font-style: italic; }
/* Values list reads like the rest of the page: Cormorant, not Bodoni */
.vlist__name { font-family: var(--cco-font-body); font-weight: 500; }

/* ============================================================
   VERTICAL INTEGRATION — horizontal slate rail (home). Breaks up
   the white, compact vertically, scroll-snaps across on mobile.
   ============================================================ */
.vinth { background: var(--cco-slate); color: var(--cco-vellum); padding-top: clamp(64px, 8vw, 112px); padding-bottom: clamp(64px, 8vw, 112px); }
.vinth .sec-index { margin-bottom: clamp(26px, 3vw, 40px); }
.vinth__phase { background: var(--cco-slate); scroll-snap-align: start; padding: clamp(26px, 2.8vw, 42px); transition: background 420ms ease; }
.vinth__phase:hover { background: var(--cco-slate-deep); }
.vinth__head { margin-bottom: clamp(34px, 4.2vw, 56px); }
.vinth__head .vinth__title { font-family: var(--cco-font-body); font-weight: 500; letter-spacing: 0.005em; line-height: 1.16; font-size: clamp(1.7rem, 2.5vw, 2.5rem); color: var(--cco-vellum); max-width: 24ch; margin: 0 0 clamp(24px, 2.8vw, 38px); }
.vinth__meta { display: flex; flex-wrap: wrap; align-items: baseline; gap: 18px clamp(40px, 5vw, 88px); padding-top: clamp(20px, 2.2vw, 30px); border-top: 1px solid color-mix(in srgb, var(--cco-bronze-light) 22%, transparent); }
.vinth__note { color: color-mix(in srgb, var(--cco-vellum) 80%, transparent); margin: 0; max-width: 52ch; flex: 1 1 32ch; }
.vinth__count { display: flex; align-items: center; gap: 14px; flex: none; }
.vinth__count b { line-height: 0.9; }
.vinth__count span { align-self: center; }
@media (max-width: 700px) { .vinth__meta { gap: 16px; } }
@media (max-width: 860px) { .vinth__head { grid-template-columns: 1fr; align-items: start; gap: 22px; } }
.vinth__count b { font-family: var(--cco-font-editorial); font-weight: 400; font-size: clamp(2rem, 3vw, 2.8rem); color: var(--cco-bronze-light); line-height: 1; letter-spacing: -0.02em; }
.vinth__count span { font-family: var(--cco-font-smallcaps); text-transform: uppercase; letter-spacing: 0.26em; font-size: 0.64rem; color: color-mix(in srgb, var(--cco-vellum) 64%, transparent); max-width: 16ch; }
.vinth__rail { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(260px, 1fr); gap: 1px; background: color-mix(in srgb, var(--cco-bronze-light) 20%, transparent); border: 1px solid color-mix(in srgb, var(--cco-bronze-light) 20%, transparent); overflow-x: auto; scroll-snap-type: x proximity; scrollbar-width: none; }
.vinth__rail::-webkit-scrollbar { display: none; }
.vinth__phase { background: var(--cco-slate); scroll-snap-align: start; padding: clamp(26px, 2.8vw, 42px); }
.vinth__phead { display: flex; align-items: baseline; gap: 12px; margin-bottom: clamp(18px, 2vw, 26px); padding-bottom: clamp(15px, 1.7vw, 22px); border-bottom: 1px solid color-mix(in srgb, var(--cco-bronze-light) 22%, transparent); }
.vinth__pn { font-family: var(--cco-font-editorial); font-size: 1.1rem; color: var(--cco-bronze-light); }
.vinth__pname { font-family: var(--cco-font-body); font-style: italic; font-size: clamp(1.3rem, 1.8vw, 1.65rem); color: var(--cco-vellum); }
.vinth__step { display: grid; grid-template-columns: 32px 1fr; gap: 12px; align-items: baseline; padding: clamp(9px, 1vw, 13px) 0; }
.vinth__sn { font-family: var(--cco-font-body); font-weight: 500; color: var(--cco-bronze-light); font-size: 0.92rem; font-feature-settings: "lnum" 1, "tnum" 1; }
.vinth__st { font-family: var(--cco-font-body); font-weight: 500; font-size: clamp(1.02rem, 1.3vw, 1.18rem); line-height: 1.2; color: var(--cco-vellum); letter-spacing: 0.005em; }
.vinth__more { margin-top: clamp(26px, 3vw, 40px); }
@media (max-width: 760px) { .vinth__rail { grid-auto-columns: 80%; } }

/* discipline collage: 9 image-backed cards scrolling across */
.vintc__rail { display: grid; grid-auto-flow: column; grid-auto-columns: clamp(208px, 22vw, 272px); gap: clamp(12px, 1.4vw, 18px); overflow-x: auto; scroll-snap-type: x proximity; scrollbar-width: none; padding-bottom: 4px; }
.vintc__rail::-webkit-scrollbar { display: none; }
.vintc__card { position: relative; aspect-ratio: 3 / 4; overflow: hidden; scroll-snap-align: start; display: flex; flex-direction: column; justify-content: flex-end; padding: clamp(20px, 1.9vw, 28px); color: var(--cco-vellum); }
.vintc__media { position: absolute; inset: 0; z-index: 0; }
.vintc__media img { width: 100%; height: 100%; object-fit: cover; transition: transform 1300ms cubic-bezier(0.16,1,0.3,1); }
.vintc__card:hover .vintc__media img { transform: scale(1.05); }
.vintc__scrim { position: absolute; inset: 0; z-index: 1; background: linear-gradient(to top, color-mix(in srgb, var(--cco-slate-darker) 94%, transparent), color-mix(in srgb, var(--cco-slate-darker) 34%, transparent) 56%, color-mix(in srgb, var(--cco-slate) 14%, transparent)); }
.vintc__phase { display: none; }
/* phase timeline that tracks the scrolling collage */
.vtl-wrap { overflow: hidden; margin-bottom: clamp(18px, 2.4vw, 32px); }
.vtl-track { display: flex; align-items: center; will-change: transform; }
.vtl-seg { flex: 1 0 33.333%; display: flex; align-items: center; gap: 12px; min-width: 0; }
.vtl-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--cco-bronze-light); flex: none; }
.vtl-line { flex: 1; height: 1px; background: color-mix(in srgb, var(--cco-bronze-light) 34%, transparent); }
.vtl-name { flex: none; font-family: var(--cco-font-smallcaps); text-transform: uppercase; letter-spacing: 0.3em; font-size: 0.66rem; color: var(--cco-vellum); white-space: nowrap; }
@media (max-width: 600px) { .vtl-name { letter-spacing: 0.2em; font-size: 0.58rem; } }
.vintc__num { position: absolute; top: clamp(16px, 1.7vw, 24px); left: clamp(20px, 1.9vw, 28px); z-index: 2; font-family: var(--cco-font-display); font-weight: 400; font-feature-settings: "lnum" 1, "tnum" 1; font-variant-numeric: lining-nums tabular-nums; font-size: 0.92rem; letter-spacing: 0.08em; color: color-mix(in srgb, var(--cco-vellum) 72%, transparent); }
.vintc__name { position: relative; z-index: 2; font-family: var(--cco-font-body); font-weight: 500; font-size: clamp(1.12rem, 1.5vw, 1.38rem); line-height: 1.18; letter-spacing: 0.005em; color: var(--cco-vellum); }
@media (max-width: 600px) { .vintc__rail { grid-auto-columns: 62%; } }

/* ---------- grand footer: the site closes like a document ---------- */
.foot { display: block; padding: clamp(72px, 9vw, 124px) clamp(28px, 7vw, 128px) clamp(26px, 3vw, 40px); border-top: 1px solid color-mix(in srgb, var(--cco-bronze-light) 18%, transparent); }
.foot__grid { max-width: 1280px; margin: 0 auto; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(40px, 5vw, 96px); align-items: center; padding-bottom: clamp(44px, 5vw, 76px); }
.foot__brand { display: grid; gap: clamp(18px, 2.2vw, 26px); justify-items: start; align-content: start; }
.foot__mark { width: clamp(238px, 24vw, 330px); height: auto; }
/* directory: multicol (not grid) so a wrapping item never drags its neighbours
   out of rhythm; right-aligned to mirror the mark on the left edge */
.foot__dir { justify-self: end; width: min(100%, 460px); columns: 2; column-gap: clamp(32px, 4vw, 72px); }
.foot__dir a { break-inside: avoid; display: flex; align-items: baseline; gap: 14px; padding: 0 0 clamp(13px, 1.5vw, 17px); }
.foot__dir .n { font-family: var(--cco-font-editorial); font-size: 0.8rem; color: var(--cco-bronze-light); width: 24px; flex: none; }
.foot__dir .t { font-family: var(--cco-font-smallcaps); text-transform: uppercase; letter-spacing: 0.24em; font-size: 0.66rem; font-weight: 500; color: color-mix(in srgb, var(--cco-vellum) 72%, transparent); transition: color 340ms ease; }
.foot__dir a:hover .t { color: var(--cco-vellum); }
.foot__dir a.is-current .t { color: var(--cco-bronze-light); }
.foot__base { max-width: 1280px; margin: 0 auto; display: flex; align-items: center; justify-content: space-between; gap: 20px; padding-top: clamp(20px, 2.4vw, 28px); border-top: 1px solid color-mix(in srgb, var(--cco-vellum) 12%, transparent); }
.foot__seal { width: clamp(38px, 4vw, 48px); height: auto; opacity: 0.55; flex: none; }
@media (max-width: 920px) {
  .foot__grid { grid-template-columns: 1fr; gap: clamp(36px, 7vw, 52px); }
  .foot__dir { justify-self: start; width: 100%; }
  .foot__base { align-items: flex-start; }
}
@media (max-width: 480px) {
  .foot__dir { columns: 1; }
}

/* ---------- skip link (visible only on keyboard focus) ---------- */
.skiplink { position: fixed; top: 14px; left: 14px; z-index: 400; transform: translateY(-260%); padding: 14px 24px; background: var(--cco-slate); color: var(--cco-vellum); font-family: var(--cco-font-smallcaps); text-transform: uppercase; letter-spacing: 0.26em; font-size: 0.66rem; transition: transform 300ms cubic-bezier(0.16,1,0.3,1); }
.skiplink:focus-visible { transform: none; }

/* ---------- print: clean document, no chrome, everything revealed ---------- */
@media print {
  .nav, .progress, .navmenu, .navmenu-scrim, .pageveil, .intro-veil, .hero__cue,
  .skiplink, .fthesis, .modal { display: none !important; }
  .r, .r-head, .r-media, .r-rule, .r-spine, .statbig, .statbig__fig, .sl-split .w,
  .page-enter, .vint__line, .vstep, .sec-index .ln { opacity: 1 !important; transform: none !important; transition: none !important; animation: none !important; }
  .hero { height: auto; min-height: 0; padding-top: 220px; }
  .legal__expand { display: block !important; }
}

/* ---------- scroll progress hairline ---------- */
.progress { position: fixed; top: 0; left: 0; height: 2px; width: 0%; z-index: 70;
  background: linear-gradient(90deg, var(--cco-bronze-deep), var(--cco-bronze-light)); transition: width 120ms linear; }

/* ---------- page transition veil ---------- */
.pageveil { position: fixed; inset: 0; z-index: 300; background: var(--cco-slate); pointer-events: none;
  opacity: 0; transition: opacity 520ms cubic-bezier(0.16,1,0.3,1); display: grid; place-items: center; }
.pageveil.is-on { opacity: 1; pointer-events: all; }
.pageveil__seal { width: 84px; height: auto; opacity: 0; transform: scale(0.94); transition: opacity 520ms ease, transform 640ms cubic-bezier(0.16,1,0.3,1); }
.pageveil.is-on .pageveil__seal { opacity: 0.92; transform: none; }
@media (prefers-reduced-motion: reduce) { .pageveil { transition: none; } }

/* page content fades up on load */
.page-enter { opacity: 0; transform: translateY(14px); }
.page-enter.is-ready { opacity: 1; transform: none; transition: opacity 720ms cubic-bezier(0.16,1,0.3,1), transform 720ms cubic-bezier(0.16,1,0.3,1); }

/* ---------- interior page header ---------- */
.phead { position: relative; overflow: hidden; background: var(--cco-slate); color: var(--cco-vellum);
  padding: clamp(160px, 22vh, 260px) clamp(28px, 7vw, 128px) clamp(72px, 10vh, 120px); }
.phead--media .phead__media { position: absolute; inset: 0; z-index: 0; }
.phead--media .phead__media img { width: 100%; height: 116%; object-fit: cover; }
.phead__inner { position: relative; z-index: 3; max-width: 1280px; margin: 0 auto; }
.phead__index { display: flex; align-items: center; gap: 16px; margin-bottom: clamp(28px, 4vw, 44px); }
.phead__index .lbl { display: none; }
.phead__index .k { font-family: var(--cco-font-body); font-weight: 500; font-size: 0.92rem; color: var(--cco-bronze-light); font-feature-settings: "lnum" 1, "tnum" 1; }
.phead__index .lbl { font-family: var(--cco-font-smallcaps); text-transform: uppercase; letter-spacing: 0.34em; font-size: 0.66rem; color: color-mix(in srgb, var(--cco-vellum) 76%, transparent); }
.phead__index .ln { flex: 1; height: 1px; background: color-mix(in srgb, var(--cco-bronze-light) 30%, transparent); transform: scaleX(0); transform-origin: left; animation: pheadLn 1100ms cubic-bezier(0.16,1,0.3,1) 260ms forwards; }
@keyframes pheadLn { to { transform: scaleX(1); } }
.phead__title { font-family: var(--cco-font-editorial); font-weight: 400; font-size: clamp(2.8rem, 6.4vw, 6rem); line-height: 1.04; letter-spacing: -0.015em; color: var(--cco-vellum); margin: 0 0 clamp(24px, 3vw, 38px); max-width: 16ch; }
.phead__title em { color: var(--cco-bronze-light); font-style: italic; }
.phead__lede { font-family: var(--cco-font-body); font-size: clamp(1.34rem, 1.7vw, 1.74rem); line-height: 1.5; color: color-mix(in srgb, var(--cco-vellum) 90%, transparent); max-width: 52ch; }
/* editorial subheader under a page title (e.g. Alternatives / "Beyond Real Estate") */
.phead__sub { margin: clamp(-12px, -1vw, -6px) 0 0; font-family: var(--cco-font-body); font-size: clamp(1.3rem, 2vw, 1.9rem); line-height: 1.3; }
.phead__sub em { font-style: italic; color: var(--cco-bronze-light); }

/* ---------- elegant index / directory lists (home) ---------- */
.dir { border-top: 1px solid var(--cco-vellum-deep); }
.dir__row { display: grid; grid-template-columns: 64px 1fr auto; align-items: center; gap: clamp(18px, 3vw, 48px);
  padding: clamp(26px, 3vw, 40px) 0; border-bottom: 1px solid var(--cco-vellum-deep);
  text-decoration: none; color: inherit; transition: padding-left 560ms cubic-bezier(0.16,1,0.3,1); position: relative; }
.dir__row::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 2px; background: var(--cco-bronze-deep); transform: scaleY(0); transform-origin: center; transition: transform 480ms cubic-bezier(0.16,1,0.3,1); }
.dir__row:hover { padding-left: 20px; }
.dir__row:hover::before { transform: scaleY(1); }
.dir__n { font-family: var(--cco-font-body); font-weight: 500; font-size: 1.06rem; color: var(--cco-bronze-deep); font-feature-settings: "lnum" 1, "tnum" 1; font-variant-numeric: lining-nums tabular-nums; }
.dir__t { font-family: var(--cco-font-body); font-weight: 500; font-size: clamp(1.4rem, 2.2vw, 2.1rem); color: var(--cco-slate); line-height: 1.16; letter-spacing: 0.005em; }
.dir__t small { display: block; font-family: var(--cco-font-body); font-weight: 400; font-style: italic; font-size: 0.92rem; letter-spacing: 0; color: color-mix(in srgb, var(--cco-slate) 56%, var(--cco-vellum)); margin-top: 7px; }
.dir__arrow { width: 28px; height: 1px; background: color-mix(in srgb, var(--cco-bronze-deep) 55%, transparent); position: relative; transition: width 480ms cubic-bezier(0.16,1,0.3,1), background 360ms ease; }
.dir__row:hover .dir__arrow { width: 56px; background: var(--cco-bronze-deep); }
@media (max-width: 680px) { .dir__row { grid-template-columns: 40px 1fr; } .dir__arrow { display: none; } }

/* ---------- Track Record as a quiet institutional plate (site-wide variant):
   slate ground, bronze rules, the figures are the image ---------- */
.statband--plain { background: var(--cco-slate-darker);
  border-top: 1px solid color-mix(in srgb, var(--cco-bronze-light) 30%, transparent);
  border-bottom: 1px solid color-mix(in srgb, var(--cco-bronze-light) 30%, transparent);
  padding-top: clamp(60px, 7.5vw, 100px); padding-bottom: clamp(60px, 7.5vw, 100px); }
.statband--plain::before { content: ""; position: absolute; inset: 0; background: radial-gradient(110% 80% at 22% 0%, color-mix(in srgb, var(--cco-bronze-pale) 7%, transparent), transparent 58%); pointer-events: none; }
.statband--plain .statband__media { display: none; }
.statband--plain .statband__head { margin-bottom: clamp(40px, 5vw, 64px); }

/* ---------- teaser / CTA bands ---------- */
.teaser { display: grid; grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr); gap: clamp(36px, 6vw, 112px); align-items: center; }
.teaser__eyebrow { margin-bottom: clamp(20px, 2.4vw, 30px); }
.teaser__title { font-family: var(--cco-font-editorial); font-weight: 400; font-size: clamp(1.9rem, 3.2vw, 3rem); line-height: 1.18; letter-spacing: -0.008em; margin: 0 0 clamp(22px, 2.6vw, 32px); }
.teaser__title em { font-style: italic; }
.teaser__body { font-size: 1.16rem; line-height: 1.62; }
@media (max-width: 860px) { .teaser { grid-template-columns: 1fr; gap: 28px; } }

/* text link with animated underline + arrow */
.tlink { display: inline-flex; align-items: center; gap: 12px; margin-top: clamp(26px, 3vw, 38px);
  font-family: var(--cco-font-smallcaps); text-transform: uppercase; letter-spacing: 0.26em; font-size: 0.72rem;
  color: var(--cco-slate); }
.tlink.on-dark { color: var(--cco-vellum); }
.tlink i { width: 32px; height: 1px; background: var(--cco-bronze-deep); display: block; transition: width 460ms cubic-bezier(0.16,1,0.3,1); }
.tlink.on-dark i { background: var(--cco-bronze-light); }
.tlink:hover i { width: 56px; }

/* nav active page: gold underline, text keeps its normal color (legible on any ground) */
.navmenu a.is-current .navmenu__t { color: var(--cco-bronze-deep); }
.nav__links a.is-current::after { right: 0; }

/* ============================================================
   CINEMATIC MEDIA LAYER — slow Ken-Burns motion (reads as a
   timelapse / slow pan placeholder), media page headers, and
   full-bleed interstitial bands. Real video/photo drops in later.
   ============================================================ */
@keyframes kb { from { transform: scale(1.04); } to { transform: scale(1.16) translate(-1.6%, -1.2%); } }
@keyframes kb-rev { from { transform: scale(1.16) translate(1.4%, -1%); } to { transform: scale(1.04); } }
.hero__media img, .statband__media img, .thesis__media img,
.phead__media img, .mediaband .duo img, .split__media img {
  animation: kb 28s ease-in-out infinite alternate; will-change: transform;
}
.mediaband.alt .duo img, .thesis__media img { animation-name: kb-rev; }
@media (prefers-reduced-motion: reduce) {
  .hero__media img, .statband__media img, .thesis__media img,
  .phead__media img, .mediaband .duo img, .split__media img { animation: none; }
}

/* media page header */
.phead--media { padding-top: clamp(184px, 26vh, 300px); }
.phead--media .phead__media { position: absolute; inset: 0; z-index: 0; overflow: hidden; }
.phead--media .phead__media img { width: 100%; height: 116%; object-fit: cover; }
.phead--media .phead__inner { z-index: 3; }
.phead--media .phead__lede { color: color-mix(in srgb, var(--cco-vellum) 92%, transparent); }

/* full-bleed interstitial media band */
.mediaband { position: relative; height: clamp(360px, 52vh, 620px); overflow: hidden; background: var(--cco-slate-darker); }
.mediaband .duo { position: absolute; inset: 0; }
.mediaband .duo img { width: 100%; height: 100%; object-fit: cover; }
.mediaband .duo__scrim { position: absolute; inset: 0; z-index: 2; }
.mediaband__mark { position: absolute; z-index: 3; left: 50%; top: 50%; transform: translate(-50%,-50%); width: clamp(58px, 6vw, 84px); height: auto; opacity: 0.5; }
.mediaband__tag { position: absolute; z-index: 3; left: clamp(24px, 5vw, 64px); bottom: clamp(22px, 3vw, 38px); font-family: var(--cco-font-smallcaps); text-transform: uppercase; letter-spacing: 0.34em; font-size: 0.58rem; color: color-mix(in srgb, var(--cco-bronze-light) 88%, transparent); }

/* ---------- Florida thesis reading overlay (Home inline expander) ---------- */
.thesis__toggle { font-family: inherit; background: none; border: 0; cursor: pointer; padding: 0; }

.fthesis { position: fixed; inset: 0; z-index: 120; display: grid; place-items: center;
  padding: clamp(56px, 8vh, 96px) clamp(16px, 5vw, 72px); overflow: hidden;
  opacity: 0; visibility: hidden; pointer-events: none; transition: opacity 0.5s ease, visibility 0s linear 0.5s; }
.fthesis.is-open { opacity: 1; visibility: visible; pointer-events: auto; transition: opacity 0.5s ease; }

/* full-bleed Florida scene — bleeds around all four sides of the reading sheet */
.fthesis__bg { position: absolute; inset: 0; z-index: 0; }
.fthesis__bg img { width: 100%; height: 100%; object-fit: cover; transform: scale(1.04); }
.fthesis__bg.duo > img { filter: saturate(0.72) contrast(1.04) brightness(0.84); }
.fthesis__bg.duo::after { background: var(--cco-slate-deep); mix-blend-mode: soft-light; opacity: 0.42; }
.fthesis__bg.duo::before { opacity: 0.08; }
/* home overlay runs SLATE duotone (home page carries no colour elsewhere, so a
   colour burst on open would jar); firm overlay keeps the muted-colour grade above */
.fthesis--slate .fthesis__bg.duo > img { filter: grayscale(1) contrast(1.06) brightness(1.02); }
.fthesis--slate .fthesis__bg.duo::after { background: var(--cco-slate); mix-blend-mode: color; opacity: 0.92; }
.fthesis--slate .fthesis__bg.duo::before { opacity: 0.16; }
.fthesis__veil { position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background: radial-gradient(130% 105% at 50% 42%, color-mix(in srgb, var(--cco-slate-darker) 26%, transparent), color-mix(in srgb, var(--cco-slate-darker) 76%, transparent) 100%); }
/* click anywhere outside the sheet to close */
.fthesis__scrim { position: absolute; inset: 0; z-index: 1; cursor: pointer; }

/* the reading sheet: ONE clean centered box, oaks visible all around */
.fthesis__panel { position: relative; z-index: 2; width: min(600px, 100%); max-height: min(82vh, 860px);
  display: flex; flex-direction: column; overflow: hidden;
  background: color-mix(in srgb, var(--cco-slate-darker) 94%, transparent);
  -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
  border: 1px solid color-mix(in srgb, var(--cco-bronze) 30%, transparent);
  box-shadow: 0 60px 130px -40px rgba(0,0,0,0.78);
  transform: translateY(22px) scale(0.985); opacity: 0; transition: transform 0.6s cubic-bezier(0.16,1,0.3,1) 0.06s, opacity 0.5s ease 0.06s; }
.fthesis.is-open .fthesis__panel { transform: translateY(0) scale(1); opacity: 1; }
.fthesis__panel::before { content: ""; position: absolute; top: 0; left: 0; right: 0; height: 3px; z-index: 3;
  background: linear-gradient(to right, var(--cco-bronze-deep), var(--cco-bronze-light)); }

/* head: centered title, divider below */
.fthesis__head { flex: none; text-align: center; padding: clamp(30px, 3.6vw, 46px) clamp(30px, 5vw, 60px) clamp(20px, 2.4vw, 26px);
  border-bottom: 1px solid color-mix(in srgb, var(--cco-bronze) 20%, transparent); }
.fthesis__eyebrow { font-family: var(--cco-font-smallcaps); text-transform: uppercase; letter-spacing: 0.42em;
  font-size: 0.62rem; color: var(--cco-bronze-light); margin: 0 0 clamp(16px, 2vw, 22px); }
.fthesis__title { font-family: var(--cco-font-editorial); font-weight: 400; font-size: clamp(1.7rem, 3.1vw, 2.5rem);
  line-height: 1.18; letter-spacing: -0.01em; color: var(--cco-vellum); margin: 0 auto; max-width: 24ch; }
.fthesis__title em { font-family: var(--cco-font-body); font-style: italic; color: var(--cco-bronze-light); }

/* body: left-aligned for reading, scrolls within the sheet */
.fthesis__body { flex: 1 1 auto; overflow-y: auto; overscroll-behavior: contain; -webkit-overflow-scrolling: touch;
  padding: clamp(26px, 3.2vw, 40px) clamp(30px, 5vw, 60px) clamp(36px, 4.4vw, 56px);
  scrollbar-width: thin; scrollbar-color: color-mix(in srgb, var(--cco-bronze) 50%, transparent) transparent; }
.fthesis__body p { font-family: var(--cco-font-body); font-size: 1.12rem; line-height: 1.66;
  color: color-mix(in srgb, var(--cco-vellum) 86%, transparent); margin: 0 0 1.15em; text-wrap: pretty; }
.fthesis__body p:last-child { margin-bottom: 0; }
.fthesis__body p:first-child::first-letter { font-family: var(--cco-font-editorial); float: left; font-size: 3.4em;
  line-height: 0.82; padding: 0.06em 0.12em 0 0; color: var(--cco-bronze-light); }
.fthesis__body::-webkit-scrollbar { width: 8px; }
.fthesis__body::-webkit-scrollbar-thumb { background: color-mix(in srgb, var(--cco-bronze) 44%, transparent); border-radius: 8px; border: 2px solid transparent; background-clip: padding-box; }

/* close: top-right of the VIEWPORT, above the sheet — never covered */
.fthesis__close { position: absolute; top: clamp(18px, 3vh, 34px); right: clamp(18px, 3vw, 40px); z-index: 4;
  width: 46px; height: 46px; display: grid; place-items: center; cursor: pointer;
  background: color-mix(in srgb, var(--cco-slate-darker) 68%, transparent); border: 1px solid color-mix(in srgb, var(--cco-bronze) 34%, transparent);
  border-radius: 50%; color: var(--cco-vellum);
  -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px);
  transition: background 0.25s ease, border-color 0.25s ease, transform 0.25s ease; }
.fthesis__close:hover { background: var(--cco-bronze-deep); border-color: var(--cco-bronze); transform: rotate(90deg); }
.fthesis__close svg { width: 16px; height: 16px; display: block; }

@media (prefers-reduced-motion: reduce) {
  .fthesis, .fthesis__panel { transition: opacity 0.2s ease; }
  .fthesis__panel { transform: none; }
  .fthesis__close:hover { transform: none; }
}