/* ==========================================================================
   Mohammed Rauf - portfolio

   Visual language continues the P6 dashboard it showcases: near-black ground,
   violet/cyan/magenta light, so the site and the product read as one body of
   work. Type is engineering-grade rather than fashionable - Space Grotesk for
   display, IBM Plex for reading and for data, which is what a schedule is.

   The accent is not a fixed colour. --hue is driven by scroll position (see
   site.js), so the page's light shifts as you move through it: violet in the
   hero, cyan through the work, magenta through the career. That is the
   "dynamic colour" - one hue in motion, not a rainbow of competing ones.
   ========================================================================== */

:root {
  --hue: 290;

  --bg: #07070d;
  --surface: #10101a;
  --surface-2: #161624;
  --line: #22223a;
  --line-soft: #1a1a2c;
  --text: #ececf5;
  --muted: #8d8da8;
  --faint: #5f5f7a;

  --accent: oklch(0.70 0.17 var(--hue));
  --accent-strong: oklch(0.62 0.21 var(--hue));
  --accent-soft: oklch(0.70 0.17 var(--hue) / 0.14);
  --accent-line: oklch(0.70 0.17 var(--hue) / 0.34);

  /* career sectors - validated as a categorical set against this surface */
  --sec-1: #8b5cf6;  /* engineering & design */
  --sec-2: #0891b2;  /* offshore oil & gas   */
  --sec-3: #ec4899;  /* rail                 */
  --sec-4: #d97706;  /* business             */
  --sec-5: #3987e5;  /* construction         */
  --sec-6: #199e70;  /* energy & transmission */

  --display: 'Space Grotesk', 'Segoe UI', system-ui, sans-serif;
  --body: 'IBM Plex Sans', 'Segoe UI', system-ui, sans-serif;
  --mono: 'IBM Plex Mono', 'Cascadia Code', Consolas, monospace;

  --radius: 14px;
  --maxw: 1180px;
  color-scheme: dark;
}

:root[data-theme="light"] {
  --bg: #f6f6fb;
  --surface: #ffffff;
  --surface-2: #f1f2f8;
  --line: #e1e3ef;
  --line-soft: #eceef6;
  --text: #12121f;
  --muted: #56566e;
  --faint: #8a8aa3;

  --accent: oklch(0.52 0.20 var(--hue));
  --accent-strong: oklch(0.46 0.22 var(--hue));
  --accent-soft: oklch(0.52 0.20 var(--hue) / 0.10);
  --accent-line: oklch(0.52 0.20 var(--hue) / 0.28);

  --sec-1: #7c3aed;
  --sec-2: #0891b2;
  --sec-3: #db2777;
  --sec-4: #c2740a;
  --sec-5: #2a78d6;
  --sec-6: #15966a;
  color-scheme: light;
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 84px; }
body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font: 16px/1.65 var(--body);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
img { max-width: 100%; display: block; }
a { color: var(--accent); text-decoration-thickness: 1px; text-underline-offset: 3px; }
a:hover { color: var(--text); }
::selection { background: var(--accent-soft); color: var(--text); }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; border-radius: 6px; }

.wrap { max-width: var(--maxw); margin: 0 auto; padding: 0 28px; }
.mono { font-family: var(--mono); }

/* Pieces that belong to one design only. The Blueprint and Control-room
   stylesheets switch their own pieces on; this design's pieces are hidden
   there (see theme-*.css). */
.only-bp, .only-cr { display: none; }
.sr-only {
  position: absolute; width: 1px; height: 1px; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap;
}

/* --------------------------------------------------------------------------
   Page progress - drawn as a schedule's % complete, because that is what a
   scroll position is for someone who reads programmes all day
   -------------------------------------------------------------------------- */
.progress {
  position: fixed; inset: 0 0 auto 0; height: 3px; z-index: 60;
  background: transparent;
}
.progress i {
  display: block; height: 100%; width: 0;
  background: linear-gradient(90deg, var(--accent-strong), var(--accent));
  box-shadow: 0 0 12px var(--accent);
}

/* --------------------------------------------------------------------------
   Navigation
   -------------------------------------------------------------------------- */
.nav {
  position: sticky; top: 0; z-index: 50;
  backdrop-filter: blur(16px) saturate(160%);
  -webkit-backdrop-filter: blur(16px) saturate(160%);
  background: color-mix(in srgb, var(--bg) 72%, transparent);
  border-bottom: 1px solid color-mix(in srgb, var(--line) 70%, transparent);
}
.nav .wrap { display: flex; align-items: center; gap: 20px; height: 64px; }
.mark {
  font-family: var(--display); font-weight: 700; font-size: 17px;
  color: var(--text); text-decoration: none; display: flex; align-items: center; gap: 10px;
}
.mark b {
  width: 32px; height: 32px; border-radius: 9px; display: grid; place-items: center;
  font-size: 13px; letter-spacing: .5px; color: #fff;
  background: linear-gradient(135deg, var(--accent-strong), oklch(0.62 0.21 calc(var(--hue) + 50)));
  box-shadow: 0 6px 18px -6px var(--accent);
}
.nav ul { display: flex; gap: 4px; list-style: none; margin: 0 0 0 auto; padding: 0; }
.nav a.link {
  display: block; padding: 7px 12px; border-radius: 8px; font-size: 14px;
  color: var(--muted); text-decoration: none; font-weight: 500;
  transition: color .15s ease, background .15s ease;
}
.nav a.link:hover { color: var(--text); background: var(--surface-2); }
.nav a.link.on { color: var(--text); background: var(--accent-soft); }
.iconbtn {
  width: 38px; height: 38px; border-radius: 10px; display: grid; place-items: center;
  border: 1px solid var(--line); background: var(--surface); color: var(--text);
  cursor: pointer; transition: border-color .15s ease;
}
.iconbtn:hover { border-color: var(--accent-line); }
.iconbtn svg { width: 18px; height: 18px; }
.menu-toggle { display: none; }

/* --------------------------------------------------------------------------
   Hero
   -------------------------------------------------------------------------- */
.hero { position: relative; overflow: hidden; padding: 96px 0 72px; isolation: isolate; }

/* a slow mesh of light - the dynamic colour is at its most visible here */
.mesh { position: absolute; inset: -20% -10% auto -10%; height: 140%; z-index: -2; pointer-events: none; }
.mesh span {
  position: absolute; border-radius: 50%; filter: blur(72px); opacity: .55;
  animation: drift 22s ease-in-out infinite alternate;
}
.mesh span:nth-child(1) { width: 46vw; height: 46vw; left: 2%;  top: 0%;  background: oklch(0.60 0.22 var(--hue)); }
.mesh span:nth-child(2) { width: 38vw; height: 38vw; right: 4%; top: 6%;  background: oklch(0.62 0.20 calc(var(--hue) + 70)); animation-duration: 26s; }
.mesh span:nth-child(3) { width: 30vw; height: 30vw; left: 38%; top: 34%; background: oklch(0.62 0.18 calc(var(--hue) - 80)); animation-duration: 30s; }
:root[data-theme="light"] .mesh span { opacity: .22; }
@keyframes drift {
  0%   { transform: translate(0, 0) scale(1); }
  50%  { transform: translate(4vw, 3vw) scale(1.08); }
  100% { transform: translate(-3vw, 5vw) scale(.94); }
}

/* faint schedule grid behind the hero - timescale columns, like a Gantt */
.grid-bg {
  position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background-image:
    linear-gradient(to right, color-mix(in srgb, var(--line) 55%, transparent) 1px, transparent 1px);
  background-size: 88px 100%;
  mask-image: linear-gradient(to bottom, #000 10%, transparent 88%);
  -webkit-mask-image: linear-gradient(to bottom, #000 10%, transparent 88%);
}

.eyebrow {
  display: inline-flex; align-items: center; gap: 10px; flex-wrap: wrap;
  font-family: var(--mono); font-size: 12.5px; letter-spacing: .4px;
  color: var(--muted); padding: 6px 12px 6px 8px; border-radius: 999px;
  border: 1px solid var(--line); background: color-mix(in srgb, var(--surface) 70%, transparent);
}
.eyebrow .dot {
  width: 8px; height: 8px; border-radius: 50%; background: #22c55e;
  box-shadow: 0 0 0 4px rgba(34,197,94,.16); animation: pulse 2.4s ease-in-out infinite;
}
@keyframes pulse { 50% { box-shadow: 0 0 0 7px rgba(34,197,94,.04); } }

.hero h1 {
  font-family: var(--display); font-weight: 700; letter-spacing: -2px; line-height: .98;
  font-size: clamp(48px, 8.4vw, 104px); margin: 22px 0 18px;
}
.hero h1 .grad {
  background: linear-gradient(100deg, var(--text) 20%, var(--accent) 60%, oklch(0.72 0.17 calc(var(--hue) + 60)));
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.hero .role {
  font-family: var(--display); font-size: clamp(19px, 2.2vw, 25px); font-weight: 500;
  color: var(--text); margin: 0 0 14px; letter-spacing: -.2px;
}
.hero .lede { max-width: 620px; font-size: 18px; color: var(--muted); margin: 0 0 34px; }

.cta { display: flex; gap: 12px; flex-wrap: wrap; }
.btn {
  display: inline-flex; align-items: center; gap: 9px; padding: 13px 20px;
  border-radius: 11px; font-weight: 600; font-size: 15px; text-decoration: none;
  border: 1px solid transparent; cursor: pointer; font-family: var(--body);
  transition: transform .15s ease, box-shadow .15s ease, border-color .15s ease;
}
.btn svg { width: 17px; height: 17px; }
.btn.primary {
  color: #fff;
  background: linear-gradient(135deg, var(--accent-strong), oklch(0.58 0.22 calc(var(--hue) + 40)));
  box-shadow: 0 10px 28px -10px var(--accent);
}
.btn.primary:hover { transform: translateY(-2px); box-shadow: 0 16px 34px -12px var(--accent); color: #fff; }
.btn.ghost { color: var(--text); border-color: var(--line); background: var(--surface); }
.btn.ghost:hover { border-color: var(--accent-line); color: var(--text); }

/* headline figures */
.stats {
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1px;
  margin-top: 64px; border-radius: var(--radius); overflow: hidden;
  border: 1px solid var(--line); background: var(--line);
}
.stat { background: color-mix(in srgb, var(--surface) 88%, transparent); padding: 22px 22px 20px; }
.stat .n {
  font-family: var(--display); font-weight: 700; font-size: clamp(30px, 3.6vw, 42px);
  letter-spacing: -1px; line-height: 1; color: var(--text);
}
.stat .n em { font-style: normal; color: var(--accent); }
.stat .l { font-size: 13.5px; color: var(--muted); margin-top: 8px; }

/* --------------------------------------------------------------------------
   Sections
   -------------------------------------------------------------------------- */
section { padding: 96px 0; position: relative; }
.kicker {
  font-family: var(--mono); font-size: 12.5px; letter-spacing: 1.4px; text-transform: uppercase;
  color: var(--accent); display: flex; align-items: center; gap: 10px; margin-bottom: 14px;
}
.kicker::before { content: ''; width: 22px; height: 1px; background: var(--accent); }
h2 {
  font-family: var(--display); font-weight: 700; letter-spacing: -1.2px; line-height: 1.08;
  font-size: clamp(32px, 4.4vw, 52px); margin: 0 0 16px;
}
.intro { color: var(--muted); max-width: 680px; font-size: 17px; margin: 0 0 44px; }

.card {
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius);
  position: relative; overflow: hidden;
}
/* a spotlight that follows the pointer across a card */
.spot::before {
  content: ''; position: absolute; inset: 0; pointer-events: none; opacity: 0;
  background: radial-gradient(420px circle at var(--mx, 50%) var(--my, 50%), var(--accent-soft), transparent 60%);
  transition: opacity .25s ease;
}
.spot:hover::before { opacity: 1; }

/* about */
.about-grid { display: grid; grid-template-columns: 1.35fr 1fr; gap: 28px; align-items: start; }
.about-grid p { margin: 0 0 16px; color: var(--muted); font-size: 16.5px; }
.about-grid p strong { color: var(--text); font-weight: 600; }
.now { padding: 26px; }
.now .tag {
  font-family: var(--mono); font-size: 11.5px; letter-spacing: 1px; text-transform: uppercase;
  color: var(--accent); display: flex; align-items: center; gap: 8px;
}
.now h3 { font-family: var(--display); font-size: 22px; margin: 10px 0 4px; letter-spacing: -.3px; }
.now .at { color: var(--muted); font-size: 14.5px; margin: 0 0 18px; }
.now dl { display: grid; grid-template-columns: auto 1fr; gap: 9px 16px; margin: 0; font-size: 14px; }
.now dt { color: var(--faint); font-family: var(--mono); font-size: 12px; padding-top: 2px; }
.now dd { margin: 0; }
.chips { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 22px; }
.chip {
  font-size: 13px; padding: 5px 11px; border-radius: 999px;
  border: 1px solid var(--line); color: var(--muted); background: var(--surface-2);
}

/* --------------------------------------------------------------------------
   Featured work
   -------------------------------------------------------------------------- */
.work { display: grid; gap: 30px; }
.project { display: grid; grid-template-columns: 1fr 1.25fr; gap: 0; }
.project .copy { padding: 34px 34px 30px; display: flex; flex-direction: column; }
.project .label {
  font-family: var(--mono); font-size: 12px; letter-spacing: .8px; color: var(--muted);
  display: flex; gap: 10px; align-items: center; flex-wrap: wrap;
}
.project .label b {
  color: var(--accent); background: var(--accent-soft); border: 1px solid var(--accent-line);
  padding: 2px 8px; border-radius: 6px; font-weight: 500;
}
.project h3 {
  font-family: var(--display); font-size: clamp(24px, 2.6vw, 30px); letter-spacing: -.6px;
  line-height: 1.12; margin: 14px 0 12px;
}
.project p { color: var(--muted); margin: 0 0 18px; font-size: 15.5px; }
.feat { list-style: none; margin: 0 0 24px; padding: 0; display: grid; gap: 9px; }
.feat li { display: grid; grid-template-columns: 18px 1fr; gap: 10px; font-size: 14.5px; }
.feat li svg { width: 16px; height: 16px; margin-top: 4px; color: var(--accent); }
.feat li span { color: var(--muted); }
.feat li b { color: var(--text); font-weight: 600; }
.stack { display: flex; flex-wrap: wrap; gap: 6px; margin: 0 0 26px; }
.stack span {
  font-family: var(--mono); font-size: 11.5px; padding: 3px 8px; border-radius: 6px;
  background: var(--surface-2); color: var(--muted); border: 1px solid var(--line-soft);
}
.project .actions { margin-top: auto; display: flex; gap: 10px; flex-wrap: wrap; }
.note { font-size: 12.5px; color: var(--faint); margin: 14px 0 0; }

/* the screenshot viewer */
.viewer { background: var(--surface-2); border-left: 1px solid var(--line); display: flex; flex-direction: column; min-width: 0; }
.tabs { display: flex; gap: 2px; padding: 12px 12px 0; flex-wrap: wrap; }
.tabs button {
  font: 500 13px var(--body); padding: 8px 12px; border-radius: 8px 8px 0 0; cursor: pointer;
  border: 1px solid transparent; border-bottom: 0; background: transparent; color: var(--muted);
}
.tabs button[aria-selected="true"] {
  background: var(--bg); color: var(--text); border-color: var(--line);
}
.shot {
  margin: 0 12px 12px; border: 1px solid var(--line); border-radius: 0 10px 10px 10px;
  background: var(--bg); overflow: hidden; position: relative; aspect-ratio: 16 / 10;
  cursor: zoom-in;
}
/* Power BI pages are 16:9 canvases - frame them at their own ratio, or the
   cover crop cuts off the right-hand column of KPI cards */
#powerbi .shot { aspect-ratio: 16 / 9; }
.shot img {
  width: 100%; height: 100%; object-fit: cover; object-position: top left;
  transition: opacity .3s ease, transform .6s cubic-bezier(.2,.8,.2,1);
}
.shot:hover img { transform: scale(1.015); }
.shot .zoomhint {
  position: absolute; right: 10px; bottom: 10px; font-size: 12px; padding: 5px 9px;
  border-radius: 7px; background: color-mix(in srgb, var(--bg) 80%, transparent);
  color: var(--muted); border: 1px solid var(--line); backdrop-filter: blur(6px);
}
.caption { padding: 0 16px 16px; font-size: 13.5px; color: var(--muted); min-height: 3.2em; }

/* lightbox */
.lightbox {
  position: fixed; inset: 0; z-index: 100; display: grid; place-items: center; padding: 4vh 4vw;
  background: color-mix(in srgb, #000 82%, transparent); backdrop-filter: blur(6px);
}
.lightbox[hidden] { display: none; }
.lightbox figure { margin: 0; max-width: 1400px; width: 100%; max-height: 92vh; overflow: auto; border-radius: 12px; }
.lightbox img { width: 100%; height: auto; border-radius: 12px; border: 1px solid #2a2a40; }
.lightbox figcaption { color: #c8c8da; font-size: 14px; margin-top: 12px; text-align: center; }
.lightbox .close { position: fixed; top: 18px; right: 18px; }

/* --------------------------------------------------------------------------
   Career - drawn as a Gantt chart
   -------------------------------------------------------------------------- */
.legend { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 20px; }
.legend button {
  display: inline-flex; align-items: center; gap: 8px; cursor: pointer;
  font: 500 13px var(--body); color: var(--muted); padding: 6px 12px 6px 10px;
  border-radius: 999px; border: 1px solid var(--line); background: var(--surface);
  transition: opacity .15s ease, border-color .15s ease;
}
.legend button i { width: 10px; height: 10px; border-radius: 3px; background: var(--c); }
.legend button[aria-pressed="false"] { opacity: .42; }
.legend button:hover { border-color: var(--accent-line); color: var(--text); }
.legend .reset { color: var(--faint); }

.gantt { padding: 22px 22px 14px; }
.gantt-scroll { overflow-x: auto; overflow-y: hidden; scrollbar-width: thin; }
.gantt-inner { min-width: 900px; position: relative; }

.axis, .grow {
  display: grid; grid-template-columns: 220px 1fr; align-items: center;
}
.axis { height: 30px; border-bottom: 1px solid var(--line); margin-bottom: 6px; }
.ticks { position: relative; height: 100%; }
.ticks span {
  position: absolute; top: 7px; transform: translateX(-50%);
  font-family: var(--mono); font-size: 11px; color: var(--faint);
}
.grow { height: 42px; }
.grow .who { padding-right: 14px; min-width: 0; }
.grow .who b {
  display: block; font-size: 13.5px; font-weight: 600; white-space: nowrap;
  overflow: hidden; text-overflow: ellipsis;
}
.grow .who small {
  display: block; font-size: 11.5px; color: var(--faint); white-space: nowrap;
  overflow: hidden; text-overflow: ellipsis; font-family: var(--mono);
}
.lane { position: relative; height: 100%; }

/* vertical year gridlines, sat behind every lane */
.gridlines { position: absolute; top: 0; bottom: 0; left: 220px; right: 0; pointer-events: none; }
.gridlines i { position: absolute; top: 0; bottom: 0; width: 1px; background: var(--line-soft); }

.bar {
  position: absolute; top: 9px; height: 24px; border-radius: 6px; cursor: pointer;
  border: 0; padding: 0 9px; display: flex; align-items: center; min-width: 6px;
  background: var(--c); color: #fff; font: 600 11.5px var(--body); white-space: nowrap;
  overflow: hidden; text-overflow: ellipsis;
  box-shadow: 0 0 0 0 transparent, 0 4px 14px -6px var(--c);
  transform-origin: left center;
  transition: box-shadow .18s ease, filter .18s ease, opacity .25s ease, transform .18s ease;
}
.bar:hover, .bar:focus-visible {
  filter: brightness(1.12);
  box-shadow: 0 0 0 2px var(--bg), 0 0 0 4px var(--c), 0 8px 22px -6px var(--c);
}
.bar[aria-pressed="true"] { box-shadow: 0 0 0 2px var(--bg), 0 0 0 4px var(--text), 0 8px 22px -6px var(--c); }
.bar.dim { opacity: .14; }
.bar.live {
  background-image: repeating-linear-gradient(135deg, transparent 0 7px, rgba(255,255,255,.14) 7px 14px);
}
/* bars draw in left to right when the chart scrolls into view - a schedule
   being built, which is the one animation here that means something */
.gantt:not(.drawn) .bar { transform: scaleX(0); }
.gantt.drawn .bar { transition: transform .9s cubic-bezier(.2,.8,.2,1) var(--delay, 0s), box-shadow .18s ease, filter .18s ease, opacity .25s ease; }

/* milestone diamonds. Deliberately NOT named .cert - that is the
   certification card further down, and sharing the name gave every diamond
   the card's padding and blew them up to four times the size. */
.ms {
  position: absolute; top: 12px; width: 16px; height: 16px; transform: translateX(-50%) rotate(45deg);
  background: var(--surface); border: 2px solid var(--accent); border-radius: 3px; cursor: pointer;
  padding: 0; margin: 0; transition: background .15s ease, transform .15s ease;
}
.ms:hover, .ms:focus-visible { background: var(--accent); transform: translateX(-50%) rotate(45deg) scale(1.2); }
.ms.ms-edu { border-color: var(--muted); }
.ms.ms-edu:hover, .ms.ms-edu:focus-visible { background: var(--muted); }
/* a diamond that stands for two qualifications close together */
.ms.multi::after {
  content: ''; position: absolute; inset: 3px; border-radius: 1px; background: currentColor;
  color: var(--accent); opacity: .55;
}
.ms.ms-edu.multi::after { color: var(--muted); }

/* The data-date line. Its label sits ABOVE the axis, right-aligned to the
   line: today is always near the chart's right edge, so a centred label was
   clipped by the scroller and sat on top of the last years' ticks. */
.gantt-inner { padding-top: 28px; }
.gridlines { top: 28px; }
.today {
  position: absolute; top: 28px; bottom: 0; width: 0; border-left: 1.5px dashed var(--accent);
  pointer-events: none; z-index: 2;
}
.today span {
  position: absolute; top: -26px; right: -1px; white-space: nowrap;
  font-family: var(--mono); font-size: 10.5px; color: #fff; background: var(--accent-strong);
  padding: 2px 7px; border-radius: 5px 5px 0 5px;
}

/* the tooltip on hover */
.tip {
  position: fixed; z-index: 70; pointer-events: none; max-width: 280px;
  background: var(--surface); border: 1px solid var(--line); border-radius: 10px;
  padding: 10px 12px; font-size: 13px; box-shadow: 0 16px 40px -14px rgba(0,0,0,.6);
  opacity: 0; transform: translateY(4px); transition: opacity .12s ease, transform .12s ease;
}
.tip.on { opacity: 1; transform: none; }
.tip b { display: block; font-size: 13.5px; }
.tip span { color: var(--muted); font-family: var(--mono); font-size: 11.5px; }

/* detail panel for the chosen role */
.detail {
  display: grid; grid-template-columns: 250px 1fr; gap: 28px; padding: 26px 28px;
  margin-top: 18px; border-top: 3px solid var(--c, var(--accent));
}
.detail .meta .sector {
  display: inline-flex; align-items: center; gap: 7px; font-size: 12px; font-family: var(--mono);
  color: var(--muted);
}
.detail .meta .sector i { width: 9px; height: 9px; border-radius: 3px; background: var(--c); }
.detail h3 { font-family: var(--display); font-size: 22px; letter-spacing: -.4px; margin: 10px 0 2px; line-height: 1.2; }
.detail .co { color: var(--muted); margin: 0 0 14px; }
.detail .when { font-family: var(--mono); font-size: 13px; color: var(--text); }
.detail .dur { font-family: var(--mono); font-size: 12px; color: var(--faint); }
.detail .proj {
  font-size: 14px; padding: 10px 12px; border-radius: 9px; background: var(--surface-2);
  border: 1px solid var(--line-soft); margin: 0 0 14px;
}
.detail .proj b { color: var(--text); }
.detail ul { margin: 0; padding: 0; list-style: none; display: grid; gap: 9px; }
.detail li {
  display: grid; grid-template-columns: 14px 1fr; gap: 10px; color: var(--muted); font-size: 15px;
}
.detail li::before {
  content: ''; width: 6px; height: 6px; border-radius: 50%; background: var(--c, var(--accent));
  margin-top: 10px;
}
.detail-empty { color: var(--muted); font-size: 14.5px; }

/* the vertical fallback that replaces the Gantt on narrow screens */
.vlist { display: none; }

/* --------------------------------------------------------------------------
   Skills, certifications, contact
   -------------------------------------------------------------------------- */
.skills { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; }
.skill { padding: 24px; }
.skill .ic {
  width: 40px; height: 40px; border-radius: 11px; display: grid; place-items: center;
  color: var(--accent); background: var(--accent-soft); border: 1px solid var(--accent-line);
  margin-bottom: 16px;
}
.skill .ic svg { width: 20px; height: 20px; }
.skill h3 { font-family: var(--display); font-size: 18px; margin: 0 0 10px; letter-spacing: -.2px; }
.skill ul { margin: 0; padding: 0; list-style: none; display: grid; gap: 7px; }
.skill li { color: var(--muted); font-size: 14.5px; padding-left: 16px; position: relative; }
.skill li::before {
  content: ''; position: absolute; left: 0; top: 10px; width: 6px; height: 1.5px; background: var(--accent);
}

.tools { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 26px; }
.tool {
  display: flex; align-items: center; gap: 10px; padding: 10px 14px; border-radius: 11px;
  border: 1px solid var(--line); background: var(--surface); font-size: 14px;
}
.tool small {
  font-family: var(--mono); font-size: 11px; color: var(--accent);
  padding: 2px 7px; border-radius: 6px; background: var(--accent-soft);
}

.certs { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
.cert { display: grid; grid-template-columns: 58px 1fr; gap: 16px; align-items: center; padding: 18px 20px; }
.cert .yr {
  font-family: var(--mono); font-size: 13px; color: var(--accent); text-align: center;
  padding: 8px 0; border-radius: 9px; background: var(--accent-soft); border: 1px solid var(--accent-line);
}
.cert b { display: block; font-size: 15px; line-height: 1.35; }
.cert span { color: var(--muted); font-size: 13.5px; }
.subhead { font-family: var(--display); font-size: 20px; margin: 44px 0 16px; letter-spacing: -.3px; }

.contact { padding: 48px; text-align: center; }
.contact h2 { margin-bottom: 12px; }
.contact p { color: var(--muted); max-width: 560px; margin: 0 auto 30px; }
.contact .cta { justify-content: center; }
.facts {
  display: flex; flex-wrap: wrap; justify-content: center; gap: 10px 26px; margin-top: 34px;
  font-size: 14px; color: var(--muted);
}
.facts span { display: inline-flex; align-items: center; gap: 8px; }
.facts svg { width: 15px; height: 15px; color: var(--accent); }

footer {
  border-top: 1px solid var(--line); padding: 30px 0 42px; color: var(--faint); font-size: 13.5px;
}
footer .wrap { display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap; }

/* reveal on scroll - only when the script that reveals things is running.
   Hiding content in CSS alone would leave it invisible if the script failed to
   load, or in any renderer that never scrolls. */
.js .reveal { opacity: 0; transform: translateY(18px); transition: opacity .7s ease, transform .7s cubic-bezier(.2,.8,.2,1); }
.js .reveal.in { opacity: 1; transform: none; }

/* --------------------------------------------------------------------------
   Responsive
   -------------------------------------------------------------------------- */
@media (max-width: 980px) {
  .project { grid-template-columns: 1fr; }
  .viewer { border-left: 0; border-top: 1px solid var(--line); }
  .about-grid { grid-template-columns: 1fr; }
  .skills { grid-template-columns: 1fr 1fr; }
  .stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .detail { grid-template-columns: 1fr; gap: 14px; }
}
@media (max-width: 760px) {
  .wrap { padding: 0 20px; }
  section { padding: 72px 0; }
  .hero { padding: 64px 0 56px; }
  .nav ul {
    position: absolute; top: 64px; left: 0; right: 0; flex-direction: column;
    background: var(--bg); border-bottom: 1px solid var(--line); padding: 10px 20px 16px;
    display: none;
  }
  .nav ul.open { display: flex; }
  .menu-toggle { display: grid; margin-left: auto; }
  .skills, .certs { grid-template-columns: 1fr; }
  .project .copy { padding: 26px 22px; }
  .contact { padding: 34px 22px; }

  /* The Gantt needs width to mean anything; below this it becomes a list.
     The detail panel goes with it - it describes the selected bar, and with
     no bars to select it only repeated the first entry of the list below. */
  .gantt, .legend, .detail { display: none; }
  .vlist { display: grid; gap: 14px; }
  .vitem { padding: 18px 18px 18px 20px; border-left: 4px solid var(--c); }
  .vitem .when { font-family: var(--mono); font-size: 12px; color: var(--muted); }
  .vitem h3 { font-family: var(--display); font-size: 18px; margin: 6px 0 2px; }
  .vitem .co { color: var(--muted); font-size: 14px; margin: 0 0 10px; }
  .vitem ul { margin: 0; padding-left: 18px; color: var(--muted); font-size: 14.5px; }
  .vitem li { margin-bottom: 5px; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .mesh span, .eyebrow .dot { animation: none; }
  .js .reveal { opacity: 1; transform: none; transition: none; }
  .gantt:not(.drawn) .bar { transform: none; }
  .bar, .shot img, .btn { transition: none; }
}

@media print {
  .nav, .progress, .mesh, .grid-bg, .lightbox, .tabs, .legend { display: none !important; }
  body { background: #fff; color: #000; }
}