/* ============================================================
   DESIGN TOKENS
   Global CSS custom properties — colors, spacing, typography
   ============================================================ */

:root {
  --bg: #F3F1ED;
  --paper: #f8f5ee;
  --cream: #F3F1ED;
  --ink: #1A1814;
  --muted: #4F4A45;
  --line: #b9aea1;
  --rule: #C8D4DA;
  --dark: #111009;
  --water: #1F4F69;
  --indigo: #114B78;
  --wip: #C8A02A;
  --deep: #4A7A5A;
  --block: #d8d0c5;
  --block-dark: #c2b7aa;
  --sepia-dark: #5f4a31;
  --sepia-soft: #e7dcc7;
  --sepia-ledger: #ece3d1;
  --gold-rule: #b88b46;
  --max-width: 1440px;
  --gutter: 24px;
  --section-space: clamp(4rem, 8vw, 8rem);
  --soft-shadow: 0 0 0 1px rgba(24, 21, 18, 0.08);
  --font-serif: 'Fraunces', serif;
  --font-sans: 'Inter', sans-serif;
  --font-mono: ui-monospace, 'SF Mono', monospace;
  --text-xs: 0.8rem;
  --text-sm: 0.875rem;
  --text-base: 1rem;
  --text-md: 1.05rem;
  --text-lg: 1.15rem;
  --text-xl: 1.2rem;
  --text-2xl: 1.5rem;
  --text-3xl: 2rem;
  --leading-tight: 1.2;
  --leading-normal: 1.6;
  --leading-relaxed: 1.75;
  --leading-loose: 1.85;
  --tracking-tight: -0.02em;
  --tracking-normal: 0.01em;
  --tracking-wide: 0.08em;
  --tracking-wider: 0.1em;
  --tracking-widest: 0.14em;
  --ink-soft: color-mix(in srgb, var(--ink) 70%, var(--muted) 30%);
}

/* ============================================================
   RESET & BASE
   Box model, scroll behavior, body defaults, links, forms
   ============================================================ */

* {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
}

body {
  margin: 0;
  background:
    linear-gradient(to bottom, rgba(255, 255, 255, 0.4), rgba(255, 255, 255, 0) 18rem),
    var(--bg);
  color: var(--ink);
  font-family: var(--font-sans);
  position: relative;
  overflow-x: clip;
}

body > * {
  position: relative;
  z-index: 1;
}
a {
  color: inherit;
  text-decoration: none;
}

a:focus-visible {
  outline: 3px solid var(--ink);
  outline-offset: 4px;
}

button,
input,
select,
textarea {
  font: inherit;
}

button:focus-visible {
  outline: 3px solid var(--ink);
  outline-offset: 3px;
}

p,
h1,
h2,
h3,
h4,
h5,
h6 {
  margin: 0 0 1.25rem;
}

p {
  font-family: var(--font-sans);
  font-size: var(--text-xl);
  line-height: var(--leading-relaxed);
  color: inherit;
}

ul {
  margin-top: 0;
}

blockquote,
figure {
  margin: 0;
}

img {
  max-width: 100%;
  height: auto;
  border-radius: 8px;
}

h1,
h2,
h3,
h4,
h5,
h6 {
  font-family: var(--font-serif);
  font-style: normal;
  color: inherit;
}

h1 {
  font-weight: 700;
  font-size: 70px;
  line-height: 66.6px;
  letter-spacing: -1.4px;
  margin-bottom: 1.25rem;
}

h2 {
  font-weight: 700;
  font-size: 56px;
  line-height: 61.6px;
  letter-spacing: -1.1px;
  margin-bottom: 1rem;
}

h3 {
  font-weight: 700;
  font-size: 42px;
  line-height: 46.2px;
  letter-spacing: -0.8px;
  margin-bottom: 0.875rem;
}

h4 {
  font-weight: 700;
  font-size: 32px;
  line-height: 38.4px;
  letter-spacing: -0.4px;
  margin-bottom: 0.75rem;
}

h5 {
  font-weight: 600;
  font-size: 24px;
  line-height: 31.2px;
  letter-spacing: -0.2px;
  margin-bottom: 0.625rem;
}

h6 {
  font-weight: 600;
  font-size: 18px;
  line-height: 25.2px;
  letter-spacing: 0;
  margin-bottom: 0.5rem;
}

/* ============================================================
   ACCESSIBILITY UTILITIES
   Screen-reader-only text, skip links, focus states
   ============================================================ */

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.skip-links {
  position: absolute;
  left: 1rem;
  top: 1rem;
  z-index: 30;
  display: grid;
  gap: 0.5rem;
}

.skip-link {
  position: absolute;
  left: 0;
  top: 0;
  padding: 0.8rem 1rem;
  background: var(--ink);
  color: var(--bg);
  transform: translateY(-180%);
  transition: transform 0.2s ease;
}

.skip-link:focus {
  transform: translateY(0);
}

/* ============================================================
   LAYOUT SHELL
   Page wrapper, section grid, full-bleed helper, page label
   ============================================================ */

.page-intro,
.page-shell {
  width: min(calc(100% - 2.5rem), var(--max-width));
  margin-inline: auto;
}

.sweetgrass-section {
  width: min(calc(100% - 2.5rem), var(--max-width));
  margin-inline: auto;
  padding-block: clamp(1.5rem, 3vw, 2.75rem);
}

.full-bleed-section {
  width: 100vw;
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
  box-sizing: border-box;
}

.full-bleed-inner {
  width: min(calc(100% - 2.5rem), var(--max-width));
  margin-inline: auto;
  padding-block: clamp(1.5rem, 3vw, 2.75rem);
}

.sweet-closer {
  width: min(calc(100% - 2.5rem), var(--max-width));
  margin-inline: auto;
  padding-block: clamp(1.5rem, 3vw, 2.75rem);
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--gutter);
  align-items: start;
}

.sweet-closer .reading-rail {
  max-width: none;
}

.sweet-closer .reading-rail p {
  max-width: none;
}

.sweet-closer .context-media {
  grid-column: auto;
  min-height: 0;
}
.sweetgrass-gallery {
  display: grid;
  gap: var(--gutter);
  align-items: start;
  
}
.sweetgrass-gallery p {
  font-size: x-large;
}
.sweetgrass-gallery .concept-note {
  font-size: var(--text-md);
}
.sweetgrass-gallery--regular {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.sweetgrass-gallery--spacious {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.sweetgrass-gallery > * {
  min-width: 0;
}

.sweetgrass-caption-card {
  position: relative;
  margin: 0;
  overflow: hidden;
  border-radius: 8px;
  padding: 4px;
  background: color-mix(in srgb, var(--paper) 94%, #ffffff 6%);
  border: 0.5px solid color-mix(in srgb, var(--ink) 20%, var(--paper) 80%);
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.55) inset;
}

.sweetgrass-caption-card img {
  border-radius: 6px;
}

.sweetgrass-caption-card figcaption {
  position: absolute;
  left: 4px;
  right: 4px;
  bottom: 4px;
  height: 20%;
  min-height: 2.2rem;
  display: flex;
  align-items: center;
  padding: 0.35rem 0.6rem;
  background: color-mix(in srgb, var(--paper) 94%, #ffffff 6%);
  color: color-mix(in srgb, var(--ink) 88%, #000000 12%);
  font-size: 0.68rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  border-radius: 0 0 6px 6px;
}

.sweetgrass-caption-card--reverse {
  background: color-mix(in srgb, var(--ink) 86%, #000000 14%);
  border: 0.5px solid color-mix(in srgb, #ffffff 20%, var(--ink) 80%);
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.1) inset;
}

.sweetgrass-caption-card--reverse figcaption {
  background: color-mix(in srgb, var(--ink) 86%, #000000 14%);
  color: color-mix(in srgb, var(--paper) 90%, #ffffff 10%);
}

.sweetgrass-logo-stack {
  display: grid;
  gap: 0.75rem;
}

.sweetgrass-logo-row {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0.75rem;
}

.sweetgrass-logo-card {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0.75rem;
  border-radius: 8px;
  overflow: hidden;
  background: color-mix(in srgb, var(--paper) 92%, #ffffff 8%);
  height: clamp(16rem, 23vw, 20rem);
}

.sweetgrass-logo-card img {
  width: 100%;
  height: auto;
  max-height: 100%;
  display: block;
  object-fit: contain;
}

.sweetgrass-logo-card--hero {
  height: clamp(21rem, 31vw, 27rem);
}

.sweetgrass-rhythm-note {
  max-width: 64ch;
  margin: 0 0 1rem;
  color: var(--muted);
  line-height: 1.65;
}

.sweetgrass-patio-grid {
  gap: 1rem;
  grid-template-areas:
    ". drink"
    "lady vertical";
}

.sweetgrass-patio-copy {
  margin: 0;
  padding: clamp(1rem, 2vw, 1.35rem);
  border: 0.5px solid color-mix(in srgb, var(--ink) 22%, var(--paper) 78%);
  border-radius: 8px;
  background: color-mix(in srgb, var(--paper) 92%, #ffffff 8%);
  line-height: 1.6;
}

.sweetgrass-patio-drink {
  grid-area: drink;
}

.sweetgrass-patio-lady {
  grid-area: lady;
}

.sweetgrass-patio-vertical {
  grid-area: vertical;
  align-self: stretch;
}

.sweetgrass-patio-vertical img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

@media (max-width: 1024px) {
  .sweetgrass-gallery--spacious {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .sweetgrass-logo-row {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

@media (max-width: 720px) {
  .sweetgrass-gallery--regular,
  .sweetgrass-gallery--spacious {
    grid-template-columns: 1fr;
  }

  .sweet-closer {
    grid-template-columns: 1fr;
  }

  .sweetgrass-patio-grid {
    grid-template-areas:
      "drink"
      "lady"
      "vertical";
  }

  .sweetgrass-logo-row {
    grid-template-columns: 1fr;
  }

  .sweetgrass-logo-card,
  .sweetgrass-logo-card--hero {
    height: auto;
  }

  .sweetgrass-patio-vertical img {
    height: auto;
  }
}

/* ============================================================
   SITE HEADER & NAVIGATION
   Sticky header, brand mark, primary nav, active states
   ============================================================ */

.site-header {
  background: var(--indigo);
  color: var(--paper);
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 1.5rem;
  width: 100vw;
  margin-left: calc(50% - 50vw);
  box-sizing: border-box;
  padding: 0 max(1.25rem, calc((100vw - var(--max-width)) / 2 + 1.25rem));
  min-height: min(1.5in, 16vw);
}

.page-label {
 margin-top: 1.75rem;
  font-size: 0.8rem;
  font-family: var(--font-sans);
  color: var(--dark);
}

.eyebrow {
  font-family: var(--font-sans);
  font-size: 0.7rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  /* AAA-safe muted grey (~7.65:1 on --bg) */
  color: color-mix(in srgb, var(--muted) 70%, var(--ink) 30%);
  margin-bottom: 0.5rem;
}

.brand-name {
  font-family: var(--font-serif);
  color: inherit;
  display: inline-block;
  font-size: clamp(1.2rem, 2.6vw, 3.5rem);
  font-weight: 400;
  font-style: italic;
  letter-spacing: 0.02em;
  line-height: 1;
  vertical-align: middle;
}
.brand-name-sub {
  display: block;
  font-size: 0.62rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  opacity: 0.8;
}
.site-nav {
  color: var(--paper);
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 0.9rem 1.2rem;
  font-size: var(--text-lg);
  font-family: var(--font-serif);
  font-weight: 400;
  font-style: italic  ;
  letter-spacing: 0.01em;
  line-height: 1;
}

.site-nav a {
  color: inherit;
  font-family: inherit;
  font-weight: inherit;
  text-decoration: none;
  border-bottom: none;
  box-shadow: none;
}

.site-nav a:hover,
.site-nav a:focus-visible,
.site-nav a.active,
.site-nav a[aria-current="page"] {
  text-decoration: underline;
  border-bottom: none;
  box-shadow: none;
}

.page-intro {
  padding: clamp(3rem, 8vw, 7rem) 0 clamp(2rem, 6vw, 4rem);
}

/* ============================================================
   TYPOGRAPHY
   Headings, display sizes, body text, lede, meta lists
   ============================================================ */


.text-block,
.reading-rail,
.support-block,
.visual-block,
.support-symbol {
  min-width: 0;
}

.text-block p,
.reading-rail p,
.support-block p {
  max-width: 68ch;
}

.support-block p {
  font-size: 0.92rem;
  line-height: 1.55;
  color: color-mix(in srgb, var(--muted) 82%, var(--bg) 18%);
}

.support-block .eyebrow {
  font-size: 0.62rem;
  margin-bottom: 0.25rem;
}

.support-block p + .eyebrow {
  margin-top: -0.35rem;
}

.reading-rail,
.text-block {
  max-width: 75ch;
}

.meta-list {
  list-style: none;
  padding: 0;
  margin: 1.5rem 0 0;
  color: var(--muted);
  font-size: .9rem;
  font-style: normal;
  text-transform: uppercase;
  max-width: 30ch;
}

.meta-list li + li {
  margin-top: 0.5rem;
}

/* ============================================================
   VISUAL BLOCKS & MEDIA
   .visual-block, .media-frame, .media-fill, media grids,
   image utilities, placeholders, logo swatch grid
   ============================================================ */

.visual-block,
.support-symbol {
  border: 1px solid var(--line);
  background:
    linear-gradient(135deg, rgba(255, 255, 255, 0.22), rgba(255, 255, 255, 0)),
    var(--block);
  box-shadow: var(--soft-shadow);
  color: rgba(24, 21, 18, 0.7);
  display: flex;
  align-items: end;
  justify-content: start;
  padding: 1rem;
  font-size: 0.88rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  min-height: 14rem;
}

.visual-block img,
.visual-block iframe {
  display: block;
  width: 100%;
  height: auto;
}

.visual-block iframe {
  border: 0;
  background: var(--paper);
}

.media-fill {
  padding: 0;
  align-items: stretch;
  justify-content: stretch;
  background: none;
}

.media-fill img {
  height: 100%;
  object-fit: cover;
}

.media-grid,
.media-pair,
.media-stack {
  display: grid;
  align-items: stretch;
  justify-items: stretch;
  gap: clamp(0.75rem, 2vw, 1.25rem);
  padding: clamp(0.75rem, 2vw, 1.5rem);
  text-transform: none;
  letter-spacing: normal;
}

.media-grid {
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  grid-auto-rows: minmax(140px, auto);
}

.applications-grid {
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  grid-auto-rows: minmax(120px, auto);
}

.media-pair {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.media-stack {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.media-grid img,
.media-pair img,
.media-stack img {
  height: 100%;
  object-fit: contain;
  background: var(--paper);
}

.media-stack iframe {
  grid-column: 1 / -1;
  height: clamp(240px, 40vw, 420px);
}

.media-gallery {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  align-items: start;
}

.media-gallery figure {
  margin: 0;
  display: grid;
  gap: 0.6rem;
}

.module-context .media-gallery {
  grid-column: 8 / -1;
  align-self: start;
}

.band-top.media-pair img {
  width: 100%;
  height: auto;
  max-height: none;
  margin-inline: auto;
}

/* ============================================================
   COLOR SYSTEM COMPONENT
   Palette pair, swatches, demo bars — used in case studies
   ============================================================ */

.color-system {
  grid-column: 2 / -1;
}

.color-system .palette-pair {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 2px;
  border: 1px solid color-mix(in srgb, var(--sepia-dark) 14%, white 86%);
  background: var(--paper);
}

.color-system .palette-block {
  overflow: hidden;
}

.color-system .palette-name-bar {
  padding: 1.25rem 1.5rem 1rem;
  display: flex;
  justify-content: space-between;
  align-items: baseline;
}

.color-system .palette-title {
  font-family: var(--font-serif);
  font-weight: 600;
  font-style: normal;
  font-size: 1.05rem;
  letter-spacing: -0.01em;
  line-height: 1.2;
  margin-bottom: 0;
}

.color-system .palette-subtitle {
  font-size: 0.52rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  opacity: 0.6;
}

.color-system .swatches {
  display: flex;
  height: 160px;
}

.color-system .swatch {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding: 0.6rem 0.5rem;
  width: auto;
  height: auto;
  border-radius: 0;
  border: none;
  background: transparent;
}

.color-system .swatch-name {
  font-size: 0.45rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  margin-bottom: 0.15rem;
  opacity: 0.8;
}

.color-system .swatch-hex {
  font-size: 0.5rem;
  letter-spacing: 0.04em;
  opacity: 0.7;
}

.color-system .swatch-role {
  font-size: 0.42rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  opacity: 0.7;
  margin-top: 0.1rem;
}

.color-system .demo-bar {
  padding: 1rem 1.5rem;
  display: flex;
  align-items: baseline;
  gap: 0.75rem;
}

.color-system .demo-the {
  font-family: var(--font-serif);
  font-style: italic;
  font-weight: 300;
  font-size: 0.85rem;
}

.color-system .demo-word {
  font-family: var(--font-serif);
  font-weight: 600;
  font-size: 1.6rem;
  letter-spacing: -0.02em;
  line-height: 1;
}

.color-system .demo-desc {
  font-size: 0.48rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  margin-left: auto;
  align-self: center;
  opacity: 0.6;
}

.color-system .use-note {
  padding: 0.75rem 1.5rem;
  font-size: 0.55rem;
  line-height: 1.7;
  letter-spacing: 0.02em;
  opacity: 0.6;
  border-top: 1px solid rgba(128, 128, 128, 0.12);
}

.color-system .palette-day {
  background: #f5edd8;
}

.color-system .palette-day .palette-name-bar {
  border-bottom: 1px solid rgba(42, 107, 82, 0.12);
}

.color-system .palette-day .palette-title,
.color-system .palette-day .palette-subtitle {
  color: #2a6b52;
}

.color-system .palette-day .demo-bar {
  background: #f5edd8;
  border-top: 1px solid rgba(42, 107, 82, 0.12);
}

.color-system .palette-day .demo-the {
  color: #c9a84c;
}

.color-system .palette-day .demo-word {
  color: #2a6b52;
}

.color-system .palette-day .demo-desc,
.color-system .palette-day .use-note {
  color: #1a3d30;
}

.color-system .palette-night {
  background: #160e08;
}

.color-system .palette-night .palette-name-bar {
  border-bottom: 1px solid rgba(232, 146, 26, 0.12);
}

.color-system .palette-night .palette-title {
  color: #e8921a;
}

.color-system .palette-night .palette-subtitle {
  color: #f5c96a;
}

.color-system .palette-night .demo-bar {
  background: #160e08;
  border-top: 1px solid rgba(232, 146, 26, 0.1);
}

.color-system .palette-night .demo-the {
  color: #f5c96a;
}

.color-system .palette-night .demo-word {
  color: #e8921a;
}

.color-system .palette-night .demo-desc,
.color-system .palette-night .use-note {
  color: #a89070;
}

/* ============================================================
   CONCEPT IMAGE OVERLAY
   Marks AI-generated / concept-art renders with a small badge
   ============================================================ */

.concept-image {
  position: relative;
  display: block;
  width: 100%;
}

.concept-image > img {
  display: block;
  width: 100%;
  height: auto;
}

.concept-image::after {
  content: "Concept Art · AI-generated";
  position: absolute;
  top: 8px;
  left: 8px;
  font-family: var(--font-sans);
  font-size: 0.55rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: #fff;
  background: rgba(20, 18, 14, 0.78);
  padding: 4px 8px;
  border-radius: 2px;
  z-index: 2;
}

.concept-note {
  margin: 14px 0 0;
  padding: 0 24px 0 24px;
  font-size: 0.78rem;
  font-style: italic;
  line-height: 1.55;
  color: var(--muted);
}

/* ============================================================
   PAGE NAV (next page + back to home)
   Bottom-of-page navigation; appears on every page except home
   ============================================================ */

.page-nav {
  margin: 5rem auto 0;
  padding: 3rem 24px 4rem;
  border-top: 1px solid var(--line);
  display: flex;
  flex-direction: column;
  gap: 2rem;
  max-width: var(--max-width);
  box-sizing: border-box;
}

.page-nav-next {
  display: block;
  text-decoration: none;
  color: inherit;
  padding-bottom: 2rem;
  border-bottom: 1px solid var(--line);
  transition: color 200ms ease;
}

.page-nav-next .eyebrow {
  display: block;
  margin: 0 0 0.65rem;
  color: var(--muted);
  animation: none;
  opacity: 1;
}

.page-nav-next p {
  font-size: 0.95rem;
  line-height: 1.55;
  max-width: 60ch;
  margin: 0;
  color: var(--muted);
}

.page-nav-next:hover h2,
.page-nav-next:focus-visible h2 {
  color: var(--gold-rule);
}

.page-nav-home {
  font-family: var(--font-sans);
  font-size: 0.7rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--muted);
  text-decoration: none;
  align-self: flex-start;
  transition: color 180ms ease, letter-spacing 180ms ease;
}

.page-nav-home:hover,
.page-nav-home:focus-visible {
  color: var(--ink);
  letter-spacing: 0.17em;
}

/* ============================================================
   PAPER CARD COMPONENT
   Textured background card with grain overlay and gradient
   ============================================================ */

.paper-card {
  position: relative;
  overflow: hidden;
  border-color: color-mix(in srgb, var(--ink) 14%, var(--line) 86%);
  box-shadow:
    0 0 0 1px rgba(24, 21, 18, 0.05),
    inset 0 0 0 1px rgba(255, 255, 255, 0.22);
}

.paper-card::before,
.paper-card::after {
  content: "";
  position: absolute;
  inset: 0;
}

.paper-card::before {
  background-image: url("./brownpapertextureorbackground.png");
  background-size: 900px auto;
  background-repeat: repeat;
  opacity: 0.22;
  mix-blend-mode: normal;
}

.paper-card::after {
  background:
    linear-gradient(to bottom, rgba(255, 255, 255, 0.32), rgba(255, 255, 255, 0) 28%),
    radial-gradient(circle at top left, rgba(255, 255, 255, 0.18), transparent 42%);
}

.paper-card-warm {
  background:
    linear-gradient(135deg, rgba(255, 255, 255, 0.16), rgba(255, 255, 255, 0)),
    var(--sepia-soft);
}

.paper-card-ledger {
  background:
    linear-gradient(135deg, rgba(255, 255, 255, 0.16), rgba(255, 255, 255, 0)),
    linear-gradient(
      to bottom,
      rgba(107, 89, 63, 0.12) 0,
      rgba(107, 89, 63, 0.12) 1px,
      transparent 1px,
      transparent 2rem
    ),
    var(--sepia-ledger);
}

.paper-card figcaption {
  position: relative;
  z-index: 1;
  color: color-mix(in srgb, var(--ink) 72%, #5f4a31 28%);
  max-width: 22ch;
}

[data-parallax] {
  --parallax-shift: 0px;
}

.visual-block img {
  width: 100%;
  height: auto;
  display: block;
}

.visual-block figcaption,
.support-symbol figcaption {
  max-width: 24ch;
}

.media-frame {
  position: relative;
  overflow: hidden;
  padding: 0;
  align-items: stretch;
  justify-content: stretch;
}

.media-frame figcaption {
  position: absolute;
  left: 1rem;
  right: 1rem;
  bottom: 0.9rem;
  z-index: 1;
  max-width: 26ch;
  padding: 0.45rem 0.55rem;
  background: rgba(248, 245, 238, 0.88);
  color: color-mix(in srgb, var(--ink) 82%, var(--sepia-dark) 18%);
}

.media-frame-dark figcaption {
  background: rgba(24, 21, 18, 0.76);
  color: var(--paper);
}

.media-frame-light figcaption {
  background: rgba(248, 245, 238, 0.92);
}

.media-image {
  width: 100%;
  max-width: 100%;
  height: auto;
  display: block;
}

.media-frame .media-image {
  height: 100%;
  object-fit: cover;
  object-position: center;
}

.ayafold-hero-figure .media-image {
  height: auto !important;
  max-height: 100%;
  object-fit: contain !important;
  object-position: center;
}

.media-placeholder {
  width: 100%;
  height: 100%;
  min-height: 16rem;
  display: grid;
  place-items: center;
  background:
    linear-gradient(135deg, rgba(255, 255, 255, 0.3), rgba(255, 255, 255, 0) 52%),
    linear-gradient(180deg, rgba(95, 74, 49, 0.09), rgba(95, 74, 49, 0.02)),
    var(--sepia-ledger);
  border: 1px dashed color-mix(in srgb, var(--sepia-dark) 42%, white 58%);
}

.media-placeholder span {
  padding: 0.45rem 0.6rem;
  font-size: 0.72rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--muted);
  border: 1px solid color-mix(in srgb, var(--sepia-dark) 24%, white 76%);
  background: rgba(248, 245, 238, 0.88);
}

.media-image-contain {
  object-fit: contain;
  padding: 2rem;
}

.media-frame .media-image-contain {
  height: 100%;
}

.ayafold-book-moodboard {
  height: 200px;
  object-fit: cover;
}

.logo-swatch-grid {
  width: 100%;
  height: 100%;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  grid-template-rows: repeat(2, minmax(0, 1fr));
}

.logo-swatch {
  position: relative;
  display: grid;
  place-items: center;
  overflow: hidden;
}

.logo-swatch img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  padding: 1.8rem;
  position: relative;
  z-index: 1;
}

.logo-swatch span {
  position: absolute;
  left: 0.8rem;
  top: 0.8rem;
  padding: 0.35rem 0.45rem;
  background: rgba(248, 245, 238, 0.92);
  color: color-mix(in srgb, var(--ink) 78%, var(--sepia-dark) 22%);
  font-size: 0.68rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  z-index: 1;
}

.logo-swatch-white::before,
.logo-swatch-blue::before,
.logo-swatch-green::before,
.logo-swatch-red::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
}

.logo-swatch-white { background: none; }
.logo-swatch-white::before { background: #fbf8f2; }
.logo-swatch-blue { background: none; }
.logo-swatch-blue::before { background: #0068a7; }
.logo-swatch-green { background: none; }
.logo-swatch-green::before { background: #677532; }
.logo-swatch-red { background: none; }
.logo-swatch-red::before { background: #d91f26; }

.module-context-with-media .reading-rail {
  grid-column: 2 / span 4;
}

.context-media {
  grid-column: 7 / span 5;
  min-height: 26rem;
  box-shadow: none;
  border: none;
}

.logo-placeholder-frame {
  background:
    linear-gradient(135deg, rgba(255, 255, 255, 0.3), rgba(255, 255, 255, 0) 48%),
    linear-gradient(180deg, rgba(95, 74, 49, 0.08), rgba(95, 74, 49, 0.02)),
    var(--sepia-ledger);
  border: 1px dashed color-mix(in srgb, var(--sepia-dark) 42%, white 58%);
}

.logo-placeholder-card {
  min-height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 0.85rem;
  padding: 2rem;
  color: color-mix(in srgb, var(--ink) 84%, var(--sepia-dark) 16%);
}

.logo-placeholder-kicker {
  margin: 0;
  font-size: 0.72rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--muted);
}

.logo-placeholder-card p:last-child {
  max-width: 30ch;
  margin: 0;
}

/* ============================================================
   COLOR PALETTE & TYPE SPECIMEN BLOCKS
  Compact color chips and Inter type display
   ============================================================ */

.color-palette-block {
  grid-column: 7 / span 5;
  background: none;
  border: none;
  box-shadow: none;
  padding: 0;
  min-height: 0;
  align-items: start;
}

.color-palette-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1.5rem;
}

.color-swatch {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

.color-chip {
  width: 100%;
  aspect-ratio: 1 / 1;
  border-radius: 8px;
  border: 1px solid var(--rule);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
}

.color-label {
  font-size: var(--text-sm);
  font-weight: 600;
  color: var(--ink);
  letter-spacing: 0.5px;
}
.type-specimen-block {
  grid-column: 7 / span 5;
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 2rem;
}

.type-font-preview {
  display: inline-flex;
  flex-direction: column;
  align-self: flex-start;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 6px;
  overflow: hidden;
  margin-bottom: 0.5rem;
}

.type-font-aa {
  font-family: var(--font-sans);
  font-size: 4.5rem;
  font-weight: 700;
  line-height: 1;
  color: var(--ink);
  padding: 10px;
  background: #fff;
  text-transform: none;
  letter-spacing: 0;
  text-align: left;
}

.type-font-name {
  margin: 0;
  padding: 0.5rem 10px 0.6rem;
  font-size: 0.72rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--muted);
  border-top: 0.25px solid rgba(0, 0, 0, 0.3);
  background: #fff;
  text-align: left;
}

.type-specimen {
  display: flex;
  flex-direction: column;
  gap: 2.5rem;
}

.type-specimen-group {
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
}

.type-label {
  font-size: var(--text-xs);
  color: var(--muted);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  margin: 0;
}

.neue-unica-display {
  font-family: var(--font-sans);
  font-size: 2.2rem;
  font-weight: 700;
  line-height: 1.1;
  letter-spacing: -0.02em;
  color: var(--ink);
  margin: 0;
}

.neue-unica-subhead {
  font-family: var(--font-sans);
  font-size: 1.2rem;
  font-weight: 600;
  line-height: 1.3;
  letter-spacing: -0.01em;
  color: var(--ink);
  margin: 0;
}

.neue-unica-body {
  font-family: var(--font-sans);
  font-size: 1rem;
  font-weight: 400;
  line-height: 1.65;
  letter-spacing: 0;
  text-transform: none;
  color: var(--ink);
}

/* ============================================================
   SUPPORT BLOCKS & QUOTES
   Pull quotes, spine accent, soft-relief, inline quote image
   ============================================================ */

.support-block,
.support-symbol {
  color: var(--muted);
}

.support-block {
  outline: 0.5px solid color-mix(in srgb, var(--line) 72%, var(--sepia-dark) 28%);
  outline-offset: 0;
  padding: 0.9rem;
}

.resume-download-block {
  grid-column: 9 / span 3;
}

.resume-download-block p + p {
  margin-top: 0.6rem;
}

.quote {
  font-family: var(--font-serif);
  font-size: clamp(1.6rem, 2.6vw, 2.4rem);
  line-height: 1.08;
  color: var(--ink);
}

.quote-credit {
  margin-top: 0.9rem;
  color: var(--muted);
  font-size: 0.72rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.quote-classic-spine {
  position: relative;
  padding-left: 1rem;
}

.quote-classic-spine::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.35rem;
  bottom: 0.35rem;
  width: 1px;
  background: var(--ink);
}

.quote-classic-spine .quote {
  max-width: 14ch;
}

.quote-block.quote-classic-spine,
.module-principle-break .break-inner.quote-classic-spine {
  padding: 1.15rem 1.1rem 1.2rem 1.4rem;
  border-top: 0;
  background: var(--indigo);
  color: var(--paper);
  box-shadow: 0 0 0 1px rgba(17, 75, 120, 0.25);
}

.quote-block.quote-classic-spine::before,
.module-principle-break .break-inner.quote-classic-spine::before {
  left: 0.8rem;
  top: 1rem;
  bottom: 1rem;
  background: var(--gold-rule);
}

.quote-block.quote-classic-spine .quote,
.module-principle-break .break-inner.quote-classic-spine .quote {
  color: var(--paper);
}

.quote-block.quote-classic-spine .quote-credit,
.module-principle-break .break-inner.quote-classic-spine .quote-credit {
  color: color-mix(in srgb, var(--paper) 72%, var(--gold-rule) 28%);
}

.quote-inline-image {
  width: 100%;
  max-width: 100%;
  height: auto;
  display: block;
  object-fit: contain;
  margin: 0 0 1rem;
}

/* ============================================================
   AYAFOLD PAGE STYLES
   Research, persona, adinkra rows, fern grid, concept grid,
   logo breakdown, color palette, deliverables, ads, series,
   booklet strip, screen/browser mockups, umbrella brand
   ============================================================ */

/* --- Research layout --- */
.ayafold-research-left .detail-sidebar {
  grid-column: 1 / span 6;
  border-top: 0;
}

.ayafold-research-left .event-block {
  grid-column: 8 / span 4;
}

.research-maya-para {
  display: flex;
  gap: 0.9rem;
  align-items: flex-start;
}

.research-maya-inline {
  flex-shrink: 0;
  width: clamp(5rem, 10vw, 7.5rem);
  height: auto;
  object-fit: cover;
  border: 1px solid var(--line);
}

.ayafold-scope-image {
  grid-column: 7 / -1;
  grid-row: 1;
  width: 300px;
  max-width: 300px;
  justify-self: start;
}

.ayafold-inline-image {
  width: 100%;
  height: 12rem;
  background-color: var(--surface-muted, #e8e4dd);
  border: 1px dashed rgba(0,0,0,0.18);
  border-radius: 4px;
  display: block;
  margin: 0.75rem 0;
}

.ayafold-sidebar-image {
  width: 100%;
  max-width: 100%;
  height: auto;
  display: block;
  object-fit: cover;
  border: 1px solid var(--line);
  margin: 0.75rem 0;
}

.ayafold-adinkra-row {
  display: flex;
  gap: 1.25rem;
  align-items: flex-start;
}

.ayafold-adinkra-row__text {
  flex: 1 1 0;
  min-width: 0;
}

.ayafold-adinkra-row__image {
  flex: 0 0 auto;
  width: clamp(8rem, 22%, 14rem);
  height: auto;
  display: block;
  object-fit: cover;
  border: 1px solid var(--line);
}

@media (max-width: 640px) {
  .ayafold-adinkra-row {
    flex-direction: column;
  }
  .ayafold-adinkra-row__image {
    width: 100%;
  }
}

.ayafold-fern-grid {
  width: 100%;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.9rem;
  padding: 0.9rem;
}

.ayafold-fern-card {
  display: grid;
  gap: 0.6rem;
  margin: 0;
}

.ayafold-fern-image {
  width: 100%;
  height: auto;
  object-fit: contain;
  display: block;
  border: 1px solid var(--line);
}

.ayafold-fern-caption {
  font-size: 0.95rem;
  line-height: 1.4;
  color: var(--ink-soft);
}

@media (max-width: 640px) {
  .ayafold-fern-grid {
    grid-template-columns: 1fr;
  }
}

.research-row-section {
  padding: clamp(2rem, 5vw, 4rem) 0 clamp(4rem, 7vw, 6rem);
}

.research-row {
  display: flex;
  gap: var(--gutter);
  align-items: stretch;
}

.research-row__text {
  flex: 0 0 40%;
  min-width: 0;
}

.research-row__scroller {
  flex: 0 0 calc(60% - var(--gutter));
  min-width: 0;
}

.ayafold-concept-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.3fr) minmax(260px, 0.7fr);
  gap: 28px;
  align-items: start;
  margin: 32px 0;
}

.ayafold-concept-wrap {
  margin: 32px 0;
  overflow: hidden;
}

.ayafold-inline-fabric {
  float: left;
  width: min(320px, 45%);
  height: auto;
  margin: 0 1.5rem 1rem 0;
  border-radius: 18px;
  display: block;
}

@media (max-width: 1024px) {
  .ayafold-mobile-split {
    grid-template-columns: 1fr !important;
    gap: 1.5rem !important;
  }

  .ayafold-mobile-split > figure {
    max-width: none !important;
    justify-self: stretch !important;
  }

  .ayafold-symbol-band {
    padding: 40px 1.25rem !important;
  }

  .ayafold-symbol-band__grid {
    grid-template-columns: 1fr !important;
    gap: 1.5rem !important;
  }

  .ayafold-symbol-band__figure {
    max-width: none !important;
    justify-self: stretch !important;
    display: flex;
    justify-content: center;
    overflow: visible;
  }

  .ayafold-symbol-band__figure img {
    width: min(72vw, 260px) !important;
    max-width: 100%;
    max-height: 220px;
    height: auto !important;
    object-fit: contain !important;
    margin: 0 auto;
  }
}

.ayafold-process-duo {
  padding: 0;
}

.ayafold-process-duo-grid {
  width: 100%;
  height: 100%;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.ayafold-process-image {
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
  padding: 1rem;
  background: color-mix(in srgb, var(--paper) 80%, var(--sepia-soft) 20%);
}

.ayafold-logo-breakdown {
  grid-column: 1 / -1;
  display: grid;
  grid-template-rows: 1fr auto;
  align-items: stretch;
  padding: 0;
}

.ayafold-logo-breakdown-grid {
  width: 100%;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 0.75rem;
  padding: 0.75rem;
}

.ayafold-logo-breakdown--tight .ayafold-logo-breakdown-grid {
  gap: 0.55rem;
  padding: 0.55rem;
}

.ayafold-logo-breakdown--airy .ayafold-logo-breakdown-grid {
  gap: 1.75rem;
  padding: 0;
}

.ayafold-logo-breakdown--airy .ayafold-logo-breakdown-image {
  padding: 0;
  background: none;
}

.ayafold-concept-image {
  width: 100%;
  height: auto;
  display: block;
  object-fit: contain;
  aspect-ratio: auto;
}

.ayafold-concept-row {
  display: flex;
  gap: 1.5rem;
  align-items: stretch;
  width: 100%;
  max-width: 100vw;
  box-sizing: border-box;
  flex-wrap: wrap;
}

.ayafold-concept-row .ayafold-concept-image {
  flex: 1 1 160px;
  min-width: 0;
}

.ayafold-logo-breakdown--hero .ayafold-logo-breakdown-grid {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  grid-template-rows: repeat(3, minmax(0, 1fr));
  min-height: 22rem;
}

.ayafold-logo-breakdown--hero .ayafold-logo-breakdown-image:first-child {
  grid-column: 1 / span 2;
  grid-row: 1 / span 3;
  aspect-ratio: auto;
}

.ayafold-logo-breakdown--hero .ayafold-logo-breakdown-image:not(:first-child) {
  aspect-ratio: auto;
}

.ayafold-logo-breakdown-image {
  width: 100%;
  aspect-ratio: 1 / 1;
  object-fit: contain;
  display: block;
  padding: 1rem;
  background: color-mix(in srgb, var(--paper) 82%, var(--sepia-soft) 18%);
}

.ayafold-logo-breakdown-image--grey {
  opacity: 0.5;
  filter: grayscale(1);
}

@media (max-width: 900px) {
  .ayafold-logo-breakdown--hero .ayafold-logo-breakdown-grid,
  .ayafold-logo-breakdown--airy .ayafold-logo-breakdown-grid,
  .ayafold-logo-breakdown--tight .ayafold-logo-breakdown-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    grid-template-rows: auto;
    min-height: 0;
  }

  .ayafold-logo-breakdown--hero .ayafold-logo-breakdown-image:first-child {
    grid-column: auto;
    grid-row: auto;
    aspect-ratio: 1 / 1;
  }

  .ayafold-logo-breakdown--hero .ayafold-logo-breakdown-image:not(:first-child) {
    aspect-ratio: 1 / 1;
  }
}

.ayafold-color-palette {
  grid-column: 1 / -1;
  display: flex;
  flex-wrap: wrap;
  gap: 0.8rem;
  align-items: center;
  justify-content: center;
}

.module-artifact-band[aria-labelledby="palette-title"] {
  text-align: center;
}

.module-artifact-band[aria-labelledby="palette-title"] .band-copy {
  margin-left: auto;
  margin-right: auto;
}

.ayafold-palette-card {
  flex: 0 0 auto;
  width: clamp(5.5rem, 9vw, 8.5rem);
  margin: 0;
  display: grid;
  gap: 0.4rem;
}

.ayafold-palette-image {
  width: 100%;
  aspect-ratio: 1 / 1;
  object-fit: contain;
  display: block;
  border: 1px solid var(--line);
  background: var(--paper);
  padding: 0.35rem;
}

.ayafold-palette-card figcaption {
  display: grid;
  gap: 0.15rem;
  text-align: left;
  font-size: 0.66rem;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--muted);
}

.ayafold-palette-card figcaption span:first-child {
  color: var(--ink);
  letter-spacing: 0.03em;
}

/* --- Deliverables grid --- */
.ayafold-deliverables-grid {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 1.25rem;
}

@media (max-width: 900px) {
  .ayafold-deliverables-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 560px) {
  .ayafold-deliverables-grid {
    grid-template-columns: 1fr;
  }
}

.ayafold-deliverable-figure {
  display: grid;
  gap: 0.5rem;
}

.ayafold-deliverable-figure figcaption {
  font-size: 0.85rem;
  line-height: 1.45;
  color: var(--muted);
  letter-spacing: 0.01em;
}

.ayafold-deliverable-image {
  width: 100%;
  display: block;
  aspect-ratio: 4 / 3;
  object-fit: contain;
  background: color-mix(in srgb, var(--paper) 85%, var(--sepia-soft) 15%);
}

.ayafold-ads-block {
  grid-column: 1 / -1;
  display: grid;
  gap: 0.8rem;
  margin-top: 1.25rem;
}

.ayafold-ads-label {
  margin: 0;
}

.ayafold-ads-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 1rem;
}

.ayafold-ad-image {
  width: 100%;
  display: block;
  aspect-ratio: 16 / 9;
  object-fit: contain;
  background: color-mix(in srgb, var(--paper) 86%, var(--sepia-soft) 14%);
  border: 1px solid var(--line);
}

.ayafold-umbrella-brand {
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

.ayafold-umbrella-brand-grid {
  width: 100%;
  display: flex;
  flex-wrap: wrap;
  gap: 0.9rem;
  align-items: stretch;
  padding: 0.9rem;
}

.ayafold-umbrella-brand-image {
  width: 100%;
  flex: 1 1 260px;
  object-fit: contain;
  display: block;
  padding: 0.9rem;
  background: color-mix(in srgb, var(--paper) 84%, var(--sepia-soft) 16%);
  border: 1px solid var(--line);
}

.ayafold-series-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  margin-top: 1rem;
}

.ayafold-series-media {
  padding: 0;
  background: none;
  border: 0;
  box-shadow: none;
  min-height: 0;
}

.ayafold-series-figure {
  flex: 1 1 260px;
  display: grid;
  gap: 0.5rem;
  margin: 0;
}

.ayafold-series-variation-image {
  width: 100%;
  display: block;
  aspect-ratio: 4 / 3;
  object-fit: contain;
  background: color-mix(in srgb, var(--paper) 85%, var(--sepia-soft) 15%);
  border: 1px solid var(--line);
  padding: 0.9rem;
}

.ayafold-series-figure figcaption {
  font-size: 0.85rem;
  line-height: 1.45;
  color: var(--muted);
  letter-spacing: 0.01em;
}

.ayafold-booklet-gallery {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 0.75rem;
  margin-top: 0.75rem;
}

.ayafold-booklet-item {
  margin: 0;
}

.ayafold-booklet-gallery img {
  width: 100%;
  height: auto;
  display: block;
  border-radius: 12px;
  object-fit: cover;
  background: color-mix(in srgb, var(--paper) 90%, var(--sepia-soft) 10%);
  border: 1px solid var(--line);
}

@media (max-width: 900px) {
  .ayafold-umbrella-brand-grid {
    padding: 0.75rem;
  }
}

@media (max-width: 900px) {
  .ayafold-ads-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 640px) {
  .ayafold-ads-grid {
    grid-template-columns: 1fr;
  }
}

/* ---- Ayafold inline flex rows — stack vertically on mobile ---- */
@media (max-width: 720px) {
  .ayafold-booklet-rows > div,
  .ayafold-career-rows > div,
  .ayafold-ad-rows > div {
    flex-direction: column;
  }

  /* Remove column max-width locks when stacked */
  .ayafold-ad-rows > div > div {
    max-width: none !important;
    flex: none !important;
    width: 100%;
  }

  /* Ad image grid: 1 column on mobile */
  .ayafold-ad-rows > div[style*="grid-template-columns"] {
    grid-template-columns: 1fr !important;
  }

  /* Let ad images fill the column and cap height sensibly */
  .ayafold-ad-rows img {
    width: 100% !important;
    height: auto !important;
    max-height: 480px;
    object-fit: contain;
  }

  /* Sticker sheet — wider at mobile so it's not a postage stamp */
  [aria-label="AyaFold kit deliverables"] .sticker-figure img {
    width: 70%;
  }
}

/* --- Booklet spreads horizontal strip --- */
.ayafold-booklet-strip {
  grid-column: 1 / -1;
  display: flex;
  gap: 1rem;
  overflow-x: auto;
  overflow-y: hidden;
  overscroll-behavior-x: contain;
  scroll-snap-type: x mandatory;
  padding-bottom: 0.75rem;
  scrollbar-width: thin;
  scrollbar-color: color-mix(in srgb, var(--sepia-dark) 30%, white 70%) transparent;
}

.ayafold-booklet-strip::-webkit-scrollbar {
  height: 4px;
}

.ayafold-booklet-strip::-webkit-scrollbar-thumb {
  background: color-mix(in srgb, var(--sepia-dark) 28%, white 72%);
  border-radius: 3px;
}

.ayafold-booklet-spread {
  flex: 0 0 auto;
  width: clamp(16rem, 32vw, 26rem);
  aspect-ratio: 4 / 3;
  object-fit: cover;
  display: block;
  scroll-snap-align: start;
  border: 1px solid var(--line);
  background: color-mix(in srgb, var(--paper) 85%, var(--sepia-soft) 15%);
}

/* --- Screen / monitor frame --- */
.screen-frame {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
}

.screen-frame__bezel {
  width: 100%;
  padding: 0.4rem 0.4rem 0.3rem;
  background: color-mix(in srgb, var(--ink) 82%, var(--sepia-dark) 18%);
  border-radius: 8px 8px 4px 4px;
  box-shadow:
    0 0 0 1px rgba(255,255,255,0.07) inset,
    0 6px 24px rgba(24,21,18,0.28);
}

.screen-frame__neck {
  width: 10%;
  height: 0.5rem;
  background: color-mix(in srgb, var(--ink) 70%, var(--sepia-dark) 30%);
}

.screen-frame__stand {
  width: 28%;
  height: 0.35rem;
  background: color-mix(in srgb, var(--ink) 65%, var(--sepia-dark) 35%);
  border-radius: 0 0 4px 4px;
  box-shadow: 0 2px 6px rgba(24,21,18,0.18);
}

/* --- Browser window mockup --- */
.browser-mock {
  width: 100%;
  border-radius: 8px;
  overflow: hidden;
  border: 1px solid color-mix(in srgb, var(--ink) 18%, white 82%);
  box-shadow:
    0 2px 8px rgba(24, 21, 18, 0.12),
    0 0 0 1px rgba(24, 21, 18, 0.06);
  background: var(--paper);
  position: relative;
}

.browser-mock::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 3.5rem;
  background: linear-gradient(to top, rgba(248, 245, 238, 0.88), rgba(248, 245, 238, 0));
  pointer-events: none;
  z-index: 2;
}

.browser-mock__chrome {
  display: flex;
  align-items: center;
  gap: 0.45rem;
  padding: 0.5rem 0.75rem;
  background: color-mix(in srgb, var(--paper) 60%, var(--sepia-soft) 40%);
  border-bottom: 1px solid color-mix(in srgb, var(--ink) 12%, white 88%);
}

.browser-mock__dot {
  width: 0.65rem;
  height: 0.65rem;
  border-radius: 50%;
  display: block;
  flex-shrink: 0;
}

.browser-mock__dot--close  { background: #ff5f57; }
.browser-mock__dot--min    { background: #febc2e; }
.browser-mock__dot--max    { background: #28c840; }

.browser-mock__url {
  flex: 1;
  margin-left: 0.6rem;
  padding: 0.2rem 0.6rem;
  font-size: 0.7rem;
  font-family: var(--font-mono);
  letter-spacing: 0.02em;
  color: var(--muted);
  background: color-mix(in srgb, white 72%, var(--paper) 28%);
  border: 1px solid color-mix(in srgb, var(--ink) 10%, white 90%);
  border-radius: 4px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.browser-mock__viewport {
  height: 26rem;
  overflow-y: scroll;
  overflow-x: hidden;
  overscroll-behavior: contain;
  scrollbar-width: thin;
  scrollbar-color: color-mix(in srgb, var(--sepia-dark) 30%, white 70%) transparent;
}

.browser-mock__viewport::-webkit-scrollbar {
  width: 5px;
}

.browser-mock__viewport::-webkit-scrollbar-thumb {
  background: color-mix(in srgb, var(--sepia-dark) 28%, white 72%);
  border-radius: 3px;
}

.browser-mock__image {
  width: 100%;
  display: block;
  height: auto;
}

/* --- Persona scroller placeholder --- */
.ayafold-persona-scroller-placeholder {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.6rem;
  min-height: 10rem;
  border: 1px dashed color-mix(in srgb, var(--sepia-dark) 38%, white 62%);
  background:
    linear-gradient(135deg, rgba(255,255,255,0.28), rgba(255,255,255,0) 52%),
    var(--sepia-ledger);
  text-align: center;
}

.persona-scroller-label {
  font-size: 0.72rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--muted);
  border: 1px solid color-mix(in srgb, var(--sepia-dark) 22%, white 78%);
  padding: 0.35rem 0.55rem;
  background: rgba(248, 245, 238, 0.88);
}

.ayafold-persona-scroller-placeholder p {
  margin: 0;
  font-size: 0.82rem;
  color: var(--muted);
}

.ayafold-research-stack {
  display: flex;
  flex-direction: column;
  overflow: hidden;
  padding: 0;
}

.research-stack-image {
  width: 100%;
  flex: 1 1 0;
  min-height: 0;
  object-fit: cover;
  object-position: center;
  display: block;
}

.ayafold-research-stack figcaption {
  position: absolute;
  left: 1rem;
  right: 1rem;
  bottom: 0.9rem;
  z-index: 1;
  max-width: 26ch;
  padding: 0.45rem 0.55rem;
  background: rgba(248, 245, 238, 0.88);
  color: color-mix(in srgb, var(--ink) 82%, var(--sepia-dark) 18%);
}

.quote-soft-relief {
  padding: 1rem;
  border-top: 0;
  border-radius: 18px;
  background: #ece7dd;
  box-shadow:
    10px 10px 18px rgba(176, 164, 148, 0.24),
    -10px -10px 18px rgba(255, 252, 245, 0.78);
}

.quote-soft-relief .quote {
  text-shadow: 1px 1px 0 rgba(255, 252, 245, 0.55);
}

.quote-soft-specimen {
  position: relative;
  padding: 1.1rem 1.1rem 1.15rem;
  border: 1px solid rgba(24, 21, 18, 0.1);
  border-radius: 8px;
  background:
    linear-gradient(to bottom, rgba(255, 255, 255, 0.35), rgba(255, 255, 255, 0)),
    #e8e1d6;
  box-shadow:
    inset 1px 1px 0 rgba(255, 252, 245, 0.72),
    inset -1px -1px 0 rgba(159, 146, 130, 0.16),
    6px 6px 14px rgba(176, 164, 148, 0.14),
    -4px -4px 10px rgba(255, 252, 245, 0.46);
}

.quote-soft-specimen::after {
  content: "";
  display: block;
  width: 4rem;
  height: 1px;
  margin-top: 1rem;
  background: rgba(24, 21, 18, 0.25);
}

.quote-soft-specimen .quote {
  max-width: 15ch;
  font-size: clamp(1.45rem, 2.3vw, 2rem);
  text-shadow: 1px 1px 0 rgba(255, 252, 245, 0.45);
}

.specimen-label {
  margin-bottom: 1rem;
  color: var(--muted);
  font-size: 0.68rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.figure-label,
.entry-caption {
  color: var(--muted);
  font-size: 0.78rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.section-heading-block {
  grid-column: 2 / span 4;
}

/* ============================================================
   MODULE LAYOUT — GRID COLUMN ASSIGNMENTS
   Per-module grid placement for text, visual, and support
   blocks. Follows the 12-column .section grid system.
   ============================================================ */

.module-hero-split .text-block {
  grid-column: 1 / span 4;
}

.module-hero-split .dominant-block {
  grid-column: 6 / -1;
  min-height: 34rem;
}

.aya-scope-band {
  width: 100vw;
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
  position: relative;
  isolation: isolate;
  padding: 48px 20px;
  color: var(--ink);
}

.aya-scope-band::before {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: calc(50% - 50vw);
  right: calc(50% - 50vw);
  z-index: 0;
  pointer-events: none;
  background-image: url(./texture-bg-paper.jpg);
  background-repeat: repeat;
  background-size: 640px auto;
  opacity: 0.4;
}

.aya-scope-band > * {
  position: relative;
  z-index: 1;
}

.aya-paper-band {
  position: relative;
  isolation: isolate;
}

.aya-paper-band::before {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: calc(50% - 50vw);
  right: calc(50% - 50vw);
  z-index: 0;
  pointer-events: none;
  background-image: url(./texture-bg-paper.jpg);
  background-repeat: repeat;
  background-size: 640px auto;
  opacity: 0.4;
}

.aya-paper-band > * {
  position: relative;
  z-index: 1;
}

.project-page .page-shell > .module-hero-split {
  position: relative;
  isolation: isolate;
  overflow: visible;
}

.project-page .page-shell > .module-hero-split::before {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: calc(50% - 50vw);
  right: calc(50% - 50vw);
  z-index: 0;
  pointer-events: none;
  background-image: url(./texture-bg-paper.jpg);
  background-repeat: repeat;
  background-size: 640px auto;
  opacity: 0.4;
}

.project-page .page-shell > .module-hero-split > * {
  position: relative;
  z-index: 1;
}

.hero-collage {
  display: grid;
  grid-template-columns: 1.4fr 1fr;
  grid-template-rows: 17rem 17rem;
  gap: 0.4rem;
  overflow: hidden;
  height: 34rem;
}

/* --- Homepage hero video --- */
.hero-video {
  position: relative;
  overflow: hidden;
  background: var(--sepia-soft);
}

.hero-video video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

@media (prefers-reduced-motion: reduce) {
  .hero-video video {
    display: none;
  }
}

.hero-collage img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.hero-collage .collage-a {
  grid-column: 1;
  grid-row: 1 / span 2;
}

.hero-collage .collage-b { grid-column: 2; grid-row: 1; }
.hero-collage .collage-c { grid-column: 2; grid-row: 2; }
.hero-collage .collage-d { display: none; }

.module-hero-split .hero-summary {
  grid-column: 1 / -1;
  max-width: 72ch;
  margin: 1.5rem 0 0;
}

.module-hero-split .hero-figure {
  border: none;
  background: none;
  box-shadow: none;
}

.hero-meta {
  text-transform: uppercase;
  letter-spacing: 0.18em;
  font-size: 0.72rem;
  line-height: 1.4;
}

.module-hero-split .support-meta {
  grid-column: 6 / span 2;
  align-self: end;
}

body.sweetgrass-page .module-hero-split .text-block {
  grid-column: 1 / span 5;
}

body.sweetgrass-page .module-hero-split .dominant-block {
  grid-column: 7 / -1;
  min-height: clamp(18rem, 30vw, 26rem);
}

body.sweetgrass-page .module-hero-split .hero-figure {
  width: 100%;
  min-height: clamp(18rem, 30vw, 26rem);
}

body.sweetgrass-page .module-hero-split .hero-figure img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: center;
}

.module-reading-visual .reading-rail {
  grid-column: 2 / span 3;
}

.module-reading-visual .event-block {
  grid-column: 6 / span 6;
  min-height: 28rem;
}

.module-reading-visual .event-block.index-work-01-image {
  min-height: 19.6rem;
}

.module-reading-visual .artifact-note {
  grid-column: 10 / span 2;
}

.module-image-led .wide-block,
.module-thesis .wide-block {
  grid-column: 1 / span 8;
  min-height: 30rem;
}

.module-thesis .reading-rail {
  grid-column: 1 / span 7;
}

.module-thesis .quote-block {
  grid-column: 9 / span 4;
  padding-top: 2rem;
}

.module-image-led .support-block {
  grid-column: 2 / span 2;
}

.module-image-led .short-text {
  grid-column: 9 / span 4;
  grid-row: 1;
  align-self: start;
}

.module-manuscript .centered-rail,
.module-contact .centered-rail,
.module-context .reading-rail {
  grid-column: 3 / span 4;
}

/* --- Thesis section — scoped to ayafold only --- */
.page-shell .module-thesis {
  background: color-mix(in srgb, var(--paper) 64%, var(--sepia-soft) 36%);
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
  padding-left: calc(50vw - 50%);
  padding-right: calc(50vw - 50%);
  width: 100vw;
  max-width: 100vw;
}

/* --- Concept band — scoped to ayafold concept section --- */
.page-shell [aria-labelledby="concept-title"] {
  background: color-mix(in srgb, var(--paper) 64%, var(--sepia-soft) 36%);
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
  padding-left: calc(50vw - 50%);
  padding-right: calc(50vw - 50%);
  width: 100vw;
  max-width: 100vw;
}

.section.ayafold-context-dark {
  background: color-mix(in srgb, var(--ink) 88%, var(--sepia-dark) 12%);
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
  padding-left: calc(50vw - 50%);
  padding-right: calc(50vw - 50%);
  width: 100vw;
  max-width: 100vw;
  max-height: 300px;
  overflow: hidden;
  display: flex;
  align-items: center;
  color: var(--paper);
}

.section.ayafold-outcome {
  display: block;
  padding-inline: clamp(1.25rem, 6vw, 6rem);
}

.ayafold-context-dark .reading-rail,
.module-context.ayafold-context-dark .reading-rail {
  grid-column: unset;
  width: 100%;
  max-width: 100%;
  font-size: 0.6em;
}

.ayafold-context-dark .eyebrow,
.ayafold-context-dark h2,
.ayafold-context-dark p,
.ayafold-context-dark a {
  color: var(--paper);
}

.ayafold-problem-feature {
  position: relative;
  overflow: hidden;
  width: 100vw;
  max-width: 100vw;
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
  border: 1px solid color-mix(in srgb, var(--sepia-dark) 20%, white 80%);
  border-left: 0;
  border-right: 0;
  background:
    linear-gradient(to right, rgba(24, 21, 18, 0.22), rgba(24, 21, 18, 0.08) 42%, rgba(24, 21, 18, 0.28)),
    url("./Projects/images/aya/wide-hero-ad-02.png") center / cover no-repeat;
  box-shadow: var(--soft-shadow);
}

.ayafold-problem-feature .reading-rail {
  grid-column: 7 / -1;
  margin-right: clamp(0rem, 1.2vw, 0.75rem);
  padding: clamp(1.1rem, 2vw, 1.6rem);
  background: rgba(248, 245, 238, 0.92);
  border: 1px solid color-mix(in srgb, var(--sepia-dark) 20%, white 80%);
  box-shadow: 0 10px 24px rgba(24, 21, 18, 0.14);
}

.support-symbol {
  grid-column: 9 / span 2;
  min-height: 9rem;
}

/* ============================================================
   ABOUT PAGE MODULES
   About hero, reading rail, artifact grid, closing
   ============================================================ */

.module-about-preview .portrait-block {
  grid-column: 2 / span 4;
  min-height: 24rem;
}

.module-about-preview .text-block {
  grid-column: 8 / span 4;
}

.module-about-hero .about-hero-rail {
  grid-column: 2 / span 4;
}

.module-about-hero .portrait-tall {
  grid-column: 7 / span 4;
  min-height: 34rem;
  overflow: hidden;
  position: relative;
  padding: 0;
  background: none;
  border: none;
  box-shadow: none;
}

.module-about-hero .support-meta {
  grid-column: 11 / span 2;
  align-self: end;
}

.module-about-reading .long-rail {
  grid-column: 3 / span 4;
}

.module-about-reading .about-sidebar {
  grid-column: 9 / span 3;
}

.module-about-artifacts .reading-rail {
  grid-column: 2 / span 3;
}

.about-artifact-grid {
  grid-column: 6 / -1;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--gutter);
}

.module-about-closing .centered-rail {
  grid-column: 4 / span 4;
}

.module-lab-intro .lab-intro-rail {
  grid-column: 3 / span 4;
}

.module-lab-intro .lab-intro-note {
  grid-column: 9 / span 2;
  align-self: end;
}

/* ============================================================
   LAB INDEX & FILTER UI
   Investigation entries, lab entries, filter chips/bar
   ============================================================ */

.investigation-list {
  grid-column: 2 / -1;
  display: grid;
  gap: 1.5rem;
}

.investigation-entry,
.lab-entry {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: var(--gutter);
  padding: 1.5rem 0;
  border-top: 1px solid var(--line);
}

.investigation-copy {
  grid-column: 1 / span 4;
}

.investigation-artifact {
  grid-column: 7 / span 4;
  min-height: 12rem;
}

.module-lab-filters {
  padding-top: 1rem;
}

.lab-filter-group {
  grid-column: 7 / -1;
  display: grid;
  gap: 0.8rem;
}

.filter-bar {
  grid-column: 7 / -1;
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem;
  align-content: start;
}

.filter-chip {
  border: 1px solid var(--line);
  background: transparent;
  color: var(--ink);
  padding: 0.5rem 0.8rem;
  min-height: 2.5rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-size: 0.76rem;
}

.filter-chip.is-active,
.filter-chip:hover {
  background: rgba(24, 21, 18, 0.06);
}

.filter-chip[role="radio"][aria-checked="true"] {
  background: rgba(24, 21, 18, 0.06);
}

.filter-status {
  margin: 0;
  color: var(--muted);
  font-size: 0.78rem;
  letter-spacing: 0.05em;
}

.module-lab-index {
  padding-top: 0.5rem;
}

.module-lab-index .lab-entry {
  grid-column: 2 / -1;
}

.projects-shell .module-lab-index {
  padding-top: 0;
}

.projects-intro-note {
  grid-column: 8 / span 3;
  align-self: end;
  color: color-mix(in srgb, var(--muted) 88%, var(--sepia-dark) 12%);
}

.module-lab-index .lab-entry-copy h4 a,
.module-reading-visual .reading-rail h3 a {
  text-decoration: none;
}

.module-lab-index .lab-entry-copy h4 a:hover,
.module-lab-index .lab-entry-copy h4 a:focus-visible,
.module-reading-visual .reading-rail h3 a:hover,
.module-reading-visual .reading-rail h3 a:focus-visible {
  text-decoration: underline;
  text-underline-offset: 0.16em;
}

.lab-entry-meta {
  grid-column: 1 / span 2;
}

.lab-entry-copy {
  grid-column: 3 / span 4;
}

.lab-entry-artifact {
  grid-column: 8 / span 3;
  min-height: 10rem;
}

.lab-entry-gallery {
  grid-column: 7 / span 5;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0.5rem;
  align-self: start;
}

.lab-entry-gallery img {
  width: 100%;
  aspect-ratio: 1;
  object-fit: cover;
  display: block;
}

.projects-entry {
  align-items: start;
  padding: 2rem 0 2.1rem;
}

.projects-entry .lab-entry-copy {
  display: grid;
  gap: 0.7rem;
}

.projects-entry .lab-entry-copy p {
  margin-bottom: 0;
}

.project-entry-link {
  width: fit-content;
  margin-top: 0.2rem;
}

.projects-entry .lab-entry-artifact {
  aspect-ratio: 4 / 3;
  min-height: unset;
  overflow: hidden;
  padding: 0;
  border: none;
  background: transparent;
  box-shadow: none;
  position: relative;
}

.projects-entry .lab-entry-artifact a {
  display: block;
  width: 100%;
  height: 100%;
  position: absolute;
  inset: 0;
}

.projects-entry .lab-entry-artifact a img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
  transition: opacity 200ms ease;
}

.projects-entry .lab-entry-artifact a:hover img,
.projects-entry .lab-entry-artifact a:focus-visible img {
  opacity: 0.88;
}

.projects-entry .lab-entry-artifact img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.projects-entry .lab-entry-artifact figcaption {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  padding: 0.4rem 0.75rem;
  background: color-mix(in srgb, var(--ink) 72%, transparent 28%);
  color: var(--paper);
  font-size: 0.68rem;
  letter-spacing: 0.06em;
}

.projects-closing {
  margin-top: 0;
}

/* ============================================================
   PROJECTS PAGE
   Hero band, project entry list, closing, hero artifact
   ============================================================ */

.projects-hero-band {
  display: grid;
  grid-template-columns: 5fr 7fr;
  gap: calc(var(--gutter) * 2);
  padding: clamp(3rem, 8vw, 7rem) 0 clamp(2rem, 5vw, 4rem);
  align-items: start;
  border-bottom: 1px solid var(--line);
  margin-bottom: 0;
}

.projects-hero-entry {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  border-top: none;
  padding-top: 0;
}

.projects-hero-artifact {
  width: 100%;
  aspect-ratio: 16 / 9;
  min-height: unset;
  overflow: hidden;
  padding: 0;
  position: relative;
  background: var(--sepia-soft);
}

.projects-hero-artifact img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
}

.projects-hero-copy {
  display: grid;
  gap: 0.5rem;
  padding-top: 0.25rem;
}

/* ============================================================
   RESUME PAGE
   Hero band, download link, hero placeholder, PDF frame
   ============================================================ */

.resume-hero-band {
  display: grid;
  grid-template-columns: 5fr 7fr;
  gap: calc(var(--gutter) * 2);
  padding: clamp(3rem, 8vw, 7rem) 0 clamp(2rem, 5vw, 4rem);
  align-items: start;
  border-bottom: 1px solid var(--line);
  width: min(calc(100% - 2.5rem), var(--max-width));
  margin-inline: auto;
}

.resume-intro-text .lede {
  margin-bottom: 1.25rem;
}

.resume-download-inline {
  text-transform: uppercase;
  letter-spacing: 0.14em;
  font-size: 0.72rem;
}

.resume-hero-placeholder {
  width: 100%;
  min-height: 26rem;
  overflow: hidden;
  padding: 0;
  position: relative;
}

.resume-hero-placeholder img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: top;
  display: block;
}

.resume-pdf-frame {
  width: 100%;
  height: clamp(32rem, 70vh, 52rem);
  border: 1px solid var(--line);
  border-radius: 2px;
  overflow: hidden;
  box-shadow: var(--soft-shadow);
  background: var(--paper);
}

.resume-pdf-frame iframe,
.resume-pdf-frame object,
.resume-pdf-frame embed {
  width: 100%;
  height: 100%;
  border: none;
  display: block;
}

.reading-shelf-grid {
  grid-column: 6 / -1;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--gutter);
}

.shelf-item {
  padding-top: 0.25rem;
}

.shelf-thumb {
  min-height: 9rem;
  margin-bottom: 0.9rem;
}

.module-open-questions .long-rail {
  grid-column: 2 / span 4;
}

.project-nav {
  grid-column: 3 / span 7;
}

.project-nav-shell {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--gutter);
  align-items: start;
  width: 100%;
  padding-top: 1.2rem;
  border-top: 1px solid var(--line);
}

.project-nav-item {
  min-width: 0;
}

.project-nav .archive-link {
  min-width: 0;
  padding-top: 0;
  padding-bottom: 0.9rem;
}

.question-list {
  grid-column: 7 / span 4;
  display: grid;
  gap: 1rem;
}

/* ============================================================
   COMPONENT LIBRARY (RESERVED)
   Loader blocks, component grids, archive tabs, prototype
   toggles, contact specimen, status stack — not yet in use
   on main portfolio pages
   ============================================================ */

#lab-page .lab-intro-note,
#lab-page .investigation-artifact,
#lab-page .lab-entry-artifact,
#lab-page .shelf-thumb,
#lab-page .question-list p {
  border: 1px solid rgba(24, 21, 18, 0.08);
  border-radius: 8px;
  background:
    linear-gradient(to bottom, rgba(255, 255, 255, 0.32), rgba(255, 255, 255, 0)),
    #e9e2d7;
  box-shadow:
    inset 1px 1px 0 rgba(255, 252, 245, 0.72),
    inset -1px -1px 0 rgba(159, 146, 130, 0.12),
    5px 5px 12px rgba(176, 164, 148, 0.12),
    -3px -3px 8px rgba(255, 252, 245, 0.38);
}

#lab-page .lab-intro-note {
  padding: 1rem 1rem 1.05rem;
  border-top: 0;
}

#lab-page .investigation-artifact,
#lab-page .lab-entry-artifact {
  position: relative;
  overflow: hidden;
}

#lab-page .investigation-artifact::before,
#lab-page .lab-entry-artifact::before,
#lab-page .shelf-thumb::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(135deg, rgba(255, 255, 255, 0.16), transparent 42%),
    repeating-linear-gradient(
      180deg,
      transparent 0,
      transparent 1.35rem,
      rgba(24, 21, 18, 0.03) 1.35rem,
      rgba(24, 21, 18, 0.03) 1.41rem
    );
}

#lab-page .module-lab-filters .filter-bar {
  gap: 0.7rem;
}

#lab-page .filter-chip {
  border-color: rgba(24, 21, 18, 0.1);
  border-radius: 999px;
  background:
    linear-gradient(to bottom, rgba(255, 255, 255, 0.24), rgba(255, 255, 255, 0)),
    rgba(233, 226, 215, 0.32);
  box-shadow:
    inset 1px 1px 0 rgba(255, 252, 245, 0.55),
    inset -1px -1px 0 rgba(159, 146, 130, 0.08);
  transition:
    background 180ms ease,
    box-shadow 180ms ease,
    transform 180ms ease;
}

#lab-page .filter-chip.is-active,
#lab-page .filter-chip:hover,
#lab-page .filter-chip:focus-visible {
  background:
    linear-gradient(to bottom, rgba(255, 255, 255, 0.38), rgba(255, 255, 255, 0)),
    #e7dfd2;
  box-shadow:
    inset 1px 1px 0 rgba(255, 252, 245, 0.72),
    inset -1px -1px 0 rgba(159, 146, 130, 0.14),
    4px 4px 10px rgba(176, 164, 148, 0.12),
    -2px -2px 6px rgba(255, 252, 245, 0.35);
  transform: translateY(-1px);
}

#lab-page .investigation-entry,
#lab-page .lab-entry,
#lab-page .shelf-item {
  position: relative;
}

#lab-page .investigation-entry::after,
#lab-page .lab-entry::after {
  content: "";
  position: absolute;
  left: 0;
  top: 1.5rem;
  width: 3.5rem;
  height: 1px;
  background: rgba(24, 21, 18, 0.12);
}

#lab-page .shelf-item {
  padding: 0.7rem 0.7rem 0.3rem;
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.16);
}

#lab-page .question-list p {
  margin: 0;
  padding: 0.95rem 1rem 1rem;
}

.question-list p {
  margin: 0;
  padding-top: 0.9rem;
  border-top: 1px solid var(--line);
}

.component-grid {
  display: grid;
  gap: var(--gutter);
}

.component-grid-three {
  grid-column: 2 / -1;
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.component-grid-two,
.component-figure-wrap {
  grid-column: 3 / -1;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--gutter);
}

.component-card,
.utility-panel {
  padding-top: 0.4rem;
}

.loader-block,
.component-meta,
.component-nav-block,
.contact-specimen,
.status-stack,
.figure-specimen {
  border-top: 1px solid var(--line);
  padding-top: 0.9rem;
}

.loader-block {
  min-height: 9rem;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  border-bottom: 1px solid rgba(24, 21, 18, 0.08);
  padding-bottom: 0.9rem;
}

.loader-label {
  font-family: var(--font-serif);
  font-size: 1.2rem;
}

.loader-rule,
.loader-panel,
.loader-dot {
  display: block;
}

.loader-rule {
  width: 100%;
  height: 1px;
  background: linear-gradient(90deg, var(--ink) 0 32%, transparent 32% 100%);
}

.loader-media {
  justify-content: center;
}

.loader-panel {
  width: 100%;
  min-height: 5rem;
  background: linear-gradient(90deg, rgba(24, 21, 18, 0.08), rgba(24, 21, 18, 0.16), rgba(24, 21, 18, 0.08));
}

.loader-inline {
  flex-direction: row;
  align-items: center;
  gap: 0.65rem;
}

.loader-dot {
  width: 0.75rem;
  height: 0.75rem;
  border: 1px solid var(--line);
  border-radius: 50%;
  background: rgba(24, 21, 18, 0.08);
}

.component-figure {
  min-height: 18rem;
}

.component-meta {
  padding-bottom: 0.2rem;
}

.archive-link {
  display: block;
  padding: 0.5rem 0;
  border-bottom: 1px solid var(--line);
  font-family: var(--font-sans);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-size: 0.82rem;
  transition:
    color 180ms ease,
    padding-left 180ms ease,
    border-color 180ms ease;
}

.archive-link:hover,
.archive-link:focus-visible {
  color: var(--ink);
  padding-left: 0.45rem;
  border-color: rgba(24, 21, 18, 0.45);
}

.archive-link.is-active {
  color: var(--ink);
  font-weight: 600;
}

.component-filter-preview {
  grid-column: auto;
  display: grid;
  gap: 0.9rem;
  align-content: start;
}

.contact-specimen {
  display: grid;
  gap: 1rem;
}

.archive-sheet {
  border: 1px solid var(--line);
  padding: 1rem;
}

.contact-specimen label {
  display: grid;
  gap: 0.4rem;
  font-size: 0.85rem;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--muted);
}

.contact-specimen input,
.contact-specimen textarea {
  width: 100%;
  border: 1px solid rgba(24, 21, 18, 0.08);
  background: transparent;
  padding: 0.85rem 0.9rem;
  color: var(--ink);
}

.submit-button {
  width: fit-content;
  min-height: 2.75rem;
  padding: 0.65rem 1rem;
  border: 1px solid var(--ink);
  background: transparent;
  color: var(--ink);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-size: 0.76rem;
}

.archive-tab-button {
  border-top: 0;
  border-bottom: 0;
  border-left: 1px solid var(--ink);
  border-right: 1px solid var(--ink);
}

.prototype-toggle {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 0.85rem;
  align-items: center;
  min-height: 3rem;
  min-width: 44px;
  padding-top: 0.9rem;
  border-top: 1px solid var(--line);
}

.prototype-toggle input {
  position: absolute;
  opacity: 0;
}

.prototype-toggle .toggle-track {
  width: 3.2rem;
  height: 1px;
  border: 0;
  background: var(--line);
  position: relative;
}

.prototype-toggle .toggle-track::after {
  content: "";
  position: absolute;
  top: -0.45rem;
  left: 0.2rem;
  width: 1rem;
  height: 1rem;
  background: var(--ink);
  transition: transform 0.2s ease;
}

.prototype-toggle:focus-within {
  outline: 3px solid var(--ink);
  outline-offset: 6px;
}

.prototype-toggle:focus-within .toggle-copy,
.prototype-toggle input:checked ~ .toggle-copy {
  color: var(--ink);
}

.prototype-toggle input:checked + .toggle-track {
  background: rgba(24, 21, 18, 0.35);
}

.prototype-toggle input:checked + .toggle-track::after {
  transform: translateX(1.45rem);
}

.prototype-toggle .toggle-copy {
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-size: 0.78rem;
}

.prototype-toggle input:disabled + .toggle-track {
  background: rgba(24, 21, 18, 0.12);
}

.prototype-toggle input:disabled ~ .toggle-copy {
  color: rgba(116, 107, 98, 0.65);
}

.form-note {
  margin: 0;
  color: var(--muted);
  font-size: 0.82rem;
}

.status-stack {
  display: grid;
  gap: 0.9rem;
}

.status-note {
  margin: 0;
  padding-bottom: 0.9rem;
  border-bottom: 1px solid rgba(24, 21, 18, 0.08);
}

.status-note-muted {
  color: var(--muted);
}

.status-note-alert {
  color: #6d2c1d;
}

.module-artifact-band .band-label {
  grid-column: 1 / -1;
}

.module-artifact-band .band-heading {
  grid-column: 1 / -1;
  margin: 0.25rem 0 1rem;
}

.module-artifact-band .band-copy {
  grid-column: 2 / span 7;
  max-width: 72ch;
  margin: 32px 0 1.5rem;
  font-size: 18px;
  line-height: 1.8;
}

.inline-media-row {
  grid-column: 2 / span 7;
  display: grid;
  grid-template-columns: minmax(0, 576px) minmax(0, 1fr);
  gap: var(--gutter);
  align-items: start;
  margin-bottom: 1.5rem;
}

.inline-media-row .band-copy {
  margin: 0;
}

.inline-media-block {
  width: 100%;
  max-width: 576px;
  height: auto;
  display: block;
}

.band-top {
  grid-column: 2 / span 7;
  min-height: 24rem;
}

.band-row {
  grid-column: 5 / -1;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--gutter);
}

.band-small {
  min-height: 14rem;
  background: var(--block-dark);
}

.logo-plain {
  border: none;
  background: none;
  box-shadow: none;
  padding: 0;
}

.module-detail-sidebar .event-block {
  grid-column: 1 / span 8;
  min-height: 24rem;
}

.module-detail-sidebar .detail-sidebar {
  grid-column: 10 / span 3;
}

.module-wayfinding .event-block,
.module-wayfinding .support-block {
  grid-column: 1 / -1;
}

.module-wayfinding .support-block p {
  max-width: none;
}

.module-research-full .detail-sidebar {
  grid-column: 1 / -1;
}

.module-principle-break {
  min-height: 24rem;
}

.ayafold-symbol-break-logo {
  grid-column: 9 / -1;
  align-self: center;
  margin: 0;
}

.ayafold-symbol-break-logo__image {
  width: 100%;
  height: auto;
  display: block;
}

.break-inner {
  grid-column: 4 / span 5;
  align-self: center;
}

.ayafold-principle-center .break-inner {
  grid-column: 1 / -1;
  max-width: 60ch;
  margin-inline: auto;
  text-align: center;
}

.ayafold-principle-center .thin-rule {
  margin-left: auto;
  margin-right: auto;
}

.lab-soft-break {
  min-height: 22rem;
}

.lab-soft-break .break-inner {
  grid-column: 5 / span 4;
}

.thin-rule {
  width: 6rem;
  height: 1px;
  background: var(--gold-rule);
  margin-top: 1.5rem;
}

.module-alt-hero .compact-text {
  grid-column: 1 / span 3;
  padding-top: 3rem;
}

.module-alt-hero .off-center-block {
  grid-column: 5 / -1;
  min-height: 38rem;
  transform: translateY(1.5rem);
}

.module-alt-hero .support-meta {
  grid-column: 3 / span 2;
}

.module-immersion .immersive-block {
  grid-column: 1 / -1;
  min-height: 34rem;
}

.spacious-break {
  min-height: 30rem;
}

#about-page .module-principle-break {
  padding-top: 0;
  padding-bottom: 0;
}

.closing-links {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem 1rem;
  align-items: center;
  font-family: var(--font-sans);
  text-transform: uppercase;
  letter-spacing: 0.14em;
  font-size: 0.72rem;
  color: color-mix(in srgb, var(--sepia-dark) 62%, var(--muted) 38%);
}

.closing-links a {
  position: relative;
  display: inline-block;
  padding: 0.3rem 0;
  text-transform: uppercase;
  transition: color 180ms ease, letter-spacing 180ms ease;
}

.closing-links a:hover,
.closing-links a:focus-visible {
  color: var(--sepia-dark);
  letter-spacing: 0.17em;
}

.module-contact {
  border-top: 1px solid var(--line);
  padding-top: 3rem;
}

.contact-social {
  grid-column: 8 / span 3;
  align-self: start;
  border-top: none;
  padding-top: 0;
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

.contact-social nav {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.contact-social p {
  margin: 0;
}

.module-contact,
.module-about-closing {
  background:
    linear-gradient(to bottom, rgba(255, 255, 255, 0.18), rgba(255, 255, 255, 0)),
    color-mix(in srgb, var(--sepia-soft) 82%, white 18%);
  border-bottom: 1px solid color-mix(in srgb, var(--sepia-dark) 16%, white 84%);
  padding-inline: 1.25rem;
}

.site-footer {
  padding: 1.25rem var(--gutter);
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 0.72rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  background-color: #466189;

}

.float-quick-nav {
  position: fixed;
  right: 1rem;
  bottom: 1rem;
  z-index: 1200;
  display: flex;
  flex-direction: column;
  gap: 0.45rem;
}

.float-quick-nav a {
  width: 2.55rem;
  height: 2.55rem;
  display: grid;
  place-items: center;
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, 0.4);
  background: rgba(255, 255, 255, 0.23);
  color: rgba(14, 24, 39, 0.92);
  text-decoration: none;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  font-size: 0.58rem;
  line-height: 1;
  backdrop-filter: blur(3px);
  -webkit-backdrop-filter: blur(3px);
  transition: background-color 220ms ease, border-color 220ms ease, color 220ms ease;
}

.float-quick-nav a:hover,
.float-quick-nav a:focus-visible {
  background: rgba(255, 255, 255, 0.35);
  border-color: rgba(255, 255, 255, 0.62);
  color: rgba(8, 16, 28, 0.96);
}

.float-quick-nav a:focus-visible {
  outline: 1px solid rgba(255, 255, 255, 0.72);
  outline-offset: 1px;
}

.float-quick-nav .quick-link-resume {
  font-size: 0.48rem;
  letter-spacing: 0.03em;
}

.float-quick-nav .quick-link-projects {
  font-size: 0.46rem;
  letter-spacing: 0.02em;
}

/* ============================================================
   FOOTER BAND (contact module styled to match site-footer)
   ============================================================ */

.footer-band {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  background-color: #466189;
  color: rgba(255, 255, 255, 0.85);
}

.footer-band::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background-image:
    linear-gradient(rgba(70, 97, 137, 0.84), rgba(70, 97, 137, 0.84)),
    url('./texture-dim-right-blue10-21.png');
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  opacity: 0.74;
  animation: footerTextureBreath 20s ease-in-out infinite;
}

.footer-band > .section {
  position: relative;
  z-index: 1;
  width: min(calc(100% - 2.5rem), var(--max-width));
  margin: 0 auto;
}

@keyframes footerTextureBreath {
  0%,
  100% {
    opacity: 0.74;
  }

  50% {
    opacity: 1;
  }
}

@media (prefers-reduced-motion: reduce) {
  .footer-band::before {
    animation: none;
    opacity: 0.8;
  }
}

.module-contact-footer {
  background: transparent;
  border-top: none;
  padding-top: 3rem;
  padding-bottom: 3rem;
  color: rgba(255, 255, 255, 0.85);
}

.module-contact-footer p {
  color: rgba(255, 255, 255, 0.85);
}

.module-contact-footer .eyebrow {
  color: rgba(255, 255, 255, 0.6);
}

.module-contact-footer a {
  color: rgba(255, 255, 255, 0.95);
  border: none;
  text-decoration: none;
  transition: color 180ms ease;
}

.module-contact-footer a:hover,
.module-contact-footer a:focus-visible {
  color: #fff;
}

.module-contact-footer .support-block,
.module-contact-footer .support-block * {
  color: inherit;
  border: none;
  box-shadow: none;
}

.module-contact-footer .support-block {
  color: rgba(255, 255, 255, 0.85);
  outline: none;
  padding: 0;
}

.module-contact .centered-rail,
.module-about-closing .centered-rail {
  padding: 0.35rem 0 0.25rem;
}

#main-content,
.page-shell,
.section,
[id] {
  scroll-margin-top: 6rem;
}

/* ============================================================
   RESPONSIVE BREAKPOINTS
   1024px → 8-col grid, stacked modules
   720px  → single-column, header unsticks
   640px  → small adjustments (adinkra, fern, research)
   ============================================================ */

@media (max-width: 1024px) {
  .float-quick-nav {
    right: 0.75rem;
    bottom: 0.75rem;
    gap: 0.4rem;
  }

  .float-quick-nav a {
    width: 2.35rem;
    height: 2.35rem;
    font-size: 0.55rem;
  }

  .section {
    grid-template-columns: repeat(8, minmax(0, 1fr));
  }

  body.sweetgrass-page .module-hero-split .text-block,
  body.sweetgrass-page .module-hero-split .dominant-block {
    grid-column: 1 / -1;
  }

  body.sweetgrass-page .module-hero-split .dominant-block {
    min-height: 0;
  }

  .module-hero-split .text-block,
  .module-about-hero .about-hero-rail,
  .module-lab-intro .lab-intro-rail,
  .module-about-preview .portrait-block,
  .module-about-reading .long-rail,
  .module-open-questions .long-rail,
  .module-about-artifacts .reading-rail,
  .module-context .reading-rail,
  .module-manuscript .centered-rail,
  .module-about-closing .centered-rail,
  .module-contact .centered-rail,
  .module-alt-hero .compact-text {
    grid-column: 1 / span 4;
  }

  .module-context .media-gallery {
    grid-column: 5 / -1;
  }

  .module-hero-split .dominant-block,
  .module-about-hero .portrait-tall,
  .module-reading-visual .event-block,
  .module-about-preview .text-block,
  .module-alt-hero .off-center-block,
  .context-media {
    grid-column: 5 / -1;
  }

  .module-detail-sidebar .event-block {
    grid-column: 1 / span 5;
    grid-row: 1;
  }

  .module-detail-sidebar .detail-sidebar {
    grid-column: 6 / -1;
    grid-row: 1;
  }

  .module-hero-split .support-meta,
  .resume-download-block,
  .module-about-hero .support-meta,
  .module-lab-intro .lab-intro-note,
  .projects-intro-note,
  .module-reading-visual .artifact-note,
  .module-image-led .support-block,
  .module-thesis .quote-block,
  .module-about-reading .about-sidebar,
  .support-symbol,
  .module-alt-hero .support-meta {
    grid-column: 1 / span 3;
  }

  .module-thesis .quote-block {
    grid-row: 2;
  }

  .module-thesis #insights-title {
    grid-row: 1;
    grid-column: 1 / -1;
  }

  .module-image-led .wide-block,
  .module-thesis .wide-block,
  .band-top,
  .module-immersion .immersive-block {
    grid-column: 1 / -1;
  }

  .module-image-led .short-text {
    grid-column: 2 / span 4;
    grid-row: auto;
  }

  .module-reading-visual .reading-rail,
  .section-heading-block,
  .lab-filter-group,
  .about-artifact-grid,
  .filter-bar,
  .component-grid-three,
  .component-grid-two,
  .component-figure-wrap,
  .question-list,
  .break-inner,
  .project-nav {
    grid-column: 2 / span 4;
  }

  .band-row,
  .reading-shelf-grid,
  .investigation-list,
  .module-lab-index .lab-entry {
    grid-column: 3 / -1;
  }

  .investigation-entry,
  .lab-entry {
    grid-template-columns: repeat(8, minmax(0, 1fr));
  }

  .investigation-copy,
  .lab-entry-copy {
    grid-column: 1 / span 4;
  }

  .investigation-artifact,
  .lab-entry-artifact,
  .lab-entry-meta {
    grid-column: 5 / -1;
  }

  .ayafold-problem-feature .reading-rail {
    grid-column: 4 / -1;
    margin-right: 0;
  }

  /* Stack text above images on tablet/mobile for these two sections */
  .ayafold-context-stack .reading-rail,
  .ayafold-context-stack .context-media,
  .ayafold-context-stack .color-palette-block {
    grid-column: 1 / -1;
  }

  .ayafold-context-stack .context-media {
    min-height: 0;
  }

  /* Keep umbrella-brand images side by side within the full-width container */
  .ayafold-umbrella-brand-grid {
    flex-wrap: wrap;
  }

  /* Series figures: full-width at tablet */
  .ayafold-series-figure {
    flex: 1 1 240px;
  }
}

@media (max-width: 720px) {
  .section,
  .band-row,
  .about-artifact-grid,
  .reading-shelf-grid,
  .component-grid-three,
  .component-grid-two,
  .component-figure-wrap,
  .investigation-entry,
  .lab-entry,
  .project-nav-shell {
    grid-template-columns: 1fr;
  }

  .section > *,
  .band-row > * {
    grid-column: 1 / -1 !important;
    transform: none !important;
  }

  .inline-media-row {
    grid-template-columns: 1fr;
  }

  .module-thesis #insights-title {
    order: -2;
  }

  .module-thesis .quote-block {
    order: -1;
  }

  .module-detail-sidebar .detail-sidebar {
    order: -1;
  }

  .visual-block {
    min-height: 16rem;
  }

  .module-hero-split .dominant-block,
  .module-alt-hero .off-center-block,
  .module-immersion .immersive-block,
  .module-image-led .wide-block,
  .module-thesis .wide-block,
  .context-media {
    min-height: 20rem;
  }

  .support-block {
    max-width: 26rem;
  }

  .filter-bar {
    gap: 0.5rem;
  }

  .research-row {
    flex-direction: column;
  }

  .research-row__text,
  .research-row__scroller {
    flex: 1 1 auto;
  }

  .ayafold-concept-grid {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 640px) {
  .research-maya-para {
    flex-direction: column;
    align-items: flex-start;
  }

  .research-maya-inline {
    width: min(10rem, 50vw);
  }
}

/* ============================================================
   UTILITY CLASSES
   Reusable helpers extracted from inline styles
   ============================================================ */

/* Image that fills its container completely */
.img-fill {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* ============================================================
   REDUCED MOTION
   Respects prefers-reduced-motion system preference
   ============================================================ */

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }

  .skip-link {
    transition: none;
  }

  [data-parallax] {
    transform: none !important;
    transition: none;
    will-change: auto;
  }
}


/* ============================================================
  PROJECTS STYLES
  Shared project-page rules
   ============================================================ */

/* ══════════════════════════════════════════════════════════════════════════
   A. N. DAVIS — SITE-WIDE STYLES
   ══════════════════════════════════════════════════════════════════════════ */

/* ── BUTTONS ── */
.btn {
  display: inline-block;
  font-family: var(--font-sans);
  font-size: 0.85rem;
  letter-spacing: var(--tracking-wider);
  text-transform: uppercase;
  text-decoration: none;
  padding: 0.8rem 1.6rem;
  border: 1px solid var(--ink);
  color: var(--ink);
  background: transparent;
  transition: background 0.2s, color 0.2s;
}

.btn:hover {
  background: var(--ink);
  color: var(--cream);
}

.btn.filled {
  background: var(--water);
  border-color: var(--water);
  color: var(--cream);
}

.btn.filled:hover {
  background: var(--ink);
  border-color: var(--ink);
}

.btn-group { display: flex; gap: 1rem; }

/* ── FOOTER ── */
footer {
  border-top: 1px solid var(--rule);
  padding: 1.25rem 1.5rem;
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 100%;
  opacity: 0;
  animation: fadeUp 0.6s 0.7s ease forwards;
}

footer span {
  font-size: var(--text-sm);
  letter-spacing: var(--tracking-wider);
  text-transform: uppercase;
  color: var(--muted);
}

/* ── BACK TO TOP ── */
.back-to-top {
  position: fixed;
  bottom: 2rem;
  right: 2rem;
  width: 44px;
  height: 44px;
  border: 1px solid var(--rule);
  border-radius: 50%;
  background: var(--cream);
  color: var(--ink);
  font-size: 1.1rem;
  opacity: 0;
  visibility: hidden;
  transform: translateY(10px);
  transition: opacity 0.3s, visibility 0.3s, transform 0.3s, border-color 0.2s, background 0.2s;
  z-index: 100;
}

.back-to-top.visible {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

.back-to-top:hover {
  border-color: var(--water);
  background: var(--water);
  color: var(--cream);
}

/* ── ANIMATIONS ── */
@keyframes fadeUp {
  from { opacity: 0; transform: translateY(18px); }
  to   { opacity: 1; transform: translateY(0); }
}

@keyframes fadeIn {
  from { opacity: 0; }
  to   { opacity: 1; }
}

@keyframes pulse {
  0%, 100% { opacity: 1; }
  50%       { opacity: 0.35; }
}

@keyframes underlineDraw {
  from { width: 0; opacity: 1; }
  to   { width: 100%; opacity: 1; }
}

@keyframes underlineFade {
  from { opacity: 1; }
  to   { opacity: 0; }
}

@keyframes drawH {
  from { width: 0; }
  to   { width: 100%; }
}

@keyframes drawV {
  from { height: 0; }
  to   { height: 100%; }
}

/* ══════════════════════════════════════════════════════════════════════════
   PORTFOLIO HERO PAGE
   ══════════════════════════════════════════════════════════════════════════ */

/* ── 12-COL PAGE CONTAINER ── */
.container {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
}

.container > * {
  grid-column: 1 / -1;
}

@media (min-width: 1400px) {
  .container > * {
    grid-column: 4 / 10;
    border-left: 1px solid var(--rule);
    border-right: 1px solid var(--rule);
  }
  .container > nav,
  .container > footer {
    grid-column: 1 / -1;
    border-left: none;
    border-right: none;
  }
}

/* ── WORK PREVIEW SECTION ── */
.work-preview {
  padding: 5rem 1.5rem;
  border-top: 1px solid var(--rule);
  opacity: 0;
  animation: fadeUp 0.7s 0.5s ease forwards;
}

.work-preview .eyebrow {
  font-size: var(--text-sm);
  letter-spacing: var(--tracking-widest);
  text-transform: uppercase;
  color: var(--water);
  margin-bottom: 0.75rem;
}

.work-preview .headline {
  font-family: var(--font-serif);
  font-size: clamp(1.75rem, 3vw, 2.5rem);
  font-weight: 300;
  line-height: var(--leading-tight);
  letter-spacing: var(--tracking-tight);
  margin-bottom: 1rem;
}


.work-preview .sub {
  font-size: var(--text-base);
  line-height: var(--leading-relaxed);
  color: var(--muted);
  max-width: 38rem;
  margin-bottom: 3rem;
}

.preview-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.5rem;
}

.preview-card {
  padding: 1.5rem;
  border: 1px solid var(--rule);
  border-radius: 2px;
  transition: border-color 0.2s, background 0.2s;
  text-decoration: none;
  color: inherit;
  display: block;
}

.preview-card:hover {
  border-color: var(--water);
  background: rgba(43, 89, 118, 0.03);
}

.preview-num {
  font-size: var(--text-xs);
  letter-spacing: var(--tracking-widest);
  text-transform: uppercase;
  color: var(--water);
  margin-bottom: 0.75rem;
}

.preview-title {
  font-family: var(--font-serif);
  font-size: var(--text-xl);
  font-weight: 300;
  line-height: var(--leading-tight);
  margin-bottom: 0.5rem;
}

.preview-desc {
  font-size: var(--text-base);
  line-height: var(--leading-normal);
  color: var(--muted);
}

@media (max-width: 1024px) {
  .preview-grid {
    grid-template-columns: 1fr 1fr;
  }
}

@media (max-width: 768px) {
  .preview-grid {
    grid-template-columns: 1fr;
  }
  .work-preview {
    padding: 3rem 1.5rem;
  }
}

/* ── MAIN GRID ── */
.wrapper {
  display: grid;
  grid-template-columns: 1fr 1fr;
  min-height: calc(100vh - 68px);
}

/* ── LEFT PANEL ── */
.left {
  padding: 5rem 1.5rem 4rem;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  border-right: 1px solid var(--rule);
}

/* (Duplicate .eyebrow rule removed — consolidated into the canonical rule
   near the top of this stylesheet alongside .page-label and .site-nav.) */

.headline {
  font-family: var(--font-serif);
  font-size: clamp(3rem, 5.5vw, 5rem);
  font-weight: 700;
  line-height: 1.0;
  letter-spacing: var(--tracking-tight);
  margin-top: 1.2rem;
  opacity: 0;
  animation: fadeUp 0.7s 0.25s ease forwards;
}

.headline em {
  font-style: italic;
  font-weight: 300;
  color: var(--water);
  position: relative;
  display: inline-block;
}

/* Underline draws in then fades */
.headline em::after {
  content: '';
  position: absolute;
  left: 0;
  bottom: -4px;
  height: 2px;
  width: 0;
  background: var(--water);
  animation: underlineDraw 0.5s ease forwards 0.95s,
             underlineFade 0.6s ease forwards 1.8s;
}

.sub {
  font-size: var(--text-base);
  line-height: var(--leading-relaxed);
  color: var(--muted);
  max-width: 38ch;
  margin-top: 2.5rem;
  opacity: 0;
  animation: fadeUp 0.7s 0.4s ease forwards;
}

.disciplines {
  margin-top: auto;
  padding-top: 4rem;
  opacity: 0;
  animation: fadeUp 0.7s 2.2s ease forwards;
}

.disc-label {
  font-size: var(--text-sm);
  letter-spacing: var(--tracking-widest);
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: 1rem;
}

.disc-list {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}

.disc-tag {
  font-size: var(--text-sm);
  letter-spacing: var(--tracking-wide);
  padding: 0.5rem 1rem;
  border-radius: 2px;
  color: var(--ink);
  position: relative;
  border: none;
  transition: background 0.2s;
  flex: 1 1 auto;
  text-align: center;
}

.disc-tag:hover {
  background: rgba(200, 80, 42, 0.05);
}

/* Draw-in border — four sides via pseudo + child spans */
.disc-tag::before,
.disc-tag::after,
.disc-tag .side-l,
.disc-tag .side-r {
  content: '';
  position: absolute;
  background: var(--rule);
  transition: background 0.2s;
}
.disc-tag::before {
  height: 1px; top: 0; left: 0;
  width: 0;
  animation: drawH 0.3s ease forwards;
}
.disc-tag::after {
  height: 1px; bottom: 0; right: 0;
  width: 0;
  animation: drawH 0.3s ease forwards;
}
.disc-tag .side-l {
  width: 1px; left: 0; bottom: 0;
  height: 0;
  animation: drawV 0.2s ease forwards;
}
.disc-tag .side-r {
  width: 1px; right: 0; top: 0;
  height: 0;
  animation: drawV 0.2s ease forwards;
}

.disc-tag:hover::before,
.disc-tag:hover::after,
.disc-tag:hover .side-l,
.disc-tag:hover .side-r {
  background: var(--water);
}

.disc-tag:nth-child(1)::before, .disc-tag:nth-child(1)::after { animation-delay: 2.4s; }
.disc-tag:nth-child(1) .side-l, .disc-tag:nth-child(1) .side-r { animation-delay: 2.7s; }
.disc-tag:nth-child(2)::before, .disc-tag:nth-child(2)::after  { animation-delay: 2.65s; }
.disc-tag:nth-child(2) .side-l, .disc-tag:nth-child(2) .side-r { animation-delay: 2.95s; }
.disc-tag:nth-child(3)::before, .disc-tag:nth-child(3)::after  { animation-delay: 2.9s; }
.disc-tag:nth-child(3) .side-l, .disc-tag:nth-child(3) .side-r { animation-delay: 3.2s; }
.disc-tag:nth-child(4)::before, .disc-tag:nth-child(4)::after  { animation-delay: 3.15s; }
.disc-tag:nth-child(4) .side-l, .disc-tag:nth-child(4) .side-r { animation-delay: 3.45s; }
.disc-tag:nth-child(5)::before, .disc-tag:nth-child(5)::after  { animation-delay: 3.4s; }
.disc-tag:nth-child(5) .side-l, .disc-tag:nth-child(5) .side-r { animation-delay: 3.7s; }
.disc-tag:nth-child(6)::before, .disc-tag:nth-child(6)::after  { animation-delay: 3.65s; }
.disc-tag:nth-child(6) .side-l, .disc-tag:nth-child(6) .side-r { animation-delay: 3.95s; }

/* ── RIGHT PANEL ── */
.right {
  padding: 5rem 1.5rem 4rem;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  opacity: 0;
  animation: fadeUp 0.7s 0.35s ease forwards;
}

.process-block {
  margin-top: 1rem;
}

.process-label {
  font-size: var(--text-sm);
  letter-spacing: var(--tracking-widest);
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: 2rem;
}

.process-steps {
  display: flex;
  flex-direction: column;
  gap: 0;
}

.step {
  display: grid;
  grid-template-columns: 2rem 1fr;
  gap: 1.2rem;
  padding: 1.5rem 0;
  border-bottom: 1px solid var(--rule);
  position: relative;
}

.step:first-child {
  border-top: 1px solid var(--rule);
}

.step-num {
  font-size: var(--text-sm);
  color: var(--water);
  letter-spacing: var(--tracking-wide);
  padding-top: 0.15rem;
}

.step-content p {
  font-size: var(--text-base);
  line-height: 1.7;
  color: var(--muted);
}

/* ── BOTTOM STRIP ── */
.availability {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  margin-top: 4rem;
}

.dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #5A9E6F;
  animation: pulse 2s ease-in-out infinite;
}

.avail-text {
  font-size: var(--text-sm);
  letter-spacing: var(--tracking-wider);
  text-transform: uppercase;
  color: var(--muted);
}

.cta-row {
  display: flex;
  gap: 1rem;
  margin-top: 2rem;
}

/* ══════════════════════════════════════════════════════════════════════════
   ABOUT PAGE
   ══════════════════════════════════════════════════════════════════════════ */

/* HERO SPLIT */
.hero-split {
  display: grid;
  grid-template-columns: 1fr 1fr;
  min-height: 85vh;
}

/* PHOTO SIDE */
.photo-side {
  background: #2B2420;
  position: relative;
  overflow: hidden;
  border-right: 1px solid var(--rule);
  opacity: 0;
  animation: fadeIn 0.8s 0.1s ease forwards;
}
.photo-side svg { width: 100%; height: 100%; }
.photo-label {
  position: absolute;
  bottom: 1.5rem;
  left: 1.5rem;
  font-size: var(--text-xs);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: rgba(245,240,232,0.3);
}

/* BIO SIDE */
.bio-side {
  padding: 5rem 3.5rem;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  opacity: 0;
  animation: fadeUp 0.7s 0.2s ease forwards;
}
.bio-eyebrow {
  font-size: var(--text-sm);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--water);
  margin-bottom: 1.5rem;
}
.bio-headline {
  font-family: var(--font-serif);
  font-size: clamp(2rem, 3.5vw, 3rem);
  font-weight: 700;
  letter-spacing: var(--tracking-tight);
  line-height: 1.1;
}
.bio-headline em { font-style: italic; font-weight: 300; color: var(--water); }
.bio-body {
  margin-top: 2.5rem;
  font-size: var(--text-base);
  line-height: var(--leading-loose);
  color: var(--muted);
  max-width: 48ch;
}
.bio-body p + p { margin-top: 1.25rem; }

/* DETAILS GRID */
.details-grid {
  margin-top: 3rem;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 2rem;
}
.detail-label {
  font-size: var(--text-xs);
  letter-spacing: var(--tracking-widest);
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: 0.4rem;
}
.detail-value {
  font-family: var(--font-serif);
  font-size: var(--text-base);
  font-weight: 300;
  font-style: italic;
}

/* SKILLS SECTION */
.skills-section {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  opacity: 0;
  animation: fadeUp 0.6s 0.3s ease forwards;
}
.skill-col {
  padding: 3.5rem 2.5rem;
  border-right: 1px solid var(--rule);
}
.skill-col:last-child { border-right: none; }
.skill-heading {
  font-size: var(--text-xs);
  letter-spacing: var(--tracking-widest);
  text-transform: uppercase;
  color: var(--water);
  margin-bottom: 1.5rem;
}
.skill-list { list-style: none; }
.skill-list li {
  font-family: var(--font-serif);
  font-size: var(--text-md);
  font-weight: 300;
  font-style: italic;
  line-height: 2.2;
  border-bottom: 1px solid var(--rule);
  color: var(--ink);
}
.skill-list li:last-child { border-bottom: none; }

/* PHILOSOPHY SECTION */
.philosophy {
  display: grid;
  grid-template-columns: 1fr 2fr;
  padding: 5rem 3.5rem;
  gap: 4rem;
  opacity: 0;
  animation: fadeUp 0.6s 0.35s ease forwards;
}
.phil-label {
  font-size: var(--text-xs);
  letter-spacing: var(--tracking-widest);
  text-transform: uppercase;
  color: var(--muted);
  padding-top: 0.3rem;
}
.phil-content p {
  font-size: var(--text-base);
  line-height: var(--leading-loose);
  color: var(--muted);
  margin-bottom: 1.25rem;
}

/* CURRENTLY SECTION */
.currently {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  opacity: 0;
  animation: fadeUp 0.6s 0.4s ease forwards;
}
.current-cell {
  padding: 3rem 2.5rem;
  border-right: 1px solid var(--rule);
}
.current-cell:last-child { border-right: none; }
.current-label {
  font-size: var(--text-xs);
  letter-spacing: var(--tracking-widest);
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: 1rem;
}
.current-title {
  font-family: var(--font-serif);
  font-size: var(--text-lg);
  font-weight: 300;
  font-style: italic;
  line-height: 1.3;
  margin-bottom: 0.5rem;
}
.current-sub { font-size: 0.85rem; color: var(--muted); line-height: 1.6; }

/* RESUME CTA */
.resume-cta {
  padding: 4rem 3.5rem;
  display: flex;
  justify-content: space-between;
  align-items: center;
  opacity: 0;
  animation: fadeUp 0.6s 0.45s ease forwards;
}
.resume-text p {
  font-size: 0.85rem;
  color: var(--muted);
  margin-top: 0.75rem;
  letter-spacing: 0.04em;
}

/* ══════════════════════════════════════════════════════════════════════════
   CONTACT PAGE
   ══════════════════════════════════════════════════════════════════════════ */

body.contact-page {
  display: flex;
  flex-direction: column;
}

/* MAIN LAYOUT */
.contact-layout {
  display: grid;
  grid-template-columns: 1fr 1fr;
  flex: 1;
}

/* LEFT — HEADLINE + LINKS */
.contact-left {
  padding: 5rem 3.5rem;
  border-right: 1px solid var(--rule);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  opacity: 0;
  animation: fadeUp 0.6s 0.1s ease forwards;
}
.contact-eyebrow {
  font-size: var(--text-sm);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--water);
  margin-bottom: 1.5rem;
}
.contact-headline {
  font-family: var(--font-serif);
  font-size: clamp(2.5rem, 5vw, 4.5rem);
  font-weight: 700;
  letter-spacing: -0.025em;
  line-height: 1;
}
.contact-headline em { font-style: italic; font-weight: 300; color: var(--water); }

.contact-sub {
  font-size: var(--text-base);
  line-height: 1.8;
  color: var(--muted);
  margin-top: 2.5rem;
  max-width: 40ch;
}

/* DIRECT LINKS */
.direct-links { margin-top: auto; padding-top: 4rem; }
.link-label {
  font-size: var(--text-xs);
  letter-spacing: var(--tracking-widest);
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: 1.25rem;
}
.contact-link-row {
  display: flex;
  flex-direction: column;
  gap: 0;
}
.contact-link {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 1.1rem 0;
  border-bottom: 1px solid var(--rule);
  text-decoration: none;
  color: var(--ink);
  transition: padding-left 0.25s;
}
.contact-link:first-child { border-top: 1px solid var(--rule); }
.contact-link:hover { padding-left: 0.5rem; }
.contact-link:hover .link-name { color: var(--water); }
.contact-link--static:hover {
  padding-left: 0;
}
.contact-link--static .link-handle {
  user-select: all;
}
.link-name {
  font-family: var(--font-serif);
  font-size: var(--text-lg);
  font-weight: 300;
  font-style: italic;
  transition: color 0.2s;
}
.link-handle {
  font-size: var(--text-sm);
  letter-spacing: var(--tracking-wide);
  color: var(--muted);
}
.link-arrow { font-size: 0.8rem; color: var(--muted); transition: transform 0.2s, color 0.2s; }
.contact-link:hover .link-arrow { transform: translate(3px,-3px); color: var(--water); }

/* RIGHT — FORM */
.contact-right {
  padding: 5rem 3.5rem;
  display: flex;
  flex-direction: column;
  opacity: 0;
  animation: fadeUp 0.6s 0.2s ease forwards;
}
.form-label-top {
  font-size: var(--text-xs);
  letter-spacing: var(--tracking-widest);
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: 2.5rem;
}

form { display: flex; flex-direction: column; gap: 0; flex: 1; }

.field {
  display: flex;
  flex-direction: column;
  border-bottom: 1px solid var(--rule);
  padding: 1.5rem 0;
  position: relative;
}
.field:first-of-type { border-top: 1px solid var(--rule); }

.field label {
  font-size: var(--text-xs);
  letter-spacing: var(--tracking-widest);
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: 0.6rem;
}

.field input, .field select, .field textarea {
  font-family: var(--font-sans);
  font-size: var(--text-base);
  background: transparent;
  border: none;
  outline: none;
  color: var(--ink);
  width: 100%;
  appearance: none;
  -webkit-appearance: none;
}
.field textarea { resize: none; height: 120px; line-height: 1.7; }

.field input::placeholder,
.field textarea::placeholder {
  color: var(--rule);
}

/* Focus line */
.field::after {
  content: '';
  position: absolute;
  bottom: -1px;
  left: 0;
  height: 1px;
  width: 0;
  background: var(--water);
  transition: width 0.3s ease;
}
.field:focus-within::after { width: 100%; }
.field:focus-within label { color: var(--water); }

/* REASON SELECT */
.select-wrapper { position: relative; }
.select-wrapper::after {
  content: '↓';
  position: absolute;
  right: 0;
  top: 50%;
  transform: translateY(-50%);
  color: var(--muted);
  font-size: var(--text-sm);
}

/* SUBMIT */
.submit-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-top: 2rem;
  margin-top: auto;
}
.submit-note {
  font-size: var(--text-sm);
  color: var(--muted);
  letter-spacing: 0.04em;
}
.submit-btn {
  font-family: var(--font-sans);
  font-size: var(--text-sm);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  padding: 0.9rem 2rem;
  border: 1px solid var(--ink);
  background: transparent;
  color: var(--ink);
  transition: background 0.2s, color 0.2s;
}
.submit-btn:hover { background: var(--water); border-color: var(--water); color: var(--cream); }

/* SUCCESS STATE */
.success-message {
  display: none;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  flex: 1;
  gap: 1rem;
}
.success-message.visible { display: flex; }
.success-icon {
  font-size: var(--text-3xl);
  color: var(--water);
  font-family: var(--font-serif);
  font-style: italic;
}
.success-message p { font-size: var(--text-base); color: var(--muted); line-height: 1.7; }

/* ══════════════════════════════════════════════════════════════════════════
   LAB PAGE
   ══════════════════════════════════════════════════════════════════════════ */

/* PAGE HEADER */
.page-header {
  display: grid;
  grid-template-columns: 1fr 1fr;
  padding: 4rem 3.5rem 3rem;
  border-bottom: 1px solid var(--rule);
  opacity: 0;
  animation: fadeUp 0.6s 0.1s ease forwards;
}
.header-eyebrow {
  font-size: var(--text-sm);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--water);
  margin-bottom: 1rem;
}
.header-title {
  font-family: var(--font-serif);
  font-size: clamp(2.5rem, 4.5vw, 4rem);
  font-weight: 700;
  letter-spacing: -0.025em;
  line-height: 1;
}
.header-title em { font-style: italic; font-weight: 300; color: var(--water); }
.header-right {
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding-left: 3rem;
}
.header-desc {
  font-size: var(--text-base);
  line-height: 1.8;
  color: var(--muted);
  max-width: 44ch;
}

/* LEGEND */
.legend {
  display: flex;
  gap: 2rem;
  margin-top: 2rem;
}
.legend-item {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}
.legend-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
}
.legend-dot.wip  { background: var(--wip); }
.legend-dot.deep { background: var(--deep); }
.legend-label {
  font-size: var(--text-sm);
  letter-spacing: var(--tracking-wider);
  text-transform: uppercase;
  color: var(--muted);
}

/* FILTER BAR */
.filter-bar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 1rem 3.5rem;
  border-bottom: 1px solid var(--rule);
  opacity: 0;
  animation: fadeUp 0.6s 0.2s ease forwards;
}
.filter-btns { display: flex; gap: 0.5rem; }
.filter-btn {
  font-family: var(--font-sans);
  font-size: var(--text-sm);
  letter-spacing: var(--tracking-wider);
  text-transform: uppercase;
  padding: 0.35rem 0.8rem;
  border: 1px solid var(--rule);
  background: transparent;
  color: var(--muted);
  transition: all 0.2s;
  border-radius: 2px;
}
.filter-btn:hover { border-color: var(--ink); color: var(--ink); }
.filter-btn.active { border-color: var(--water); color: var(--water); background: rgba(43,89,118,0.05); }
.entry-count { font-size: var(--text-sm); letter-spacing: var(--tracking-wider); text-transform: uppercase; color: var(--muted); }

/* ENTRIES LIST */
.entries { border-bottom: 1px solid var(--rule); }

.entry {
  display: grid;
  grid-template-columns: 280px 1fr 200px;
  border-bottom: 1px solid var(--rule);
  transition: background 0.2s;
  text-decoration: none;
  color: var(--ink);
  opacity: 0;
  animation: fadeUp 0.5s ease forwards;
}
.entry:hover { background: rgba(43,89,118,0.03); }
.entry:last-child { border-bottom: none; }

.entry:nth-child(1) { animation-delay: 0.25s; }
.entry:nth-child(2) { animation-delay: 0.33s; }
.entry:nth-child(3) { animation-delay: 0.41s; }
.entry:nth-child(4) { animation-delay: 0.49s; }
.entry:nth-child(5) { animation-delay: 0.57s; }
.entry:nth-child(6) { animation-delay: 0.65s; }

.entry.hidden { display: none; }

/* ENTRY — LEFT: thumbnail + status */
.entry-thumb {
  border-right: 1px solid var(--rule);
  position: relative;
  overflow: hidden;
  aspect-ratio: 4/3;
}
.entry-thumb svg { width: 100%; height: 100%; display: block; }

.status-badge {
  position: absolute;
  top: 0.75rem;
  left: 0.75rem;
  font-size: var(--text-xs);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  padding: 0.2rem 0.5rem;
  border-radius: 2px;
  display: flex;
  align-items: center;
  gap: 0.35rem;
}
.status-badge .badge-dot {
  width: 5px;
  height: 5px;
  border-radius: 50%;
}
.status-badge.wip  { background: rgba(200,160,42,0.15); color: var(--wip); }
.status-badge.wip .badge-dot { background: var(--wip); animation: pulse 2s ease-in-out infinite; }
.status-badge.deep { background: rgba(74,122,90,0.15); color: var(--deep); }
.status-badge.deep .badge-dot { background: var(--deep); }

/* ENTRY — MIDDLE: content */
.entry-content {
  padding: 2rem 2.5rem;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  border-right: 1px solid var(--rule);
}
.entry-discipline {
  font-size: var(--text-sm);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--water);
  margin-bottom: 0.6rem;
}
.entry-title {
  font-family: var(--font-serif);
  font-size: var(--text-2xl);
  font-weight: 300;
  line-height: var(--leading-tight);
  margin-bottom: 0.75rem;
}
.entry-title em { font-style: italic; }
.entry-desc {
  font-size: var(--text-base);
  line-height: var(--leading-relaxed);
  color: var(--muted);
  max-width: 56ch;
}

/* ANNOTATION — like a sticky note */
.entry-annotation {
  margin-top: 1.25rem;
  padding: 0.75rem 1rem;
  border-left: 2px solid var(--rule);
  background: rgba(43,89,118,0.04);
}
.annotation-label {
  font-size: var(--text-xs);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--water);
  margin-bottom: 0.3rem;
}
.annotation-text {
  font-size: 0.9rem;
  line-height: 1.65;
  color: var(--muted);
  font-style: italic;
}

/* ENTRY — RIGHT: meta */
.entry-meta {
  padding: 2rem 1.75rem;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}
.meta-group { margin-bottom: 1.5rem; }
.meta-label {
  font-size: var(--text-xs);
  letter-spacing: var(--tracking-widest);
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: 0.3rem;
}
.meta-value {
  font-family: var(--font-serif);
  font-size: var(--text-base);
  font-weight: 300;
  font-style: italic;
}

/* PROGRESS BAR — for WIP entries */
.progress-wrap { margin-top: auto; }
.progress-label {
  font-size: var(--text-xs);
  letter-spacing: var(--tracking-widest);
  text-transform: uppercase;
  color: var(--muted);
  display: flex;
  justify-content: space-between;
  margin-bottom: 0.4rem;
}
.progress-track {
  width: 100%;
  height: 2px;
  background: var(--rule);
  position: relative;
}
.progress-fill {
  height: 100%;
  background: var(--wip);
  transition: width 1s ease;
}

/* READ TIME — for deep dive entries */
.read-time {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin-top: auto;
}
.read-time-icon { font-size: var(--text-sm); color: var(--deep); }
.read-time-text {
  font-size: var(--text-sm);
  letter-spacing: var(--tracking-wide);
  color: var(--muted);
}

/* ARROW */
.entry-arrow {
  font-size: var(--text-sm);
  color: var(--muted);
  transition: transform 0.2s, color 0.2s;
  margin-top: auto;
}
.entry:hover .entry-arrow { transform: translateX(4px); color: var(--water); }

/* BOTTOM NOTE */
.bottom-note {
  padding: 3rem 3.5rem;
  display: grid;
  grid-template-columns: 1fr 2fr;
  gap: 3rem;
  border-bottom: 1px solid var(--rule);
  opacity: 0;
  animation: fadeUp 0.6s 0.75s ease forwards;
}
.note-label {
  font-size: var(--text-sm);
  letter-spacing: var(--tracking-widest);
  text-transform: uppercase;
  color: var(--muted);
  padding-top: 0.2rem;
}
.note-text {
  font-family: var(--font-serif);
  font-size: var(--text-lg);
  font-weight: 300;
  font-style: italic;
  line-height: var(--leading-normal);
  color: var(--ink);
}
.note-text em { color: var(--water); font-style: normal; }

/* ══════════════════════════════════════════════════════════════════════════
   PROJECT PAGE
   ══════════════════════════════════════════════════════════════════════════ */

/* STICKY NAV */
nav.sticky {
  position: sticky;
  top: 0;
  background: var(--cream);
  z-index: 100;
}

/* BACK LINK */
.back-link {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  text-decoration: none;
  color: var(--muted);
  font-size: var(--text-sm);
  letter-spacing: var(--tracking-wider);
  text-transform: uppercase;
  padding: 1.25rem 3.5rem;
  border-bottom: 1px solid var(--rule);
  transition: color 0.2s;
  display: block;
  opacity: 0;
  animation: fadeUp 0.5s ease forwards;
}
body.project-template .back-link:hover { color: var(--ink); }

/* HERO */
body.project-template .hero {
  height: clamp(24rem, 75vh, 52rem);
  background: var(--dark);
  position: relative;
  overflow: hidden;
  opacity: 0;
  animation: fadeUp 0.7s 0.1s ease forwards;
}
body.project-template .hero-bg {
  position: absolute;
  inset: 0;
  background: #2B2420;
}
body.project-template .hero-svg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}
body.project-template .hero-content {
  position: absolute;
  bottom: 3.5rem;
  left: 3.5rem;
  right: 3.5rem;
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  z-index: 10;
}
body.project-template .hero-title {
  font-family: var(--font-serif);
  font-size: clamp(3rem, 7vw, 6rem);
  font-weight: 700;
  line-height: 1;
  letter-spacing: -0.03em;
  color: var(--cream);
}
body.project-template .hero-title em { font-style: italic; font-weight: 300; color: rgba(200,80,42,0.9); }
body.project-template .hero-meta { text-align: left; }
body.project-template .hero-meta p {
  font-size: var(--text-sm);
  letter-spacing: var(--tracking-wider);
  text-transform: uppercase;
  color: rgba(245,240,232,0.5);
  line-height: 2;
}
body.project-template .hero-meta span { color: rgba(245,240,232,0.85); }

/* PROJECT INFO STRIP */
body.project-template .info-strip {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  opacity: 0;
  animation: fadeUp 0.6s 0.25s ease forwards;
}
body.project-template .info-cell {
  padding: 1.75rem 2rem;
  border-right: 1px solid var(--rule);
}
body.project-template .info-cell:last-child { border-right: none; }
body.project-template .info-label {
  font-size: var(--text-xs);
  letter-spacing: var(--tracking-widest);
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: 0.5rem;
}
body.project-template .info-value {
  font-family: var(--font-serif);
  font-size: var(--text-md);
  font-weight: 300;
  font-style: italic;
}

/* CONTENT SECTIONS */
.section {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: var(--gutter);
  padding: 5rem 3.5rem;
  opacity: 0;
  animation: fadeUp 0.6s ease forwards;
}

body.project-template .section-header {
  display: grid;
  grid-template-columns: 1fr 2fr;
  gap: 3rem;
  margin-bottom: 3rem;
}
body.project-template .section-label {
  font-size: var(--text-xs);
  letter-spacing: var(--tracking-widest);
  text-transform: uppercase;
  color: var(--water);
  padding-top: 0.25rem;
}
body.project-template .section-title {
  font-family: var(--font-serif);
  font-size: var(--text-3xl);
  font-weight: 300;
  font-style: italic;
  line-height: var(--leading-tight);
}

body.project-template .body-text {
  display: grid;
  grid-template-columns: 1fr 2fr;
  gap: 3rem;
}
body.project-template .body-text p {
  font-size: var(--text-base);
  line-height: var(--leading-loose);
  color: var(--muted);
  grid-column: 2;
}

body.project-template .section--stacked-copy .section-header {
  display: block;
  margin-left: calc((100% - 3rem) / 3 + 3rem);
}

body.project-template .section--stacked-copy .section-label {
  display: block;
  margin-bottom: 0.75rem;
  padding-top: 0;
  color: var(--ink);
}

body.project-template .section--stacked-copy .section-title {
  color: var(--ink);
}

body.project-template .section--stacked-copy .body-text {
  display: block;
}

body.project-template .section--stacked-copy .body-text p {
  grid-column: auto;
  max-width: 42rem;
  margin-left: calc((100% - 3rem) / 3 + 3rem);
  color: var(--ink);
}

body.project-template .section--persona .section-header {
  display: block;
  margin-left: 0;
  margin-bottom: 2rem;
}

body.project-template .section--persona .section-label {
  display: block;
  margin-bottom: 0.75rem;
  padding-top: 0;
}

body.project-template .persona-layout {
  display: flex;
  gap: 3rem;
  align-items: start;
}

body.project-template .persona-media {
  flex: 0 0 calc((100% - 3rem) / 3);
}

body.project-template .persona-image {
  display: block;
  width: 100%;
  height: auto;
}

body.project-template .persona-content {
  flex: 1 1 0;
  align-self: flex-start;
}

body.project-template .persona-copy {
  max-width: 42rem;
}

body.project-template .persona-copy p {
  font-size: var(--text-base);
  line-height: var(--leading-loose);
  color: var(--muted);
  margin-bottom: 1.5rem;
}

body.project-template .persona-copy p:last-child {
  margin-bottom: 0;
}

body.project-template .section--overview .overview-media {
  grid-column: 2;
  align-self: start;
  width: 100%;
  max-width: 42rem;
  aspect-ratio: 16 / 10;
  overflow: hidden;
  margin-bottom: 0.5rem;
}

body.project-template .section--overview .overview-media img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

body.project-template .section--overview .body-text {
  align-items: start;
}

body.project-template .section--overview .body-text p {
  grid-column: 2;
  margin-top: 0;
}

body.project-template .section--overview .body-text img {
  grid-column: 1;
  display: block;
  width: 100%;
  max-width: 100%;
  height: auto;
  object-fit: contain;
  align-self: start;
}

.concept-inline-image {
  display: block;
  width: 100%;
  max-width: 18rem;
  height: auto;
  margin: 1rem 0 0;
  object-fit: contain;
}

.concept-placeholder-grid {
  grid-column: 2;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1.25rem;
  max-width: 42rem;
  margin: 0 0 1.25rem;
}

.concept-placeholder {
  aspect-ratio: 1 / 1;
  border: 1px solid var(--rule);
  background: rgba(200, 212, 218, 0.18);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1rem;
}

.concept-placeholder span {
  font-family: var(--font-sans);
  font-size: var(--text-xs);
  letter-spacing: var(--tracking-widest);
  text-transform: uppercase;
  color: var(--muted);
  text-align: center;
}

.concept-placeholder > img,
.concept-placeholder span img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.asset-placeholder-grid {
  grid-column: 2;
  display: grid;
  gap: 1.25rem;
  max-width: 42rem;
  margin: 0 0 1.5rem;
}

.asset-placeholder-grid--single {
  grid-template-columns: 1fr;
}

.asset-placeholder-grid--two {
  grid-template-columns: 1fr 1fr;
}

.asset-placeholder-grid--three {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.asset-placeholder-grid--four {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.asset-placeholder {
  aspect-ratio: 1 / 1;
  border: 1px solid var(--rule);
  background: rgba(200, 212, 218, 0.18);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1rem;
}

.asset-placeholder--wide {
  aspect-ratio: 16 / 10;
}

.asset-placeholder-grid--two .asset-placeholder {
  aspect-ratio: 4 / 3;
}

.asset-placeholder span {
  font-family: var(--font-sans);
  font-size: var(--text-xs);
  letter-spacing: var(--tracking-widest);
  text-transform: uppercase;
  color: var(--muted);
  text-align: center;
}

.asset-placeholder > img,
.asset-placeholder span img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.logo-parts-section {
  grid-column: 2;
  max-width: 42rem;
  margin: 0 0 1.75rem;
}

.logo-parts-title {
  font-family: var(--font-serif);
  font-size: var(--text-xl);
  font-weight: 300;
  font-style: italic;
  line-height: var(--leading-tight);
  margin-bottom: 0.6rem;
}

.logo-parts-copy {
  font-size: var(--text-base);
  line-height: var(--leading-loose);
  color: var(--muted);
  margin-bottom: 1rem;
}

/* FULL IMAGE */
body.project-template .full-image {
  width: 100%;
  height: 60vh;
  background: #1C2B24;
  position: relative;
  overflow: hidden;
  opacity: 0;
  animation: fadeUp 0.6s ease forwards;
}
body.project-template .full-image svg { width: 100%; height: 100%; }
body.project-template .full-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.print-ad-image {
  width: 34%;
  max-width: 240px;
  height: auto;
  float: left;
  display: block;
  margin: 0.25rem 1.25rem 0.85rem 0;
  object-fit: contain;
}

.inline-image {
  float: left;
  width: auto;
  height: 200px;
  display: block;
  margin: 0.25rem 1.25rem 0.85rem 0;
  object-fit: contain;
}

/* IMAGE GRID */
body.project-template .image-grid {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 1px;
  background: var(--rule);
  opacity: 0;
  animation: fadeUp 0.6s ease forwards;
}
body.project-template .image-cell {
  background: var(--cream);
  aspect-ratio: 4/3;
  position: relative;
  overflow: hidden;
}
body.project-template .image-cell:first-child { grid-column: span 2; aspect-ratio: auto; }
body.project-template .image-cell img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.logo-pieces-gallery {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 1.5rem;
  padding: 2.5rem 3.5rem 0;
  background: var(--cream);
  opacity: 0;
  animation: fadeUp 0.6s ease forwards;
}

.logo-piece {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.85rem;
}

.logo-piece img {
  width: 100%;
  aspect-ratio: 1 / 1;
  object-fit: contain;
  display: block;
}

.logo-piece figcaption {
  font-size: var(--text-xs);
  letter-spacing: var(--tracking-widest);
  text-transform: uppercase;
  color: var(--muted);
  text-align: center;
}

.color-palette {
  grid-column: 2;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: 1.25rem;
  width: 100%;
  margin: 0.25rem 0 1.25rem;
}

.colors-header-main {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
}

.color-palette__item {
  display: flex;
  flex-direction: column;
  gap: 0.85rem;
}

.color-palette__swatch {
  display: block;
  width: 100%;
  aspect-ratio: 1 / 1;
  border: 1px solid var(--rule);
  object-fit: cover;
}

.color-palette__label {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
}

.color-palette__name {
  font-size: var(--text-sm);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: var(--ink);
}

.color-palette__code {
  font-family: var(--font-sans);
  font-size: var(--text-sm);
  color: var(--muted);
}

.img-bg-1 { background: #2B2420; }
.img-bg-2 { background: #1C2420; }
.img-bg-3 { background: #232028; }
.img-bg-4 { background: #241C18; }

/* COMPACT PALETTE DESCRIPTION */
#Colors {
  display: grid;
  grid-template-columns: 1fr 2fr;
  gap: 3rem;
  margin-bottom: 2rem;
}

.palette-compact {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1px;
  background: var(--rule);
  grid-column: 2;
  border: 1px solid var(--rule);
}

.palette-card {
  background: #f7f4ef;
  padding: 1.4rem 1.5rem 1.2rem;
}

.palette-title {
  font-family: var(--font-serif);
  font-size: var(--text-md);
  font-weight: 300;
  font-style: italic;
  letter-spacing: var(--tracking-normal);
  color: var(--ink);
  margin-bottom: 0.65rem;
}

.palette-copy {
  font-size: var(--text-base);
  color: var(--muted);
  line-height: var(--leading-loose);
  margin-bottom: 0.9rem;
}

.palette-swatches {
  display: flex;
  align-items: center;
  gap: 0.45rem;
}

.swatch {
  width: 1.1rem;
  height: 1.1rem;
  border-radius: 999px;
  display: inline-block;
  background: var(--sw);
  border: 1px solid rgba(0, 0, 0, 0.08);
}

.palette-night {
  background: #17120d;
}

.palette-night .palette-title {
  color: #f5c96a;
}

.palette-night .palette-copy {
  color: #e7dac3;
}

/* TWO COL IMAGE */
body.project-template .two-col {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1px;
  background: var(--rule);
  opacity: 0;
  animation: fadeUp 0.6s ease forwards;
}
body.project-template .two-col-cell {
  background: var(--cream);
  aspect-ratio: 3/2;
  position: relative;
  overflow: hidden;
}
body.project-template .two-col-cell svg { width: 100%; height: 100%; }
body.project-template .two-col-cell img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
body.project-template .bg-a { background: #252020; }
body.project-template .bg-b { background: #1A1E2B; }

/* LOGO SYSTEM */
body.project-template .logo-system {
  padding: 5rem 3.5rem;
  opacity: 0;
  animation: fadeUp 0.6s ease forwards;
}
body.project-template .logo-system-title {
  font-family: var(--font-serif);
  font-size: var(--text-2xl);
  font-weight: 300;
  letter-spacing: var(--tracking-normal);
  color: var(--muted);
  margin-bottom: 3rem;
  text-transform: uppercase;
}
body.project-template .logo-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 2.5rem;
}
body.project-template .logo-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 1.5rem;
  min-height: 280px;
  padding: 2rem 1.5rem;
  border: 1px solid var(--rule);
  background: #f7f4ef;
}
body.project-template .logo-item img {
  width: 100%;
  height: auto;
  max-width: 320px;
}
body.project-template .logo-label {
  font-family: var(--font-sans);
  font-size: var(--text-sm);
  letter-spacing: var(--tracking-widest);
  text-transform: uppercase;
  color: var(--muted);
}

body.project-template .type-specimen-panel {
  margin-top: 2.5rem;
  width: 100%;
  aspect-ratio: 4/3;
  padding: 2rem;
  border: 1px solid var(--rule);
  background: #f7f4ef;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 1.25rem;
}

body.project-template .type-specimen-panel img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

body.olympics-2038 .type-specimen-panel img {
  width: 30%;
  height: auto;
}

body.olympics-2038 .type-specimen-panel {
  width: fit-content;
  aspect-ratio: auto;
  margin: 2.5rem auto 0;
}

/* OUTCOME FLOW */
.outcome-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 3rem;
  align-items: center;
  margin-top: 3.5rem;
}

.outcome-row--flip {
  direction: rtl;
}

.outcome-row--flip > * {
  direction: ltr;
}

.outcome-text p {
  font-size: var(--text-base);
  line-height: var(--leading-loose);
  color: var(--muted);
}

.outcome-media {
  overflow: hidden;
  min-width: 0;
}

.outcome-media img {
  width: 100%;
  aspect-ratio: 4 / 3;
  height: auto;
  display: block;
  margin: 0;
  border-radius: 2px;
  object-fit: cover;
}

.outcome-duo {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1.5rem;
  margin-top: 3.5rem;
}

.outcome-duo img {
  width: 100%;
  aspect-ratio: 4 / 3;
  height: auto;
  display: block;
  margin: 0;
  border-radius: 2px;
  object-fit: cover;
}

.outcome-full {
  margin-top: 3.5rem;
  overflow: hidden;
}

.outcome-full img {
  width: 100%;
  aspect-ratio: 16 / 9;
  height: auto;
  display: block;
  margin: 0;
  border-radius: 2px;
  object-fit: cover;
}

.inline-image.inline-image--smaller {
  height: 140px;
}

/* Generic outcome gallery (used by multiple project pages) */
.outcome-gallery {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 2rem;
  margin-top: 3rem;
}

.outcome-item {
  overflow: hidden;
  border-radius: 2px;
}

.outcome-item img {
  width: 100%;
  height: auto;
  display: block;
}

#Market img,
#patio-dining img {
  width: 100%;
  max-width: 100%;
  height: auto;
  display: block;
  margin-top: 2rem;
}

/* INSIGHT BLOCK */
body.project-template .insight {
  display: grid;
  grid-template-columns: 1fr 2fr;
  gap: 3rem;
  padding: 4rem 3.5rem;
  opacity: 0;
  animation: fadeUp 0.6s ease forwards;
}
body.project-template .insight-label {
  font-size: var(--text-xs);
  letter-spacing: var(--tracking-widest);
  text-transform: uppercase;
  color: var(--muted);
  padding-top: 0.4rem;
}
body.project-template .insight-quote {
  font-family: var(--font-serif);
  font-size: clamp(1.5rem, 3vw, 2.2rem);
  font-weight: 300;
  font-style: italic;
  line-height: 1.3;
  color: var(--ink);
}
body.project-template .insight-quote em { color: var(--water); font-style: normal; }

/* DELIVERABLES LIST */
.deliverables-list-label {
  font-size: var(--text-xs);
  letter-spacing: var(--tracking-widest);
  text-transform: uppercase;
  color: var(--water);
  display: block;
  margin-bottom: 0.75rem;
  grid-column: 2;
}
.deliverables-list {
  list-style: none;
  padding: 0;
  margin: 0;
  grid-column: 2;
}
.deliverables-list li {
  font-size: var(--text-base);
  line-height: var(--leading-relaxed);
  color: var(--muted);
  padding: 0.45rem 0;
  border-bottom: 1px solid var(--rule);
  display: flex;
  align-items: baseline;
  gap: 0.75rem;
}
.deliverables-list li::before {
  content: counter(deliverable, decimal-leading-zero);
  counter-increment: deliverable;
  font-family: var(--font-sans);
  font-size: var(--text-xs);
  color: var(--water);
  flex-shrink: 0;
}
.deliverables-list {
  counter-reset: deliverable;
}

/* PULL QUOTE */
.pull-quote {
  font-family: var(--font-serif);
  font-size: clamp(1.1rem, 2vw, 1.45rem);
  font-weight: 300;
  font-style: italic;
  line-height: 1.5;
  color: var(--ink);
  border-left: 3px solid var(--indigo);
  margin: 2rem 0 2rem 2rem;
  padding: 0.5rem 0 0.5rem 1.5rem;
  grid-column: 2;
}

body.project-template .insight-image {
  width: 100%;
  max-width: 300px;
  height: auto;
  display: block;
}

/* NEXT PROJECT */
body.project-template .next-project {
  display: grid;
  grid-template-columns: 1fr 1fr;
  min-height: 40vh;
  opacity: 0;
  animation: fadeUp 0.6s ease forwards;
}
body.project-template .next-info {
  padding: 4rem 3.5rem;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  border-right: 1px solid var(--rule);
}
body.project-template .next-label {
  font-size: var(--text-xs);
  letter-spacing: var(--tracking-widest);
  text-transform: uppercase;
  color: var(--muted);
}
body.project-template .next-title {
  font-family: var(--font-serif);
  font-size: clamp(2rem, 4vw, 3rem);
  font-weight: 700;
  letter-spacing: var(--tracking-tight);
  line-height: 1;
  margin-top: 1rem;
}
body.project-template .next-title em { font-style: italic; font-weight: 300; color: var(--water); }
body.project-template .next-discipline {
  font-size: var(--text-sm);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: var(--muted);
  margin-top: 0.75rem;
}
body.project-template .next-cta {
  display: inline-block;
  font-size: var(--text-sm);
  letter-spacing: var(--tracking-wider);
  text-transform: uppercase;
  text-decoration: none;
  padding: 0.8rem 1.6rem;
  border: 1px solid var(--ink);
  color: var(--ink);
  transition: background 0.2s, color 0.2s;
  margin-top: 3rem;
  width: fit-content;
}
body.project-template .next-cta:hover { background: var(--ink); color: var(--cream); }
body.project-template .next-image {
  background: #241C2B;
  position: relative;
  overflow: hidden;
}
body.project-template .next-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* OLYMPICS 2038 PAGE OVERRIDES */
body.olympics-2038 .hero-bg {
  background: #0D1E3A;
}

body.olympics-2038 .hero::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(
    to top,
    rgba(12, 18, 33, 0.78) 0%,
    rgba(12, 18, 33, 0.28) 42%,
    rgba(12, 18, 33, 0.18) 100%
  );
}

body.olympics-2038 .hero-title em {
  color: rgba(247, 177, 25, 0.95);
}

body.olympics-2038 .logo-item.logo-dark {
  background: #0D1E3A;
  border-color: rgba(245, 240, 232, 0.18);
}

body.olympics-2038 .logo-item.logo-dark .logo-label {
  color: rgba(245, 240, 232, 0.8);
}

body.olympics-2038 .insight {
  grid-template-columns: 1fr 2fr minmax(180px, 240px);
  align-items: center;
}

body.olympics-2038 .insight-image {
  max-width: 100%;
}

/* SANCTUARY BISTRO PAGE OVERRIDES */
body.sanctuary-bistro .hero-bg {
  background: #123225;
}

body.sanctuary-bistro .hero::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(
    to top,
    rgba(11, 25, 18, 0.82) 0%,
    rgba(11, 25, 18, 0.34) 48%,
    rgba(11, 25, 18, 0.16) 100%
  );
}

body.sanctuary-bistro .hero-title em {
  color: rgba(243, 224, 156, 0.95);
}

body.sanctuary-bistro .insight {
  grid-template-columns: 1fr 2fr minmax(180px, 240px);
  align-items: center;
}

body.sanctuary-bistro .insight-image {
  max-width: 100%;
}

/* E.L. FRED'S PAGE OVERRIDES */
body.elfreds .hero-bg {
  background: #040720;
}

body.elfreds .hero::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(
    to top,
    rgba(4, 7, 32, 0.82) 0%,
    rgba(4, 7, 32, 0.32) 48%,
    rgba(4, 7, 32, 0.12) 100%
  );
}

body.elfreds .hero-title em {
  color: rgba(217, 187, 102, 0.95);
}

/* Logo cells: contain so marks are never cropped */
body.elfreds .image-cell img {
  object-fit: contain;
  padding: 1.5rem;
}

body.elfreds .image-cell.img-bg-1 { background: #E5E6F0; }
body.elfreds .image-cell.img-bg-2 { background: #040720; }
body.elfreds .image-cell.img-bg-3 { background: #1A1E79; }
body.elfreds .image-cell.img-bg-4 { background: #E5E6F0; }

body.elfreds .two-col-cell.bg-a { background: #040720; }
body.elfreds .two-col-cell.bg-b { background: #E5E6F0; }

body.elfreds .two-col-cell img {
  object-fit: contain;
  padding: 2.5rem;
}

/* Feature logo on brand dark background */
body.elfreds .full-image.elfreds-logo-feature {
  background: #040720;
  display: flex;
  align-items: center;
  justify-content: center;
}

body.elfreds .full-image.elfreds-logo-feature img {
  max-width: 520px;
  width: 44%;
  height: auto;
  object-fit: contain;
}

/* Dark logo cards in logo system */
body.elfreds .logo-item.logo-dark {
  background: #040720;
  border-color: rgba(217, 187, 102, 0.22);
}

body.elfreds .logo-item.logo-dark .logo-label {
  color: rgba(229, 230, 240, 0.7);
}

/* Color palette sub-sections inside Design section */
.elfreds-palette {
  display: grid;
  grid-template-columns: 1fr 2fr;
  gap: 3rem;
  margin-top: 3rem;
}

.elfreds-palette-label {
  font-size: var(--text-xs);
  letter-spacing: var(--tracking-widest);
  text-transform: uppercase;
  color: var(--water);
  padding-top: 0.25rem;
}

.elfreds-palette-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1px;
  background: var(--rule);
  border: 1px solid var(--rule);
}

/* Stagger sections on scroll */
.section:nth-child(3) { animation-delay: 0.3s; }
.section:nth-child(4) { animation-delay: 0.35s; }

/* ══════════════════════════════════════════════════════════════════════════
   WORK PAGE
   ══════════════════════════════════════════════════════════════════════════ */

/* WORK PAGE HEADER */
.page-header.work-header {
  padding: 4rem 3.5rem 2.5rem;
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  opacity: 0;
  animation: fadeUp 0.6s 0.1s ease forwards;
}

/* FILTERS */
.filters {
  display: flex;
  gap: 0.5rem;
  flex-wrap: wrap;
  justify-content: flex-end;
}

/* PROJECT COUNT */
.meta-bar {
  padding: 1rem 3.5rem;
  display: flex;
  justify-content: space-between;
  align-items: center;
  opacity: 0;
  animation: fadeUp 0.6s 0.2s ease forwards;
}
.count { font-size: var(--text-sm); letter-spacing: var(--tracking-wider); text-transform: uppercase; color: var(--muted); }

/* GRID */
#project-grid {
  margin: 0 3.5rem;
}

.work-featured {
  display: grid;
  gap: 1px;
  background: var(--rule);
}

.more-work-header {
  padding: 1.25rem 0;
}

.more-work-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1px;
  background: var(--rule);
}

.project-card {
  background: var(--cream);
  position: relative;
  overflow: hidden;
  opacity: 0;
  animation: fadeUp 0.5s ease forwards;
  text-decoration: none;
  color: var(--ink);
  display: block;
}

.featured-card {
  min-height: 420px;
  display: grid;
  grid-template-columns: 1.25fr 1fr;
}

.more-work-card {
  min-height: 360px;
}

.project-card:nth-child(1) { animation-delay: 0.2s; }
.project-card:nth-child(2) { animation-delay: 0.28s; }
.project-card:nth-child(3) { animation-delay: 0.36s; }
.project-card:nth-child(4) { animation-delay: 0.44s; }
.project-card:nth-child(5) { animation-delay: 0.52s; }
.project-card:nth-child(6) { animation-delay: 0.6s; }

.project-card.hidden { display: none; }

/* IMAGE PLACEHOLDER */
.card-image {
  width: 100%;
  aspect-ratio: 4/3;
  background: var(--ink);
  position: relative;
  overflow: hidden;
  transition: transform 0.5s ease;
}

.card-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  filter: sepia(0.9) saturate(0.7);
  transition: filter 0.3s ease;
}

.featured-card .card-image {
  aspect-ratio: auto;
  height: 100%;
}

.more-work-card .card-image {
  aspect-ratio: 4/3;
}

.card-image.c1 { background: #2B2420; }
.card-image.c2 { background: #1C2B24; }
.card-image.c3 { background: #252020; }
.card-image.c4 { background: #1A1E2B; }
.card-image.c5 { background: #2B2218; }
.card-image.c6 { background: #1E1E1E; }
.card-image.c7 { background: #241C2B; }

/* GEOMETRIC SHAPES IN PLACEHOLDERS */
.shape {
  position: absolute;
  z-index: 1;
}

.project-card:hover .card-image { transform: scale(1.02); }

/* CARD BODY */
.card-body { padding: 1.25rem 1.5rem 1.5rem; }
.card-discipline {
  font-size: var(--text-xs);
  letter-spacing: var(--tracking-widest);
  text-transform: uppercase;
  color: var(--water);
  margin-bottom: 0.5rem;
}
.card-title {
  font-family: var(--font-serif);
  font-size: var(--text-xl);
  font-weight: 300;
  margin-bottom: 0.4rem;
  line-height: var(--leading-tight);
}
.featured-card .card-title { font-size: 1.4rem; }
.card-desc { font-size: 0.9rem; line-height: 1.65; color: var(--muted); }

.card-arrow {
  display: inline-block;
  margin-top: 1rem;
  font-size: var(--text-sm);
  letter-spacing: var(--tracking-wide);
  color: var(--water);
  text-transform: uppercase;
  transition: transform 0.2s;
}
.project-card:hover .card-arrow { transform: translateX(4px); }

/* ══════════════════════════════════════════════════════════════════════════
   RESPONSIVE
   ══════════════════════════════════════════════════════════════════════════ */

@media (max-width: 1100px) {
  .entry { grid-template-columns: 200px 1fr; }
  .entry-meta { display: none; }
}

@media (max-width: 900px) {
  /* About page */
  .hero-split { grid-template-columns: 1fr; min-height: auto; }
  .photo-side { height: 50vw; border-right: none; border-bottom: 1px solid var(--rule); }
  .bio-side { padding: 3rem 1.5rem; }
  .skills-section { grid-template-columns: 1fr; }
  .skill-col { border-right: none; border-bottom: 1px solid var(--rule); padding: 2.5rem 1.5rem; }
  .philosophy { grid-template-columns: 1fr; padding: 3rem 1.5rem; gap: 1rem; }
  .currently { grid-template-columns: 1fr; }
  .current-cell { border-right: none; border-bottom: 1px solid var(--rule); padding: 2rem 1.5rem; }
  .resume-cta { flex-direction: column; gap: 2rem; align-items: flex-start; padding: 3rem 1.5rem; }

  /* Contact page */
  .contact-layout { grid-template-columns: 1fr; }
  .contact-left { border-right: none; border-bottom: 1px solid var(--rule); padding: 3rem 1.5rem; }
  .contact-right { padding: 3rem 1.5rem; }

  /* Project page */
  .back-link { padding: 1rem 1.5rem; }
  .hero-content { bottom: 2rem; left: 1.5rem; right: 1.5rem; flex-direction: column; align-items: flex-start; gap: 1rem; }
  .info-strip { grid-template-columns: 1fr 1fr; }
  .section { padding: 3rem 1.5rem; }
  .section-header, .body-text { grid-template-columns: 1fr; gap: 1rem; }
  .body-text p { grid-column: 1; }
  .section--stacked-copy .section-header { margin-left: 0; }
  .section--stacked-copy .body-text p { margin-left: 0; }
  .persona-layout { flex-direction: column; gap: 1.5rem; }
  .persona-media { flex-basis: auto; width: 100%; }
  .persona-image { max-width: 300px; margin: 0 auto; }
  .persona-content { width: 100%; }
  .persona-copy { max-width: none; }
  .concept-placeholder-grid { grid-column: 1; grid-template-columns: 1fr; max-width: none; }
  .asset-placeholder-grid { grid-column: 1; max-width: none; }
  .logo-parts-section { grid-column: 1; max-width: none; }
  .asset-placeholder-grid--three,
  .asset-placeholder-grid--four { grid-template-columns: 1fr 1fr; }
  .logo-pieces-gallery { grid-template-columns: repeat(3, minmax(0, 1fr)); padding: 2rem 1.5rem 0; }
  #Colors { grid-template-columns: 1fr; gap: 1rem; }
  .image-grid { grid-template-columns: 1fr; }
  .image-cell:first-child { grid-column: span 1; }
  .palette-compact {
    grid-template-columns: 1fr;
    grid-column: 1;
  }
  .two-col, .next-project { grid-template-columns: 1fr; }
  .next-info { padding: 3rem 1.5rem; }
  .insight { grid-template-columns: 1fr; padding: 3rem 1.5rem; }
  body.olympics-2038 .insight { grid-template-columns: 1fr; }
  body.sanctuary-bistro .insight { grid-template-columns: 1fr; }
  .logo-grid { grid-template-columns: repeat(2, 1fr); }
  .logo-item { min-height: 230px; }
  .type-specimen-panel { padding: 1.5rem; }
  .outcome-gallery { grid-template-columns: 1fr; }
  .outcome-row { grid-template-columns: 1fr; gap: 1.5rem; }
  .outcome-row--flip { direction: ltr; }
  .outcome-duo { grid-template-columns: 1fr; }

  .print-ad-image {
    float: none;
    width: 100%;
    max-width: 300px;
    margin: 1rem auto 1.25rem;
  }

  .inline-image {
    float: none;
    width: 100%;
    max-width: 300px;
    height: auto;
    margin: 1rem auto 1.25rem;
  }

  .inline-image.inline-image--smaller {
    max-width: 210px;
  }

  /* Work page */
  .page-header.work-header { padding: 3rem 1.5rem 2rem; flex-direction: column; gap: 1.5rem; align-items: flex-start; }
  .meta-bar { padding: 1rem 1.5rem; }
  #project-grid { margin: 0 1.5rem; }
  .featured-card {
    grid-template-columns: 1fr;
    min-height: 0;
  }
  .featured-card .card-image { aspect-ratio: 16/9; height: auto; }
  .more-work-header { padding: 1.25rem 0; }
  .more-work-grid { grid-template-columns: 1fr; }

  footer { padding: 1.25rem 1.5rem; flex-direction: column; gap: 0.5rem; text-align: center; }
}

@media (max-width: 768px) {
  /* Portfolio hero */
  .wrapper { grid-template-columns: 1fr; }
  .left { padding: 3rem 1.5rem 2rem; border-right: none; border-bottom: 1px solid var(--rule); }
  .right { padding: 3rem 1.5rem 3rem; }

  /* Lab page */
  .page-header { grid-template-columns: 1fr; padding: 3rem 1.5rem 2rem; }
  .header-right { padding-left: 0; margin-top: 1.5rem; }
  .filter-bar { padding: 1rem 1.5rem; flex-direction: column; gap: 1rem; align-items: flex-start; }
  .entry { grid-template-columns: 1fr; }
  .entry-thumb { aspect-ratio: 16/7; border-right: none; border-bottom: 1px solid var(--rule); }
  .entry-content { border-right: none; padding: 1.5rem; }
  .bottom-note { grid-template-columns: 1fr; padding: 2rem 1.5rem; }
  
  /* Project page mobile */
  .logo-pieces-gallery { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .logo-grid { grid-template-columns: 1fr; }
  .logo-item { min-height: 200px; padding: 1.5rem 1rem; }
  .type-specimen-panel { padding: 1rem; }
  .outcome-row { grid-template-columns: 1fr; gap: 1.5rem; }
  .outcome-row--flip { direction: ltr; }
  .outcome-duo { grid-template-columns: 1fr; }
}