/* The route frame owns geometry. Page styles only own content inside it. */
html { scrollbar-gutter: stable; }
body.has-rail { isolation: isolate; }
body.has-rail > main.route-frame {
  box-sizing: border-box; display: block; width: 100%; max-width: 1080px;
  margin: 0 auto; padding: 64px 48px 80px; min-height: 70vh;
}
body.has-rail > main.route-frame > :is(.home-work, .case-content) {
  width: 100%; max-width: none; margin: 0; padding: 0;
}
body.has-rail .route-frame > :is(.archive-intro, .hero),
body.has-rail .route-frame .case-hero { margin: 0 0 48px; padding: 0; max-width: none; }
body.has-rail .route-frame .work-section { max-width: none; margin: 0; padding: 0; }
body.has-rail .route-frame :is(.hero-headline, .case-title) {
  margin-top: 12px; font: 500 clamp(28px, 3vw, 36px)/1.25 var(--sans); letter-spacing: -.035em; max-width: 26ch;
}
body.has-rail .route-frame .hero-support { max-width: 65ch; font-size: 16px; line-height: 1.65; margin-top: 20px; }
body.has-rail .route-frame .hero-marquee { display: none; }
body.has-rail .route-frame .playground-grid { margin-top: 0; }
body.has-rail > .site-footer { box-sizing: border-box; width: 100%; max-width: 984px; margin: 0 auto 48px; padding: 24px 0; }
.mobile-shell-header { display: none; }
.site-rail__nav.marker-positioned.marker-animated .nav-marker { transition: transform 180ms cubic-bezier(.23,1,.32,1); }
button.nike-preview { border: 0; padding: 4px 0; background: transparent; color: inherit; font: inherit; text-align: left; cursor: pointer; }
.nike-preview:focus-visible { outline: 2px solid var(--accent); outline-offset: 4px; border-radius: 4px; }
body > .nike-photo { display: block; z-index: 150; max-height: calc(100dvh - 120px); width: min(260px, 70vw); pointer-events: none; }
body > .nike-photo img { display: block; width: 100%; height: auto; max-height: calc(100dvh - 140px); object-fit: contain; }
body > .nike-photo.is-visible { opacity: 1; visibility: visible; transform: none; }
body > .nike-photo.is-instant { transition: none; }
.route-status { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
body:not(.has-atmosphere) > .atmosphere { visibility: hidden; }
body:not(.has-atmosphere) .atmosphere * { animation-play-state: paused; }
/* Consistent quiet surfaces, with the scenery restricted to Home and About. */
body.has-rail .route-frame :is(.work-entry, .case-hero, .case-section) { position: relative; isolation: isolate; }
body.has-rail .route-frame :is(.work-entry, .case-hero, .case-section)::before {
  content: ''; position: absolute; inset: -16px; border-radius: 16px; z-index: -1; pointer-events: none;
  background: var(--atmosphere-glass, var(--surface)); border: 1px solid var(--atmosphere-edge, var(--rule));
}
/* Writing is not framed as a card; only project previews keep a surface. */
body.has-rail .route-frame :is(.case-hero, .case-section)::before { content: none; }
body.has-rail .route-frame .playground-card { border-radius: 16px; background: var(--atmosphere-glass, var(--surface)); }
@media (max-width: 979px) {
  body.has-rail > main.route-frame { padding: 28px 24px 56px; }
  body.has-rail > .site-footer { width: calc(100% - 48px); margin-bottom: 32px; }
  .mobile-shell-header { display: block; padding: 14px 24px 0; min-height: 112px; }
  .mobile-shell-header .site-controls { margin-left: 0; }
  .mobile-shell-header .rail-top { height: 44px; display: flex; align-items: center; justify-content: flex-start; margin: 0 0 12px; }
  .mobile-shell-header .hero-id { display: block; margin: 0; }
  .mobile-shell-header .hero-name { margin: 0; display: flex; align-items: center; gap: 10px; }
  .mobile-shell-header .hero-status { margin: 0; flex-basis: auto; }
  .mobile-shell-header .hero-role { margin-top: 4px; font-size: 14px; }
  body > .nike-photo { top: 124px; left: 24px; }
  body.has-rail .route-frame > :is(.archive-intro, .hero), body.has-rail .route-frame .case-hero { margin-bottom: 40px; }
  body.has-rail .route-frame :is(.work-entry, .case-hero, .case-section)::before { inset: -10px; }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .site-rail__nav.marker-positioned.marker-animated .nav-marker, body > .nike-photo { transition: none; }
}

.skip-content { position: fixed; top: 8px; left: 8px; z-index: 300; transform: translateY(-150%); padding: 10px 16px; color: var(--ink); background: var(--paper); border: 2px solid var(--accent); border-radius: 8px; }
.skip-content:focus { transform: none; }

/* A blue/violet night palette across the entire shared shell, including the rail. */
:root[data-theme='dark'] {
  --paper: #1b254e; --surface: #25315e; --ink: #f1efff;
  --muted: #c4c9e6; --subtle: #b1bbda; --rule: #414b78;
  --accent: #a7c5ff; --link: #a7c5ff; --marker: #a7c5ff;
  --selection: #48538c; --selection-ink: #fff;
}
body.has-rail { --atmosphere-glass: rgb(255 255 255 / 94%); --atmosphere-edge: rgb(83 108 137 / 18%); --rail-background: rgb(248 250 253 / 96%); }
:root[data-theme='dark'] body.has-rail { --atmosphere-glass: rgb(24 36 70 / 94%); --atmosphere-edge: rgb(161 181 232 / 20%); --rail-background: rgb(21 32 65 / 96%); }
body.has-rail .site-rail { background: var(--rail-background); }
:root[data-theme='dark'] .theme-toggle { background: #303b6c !important; }
:root[data-theme='dark'] .theme-toggle__thumb { background: #202b57; box-shadow: 0 0 0 1px #626d9c; }
/* Space belongs between sections, without a second padding layer inside them. */
body.has-rail #main-content section { padding-bottom: 0; }
body.has-rail .route-frame .case-section { border-bottom: 0; }
.about-intro-row { display: grid; grid-template-columns: minmax(0,1fr) auto; gap: 24px; align-items: start; }
body.has-rail .about-intro-row .hero-resume { display: inline-flex; width: auto; min-height: 44px; margin: 12px 0 0; padding: 10px 18px; white-space: nowrap; background: var(--surface); color: var(--accent); border: 1px solid var(--rule); border-radius: 10px; }
body.has-rail .about-intro-row .hero-resume:hover { border-color: var(--accent); }
body.has-rail > .site-footer { width: calc(100% - 96px); max-width: 984px; margin: 0 auto 40px; padding: 24px 0 0; display: flex; justify-content: space-between; align-items: center; gap: 20px; border: 0; background: none; }
body.has-rail > .site-footer::before { content: none; }
.site-footer__links { display: flex; flex-wrap: wrap; gap: 10px; }
@media (max-width: 1100px) { .about-intro-row { grid-template-columns: 1fr; gap: 16px; } body.has-rail .about-intro-row .hero-resume { justify-self: start; margin: 0; } }
@media (max-width: 979px) { body.has-rail > .site-footer { width: calc(100% - 48px); align-items: flex-start; flex-direction: column; margin-bottom: 32px; } }
@media (prefers-reduced-transparency: reduce), (prefers-contrast: more) {
  body.has-rail, :root[data-theme='dark'] body.has-rail { --atmosphere-glass: var(--paper); --atmosphere-edge: var(--rule); --rail-background: var(--paper); }
}

/* Day and night need separate contrast values, particularly over artwork. */
:root:not([data-theme='dark']) {
  --accent: #245bb8; --link: #245bb8; --link-hover: #173f83; --marker: #245bb8;
  --rule: #b7c0ca; --muted: #424e5c; --subtle: #526170;
}
:root[data-theme='dark'] { --rule: #67759e; --link-hover: #d6e3ff; }
:root:not([data-theme='dark']) body.has-rail { --rail-background: rgb(248 250 253 / 96%); --atmosphere-edge: rgb(83 108 137 / 18%); }
:root[data-theme='dark'] body.has-rail { --atmosphere-edge: rgb(161 181 232 / 20%); }
body.has-rail .site-rail { backdrop-filter: blur(20px) saturate(125%); -webkit-backdrop-filter: blur(20px) saturate(125%); }
body.has-rail .route-frame :is(p, .sec-body) > a:not(.work-entry):not(.playground-card),
body.has-rail .site-footer a { color: var(--link); text-decoration: underline; text-underline-offset: 4px; text-decoration-thickness: 1px; }
body.has-rail .site-footer { background: none; box-shadow: none; }
body.has-rail .site-footer a {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 44px; padding: 10px 16px; box-sizing: border-box;
  border: 1px solid var(--atmosphere-edge); border-radius: 999px;
  background: var(--atmosphere-glass); text-decoration: none;
  backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
}
body.has-rail .site-footer a:focus-visible { outline: 2px solid var(--link); outline-offset: 4px; }
body.has-rail .site-footer a:hover { border-color: var(--link); text-decoration: underline; }
/* The surface extends beyond content, so its radius includes that inset. */
body.has-rail .route-frame .work-entry { --card-padding: 16px; --media-radius: 12px; }
body.has-rail .route-frame .work-entry::before {
  inset: calc(-1 * var(--card-padding));
  border-radius: calc(var(--media-radius) + var(--card-padding));
}
body.has-rail .route-frame .work-media { border-radius: var(--media-radius); }
@media (max-width: 979px) { body.has-rail .route-frame .work-entry { --card-padding: 10px; } }
@media (prefers-reduced-transparency: reduce), (prefers-contrast: more) {
  body.has-rail .site-footer a { backdrop-filter: none; -webkit-backdrop-filter: none; }
}
body.has-rail .site-footer a:hover { color: var(--link-hover); }
@media (max-width: 979px) {
  body.has-rail .site-footer a { min-height: 44px; padding: 8px 0; border: 0; border-radius: 0; background: none; backdrop-filter: none; -webkit-backdrop-filter: none; }
  .site-footer__links { gap: 4px 20px; }
}
body.has-rail .route-frame .playground-card, body.has-rail .route-frame .playground-card-media { border-color: var(--rule); }
body.has-rail .site-rail__nav a, body.has-rail .site-rail__email { color: var(--ink); }
body.has-rail .site-rail__nav a[aria-current='page'] { color: var(--link); }
body.has-rail .route-frame :is(.spec-strip, .truth, .truths-matrix, .career-row, .process-step) { border-color: var(--rule); }
body.has-rail .about-intro-row .hero-resume { color: var(--link); background: var(--paper); border-color: var(--rule); }
@media (prefers-reduced-transparency: reduce), (prefers-contrast: more) {
  :root:not([data-theme='dark']) body.has-rail { --rail-background: var(--paper); }
  body.has-rail .site-rail { backdrop-filter: none; -webkit-backdrop-filter: none; }
}