/* martagarnelo.com. The look: an old amber terminal, after the home photo (Nov 2026). Warm black, putty text and one
   phosphor amber; IBM Plex Mono for the bar, menu and labels, IBM Plex Sans for reading, Courier Prime Bold for the
   big type, which is drawn like an amber CRT: glow, a faint red/blue fringe and scan lines. Fonts load in
   _layouts/default.html. Theme rules are at the end ("theme"); the base rules above them predate it. */

:root {
  --bg: #191714;
  --text: #d9d1bf;
  --white: #f4eedf;
  --hi: var(--white);
  --muted: #8a8273;
  --accent: #eea66b;   /* the phosphor amber, as the big letters render; every accent uses it */
  --glow: rgba(238,166,107,.55);
  --phos: #ffe4b5;     /* the bright scan lines of the big letters */
  --rule: rgba(217,209,191,.16);
  --wrap: 1160px;
  --light: 300;
  --font: "IBM Plex Sans", "Helvetica Neue", sans-serif;
  --label: "IBM Plex Mono", Menlo, monospace;
  --display: "Courier Prime", "Courier New", monospace;
  --display-weight: 700; --display-case: uppercase; --display-tracking: -.03em;
  --band1: var(--accent); --ink1: #191714;
  --band2: #24211c; --ink2: #d9d1bf;
  --band3: #d9cfb4; --ink3: #191714;
}

* { box-sizing: border-box; }
html, body { margin: 0; }
body {
  background: var(--bg);
  color: var(--text);
  font-family: var(--font);
  font-weight: var(--light);
  -webkit-font-smoothing: antialiased;
}
img { max-width: 100%; display: block; }
a { color: inherit; }

.wrap {
  max-width: calc(var(--wrap) + 32px);
  margin: 0 auto;
  padding: 0 16px;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}
main { flex: 1; }

/* ---------- nav ---------- */
.nav {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  padding-top: 72px;
  font-size: 44px;
  line-height: 1.2;
}
.nav a {
  color: var(--white);
  text-decoration: none;
  font-weight: var(--light);
  transition: color .2s;
}
.nav a.bold { font-weight: 600; }
.nav a:hover, .nav a.active { color: var(--accent); }

/* ---------- home ---------- */
.hero { position: relative; width: 600px; max-width: 100%; margin: 0 auto; padding-bottom: 8px; }
.hero-photo {
  width: 100%;
  aspect-ratio: 2 / 3;
  object-fit: cover;
}
.hero-name {
  position: absolute;
  left: 0; right: 0;
  bottom: 48px;
  margin: 0;
  text-align: center;
  font-family: var(--display);
  font-weight: 700;
  font-size: 52px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--white);
  text-shadow: 0 2px 18px rgba(0,0,0,.25);
}

/* ---------- press ---------- */
.press { margin: 0 30px 80px; }
.press-year {
  margin: 56px 0 12px;
  font-size: 14px;
  font-weight: 600;
  letter-spacing: .2em;
  color: var(--muted);
}
.press-year:first-child { margin-top: 0; }
.press-list { list-style: none; margin: 0; padding: 0; border-bottom: 1px solid var(--muted); }
.press-item {
  display: grid;
  grid-template-columns: 200px minmax(0, 1fr) auto;
  gap: 28px;
  align-items: center;
  padding: 20px 0;
  border-top: 1px solid var(--muted);
  text-decoration: none;
}
.press-list li:first-child .press-item { border-top-color: var(--text); }
.press-mark {
  display: flex;
  align-items: center;
  justify-content: center;
  aspect-ratio: 16 / 9;
  padding: 10px 14px;
  transition: opacity .2s;
}
/* Logos are one-colour cutouts (assets/img/press/mask/, made by tools/make_logo_masks.py)
   painted in the accent colour. */
.press-logo {
  width: 100%;
  height: 100%;
  background: var(--accent);
  -webkit-mask-position: center; -webkit-mask-size: contain; -webkit-mask-repeat: no-repeat;   /* image set inline on each logo */
  mask-position: center; mask-size: contain; mask-repeat: no-repeat;
}
.press-mark-name {
  font-family: var(--display);
  font-weight: 700;
  font-size: 13px;
  letter-spacing: .14em;
  text-transform: uppercase;
  text-align: center;
  line-height: 1.5;
  color: var(--accent);
}
.press-text { display: flex; flex-direction: column; gap: 6px; }
.press-outlet { font-size: 13px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: var(--muted); }
.press-title { font-size: 24px; font-weight: 600; line-height: 1.25; transition: color .2s; }
.press-note { font-size: 16px; color: var(--muted); }
.press-date { font-size: 16px; color: var(--muted); white-space: nowrap; }
a.press-item:hover .press-title { color: var(--accent); }
a.press-item:hover .press-mark { opacity: .7; }

/* ---------- videos (top of press) ---------- */
.videos { margin: 82px 30px 80px; }
.videos-heading { margin: 0 0 32px; font-size: 44px; font-weight: 600; line-height: 1.2; }
.video-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 40px 28px; }
.video { display: flex; flex-direction: column; gap: 6px; text-decoration: none; }
.video-thumb { display: block; aspect-ratio: 16 / 9; overflow: hidden; background: #000; margin-bottom: 8px; }
.video-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: grayscale(1);
  transition: filter .3s;
}
.video:hover .video-thumb img, .video:focus-visible .video-thumb img, .video:active .video-thumb img { filter: none; }
.video-title { font-size: 20px; font-weight: 600; line-height: 1.25; transition: color .2s; }
.video:hover .video-title { color: var(--accent); }
.video-meta { font-size: 14px; color: var(--muted); }

/* ---------- footer ---------- */
.social {
  display: flex;
  justify-content: flex-end;
  gap: 16px;
  padding: 24px 14px 40px;
}
/* icons are one-colour cutouts painted in the accent (image set inline, like the press logos) */
.social-icon { display: block; width: 26px; height: 26px; background: var(--accent); filter: drop-shadow(0 0 3px var(--glow));
  -webkit-mask-position: center; -webkit-mask-size: contain; -webkit-mask-repeat: no-repeat;
  mask-position: center; mask-size: contain; mask-repeat: no-repeat; transition: background-color .2s; }
.social a:hover .social-icon, .social a:focus-visible .social-icon { background: var(--phos); }

/* ---------- smaller screens ---------- */
@media (max-width: 900px) {
  .nav { font-size: 28px; padding-top: 40px; }
  .hero-name { font-size: 32px; bottom: 40px; }
  .press { margin: 0 0 56px; }
  .press-item { grid-template-columns: 140px minmax(0, 1fr); gap: 20px; }
  .press-date { grid-column: 2; }
  .press-title { font-size: 20px; }
  .videos { margin: 48px 0 56px; }
  .videos-heading { font-size: 28px; }
  .video-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 32px 20px; }
}
@media (max-width: 520px) {
  .nav { font-size: 20px; }
  .hero-name { font-size: 20px; bottom: 24px; letter-spacing: .1em; }
  .press-item { grid-template-columns: 96px minmax(0, 1fr); gap: 14px; padding: 16px 0; }
  .press-mark { padding: 6px 8px; }
  .press-mark-name { font-size: 9px; letter-spacing: .1em; }
  .press-outlet { font-size: 11px; }
  .press-title { font-size: 17px; }
  .press-note, .press-date { font-size: 14px; }
  .videos-heading { font-size: 20px; }
  .video-grid { grid-template-columns: 1fr; }
  .video-title { font-size: 17px; }
}
@media (max-width: 380px) {
  .nav { font-size: 17px; }
}

/* ---------- theme ---------- */
/* "html" in front raises these above the page stylesheets (art.css, research.css), which load later. */
html .rv { --ra: var(--accent); --rb: var(--bg); --line: var(--white); }
body { background: var(--bg) repeating-linear-gradient(0deg, rgba(244,238,223,.018) 0 1px, transparent 1px 3px); }
html .wrap { max-width: calc(var(--wrap) + 64px); padding: 0 32px; }
::selection { background: var(--accent); color: var(--bg); }
@keyframes blink { 50% { opacity: 0; } }
@keyframes flicker { 0%, 100% { opacity: 1; } 47% { opacity: .96; } 50% { opacity: .9; } 53% { opacity: .97; } }

/* top bar: name left, menu right */
html .top { display: flex; justify-content: space-between; align-items: center; gap: 24px; padding: 22px 0; border-bottom: 1px solid var(--rule); }
html .brand { display: block; font: 500 14px var(--label); letter-spacing: .16em; text-transform: uppercase; color: var(--white); text-decoration: none; }
html .nav { padding: 0; font: 400 14px var(--label); gap: 30px; justify-content: flex-end; }
html .nav a, html .nav a.bold { font-weight: 400; color: var(--text); }
html .nav a:hover, html .nav a.active { color: var(--accent); text-shadow: 0 0 .5em var(--glow); }
html .nav a:first-child { display: none; }
html .nav a.active::before { content: "> "; }

/* home: the name over the photo, on two lines, typed out by assets/js/home.js */
html .hero { width: auto; display: block; position: relative; margin: 36px 0 24px; }
html .hero-photo { width: 44%; margin-left: auto; margin-right: 6%; }
html .hero-name { position: absolute; left: 0; right: 0; bottom: 6%; margin: 0; text-align: left; font: 700 clamp(64px, 14vw, 210px)/.85 var(--display);
  letter-spacing: -.03em; text-transform: uppercase; }
html .hero-name > span { display: block; white-space: nowrap; min-height: .85em; }
html .hero-name > span.caret::after, html .hero-name:not([data-typing]) > span:last-child::after { content: ""; display: inline-block; width: .45em; height: .6em;
  margin-left: .06em; background: var(--accent); box-shadow: 0 0 .12em var(--glow); animation: blink 1.1s steps(1) infinite; }
html .hero-name.typing > span.caret::after { animation: none; }

/* the big type: an amber CRT */
html .rv h2, html .videos-heading, html .where-text, html .art-h, html .proj h2, html .papers-h {
  font-family: var(--display); font-weight: 700; letter-spacing: -.03em; text-transform: uppercase; }
html .hero-name, html .art-h, html .rv h2 .rv-title, html .rv-1 .rv-num, html .videos-heading, html .where-text, html .proj h2,
html .papers-h .papers-t, html .papers-h .papers-n {
  color: transparent; -webkit-background-clip: text; background-clip: text;
  background-image: repeating-linear-gradient(to bottom, var(--phos) 0 2px, rgba(255,228,181,.55) 2px 4px);
  text-shadow: 0 0 .09em var(--glow), .03em 0 0 rgba(255,80,50,.35), -.03em 0 0 rgba(80,190,255,.25); }
html .hero-name { text-shadow: 0 0 .08em rgba(238,166,107,.6), .03em 0 0 rgba(255,80,50,.4), -.03em 0 0 rgba(80,190,255,.3), 0 2px 40px rgba(0,0,0,.45); }
@media (prefers-reduced-motion: no-preference) { html .hero-name { animation: flicker 4s infinite; } }
html .rv-1 .rv-num, html .papers-h .papers-n { --phos: #ffd2a6; background-image: repeating-linear-gradient(to bottom, var(--phos) 0 2px, rgba(238,166,107,.7) 2px 4px); }
html .rv-1 .rv-num::before { content: "0"; }

/* research */
html .rv-1 h2 { font-size: 54px; line-height: .95; }
html .rv-sub { font-family: var(--label); font-weight: 400; text-transform: none; letter-spacing: .02em; font-size: .3em; }

/* press and contact */
html figcaption, html .press-year, html .press-outlet, html .video-meta, html .press-date { font-family: var(--label); letter-spacing: .02em; }
html .press-year { color: var(--accent); }
html .press-title, html .video-title { font-weight: 400; }
html .videos, html .press { margin-left: 0; margin-right: 0; }
html .videos-heading { font-size: 72px; line-height: .85; }

/* research figures: drawn on the same amber CRT as the big type, in phosphor cream with a glow, scan lines through
   every stroke (a mask, so the plots stay clickable) and a faint warm bloom behind */
html .rv { --line: var(--phos); }
html .rv .fig, html .rv .clips canvas { filter: drop-shadow(0 0 2px rgba(238,166,107,.5));
  -webkit-mask-image: repeating-linear-gradient(to bottom, #000 0 2px, rgba(0,0,0,.62) 2px 3px);
  mask-image: repeating-linear-gradient(to bottom, #000 0 2px, rgba(0,0,0,.62) 2px 3px); }
html .rv-fig { background: radial-gradient(ellipse at 50% 45%, rgba(238,166,107,.07), transparent 70%); }
html .np-demo .fig, html .live .fig, html .game-demo .fig.gd-graph, html .clips canvas { border-color: rgba(238,166,107,.3); border-radius: 6px; }

/* art: bands in amber, dark and putty, with the band's own ink in scan lines */
html .art-poster .p-band { margin-bottom: 0; border-bottom: 1px solid var(--bg); }
html .art-h { font-size: clamp(32px, 9vw, 136px); line-height: .9; }
html .proj h2 { font-size: 38px; line-height: .9; }
html .p-band .art-h { color: transparent; text-shadow: .03em 0 0 rgba(255,80,50,.35), -.03em 0 0 rgba(80,190,255,.3); }   /* art.css gives band titles their ink */
html .p-1 .art-h { --phos: var(--ink1); } html .p-2 .art-h { --phos: var(--ink2); } html .p-3 .art-h { --phos: var(--ink3); }
html .p-1 .art-h, html .p-3 .art-h { background-image: repeating-linear-gradient(to bottom, var(--phos) 0 2px, rgba(25,23,20,.42) 2px 4px);
  text-shadow: 0 0 .06em rgba(25,23,20,.3), .03em 0 0 rgba(255,80,50,.35), -.03em 0 0 rgba(80,190,255,.3); }
html .p-2 .art-h { text-shadow: 0 0 .09em var(--glow), .03em 0 0 rgba(255,80,50,.35), -.03em 0 0 rgba(80,190,255,.25); }

/* contact: an old computer terminal. [ contact ] swaps it to a message form (assets/js/contact.js). */
html .term { --term-cursor: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='22' height='34' viewBox='0 0 11 17' shape-rendering='crispEdges'%3E%3Cpath d='M0 0v14l3-3 3 6 2-1-3-6h5z' fill='%23eea66b' stroke='%23191714' stroke-width='1'/%3E%3C/svg%3E") 1 1, default;
  --term-ibeam: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='30' viewBox='0 0 7 15' shape-rendering='crispEdges'%3E%3Cpath d='M0 0h7v2H4.5v11H7v2H0v-2h2.5V2H0z' fill='%23eea66b' stroke='%23191714' stroke-width='.6'/%3E%3C/svg%3E") 7 15, text;
  position: relative; margin: 48px 0 24px; padding: 14px; border-radius: 22px; background: #24211c; cursor: var(--term-cursor);
  box-shadow: inset 0 2px 0 rgba(255,255,255,.05), inset 0 -3px 0 rgba(0,0,0,.35), 0 30px 80px rgba(0,0,0,.5); }
html .term * { cursor: inherit; }
html .term-bar { display: flex; justify-content: space-between; padding: 2px 10px 12px; font: 400 12px var(--label); letter-spacing: .14em;
  text-transform: uppercase; color: var(--muted); }
html .term-screen { position: relative; overflow: hidden; border-radius: 14px; padding: 40px 44px 44px; min-height: 460px;
  background: radial-gradient(ellipse at 50% 40%, #1d1813, #0f0c0a 75%); box-shadow: inset 0 0 60px rgba(0,0,0,.7), inset 0 0 0 1px rgba(238,166,107,.18);
  font-family: var(--display); color: var(--accent); text-shadow: 0 0 .35em var(--glow); }
html .term-screen::after { content: ""; position: absolute; inset: 0; pointer-events: none;
  background: repeating-linear-gradient(to bottom, rgba(0,0,0,.22) 0 1px, transparent 1px 3px); }
html .term-home { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: 40px; align-items: center; }
html .term-home[hidden], html .term-form[hidden] { display: none; }
html .term-line { margin: 0 0 14px; font-size: 16px; font-weight: 400; letter-spacing: .02em; }
html .term .where-text { margin: 0 0 22px; font-size: clamp(34px, 4.6vw, 60px); line-height: .95; }
html .term-map { width: 100%; max-width: 360px; height: auto; filter: drop-shadow(0 0 3px rgba(238,166,107,.45)); }
html .term-actions { display: flex; flex-direction: column; align-items: flex-start; }
html .term-caret { display: inline-block; width: .55em; height: 1em; margin-left: .2em; vertical-align: -.15em; background: var(--accent);
  box-shadow: 0 0 .3em var(--glow); animation: blink 1.1s steps(1) infinite; }
html .term-btn { font: 700 18px var(--display); letter-spacing: .04em; text-transform: uppercase; color: var(--accent); background: none;
  border: 2px solid var(--accent); padding: 10px 18px; text-shadow: inherit; box-shadow: 0 0 .6em rgba(238,166,107,.25); }
html .term-btn:hover, html .term-btn:focus-visible { background: var(--accent); color: #120f0c; text-shadow: none; outline: none; }
html .term-big { font-size: clamp(28px, 3.6vw, 44px); padding: 18px 28px; }
html .term-ghost { border-color: transparent; box-shadow: none; }
html .term-form { display: grid; gap: 18px; max-width: 760px; }
html .term-form label { display: grid; grid-template-columns: 7.5em minmax(0, 1fr); align-items: baseline; gap: 12px; font-size: 18px; font-weight: 700; }
html .term-form input, html .term-form textarea { font: 400 18px var(--display); color: var(--phos); text-shadow: 0 0 .3em var(--glow);
  background: rgba(238,166,107,.05); border: 0; border-bottom: 1px dashed rgba(238,166,107,.5); border-radius: 0; padding: 6px 8px;
  caret-color: var(--accent); caret-shape: block; cursor: var(--term-ibeam); resize: vertical; }
html .term-form input:focus, html .term-form textarea:focus { outline: none; background: rgba(238,166,107,.1); border-bottom-style: solid; }
html .term-buttons { display: flex; gap: 14px; margin-top: 6px; padding-left: calc(7.5em + 12px); }
html .term-status { min-height: 1.4em; margin: 0; font-size: 16px; }

html .social { border-top: 1px solid var(--rule); margin-top: 40px; padding: 22px 0 32px; }

@media (max-width: 900px) {
  html .wrap { padding: 0 18px; }
  html .hero { margin-top: 24px; }
  html .hero-photo { width: 100%; margin: 0; }
  html .hero-name { font-size: 18vw; bottom: 5%; left: 10px; }
  html .rv-1 h2 { font-size: 40px; }
  html .videos-heading { font-size: 52px; }
}
@media (max-width: 760px) {
  html .term-screen { padding: 26px 20px 30px; min-height: 0; }
  html .term-home { grid-template-columns: minmax(0, 1fr); gap: 28px; }
  html .term-form label { grid-template-columns: minmax(0, 1fr); gap: 4px; font-size: 16px; }
  html .term-buttons { padding-left: 0; }
}
@media (max-width: 600px) {
  html .top { flex-direction: column; align-items: flex-start; gap: 12px; padding: 16px 0; }
  html .nav { gap: 18px; font-size: 13px; }
}