/* Slash-cut studio. One owner for the new composition and six UI effects. */
.diagonal-studio {
  --slash-angle: -5deg;
  --slash-violet: #baa6ff;
  --slash-ink: #06141c;
  --slash-white: #edfaff;
  --slash-aqua: #77f6e2;
  --slash-shift: 0px;
}
.diagonal-studio main { overflow: clip; }
.diagonal-studio .header { padding-right: max(var(--pad), 70px); }
.diagonal-studio .header .talk { transform: skewX(-10deg); }
.diagonal-studio .hero {
  grid-template-columns: minmax(0, .95fr) minmax(0, 1.05fr);
  grid-template-areas: 'meta meta' 'wordmark wordmark' 'copy stage' 'bottom bottom';
  padding-top: 28px;
  padding-bottom: 60px;
  column-gap: 28px;
  overflow: hidden;
  background: radial-gradient(ellipse at 80% 35%, #194659 0, transparent 47%), #06141c;
}
.diagonal-studio .hero-top { padding-bottom: 40px; }
.diagonal-studio .hero-title-row {
  margin: 16px -7% 34px;
  padding: clamp(28px, 4vw, 56px) 6%;
  transform: rotate(var(--slash-angle));
  border-width: 2px 0;
  border-color: var(--slash-aqua);
  z-index: 3;
}
.diagonal-studio .hero-title-row::before {
  background-image: linear-gradient(90deg, #06141c88, #06141c44), url('assets/editorial/violet-signal.webp?v=1');
}
.diagonal-studio .hero-copy { padding: 55px 0 30px; align-self: end; z-index: 5; }
.diagonal-studio .hero .eyebrow { border-left: 3px solid var(--slash-violet); padding-left: 14px; margin-bottom: 24px; }
.diagonal-studio .hero h1 { font-size: clamp(40px, 4.3vw, 65px); font-weight: 600; line-height: 1; }
.diagonal-studio .hero .meta-tag { font: 600 12px/1.5 'Courier New', monospace; letter-spacing: .12em; text-transform: uppercase; padding: 0; border: 0; margin-bottom: 20px; }
.diagonal-studio .hero-specialist { font-family: 'GGG Pixel', 'GGG Space', sans-serif; font-size: 1.16em; font-weight: 400; letter-spacing: -.025em; color: var(--slash-aqua); }
.diagonal-studio .hero .speech-mark { border: 0; font-size: .55em; padding: 0; margin-left: 12px; }
.diagonal-studio .hero-copy > p { max-width: 360px; }
.diagonal-studio .hero-art {
  margin: -64px 0 24px;
  height: clamp(480px, 43vw, 660px);
  transform: rotate(4deg);
  border-radius: 0;
  border-color: #8ee9e7;
  box-shadow: -12px 16px 0 #77f6e21a, 0 36px 70px #0008;
  z-index: 4;
}
.diagonal-studio .hero-art .art-coordinate { left: 5%; right: 5%; }
.diagonal-studio .hero-art .art-caption { left: 5%; right: 5%; }
.diagonal-studio .hero-bottom { margin-top: 30px; transform: rotate(-1deg); }
.diagonal-studio .hero-tools { gap: 9px; }
.diagonal-studio .button.filled { clip-path: polygon(0 0, 100% 0, calc(100% - 12px) 100%, 0 100%); padding-right: 30px; }

/* 1 — intersecting type ribbons, scrubbed by native page scrolling. */
.slash-crossing { position: relative; height: 130px; z-index: 5; background: #06141c; pointer-events: none; }
.slash-ribbon { position: absolute; width: 120%; left: -10%; overflow: hidden; padding: 14px 0; border-block: 1px solid currentColor; white-space: nowrap; }
.slash-ribbon span { display: block; width: max-content; font: 500 clamp(17px, 2vw, 27px)/1.1 'GGG Space', sans-serif; letter-spacing: -.035em; animation: slash-ticker 24s linear infinite; }
.ribbon-a { top: 20px; color: #06141c; background: #77f6e2; transform: translateX(var(--slash-shift)) rotate(-5deg); z-index: 2; }
.ribbon-b { top: 38px; color: #06141c; background: #baa6ff; transform: translateX(calc(var(--slash-shift) * -.6)) rotate(5deg); }
.ribbon-b span { animation-direction: reverse; animation-duration: 32s; font-family: 'Courier New', monospace; font-size: 15px; letter-spacing: .08em; }
@keyframes slash-ticker { to { transform: translateX(-40%); } }
.diagonal-studio .signal-strip { display: none; }

/* The work leads. The original lettering becomes an oblique spread. */
.diagonal-studio .work { padding-top: 44px; padding-bottom: 100px; background: #08121b; }
.diagonal-studio .work-heading { display: block; padding-top: 70px; }
.diagonal-studio .work-heading #work-title { width: 100%; max-width: none; padding: 30px 4%; margin-inline: 0; transform: rotate(-4deg); border: 1px solid #77f6e280; }
.diagonal-studio .motto-line { max-width: 88%; }
.diagonal-studio .motto-line:last-child { margin-left: 12%; }
.diagonal-studio .work-intro { max-width: none; display: flex; justify-content: space-between; align-items: end; margin-top: 50px; gap: 24px; padding-left: 8%; }
.diagonal-studio .work-intro p { font-size: 15px; }
.diagonal-studio .view-switch { margin: 0; min-width: 160px; }
.diagonal-studio .work-space { margin-top: 16px; }
.diagonal-studio .deck { left: 8%; right: -5%; }
.diagonal-studio .deck-guide { transform: rotateX(65deg) rotateZ(-9deg); }
.diagonal-studio .work-index > button:nth-child(2) { padding-left: 6%; }
.diagonal-studio .work-index > button:nth-child(3) { padding-left: 12%; }

/* Reading stays level inside the diagonal architecture. */
.diagonal-studio .approach { padding-top: 65px; padding-bottom: 100px; background: #e7f0f3; }
.diagonal-studio .approach::before { content: ''; position: absolute; inset: 0 0 auto; height: 45px; background: #08121b; clip-path: polygon(0 0, 100% 0, 0 100%); pointer-events: none; }
.diagonal-studio .approach-book { grid-template-columns: 1.05fr .95fr; }
.diagonal-studio .book-left { grid-column: 2; grid-row: 1; padding: 40px 0 40px 40px; }
.diagonal-studio .book-right { grid-column: 1; grid-row: 1; padding: 22px 32px 0 0; border-left: 0; border-right: 1px solid #9bb3bd; }
.diagonal-studio .book-left h2 { font-size: clamp(55px, 6vw, 94px); }
.diagonal-studio .book-left h2 em { display: inline-block; transform: rotate(-4deg); font-family: 'GGG Pixel', sans-serif; font-size: .84em; letter-spacing: -.025em; color: #145368; }
.diagonal-studio .services { margin-left: 8%; }
.diagonal-studio .serpents { padding-top: 40px; padding-bottom: 85px; background: #101525; }
.diagonal-studio .serpents .section-top { transform: rotate(-2deg); border-color: #baa6ff80; }
.diagonal-studio .serpent-copy h2 { font-family: 'GGG Space', sans-serif; font-weight: 500; }
.diagonal-studio .serpent-copy h2 em { font-family: 'GGG Pixel', sans-serif; font-size: .85em; color: #baa6ff; }
.diagonal-studio .serpent-theatre { border-left: 1px solid #baa6ff80; border-bottom: 1px solid #baa6ff80; transform: rotate(3deg); }
.diagonal-studio .yami-archive { background: #0b1824; padding-top: 50px; }
.diagonal-studio .yami-heading h2 { font-size: clamp(58px, 7.5vw, 116px); transform: rotate(-3deg); }
.diagonal-studio .yami-heading h2 em { font-family: 'GGG Pixel', sans-serif; font-style: normal; font-size: .76em; color: #77f6e2; letter-spacing: -.035em; }
.diagonal-studio .yami-journey { align-items: start; border-bottom: 0; margin-bottom: 65px; }
.diagonal-studio .yami-journey li { border-top: 1px solid #6a9da9; border-bottom: 1px solid #6a9da9; padding: 26px 24px 26px 0; }
.diagonal-studio .yami-journey li:nth-child(2) { margin-top: 34px; }
.diagonal-studio .yami-journey li:nth-child(3) { margin-top: 68px; }
.diagonal-studio .yami-rail { padding-block: 28px; }
.diagonal-studio .yami-artwork:nth-child(even) { margin-top: 28px; }
.diagonal-studio .world { padding-top: 50px; padding-bottom: 100px; background: #d7e9ed; }
.diagonal-studio .world h2 { font-weight: 600; max-width: 680px; }
.diagonal-studio .world-feature { border-top: 3px solid #10232c; }
.diagonal-studio .world-studies { gap: 7%; margin-top: 55px; }
.diagonal-studio .world-study:nth-child(2) { margin-top: 75px; }
.diagonal-studio .lab { padding-top: 45px; padding-bottom: 100px; background: #0d1725; }
.diagonal-studio .lab-heading { gap: 40px; padding-block: 30px; }
.diagonal-studio .lab h2 { font-size: clamp(48px, 5.4vw, 84px); }
.diagonal-studio .lab h2 em { display: inline-block; font-family: 'GGG Pixel', sans-serif; font-style: normal; font-size: .83em; transform: rotate(-3deg); color: #baa6ff; }
.diagonal-studio .lab-console { border-color: #6a9da9; background-color: #08141e; }
.diagonal-studio .quantum-link { margin-left: 8%; border-left: 5px solid #baa6ff; }
.diagonal-studio .contact { padding-top: 30px; background: #a0f0df; }
.diagonal-studio .contact h2 { font-size: clamp(78px, 11vw, 174px); transform: rotate(-3deg); }
.diagonal-studio .contact h2 em { font-family: 'GGG Pixel', sans-serif; font-style: normal; font-size: .86em; letter-spacing: -.04em; }

/* 2 — real variable-font weight follows attention, without replacing text. */
.kinetic-heading { font-variation-settings: 'wght' var(--type-weight, 500); transition: font-variation-settings 420ms ease, letter-spacing 420ms ease; }
.kinetic-heading.is-type-active { letter-spacing: -.035em; }

/* 3 — a finite diagonal light scan over the original image. */
.slash-scan { position: relative; overflow: hidden; isolation: isolate; }
.slash-scan::after { content: ''; position: absolute; inset: -40% -60%; z-index: 6; pointer-events: none; background: linear-gradient(105deg, transparent 42%, #c9ffef70 48%, #bba6ff40 51%, transparent 58%); transform: translateX(-90%); opacity: 0; }
.slash-scan.is-scan-active::after, .slash-scan:hover::after, .slash-scan:focus-within::after { animation: slash-image-scan 1100ms cubic-bezier(.2,.7,.15,1) both; }
@keyframes slash-image-scan { 0% { transform: translateX(-65%); opacity: 0; } 18%, 75% { opacity: .6; } 100% { transform: translateX(65%); opacity: 0; } }

/* 4 + 5 — pointer tracer and short-lived click pulses. Never intercept input. */
.slash-cursor { position: fixed; left: 0; top: 0; width: 34px; height: 34px; z-index: 100; pointer-events: none; border-top: 1px solid #77f6e2; border-right: 1px solid #77f6e2; opacity: 0; transform: translate3d(var(--cursor-x, -100px), var(--cursor-y, -100px), 0) rotate(-15deg); transition: transform 160ms ease-out, opacity 180ms; mix-blend-mode: difference; }
.slash-cursor.is-visible { opacity: .8; }
.slash-pulses { position: fixed; inset: 0; z-index: 2100; pointer-events: none; overflow: hidden; }
.slash-pulse { position: absolute; left: var(--pulse-x); top: var(--pulse-y); width: 45px; height: 45px; border: 1px solid #77f6e2; transform: translate(-50%, -50%) rotate(45deg); animation: slash-impact 650ms ease-out both; }
@keyframes slash-impact { to { transform: translate(-50%, -50%) rotate(45deg) scale(3); opacity: 0; } }

/* 6 — a native anchor index, with an observer-driven traveling marker. */
.slash-index { position: relative; z-index: 40; background: #06141c; color: #edfaff; padding: 15px var(--pad); border-bottom: 1px solid #6a9da966; }
.slash-index-label { display: block; font: 10px/1.5 'Courier New', monospace; letter-spacing: .1em; color: #b8d1db; margin-bottom: 9px; }
.slash-index-track { display: flex; position: relative; gap: 10px; flex-wrap: wrap; }
.slash-index a { display: flex; align-items: center; gap: 7px; padding: 12px; min-width: 44px; min-height: 44px; border: 1px solid #6a9da9; font: 11px/1.2 'Courier New', monospace; }
.slash-index a b { font-weight: 500; }
.slash-index a[aria-current='location'] { background: #77f6e2; color: #06141c; border-color: #77f6e2; }
.slash-index-indicator { display: none; }
.slash-index-track:not(:has([aria-current])) .slash-index-indicator { opacity: 0; }
.slash-index :focus-visible { outline-color: #77f6e2; }
@media (min-width: 1101px) {
  .slash-index { position: fixed; right: 8px; top: 25%; padding: 0; background: #06141ce8; border: 1px solid #6a9da966; width: 44px; }
  .slash-index-label { writing-mode: vertical-rl; padding: 12px; margin: 0; font-size: 9px; }
  .slash-index-track { display: block; }
  .slash-index a { width: 42px; min-width: 42px; border: 0; border-top: 1px solid #6a9da94a; padding: 13px 11px; }
  .slash-index a b { display: none; }
  .slash-index-indicator { display: block; position: absolute; width: 3px; height: 44px; background: #baa6ff; left: -2px; top: 0; transform: translateY(var(--index-y, 0px)); transition: transform 450ms cubic-bezier(.2,.7,.15,1); }
}
@media (max-width: 1100px) {
  .diagonal-studio .hero { column-gap: 22px; }
  .diagonal-studio .hero h1 { font-size: 42px; }
  .diagonal-studio .hero-art { margin-top: -25px; height: 500px; }
  .diagonal-studio .hero-title-row { margin-bottom: 18px; }
  .diagonal-studio .book-left { padding-left: 25px; }
  .diagonal-studio .book-right { padding-right: 22px; }
}
@media (max-width: 760px) {
  .diagonal-studio { --slash-angle: -3deg; }
  .diagonal-studio .header { padding-inline: 22px; }
  .slash-index { padding: 12px 22px; }
  .slash-index-label { font-size: 9px; }
  .slash-index-track { gap: 5px; }
  .slash-index a { padding: 8px; font-size: 9px; gap: 5px; }
  .diagonal-studio .hero { grid-template-columns: minmax(0,1fr); grid-template-areas: 'meta' 'wordmark' 'copy' 'stage' 'bottom'; padding-top: 22px; padding-bottom: 24px; }
  .diagonal-studio .hero-top { padding-bottom: 20px; font-size: 8px; }
  .diagonal-studio .hero-title-row { margin: 10px -10% 4px; padding: 26px 9%; gap: 14px; }
  .diagonal-studio .hero-copy { padding: 42px 0 24px; }
  .diagonal-studio .hero h1 { font-size: clamp(34px, 9vw, 62px); }
  .diagonal-studio .hero .meta-tag { font-size: 10px; margin-bottom: 18px; }
  .diagonal-studio .hero .eyebrow { font-size: 8px; gap: 12px; padding-left: 10px; }
  .diagonal-studio .hero-specialist { font-size: 1.2em; }
  .diagonal-studio .hero-art { transform: rotate(2deg); height: clamp(380px, 110vw, 550px); margin: 6px 0 20px; }
  .diagonal-studio .hero-art .art-coordinate, .diagonal-studio .hero-art .art-caption { font-size: 8px; }
  .diagonal-studio .hero-bottom { margin-top: 12px; font-size: 8px; }
  .slash-crossing { height: 100px; }
  .slash-ribbon { padding-block: 11px; }
  .ribbon-a { top: 10px; }
  .ribbon-b { top: 36px; }
  .ribbon-b span { font-size: 12px; }
  .diagonal-studio .work { padding-top: 25px; padding-bottom: 65px; }
  .diagonal-studio .work-heading { padding-top: 38px; }
  .diagonal-studio .work-heading #work-title { padding: 22px 3%; transform: rotate(-3deg); }
  .diagonal-studio .motto-line { max-width: 94%; }
  .diagonal-studio .motto-line:last-child { margin-left: 6%; }
  .diagonal-studio .work-intro { padding-left: 0; margin-top: 34px; align-items: center; gap: 15px; }
  .diagonal-studio .work-intro p { font-size: 11px; }
  .diagonal-studio .view-switch { min-width: 118px; }
  .diagonal-studio .deck { left: 0; right: 0; }
  .diagonal-studio .approach { padding-top: 40px; padding-bottom: 60px; }
  .diagonal-studio .approach::before { height: 24px; }
  .diagonal-studio .approach-book { grid-template-columns: minmax(0,1fr); }
  .diagonal-studio .book-left, .diagonal-studio .book-right { grid-column: auto; grid-row: auto; padding: 24px 0; border: 0; }
  .diagonal-studio .book-left h2 { font-size: clamp(49px, 12vw, 72px); }
  .diagonal-studio .services { margin-left: 0; }
  .diagonal-studio .serpents { padding-top: 22px; padding-bottom: 50px; }
  .diagonal-studio .serpent-theatre { transform: rotate(2deg); margin-inline: 0; }
  .diagonal-studio .serpent-copy h2 { font-size: clamp(49px, 12vw, 76px); }
  .diagonal-studio .yami-archive { padding-top: 28px; }
  .diagonal-studio .yami-heading h2 { font-size: clamp(51px, 12vw, 82px); }
  .diagonal-studio .yami-journey { margin-bottom: 36px; }
  .diagonal-studio .yami-journey li { padding: 20px 0; }
  .diagonal-studio .yami-journey li:nth-child(2), .diagonal-studio .yami-journey li:nth-child(3) { margin-top: 0; }
  .diagonal-studio .world { padding-top: 28px; padding-bottom: 60px; }
  .diagonal-studio .world h2 { font-size: clamp(45px, 11vw, 67px); }
  .diagonal-studio .world-studies { gap: 35px; margin-top: 32px; }
  .diagonal-studio .world-study:nth-child(2) { margin-top: 0; }
  .diagonal-studio .lab { padding-top: 28px; padding-bottom: 60px; }
  .diagonal-studio .lab-heading { padding: 0; }
  .diagonal-studio .lab h2 { font-size: clamp(39px, 9vw, 62px); }
  .diagonal-studio .quantum-link { margin-left: 0; }
  .diagonal-studio .contact h2 { font-size: clamp(74px, 21vw, 122px); }
  .slash-cursor { display: none; }
}
@media (max-width: 370px) {
  .diagonal-studio .header, .slash-index { padding-inline: 18px; }
  .diagonal-studio .hero .eyebrow { font-size: 7px; gap: 7px; }
  .diagonal-studio .hero h1 { font-size: 34px; }
  .diagonal-studio .hero-art .art-coordinate span { display: none; }
  .diagonal-studio .work-intro { display: block; }
  .diagonal-studio .view-switch { margin-top: 16px; max-width: 160px; }
}
body.paused .slash-ribbon span, body.paused .slash-scan::after { animation: none; }
body.paused .slash-cursor, body.paused .slash-pulse { display: none; }
body.paused .kinetic-heading, body.paused .slash-index-indicator { transition: none; }
@media (prefers-reduced-motion: reduce) {
  html:not(.motion-opt-in) .slash-ribbon span, html:not(.motion-opt-in) .slash-scan::after { animation: none; }
  html:not(.motion-opt-in) .slash-cursor, html:not(.motion-opt-in) .slash-pulse { display: none; }
  html:not(.motion-opt-in) .kinetic-heading, html:not(.motion-opt-in) .slash-index-indicator { transition: none; }
}
@media print { .slash-index, .slash-crossing, .slash-cursor, .slash-pulses { display: none; } }