/* ==========================================================================
   Hamod Abd Elhai — design system
   /assets/css/main.css

   Shared by every page (homepage, case studies, 404). Case-study layouts and
   components live in case-study.css, which only /projects/* pages load.
   Mobile-first. Breakpoints: 480 / 640 / 768 / 1024 / 1120 / 1280.

   Contents
   01  Tokens
   02  Reset and base
   03  Typography and shared text styles
   04  Layout primitives
   05  Accessibility utilities
   06  Navigation
   07  Buttons and links
   08  Labels, tags, badges and dotted lists
   09  Section header
   10  Hero
   11  Selected work and project showcase
   12  Device frames
   13  Stage content: formula (2Work)
   14  Spec list and spec grid
   15  Engineering: disciplines and metrics
   16  About
   17  Skills
   18  Contact
   19  Footer
   20  Not-found page
   21  Motion: entrance, reveal
   22  Reduced motion and print
   ========================================================================== */


/* ==========================================================================
   01  Tokens
   ========================================================================== */

:root {
  color-scheme: dark;

  /* Neutral palette. Contrast on --bg: --text-2 7.8:1, --text-3 5.8:1. */
  --bg-rgb: 8 8 8;
  --bg: rgb(var(--bg-rgb));
  --surface-1: #0e0e0f;
  --surface-2: #141416;
  --surface-3: #1b1b1e;
  --text: #ffffff;
  --text-2: #a1a1a6;
  --text-3: #8a8a8f;
  --border: rgb(255 255 255 / 0.08);
  --border-2: rgb(255 255 255 / 0.12);
  --border-3: rgb(255 255 255 / 0.22);
  --fill-1: rgb(255 255 255 / 0.03);   /* resting fill: tags, notes, cards */
  --fill-2: rgb(255 255 255 / 0.05);   /* raised fill: buttons, badges, code */
  --fill-3: rgb(255 255 255 / 0.08);   /* hover and active fill */
  --focus: #8ab4ff;
  --glow-rgb: 122 150 255;             /* the cool light behind the hero and contact */

  /* Status */
  --live: #32d74b;
  --live-rgb: 50 215 75;
  --dev: #ffc21a;
  --dev-rgb: 255 194 26;

  /* Project identities. Use the RGB triplets with an alpha: rgb(var(--study-rgb) / 0.2) */
  --study-rgb: 255 122 87;
  --study: rgb(var(--study-rgb));
  --work-rgb: 255 194 26;
  --work: rgb(var(--work-rgb));
  --awake-rgb: 178 164 255;
  --awake: rgb(var(--awake-rgb));
  --notch-rgb: 47 196 122;
  --notch: rgb(var(--notch-rgb));

  /* The active accent. Neutral by default; .theme-2study / .theme-2work / .theme-2awake / .theme-2notch override it. */
  --accent-rgb: 255 255 255;
  --accent: rgb(var(--accent-rgb));
  --accent-ink: #0b0b0b;

  /* Type */
  --font-sans: -apple-system, BlinkMacSystemFont, "SF Pro Display", "SF Pro Text", "Segoe UI Variable", "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --font-mono: ui-monospace, "SF Mono", Menlo, Consolas, monospace;

  --fs-display: clamp(2.75rem, 0.9rem + 8.4vw, 7.5rem);
  --fs-h1: clamp(2.5rem, 1.5rem + 4.2vw, 5.25rem);
  --fs-h2: clamp(2.125rem, 1.35rem + 3.1vw, 4rem);
  --fs-h3: clamp(2.25rem, 1.6rem + 2.4vw, 3.75rem);
  --fs-h4: clamp(1.1875rem, 1.08rem + 0.45vw, 1.375rem);
  --fs-statement: clamp(1.5rem, 1.05rem + 1.9vw, 2.75rem);
  --fs-tagline: clamp(1.375rem, 1.1rem + 1.1vw, 2rem);
  --fs-lead: clamp(1.0625rem, 0.98rem + 0.4vw, 1.3125rem);
  --fs-body: clamp(1rem, 0.97rem + 0.15vw, 1.0625rem);
  --fs-small: 0.9375rem;
  --fs-sm: 0.875rem;
  --fs-xs: 0.8125rem;
  --fs-label: 0.75rem;
  --fs-2xs: 0.6875rem;

  --lh-display: 0.98;
  --lh-heading: 1.08;
  --lh-snug: 1.3;
  --lh-body: 1.6;

  --tracking-display: -0.045em;
  --tracking-heading: -0.032em;
  --tracking-snug: -0.015em;
  --tracking-label: 0.08em;

  --measure: 34em;        /* comfortable paragraph width */

  /* Space (4px base) */
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.25rem;
  --space-6: 1.5rem;
  --space-7: 2rem;
  --space-8: 2.5rem;
  --space-9: 3rem;
  --space-10: 4rem;
  --space-11: 5rem;
  --space-12: 6rem;

  --gutter: clamp(1.25rem, 4.5vw, 3rem);
  --container: 80rem;           /* 1280px */
  --section-y: clamp(4rem, 2rem + 8vw, 10rem);

  /* Radius */
  --r-xs: 6px;
  --r-sm: 10px;
  --r-md: 14px;
  --r-lg: 20px;
  --r-xl: 28px;
  --r-2xl: 36px;
  --r-pill: 999px;

  /* Motion: 200-600ms, ease-out */
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --dur-1: 200ms;
  --dur-2: 320ms;
  --dur-3: 450ms;
  --dur-4: 600ms;

  /* Elevation */
  --shadow-device: 0 50px 90px -30px rgb(0 0 0 / 0.75), 0 18px 36px -18px rgb(0 0 0 / 0.7);

  --nav-h: 64px;
  --anchor-gap: 8px;      /* space kept between the nav and a focused or linked element */

  /* Film grain, inline (no request). */
  --grain: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 .6 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* Project themes: put on any element to re-tint buttons, glows, tags and stages inside it. */
.theme-2study {
  --accent-rgb: var(--study-rgb);
  --accent: var(--study);
  --accent-ink: #160803;
}

.theme-2work {
  --accent-rgb: var(--work-rgb);
  --accent: var(--work);
  --accent-ink: #140f00;
}

.theme-2awake {
  --accent-rgb: var(--awake-rgb);
  --accent: var(--awake);
  --accent-ink: #0e0a24;
}

.theme-2notch {
  --accent-rgb: var(--notch-rgb);
  --accent: var(--notch);
  --accent-ink: #04150c;
}


/* ==========================================================================
   02  Reset and base
   ========================================================================== */

*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--nav-h) + var(--anchor-gap));
  background: var(--bg);
}

/* A column, so the footer sits at the bottom of short pages (404). */
body {
  display: flex;
  flex-direction: column;
  margin: 0;
  min-height: 100vh;
  min-height: 100svh;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-sans);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  overflow-x: clip;
}

body > main {
  flex: 1 0 auto;
}

h1, h2, h3, h4, h5, h6,
p, ul, ol, dl, dd, figure, blockquote {
  margin: 0;
}

ul[role="list"],
ol[role="list"] {
  list-style: none;
  padding: 0;
}

img,
svg,
video {
  display: block;
  max-width: 100%;
}

img {
  height: auto;
}

a {
  color: inherit;
  text-decoration: none;
}

button {
  font: inherit;
  color: inherit;
}

::selection {
  background: rgb(var(--accent-rgb) / 0.32);
  color: var(--text);
}

/* Lock page scroll while the mobile menu is open (set by main.js). */
html.is-locked,
html.is-locked body {
  overflow: hidden;
}


/* ==========================================================================
   03  Typography and shared text styles
   ========================================================================== */

h1, h2, h3, h4 {
  font-weight: 600;
  line-height: var(--lh-heading);
  letter-spacing: var(--tracking-heading);
  text-wrap: balance;
}

p,
li,
dd {
  text-wrap: pretty;
}

/* Short supporting lines: even lines, never a one-word last line. */
figcaption,
small {
  text-wrap: balance;
}

.t-h1 {
  font-size: var(--fs-h1);
  letter-spacing: var(--tracking-display);
  line-height: 1.02;
}

.t-lead {
  font-size: var(--fs-lead);
  line-height: 1.55;
  color: var(--text-2);
  max-width: var(--measure);
}

.t-muted { color: var(--text-2); }

code {
  font-family: var(--font-mono);
  font-size: 0.88em;
  padding: 0.1em 0.38em;
  border-radius: var(--r-xs);
  background: var(--fill-2);
  border: 1px solid var(--border);
}

/* Monospace uppercase label: eyebrows, section labels, spec terms. */
.eyebrow,
.section-label__title,
.formula__label,
.spec-list dt,
.spec-grid dt {
  font-family: var(--font-mono);
  font-size: var(--fs-label);
  font-weight: 500;
  line-height: 1.4;
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
  color: var(--text-3);
}

/* Small-title look (h4 scale). */
.discipline__title,
.metric__label,
.skill-group__title {
  font-size: var(--fs-h4);
  font-weight: 600;
  letter-spacing: var(--tracking-snug);
  line-height: var(--lh-snug);
}

/* Caption look. Inside a lit stage, captions step up to --text-2 so they keep
   AA contrast while the pointer light passes behind them. */
.stage__caption,
.formula__note {
  font-size: var(--fs-xs);
  line-height: 1.5;
  color: var(--text-3);
}

.stage .stage__caption,
.stage figcaption,
.stage .formula__note {
  color: var(--text-2);
}


/* ==========================================================================
   04  Layout primitives
   ========================================================================== */

.container {
  width: 100%;
  max-width: calc(var(--container) + var(--gutter) * 2);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

.section {
  position: relative;
  padding-block: var(--section-y);
}

.section--rule {
  border-top: 1px solid var(--border);
}

/* Anchor targets that start with a hairline land with it tucked under the
   nav's own border, instead of drawing a second rule just below it. */
.section--rule[id],
.project + .project {
  scroll-margin-top: calc(var(--anchor-gap) * -1 - 1px);
}


/* ==========================================================================
   05  Accessibility utilities
   ========================================================================== */

.sr-only {
  position: absolute !important;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

.skip-link {
  position: fixed;
  top: 12px;
  left: 12px;
  z-index: 100;
  padding: 12px 18px;
  border-radius: var(--r-pill);
  background: var(--text);
  color: var(--bg);
  font-weight: 600;
  font-size: var(--fs-small);
  transform: translateY(-160%);
  transition: transform var(--dur-1) var(--ease-out);
}

.skip-link:focus-visible {
  transform: none;
}

:focus-visible {
  outline: 2px solid var(--focus);
  outline-offset: 3px;
}

:focus:not(:focus-visible) {
  outline: none;
}

/* Main receives focus from the skip link; it should not draw a ring. */
main:focus {
  outline: none;
}


/* ==========================================================================
   06  Navigation
   Markup: header.nav[data-nav] > .nav__inner > a.nav__brand + button.nav__toggle + .nav__panel#site-menu
   States: .is-scrolled (translucent), .is-open (mobile menu), .nav__link.is-active
   ========================================================================== */

.nav {
  position: fixed;
  inset: 0 0 auto;
  z-index: 50;
  height: var(--nav-h);
  border-bottom: 1px solid transparent;
  transition:
    background-color var(--dur-3) var(--ease-out),
    border-color var(--dur-3) var(--ease-out),
    -webkit-backdrop-filter var(--dur-3) var(--ease-out),
    backdrop-filter var(--dur-3) var(--ease-out);
}

/* 0.85 keeps --text-2 links above 4.5:1 even over the light screenshots. */
.nav.is-scrolled {
  background: rgb(var(--bg-rgb) / 0.85);
  -webkit-backdrop-filter: saturate(180%) blur(20px);
  backdrop-filter: saturate(180%) blur(20px);
  border-bottom-color: var(--border);
}

@supports not ((-webkit-backdrop-filter: blur(1px)) or (backdrop-filter: blur(1px))) {
  .nav.is-scrolled {
    background: rgb(var(--bg-rgb) / 0.96);
  }
}

.nav__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  height: 100%;
}

.nav__brand {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  min-height: 44px;
  margin-left: -4px;
  padding-inline: 4px;
  border-radius: var(--r-sm);
  font-size: var(--fs-small);
  font-weight: 600;
  letter-spacing: -0.01em;
  white-space: nowrap;
}

.nav__mark {
  width: 33px;
  height: 24px;
  flex: none;
}

.nav__list {
  display: flex;
  align-items: center;
  gap: 2px;
  list-style: none;
  margin: 0;
  padding: 0;
}

.nav__link {
  position: relative;
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding-inline: 14px;
  border-radius: var(--r-pill);
  color: var(--text-2);
  font-size: var(--fs-sm);
  font-weight: 500;
  transition: color var(--dur-1) var(--ease-out), background-color var(--dur-2) var(--ease-out);
}

.nav__link:hover {
  color: var(--text);
}

.nav__link.is-active {
  color: var(--text);
  background: var(--fill-3);
}

.nav__toggle {
  display: none;
  position: relative;
  width: 44px;
  height: 44px;
  margin-right: -10px;
  padding: 0;
  border: 0;
  border-radius: var(--r-pill);
  background: transparent;
  cursor: pointer;
}

.nav__toggle-bar {
  position: absolute;
  left: 13px;
  width: 18px;
  height: 1.5px;
  border-radius: 2px;
  background: var(--text);
  transition: transform var(--dur-2) var(--ease-out);
}

.nav__toggle-bar:nth-child(1) { top: 18px; }
.nav__toggle-bar:nth-child(2) { top: 24px; }

.nav.is-open .nav__toggle-bar:nth-child(1) { transform: translateY(3px) rotate(45deg); }
.nav.is-open .nav__toggle-bar:nth-child(2) { transform: translateY(-3px) rotate(-45deg); }

.nav__panel-foot {
  display: none;
}

/* Mobile: the list becomes a full-screen panel. It needs main.js; the inline
   script in <head> removes .js again if main.js never set up the menu. */
@media (max-width: 767.98px) {
  .js .nav__toggle {
    display: inline-block;
  }

  .js .nav__panel {
    position: fixed;
    inset: var(--nav-h) 0 0;
    display: flex;
    flex-direction: column;
    gap: var(--space-8);
    padding: var(--space-6) var(--gutter) max(var(--space-8), env(safe-area-inset-bottom));
    background: var(--bg);
    overflow-y: auto;
    overscroll-behavior: contain;
    opacity: 0;
    visibility: hidden;
    transform: translateY(-8px);
    transition:
      opacity var(--dur-2) var(--ease-out),
      transform var(--dur-2) var(--ease-out),
      visibility 0s linear var(--dur-2);
  }

  .js .nav.is-open {
    background: var(--bg);
    border-bottom-color: var(--border);
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
  }

  .js .nav.is-open .nav__panel {
    opacity: 1;
    visibility: visible;
    transform: none;
    transition-delay: 0s;
  }

  .js .nav__list {
    flex-direction: column;
    align-items: stretch;
    gap: 0;
  }

  .js .nav__link {
    justify-content: space-between;
    width: 100%;
    min-height: 64px;
    padding-inline: 0;
    border-radius: 0;
    border-bottom: 1px solid var(--border);
    color: var(--text);
    font-size: 1.75rem;
    font-weight: 600;
    letter-spacing: -0.025em;
  }

  .js .nav__link.is-active {
    background: none;
  }

  .js .nav__link.is-active::after {
    content: "";
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--text);
  }

  .js .nav__panel-foot {
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
    margin-top: auto;
  }

  .nav__panel-foot .btn {
    width: 100%;
  }

  /* No-JS fallback: links stay inline and compact. The name is hidden
     visually only, so the home link keeps its accessible name. */
  html:not(.js) .nav__brand-text {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
  }

  html:not(.js) .nav__link {
    padding-inline: 10px;
  }
}


/* ==========================================================================
   07  Buttons and links
   .btn + one of --primary / --secondary / --accent; --sm for compact.
   ========================================================================== */

.btn {
  --btn-h: 48px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: var(--btn-h);
  padding: 0 22px;
  border: 1px solid transparent;
  border-radius: var(--r-pill);
  font-family: var(--font-sans);
  font-size: var(--fs-small);
  font-weight: 500;
  line-height: 1;
  letter-spacing: -0.005em;
  white-space: nowrap;
  text-decoration: none;
  cursor: pointer;
  transition:
    background-color var(--dur-1) var(--ease-out),
    border-color var(--dur-1) var(--ease-out),
    color var(--dur-1) var(--ease-out),
    transform var(--dur-1) var(--ease-out);
}

.btn:active {
  transform: scale(0.98);
}

.btn svg {
  width: 16px;
  height: 16px;
  flex: none;
  transition: transform var(--dur-2) var(--ease-out);
}

.btn:hover .icon-arrow-right { transform: translateX(2px); }
.btn:hover .icon-arrow-down { transform: translateY(2px); }
.btn:hover .icon-external { transform: translate(1px, -1px); }

.btn--primary {
  background: var(--text);
  color: var(--bg);
}

.btn--primary:hover {
  background: #e3e3e8;
}

.btn--secondary {
  background: var(--fill-2);
  border-color: var(--border-2);
  color: var(--text);
}

.btn--secondary:hover {
  background: var(--fill-3);
  border-color: var(--border-3);
}

.btn--accent {
  background: var(--accent);
  color: var(--accent-ink);
}

.btn--accent:hover {
  background: color-mix(in srgb, var(--accent) 86%, #ffffff);
}

.btn--sm {
  --btn-h: 44px;
  padding: 0 18px;
  font-size: var(--fs-sm);
}

.btn-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-3);
}

/* Text link with an arrow: "<- Back to all work". */
.link-arrow {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 44px;
  color: var(--text);
  font-weight: 500;
}

.link-arrow svg {
  width: 15px;
  height: 15px;
  transition: transform var(--dur-2) var(--ease-out);
}

.link-arrow:hover svg {
  transform: translateX(3px);
}


/* ==========================================================================
   08  Labels, tags, badges and dotted lists
   ========================================================================== */

.tag-list {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  list-style: none;
  margin: 0;
  padding: 0;
}

/* Tags may wrap onto a second line rather than widen a narrow column. */
.tag {
  display: inline-flex;
  align-items: center;
  max-width: 100%;
  min-height: 32px;
  padding: 6px 12px;
  border: 1px solid var(--border-2);
  border-radius: var(--r-pill);
  background: var(--fill-1);
  color: var(--text-2);
  font-size: var(--fs-xs);
  font-weight: 500;
  line-height: 1.2;
  transition:
    color var(--dur-1) var(--ease-out),
    border-color var(--dur-1) var(--ease-out),
    background-color var(--dur-1) var(--ease-out),
    transform var(--dur-1) var(--ease-out);
}

@media (hover: hover) {
  .tag:hover {
    color: var(--text);
    border-color: rgb(var(--accent-rgb) / 0.45);
    background: rgb(var(--accent-rgb) / 0.08);
    transform: translateY(-1px);
  }
}

/* Status badge: .badge + --live / --dev / --muted, with a leading .badge__dot.
   The same dots stand alone as .status-dot--live / --dev. */
.badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 30px;
  padding: 0 12px 0 10px;
  border: 1px solid var(--border-2);
  border-radius: var(--r-pill);
  background: var(--fill-2);
  color: var(--text);
  font-size: var(--fs-xs);
  font-weight: 500;
  line-height: 1.2;
  white-space: nowrap;
}

/* Long badges wrap on small phones instead of running off the page. */
@media (max-width: 479.98px) {
  .badge {
    padding-block: 5px;
    white-space: normal;
  }
}

.badge__dot,
.status-dot {
  display: inline-block;
  width: 7px;
  height: 7px;
  flex: none;
  border-radius: 50%;
  background: var(--text-3);
}

.badge--live {
  border-color: rgb(var(--live-rgb) / 0.3);
  background: rgb(var(--live-rgb) / 0.08);
}

.badge--live .badge__dot,
.status-dot--live {
  background: var(--live);
  box-shadow: 0 0 0 3px rgb(var(--live-rgb) / 0.18);
}

.badge--dev {
  border-color: rgb(var(--dev-rgb) / 0.32);
  background: rgb(var(--dev-rgb) / 0.08);
}

.badge--dev .badge__dot,
.status-dot--dev {
  background: transparent;
  box-shadow: inset 0 0 0 1.5px var(--dev);
}

.badge--muted {
  color: var(--text-2);
}

.badge--muted .badge__dot {
  background: transparent;
  box-shadow: inset 0 0 0 1.5px var(--text-3);
}

/* Small inline marker for features that belong to an unreleased version ("2.0"). */
.marker {
  display: inline-flex;
  align-items: center;
  height: 20px;
  padding: 0 7px;
  border-radius: var(--r-xs);
  border: 1px solid rgb(var(--dev-rgb) / 0.35);
  color: var(--dev);
  font-family: var(--font-mono);
  font-size: var(--fs-2xs);
  font-weight: 500;
  letter-spacing: 0.02em;
  white-space: nowrap;
}

/* Inline run of short items separated by small dots.
   Every item carries a leading dot; the list is pulled left by one dot slot and
   clipped there, so the dot of whichever item starts a line is never visible
   and no dot is ever left hanging at the end of a line. */
.dot-list {
  --dot-slot: 1.25rem;  /* rem, so the list and its items resolve the same width */
  display: flex;
  flex-wrap: wrap;
  row-gap: 4px;
  list-style: none;
  margin: 0;
  margin-inline-start: calc(var(--dot-slot) * -1);
  padding: 0;
  clip-path: inset(0 0 0 var(--dot-slot));
}

.dot-list > li {
  display: inline-flex;
  align-items: center;
}

.dot-list > li::before {
  content: "";
  flex: none;
  width: 3px;
  height: 3px;
  margin-inline: calc((var(--dot-slot) - 3px) / 2);
  border-radius: 50%;
  background: var(--text-3);
}


/* ==========================================================================
   09  Section header
   .section-head > .eyebrow + .section-head__title + .section-head__lead
   .section-label: compact label row with a hairline ("Selected work").
   ========================================================================== */

.section-head {
  display: grid;
  gap: var(--space-5);
  max-width: 52rem;
  margin-bottom: clamp(var(--space-9), 6vw, var(--space-11));
}

.section-head__title {
  font-size: var(--fs-h2);
}

.section-head__lead {
  font-size: var(--fs-lead);
  line-height: 1.55;
  color: var(--text-2);
  max-width: var(--measure);
}

.section-label {
  display: flex;
  align-items: center;
  gap: var(--space-4);
}

.section-label__title {
  color: var(--text-2);
}

.section-label__rule {
  flex: 1;
  height: 1px;
  background: var(--border);
}

.section-label__meta {
  font-family: var(--font-mono);
  font-size: var(--fs-label);
  color: var(--text-3);
  letter-spacing: 0.04em;
}


/* ==========================================================================
   10  Hero
   .hero > .container.hero__grid
     .hero__eyebrow, h1.hero__title
     .hero__copy  (statement, lead, actions)
     .hero__aside (the apps, then the stack)
   From 1120px the aside sits beside the copy, so the right half carries the work.
   ========================================================================== */

.hero {
  position: relative;
  isolation: isolate;
  overflow: clip;
  padding-top: calc(var(--nav-h) + clamp(2rem, 0.5rem + 3.5vw, 3.5rem));
  padding-bottom: clamp(1.75rem, 1rem + 1.5vw, 2.5rem);
}

/* Soft radial light + film grain. Static: nothing moves after load. */
.hero::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -2;
  pointer-events: none;
  background:
    radial-gradient(55% 60% at 22% -8%, rgb(var(--glow-rgb) / 0.16), transparent 70%),
    radial-gradient(40% 45% at 78% 0%, rgb(255 255 255 / 0.05), transparent 70%);
  -webkit-mask-image: linear-gradient(to bottom, #000 55%, transparent 100%);
  mask-image: linear-gradient(to bottom, #000 55%, transparent 100%);
}

.hero::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background-image: var(--grain);
  background-size: 180px;
  opacity: 0.045;
  -webkit-mask-image: linear-gradient(to bottom, #000 40%, transparent 100%);
  mask-image: linear-gradient(to bottom, #000 40%, transparent 100%);
}

.hero__grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
}

.hero__eyebrow {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px 12px;
  margin-bottom: var(--space-6);
}

.hero__eyebrow-sep {
  width: 18px;
  height: 1px;
  background: var(--border-3);
}

@media (max-width: 639.98px) {
  .hero__eyebrow {
    display: grid;
    gap: 2px;
    letter-spacing: 0.05em;
  }

  .hero__eyebrow-sep {
    display: none;
  }
}

.hero__title {
  font-size: var(--fs-display);
  font-weight: 600;
  line-height: var(--lh-display);
  letter-spacing: var(--tracking-display);
  margin-left: -0.04em; /* optical alignment of the H */
}

.hero__copy {
  min-width: 0;
}

.hero__statement {
  margin-top: clamp(0.75rem, 0.4rem + 1vw, 1.25rem);
  font-size: var(--fs-statement);
  font-weight: 500;
  line-height: 1.12;
  letter-spacing: var(--tracking-heading);
  color: var(--text);
  max-width: 22em;
  text-wrap: balance;
}

.hero__lead {
  margin-top: var(--space-5);
  font-size: var(--fs-lead);
  line-height: 1.55;
  color: var(--text-2);
  max-width: 31em;
}

.hero__actions {
  margin-top: var(--space-7);
}

.hero__aside {
  display: grid;
  align-content: start;
  gap: var(--space-6);
  min-width: 0;
  margin-top: var(--space-8);
  padding-top: var(--space-6);
  border-top: 1px solid var(--border);
}

.hero__apps {
  display: grid;
  gap: var(--space-2);
  margin-top: var(--space-3);
}

@media (min-width: 640px) {
  .hero__apps {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

.hero__stack {
  display: grid;
  gap: var(--space-2);
}

.hero__stack-list {
  font-family: var(--font-mono);
  font-size: var(--fs-xs);
  line-height: 1.6;
  color: var(--text-2);
}

@media (min-width: 1120px) {
  .hero__grid {
    grid-template-columns: minmax(0, 1fr) minmax(0, 24rem);
    column-gap: clamp(3rem, 6vw, 6rem);
  }

  .hero__eyebrow,
  .hero__title {
    grid-column: 1 / -1;
  }

  /* Same space under the name as the statement beside it. */
  .hero__aside {
    align-self: end;
    gap: var(--space-5);
    margin-top: clamp(0.75rem, 0.4rem + 1vw, 1.25rem);
    padding-top: 0;
    border-top: 0;
  }

  .hero__apps {
    grid-template-columns: minmax(0, 1fr);
  }

  /* One line beside the copy. */
  .hero__stack-list {
    --dot-slot: 1rem;
    font-size: var(--fs-label);
  }
}

/* App link: icon, name and status, as one target (hero). */
.app-link {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  column-gap: var(--space-4);
  min-height: 64px;
  padding: 10px 16px 10px 10px;
  border: 1px solid var(--border-2);
  border-radius: var(--r-lg);
  background: var(--fill-1);
  transition:
    background-color var(--dur-1) var(--ease-out),
    border-color var(--dur-1) var(--ease-out);
}

.app-link:hover {
  background: var(--fill-2);
  border-color: var(--border-3);
}

.app-link .app-icon {
  --icon-size: 44px;
}

.app-link__name {
  display: block;
  font-size: 1rem;
  font-weight: 600;
  line-height: 1.3;
  letter-spacing: -0.01em;
  color: var(--text);
}

/* The kind wraps as a unit below the name when the card is narrow. */
.app-link__kind {
  display: inline-block;
  font-weight: 400;
  color: var(--text-2);
}

.app-link__status {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 3px;
  font-size: var(--fs-xs);
  line-height: 1.35;
  color: var(--text-2);
}

.app-link__arrow {
  width: 16px;
  height: 16px;
  color: var(--text-3);
  transition: transform var(--dur-2) var(--ease-out), color var(--dur-1) var(--ease-out);
}

.app-link:hover .app-link__arrow {
  color: var(--text);
  transform: translateX(2px);
}


/* ==========================================================================
   11  Selected work and project showcase
   article.project.theme-2study
     .project__grid
       .project__head  (.project__id > .app-icon + title/kicker, tagline, badges)
       .project__media (.stage ...)
       .project__body  (.project__desc, .tag-list, .btn-row)
       .project__specs (dl.spec-grid)
   .project--reverse mirrors the desktop layout.
   ========================================================================== */

.work {
  position: relative;
  padding-top: var(--space-2);
}

/* The first project sits close to the hero so it shows on the first screen. */
.work .project:first-of-type {
  padding-top: clamp(1.5rem, 0.5rem + 2vw, 2rem);
}

.project {
  position: relative;
  isolation: isolate;
  overflow-x: clip; /* keeps the project lighting from widening the page */
  padding-block: clamp(3.5rem, 1.5rem + 6vw, 8rem);
}

/* Project lighting: a broad, low-opacity wash in the project colour behind the media. */
.project::before {
  content: "";
  position: absolute;
  z-index: -1;
  top: 10%;
  bottom: 0;
  left: 50%;
  width: min(1100px, 100%);
  pointer-events: none;
  transform: translateX(-30%);
  background: radial-gradient(closest-side, rgb(var(--accent-rgb) / 0.09), transparent);
}

.project--reverse::before {
  transform: translateX(-70%);
}

.project + .project {
  border-top: 1px solid var(--border);
}

.project__grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  grid-template-areas:
    "head"
    "media"
    "body"
    "specs";
  row-gap: var(--space-8);
}

.project__head { grid-area: head; }
.project__media { grid-area: media; min-width: 0; }
.project__body { grid-area: body; min-width: 0; }
.project__specs { grid-area: specs; min-width: 0; }

.project .project__specs {
  margin-top: var(--space-4);
}

.project__id {
  display: flex;
  align-items: center;
  gap: var(--space-5);
}

.project__title {
  font-size: var(--fs-h3);
  font-weight: 600;
  line-height: 1;
  letter-spacing: -0.04em;
}

.project__kicker {
  margin-top: 8px;
  font-size: var(--fs-small);
  color: var(--text-2);
}

.project__tagline {
  margin-top: var(--space-6);
  font-size: var(--fs-tagline);
  font-weight: 500;
  line-height: 1.15;
  letter-spacing: -0.025em;
  color: var(--text);
  text-wrap: balance;
}

/* The second sentence of a two-part tagline wraps as a unit and steps back. */
.project__tagline span,
.page-hero__tagline .t-muted {
  display: inline-block;
  color: var(--text-2);
}

.project__status {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  list-style: none;
  margin: var(--space-6) 0 0;
  padding: 0;
}

.project__desc {
  font-size: var(--fs-body);
  line-height: 1.65;
  color: var(--text-2);
  max-width: var(--measure);
}

.project__tags {
  margin-top: var(--space-7);
}

.project__tags-label {
  margin-bottom: var(--space-3);
}

.project__body .btn-row {
  margin-top: var(--space-8);
}

@media (min-width: 768px) and (max-width: 1119.98px) {
  .project__body {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    grid-template-areas:
      "desc tags"
      "cta  cta";
    column-gap: var(--space-9);
    align-items: start;
  }

  .project__body > .project__desc { grid-area: desc; }
  .project__body > .project__tags { grid-area: tags; margin-top: 0; }
  .project__body > .btn-row { grid-area: cta; }
}

/* Side by side from 1120px; below that the devices get the full width. */
@media (min-width: 1120px) {
  .project__grid {
    grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
    grid-template-rows: auto auto 1fr auto;
    grid-template-areas:
      "head  media"
      "body  media"
      ".     media"
      "specs specs";
    column-gap: clamp(3rem, 5vw, 6rem);
    row-gap: 0;
  }

  .project--reverse .project__grid {
    grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
    grid-template-areas:
      "media head "
      "media body "
      "media .    "
      "specs specs";
  }

  /* Copy starts level with the top of the devices; the media centres on the copy when the copy is taller. */
  .project__head {
    padding-top: clamp(0.5rem, 2.2vw, 2.5rem);
  }

  .project__media {
    align-self: center;
  }

  .project__body {
    margin-top: var(--space-7);
  }

  .project .project__specs {
    margin-top: clamp(var(--space-9), 5vw, var(--space-11));
  }
}

/* App icon. Source files are square; the squircle comes from the radius.
   The glow is written out (not a token) so it follows .theme-2study / .theme-2work:
   a custom property defined on :root resolves its var() there, as white. */
.app-icon {
  display: block;
  flex: none;
  width: var(--icon-size, 64px);
  height: var(--icon-size, 64px);
  border-radius: 22.5%;
  background: var(--surface-3);
  box-shadow: 0 0 0 1px rgb(255 255 255 / 0.08), 0 10px 30px -10px rgb(var(--accent-rgb) / 0.45);
  object-fit: cover;
}

.app-icon--lg { --icon-size: 88px; }

/* Stage: the lit panel that holds devices or a structural presentation. */
.stage {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  border-radius: var(--r-2xl);
  border: 1px solid var(--border);
  background:
    radial-gradient(90% 70% at 50% 0%, rgb(var(--accent-rgb) / 0.2), transparent 65%),
    radial-gradient(60% 50% at 50% 110%, rgb(var(--accent-rgb) / 0.08), transparent 70%),
    linear-gradient(180deg, var(--surface-2), var(--surface-1));
  box-shadow: inset 0 1px 0 rgb(255 255 255 / 0.06);
  padding: clamp(2rem, 1rem + 4vw, 3.75rem) clamp(0.75rem, 3%, 2.5rem) clamp(1.25rem, 0.75rem + 2vw, 2rem);
}

/* Pointer light (main.js sets --mx / --my and .is-lit on fine pointers). */
.stage::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  opacity: 0;
  background: radial-gradient(420px circle at var(--mx, 50%) var(--my, 30%), rgb(var(--accent-rgb) / 0.14), transparent 70%);
  transition: opacity var(--dur-4) var(--ease-out);
}

.stage.is-lit::after {
  opacity: 1;
}

.stage__caption {
  margin: clamp(1.25rem, 3vw, 2rem) auto 0;
  max-width: 36em;
  text-align: center;
}

@media (max-width: 479.98px) {
  .stage {
    border-radius: var(--r-xl);
  }
}


/* ==========================================================================
   12  Device frames
   Screenshots are raw UI with square corners, so the frame only draws a bezel
   and rounds the screen. Most carry their own Dynamic Island; .device--island
   draws one for the captures that don't.
   div.device.device--iphone > div.device__frame > img.device__screen
   div.device.device--ipad   > div.device__frame > img.device__screen
   Sizes are in container units (cqi) of .device, with px fallbacks.
   ========================================================================== */

.device {
  container-type: inline-size;
  position: relative;
  min-width: 0;
}

.device__frame {
  position: relative;
  padding: 7px;
  border-radius: 42px;
  background: #050506;
  box-shadow:
    inset 0 0 0 1px rgb(255 255 255 / 0.16),
    inset 0 0 0 4px #26262a,
    0 0 0 1px rgb(0 0 0 / 0.5),
    var(--shadow-device);
}

.device__screen {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 35px;
  background: var(--surface-3);
}

@supports (width: 1cqi) {
  .device--iphone .device__frame {
    padding: 2.7cqi;
    border-radius: 15.5cqi;
    box-shadow:
      inset 0 0 0 1px rgb(255 255 255 / 0.16),
      inset 0 0 0 1.25cqi #26262a,
      0 0 0 1px rgb(0 0 0 / 0.5),
      var(--shadow-device);
  }

  .device--iphone .device__screen {
    border-radius: 12.8cqi;
  }

  .device--ipad .device__frame {
    padding: 2cqi;
    border-radius: 5.2cqi;
    box-shadow:
      inset 0 0 0 1px rgb(255 255 255 / 0.16),
      inset 0 0 0 0.75cqi #26262a,
      0 0 0 1px rgb(0 0 0 / 0.5),
      var(--shadow-device);
  }

  .device--ipad .device__screen {
    border-radius: 3.2cqi;
  }

  /* Measured from a capture that has the island: 27.3% of the screen wide, 8.2% tall,
     3.2% from the top. The screen is 94.6cqi wide, inset by the frame's 2.7cqi. */
  .device--island .device__frame::after {
    content: "";
    position: absolute;
    top: 5.75cqi;
    left: 50%;
    width: 25.8cqi;
    height: 7.8cqi;
    border-radius: 999px;
    background: #000;
    transform: translateX(-50%);
  }
}

/* A Mac window (2Awake gallery). The capture is the window itself, with its own
   rounded corners and traffic lights, so there is no bezel, only a shadow.
   img.mac-window (1680 × 1100 source, 40px corners) */
.mac-window {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 2.381% / 3.636%;
  box-shadow: 0 0 0 1px rgb(255 255 255 / 0.1), var(--shadow-device);
}

/* A wide desktop band (2Notch): the top of a Mac screen with the notch open.
   img.mac-window.mac-window--wide (1680 × 735 source) */
.mac-window--wide {
  border-radius: 2.381% / 5.442%;
}

/* A drawn MacBook (2Awake), the Mac counterpart of the phone frames: the screen is
   plain HTML sized in cqi of .macbook, so it stays sharp at every width.
   div.macbook[role=img] > .macbook__lid > .macbook__screen > .mac-ui (+ .macbook__base)
   .mac-ui > .mac-ui__bar + [.mac-ui__term + .mac-ui__menu | .mac-ui__win] */
.macbook {
  container-type: inline-size;
  position: relative;
  max-width: 700px;
  margin-inline: auto;
  transition: transform var(--dur-4) var(--ease-out);
}

@media (hover: hover) and (pointer: fine) and (prefers-reduced-motion: no-preference) {
  .stage:hover .macbook { transform: translateY(-1.5%); }
}

.macbook__lid {
  position: relative;
  margin-inline: 7%;
  padding: 1.5cqi 1.5cqi 2cqi;
  border-radius: 2.8cqi 2.8cqi 0.9cqi 0.9cqi;
  background: #050506;
  box-shadow:
    0 0 0 0.3cqi #9fa0a8,
    inset 0 0 0 1px rgb(255 255 255 / 0.12),
    inset 0 0 0 0.4cqi #232327,
    var(--shadow-device);
}

.macbook__screen {
  position: relative;
  overflow: hidden;
  aspect-ratio: 16 / 10;
  border-radius: 1.1cqi 1.1cqi 0.4cqi 0.4cqi;
  background: #1c1838;
}

/* The camera housing, sitting in the menu bar as on a real MacBook Pro. */
.macbook__screen::before {
  content: "";
  position: absolute;
  top: 0;
  left: 50%;
  z-index: 3;
  width: 11cqi;
  height: 2.6cqi;
  border-radius: 0 0 1cqi 1cqi;
  background: #050506;
  transform: translateX(-50%);
}

.macbook__base {
  position: relative;
  height: 2.4cqi;
  border-radius: 0.4cqi 0.4cqi 3cqi 3cqi / 0.4cqi 0.4cqi 1.6cqi 1.6cqi;
  background: linear-gradient(180deg, #e4e5ea 0%, #b9bbc3 35%, #7e8089 100%);
  box-shadow: 0 2cqi 3cqi -1.5cqi rgb(0 0 0 / 0.8);
}

/* The thumb scoop on the front edge. */
.macbook__base::before {
  content: "";
  position: absolute;
  top: 0;
  left: 50%;
  width: 15cqi;
  height: 0.9cqi;
  border-radius: 0 0 1cqi 1cqi;
  background: linear-gradient(180deg, #8d8f98, #b4b6be);
  transform: translateX(-50%);
}

/* Screen content. */
.mac-ui {
  position: absolute;
  inset: 0;
  overflow: hidden;
  font-family: var(--font-sans);
  font-size: 1.2cqi;
  line-height: 1.25;
  letter-spacing: 0;
  color: #1d1d1f;
  background:
    radial-gradient(30cqi 30cqi at 74% 34%, rgb(255 255 255 / 0.16), transparent 70%),
    linear-gradient(165deg, #17142f 0%, #352d6a 46%, #8a7fd3 100%);
}

.mac-ui svg {
  display: block;
  flex: none;
}

.mac-ui__bar {
  position: relative;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 2.6cqi;
  padding-inline: 1.6cqi 1.4cqi;
  background: rgb(14 12 30 / 0.42);
  color: #fff;
  font-size: 1.05cqi;
  white-space: nowrap;
}

.mac-ui__menus,
.mac-ui__status {
  display: flex;
  align-items: center;
  gap: 1.5cqi;
}

.mac-ui__menus b { font-weight: 700; }

.mac-ui__cup {
  width: 1.7cqi;
  height: 1.7cqi;
  padding: 0.2cqi;
  border-radius: 0.4cqi;
  background: rgb(255 255 255 / 0.22);
  box-sizing: content-box;
}

/* The icon only looks pressed while its menu is open. */
.mac-ui:not(:has(.mac-ui__menu)) .mac-ui__cup {
  background: none;
}

.mac-ui__stat {
  display: flex;
  gap: 0.45cqi;
  line-height: 1.05;
}

.mac-ui__k {
  font-size: 0.62cqi;
  font-weight: 600;
  letter-spacing: 0.04em;
  opacity: 0.75;
}

.mac-ui__v {
  font-size: 0.78cqi;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}

.mac-ui__warm { color: #ffd60a; }

.mac-ui__wifi { width: 1.5cqi; height: 1.5cqi; }
.mac-ui__battery { width: 2.4cqi; height: 1.2cqi; }

/* A terminal at work, drawn as lines of output. */
.mac-ui__term {
  position: absolute;
  top: 6.5cqi;
  left: 4.5cqi;
  width: 44cqi;
  height: 40cqi;
  overflow: hidden;
  border-radius: 1cqi;
  background: rgb(16 15 24 / 0.94);
  box-shadow: 0 0 0 1px rgb(255 255 255 / 0.1), 0 2cqi 5cqi rgb(0 0 0 / 0.45);
}

.mac-ui__chrome {
  display: flex;
  align-items: center;
  gap: 0.55cqi;
  height: 2.4cqi;
  padding-inline: 1cqi;
}

.mac-ui__chrome i {
  width: 0.95cqi;
  height: 0.95cqi;
  border-radius: 50%;
  background: #ff5f57;
}

.mac-ui__chrome i:nth-child(2) { background: #febc2e; }
.mac-ui__chrome i:nth-child(3) { background: #28c840; }

.mac-ui__lines {
  display: grid;
  gap: 1cqi;
  padding: 1.2cqi 1.8cqi;
}

.mac-ui__lines span {
  display: block;
  width: var(--w, 60%);
  height: 0.75cqi;
  border-radius: 0.4cqi;
  background: var(--c, rgb(255 255 255 / 0.22));
}

.mac-ui__lines .is-cursor {
  width: 0.7cqi;
  height: 1.3cqi;
  border-radius: 0.1cqi;
  background: #b2a4ff;
}

/* 2Awake's menu, open under its menu bar icon. Status lines are dimmed, as in a real menu. */
.mac-ui__menu {
  position: absolute;
  top: 2.9cqi;
  right: 1.2cqi;
  z-index: 2;
  width: 42cqi;
  margin: 0;
  padding: 0.55cqi;
  list-style: none;
  border-radius: 1.1cqi;
  background: rgb(244 243 249 / 0.94);
  box-shadow: 0 0 0 1px rgb(0 0 0 / 0.12), 0 1.6cqi 4.5cqi rgb(0 0 0 / 0.45);
}

.mac-ui__menu li {
  position: relative;
  overflow: hidden;
  padding: 0.38cqi 1cqi 0.38cqi 2.2cqi;
  border-radius: 0.55cqi;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.mac-ui__menu .is-dim { color: #8a8a90; }

.mac-ui__menu .is-hl {
  background: #7d6ff0;
  color: #fff;
}

.mac-ui__menu .is-sep {
  height: 1px;
  margin: 0.45cqi 1cqi;
  padding: 0;
  background: rgb(0 0 0 / 0.11);
}

.mac-ui__menu .is-on::before {
  content: "✓";
  position: absolute;
  left: 0.75cqi;
  font-weight: 700;
}

.mac-ui__menu .is-sub::after {
  content: "›";
  position: absolute;
  right: 1cqi;
  color: #8a8a90;
}

/* A settings window: the Keep Awake mode chooser. */
.mac-ui__win {
  position: absolute;
  top: 6.5cqi;
  left: 50%;
  width: 58cqi;
  padding: 0 2.4cqi 2.4cqi;
  border-radius: 1.4cqi;
  background: #f1f1f4;
  box-shadow: 0 0 0 1px rgb(0 0 0 / 0.14), 0 2.5cqi 6cqi rgb(0 0 0 / 0.45);
  transform: translateX(-50%);
}

.mac-ui__win .mac-ui__chrome {
  height: 3cqi;
  padding-inline: 0;
}

.mac-ui__win .mac-ui__chrome i:nth-child(3) { background: #d5d5d8; }

.mac-ui__title {
  margin: 0.4cqi 0 1.6cqi;
  font-size: 2.3cqi;
  font-weight: 700;
  letter-spacing: -0.02em;
}

.mac-ui__label {
  margin: 0 0 0.9cqi;
  font-size: 1.15cqi;
  font-weight: 700;
}

.mac-ui__opt {
  display: grid;
  grid-template-columns: 3.4cqi minmax(0, 1fr) 1.8cqi;
  align-items: center;
  gap: 1.2cqi;
  padding: 1.1cqi 1.3cqi;
  border-radius: 1.1cqi;
  background: #fff;
  box-shadow: 0 0 0 1px rgb(0 0 0 / 0.06);
}

.mac-ui__opt + .mac-ui__opt { margin-top: 0.8cqi; }

.mac-ui__opt b {
  display: block;
  font-size: 1.2cqi;
  font-weight: 650;
}

.mac-ui__opt small {
  display: block;
  margin-top: 0.2cqi;
  font-size: 0.98cqi;
  line-height: 1.3;
  color: #6e6e73;
}

.mac-ui__opt.is-selected {
  box-shadow: 0 0 0 0.22cqi #1d1d1f;
}

.mac-ui__icon {
  display: grid;
  place-items: center;
  width: 3.4cqi;
  height: 3.4cqi;
  border-radius: 0.8cqi;
  background: #ececef;
  color: #55555c;
}

.mac-ui__opt.is-selected .mac-ui__icon {
  background: #1d1d1f;
  color: #fff;
}

.mac-ui__icon svg { width: 1.9cqi; height: 1.9cqi; }

.mac-ui__radio {
  width: 1.6cqi;
  height: 1.6cqi;
  border-radius: 50%;
  box-shadow: inset 0 0 0 0.15cqi #b8b8bd;
}

.mac-ui__opt.is-selected .mac-ui__radio {
  display: grid;
  place-items: center;
  background: #1d1d1f;
  box-shadow: none;
}

.mac-ui__opt.is-selected .mac-ui__radio::after {
  content: "";
  width: 0.45cqi;
  height: 0.8cqi;
  margin-top: -0.2cqi;
  border: solid #fff;
  border-width: 0 0.18cqi 0.18cqi 0;
  transform: rotate(45deg);
}

/* A MacBook with two screens floating in front of it, the Mac counterpart of the
   phone trio: a close-up of the menu bar readouts (top right) and the Sleep & Safety
   panel (bottom left). Card sizes are in cqi of .mac-scene.
   div.mac-scene > .macbook + .mac-card.mac-card--bar + .mac-card.mac-card--safety */
.mac-scene {
  container-type: inline-size;
  position: relative;
  max-width: 760px;
  margin-inline: auto;
  padding: 7cqi 0 9cqi;
}

.mac-scene .macbook {
  width: 82%;
  max-width: none;
}

.mac-card {
  position: absolute;
  z-index: 3;
  font-family: var(--font-sans);
  line-height: 1.25;
  letter-spacing: 0;
  transition: transform var(--dur-4) var(--ease-out);
}

@media (hover: hover) and (pointer: fine) and (prefers-reduced-motion: no-preference) {
  .stage:hover .mac-scene .macbook { transform: none; }
  .stage:hover .mac-card--bar { transform: translate(1%, -4%); }
  .stage:hover .mac-card--safety { transform: translate(-1%, 3%); }
}

/* The menu bar, magnified. */
.mac-card--bar {
  top: 0;
  right: 0;
  display: flex;
  align-items: center;
  gap: 2.2cqi;
  padding: 1.6cqi 2.6cqi;
  border-radius: 2cqi;
  background: rgb(30 26 60 / 0.9);
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
  box-shadow: 0 0 0 1px rgb(255 255 255 / 0.14), 0 3cqi 6cqi -1cqi rgb(0 0 0 / 0.7);
  color: #fff;
  white-space: nowrap;
}

.mac-card--bar .mac-ui__cup {
  width: 3.4cqi;
  height: 3.4cqi;
  padding: 0;
  background: none;
}

.mac-card--bar .mac-ui__stat {
  gap: 0.9cqi;
}

.mac-card--bar .mac-ui__k {
  font-size: 1.25cqi;
}

.mac-card--bar .mac-ui__v {
  font-size: 1.7cqi;
}

/* Sleep & Safety, as a small panel. */
.mac-card--safety {
  bottom: 0;
  left: 0;
  width: 39cqi;
  padding: 1.8cqi 2cqi 1.2cqi;
  border-radius: 2.2cqi;
  background: #f3f3f6;
  box-shadow: 0 0 0 1px rgb(0 0 0 / 0.18), 0 3cqi 7cqi -1cqi rgb(0 0 0 / 0.75);
  color: #1d1d1f;
  font-size: 1.45cqi;
}

.mac-card__title {
  margin: 0 0 1cqi;
  font-size: 2.1cqi;
  font-weight: 700;
  letter-spacing: -0.02em;
}

.mac-card__rows {
  margin: 0;
  padding: 0 1.2cqi;
  list-style: none;
  border-radius: 1.4cqi;
  background: #fff;
}

.mac-card__rows li {
  display: grid;
  grid-template-columns: 2.8cqi minmax(0, 1fr) auto;
  align-items: center;
  gap: 1.1cqi;
  padding: 0.95cqi 0;
}

.mac-card__rows li + li {
  border-top: 1px solid rgb(0 0 0 / 0.08);
}

.mac-card__rows b {
  overflow: hidden;
  font-weight: 600;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.mac-card__ico {
  display: grid;
  place-items: center;
  width: 2.8cqi;
  height: 2.8cqi;
  border-radius: 0.75cqi;
  background: var(--c, #0a84ff);
  color: #fff;
}

.mac-card__ico svg {
  width: 1.7cqi;
  height: 1.7cqi;
}

.mac-card__switch {
  position: relative;
  width: 3.9cqi;
  height: 2.2cqi;
  border-radius: 999px;
  background: #1d1d1f;
}

.mac-card__switch::after {
  content: "";
  position: absolute;
  top: 0.25cqi;
  right: 0.25cqi;
  width: 1.7cqi;
  height: 1.7cqi;
  border-radius: 50%;
  background: #fff;
}

.mac-card__value {
  padding: 0.25cqi 0.9cqi;
  border-radius: 0.6cqi;
  background: #ececef;
  font-size: 1.3cqi;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}

/* Three overlapping phones: back-left, front-centre, back-right.
   --trio-shift pulls the back phones in; small enough that the screens behind
   the front phone (a Live Activity, for one) stay readable. */
.device-trio {
  --trio-shift: 12%;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.55fr) minmax(0, 1fr);
  align-items: center;
  max-width: 680px;
  margin-inline: auto;
}

/* Phones: widen the trio into the stage padding so the front phone stays large,
   while both back phones stay whole. */
@media (max-width: 767.98px) {
  .device-trio {
    --trio-shift: 14%;
    width: 112%;
    max-width: none;
    margin-inline: -6%;
  }
}

/* Tablets: the stage is full width, so the trio grows to fill it. */
@media (min-width: 768px) and (max-width: 1119.98px) {
  .device-trio {
    max-width: 760px;
  }
}

.device-trio > .device {
  transition: transform var(--dur-4) var(--ease-out);
}

.device-trio > .device:nth-child(1) {
  z-index: 1;
  transform: translate(var(--trio-shift), 5%) scale(0.92);
}

.device-trio > .device:nth-child(2) {
  z-index: 2;
}

.device-trio > .device:nth-child(3) {
  z-index: 1;
  transform: translate(calc(var(--trio-shift) * -1), 5%) scale(0.92);
}

@media (hover: hover) and (pointer: fine) and (prefers-reduced-motion: no-preference) {
  .stage:hover .device-trio > .device:nth-child(1) { transform: translate(calc(var(--trio-shift) - 4%), 4%) scale(0.93); }
  .stage:hover .device-trio > .device:nth-child(2) { transform: translateY(-1.5%); }
  .stage:hover .device-trio > .device:nth-child(3) { transform: translate(calc(4% - var(--trio-shift)), 4%) scale(0.93); }
}

/* 2Notch on the drawn MacBook, like 2Awake's .mac-scene: the screen has a green
   desktop and a black menu bar, with the dashboard capture hanging from the notch,
   and two more captures float in front as cards (Now Playing top right, the
   command palette bottom left). The captures are cut-out panels with clear corners.
   div.mac-scene.mac-scene--notch > .macbook (.mac-ui.mac-ui--notch > .mac-ui__bar + img.mac-ui__notch)
     + .mac-card.mac-card--shot.mac-card--playing + .mac-card.mac-card--shot.mac-card--command */
.mac-ui--notch {
  background:
    radial-gradient(60cqi 34cqi at 50% 100%, rgb(64 214 140 / 0.32), transparent 70%),
    linear-gradient(180deg, #0e2c1e 0%, #16603c 100%);
}

.mac-ui--notch .mac-ui__bar {
  background: rgb(0 0 0 / 0.86);
}

.mac-ui__notch {
  position: absolute;
  top: 0;
  left: 50%;
  z-index: 3;
  width: 60%;
  height: auto;
  transform: translateX(-50%);
  filter: drop-shadow(0 1.2cqi 2.4cqi rgb(0 0 0 / 0.55));
}

.mac-card--shot {
  overflow: hidden;
  border-radius: 2cqi;
  background: #000;
  box-shadow: 0 0 0 1px rgb(255 255 255 / 0.14), 0 3cqi 7cqi -1cqi rgb(0 0 0 / 0.75);
}

.mac-card--shot img {
  display: block;
  width: 100%;
  height: auto;
}

.mac-card--playing {
  top: 0;
  right: 0;
  width: 40cqi;
}

.mac-card--command {
  bottom: 0;
  left: 0;
  width: 38cqi;
}

@media (hover: hover) and (pointer: fine) and (prefers-reduced-motion: no-preference) {
  .stage:hover .mac-card--playing { transform: translate(1%, -4%); }
  .stage:hover .mac-card--command { transform: translate(-1%, 3%); }
}

/* ==========================================================================
   13  Stage content: formula (2Work)
   A typographic presentation of a real calculation. No mock UI.
   p.formula__expr > span.sr-only (spoken) + span.formula__terms[aria-hidden] (visual)
   ========================================================================== */

/* Quieter than the device stages: less glow, so 2Study's screens lead. */
.stage--formula {
  container-type: inline-size;
  display: grid;
  justify-items: center;
  padding-block: clamp(2.25rem, 1.5rem + 3vw, 3.75rem) clamp(2rem, 1rem + 2.5vw, 3rem);
  padding-inline: clamp(1.25rem, 5%, 3.5rem);
  background:
    radial-gradient(90% 70% at 50% 0%, rgb(var(--accent-rgb) / 0.11), transparent 65%),
    linear-gradient(180deg, var(--surface-2), var(--surface-1));
}

.formula {
  width: 100%;
  max-width: 40rem;
  text-align: center;
}

.formula__label {
  color: var(--text-2);
}

.formula__expr {
  margin-top: var(--space-4);
  font-size: clamp(1.75rem, 1.1rem + 3.6vw, 3.5rem);
  font-weight: 500;
  line-height: 1.1;
  letter-spacing: -0.02em;
  font-variant-numeric: tabular-nums;
  color: var(--text);
}

@supports (width: 1cqi) {
  .formula__expr {
    font-size: clamp(1.5rem, 8.2cqi, 3.5rem);
  }
}

.formula__terms {
  display: flex;
  flex-wrap: nowrap;
  justify-content: center;
  align-items: baseline;
  gap: 0 0.32em;
}

.formula__term {
  color: var(--accent);
}

.formula__op {
  color: var(--text-3);
  font-weight: 400;
}

.formula__legend {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--space-3) var(--space-6);
  margin: var(--space-8) 0 0;
  padding-top: var(--space-6);
  border-top: 1px solid var(--border);
  text-align: left;
}

.formula__legend > div {
  display: flex;
  gap: var(--space-3);
  align-items: baseline;
  min-width: 0;
}

.formula__legend dt {
  flex: none;
  width: 1.1em;
  font-size: var(--fs-small);
  font-weight: 600;
  color: var(--accent);
}

.formula__legend dd {
  font-size: var(--fs-xs);
  line-height: 1.45;
  color: var(--text-2);
  text-wrap: balance;
}

.formula__note {
  margin-top: var(--space-6);
}

@media (min-width: 480px) {
  .formula__legend {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (min-width: 640px) {
  .formula__legend {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}


/* ==========================================================================
   14  Spec list and spec grid
   dl.spec-list > div.spec-list__row > dt + dd      (rows: term | value)
   dl.spec-grid > div.spec-grid__item > dt + dd     (columns from 768px; set --cols)
   Terms share the .eyebrow look (section 03).
   ========================================================================== */

.spec-list,
.spec-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  margin: 0;
  border-top: 1px solid var(--border);
}

.spec-list__row,
.spec-grid__item {
  display: grid;
  align-content: start;
  grid-template-columns: minmax(6.5rem, 30%) minmax(0, 1fr);
  gap: var(--space-4);
  border-bottom: 1px solid var(--border);
}

.spec-list__row {
  padding-block: 14px;
}

.spec-grid__item {
  padding-block: var(--space-5);
}

.spec-list dt,
.spec-grid dt {
  padding-top: 2px;
  letter-spacing: 0.06em;
}

.spec-list dd,
.spec-grid dd {
  font-size: var(--fs-small);
  line-height: 1.5;
  color: var(--text);
}

.spec-list dd small,
.spec-grid dd small {
  display: block;
  margin-top: 2px;
  font-size: var(--fs-xs);
  color: var(--text-2);
}

.spec-list--wide .spec-list__row {
  grid-template-columns: minmax(8rem, 26%) minmax(0, 1fr);
  padding-block: 18px;
}

/* Wide rows hold tag lists; on phones the term goes above so the value gets the full width. */
@media (max-width: 639.98px) {
  .spec-list--wide .spec-list__row {
    grid-template-columns: minmax(0, 1fr);
    gap: var(--space-3);
  }
}

/* Small phones: every row stacks, term above value. */
@media (max-width: 479.98px) {
  .spec-list__row,
  .spec-grid__item {
    grid-template-columns: minmax(0, 1fr);
    gap: var(--space-2);
  }
}

@media (min-width: 768px) {
  .spec-grid {
    grid-template-columns: repeat(var(--cols, 3), minmax(0, 1fr));
    border-bottom: 1px solid var(--border);
  }

  .spec-grid__item {
    grid-template-columns: minmax(0, 1fr);
    gap: var(--space-3);
    padding: var(--space-6) var(--space-6) var(--space-6) 0;
    border-bottom: 0;
  }

  .spec-grid__item + .spec-grid__item {
    padding-left: var(--space-6);
    border-left: 1px solid var(--border);
  }
}


/* ==========================================================================
   15  Engineering: disciplines and metrics
   ========================================================================== */

.disciplines {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  list-style: none;
  margin: 0;
  padding: 0;
  border-top: 1px solid var(--border);
}

.discipline {
  display: grid;
  align-content: start;
  grid-template-columns: 2.5rem minmax(0, 1fr);
  column-gap: var(--space-4);
  padding-block: var(--space-6);
  border-bottom: 1px solid var(--border);
}

.discipline__index {
  font-family: var(--font-mono);
  font-size: var(--fs-label);
  line-height: 1.9;
  color: var(--text-3);
}

.discipline__text {
  grid-column: 2;
  margin-top: 6px;
  font-size: var(--fs-small);
  line-height: 1.55;
  color: var(--text-2);
  max-width: 30em;
}

@media (min-width: 768px) {
  .disciplines {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    column-gap: var(--space-9);
  }
}

@media (min-width: 1024px) {
  .disciplines {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .discipline {
    grid-template-columns: minmax(0, 1fr);
    padding-block: var(--space-7) var(--space-8);
  }

  .discipline__index {
    margin-bottom: var(--space-5);
  }

  .discipline__text {
    grid-column: 1;
  }
}

.metrics {
  container-type: inline-size;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  list-style: none;
  margin: clamp(var(--space-10), 8vw, var(--space-12)) 0 0;
  padding: 0;
}

.metric {
  padding-block: var(--space-7);
  border-top: 1px solid var(--border);
}

.metric__value {
  font-size: clamp(3.5rem, 2rem + 10vw, 5rem);
  font-weight: 600;
  line-height: 0.95;
  letter-spacing: -0.05em;
  font-variant-numeric: tabular-nums;
  color: var(--text);
}

.metric__label {
  margin-top: var(--space-4);
}

.metric__note {
  margin-top: var(--space-2);
  font-size: var(--fs-small);
  line-height: 1.5;
  color: var(--text-2);
  max-width: 24em;
}

/* Phones: a compact row per metric, the number beside its label and note. */
@media (max-width: 767.98px) {
  .metric {
    display: grid;
    grid-template-columns: 7.25rem minmax(0, 1fr);
    column-gap: var(--space-5);
    align-items: start;
    padding-block: var(--space-6);
  }

  .metric__value {
    grid-row: span 2;
    font-size: 2.25rem;
    line-height: 1;
  }

  .metric__label {
    margin-top: 0;
  }
}

@media (min-width: 768px) {
  .metrics {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .metric {
    padding: var(--space-7) var(--space-6) 0 0;
  }

  /* Same inset as .spec-grid__item, so the columns line up across sections. */
  .metric + .metric {
    padding-left: var(--space-6);
    border-left: 1px solid var(--border);
  }

  /* Values share one size, scaled from the list width so the widest ("3,300+") fits its column. */
  @supports (width: 1cqi) {
    .metric__value {
      font-size: clamp(3rem, 7.4cqi, 6.5rem);
    }
  }
}


/* ==========================================================================
   16  About
   ========================================================================== */

.about__grid {
  display: grid;
  gap: var(--space-8);
}

.about__head {
  display: grid;
  gap: var(--space-5);
  align-content: start;
}

.about__title {
  font-size: var(--fs-h2);
}

.about__copy {
  display: grid;
  gap: var(--space-5);
  max-width: var(--measure);
}

.about__copy p {
  font-size: var(--fs-lead);
  line-height: 1.6;
  color: var(--text-2);
}

.about__copy p:first-child {
  color: var(--text);
}

@media (min-width: 1024px) {
  .about__grid {
    grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
    column-gap: clamp(3rem, 5vw, 6rem);
    align-items: start;
  }

  .about__head {
    position: sticky;
    top: calc(var(--nav-h) + var(--space-8));
  }
}


/* ==========================================================================
   17  Skills
   ul.skill-list.dot-list: a dotted run on phones and tablets, a column from 1024px.
   ========================================================================== */

.skills__grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 0;
  border-top: 1px solid var(--border);
}

.skill-group {
  padding-block: var(--space-6) var(--space-7);
  border-bottom: 1px solid var(--border);
}

.skill-list {
  margin-top: var(--space-4);
}

.skill-list > li {
  font-size: var(--fs-small);
  line-height: 1.6;
  color: var(--text-2);
}

@media (min-width: 768px) {
  .skills__grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    column-gap: var(--space-9);
  }
}

@media (min-width: 1024px) {
  .skills__grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    column-gap: var(--space-8);
  }

  .skill-group {
    border-bottom: 0;
    padding-block: var(--space-6) 0;
  }

  .skill-list {
    display: grid;
    gap: 6px;
    margin-top: var(--space-5);
    margin-inline-start: 0;
    clip-path: none;
  }

  .skill-list > li::before {
    content: none;
  }

  .skill-list > li {
    transition: color var(--dur-1) var(--ease-out);
  }

  .skill-list > li:hover {
    color: var(--text);
  }
}


/* ==========================================================================
   18  Contact
   ========================================================================== */

.contact {
  position: relative;
  isolation: isolate;
  overflow: clip;
}

.contact::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background:
    radial-gradient(50% 60% at 15% 100%, rgb(var(--glow-rgb) / 0.1), transparent 70%),
    radial-gradient(40% 50% at 90% 100%, rgb(255 255 255 / 0.04), transparent 70%);
}

.contact__eyebrow {
  margin-bottom: var(--space-5);
}

.contact__title {
  font-size: var(--fs-h1);
  line-height: 1.02;
  letter-spacing: var(--tracking-display);
  max-width: 12em;
}

.contact__title span {
  color: var(--text-2);
}

.contact__lead {
  margin-top: var(--space-6);
}

.contact__email-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-3) var(--space-5);
  margin-top: clamp(var(--space-8), 5vw, var(--space-10));
  padding-top: var(--space-7);
  border-top: 1px solid var(--border);
}

.contact__email {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  font-size: clamp(1.25rem, 0.95rem + 1.6vw, 2.25rem);
  font-weight: 500;
  letter-spacing: -0.025em;
  color: var(--text);
  overflow-wrap: anywhere;
  text-decoration: underline;
  text-decoration-color: transparent;
  text-decoration-thickness: 1px;
  text-underline-offset: 0.18em;
  transition: text-decoration-color var(--dur-2) var(--ease-out);
}

.contact__email:hover {
  text-decoration-color: var(--border-3);
}

.contact__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
}

/* The copy button needs JS; without it the mailto link remains. */
html:not(.js) [data-copy] {
  display: none;
}

.copy-status {
  min-height: 1.5em;
  margin-top: var(--space-3);
  font-size: var(--fs-xs);
  color: var(--text-2);
}


/* ==========================================================================
   19  Footer
   ========================================================================== */

.footer {
  border-top: 1px solid var(--border);
  padding-block: var(--space-7) max(var(--space-7), env(safe-area-inset-bottom));
  font-size: var(--fs-xs);
  color: var(--text-3);
}

.footer__inner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3) var(--space-6);
}

.footer__brand {
  display: inline-flex;
  align-items: center;
  gap: 10px;
}

.footer__mark {
  width: 22px;
  height: 16px;
  opacity: 0.9;
}

.footer__links {
  display: flex;
  flex-wrap: wrap;
  gap: 0 var(--space-2);
  list-style: none;
  margin: 0 -12px;
  padding: 0;
}

.footer__links a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding-inline: 12px;
  border-radius: var(--r-pill);
  color: var(--text-2);
  transition: color var(--dur-1) var(--ease-out);
}

.footer__links a:hover {
  color: var(--text);
}


/* ==========================================================================
   20  Not-found page
   main.hero.not-found fills the space between the nav and the footer (body is
   a flex column), carries the hero lighting across all of it, and centres its
   content whatever height the footer wraps to.
   ========================================================================== */

.not-found {
  display: grid;
  align-content: center;
}

.not-found__code {
  margin-bottom: var(--space-5);
}

.not-found__lead {
  margin-top: var(--space-6);
}

.not-found .btn-row {
  margin-top: var(--space-8);
}


/* ==========================================================================
   21  Motion: entrance, reveal
   The hero entrance is CSS only and runs only when motion is welcome.
   .enter--rise moves without fading, for headings: the page's largest text is
   never transparent, even where animation frames don't run.
   Reveal-on-scroll only hides content after main.js adds .has-reveal to <html>.
   ========================================================================== */

@keyframes enter-up {
  from {
    opacity: 0;
    transform: translateY(14px);
  }
  to {
    opacity: 1;
    transform: none;
  }
}

@keyframes enter-rise {
  from {
    transform: translateY(14px);
  }
  to {
    transform: none;
  }
}

@media (prefers-reduced-motion: no-preference) {
  .enter {
    animation: enter-up var(--dur-4) var(--ease-out) both;
    animation-delay: var(--d, 0ms);
  }

  .enter--rise {
    animation-name: enter-rise;
  }
}

.has-reveal [data-reveal] {
  transition:
    opacity var(--dur-4) var(--ease-out) var(--d, 0ms),
    transform var(--dur-4) var(--ease-out) var(--d, 0ms);
}

.has-reveal [data-reveal]:not(.is-revealed) {
  opacity: 0;
  transform: translateY(22px);
}

.has-reveal [data-reveal="scale"]:not(.is-revealed) {
  transform: translateY(16px) scale(0.985);
}


/* ==========================================================================
   22  Reduced motion and print
   ========================================================================== */

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }

  *,
  *::before,
  *::after {
    animation-duration: 1ms !important;
    animation-iteration-count: 1 !important;
    animation-delay: 0ms !important;
    transition-duration: 1ms !important;
    transition-delay: 0ms !important;
  }

  .has-reveal [data-reveal],
  .has-reveal [data-reveal]:not(.is-revealed) {
    opacity: 1;
    transform: none;
  }
}

/* Print: dark text on white paper, no lighting, no interactive chrome. */
@media print {
  :root {
    --bg-rgb: 255 255 255;
    --text: #000000;
    --text-2: #333333;
    --text-3: #555555;
    --border: #cccccc;
    --border-2: #bbbbbb;
    --border-3: #999999;
  }

  *,
  *::before,
  *::after {
    color: #000 !important;
    background: transparent !important;
    box-shadow: none !important;
    text-shadow: none !important;
  }

  .nav,
  .skip-link,
  .hero::before,
  .hero::after,
  .page-hero::before,
  .page-hero::after,
  .contact::before,
  .project::before,
  .stage::after,
  .contact__actions,
  .copy-status {
    display: none !important;
  }

  .has-reveal [data-reveal] {
    opacity: 1 !important;
    transform: none !important;
  }
}