/* Reference palette: graphite, machined silver, cyan light and amber edges.
   Foreground theme only. Video elements, masks, filters and playback stay unchanged. */
@font-face {
  font-family: Oxanium;
  src: url('../fonts/oxanium-variable.ttf') format('truetype');
  font-style: normal;
  font-weight: 200 800;
  font-display: swap;
}

:root {
  --ink: #0b0e12;
  --panel: #171d23;
  --ivory: #e8edf0;
  --muted: #b8c2ca;
  --copper: #ffb35c;
  --copper-light: #67e4ed;
  --logo-accent: #67e4ed;
  --line: rgba(197, 209, 219, .23);
  --steel: #d2dbe1;
  --steel-soft: #aebbc5;
  --cyan: #67e4ed;
  --amber: #ffb35c;
  --display: Oxanium, Manrope, Arial, sans-serif;
  --metal-surface: linear-gradient(150deg, #252c33 0%, #151a20 42%, #101419 100%);
}

body { background: var(--ink); color: var(--ivory); }
::selection { background: var(--cyan); color: #081114; }
:is(button, a, summary, input):focus-visible { outline-color: var(--cyan); }
.system.film-section, .connect.film-section {
  --line: rgba(197, 209, 219, .23);
  --muted: #b8c2ca;
  --copper-light: #67e4ed;
  color: var(--ivory);
}

/* Sharper display lettering, with restrained silver relief. */
h1, h2, h3, h4, .discipline-name, .network-statement,
.manifesto p, .menu-links a>b, .social-links>a, .hero-subtitle p {
  font-family: var(--display);
}
.hero h1, .section-heading h2, .about-copy h2,
.code-film-copy h2, .architecture-copy h2, .network-copy h2,
.connect h2, .concept-content>h2 {
  font-weight: 600;
  letter-spacing: -.035em;
  color: var(--steel);
  text-shadow: 0 1px 0 rgba(246, 252, 255, .08), 0 4px 16px rgba(0, 0, 0, .35);
}
.hero h1 { font-weight: 650; letter-spacing: -.055em; }
.hero h1>span { color: #dce4e9; }
.hero h1>.copper-text { color: var(--amber); text-shadow: 0 3px 26px rgba(255, 157, 53, .13); }
.hero-subtitle p { color: #d6dee4; font-weight: 500; letter-spacing: -.015em; }
.manifesto p { letter-spacing: -.035em; }
.manifesto span:first-child { color: #e4eaee; }
.manifesto span:nth-child(2) { color: #aebbc5; }
.manifesto span:last-child { color: var(--cyan); }
.film-section .section-heading .muted,
.system .section-heading .muted { color: var(--steel-soft); }
.code-film-copy h2 span:last-child,
.architecture-copy h2 span:last-child { color: var(--cyan); }
.connect h2 .copper-text { color: var(--amber); }
.connect h2>.connect-small { color: var(--steel-soft); font-weight: 400; }
.discipline-name { color: #e2e9ee; font-weight: 600; letter-spacing: -.035em; }
.expertise-item h3, .stack-layer h3,
.work-info h3.work-title, .work:nth-child(3) .work-info h3.work-title {
  color: #e2e9ee;
  font-weight: 600;
  letter-spacing: -.035em;
}
.network-copy h2 { color: #dce5e9; }
.network-statement { color: #e2e9ee; font-weight: 500; letter-spacing: -.035em; }
.network-statement:nth-child(2) { color: var(--cyan); }
.network-statement:last-child { color: var(--amber); }
.process-list h3 { color: var(--steel); }

@supports ((background-clip: text) or (-webkit-background-clip: text)) {
  /* Oxanium's uppercase accents extend above its tight line box.
     Extend each gradient's paint area without moving the text baselines. */
  .hero h1 { display: flex; flex-direction: column; }
  .hero h1>span {
    padding-block: .2em .1em;
    margin-block: -.2em -.1em;
  }

  .hero h1>span:first-child {
    background: linear-gradient(176deg, #f3f7fa 8%, #c9d3db 43%, #9eacb6 49%, #d8e2e9 74%, #b4c0c9 100%);
    background-clip: text;
    -webkit-background-clip: text;
    color: transparent;
    text-shadow: none;
  }
  .hero h1>.copper-text {
    background: linear-gradient(176deg, #ffe0b5, #ffb35c 53%, #ef9e43);
    background-clip: text;
    -webkit-background-clip: text;
    color: transparent;
    text-shadow: none;
  }
}

/* Graphite navigation and the existing logo at its approved dimensions. */
.header { background: linear-gradient(rgba(10, 13, 17, .7), transparent); border-bottom-color: rgba(199, 211, 222, .23); }
.header.is-scrolled { background: rgba(12, 16, 21, .93); border-bottom-color: rgba(103, 228, 237, .28); }
.uploaded-logo { filter: grayscale(1) drop-shadow(0 0 .6px rgba(220, 233, 242, .75)); }
.header-role { font-family: var(--display); font-weight: 700; letter-spacing: .15em; color: #d3dce3; }
.small-cross { color: var(--amber); }
.language-switch button { color: #b6c0c8; }
.language-switch button[aria-pressed=true] { color: var(--cyan); }
.language-switch button:hover, .menu-toggle:hover { color: var(--amber); }
.menu-toggle { font-family: var(--display); font-weight: 600; letter-spacing: .04em; }
.menu-toggle b { background: #d9e3e9; }
.menu-toggle:hover b { background: var(--cyan); }
.intro { background: #0c1014; }
.intro>span { color: var(--steel-soft); }
.intro>i:after { background: linear-gradient(90deg, var(--cyan), var(--amber)); }
.hero-edition, .hero-eyebrow, .hero-bottom>.mono,
.hero-film-label, .film-caption { color: #c7d2db; }
.hero-eyebrow i, .film-dot { background: var(--cyan); box-shadow: 0 0 14px rgba(103, 228, 237, .6); }
.thin-rule { background: linear-gradient(90deg, var(--cyan), rgba(103, 228, 237, .15)); }
.eyebrow, .overline, .about-copy .overline,
.code-film-copy .eyebrow, .architecture-copy .eyebrow,
.network-copy .eyebrow, .system .eyebrow, .connect .eyebrow { color: var(--amber); }
.film-section .cross, .system .cross, .connect .cross,
.portrait-corner { color: var(--cyan); }

/* Amber main action; dark metal secondary controls with cyan edges. */
.hero-cta, .hero-connect, .pill-button, .close-button,
.video-control, .motion-dock-button, .concept-action {
  font-family: var(--display);
  font-weight: 600;
  letter-spacing: .035em;
}
.hero-cta {
  color: #1c130b;
  background: linear-gradient(145deg, #ffd39a, #ffb35c 55%, #ee9b40);
  border: 1px solid #ffd092;
  border-radius: 3px;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .35), 0 5px 24px rgba(255, 157, 53, .14);
}
.hero-cta .round-arrow, .hero-cta:hover .round-arrow { color: #1c130b; }
.hero-cta:hover {
  color: #1c130b;
  background: linear-gradient(145deg, #ffe2b8, #ffc47d 55%, #ffb35c);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .5), 0 5px 30px rgba(255, 157, 53, .24);
}
.hero-connect, .network-link { color: var(--cyan); border-color: rgba(103, 228, 237, .55); }
.hero-connect:hover, .network-link:hover { color: var(--amber); border-color: var(--amber); }
.pill-button, .architecture-room .pill-button, .architecture-detail .pill-button {
  background: var(--metal-surface);
  color: #d8edf0;
  border-color: rgba(103, 228, 237, .55);
  border-radius: 3px;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .08), 0 5px 20px rgba(0, 0, 0, .2);
}
.pill-button:hover, .architecture-room .pill-button:hover,
.architecture-detail .pill-button:hover {
  background: linear-gradient(150deg, #27363d, #15252c);
  color: #effcfd;
  border-color: var(--cyan);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .1), 0 0 22px rgba(103, 228, 237, .12);
}
.architecture-room .pill-button[aria-pressed=true],
.architecture-detail .pill-button[aria-pressed=true] {
  color: var(--amber);
  border-color: var(--amber);
}
.video-control { color: #d4dfe7; }
.video-control-icon { color: var(--cyan); border-color: rgba(103, 228, 237, .55); background: rgba(12, 20, 25, .65); }
.video-control:hover { color: var(--amber); }
.video-control:hover .video-control-icon { color: var(--amber); border-color: var(--amber); }
.motion-dock-button { background: var(--metal-surface); color: #d6e0e7; border-color: #53636e; box-shadow: inset 0 1px 0 #ffffff0a, 0 5px 20px #0004; }
.motion-dock-button .motion-icon { color: var(--cyan); }
.motion-dock-button:hover { color: var(--amber); border-color: var(--amber); }
.close-button { color: var(--steel); }
.close-button:hover { color: var(--amber); }
.scroll-link { color: #c4d0d8; }
.scroll-link>span:last-child { color: var(--amber); }

/* Neutral, legible copy and metal panels above the original films. */
.hero-description, .about-copy>p, .code-film-copy>p:last-child,
.film-section .section-heading>p, .system .section-heading>p,
.expertise-body>p, .architecture-copy>p:last-of-type,
.network-copy>p:not(.eyebrow), .connect-bottom>p,
.process-list p, .stack-layer p { color: #c6d0d8; }
.about-copy blockquote { color: #dce5ea; border-color: var(--amber); }
.portrait figcaption { color: #c6d2da; border-top-color: #aebbc544; }
.expertise-list { background: rgba(16, 21, 27, .78); border-top-color: #bfcdd144; }
.expertise-item { border-bottom-color: #aebbc53b; }
.expertise-item[open] h3, .expertise-item:nth-child(n)[open] h3,
.expertise-item summary>i { color: var(--cyan); }
.expertise-item:nth-child(even)[open] h3 { color: var(--amber); }
.expertise-body h4 { color: #dce6ec; }
.tags span, .architecture-tags>span { color: #cedbe3; background: rgba(20, 28, 35, .7); border-color: rgba(103, 228, 237, .3); border-radius: 3px; }
.discipline-visual .viz-index, .process-list .mono,
.stack-layer>.mono, .network-statement>.mono { color: var(--amber); }
.discipline-rule { background: linear-gradient(90deg, var(--cyan), var(--amber)); }
.discipline-visual>p.mono { color: #bccbd4; }
.transformation { background: linear-gradient(145deg, rgba(34, 42, 50, .94), rgba(13, 18, 23, .94)); border-color: #b6c8d044; box-shadow: inset 0 1px 0 #ffffff0a, 0 24px 70px #0006; }
.transformation-toolbar { color: #afc0cc; border-color: #b4c5d02b; }
.transformation-toolbar>span:first-child { color: var(--cyan); }
.blueprint-board { background: linear-gradient(135deg, #141b22, #10171d); color: #d6dfe6; }
.code-bar { color: #b3c2ce; border-color: #b3c2ce33; }
.source-code { color: #d4dfe7; }
.code-purple { color: var(--amber); }
.code-green { color: var(--cyan); }
.code-blue { color: #d4dfe7; }
.code-bottom { color: #a8bbc8; }
.experience-copy { color: #e0e9ee; }
.experience-copy>.mono { color: var(--cyan); }
.experience-copy h3 { font-weight: 600; letter-spacing: -.035em; }
.experience-copy h3 span:last-child { color: var(--amber); }
.experience-caption { color: #c0d0d9; }
.split-line { background: var(--amber); }
.split-line>i { background: var(--amber); color: #1c130b; box-shadow: 0 0 0 6px #ffb35c1c; }
.transform-labels { color: #c3d1da; }
.transform-labels output { color: var(--amber); }
.transform-control input { accent-color: var(--amber); }
.transform-control>p { color: #b2c2cd; }
.process-list article, .stack-layer { border-color: #b7c7d13d; }
.system-stack { border-top-color: #b7c7d157; }
.architecture-detail.is-xray .stack-layer h3 { color: var(--cyan); }
.network-statement { border-bottom-color: #b7c7d14a; }
.work, .work:nth-child(3) { border-color: #b7c7d13d; }
.work:has(.work-trigger:hover), .work:focus-within { border-color: rgba(103, 228, 237, .65); }
.work-art-id, .work-forma .work-art-id { color: #d6e0e7; }
.work-type { color: var(--amber); }
.work-subtitle { color: #c4d0d9; }
.work-concept { color: #bdcbd5; border-top-color: #bccbd34d; }
.work-info svg, .work-trigger:hover .work-info svg { color: var(--cyan); }
.social-links>a { font-weight: 500; color: #dce7ed; border-color: rgba(103, 228, 237, .44); }
.social-links small { color: #b9cbd5; }
.social-links>a:hover { color: var(--cyan); border-color: var(--cyan); }
.social-links>a:nth-child(2):hover { color: var(--amber); border-color: var(--amber); }
.footer-legal { color: #bac6cf; }
.footer-legal p+p, .footer-tools { color: #aebec9; }
.footer-tools a:hover, .footer-tools button:hover { color: var(--cyan); }

/* Matching drawers, detail windows and pointer accents. */
.menu-dialog { background: radial-gradient(ellipse at 100% 20%, #27343d, #10161c 62%); color: #e3ebf0; }
.menu-top, .menu-bottom, .concept-top { border-color: #a9bdc93d; }
.menu-links a>b { font-weight: 500; letter-spacing: -.025em; }
.menu-links a>span { color: var(--amber); }
.menu-links a:hover { color: var(--cyan); border-color: rgba(103, 228, 237, .3); }
.menu-top>.mono, .menu-bottom { color: #b6c7d2; }
.concept-dialog { background: var(--metal-surface); color: #e0e9ee; border-color: #66818e; }
.concept-top { color: var(--amber); }
.concept-subtitle { color: var(--cyan); }
.concept-content>p:not(.concept-subtitle), .concept-detail p { color: #c1ced8; }
.concept-action { color: var(--cyan); }
.concept-action .round-arrow { border-color: rgba(103, 228, 237, .55); }
.concept-action:hover { color: var(--amber); }
.cursor { border-color: rgba(103, 228, 237, .78); }
.cursor i { background: var(--cyan); }
.pointer-trail { background: var(--cyan); }
.click-ring { border-color: var(--amber); }
.page-progress span { background: linear-gradient(90deg, var(--cyan), #c7d7df 55%, var(--amber)); }
.chapter-nav { mix-blend-mode: normal; }
.chapter-nav a { color: var(--cyan); }
.chapter-nav i { background: var(--cyan); }
.chapter-nav a[aria-current] i { background: var(--amber); }

@media (max-width: 600px) {
  .hero h1 { font-size: clamp(60px, 15.8vw, 94px); letter-spacing: -.05em; }
  .hero-subtitle p { font-size: 25px; }
  .menu-links a>b { font-size: clamp(24px, 7.1vw, 36px); }
  .work-info h3.work-title, .work:nth-child(3) .work-info h3.work-title { letter-spacing: -.04em; }
  .network-statement { letter-spacing: -.04em; }
}

@media print {
  .hero h1>span, .hero h1>.copper-text { background: none; color: #111; text-shadow: none; }
  h1, h2, h3, h4, .copper-text { color: #111; text-shadow: none; }
}