/* Sherif Morsi — portfolio.
   Concept: an instrument panel for measured research. Near-black with a blue bias, an amber
   "signal" colour for what matters, ice blue for data. Unbounded (display) for names and
   headings, Instrument Sans for reading, JetBrains Mono for labels and numbers.
   One committed dark world; every colour is a token. */
:root {
  --bg: #06080c;
  --panel: #0d121a;
  --panel-2: #111824;
  --line: rgba(142, 170, 210, 0.14);
  --line-2: rgba(142, 170, 210, 0.28);
  --ink: #eaf0f8;
  --ink-2: #b4c0d1;
  --muted: #8a96a9;
  --signal: #ffb547;
  --signal-hover: #ffc66d;
  --signal-ink: #1a1206;
  --signal-soft: rgba(255, 181, 71, 0.12);
  --ice: #8fd3ff;
  --miss: #ff8f7e;
  --display: "Unbounded", "Avenir Next", "Segoe UI", system-ui, sans-serif;
  --body: "Instrument Sans", "Helvetica Neue", "Segoe UI", system-ui, sans-serif;
  --mono: "JetBrains Mono", ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  --wrap: 1240px;
  --gutter: clamp(16px, 4vw, 40px);
  --radius: 14px;
  color-scheme: dark;
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 84px; -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font: 400 17px/1.6 var(--body);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
img { max-width: 100%; height: auto; display: block; }
a { color: inherit; }
p { margin: 0; }
h1, h2, h3, h4 { margin: 0; font-family: var(--display); font-weight: 500; line-height: 1.12; letter-spacing: -0.02em; text-wrap: balance; overflow-wrap: break-word; hyphens: auto; }
:focus-visible { outline: 2px solid var(--signal); outline-offset: 3px; border-radius: 4px; }
::selection { background: var(--signal); color: var(--signal-ink); }

.wrap { max-width: var(--wrap); margin-inline: auto; padding-inline: var(--gutter); }
.skip { position: absolute; left: -9999px; top: 12px; z-index: 50; background: var(--signal); color: var(--signal-ink); padding: 10px 14px; border-radius: 8px; font-weight: 600; }
.skip:focus { left: 12px; }
.label {
  font: 500 11.5px/1.3 var(--mono);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--muted);
}
.label.signal { color: var(--signal); }

/* Background grid, faded at the edges: the instrument's graticule. */
.graticule {
  background-image:
    linear-gradient(var(--line) 1px, transparent 1px),
    linear-gradient(90deg, var(--line) 1px, transparent 1px);
  background-size: 64px 64px;
  -webkit-mask-image: radial-gradient(ellipse at 50% 30%, #000 0%, transparent 72%);
  mask-image: radial-gradient(ellipse at 50% 30%, #000 0%, transparent 72%);
  opacity: 0.5;
}

/* ------------------------------------------------------------------ header */
.site-header {
  position: sticky;
  top: env(safe-area-inset-top, 0px);
  z-index: 20;
  background: rgba(6, 8, 12, 0.8);
  backdrop-filter: blur(14px) saturate(140%);
  -webkit-backdrop-filter: blur(14px) saturate(140%);
  border-bottom: 1px solid var(--line);
}
.header-inner { position: relative; display: flex; align-items: center; justify-content: space-between; gap: 16px; min-height: 64px; }
.brand { display: inline-flex; align-items: center; gap: 12px; text-decoration: none; }
.brand-mark {
  width: 34px; height: 34px; border-radius: 9px;
  display: grid; place-items: center;
  font: 600 13px var(--display); letter-spacing: 0;
  color: var(--signal-ink); background: var(--signal);
  box-shadow: 0 0 0 1px rgba(255, 181, 71, 0.4), 0 0 24px rgba(255, 181, 71, 0.25);
}
.brand-name { font: 500 15px var(--display); letter-spacing: -0.01em; }
.site-nav { display: flex; align-items: center; gap: 4px; }
.site-nav a {
  font: 500 12.5px/1 var(--mono); letter-spacing: 0.06em; text-transform: uppercase;
  color: var(--ink-2); text-decoration: none; padding: 10px 12px; border-radius: 8px;
}
.site-nav a:hover, .site-nav a[aria-current="true"] { color: var(--ink); background: rgba(142, 170, 210, 0.08); }
.site-nav a.nav-cta { color: var(--signal-ink); background: var(--signal); margin-left: 6px; }
.site-nav a.nav-cta:hover { background: var(--signal-hover); }
.menu-button {
  display: none; font: 500 12px var(--mono); letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--ink); background: transparent; border: 1px solid var(--line-2); border-radius: 8px;
  padding: 10px 12px; cursor: pointer;
}
@media (max-width: 860px) {
  .menu-button { display: inline-flex; }
  .site-nav {
    display: none; position: absolute; left: 0; right: 0; top: 100%;
    flex-direction: column; align-items: stretch; gap: 2px;
    padding: 10px var(--gutter) 16px; background: var(--bg); border-bottom: 1px solid var(--line);
  }
  .site-nav.open { display: flex; }
  .site-nav a { padding: 14px 12px; }
  .site-nav a.nav-cta { margin: 6px 0 0; text-align: center; }
}

/* -------------------------------------------------------------------- hero */
.hero { position: relative; overflow: hidden; border-bottom: 1px solid var(--line); }
.hero-canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.hero .graticule { position: absolute; inset: 0; pointer-events: none; }
.hero::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(180deg, transparent 70%, var(--bg) 100%),
              linear-gradient(90deg, rgba(6, 8, 12, 0.78) 0%, rgba(6, 8, 12, 0.25) 50%, rgba(6, 8, 12, 0) 100%);
}
.hero-inner {
  position: relative; z-index: 2;
  display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: clamp(28px, 5vw, 64px);
  align-items: end; padding-block: clamp(64px, 11vw, 128px) clamp(56px, 8vw, 96px);
  pointer-events: none;
}
.hero-inner a, .hero-inner button, .hero-inner .signal-log { pointer-events: auto; }
.hero-copy { display: grid; gap: 22px; min-width: 0; }
.hero-status { display: flex; flex-wrap: wrap; gap: 8px; }
.status {
  display: inline-flex; align-items: center; gap: 8px;
  font: 500 12px/1.3 var(--mono); letter-spacing: 0.04em; color: var(--ink-2);
  border: 1px solid var(--line-2); border-radius: 999px; padding: 8px 12px;
  background: rgba(6, 8, 12, 0.6);
}
.status .dot { width: 7px; height: 7px; border-radius: 50%; background: var(--signal); box-shadow: 0 0 10px var(--signal); flex: none; }
.hero h1 { font-size: clamp(44px, 8.4vw, 104px); font-weight: 600; letter-spacing: -0.045em; line-height: 0.98; }
.hero h1 .accent { color: var(--signal); }
.hero-lede { font-size: clamp(18px, 2vw, 21px); line-height: 1.55; color: var(--ink-2); max-width: 60ch; }
.hero-lede strong { color: var(--ink); font-weight: 600; }
.hero-actions { display: flex; flex-wrap: wrap; gap: 10px 12px; align-items: center; margin-top: 4px; }
.hero-hint { font: 500 11.5px var(--mono); letter-spacing: 0.08em; color: var(--muted); }
@media (hover: none) { .hero-hint { display: none; } }

/* The "signal log": one line per project, like a terminal feed. */
.signal-log {
  background: rgba(10, 14, 20, 0.82);
  border: 1px solid var(--line-2); border-radius: var(--radius);
  backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
  padding: 18px 18px 6px; min-width: 0;
}
.signal-log-head { display: flex; justify-content: space-between; gap: 12px; padding-bottom: 12px; border-bottom: 1px solid var(--line); }
.signal-log ol { list-style: none; margin: 0; padding: 0; }
.signal-log li { border-bottom: 1px solid var(--line); }
.signal-log li:last-child { border-bottom: 0; }
.signal-log a { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 12px; align-items: baseline; padding: 13px 2px; text-decoration: none; }
.signal-log a:hover .log-name { color: var(--signal); }
.log-idx { font: 500 12px var(--mono); color: var(--muted); }
.log-name { font: 500 15px var(--display); letter-spacing: -0.01em; transition: color 0.15s; }
.log-detail { display: block; font: 400 13.5px/1.45 var(--body); color: var(--ink-2); margin-top: 3px; }
.log-state { font: 500 11px var(--mono); letter-spacing: 0.1em; text-transform: uppercase; color: var(--signal); white-space: nowrap; }
.log-state.local { color: var(--ice); }
@media (max-width: 960px) { .hero-inner { grid-template-columns: minmax(0, 1fr); } }

/* ------------------------------------------------------------------ buttons */
.button {
  display: inline-flex; align-items: center; gap: 8px;
  font: 600 15px/1 var(--body); text-decoration: none;
  padding: 14px 18px; border-radius: 10px; border: 1px solid transparent;
  transition: transform 0.15s ease, background 0.15s ease, border-color 0.15s ease;
  cursor: pointer;
}
.button.primary { background: var(--signal); color: var(--signal-ink); box-shadow: 0 8px 30px rgba(255, 181, 71, 0.18); }
.button.primary:hover { background: var(--signal-hover); transform: translateY(-1px); }
.button.ghost { background: rgba(6, 8, 12, 0.55); color: var(--ink); border-color: var(--line-2); }
.button.ghost:hover { border-color: var(--ink-2); transform: translateY(-1px); }
.text-link { font: 600 15px var(--body); text-decoration: none; color: var(--ink); border-bottom: 1px solid var(--line-2); padding-bottom: 2px; }
.text-link:hover { color: var(--signal); border-color: var(--signal); }

/* ----------------------------------------------------------------- sections */
.section { padding-block: clamp(72px, 10vw, 128px); border-bottom: 1px solid var(--line); }
.section-head { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 24px 48px; align-items: end; margin-bottom: clamp(40px, 6vw, 72px); }
.section-head h2 { font-size: clamp(28px, 4.6vw, 56px); letter-spacing: -0.035em; }
.section-head p { color: var(--ink-2); font-size: 18px; max-width: 58ch; }
.section-head .label { display: block; margin-bottom: 18px; }
@media (max-width: 860px) { .section-head { grid-template-columns: minmax(0, 1fr); } }

/* ----------------------------------------------------------------- projects */
.projects { display: grid; gap: clamp(64px, 9vw, 112px); }
.project { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: clamp(28px, 4vw, 56px); align-items: start; }
.project:nth-child(even) { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); }
.project:nth-child(even) .screen { order: 2; }
@media (min-width: 961px) { .project .screen { position: sticky; top: 92px; } }
@media (max-width: 960px) { .project, .project:nth-child(even) { grid-template-columns: minmax(0, 1fr); } .project:nth-child(even) .screen { order: 0; } }

.screen {
  display: block; position: relative; text-decoration: none;
  border: 1px solid var(--line-2); border-radius: var(--radius); overflow: hidden;
  background: var(--panel);
  box-shadow: 0 30px 80px rgba(0, 0, 0, 0.45);
  transition: transform 0.25s ease, border-color 0.25s ease, box-shadow 0.25s ease;
}
a.screen:hover { transform: translateY(-3px); border-color: rgba(255, 181, 71, 0.55); box-shadow: 0 30px 90px rgba(0, 0, 0, 0.5), 0 0 0 1px rgba(255, 181, 71, 0.25), 0 0 60px rgba(255, 181, 71, 0.08); }
.screen-bar {
  display: flex; justify-content: space-between; gap: 12px; align-items: center;
  padding: 11px 14px; border-bottom: 1px solid var(--line);
  font: 500 11px var(--mono); letter-spacing: 0.12em; text-transform: uppercase; color: var(--muted);
  background: var(--panel-2);
}
.screen-bar span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.screen-bar .live { display: inline-flex; align-items: center; gap: 7px; color: var(--signal); flex: none; }
.screen-bar .live::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: currentColor; box-shadow: 0 0 10px currentColor; }
.screen-bar .local { color: var(--ice); flex: none; }
.screen img { width: 100%; aspect-ratio: 16 / 10; object-fit: cover; object-position: top left; }

.project-body { display: grid; gap: 20px; min-width: 0; }
.project-meta { display: flex; flex-wrap: wrap; gap: 8px 16px; align-items: baseline; }
.project-index { font: 600 13px var(--mono); color: var(--signal); }
.project h3 { font-size: clamp(28px, 3.4vw, 40px); letter-spacing: -0.035em; }
.project-question { font: 500 19px/1.45 var(--body); color: var(--ink); }
.project-summary { color: var(--ink-2); }

.readouts { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); border: 1px solid var(--line); border-radius: 12px; overflow: hidden; }
.readout { padding: 14px 14px 16px; border-right: 1px solid var(--line); min-width: 0; background: rgba(13, 18, 26, 0.6); }
.readout:last-child { border-right: 0; }
.readout b { display: block; font: 500 clamp(20px, 2.3vw, 26px)/1.1 var(--display); letter-spacing: -0.03em; color: var(--signal); font-variant-numeric: tabular-nums; }
.readout span { display: block; margin-top: 8px; font-size: 13.5px; line-height: 1.45; color: var(--ink-2); }
@media (max-width: 560px) { .readouts { grid-template-columns: minmax(0, 1fr); } .readout { border-right: 0; border-bottom: 1px solid var(--line); } .readout:last-child { border-bottom: 0; } }

.miss { display: grid; gap: 6px; padding-top: 14px; border-top: 1px dashed var(--line-2); }
.miss .label { color: var(--miss); }
.miss p { font-size: 15.5px; color: var(--ink-2); }

.tags { display: flex; flex-wrap: wrap; gap: 6px; list-style: none; margin: 0; padding: 0; }
.tags li { font: 500 12px var(--mono); color: var(--ink-2); border: 1px solid var(--line); border-radius: 6px; padding: 5px 8px; background: rgba(13, 18, 26, 0.6); }
.project-links { display: flex; flex-wrap: wrap; gap: 10px 14px; align-items: center; }

/* ------------------------------------------------------------------- method */
.principles { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.principle { border: 1px solid var(--line); border-radius: var(--radius); padding: clamp(22px, 3vw, 32px); background: linear-gradient(180deg, var(--panel) 0%, rgba(13, 18, 26, 0.4) 100%); display: grid; gap: 14px; align-content: start; min-width: 0; }
.principle h3 { font-size: 21px; letter-spacing: -0.02em; }
.principle p { color: var(--ink-2); font-size: 16px; }
.principle .label { color: var(--ice); }
@media (max-width: 760px) { .principles { grid-template-columns: minmax(0, 1fr); } }

/* --------------------------------------------------------------- experience */
.timeline { display: grid; border-top: 1px solid var(--line); }
.role { display: grid; grid-template-columns: minmax(0, 3fr) minmax(0, 9fr); gap: 16px 40px; padding-block: 32px; border-bottom: 1px solid var(--line); }
.role-when { font: 500 13px/1.6 var(--mono); color: var(--muted); }
.role-when b { display: block; color: var(--signal); font-weight: 500; }
.role h3 { font-size: 22px; letter-spacing: -0.02em; }
.role-org { color: var(--ink-2); margin-top: 6px; font-weight: 500; }
.role ul { margin: 16px 0 0; padding-left: 20px; display: grid; gap: 8px; color: var(--ink-2); }
.role li::marker { color: var(--signal); }
@media (max-width: 760px) { .role { grid-template-columns: minmax(0, 1fr); } }

/* -------------------------------------------------------------------- about */
.about { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(32px, 5vw, 72px); }
.about-copy { display: grid; gap: 18px; align-content: start; }
.about-copy p { color: var(--ink-2); font-size: 18px; }
.about-copy strong { color: var(--ink); font-weight: 600; }
.facts { display: grid; margin: 8px 0 0; }
.facts div { display: grid; grid-template-columns: 120px minmax(0, 1fr); gap: 12px; padding: 12px 0; border-top: 1px solid var(--line); }
.facts dt { font: 500 12px/1.6 var(--mono); letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted); }
.facts dd { margin: 0; color: var(--ink); }
.skills { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; align-content: start; }
.skill { border: 1px solid var(--line); border-radius: 12px; padding: 18px; background: var(--panel); min-width: 0; }
.skill h3 { font: 500 12px var(--mono); letter-spacing: 0.12em; text-transform: uppercase; color: var(--signal); margin-bottom: 10px; }
.skill p { color: var(--ink-2); font-size: 15.5px; line-height: 1.55; }
.education { grid-column: 1 / -1; border: 1px solid var(--line-2); border-radius: 12px; padding: 20px; background: linear-gradient(135deg, var(--signal-soft), transparent 60%), var(--panel); display: grid; gap: 8px; }
.education h3 { font-size: 20px; }
.education p { color: var(--ink-2); font-size: 15.5px; }
@media (max-width: 960px) { .about { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 560px) { .skills { grid-template-columns: minmax(0, 1fr); } .facts div { grid-template-columns: minmax(0, 1fr); gap: 2px; } }

/* ------------------------------------------------------------------ contact */
.contact { position: relative; overflow: hidden; padding-block: clamp(80px, 12vw, 150px); }
.contact .graticule { position: absolute; inset: 0; pointer-events: none; }
.contact-inner { position: relative; display: grid; gap: 28px; }
.contact h2 { font-size: clamp(40px, 7vw, 88px); letter-spacing: -0.045em; line-height: 1; }
.contact h2 .accent { color: var(--signal); }
.contact p { color: var(--ink-2); font-size: 19px; max-width: 56ch; }
.email-row { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; }
.email { font: 500 clamp(18px, 3vw, 28px) var(--display); letter-spacing: -0.02em; color: var(--ink); text-decoration: none; border-bottom: 2px solid var(--signal); padding-bottom: 4px; overflow-wrap: anywhere; }
.email:hover { color: var(--signal); }
.copy-button { font: 500 12px var(--mono); letter-spacing: 0.1em; text-transform: uppercase; color: var(--ink); background: transparent; border: 1px solid var(--line-2); border-radius: 8px; padding: 10px 12px; cursor: pointer; }
.copy-button:hover { border-color: var(--signal); color: var(--signal); }
.contact-links { display: flex; flex-wrap: wrap; gap: 10px; }
.copy-status { position: fixed; left: 50%; bottom: calc(24px + env(safe-area-inset-bottom, 0px)); transform: translateX(-50%); background: var(--signal); color: var(--signal-ink); font: 600 14px var(--body); padding: 10px 14px; border-radius: 10px; opacity: 0; pointer-events: none; transition: opacity 0.2s; z-index: 30; }
.copy-status.show { opacity: 1; }

.site-footer { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 10px 24px; padding-block: 28px 40px; color: var(--muted); font: 500 12.5px var(--mono); letter-spacing: 0.04em; }
.site-footer a { color: var(--ink-2); text-decoration: none; }
.site-footer a:hover { color: var(--signal); }

/* ------------------------------------------------------------- case studies */
.cs-hero { position: relative; overflow: hidden; border-bottom: 1px solid var(--line); }
.cs-hero .graticule { position: absolute; inset: 0; pointer-events: none; }
.cs-hero-inner { position: relative; display: grid; gap: 22px; padding-block: clamp(48px, 8vw, 96px) clamp(40px, 6vw, 72px); }
.back { font: 500 12.5px var(--mono); letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink-2); text-decoration: none; width: fit-content; }
.back:hover { color: var(--signal); }
.cs-hero h1 { font-size: clamp(40px, 7vw, 84px); font-weight: 600; letter-spacing: -0.045em; line-height: 1; }
.cs-question { font: 500 clamp(20px, 2.4vw, 26px)/1.4 var(--body); color: var(--ink); max-width: 46ch; }
.cs-summary { color: var(--ink-2); font-size: 18px; max-width: 70ch; }
.cs-shot { margin-top: clamp(8px, 2vw, 16px); }
.cs-body { display: grid; gap: clamp(56px, 7vw, 88px); padding-block: clamp(56px, 8vw, 96px); }
.glance { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; }
.glance .readout { padding: 20px 18px 22px; }
@media (max-width: 860px) { .glance { grid-template-columns: repeat(2, minmax(0, 1fr)); } .glance .readout:nth-child(2) { border-right: 0; } .glance .readout:nth-child(-n + 2) { border-bottom: 1px solid var(--line); } }
@media (max-width: 480px) { .glance { grid-template-columns: minmax(0, 1fr); } .glance .readout { border-right: 0; border-bottom: 1px solid var(--line); } .glance .readout:last-child { border-bottom: 0; } }
.cs-section { display: grid; grid-template-columns: minmax(0, 3fr) minmax(0, 9fr); gap: 16px 48px; }
.cs-section > h2 { font: 500 14px/1.4 var(--mono); letter-spacing: 0.12em; text-transform: uppercase; color: var(--signal); padding-top: 4px; }
.cs-section .prose { display: grid; gap: 16px; color: var(--ink-2); font-size: 17px; min-width: 0; }
.cs-section .prose strong { color: var(--ink); font-weight: 600; }
.cs-section ul { margin: 0; padding-left: 20px; display: grid; gap: 9px; }
.cs-section li::marker { color: var(--signal); }
.cs-section .prose a { color: var(--ink); }
.cs-section .prose a:hover { color: var(--signal); }
@media (max-width: 860px) { .cs-section { grid-template-columns: minmax(0, 1fr); } }
.table-wrap { overflow-x: auto; border: 1px solid var(--line); border-radius: 12px; }
table { width: 100%; border-collapse: collapse; font-size: 15px; font-variant-numeric: tabular-nums; }
caption { text-align: left; padding: 14px 16px 6px; color: var(--muted); font: 500 12px var(--mono); letter-spacing: 0.08em; text-transform: uppercase; }
th, td { padding: 11px 16px; text-align: right; border-top: 1px solid var(--line); }
th:first-child, td:first-child { text-align: left; }
thead th { font: 500 12px var(--mono); letter-spacing: 0.06em; text-transform: uppercase; color: var(--muted); }
tbody th { font-weight: 500; color: var(--ink); }
td { color: var(--ink-2); white-space: nowrap; }
td.best { color: var(--signal); font-weight: 600; }
.callout { border: 1px dashed var(--line-2); border-radius: 12px; padding: 18px 20px; display: grid; gap: 8px; }
.callout .label { color: var(--miss); }
.figure { display: grid; gap: 10px; margin: 0; }
.figure figcaption { color: var(--muted); font-size: 14px; }
.stack { font: 500 14px/1.8 var(--mono); color: var(--ink-2); }
.next-project { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 20px; align-items: end; border-top: 1px solid var(--line); padding-top: 40px; }
.next-project a.next { text-decoration: none; display: grid; gap: 8px; }
.next-project a.next strong { font: 500 clamp(28px, 4vw, 44px) var(--display); letter-spacing: -0.035em; }
.next-project a.next:hover strong { color: var(--signal); }

/* Motion is optional: everything is visible and complete at rest. */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { transition: none !important; animation: none !important; }
}
.about-title { font-size: clamp(28px, 3.6vw, 44px); letter-spacing: -0.035em; }
.skill.wide { grid-column: 1 / -1; }
.screen img.natural { aspect-ratio: auto; }

/* --------------------------------------------------------------- activities */
.activities { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.activity { border: 1px solid var(--line); border-radius: var(--radius); padding: clamp(22px, 3vw, 28px); background: linear-gradient(180deg, var(--panel) 0%, rgba(13, 18, 26, 0.4) 100%); display: grid; gap: 12px; align-content: start; min-width: 0; }
.activity h3 { font-size: 19px; letter-spacing: -0.02em; }
.activity p { color: var(--ink-2); font-size: 16px; }
.activity-stat { font: 500 14px var(--mono); letter-spacing: 0.04em; color: var(--muted); }
.activity-stat b { font: 600 34px/1 var(--display); letter-spacing: -0.03em; color: var(--signal); margin-right: 6px; }
.role-note { margin-top: 14px; font-size: 15px; color: var(--muted); }
@media (max-width: 960px) { .activities { grid-template-columns: minmax(0, 1fr); } }