/* Portfolio UI only. Original media, player behavior and case structures remain independent. */
:root { color-scheme: dark; background: #17101d; }
body.portfolio-case {
  --bg: #17101d;
  --ink: #f0e9f2;
  --text: #f0e9f2;
  --fg: #f0e9f2;
  --muted: #b5a7be;
  --accent: #e1ed62;
  --acid: #e1ed62;
  --purple: #e1ed62;
  --blue: #e1ed62;
  --line: #6b58724a;
  --panel: #251b2d;
  font-family: 'Golos Text', Arial, sans-serif;
  font-synthesis: none;
  color: var(--ink);
  background: linear-gradient(160deg, #24172b 0%, #1c1222 23%, #17101d 46%, #17101d 83%, #201527 100%);
  min-height: 100vh;
}
.portfolio-case .wrap { width: min(1280px, 92%); }
.portfolio-case header { width: min(1280px, 92%); margin-inline: auto; padding: 28px 0 24px; border-bottom: 1px solid var(--line); gap: 24px; }
.case-vlad-niki header.wrap { width: min(1280px, 92%); }
.portfolio-case header .author { font: 500 17px/1.35 'Golos Text', Arial, sans-serif; letter-spacing: -.035em; }
.portfolio-case header .author span { font-size: 11px; font-weight: 400; letter-spacing: .02em; color: var(--muted); }
.portfolio-case header nav { font-family: inherit; font-size: 12px; gap: 24px; }
.portfolio-case a:focus-visible, .portfolio-case button:focus-visible,
.portfolio-case summary:focus-visible, .portfolio-case video:focus-visible { outline: 3px solid var(--accent); outline-offset: 6px; }
.portfolio-case a:hover { color: var(--accent); }
.portfolio-case button { font-family: inherit; }
body.portfolio-case h1, body.portfolio-case h2, body.portfolio-case h3 {
  font-family: 'Sofia Sans Extra Condensed', sans-serif;
  font-weight: 900;
  letter-spacing: -.02em;
}
body.portfolio-case h1 {
  width: max-content;
  max-width: 100%;
  font-size: clamp(88px, 12vw, 180px);
  line-height: .87;
  text-transform: uppercase;
  background: url('spectrum-metal.svg') center / 100% 100% no-repeat;
  background-clip: text;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  /* Avoid visible seams where the display font's contours overlap. */
  -webkit-text-stroke: 0;
  filter: drop-shadow(0 2px 1px #080610);
}
body.portfolio-case h1 span { color: var(--accent); -webkit-text-fill-color: var(--accent); -webkit-text-stroke: 0; }
body.portfolio-case h2 { font-size: clamp(42px, 4.8vw, 76px); line-height: .97; }
.portfolio-case .lead { color: var(--ink); }
.portfolio-case .eyebrow, .portfolio-case .section-label,
.portfolio-case .section-mark, .portfolio-case .year { font-family: 'Golos Text', Arial, sans-serif; }
.portfolio-case .eyebrow { color: var(--muted); }
.portfolio-case .section-label, .portfolio-case .section-mark, .portfolio-case .year { color: var(--accent); }
.portfolio-case video[controls] { background: #0c0810; }
.portfolio-case footer { color: var(--muted); border-color: var(--line); }
.portfolio-trail, .case-pager { width: min(1280px, 92%); margin-inline: auto; }
.portfolio-trail { display: flex; justify-content: space-between; align-items: center; gap: 24px; padding: 16px 0; font: 500 11px/1.5 'Golos Text', Arial, sans-serif; text-transform: uppercase; letter-spacing: .04em; }
.portfolio-trail a { display: inline-flex; align-items: center; min-height: 44px; }
.portfolio-trail a:first-child { color: var(--accent); }
.portfolio-trail .case-position { color: var(--muted); }
.case-pager { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.5fr); gap: 8%; padding: 45px 0 55px; border-top: 1px solid var(--line); }
.case-pager a { text-decoration: none; }
.case-pager .case-back { display: flex; align-items: end; gap: 20px; color: var(--muted); font: 400 14px/1.5 'Golos Text', Arial, sans-serif; padding: 12px 0; }
.case-next { position: relative; display: block; padding-right: 65px; }
.case-next .case-label { display: block; margin-bottom: 18px; color: var(--muted); font: 500 11px/1.5 'Golos Text', Arial, sans-serif; letter-spacing: .055em; text-transform: uppercase; }
.case-next strong { display: block; font: 900 clamp(44px, 5vw, 74px)/.94 'Sofia Sans Extra Condensed', sans-serif; letter-spacing: -.02em; text-transform: uppercase; color: var(--ink); }
.case-next .case-arrow { position: absolute; right: 0; bottom: 0; font: 400 52px/1 Arial, sans-serif; color: var(--accent); }
.case-next:hover strong, .case-pager .case-back:hover { color: var(--accent); }
.case-contact { width: min(1280px, 92%); margin-inline: auto; padding: 44px 0; border-top: 1px solid var(--line); display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); gap: 8%; align-items: start; }
.case-dreamapp .case-contact, .case-vlad-niki .case-contact, .case-twitch .case-contact { width: 100%; }
.portfolio-case .case-contact-label { margin: 0; color: var(--muted); font: 500 11px/1.5 'Golos Text', Arial, sans-serif; letter-spacing: .04em; text-transform: uppercase; }
.portfolio-case .case-contact h2 { margin: 12px 0 0; font-size: clamp(32px, 3.4vw, 48px); line-height: 1; }
.case-contact-links { min-width: 0; }
.case-contact-links a { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 5px 16px; min-height: 70px; padding: 12px 0; border-bottom: 1px solid var(--line); text-decoration: none; }
.case-contact-links a:first-child { padding-top: 0; }
.case-contact-links a > span:first-child { color: var(--muted); font: 400 11px/1.5 'Golos Text', Arial, sans-serif; }
.case-contact-links strong { grid-column: 1; color: var(--ink); overflow-wrap: anywhere; font: 500 16px/1.5 'Golos Text', Arial, sans-serif; }
.case-contact-links .case-contact-arrow { grid-column: 2; grid-row: 1 / 3; align-self: center; color: var(--accent); font: 400 26px/1 Arial, sans-serif; }
.case-contact-links a:hover strong { color: var(--accent); }
/* Keep small labels in the reading face rather than the display face. */
body.case-po-krau .facts h2 { font: 500 14px/1.5 'Golos Text', Arial, sans-serif; color: var(--accent); }
.case-po-krau .history { background: #211629; color: var(--ink); }
.case-po-krau .history p, .case-po-krau .history figcaption { color: #cbbdd2; }
.case-po-krau .history .year, .case-po-krau .history a:hover { color: var(--accent); }
.case-po-krau .chapter + .chapter, .case-po-krau details { border-color: var(--line); }
.case-po-krau .episode-links a { background: var(--panel); }
.case-po-krau .episode-links a:hover { background: #30223b; }
.case-soax .film, .case-soax .details-section { background: #211629; color: var(--ink); }
.case-soax .vimeo { background: #120c18; }
.case-soax .media-note { color: var(--muted); }
.case-ulianovsk .stage-section, .case-ulianovsk .ai-section { background: #211629; color: var(--ink); }
.case-ulianovsk .ai-section p, .case-ulianovsk .ai-section figcaption { color: #cbbdd2; }
.case-ulianovsk .ai-section .section-label { color: var(--accent); }
.case-ulianovsk .image-label { background: #35263e; color: var(--accent); }
.case-ulianovsk .screen-fact, .case-ulianovsk .scheme { border-color: var(--line); }
body.case-vlad-niki h1 { font-size: clamp(76px, 8vw, 120px); }
body.case-spatial h1, body.case-ulianovsk h1 { font-size: clamp(76px, 8.6vw, 128px); }
.case-vlad-niki .wrap { width: min(1080px, 92%); }
.case-vlad-niki p { color: #cbbdd2; }
.case-vlad-niki .clip { background: #211629; }
.case-vlad-niki .favorite { background: #281c33e6; color: var(--accent); }
.case-vlad-niki .takeaway strong, .case-vlad-niki .music-flow { color: var(--accent); }
.case-vlad-niki .team dt { color: var(--ink); }
.case-spatial .book-band, .case-spatial .transneft-band { background: #211629; color: var(--ink); }
.case-spatial .label, .case-spatial .transneft-band .label { background: #35263e; color: var(--accent); }
.case-spatial .transneft-band .credit { color: var(--muted); }
.case-spatial .cube-visual img { background: #211629; }
.case-twitch p { color: #cbbdd2; }
.case-twitch header, .case-twitch .portfolio-trail, .case-twitch .case-pager { width: 100%; }
.case-twitch .stream-demo { background: var(--panel); border-color: var(--line); }
.case-twitch .demo-header, .case-twitch .stream-demo > figcaption { color: var(--muted); }
.case-twitch .demo-header i { background: var(--accent); }
.case-twitch .stream-source, .case-twitch .game-link, .case-twitch .replay { color: var(--accent); }
.case-twitch .summer .clip, .case-twitch .winter .clip { background: #211629; }
.case-dreamapp .portfolio-trail, .case-dreamapp .case-pager { width: 100%; }
.case-dreamapp > .portfolio-trail { width: min(1280px, 92%); }
.case-dreamapp .muted { color: var(--muted); }
.case-dreamapp .parameters { background: var(--panel); border-color: var(--line); }
.case-dreamapp .parameters dl > div, .case-dreamapp .format { border-color: var(--line); }
@media (max-width: 760px) {
  .portfolio-case .wrap { width: 90%; }
  .portfolio-case header { width: 90%; display: flex; flex-wrap: wrap; align-items: start; padding: 20px 0 12px; gap: 10px 20px; }
  .case-vlad-niki header.wrap { width: 90%; }
  .portfolio-case header .author { font-size: 14px; margin-right: auto; }
  .portfolio-case header .author span { font-size: 10px; }
  .portfolio-case header nav { width: 100%; order: 2; display: flex; flex-wrap: wrap; gap: 0 18px; font-size: 11px; margin-left: 0; }
  .portfolio-case header nav a, .portfolio-case header nav a:first-child { display: inline-flex; align-items: center; min-height: 44px; }
  .portfolio-case header #motion-toggle { order: 3; min-height: 44px; }
  body.portfolio-case h1, body.case-vlad-niki h1, body.case-spatial h1, body.case-ulianovsk h1 { font-size: clamp(64px, 20vw, 98px); line-height: .89; }
  body.case-vlad-niki h1, body.case-spatial h1, body.case-ulianovsk h1 { font-size: clamp(48px, 16vw, 88px); }
  .case-vlad-niki .opening-copy > * { min-width: 0; }
  body.portfolio-case h2 { font-size: clamp(38px, 9vw, 58px); line-height: .99; }
  body.case-po-krau .facts h2 { font-size: 14px; }
  .portfolio-trail, .case-pager { width: 90%; }
  .portfolio-trail { gap: 12px; font-size: 11px; padding: 8px 0; }
  .case-pager { grid-template-columns: minmax(0, 1fr); gap: 28px; padding: 30px 0 40px; }
  .case-contact { width: 90%; grid-template-columns: minmax(0, 1fr); gap: 26px; padding: 32px 0; }
  .portfolio-case .case-contact h2 { font-size: 36px; }
  .case-pager .case-back { align-items: center; min-height: 44px; font-size: 13px; }
  .case-next { padding-right: 50px; }
  .case-next strong { font-size: 48px; }
  .case-next .case-label { font-size: 10px; margin-bottom: 12px; }
  .case-next .case-arrow { font-size: 42px; }
  .case-twitch header { width: 100%; }
}
@media (prefers-reduced-motion: reduce) { .portfolio-case { scroll-behavior: auto; } }
@media (forced-colors: active) {
  body.portfolio-case h1 { background: none; -webkit-text-fill-color: CanvasText; -webkit-text-stroke: 0; filter: none; }
  body.portfolio-case h1 span { -webkit-text-fill-color: CanvasText; }
}