/* Content Systems uses the shared measured band; the rail lives outside it. */
.content-portfolio { --cs-nav-offset: 6rem; }
.content-portfolio :is(section[id], article[id]) { scroll-margin-top: var(--cs-nav-offset); }
.cs-navigator {
  position: sticky;
  top: 0;
  z-index: 30;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  padding: .5rem var(--page-gutter);
  gap: .25rem;
  background: var(--paper);
  color: var(--ink);
  border-bottom: 1px solid var(--line-light);
  font-family: var(--font-mono);
  font-size: .75rem;
}
.cs-navigator a {
  display: flex;
  align-items: center;
  min-height: 44px;
  padding: .5rem .75rem;
  text-decoration: none;
  border-left: 2px solid transparent;
  transition: background-color 160ms var(--ease-out), color 160ms var(--ease-out), border-color 160ms var(--ease-out);
}
.cs-navigator a:hover { text-decoration: underline; text-underline-offset: .3em; }
.cs-navigator a[aria-current="location"] { background: var(--ink); color: var(--paper); border-color: currentColor; }
.cs-entry-links, .cs-project-index { display: flex; flex-wrap: wrap; gap: 1rem 2rem; margin-block: 2rem; }
.cs-entry-links a, .cs-project-index a { font-family: var(--font-mono); font-size: .8rem; }
.cs-entry-links { gap: .75rem; }
.cs-entry-links a { display: inline-flex; align-items: center; justify-content: space-between; gap: 2rem; min-height: 3rem; padding: .8rem 1rem; border: 1px solid rgb(255 255 255 / .35); color: var(--white); text-decoration: none; }
.cs-entry-links a::after { content: '↘'; font-size: 1rem; }
.cs-entry-links a:hover, .cs-entry-links a:focus-visible { background: var(--paper); border-color: var(--paper); color: var(--ink); }
.cs-proof { display: grid; grid-template-columns: 1fr 1fr; gap: 2rem; max-width: 52rem; margin-top: 3rem; border-top: 1px solid var(--line-dark); padding-top: 1rem; }
.cs-proof p { max-width: 35ch; color: var(--muted-on-dark); }
.cs-proof strong { display: block; font-size: 2.5rem; font-weight: 400; color: var(--white); font-variant-numeric: tabular-nums; }
.cs-section-heading { display: grid; grid-template-columns: 1fr 4fr; gap: 2rem; margin-bottom: 3rem; }
.cs-section-heading .section-index { line-height: 1.6; margin: .5rem 0; }
.cs-section-heading .section-title { max-width: 20ch; }
.cs-section .lede { max-width: 58ch; }
.cs-video-grid { display: grid; grid-template-columns: 3fr 2fr; gap: 3rem; }
.cs-piece { min-width: 0; padding-block: 2rem; border-top: 1px solid var(--line-light); }
.cs-section.section-dark .cs-piece { border-color: var(--line-dark); }
.cs-piece h3, .cs-approach-grid h3 { font-size: clamp(1.5rem, 2.5vw, 2.3rem); font-weight: 400; letter-spacing: -.035em; line-height: 1.15; margin: 0 0 1rem; }
.cs-piece p { max-width: 58ch; }
.cs-piece .eyebrow { font-size: .7rem; }
.cs-credit, .cs-note { font-size: .85rem; color: var(--muted-on-light); }
.section-dark .cs-credit { color: var(--muted-on-dark); }
.cs-note { max-width: 72ch; margin-bottom: 2rem; }
.cs-writing-list { max-width: 54rem; margin-left: auto; }
.cs-graphics-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem 3rem; }
.cs-graphics-grid .cs-piece:first-child { grid-column: 1 / -1; }
.cs-approach-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 2rem; margin-block: 3rem; }
.cs-section details { max-width: 68ch; margin-top: 2rem; border-top: 1px solid currentColor; padding-block: 1rem; }
.cs-section summary { cursor: pointer; font-family: var(--font-mono); font-size: .8rem; padding-block: .5rem; }
.cs-section details::details-content {
  interpolate-size: allow-keywords;
  overflow: clip;
  transition: height 260ms var(--ease-out), opacity 200ms var(--ease-out);
}
@starting-style {
  .cs-section details[open]::details-content { height: 0; opacity: 0; }
}
@media (prefers-reduced-motion: reduce) {
  .cs-section details::details-content { transition: none; }
}
.cs-section details p { margin-bottom: 0; }
.cs-section + .section-light { border-top: 1px solid var(--line-light); }
/* Switch only when measured clearance can contain the entire rail. */
.content-portfolio[data-cs-rail] .cs-navigator {
  position: fixed;
  top: 50%;
  right: 1rem;
  transform: translateY(-50%);
  width: 154px;
  display: grid;
  padding: .5rem;
  border: 1px solid var(--line-light);
}
@media (max-width: 700px) {
  .cs-section-heading, .cs-video-grid, .cs-graphics-grid, .cs-approach-grid { grid-template-columns: 1fr; gap: 1.5rem; }
  .cs-section-heading { margin-bottom: 2rem; }
  .cs-proof { gap: 1rem; }
  .cs-proof strong { font-size: 2rem; }
  .cs-navigator { padding-inline: .5rem; gap: 0; }
  .cs-navigator a { padding-inline: .6rem; }
  .cs-piece { padding-block: 1.5rem; }
  .content-portfolio .hero .eyebrow { margin-top: 0; }
}

/* Visible editorial grid, using the landing's shared icon cells and hover rules. */
.cs-section .grid-block { background: var(--paper); color: var(--ink); }
.cs-section.section-dark .grid-block { background: var(--ink); color: var(--white); }
.cs-section .grid-index { line-height: 1.5; margin: 0; }
.cs-section .grid-intro .section-title { max-width: 23ch; }
.cs-content-block { padding: clamp(1.25rem, 3vw, 3rem); margin: 0; border: 0; }
.cs-section .cs-content-block { max-width: none; }
.cs-section .grid-block > :first-child { margin-top: 0; }
.cs-section .grid-block > :last-child { margin-bottom: 0; }
.cs-project-index.cs-content-block { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .75rem; }
.cs-project-index a { display: flex; align-items: baseline; gap: .8rem; min-height: 4.25rem; padding: 1rem; border: 1px solid var(--line-light); color: var(--ink); text-decoration: none; }
.cs-project-index a::after { content: '↘'; margin-left: auto; font-size: 1rem; }
.cs-project-index a:hover, .cs-project-index a:focus-visible { background: var(--ink); border-color: var(--ink); color: var(--paper); }
.cs-project-number { font-size: .65rem; opacity: .65; }
.cs-video-showcase { display: grid; grid-template-columns: minmax(0, 3fr) minmax(14rem, 1fr); gap: 1.5rem 2rem; }
.cs-player-wrap { min-width: 0; transition: opacity 140ms var(--ease-out); }
.cs-player-wrap.cs-video-swapping { opacity: 0; }
@media (prefers-reduced-motion: reduce) {
  .cs-player-wrap { transition: none; }
}
.cs-player-wrap video { width: 100%; height: auto; aspect-ratio: 16 / 9; object-fit: contain; background: #07111b; }
.cs-video-logo { display: block; width: min(12rem, 45%); height: auto; margin-top: 1.25rem; }
.cs-video-logo[src$="avalon-logo-white.svg"] { width: min(8.4rem, 31.5%); }
.cs-video-picker { display: flex; flex-direction: column; gap: .5rem; }
.cs-video-picker button { text-align: left; border: 1px solid var(--line-dark); background: transparent; color: inherit; padding: .75rem; font: inherit; cursor: pointer; transition: transform 160ms var(--ease-out); }
.cs-video-picker button:active { transform: scale(0.97); }
@media (prefers-reduced-motion: reduce) {
  .cs-video-picker button { transition: none; }
}
.cs-video-picker button[id] { scroll-margin-top: var(--cs-nav-offset); }
.cs-video-picker button[aria-pressed="true"] { background: var(--paper); color: var(--ink); }
.cs-video-context, .cs-video-showcase > noscript { grid-column: 1 / -1; }
.cs-video-noscript { display: flex; flex-wrap: wrap; gap: .75rem 1.25rem; font: .75rem var(--font-mono); }
.cs-gallery { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.5rem; margin: 2rem 0; align-items: start; }
.cs-gallery--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.cs-graphic-subheading { font: .85rem/1.4 var(--font-mono); margin: 2rem 0 0; }
.cs-graphic-subheading + .cs-gallery { margin-top: 1rem; }
.cs-art { margin: 0; min-width: 0; }
.cs-art-link { display: flex; align-items: center; justify-content: center; padding: 0; background: transparent; border: 0; }
.cs-art-link:hover { outline: 2px solid var(--ink); outline-offset: 3px; }
.cs-art img { width: 100%; height: auto; max-height: 38rem; object-fit: contain; transition: transform 200ms var(--ease-out); }
@media (hover: hover) and (pointer: fine) {
  .cs-art-link:hover img { transform: scale(1.025); }
}
@media (prefers-reduced-motion: reduce) {
  .cs-art img { transition: none; }
}
.cs-art figcaption { font: .7rem/1.5 var(--font-mono); margin-top: .75rem; }
.cs-event-series { display: grid; gap: 3rem; margin-block: 2rem; }
.cs-event-pair { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 1.5rem; align-items: center; }
.cs-excerpt { border-left: 2px solid var(--ink); padding-left: 1.5rem; margin: 2rem 0; max-width: 55ch; font-size: clamp(1.15rem, 2vw, 1.5rem); }
.cs-prose { max-width: 65ch; font-size: 1.05rem; line-height: 1.8; }
.cs-prose h4 { font-size: 1.3rem; margin-bottom: .5rem; }
.cs-prose h4 + p { margin-top: 0; }
.cs-lightbox { width: min(96vw, 1400px); max-width: 96vw; max-height: 94dvh; padding: 1rem; background: var(--paper); color: var(--ink); border: 1px solid var(--ink); opacity: 1; transform: scale(1); transition: opacity 220ms var(--ease-out), transform 220ms var(--ease-out), overlay 220ms allow-discrete, display 220ms allow-discrete; }
.cs-lightbox::backdrop { background: rgb(4 13 23 / .88); opacity: 1; transition: opacity 220ms var(--ease-out), overlay 220ms allow-discrete, display 220ms allow-discrete; }
@starting-style {
  .cs-lightbox[open] { opacity: 0; transform: scale(0.96); }
  .cs-lightbox[open]::backdrop { opacity: 0; }
}
@media (prefers-reduced-motion: reduce) {
  .cs-lightbox, .cs-lightbox::backdrop { transition: opacity 120ms ease-out; }
}
@starting-style {
  @media (prefers-reduced-motion: reduce) {
    .cs-lightbox[open] { transform: none; }
  }
}
.cs-lightbox-bar, .cs-lightbox-controls { display: flex; align-items: center; justify-content: space-between; gap: 1rem; }
.cs-lightbox h2 { font-size: 1rem; margin: 0; }
.cs-lightbox button { font: .8rem var(--font-mono); min-height: 44px; padding: .65rem; background: var(--paper); color: var(--ink); border: 1px solid var(--line-light); cursor: pointer; }
.cs-lightbox > img { height: 70dvh; width: 100%; object-fit: contain; background: transparent; margin-block: 1rem; }
.cs-lightbox-controls { font: .75rem var(--font-mono); }
body:has(.cs-lightbox[open]) { overflow: hidden; }
.content-portfolio [hidden] { display: none !important; }
/* Without JS keep the content in a normal readable stack; anchor/image links work. */
.cs-section .grid-canvas:not([style]) { display: block; width: auto; margin-inline: var(--page-gutter); }
@media (max-width: 900px) {
  .cs-video-showcase { grid-template-columns: 1fr; }
  .cs-video-picker { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 700px) {
  .cs-gallery, .cs-gallery--3 { grid-template-columns: 1fr; }
  .cs-video-picker { grid-template-columns: 1fr; }
  .cs-project-index.cs-content-block { grid-template-columns: 1fr; }
  .cs-event-pair { grid-template-columns: 1fr; }
  .cs-art img { max-height: 32rem; }
  .cs-gallery { gap: 2rem; }
  .cs-lightbox > img { height: 62dvh; }
}
@media (prefers-reduced-motion: reduce) {
  .cs-section .grid-icon { transition: none; }
}

/* Section labels invert the field, as on the landing's Featured Work index. */
.cs-section.section-light .grid-index { background: var(--ink); color: var(--paper); }
.cs-section.section-dark .grid-index { background: var(--paper); color: var(--ink); }
/* On navy, brighten the symbol instead of revealing a pale tile. */
.cs-section.section-dark .grid-icon {
  background: transparent;
  box-shadow: inset -1px -1px 0 rgb(255 255 255 / .12);
  opacity: .12;
}
.cs-section.section-dark .grid-icon img { filter: brightness(0) invert(1); }
@media (hover: hover) and (pointer: fine) {
  .cs-section.section-dark .grid-icon:hover { opacity: .55; }
}
.cs-event-pair { align-items: start; }

/* Small lockup, enlarged mark, then an application on the mark's top line. */
.cs-logo-gallery {
  position: relative;
  container-type: inline-size;
  grid-template-columns: 20% 35% 35%;
  column-gap: 5%;
}
.cs-logo-gallery > .cs-art:nth-of-type(n+2) { margin-top: 8cqw; }
.cs-logo-gallery > .cs-art:nth-of-type(-n+2) .cs-art-link {
  aspect-ratio: 1;
  border: 1px solid var(--line-light);
}
.cs-logo-gallery > .cs-art:nth-of-type(-n+2) img {
  width: 100%; height: 100%; max-height: none; object-fit: contain;
}
.cs-logo-gallery > .cs-art:first-of-type figcaption { margin-top: calc(23cqw + .75rem); }
.cs-logo-connectors {
  position: absolute; top: 0; left: 0; width: 100%; height: auto;
  pointer-events: none; overflow: visible; color: var(--line-light);
}
@media (max-width: 700px) {
  .cs-logo-gallery { grid-template-columns: 1fr; }
  .cs-logo-gallery > .cs-art:nth-of-type(n+2) { margin-top: 0; }
  .cs-logo-gallery > .cs-art:first-of-type { width: 55%; }
  .cs-logo-gallery > .cs-art:first-of-type figcaption { margin-top: .75rem; }
  .cs-logo-connectors { display: none; }
}
.cs-event-pair { grid-template-columns: minmax(0, 1fr) minmax(0, .72fr); gap: clamp(1.5rem, 5vw, 4rem); }
.cs-event-pair > .cs-art:nth-child(2) { width: 100%; max-width: 19rem; }
@media (max-width: 700px) {
  .cs-logo-gallery::before, .cs-logo-gallery::after { display: none; }
  .cs-event-pair { grid-template-columns: 1fr; }
}

.cs-section.section-dark .grid-icon { opacity: .025; }
@media (hover: hover) and (pointer: fine) {
  .cs-section.section-dark .grid-icon:hover { opacity: .32; }
}
.content-portfolio #booking-panel-title { scroll-margin-top: var(--cs-nav-offset); }