/* Data Skunkworks portfolio, dark only.
   Type and colour follow AI with Remy's system: a pixel display face for headlines (Jersey 15, standing in for
   PP Neue Bit), Inter for reading, uppercase Space Mono for labels and buttons, neutral greys and an electric blue.
   Sizes and spacing are in rem so the layout grows with the reader's text size. */
:root {
  --bg: #0f0f10;
  --raise: #161617;
  --raise-2: #1e1e20;
  --ink: #ededed;
  --ink-soft: #a3a3a3;
  --muted: #828282;
  --line: rgba(255, 255, 255, .1);
  --line-strong: rgba(255, 255, 255, .22);
  --blue: #4040ff;            /* fills: Remy's accent */
  --blue-ink: #9494ff;        /* the same blue, lifted for text on a dark ground */
  --blue-tint: rgba(64, 64, 255, .16);
  --link: #8f9cff;
  --green: #22c55e;
  --chip: rgba(15, 15, 16, .78);
  --bar: rgba(15, 15, 16, .8);
  --radius: .5rem;
  --radius-sm: .25rem;
  --wrap: 74rem;
  --gutter: max(1rem, min(4vw, 2.5rem));
  --pixel: 'Jersey 15', 'Space Mono', ui-monospace, monospace;
  --sans: 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --mono: 'Space Mono', ui-monospace, 'Courier New', monospace;
  --ease-out: cubic-bezier(.2, .8, .2, 1);   /* settles without overshoot, like a critically damped spring */
  color-scheme: dark;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0; background: var(--bg); color: var(--ink);
  font: 400 1rem/1.6 var(--sans); font-optical-sizing: auto;
  -webkit-font-smoothing: antialiased; -webkit-tap-highlight-color: transparent;
}
img { display: block; max-width: 100%; }
a { color: inherit; }
a:focus-visible, button:focus-visible { outline: 2px solid var(--blue-ink); outline-offset: 3px; border-radius: var(--radius-sm); }

.wrap { width: 100%; max-width: var(--wrap); margin: 0 auto; padding: 0 var(--gutter); }

/* Labels: small uppercase mono, positive tracking */
.kicker {
  margin: 0; font: 400 .71875rem/1.4 var(--mono); letter-spacing: .08em; text-transform: uppercase; color: var(--muted);
}
.kicker .dot { color: var(--blue-ink); }

/* Top bar: a translucent material that content scrolls under. Its edge only appears once something is under it. */
.top { position: sticky; top: 0; z-index: 20; background: var(--bar);
  -webkit-backdrop-filter: blur(20px) saturate(170%); backdrop-filter: blur(20px) saturate(170%); }
.top::after { content: ''; position: absolute; left: 0; right: 0; top: 100%; height: 1px; pointer-events: none;
  background: var(--line); opacity: 0; transition: opacity .25s ease; }
.top.under::after { opacity: 1; }
.top .wrap { display: flex; align-items: center; justify-content: space-between; gap: 1rem; min-height: 3.6875rem; }
.mark { display: inline-flex; align-items: center; padding: .5rem 0; text-decoration: none;
  font: 400 1.5rem/1 var(--pixel); letter-spacing: .04em; text-transform: uppercase; color: var(--blue-ink); }
.mark i { display: none; }
.nav { display: flex; gap: .125rem; margin-right: -.625rem; font: 400 .71875rem/1 var(--mono); letter-spacing: .08em; text-transform: uppercase; }
.nav a { padding: .875rem .625rem; text-decoration: none; color: var(--ink-soft); border-radius: var(--radius-sm); }
.nav a:active { opacity: .6; transition: opacity 100ms ease-out; }

/* Home hero: the pixel face, big and tight */
.hero { padding: clamp(3rem, 9vw, 7rem) 0 clamp(2.25rem, 6vw, 4rem); }
.byline { display: flex; align-items: center; gap: .875rem; }
.avatar { width: 3rem; height: 3rem; flex: none; border-radius: 50%; object-fit: cover; background: var(--raise-2);
  box-shadow: 0 0 0 1px var(--line-strong); }
.hero h1 {
  margin: 1.125rem 0 0; max-width: 20ch; font: 400 clamp(3.25rem, 9vw, 7rem)/.88 var(--pixel); letter-spacing: -.01em;
  text-wrap: balance;
}
.piece h1, .lost h1 { text-wrap: balance; }
.hero h1 em { font-style: normal; color: var(--blue-ink); }
.hero .lede { margin: 1.5rem 0 0; max-width: 56ch; text-wrap: pretty; font-size: clamp(1rem, 1.5vw, 1.125rem); line-height: 1.6; color: var(--ink-soft); }

/* Cards. Feedback lands on press, not on release. */
.featured, .card { text-decoration: none; -webkit-user-select: none; user-select: none; }
.featured { display: grid; grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr);
  background: var(--raise); border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden;
  transition: transform 100ms ease-out; }
.featured .thumb { aspect-ratio: 16 / 10; border-radius: 0; border: 0; }
.featured .meta { padding: clamp(1.375rem, 3vw, 2.25rem); display: flex; flex-direction: column; justify-content: center; gap: .875rem; }
.featured h2 { margin: 0; font: 700 clamp(1.625rem, 2.8vw, 2.125rem)/1.15 var(--sans); letter-spacing: -.025em; }
.featured p.sum { margin: 0; color: var(--ink-soft); }
.featured .go { align-self: flex-start; margin-top: .5rem; padding: .75rem 1.25rem; border: 1px solid var(--line-strong); border-radius: var(--radius-sm);
  box-shadow: inset -2px -2px 0 rgba(0, 0, 0, .45); background: var(--raise-2);
  font: 400 .75rem/1 var(--mono); letter-spacing: .06em; text-transform: uppercase; color: var(--ink); }
.featured:active { transform: scale(.99); }

.section-head { display: flex; align-items: baseline; justify-content: space-between; gap: 1rem; margin: clamp(3.5rem, 8vw, 6rem) 0 1.375rem; }
.section-head h2 { margin: 0; font: 700 clamp(1.5rem, 2.6vw, 1.75rem)/1.2 var(--sans); letter-spacing: -.02em; }
.grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(1.25rem, 2.4vw, 1.875rem) clamp(1.125rem, 2.4vw, 1.875rem); }
.card { display: flex; flex-direction: column; gap: .75rem; }
.card .thumb { aspect-ratio: 16 / 10; transition: transform 100ms ease-out; }
.card h3 { margin: .25rem 0 0; font: 600 1.1875rem/1.3 var(--sans); letter-spacing: -.015em; }
.card p.sum { margin: 0; font-size: .9375rem; line-height: 1.55; color: var(--ink-soft); }
.card:active .thumb { transform: scale(.98); }

.thumb { position: relative; overflow: hidden; background: var(--raise-2); border: 1px solid var(--line); border-radius: var(--radius); }
.thumb img { width: 100%; height: 100%; object-fit: cover; transition: transform .45s var(--ease-out); }
.thumb .tag { position: absolute; left: .625rem; top: .625rem; padding: .375rem .5rem; border-radius: var(--radius-sm);
  background: var(--chip); color: var(--blue-ink); border: 1px solid rgba(148, 148, 255, .35);
  font: 400 .65625rem/1 var(--mono); letter-spacing: .08em; text-transform: uppercase;
  -webkit-backdrop-filter: blur(8px) saturate(160%); backdrop-filter: blur(8px) saturate(160%); }

/* Hover is a pointer-only nicety; touch screens never get stuck hover states */
@media (hover: hover) and (pointer: fine) {
  .nav a:hover { color: var(--ink); background: var(--line); }
  .featured:hover .go { border-color: var(--blue-ink); color: var(--blue-ink); }
  .featured:hover .thumb img { transform: scale(1.02); }
  .card:hover h3 { color: var(--blue-ink); }
  .card:hover .thumb img { transform: scale(1.03); }
}

/* About */
.about { margin: clamp(4rem, 9vw, 7rem) 0 0; padding: clamp(1.75rem, 4vw, 2.75rem) 0 0; border-top: 1px solid var(--line);
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 2fr); gap: 1.5rem; }
.about h2 { margin: 0; font: 700 clamp(1.5rem, 2.6vw, 1.75rem)/1.2 var(--sans); letter-spacing: -.02em; }
.about p { margin: 0 0 .875rem; max-width: 62ch; color: var(--ink-soft); }
.about a { color: var(--link); text-underline-offset: .1875rem; }

.foot { margin-top: clamp(3.5rem, 8vw, 6rem); border-top: 1px solid var(--line); }
.foot .wrap { display: flex; flex-wrap: wrap; justify-content: space-between; gap: .75rem; padding-top: 1.375rem; padding-bottom: 2.125rem;
  font: 400 .6875rem/1.6 var(--mono); letter-spacing: .06em; text-transform: uppercase; color: var(--muted); }
.foot a { color: var(--ink-soft); text-underline-offset: .1875rem; }

/* Piece page */
.piece { padding-top: clamp(1.25rem, 3vw, 2.5rem); }
.back { display: inline-block; margin: 0 0 1.25rem -.5rem; padding: .625rem .5rem; border-radius: var(--radius-sm);
  font: 400 .71875rem/1 var(--mono); letter-spacing: .08em; text-transform: uppercase; color: var(--ink-soft); text-decoration: none; }
.back:active { opacity: .6; }
.piece h1 { margin: .875rem 0 0; max-width: 20ch; font: 400 clamp(2.875rem, 6.6vw, 5.25rem)/.9 var(--pixel); letter-spacing: -.005em; }
.standfirst { margin: 1.25rem 0 0; max-width: 60ch; font-size: clamp(1rem, 1.6vw, 1.1875rem); line-height: 1.55; color: var(--ink-soft); }

/* The stage holds the live piece. A poster, dimmed to focus on the one action, until it is started. */
.stage { position: relative; margin-top: clamp(1.625rem, 4vw, 2.5rem); height: min(78vh, 52rem); min-height: 26rem;
  background: var(--raise-2); border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; }
.stage .poster { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.stage::before { content: ''; position: absolute; inset: 0; z-index: 1; background: rgba(8, 8, 10, .42); transition: opacity .3s ease; pointer-events: none; }
.stage iframe { position: absolute; inset: 0; z-index: 2; width: 100%; height: 100%; border: 0; background: transparent;
  opacity: 0; transition: opacity .35s ease; }
.stage.live iframe { opacity: 1; }
.stage.live::before { opacity: 0; }
/* Remy's primary button: light, square-cornered, mono caps, with a bevel */
.stage .start { position: absolute; z-index: 3; left: 50%; top: 50%; transform: translate(-50%, -50%);
  display: inline-flex; align-items: center; gap: .625rem; min-height: 2.75rem; padding: .875rem 1.5rem; white-space: nowrap;
  border: 1px solid #cccccc; border-radius: var(--radius-sm); background: #ffffff; color: #121212;
  box-shadow: inset -2px -2px 0 #e3e3e3, 0 .625rem 2.5rem rgba(0, 0, 0, .5);
  text-decoration: none; cursor: pointer; font: 400 .75rem/1 var(--mono); letter-spacing: .06em; text-transform: uppercase;
  transition: transform 100ms ease-out, opacity .2s ease; }
.stage .start:active { transform: translate(-50%, -50%) scale(.96); box-shadow: inset 2px 2px 0 #e3e3e3; }
.stage .start svg { width: .75rem; height: .75rem; color: var(--blue); }
.stage .note { position: absolute; z-index: 3; left: 50%; top: calc(50% + 2.375rem); transform: translateX(-50%); white-space: nowrap;
  padding: .375rem .625rem; border-radius: var(--radius-sm); background: rgba(15, 15, 16, .78); color: #ededed;
  -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); font: 400 .6875rem/1.3 var(--mono); letter-spacing: .04em; text-transform: uppercase;
  transition: opacity .2s ease; }
.stage.loading .start, .stage.loading .note, .stage.live .start, .stage.live .note { opacity: 0; pointer-events: none; }
.stage .status { position: absolute; z-index: 3; left: 50%; top: 50%; transform: translate(-50%, -50%); display: none; align-items: center; gap: .625rem;
  padding: .625rem .875rem; border-radius: var(--radius-sm); background: rgba(15, 15, 16, .78); color: #ededed;
  font: 400 .71875rem/1 var(--mono); letter-spacing: .08em; text-transform: uppercase;
  -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); }
.stage.loading .status { display: inline-flex; }
.stage .status i { width: .75rem; height: .75rem; border-radius: 50%; border: 2px solid var(--blue-ink); border-right-color: transparent;
  animation: spin .8s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }

.stage-bar { display: flex; flex-wrap: wrap; gap: .25rem 1rem; margin: .5rem 0 0 -.5rem; font: 400 .71875rem/1.3 var(--mono); letter-spacing: .08em; text-transform: uppercase; }
.stage-bar a { color: var(--blue-ink); text-decoration: none; padding: .625rem .5rem; border-radius: var(--radius-sm); }
.stage-bar a:active { opacity: .6; }
@media (hover: hover) and (pointer: fine) {
  .back:hover { color: var(--ink); background: var(--line); }
  .stage-bar a:hover { background: var(--blue-tint); }
}

.body { display: grid; grid-template-columns: minmax(0, 1fr) 18.75rem; gap: clamp(1.75rem, 5vw, 4.5rem); margin-top: clamp(2.25rem, 5vw, 3.5rem); }
.writeup h2 { margin: 2.25rem 0 .5rem; font: 700 1.25rem/1.3 var(--sans); letter-spacing: -.015em; }
.writeup h2:first-child { margin-top: 0; }
.writeup p { margin: 0 0 .875rem; max-width: 66ch; line-height: 1.7; color: var(--ink-soft); }
.writeup a { color: var(--link); text-underline-offset: .1875rem; }
.writeup strong { color: var(--ink); font-weight: 600; }
.facts { align-self: start; position: sticky; top: 5rem; padding: 1.25rem 1.375rem; background: var(--raise); border: 1px solid var(--line); border-radius: var(--radius); }
.facts dl { margin: 0; display: grid; gap: 1rem; }
.facts dt { font: 400 .65625rem/1.3 var(--mono); letter-spacing: .1em; text-transform: uppercase; color: var(--muted); }
.facts dd { margin: .25rem 0 0; font-size: .90625rem; line-height: 1.5; color: var(--ink); }
.facts dd a { color: var(--link); text-underline-offset: .1875rem; overflow-wrap: anywhere; }

.pager { display: grid; grid-template-columns: 1fr 1fr; gap: 1.125rem; margin-top: clamp(3rem, 7vw, 5rem); padding-top: 1.375rem; border-top: 1px solid var(--line); }
.pager a { text-decoration: none; display: flex; flex-direction: column; gap: .375rem; padding: .5rem 0; }
.pager a.next { text-align: right; align-items: flex-end; }
.pager a:active { opacity: .6; }
.pager span.t { font: 600 1.125rem/1.3 var(--sans); letter-spacing: -.015em; }
@media (hover: hover) and (pointer: fine) { .pager a:hover span.t { color: var(--blue-ink); } }

/* 404 */
.lost { padding: clamp(4rem, 12vw, 10rem) 0; }
.lost h1 { margin: 1rem 0 0; font: 400 clamp(3rem, 7vw, 5.5rem)/.9 var(--pixel); }
.lost p { color: var(--ink-soft); }
.lost a { color: var(--link); }

@media (max-width: 60rem) {
  .grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .featured { grid-template-columns: 1fr; }
  .body { grid-template-columns: 1fr; }
  .facts { position: static; }
}
@media (max-width: 38.75rem) {
  .grid { grid-template-columns: 1fr; }
  .nav .hide-sm { display: none; }
  .about { grid-template-columns: 1fr; }
  .stage { height: auto; min-height: 0; aspect-ratio: 4 / 3; }
  .pager { grid-template-columns: 1fr; }
  .pager a.next { text-align: left; align-items: flex-start; }
}

/* Reduced motion: no zooms or scaling, keep the quick cross-fades that explain what changed */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; }
  .thumb img, .card .thumb, .featured, .stage .start { transition: none !important; transform: none; }
  .featured:hover .thumb img, .card:hover .thumb img, .card:active .thumb, .featured:active { transform: none !important; }
  .stage .start:active { transform: translate(-50%, -50%); }
}
/* Reduced transparency: solid materials */
@media (prefers-reduced-transparency: reduce) {
  .top { background: var(--bg); -webkit-backdrop-filter: none; backdrop-filter: none; }
  .thumb .tag, .stage .note, .stage .status { background: #0f0f10; -webkit-backdrop-filter: none; backdrop-filter: none; }
}
/* More contrast: solid surfaces, defined borders, brighter secondary text */
@media (prefers-contrast: more) {
  :root { --line: var(--line-strong); --muted: var(--ink-soft); --ink-soft: var(--ink); }
  .top { background: var(--bg); -webkit-backdrop-filter: none; backdrop-filter: none; border-bottom: 1px solid var(--line-strong); }
  .thumb, .facts, .featured { border-color: var(--line-strong); }
}