@font-face { font-family: Barlow; src: url('assets/fonts/barlow-400.woff2') format('woff2'); font-weight: 400; font-display: swap; }
/* Isolated photo-selection study; the portfolio layout remains unchanged. */
.photo-review { padding-block: 1.5rem 4rem; }
.photo-review main { max-width: 960px; padding-top: 3rem; }
.photo-review h1 { font-size: clamp(2.8rem, 7vw, 5.5rem); line-height: 1; margin-block: 1rem; }
.photo-review-intro, .photo-review-note { max-width: 62ch; margin-block: 1.5rem; }
.photo-review-controls { display: flex; flex-wrap: wrap; gap: .75rem; align-items: center; margin-block: 1.5rem; }
.photo-review-controls button { background: transparent; }
.photo-review-track { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; overscroll-behavior-x: contain; }
.photo-review-track figure { flex: 0 0 100%; min-width: 0; scroll-snap-align: start; }
.photo-review-track img { width: 100%; height: auto; aspect-ratio: 4 / 3; object-fit: cover; }
.photo-review-track figcaption { padding-block: 1.5rem; padding-right: 1rem; }
.photo-review-track h2 { font-size: clamp(2.5rem, 6vw, 4rem); margin-block: .75rem; }
.photo-review-track figcaption > p:last-child { max-width: 55ch; }
.field-gallery { min-width: 0; }
.field-track figure { position: relative; }
.field-track figure > a { display: block; }
.field-track figcaption { position: absolute; inset: auto 0 0; padding: 3.5rem 1.1rem 1rem; display: flex; flex-wrap: wrap; justify-content: space-between; align-items: end; gap: .5rem; color: #f0f0fa; background: linear-gradient(transparent, rgba(0,0,0,.87)); pointer-events: none; }
.field-track figcaption span:first-child { font: 600 1.5rem/1 var(--display); text-transform: uppercase; }
.field-track figcaption span:last-child { font: 400 .5625rem/1.5 var(--mono); text-transform: uppercase; letter-spacing: .07em; }
.field-controls { gap: .5rem; }
.field-controls .button-link { padding: .5rem .75rem; }
.field-controls [data-photo-status] { font: 400 .75rem/1.5 var(--mono); margin-inline: .25rem; }
.gradient-preview { display: block; width: 100%; height: auto; }
.gradient-preview .slab { transition: transform .25s, filter .25s; }
.gradient-preview .slab.is-demo-active, .gradient-preview .slab:hover { transform: translateY(-6px); filter: brightness(1.3); }
.gradient-preview .slab.is-demo-active .slab-top { stroke-opacity: 1; stroke-width: 2; }
.rf-preview { display: block; width: 100%; height: auto; }
.rf-motion-toggle { background: transparent; border: 0; padding: 0; font-size: .75rem; }
.field-gallery-position { display: flex; justify-content: space-between; gap: 1rem; padding-top: 1rem; font: 400 .6875rem/1.5 var(--mono); color: var(--muted); text-transform: uppercase; letter-spacing: .06em; }
.visually-hidden { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; }
.gradient-preview-footer { display: flex; flex-wrap: wrap; gap: .5rem 1rem; justify-content: space-between; align-items: center; }
.stack-motion-toggle, .if-motion-toggle { background: transparent; border: 0; padding: 0; font-size: .75rem; }
.if-stage { position: relative; overflow: hidden; container-type: inline-size; }
.if-level { position: absolute; top: 0; left: 0; z-index: 1; display: flex; flex-direction: column; gap: .3rem; max-width: 70%; padding: 5% 0 0 5%; color: #f0f0fa; text-shadow: 0 1px 10px rgba(0,0,0,.65); pointer-events: none; }
.if-level::before { content: ""; position: absolute; top: 0; left: 0; z-index: -1; width: 230%; height: 260%; background: radial-gradient(ellipse at 0 0, rgba(3,5,9,.82), rgba(3,5,9,.68) 34%, rgba(3,5,9,.36) 56%, rgba(3,5,9,0) 78%); }
.if-level-kicker { font: 400 .6875rem/1.4 var(--mono); letter-spacing: .06em; text-transform: uppercase; color: #e6ba82; }
.if-level strong { font: 500 1rem/1.2 var(--body); font-size: clamp(.95rem, 3cqw, 1.3rem); letter-spacing: -.01em; }
.if-level-scale { font: 400 .6875rem/1.4 var(--mono); color: #c3ccd4; }
.if-site { text-transform: none; letter-spacing: .02em; }
.if-layers { position: absolute; right: 0; bottom: 0; z-index: 1; display: flex; flex-direction: column; align-items: flex-end; gap: .45rem; max-width: 82%; padding: 0 5% 5% 0; color: #f0f0fa; text-shadow: 0 1px 8px rgba(0,0,0,.7); pointer-events: none; }
.if-layers::before { content: ""; position: absolute; right: 0; bottom: 0; z-index: -1; width: 190%; height: 330%; background: radial-gradient(ellipse at 100% 100%, rgba(3,5,9,.84), rgba(3,5,9,.7) 34%, rgba(3,5,9,.38) 56%, rgba(3,5,9,0) 78%); }
.if-layer-names { display: flex; gap: .9rem; margin: 0; font: 400 .6875rem/1.2 var(--mono); letter-spacing: .08em; text-transform: uppercase; }
.if-layer-names span { padding-bottom: .3rem; border-bottom: 2px solid transparent; color: rgba(240,240,250,.6); transition: color .25s, border-color .25s; }
.if-layer-names .is-active { color: #f0f0fa; border-bottom-color: #e6ba82; }
.if-legend { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: .3rem .85rem; margin: 0; font: 400 .6875rem/1.3 var(--mono); color: #d3dae0; }
.if-legend span { display: inline-flex; align-items: center; gap: .4rem; white-space: nowrap; }
.if-legend span::before { content: ""; width: .875rem; height: 3px; border-radius: 2px; background: var(--c); box-shadow: 0 0 8px var(--c); }
@media (min-width: 700px) { .if-level-kicker, .if-level-scale, .if-layer-names, .if-legend { font-size: .75rem; } }
/* phone-sized cards: the layer names stay, the color legend goes (it would cover the picture), shades shrink to the text */
@container (max-width: 520px) { .if-level { gap: .15rem; padding: 3.5% 0 0 4%; } .if-level::before { width: 220%; height: 240%; } .if-level-kicker, .if-level-scale { line-height: 1.25; } .if-level strong { line-height: 1.1; } .if-layers { padding: 0 4% 4% 0; } .if-layers::before { width: 175%; height: 290%; } .if-legend { display: none; } .if-layer-names span { padding-bottom: .2rem; } }
@supports not (container-type: inline-size) { @media (max-width: 560px) { .if-level { gap: .15rem; padding: 3.5% 0 0 4%; } .if-level::before { width: 220%; height: 240%; } .if-level-kicker, .if-level-scale { line-height: 1.25; } .if-level strong { line-height: 1.1; } .if-layers { padding: 0 4% 4% 0; } .if-layers::before { width: 175%; height: 290%; } .if-legend { display: none; } .if-layer-names span { padding-bottom: .2rem; } } }
.if-film { display: block; width: 100%; height: 100%; object-fit: cover; background: #090d11; }
@media (prefers-reduced-motion: reduce) {
  .gradient-preview .slab:hover { transform: none; }
}
@font-face { font-family: 'Barlow Condensed'; src: url('assets/fonts/barlow-condensed-600.woff2') format('woff2'); font-style: normal; font-weight: 600; font-display: swap; }
@font-face { font-family: Manrope; src: url('assets/fonts/manrope-latin.woff2') format('woff2'); font-style: normal; font-weight: 200 800; font-display: swap; }
@font-face { font-family: 'IBM Plex Mono'; src: url('assets/fonts/ibm-plex-mono-400.woff2') format('woff2'); font-weight: 400; font-display: swap; }

:root {
  color-scheme: dark;
  --paper: #000;
  --surface: #0b1015;
  --ink: #f0f0fa;
  --muted: #aab2b9;
  --line: rgba(240, 240, 250, 0.2);
  --accent: #e6ba82;
  --header: rgba(0, 0, 0, 0.85);
  --gutter: clamp(1.25rem, 5.6vw, 6rem);
  --display: 'Barlow Condensed', 'Arial Narrow', sans-serif;
  --body: Manrope, Arial, sans-serif;
  --mono: 'IBM Plex Mono', Consolas, monospace;
}
html[data-theme='light'] {
  color-scheme: light;
  --paper: #f1f2ed;
  --surface: #e7e9e4;
  --ink: #19211e;
  --muted: #56605a;
  --line: rgba(25, 33, 30, 0.22);
  --accent: #80531c;
  --header: rgba(241, 242, 237, 0.9);
}
* { box-sizing: border-box; }
html { scroll-padding-top: 6rem; }
body { margin: 0; color: var(--ink); background: var(--paper); font: 400 1rem/1.7 var(--body); overflow-wrap: anywhere; }
a { color: inherit; text-decoration: none; }
button, input { font: inherit; }
button { color: inherit; cursor: pointer; }
a, button, input { touch-action: manipulation; -webkit-tap-highlight-color: transparent; }
button:disabled { cursor: default; }
img, svg { max-width: 100%; }
img { display: block; }
h1, h2, h3, p, figure, dl, dd { margin: 0; }
h1, h2, h3 { font-family: var(--display); font-weight: 600; text-transform: uppercase; }
h2 { font-size: clamp(3.3rem, 6.4vw, 6.6rem); line-height: 0.94; letter-spacing: -0.012em; }
strong { font-weight: 600; }
[hidden] { display: none !important; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 5px; }
::selection { background: var(--accent); color: var(--paper); }
.page-width { width: calc(100% - 2 * var(--gutter)); max-width: 1280px; margin-inline: auto; }
.eyebrow { font: 400 0.6875rem/1.5 var(--mono); letter-spacing: 0.13em; text-transform: uppercase; color: var(--accent); }
.skip-link { position: fixed; z-index: 100; top: 1rem; left: 1rem; padding: 0.75rem 1rem; background: var(--ink); color: var(--paper); transform: translateY(-200%); }
.skip-link:focus { transform: none; }
.button-link { display: inline-flex; align-items: center; justify-content: center; min-height: 48px; padding: 0.75rem 1.5rem; border: 1px solid var(--line); font-size: 0.6875rem; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; transition: background-color 160ms, color 160ms, border-color 160ms; }
.button-link:hover { background: var(--ink); color: var(--paper); border-color: var(--ink); }
.text-link, .source-link { display: inline-flex; align-items: center; min-height: 44px; font-size: 0.875rem; }
.text-link { border-bottom: 1px solid var(--line); }
.text-link:hover { border-color: var(--accent); }
.source-link { color: var(--muted); }
.source-link:hover { color: var(--ink); text-decoration: underline; text-underline-offset: 6px; }

/* A balanced RO wordmark shares the wildlife site's font and gold rule. */
.site-header { position: fixed; inset: 0 0 auto; z-index: 40; background: var(--paper); border-bottom: 1px solid var(--line); }
@supports ((backdrop-filter: blur(18px)) or (-webkit-backdrop-filter: blur(18px))) {
  .site-header { background: var(--header); backdrop-filter: blur(18px); -webkit-backdrop-filter: blur(18px); }
}
.header-inner { display: flex; align-items: center; justify-content: space-between; gap: 2rem; min-height: 84px; }
.identity { display: inline-flex; align-items: center; flex-shrink: 0; gap: 1rem; min-height: 44px; }
.brand-mark { display: inline-flex; align-items: baseline; border-left: 2px solid var(--accent); padding-left: 0.55rem; color: var(--ink); font: 600 2.5rem/0.92 var(--display); letter-spacing: -0.045em; }
.brand-mark span { font-size: 0.93em; padding-left: 0.025em; }
.brand-name { font-size: 0.6875rem; font-weight: 600; letter-spacing: 0.09em; text-transform: uppercase; }
.site-header nav { display: flex; flex-wrap: wrap; align-items: center; gap: clamp(1.2rem, 3vw, 3rem); }
.site-header nav a { display: inline-flex; align-items: center; min-height: 44px; font-size: 0.6875rem; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; }
.site-header nav a:hover { color: var(--accent); }
.header-controls { display: flex; align-items: center; gap: 0.75rem; }
.theme-toggle, .menu-toggle { display: inline-flex; align-items: center; justify-content: center; gap: 0.6rem; min-width: 44px; min-height: 44px; padding: 0 0.7rem; border: 0; background: transparent; font-size: 0.75rem; }
.theme-toggle { border: 1px solid var(--line); border-radius: 999px; min-width: 88px; }
.theme-toggle:hover { border-color: var(--accent); }
.menu-toggle { display: none; }
.menu-icon { width: 16px; height: 8px; border-block: 1px solid currentColor; }
.menu-toggle[aria-expanded='true'] .menu-icon { height: 0; border-bottom: 0; }

/* Full-screen photographs remain visible behind a localized lower text scrim. */
.hero { position: relative; isolation: isolate; min-height: 760px; min-height: max(760px, 100svh); display: flex; align-items: end; padding: 10rem 0 7rem; color: #f0f0fa; background: #000; }
.hero-photo, .hero-photo img, .hero-scrim { position: absolute; inset: 0; width: 100%; height: 100%; }
.hero-photo { z-index: -3; }
.hero-photo img { object-fit: cover; object-position: 50% 54%; }
.hero-scrim { z-index: -2; background: linear-gradient(0deg, rgba(0,0,0,0.94) 0%, rgba(0,0,0,0.78) 19%, rgba(0,0,0,0.3) 44%, rgba(0,0,0,0) 72%), linear-gradient(90deg, rgba(0,0,0,0.65), rgba(0,0,0,0.55) 25%, rgba(0,0,0,0.2) 58%, transparent 85%); }
.hero .eyebrow, .hardware-scene .eyebrow { color: #e6ba82; }
.hero .eyebrow { width: fit-content; padding: 0.25rem 0.55rem; background: rgba(0,0,0,0.7); }
.hero h1 { font-size: clamp(5.75rem, 9.1vw, 10rem); line-height: 0.86; letter-spacing: -0.012em; margin-block: 1.25rem 1.65rem; max-width: 850px; }
.hero-role { font-size: clamp(1rem, 1.4vw, 1.125rem); line-height: 1.6; }
.hero .button-link { margin-top: 1.8rem; border-color: rgba(240,240,250,0.65); color: #f0f0fa; }
.hero .button-link:hover { background: #f0f0fa; color: #000; }
.hero-foot { position: absolute; inset: auto 0 1.4rem; display: flex; flex-wrap: wrap; justify-content: space-between; gap: 0.5rem; font: 400 0.625rem/1.6 var(--mono); color: #d0d5db; }
.hero :focus-visible, .hardware-scene :focus-visible { outline-color: #e6ba82; }

.chapter { border-top: 1px solid var(--line); }
.section-intro { display: grid; grid-template-columns: 1fr 0.6fr; align-items: end; gap: 4rem; padding-top: clamp(4rem, 7vw, 7rem); padding-bottom: 3rem; }
.section-intro h2 { margin-top: 1rem; }
.section-intro > p { color: var(--muted); max-width: 42ch; font-size: 0.9375rem; }
.project-picker { display: flex; flex-wrap: wrap; align-items: stretch; justify-content: space-between; gap: 0 1.25rem; border-block: 1px solid var(--line); }
.project-picker a { display: inline-flex; align-items: center; gap: 0.65rem; min-height: 58px; font-size: 0.75rem; border-bottom: 2px solid transparent; }
.project-picker a span { color: var(--accent); font: 400 0.625rem/1 var(--mono); }
.project-picker a:hover, .project-picker a[aria-current='true'] { border-color: var(--accent); }
.projects-track { padding-bottom: 2rem; }
.project { display: grid; grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr); align-items: center; gap: clamp(2rem, 6vw, 6rem); padding-block: 5rem; border-bottom: 1px solid var(--line); scroll-margin-top: 1rem; }
.project:last-child { border-bottom: 0; }
.project:nth-child(even) { grid-template-columns: minmax(0, 1.2fr) minmax(0, 0.8fr); }
.project:nth-child(even) .project-copy { grid-column: 2; grid-row: 1; }
.project:nth-child(even) .project-visual { grid-column: 1; grid-row: 1; }
.project > *, .field-layout > *, .about-intro > *, .contact-layout > * { min-width: 0; }
.project h3 { font-size: clamp(3rem, 5vw, 5.2rem); line-height: 0.98; letter-spacing: -0.012em; margin-block: 0.8rem 1.5rem; }
.project-copy > p:not(.eyebrow) { color: var(--muted); max-width: 52ch; font-size: 0.9375rem; }
.project-links { display: flex; flex-wrap: wrap; align-items: center; gap: 1rem 1.5rem; margin-top: 1.75rem; }
.project-stage { display: block; width: 100%; aspect-ratio: 4 / 3; background: #090d11; }
.project-stage img { width: 100%; height: 100%; object-fit: contain; }
.media-caption { margin-top: 0.85rem; color: var(--muted); font: 400 0.625rem/1.6 var(--mono); }
.gallery-hint, .gallery-controls { display: none; }

/* Alternative B: native horizontal scrolling, with every project named above it. */
html[data-layout='gallery'] .hero-content { text-align: center; }
html[data-layout='gallery'] .hero h1 { margin-inline: auto; }
html[data-layout='gallery'] .hero .eyebrow { margin-inline: auto; }
html[data-layout='gallery'] .hero-scrim { background: linear-gradient(0deg, rgba(0,0,0,0.96), rgba(0,0,0,0.78) 30%, rgba(0,0,0,0.58) 57%, rgba(0,0,0,0) 80%); }
html[data-layout='gallery'] .gallery-hint { display: block; padding-top: 1rem; color: var(--muted); font-size: 0.75rem; }
html[data-layout='gallery'] .projects-track { display: flex; gap: 4rem; overflow-x: auto; scroll-snap-type: x mandatory; overscroll-behavior-x: contain; scrollbar-width: thin; scrollbar-color: var(--accent) var(--surface); }
html[data-layout='gallery'] .project { flex: 0 0 100%; width: 100%; min-width: 0; scroll-snap-align: start; grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr); align-content: start; padding-block: 2.75rem 2rem; border: 0; }
html[data-layout='gallery'] .project-copy { grid-column: 1; grid-row: 1; }
html[data-layout='gallery'] .project-visual { grid-column: 2; grid-row: 1; align-self: start; }
html[data-layout='gallery'] .gallery-controls:not([hidden]) { display: flex; align-items: center; justify-content: end; gap: 1.5rem; padding-block: 1rem 4rem; }
.gallery-controls button { min-height: 44px; min-width: 80px; background: transparent; border: 1px solid var(--line); padding-inline: 1rem; font-size: 0.75rem; }
.gallery-controls button:hover:not(:disabled) { border-color: var(--accent); }
.gallery-controls button:disabled { opacity: 0.4; }
.gallery-position { min-width: 3rem; text-align: center; font: 400 0.75rem/1.5 var(--mono); color: var(--muted); }

.field-section { background: var(--surface); padding-block: clamp(4rem, 7vw, 7rem); }
.field-layout { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 0.9fr); gap: clamp(3rem, 10vw, 10rem); align-items: center; }
.field-copy h2 { margin-block: 1.25rem 1.75rem; }
.field-copy > p:not(.eyebrow) { color: var(--muted); }
.field-copy .button-link { margin-top: 2rem; }
.field-copy .source-link { display: flex; width: fit-content; margin-top: 0.75rem; }
.field-frame { position: relative; width: 100%; max-width: 490px; aspect-ratio: 3 / 4; justify-self: end; background: #0e1710; }
.field-frame > a { display: block; width: 100%; height: 100%; }
.field-frame img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 35%; }
.field-frame figcaption { position: absolute; inset: auto 0 0; display: flex; flex-wrap: wrap; align-items: end; justify-content: space-between; gap: 0.5rem; padding: 3.5rem 1.1rem 1rem; color: #f0f0fa; background: linear-gradient(transparent, rgba(0,0,0,0.87)); pointer-events: none; }
.field-frame figcaption span:first-child { font: 600 1.5rem/1 var(--display); text-transform: uppercase; letter-spacing: 0.02em; }
.field-frame figcaption span:last-child { font: 400 0.5625rem/1.5 var(--mono); letter-spacing: 0.07em; text-transform: uppercase; }

.hardware-scene { position: relative; isolation: isolate; min-height: clamp(590px, 65vw, 900px); display: flex; align-items: end; padding-block: 5rem 6rem; color: #f0f0fa; background: #03080c; }
.hardware-scene > img, .hardware-scrim { position: absolute; inset: 0; width: 100%; height: 100%; }
.hardware-scene > img { z-index: -3; object-fit: cover; object-position: center; }
.hardware-scrim { z-index: -2; background: linear-gradient(0deg, rgba(0,0,0,0.93) 0%, rgba(0,0,0,0.7) 20%, rgba(0,0,0,0) 68%); }
.hardware-copy h2 { margin-block: 1rem 1.5rem; font-size: clamp(4rem, 7.8vw, 8.5rem); }
.hardware-copy > p:last-child { font-size: 0.9375rem; }
.illustration-credit { position: absolute; bottom: 1.25rem; right: var(--gutter); font: 400 0.625rem/1.5 var(--mono); color: #c7d0d8; }

.about-section { padding-block: clamp(4rem, 7vw, 7rem); }
.about-intro { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.7fr); gap: clamp(3rem, 10vw, 10rem); align-items: center; }
.about-copy h2 { margin-block: 1.25rem 2rem; font-size: clamp(3.4rem, 5.6vw, 5.9rem); }
.about-copy > p:not(.eyebrow) { color: var(--muted); max-width: 54ch; font-size: 0.9375rem; }
.about-copy > p + p { margin-top: 1rem; }
.about-copy .text-link { margin-top: 1.2rem; }
.about-portrait { width: 100%; max-width: 300px; justify-self: center; }
.about-portrait img { width: 100%; height: auto; aspect-ratio: 3 / 4; object-fit: cover; object-position: 50% 70%; }
.background-heading { margin-top: 4rem; }
.background-heading h3 { margin-block: 0.6rem 1.75rem; font-size: 2rem; letter-spacing: 0.01em; }
.background-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 2rem; }
.background-list > div { border-top: 1px solid var(--line); padding-top: 1.25rem; }
.background-list dt { font: 400 0.6875rem/1.5 var(--mono); color: var(--accent); text-transform: uppercase; letter-spacing: 0.08em; margin-bottom: 0.75rem; }
.background-list strong { display: block; font-size: 0.9375rem; }
.background-list dd span { display: block; margin-top: 0.4rem; color: var(--muted); font-size: 0.875rem; }
.contact-section { background: var(--surface); padding-block: 4rem; }
.contact-layout { display: grid; grid-template-columns: 1fr 1fr; gap: 4rem; align-items: start; }
.contact-layout h2 { margin-top: 1rem; }
.contact-destinations > a { display: flex; align-items: center; min-height: 64px; padding-block: 0.75rem; border-bottom: 1px solid var(--line); font-size: 1rem; }
.contact-destinations > a:hover { color: var(--accent); border-color: var(--accent); }

.site-footer { border-top: 1px solid var(--line); }
.footer-main { display: grid; grid-template-columns: 1.5fr 1fr 0.7fr; gap: 3rem; padding-block: 3.5rem; }
.footer-identity > p { margin-top: 1.25rem; font-size: 0.875rem; }
.footer-identity > span { color: var(--muted); font-size: 0.75rem; }
.footer-main nav .eyebrow { margin-bottom: 0.5rem; }
.footer-main nav a { display: flex; align-items: center; min-height: 44px; font-size: 0.8125rem; color: var(--muted); }
.footer-main nav a:hover { color: var(--ink); }
.footer-base { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 0.5rem 1.5rem; padding-block: 1rem; border-top: 1px solid var(--line); color: var(--muted); font-size: 0.6875rem; }
.footer-base a { display: inline-flex; align-items: center; min-height: 44px; }
.design-switch { display: flex; flex-wrap: wrap; align-items: center; gap: 0 1.5rem; border-top: 1px solid var(--line); padding-block: 0.65rem 1rem; font-size: 0.6875rem; }
.design-switch > span { color: var(--muted); }
.design-switch a { display: inline-flex; align-items: center; min-height: 44px; }
.design-switch a[aria-current='true'] { color: var(--accent); text-decoration: underline; text-underline-offset: 5px; }
.not-found-main { display: flex; align-items: center; min-height: calc(100svh - 130px); padding-block: 9rem 4rem; }
.not-found-main h1 { font-size: clamp(4rem, 10vw, 9rem); line-height: 0.95; margin-block: 1rem 1.5rem; }
.not-found-main p:not(.eyebrow) { max-width: 46ch; color: var(--muted); }
.not-found-main .button-link { margin-top: 2rem; }

@media (max-width: 1000px) {
  .brand-name { display: none; }
  .section-intro { gap: 2.5rem; }
  .project, .project:nth-child(even) { gap: 2.5rem; }
  .field-layout, .about-intro { gap: 3rem; }
  .background-list { gap: 1.25rem; }
}
@media (max-width: 800px) {
  .header-inner { min-height: 74px; flex-wrap: wrap; gap: 0 1rem; }
  .brand-name { display: inline; }
  .header-controls { margin-left: auto; gap: 0.25rem; }
  .site-header nav { flex-basis: 100%; order: 3; justify-content: space-between; gap: 0.5rem; padding-bottom: 0.6rem; }
  .site-header nav a { min-width: 44px; }
  .menu-ready .menu-toggle { display: inline-flex; }
  .menu-ready .site-header nav:not(.is-open) { display: none; }
  .hero { min-height: 720px; min-height: max(720px, 100svh); padding-bottom: 6rem; }
  .hero h1 { font-size: clamp(4.5rem, 10vw, 6.5rem); }
  .section-intro { grid-template-columns: 1fr; gap: 1.75rem; padding-top: 4rem; padding-bottom: 2rem; }
  .section-intro > p { max-width: 50ch; }
  .project-picker { justify-content: start; gap: 0 1.5rem; }
  .project-picker a { min-height: 48px; }
  .project, .project:nth-child(even), html[data-layout='gallery'] .project { grid-template-columns: minmax(0, 1fr); gap: 2rem; padding-block: 3rem; }
  .project .project-visual, .project:nth-child(even) .project-visual, html[data-layout='gallery'] .project-visual { grid-column: 1; grid-row: 1; }
  .project .project-copy, .project:nth-child(even) .project-copy, html[data-layout='gallery'] .project-copy { grid-column: 1; grid-row: 2; }
  .project h3 { font-size: 3.75rem; margin-block: 0.6rem 1rem; }
  .project-links { margin-top: 1.4rem; }
  .field-layout { gap: 2.5rem; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .field-copy h2 { font-size: 3.7rem; }
  .field-frame figcaption { gap: 0.6rem; }
  .about-intro { gap: 2.5rem; }
  .background-list { grid-template-columns: 1fr; gap: 1.5rem; }
  .contact-layout { gap: 2rem; }
  .footer-main { grid-template-columns: 1.2fr 1fr 0.7fr; gap: 1.5rem; }
  .footer-identity .brand-name { max-width: 8rem; }
}
@media (max-width: 600px) {
  h2 { font-size: clamp(3.4rem, 15vw, 4.75rem); }
  .brand-mark { font-size: 2.25rem; }
  .identity { gap: 0.65rem; }
  .brand-name { font-size: 0.625rem; }
  .theme-toggle { min-width: 76px; padding-inline: 0.5rem; }
  .menu-toggle { padding-right: 0; }
  .hero { min-height: 700px; min-height: max(700px, 100svh); padding-top: 12rem; padding-bottom: 6.5rem; }
  .hero-photo img { object-position: 50% 50%; }
  .hero h1 { font-size: clamp(3.25rem, 16.4vw, 5.5rem); line-height: 0.89; margin-block: 1rem 1.5rem; }
  .hero-scrim { background: linear-gradient(0deg, rgba(0,0,0,0.96), rgba(0,0,0,0.85) 20%, rgba(0,0,0,0.67) 48%, rgba(0,0,0,0.18) 65%, transparent 80%); }
  .hero-role { font-size: 0.9375rem; }
  .hero .button-link { margin-top: 1.5rem; }
  .hero-foot { display: block; font-size: 0.5625rem; bottom: 1.25rem; }
  .hero-foot span { display: block; }
  .hero-foot span + span { margin-top: 0.25rem; }
  .project-picker { gap: 0 1rem; }
  .project-picker a { font-size: 0.6875rem; gap: 0.4rem; }
  .project h3 { font-size: 3.4rem; }
  .project-copy > p:not(.eyebrow) { font-size: 0.9375rem; }
  .field-layout { grid-template-columns: minmax(0, 1fr); gap: 2rem; }
  .field-copy h2 { font-size: 4rem; }
  .field-copy h2 br { display: none; }
  .field-copy .button-link { margin-top: 1.5rem; }
  .field-frame { max-width: none; justify-self: start; }
  .field-frame figcaption { padding: 3.5rem 1rem 1rem; }
  .hardware-scene { min-height: 650px; padding-bottom: 5rem; }
  .hardware-copy h2 { font-size: clamp(2.8rem, 12.5vw, 4.5rem); }
  .illustration-credit { font-size: 0.5625rem; right: auto; left: var(--gutter); }
  .about-intro { grid-template-columns: minmax(0, 1fr); gap: 2rem; }
  .about-copy h2 { font-size: 3.4rem; }
  .about-portrait { width: 72%; max-width: 280px; justify-self: start; }
  .background-heading { margin-top: 3rem; }
  .contact-layout { grid-template-columns: minmax(0, 1fr); gap: 2rem; }
  .footer-main { grid-template-columns: 1fr 1fr; gap: 2rem 1.5rem; padding-block: 2.5rem; }
  .footer-identity { grid-column: 1 / -1; }
  .footer-identity .brand-name { max-width: none; font-size: 0.6875rem; }
  .footer-base { display: grid; gap: 0.2rem; }
  .design-switch { gap: 0 1rem; }
  .design-switch > span { flex-basis: 100%; padding-top: 0.5rem; }
}
@media (max-width: 360px) { .site-header .brand-name { display: none; } }
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior: auto !important; animation: none !important; transition: none !important; }
}

.ee-demo { min-width: 0; }
.ee-demo-stage { aspect-ratio: 4 / 3; background: #0b1118; overflow: hidden; }
.ee-demo-stage svg { display: block; width: 100%; height: 100%; }
.ee-demo-controls { display: flex; align-items: center; flex-wrap: wrap; gap: 12px 20px; padding: 18px 0 0; }
.ee-demo-controls[hidden] { display: none; }
.ee-demo-controls button { min-height: 44px; padding: 9px 14px; border: 1px solid var(--line, #555); background: transparent; color: inherit; font: inherit; font-size: 14px; cursor: pointer; }
.ee-demo-controls button[aria-pressed="true"] { border-color: var(--accent, #e6ba82); color: var(--accent, #e6ba82); }
.ee-demo-controls button:disabled { opacity: .6; cursor: default; }
.ee-mode { display: flex; gap: 6px; }
.ee-cutoff-control { display: grid; grid-template-columns: 1fr auto; flex: 1 1 150px; gap: 0 12px; font-size: 14px; }
.ee-cutoff-control input { grid-column: 1 / -1; width: 100%; min-width: 120px; min-height: 44px; margin: 0; accent-color: var(--accent, #e6ba82); cursor: pointer; }
.ee-cutoff-control output { font-variant-numeric: tabular-nums; }
.ee-demo-note { margin: 12px 0 0; color: var(--muted, #bac2cb); font-size: 13px; line-height: 1.5; }
.ee-demo-controls :focus-visible { outline: 2px solid var(--accent, #e6ba82); outline-offset: 4px; }

/* Personal projects are grouped by purpose in both review layouts. */
.project-picker { display: grid; grid-template-columns: 1fr 1fr 0.8fr; gap: 1.5rem; padding-block: 1rem; }
.project-category { min-width: 0; }
.category-label { font: 400 0.625rem/1.6 var(--mono); color: var(--accent); letter-spacing: 0.07em; text-transform: uppercase; }
.category-links { display: flex; flex-wrap: wrap; gap: 0 1.25rem; }
.project-picker a { min-height: 44px; }
@media (max-width: 600px) {
  .project-picker { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 1rem; }
  .project-category:last-child { grid-column: 1 / -1; }
}

/* Local captured-section tour and a centered architectural zoom. */
.ledger-window { position: relative; overflow: hidden; background: #0e140f; }
.ledger-film { position: absolute; top: 0; left: 0; width: 100%; }
.ledger-window .ledger-film img { display: block; width: 100%; height: auto; max-width: none; }
.ledger-capture-crop { aspect-ratio: 4 / 3; overflow: hidden; }
.ledger-capture-crop img { transform: translateY(-9.7777778%); }
.scene-motion-toggle { border: 0; background: transparent; padding: 0; min-height: 44px; color: inherit; font: inherit; cursor: pointer; }
.ledger-tour .scene-motion-toggle { color: var(--muted); font-size: .75rem; }
.hardware-scene { overflow: hidden; }
.hardware-scene > img { transform-origin: 50% 50%; }
.illustration-credit { display: flex; align-items: center; flex-wrap: wrap; gap: .5rem 1.5rem; }
.illustration-credit .scene-motion-toggle { text-decoration: underline; text-underline-offset: 4px; }

/* Native app capture floats in a theme-colored 4:3 artboard without baked-in bars. */
.catalog-stage { display: flex; align-items: center; overflow: hidden; background: var(--paper); }
.catalog-stage img { width: 100%; height: auto; -webkit-mask-image: linear-gradient(to bottom, transparent, #000 4%, #000 96%, transparent); mask-image: linear-gradient(to bottom, transparent, #000 4%, #000 96%, transparent); }

/* Keep the current role and degree visible; native disclosure holds supporting details. */
.credentials-details { margin-top: 2.5rem; border-block: 1px solid var(--line); }
.credentials-details summary { cursor: pointer; padding-block: 1.25rem; min-height: 44px; font-size: .875rem; font-weight: 600; }
.credentials-details summary::marker { color: var(--accent); }
.credentials-content { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(2rem, 5vw, 5rem); padding-block: .5rem 2rem; font-size: .9375rem; }
.credentials-content h4 { margin: 0 0 1rem; color: var(--accent); font: 400 .6875rem/1.6 var(--mono); letter-spacing: .08em; text-transform: uppercase; }
.credentials-content p, .technical-list { color: var(--muted); }
.technical-list { padding-left: 1.2rem; margin: 0 0 2rem; }
.technical-list li + li { margin-top: .6rem; }
.credential-list > div + div { border-top: 1px solid var(--line); margin-top: 1rem; padding-top: 1rem; }
.credential-list dt { font-weight: 600; }
.credential-list dd { color: var(--muted); margin-top: .25rem; }
@media (max-width: 700px) { .credentials-content { grid-template-columns: minmax(0, 1fr); } }

/* Matched 4:3 project introductions; native artwork and copy share one artboard. */
.layer-preview { display: block; width: 100%; height: auto; }
.layer-preview .slab { opacity: .65; transition: transform .2s ease, opacity .2s ease, filter .2s ease; }
.layer-preview .slab.is-demo-active { opacity: 1; transform: translateY(-7px); filter: brightness(1.3); }
.layer-preview .slab.is-demo-active .slab-top { stroke-opacity: 1; stroke-width: 2; }
@media (prefers-reduced-motion: reduce) { .layer-preview .slab { transition: none; } }

/* Refined cinematic chapters. */
.hero-photo { z-index: 0; }
.hero-scrim { z-index: 1; pointer-events: none; }
.hero-content { position: relative; z-index: 2; }
.hero-foot { z-index: 2; }
.hero-scrim { background: linear-gradient(0deg,rgba(0,0,0,.95),rgba(0,0,0,.75) 20%,rgba(0,0,0,.12) 55%,transparent 78%); }
h2 { font-size: clamp(2.25rem,4vw,3rem); line-height: 1; }
.eyebrow,.category-label { font-size: .75rem; }
.media-caption { font-size: .75rem; line-height: 1.6; }
.section-intro { padding-top: 4.5rem; padding-bottom: 2rem; }
.project,.project:nth-child(even) { grid-template-columns: minmax(0,.72fr) minmax(0,1.28fr); gap: 3rem; padding-block: 4rem; }
.project:first-child { padding-top: 2.5rem; }
.project .project-copy,.project:nth-child(even) .project-copy { grid-column: 1; grid-row: 1; }
.project .project-visual,.project:nth-child(even) .project-visual { grid-column: 2; grid-row: 1; }
.project h3 { font-size: clamp(3rem,4.5vw,4rem); line-height: 1; margin-bottom: 1.1rem; }
.project-copy > p:not(.eyebrow),.section-intro > p,.about-copy > p:not(.eyebrow) { font-size: 1rem; }
.layer-demo .project-stage { position: relative; }
.layer-artboard { position: absolute; inset: 0; display: grid; grid-template-columns: minmax(0,1fr) minmax(0,1.05fr); grid-template-rows: minmax(0,1fr); gap: 0; padding: 7% 4% 7% 6%; color: #f0f0fa; background: #0c0f17; overflow: hidden; }
.layer-artboard[data-kind="stack"] { background: #101511; }
.layer-information { display: flex; flex-direction: column; justify-content: space-between; min-width: 0; min-height: 0; padding-right: 6%; }
.layer-kicker { font: 400 .75rem/1.5 var(--mono); color: #b8c3cc; }
.layer-headline { font: 500 clamp(1.5rem,3vw,2.7rem)/1.1 var(--body); letter-spacing: -.04em; }
.layer-current { min-height: 5rem; display: flex; flex-direction: column; gap: .5rem; }
.layer-current span { font: 400 .75rem/1.4 var(--mono); }
.layer-current strong { font: 500 clamp(1rem,1.5vw,1.25rem)/1.25 var(--body); }
.layer-artboard .layer-preview { width: 100%; height: 100%; min-width: 0; min-height: 0; overflow: hidden; align-self: center; }
.gradient-preview-footer { align-items: start; }
.gradient-preview-footer .media-caption { flex: 1 1 16rem; max-width: 48ch; }
.field-layout { display: block; max-width: 1100px; }
.field-copy { display: grid; grid-template-columns: 1fr auto; align-items: end; gap: .5rem 2rem; margin-bottom: 1.75rem; }
.field-copy .eyebrow { grid-column: 1; }
.field-copy h2 { grid-column: 1; margin: 0; font-size: 3rem; }
.field-copy > p:not(.eyebrow) { display: none; }
.field-copy .button-link { grid-column: 2; grid-row: 1 / 3; margin: 0; }
.field-copy .source-link { grid-column: 2; margin: 0; justify-self: end; }
.field-gallery-position { font-size: .75rem; }
.field-track figcaption { padding: 4rem 1.5rem 1.5rem; }
.field-track figcaption span:first-child { font-size: 2rem; }
.hardware-scene { min-height: 420px; padding-block: 4rem; }
.hardware-copy h2 { font-size: clamp(2.5rem,4vw,3.5rem); line-height: 1; margin-block: .8rem; }
.hardware-copy h2 br { display: none; }
.illustration-credit { font-size: .75rem; }
.hardware-scene .scene-motion-toggle { opacity: 0; transition: opacity .15s; }
.hardware-scene .scene-motion-toggle:focus-visible { opacity: 1; }
@media(hover:hover) { .hardware-scene:hover .scene-motion-toggle { opacity: 1; } }
.about-section { padding-block: 3.5rem; }
.about-copy h2 { font-size: 3rem; line-height: 1; margin-block: 1rem 1.5rem; }
.about-portrait { max-width: 250px; }
.background-heading { margin-top: 2.5rem; }
.background-list { grid-template-columns: 1fr; }
.contact-section { padding-block: 2.5rem; }
.contact-layout h2 { font-size: 2rem; }
.footer-main { padding-block: 2.5rem; }
.appearance-control { display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; border: 1px solid var(--line); border-radius: 50%; background: transparent; color: var(--ink); padding: 0; }
.appearance-control:hover { border-color: var(--accent); }
.moon-icon { display: none; }
html[data-theme='light'] .moon-icon { display: block; }
html[data-theme='light'] .sun-icon { display: none; }
@media(max-width:1100px) {
  .project,.project:nth-child(even) { grid-template-columns: minmax(0,1fr); gap: 1.75rem; }
  .project .project-copy,.project:nth-child(even) .project-copy { grid-column: 1; grid-row: 1; }
  .project .project-visual,.project:nth-child(even) .project-visual { grid-column: 1; grid-row: 2; }
  .project-copy { max-width: 65ch; }
  .layer-headline { font-size: clamp(1.5rem,4vw,2.7rem); }
}
@media(max-width:600px) {
  .hero { min-height: max(740px,100svh); padding-top: 22rem; padding-bottom: 6rem; }
  .hero-photo img { object-position: 50% 75%; }
  .hero-scrim { background: linear-gradient(0deg,rgba(0,0,0,.96),rgba(0,0,0,.83) 22%,rgba(0,0,0,.2) 52%,transparent 68%); }
  .hero h1 { font-size: clamp(3.25rem,15.5vw,4.5rem); line-height: .96; }
  .section-intro { padding-top: 3rem; }
  .project,.project:nth-child(even) { padding-block: 2.5rem; }
  .project:first-child { padding-top: 1.5rem; }
  .project h3 { font-size: 2.5rem; }
  h2,.field-copy h2,.about-copy h2 { font-size: 2.25rem; }
  .layer-artboard { padding: 6% 3% 5% 5%; }
  .layer-headline { font-size: clamp(1.3rem,5.7vw,1.6rem); }
  .layer-kicker { font-size: .75rem; }
  .layer-current { min-height: 4.2rem; gap: .3rem; }
  .layer-current strong { font-size: 1rem; }
  .layer-current span { font-size: .75rem; }
  .field-section { padding-block: 3rem; }
  .field-copy { display: flex; flex-wrap: wrap; align-items: center; gap: .8rem 1rem; }
  .field-copy .eyebrow { flex-basis: 100%; }
  .field-copy h2 { flex-basis: 100%; }
  .field-copy .button-link { padding-inline: 1rem; }
  .field-copy .source-link { font-size: .8rem; }
  .hardware-scene { min-height: 340px; padding-bottom: 6rem; }
  .hardware-copy h2 { font-size: 2.25rem; }
  .illustration-credit { gap: .25rem 1rem; font-size: .6875rem; }
  .about-portrait { width: 65%; max-width: 230px; }
  .contact-layout { gap: 1.25rem; }
}

/* Compact mobile project directory: one category per row, equal link columns. */
@media (max-width: 600px) {
  .work-section .section-intro { gap: 1rem; padding-bottom: 1.5rem; }
  .work-section .section-intro h2 { margin-top: .6rem; }
  .project-picker { grid-template-columns: minmax(0, 1fr); gap: 0; padding-block: .25rem; }
  .project-category { padding-block: .75rem; }
  .project-category + .project-category { border-top: 1px solid var(--line); }
  .project-category:last-child { grid-column: auto; }
  .category-label { font-size: .6875rem; margin-bottom: .2rem; }
  .category-links { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 .75rem; }
  .project-picker a { font-size: .8125rem; line-height: 1.4; gap: .5rem; min-height: 44px; }
  .project-picker a span { flex-shrink: 0; }
}

.ee-harmonic-legend { display: flex; flex-wrap: wrap; gap: .25rem 1rem; margin-top: 1rem; color: var(--muted); font-size: .75rem; }

/* ---------- Hero: responsive photograph, title line, three routes ----------
   Own class names, so none of the .hero rules above apply. The header is fixed over the photo. */
@font-face { font-family: Barlow; src: url('assets/fonts/barlow-500.woff2') format('woff2'); font-weight: 500; font-display: swap; }
.intro-hero { position: relative; isolation: isolate; min-height: 100svh; display: flex; align-items: flex-end; background: #000; color: #f0f0fa; font-family: Barlow, var(--body); }
.intro-hero-media { position: absolute; inset: 0; z-index: -2; }
.intro-hero-media img { width: 100%; height: 100%; object-fit: cover; }
.intro-hero-scrim { position: absolute; inset: 0; z-index: -1; background:
  linear-gradient(to top, rgba(4,5,7,0.92) 0%, rgba(4,5,7,0.92) 8%, transparent 62%),
  linear-gradient(to bottom, rgba(4,5,7,0.55) 0%, transparent 30%); }
html[data-theme='light'] .intro-hero-scrim { background:
  linear-gradient(to top, rgba(12,11,8,0.72) 0%, rgba(12,11,8,0.72) 8%, transparent 62%),
  linear-gradient(to bottom, rgba(20,18,12,0.18) 0%, transparent 30%); }
.intro-hero-inner { padding-block: 64px 56px; } /* width comes from .page-width, which keeps the gutter */
.intro-hero-kicker { font-family: var(--mono); font-size: 14px; letter-spacing: 0.1em; text-transform: uppercase; color: #ffe8c4;
  display: block; margin: 0 0 18px; text-shadow: 0 0 2px rgba(0,0,0,0.75), 0 1px 4px rgba(0,0,0,0.6), 0 1px 14px rgba(0,0,0,0.5); }
.intro-hero h1 { font-family: var(--display); font-weight: 600; text-transform: none; line-height: 1.02; letter-spacing: 0.2px; margin: 0;
  font-size: clamp(48px, 9vw, 108px); color: #fff; text-shadow: 0 2px 30px rgba(0,0,0,0.35); }
.intro-hero-sub { margin: 20px 0 0; max-width: 46ch; font-size: clamp(17px, 2vw, 20px); line-height: 1.5; color: #eef0f2; }
.intro-hero-doors { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 36px; }
.intro-hero .door { display: inline-flex; flex-direction: column; gap: 3px; padding: 15px 22px; border-radius: 10px; text-decoration: none; min-height: 44px; justify-content: center; }
.intro-hero .door-label { font-weight: 600; font-size: 16px; }
.intro-hero .door-sub { font-size: 13px; opacity: 0.85; }
.intro-hero .door-primary { background: #e6ba82; color: #171008; }
.intro-hero .door-primary:hover { filter: brightness(1.08); }
.intro-hero .door-secondary { background: rgba(10,10,8,0.36); color: #fff; border: 1.5px solid rgba(255,255,255,0.4); }
.intro-hero .door-secondary:hover { border-color: #fff; background: rgba(10,10,8,0.5); }
.intro-hero :focus-visible { outline: 2px solid #e6ba82; outline-offset: 3px; }
.intro-hero-foot { position: absolute; left: 0; right: 0; bottom: 18px; z-index: 1; display: flex; justify-content: space-between; gap: 12px;
  font-family: var(--mono); font-size: 12px; letter-spacing: 0.06em; color: rgba(255,255,255,0.78); }
@media (max-width: 640px) {
  .intro-hero-foot { display: none; }
  .intro-hero-kicker { display: block; background: none; border: 0; padding: 0; font-size: 12px; letter-spacing: 0.06em; margin-bottom: 14px; text-shadow: 0 1px 12px rgba(0,0,0,0.5); }
  .intro-hero-doors { flex-direction: column; gap: 10px; margin-top: 28px; }
  .intro-hero .door { width: 100%; padding: 13px 18px; }
  .intro-hero-inner { padding-block: 40px 32px; }
  .intro-hero-scrim, html[data-theme='light'] .intro-hero-scrim { background:
    linear-gradient(to top, rgba(8,8,6,0.9) 0%, rgba(8,8,6,0.74) 42%, rgba(8,8,6,0.55) 60%, rgba(8,8,6,0.22) 74%, transparent 86%),
    linear-gradient(to bottom, rgba(4,5,7,0.55) 0%, transparent 30%); }
}
/* Technical background & credentials, always visible (replaces the collapsed <details>) */
.cred-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(2rem, 4vw, 4rem); }
.cred-group h4 { margin: 0 0 0.25rem; font: 400 0.6875rem/1.5 var(--mono); color: var(--accent); text-transform: uppercase; letter-spacing: 0.08em; }
.cred-group dl { margin: 0; }
.cred-group dl > div { border-top: 1px solid var(--line); padding-block: 1rem; }
.cred-group dl > div:first-child { margin-top: 0.75rem; }
.cred-group dt { font-size: 0.9375rem; font-weight: 600; line-height: 1.4; }
.cred-group dd { margin: 0.3rem 0 0; color: var(--muted); font-size: 0.875rem; line-height: 1.55; }
@media (max-width: 1100px) { .cred-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } .cred-group:first-child { grid-column: 1 / -1; } }
@media (max-width: 700px) { .cred-grid { grid-template-columns: minmax(0, 1fr); gap: 2rem; } }
/* gallery photos are no longer links; keep the frame the <a> used to give them */
.field-track figure > .field-photo { display: block; }

/* Larger screens: a soft shade behind the hero's text block, wherever it lands, keeps the plain title
   line and the role line readable over bright snow and cloud. It fades to clear inside its own box
   (closest-side), and the hero clips it so it can never widen the page. Phones keep their own
   stronger scrim and no shade. */
.intro-hero { overflow: hidden; overflow: clip; }
.intro-hero-inner { position: relative; }
.intro-hero-inner::before { content: ''; position: absolute; z-index: -1; pointer-events: none;
  left: -14%; right: 6%; top: -38%; bottom: -16%;
  background: radial-gradient(closest-side, rgba(4,5,7,0.64) 0%, rgba(4,5,7,0.56) 42%, rgba(4,5,7,0.3) 72%, transparent 100%); }
@media (max-width: 640px) { .intro-hero-inner::before { display: none; } }