/* Scrimchic — graphite / violet engineering portfolio */

:root {
  --bg: #0c0d10;
  --bg-soft: #101218;
  --surface: #14161d;
  --surface-2: #191b23;
  --text: #f1f0f5;
  --text-soft: #c5c2cd;
  --muted: #9a98a3;
  --dim: #6f6d78;
  --line: rgba(225, 221, 237, 0.14);
  --line-strong: rgba(225, 221, 237, 0.24);
  --accent: #9878df;
  --accent-strong: #b397ee;
  --accent-soft: rgba(152, 120, 223, 0.13);
  --accent-faint: rgba(152, 120, 223, 0.07);
  --success: #79b899;
  --shadow: 0 18px 60px rgba(0, 0, 0, 0.24);
  --font-display: "Manrope", "Inter", system-ui, sans-serif;
  --font-body: "Inter", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --font-mono: "IBM Plex Mono", "JetBrains Mono", ui-monospace, SFMono-Regular, Consolas, monospace;
  --max: 1620px;
  --gutter: clamp(1.15rem, 5.9vw, 6.5rem);
  --section: clamp(4.25rem, 7vw, 7rem);
  --header: 72px;
  --radius-sm: 7px;
  --radius: 12px;
  --radius-control: 4px;
  --control-h: 46px;
  --control-h-sm: 42px;
  --primary-ink: #17131f;
  --ease: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-ui: cubic-bezier(0.2, 0.7, 0.2, 1);
  --motion-fast: 160ms;
  --motion-ui: 230ms;
  --motion-reveal: 520ms;
  --motion-ambient: 8s;
  color-scheme: dark;
}

:root[data-theme="light"] {
  /* Paper rather than white-grey: every neutral carries a trace of the accent's
     own violet, so the light theme reads as one family instead of a cold grey
     page with a purple sitting on top of it. */
  --bg: #f8f7fb;
  --bg-soft: #f1eff7;
  --surface: #ffffff;
  --surface-2: #eae7f2;
  --text: #2a2637;
  --text-soft: #514b63;
  --muted: #666076;
  --dim: #746e88;
  --line: rgba(42, 34, 66, 0.13);
  --line-strong: rgba(42, 34, 66, 0.22);
  --accent: #524390;
  --accent-strong: #3e3170;
  --accent-soft: rgba(82, 67, 144, 0.11);
  --accent-faint: rgba(82, 67, 144, 0.055);
  --success: #34714f;
  --shadow: 0 18px 50px rgba(42, 34, 66, 0.09);
  --primary-ink: #ffffff;
  color-scheme: light;
}

*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; }
html {
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--header) + 1.5rem);
  background: var(--bg);
  -webkit-text-size-adjust: 100%;
}

@view-transition { navigation: auto; }

::view-transition-group(root) {
  animation-duration: 280ms;
  animation-timing-function: var(--ease);
}
::view-transition-old(root) {
  z-index: 1;
  animation: page-transition-out 220ms var(--ease) both;
}
::view-transition-new(root) {
  z-index: 2;
  animation: page-transition-in 300ms var(--ease) both;
}
::view-transition-group(site-header) { animation-duration: 240ms; }
::view-transition-old(site-header),
::view-transition-new(site-header) { animation: none; }

@keyframes page-transition-out {
  to { opacity: 0.18; transform: translateY(-6px); }
}
@keyframes page-transition-in {
  from { opacity: 0; transform: translateY(12px); }
  to { opacity: 1; transform: none; }
}
body {
  min-width: 320px;
  min-height: 100dvh;
  overflow-x: clip;
  background:
    radial-gradient(70rem 36rem at 80% -12%, var(--accent-faint), transparent 70%),
    var(--bg);
  color: var(--text);
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  transition: background-color 240ms ease, color 240ms ease;
}
body.menu-open { overflow: hidden; }
.theme-changing body,
.theme-changing .site-header,
.theme-changing .mobile-nav,
.theme-changing .button { transition-duration: 260ms !important; }
img, svg { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
button { border: 0; padding: 0; color: inherit; font: inherit; background: none; cursor: pointer; }
ul, ol { padding: 0; list-style: none; }
strong, b { font-weight: 650; }
::selection { color: #fff; background: var(--accent); }
:focus-visible { outline: 2px solid var(--accent-strong); outline-offset: 4px; }

h1, h2, h3, h4 {
  color: var(--text);
  font-family: var(--font-display);
  font-weight: 550;
  letter-spacing: -0.035em;
  line-height: 1.08;
  text-wrap: balance;
}
h1 { font-size: clamp(2.65rem, 5.4vw, 4.35rem); }
h2 { font-size: clamp(2rem, 3.7vw, 3.05rem); }
h3 { font-size: clamp(1.15rem, 1.7vw, 1.4rem); letter-spacing: -0.022em; line-height: 1.25; }
p { color: var(--text-soft); text-wrap: pretty; }
.lead { max-width: 66ch; font-size: clamp(1.04rem, 1.35vw, 1.22rem); line-height: 1.65; }
.u-sr-only { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.mono-label {
  display: block;
  color: var(--accent-strong);
  font: 500 0.72rem/1.3 var(--font-mono);
  letter-spacing: 0.12em;
  text-transform: uppercase;
}
.container { width: min(100%, var(--max)); margin-inline: auto; padding-inline: var(--gutter); }
.section { position: relative; padding-block: var(--section); border-top: 1px solid var(--line); }
.section--first { border-top: 0; }
.section--tight { padding-block: clamp(3rem, 5vw, 4.75rem); }
/* Two tight sections in a row stacked a full pad twice, leaving a dead band
   between the content and the closing call to action. */
.section + .section--tight { padding-top: clamp(1.5rem, 2.5vw, 2.4rem); }
.section-head { display: grid; gap: 1rem; max-width: 760px; margin-bottom: clamp(2.25rem, 4vw, 3.75rem); }
.section-title-line { display: flex; align-items: center; }
.section-title-line h2 { font-size: clamp(1.45rem, 2.35vw, 2rem); letter-spacing: -0.025em; }

.skip-link {
  position: fixed;
  top: 0.7rem;
  left: 0.7rem;
  z-index: 1000;
  transform: translateY(-160%);
  padding: 0.7rem 1rem;
  border-radius: var(--radius-sm);
  background: var(--text);
  color: var(--bg);
  font-weight: 650;
  transition: transform 180ms ease;
}
.skip-link:focus { transform: none; }

/* Header */
.site-header {
  position: sticky;
  top: 0;
  z-index: 100;
  height: var(--header);
  border-bottom: 1px solid var(--line);
  background: color-mix(in srgb, var(--bg) 88%, transparent);
  backdrop-filter: blur(18px) saturate(130%);
  -webkit-backdrop-filter: blur(18px) saturate(130%);
  transition: box-shadow 200ms ease, background-color 200ms ease;
  view-transition-name: site-header;
  animation: initial-header-in 420ms var(--ease) both;
}
.site-header.is-scrolled { box-shadow: 0 12px 40px rgba(0, 0, 0, 0.08); }
/* Three fixed tracks keep the primary nav in one place on every page and in
   both locales — the CTA label's width can no longer shift it. */
.nav { height: var(--header); display: grid; grid-template-columns: 1fr auto 1.25fr; align-items: center; gap: 1.25rem; }
.nav > .wordmark { grid-column: 1; justify-self: start; }
.nav > .desktop-nav { grid-column: 2; justify-self: center; }
.nav > .nav-actions { grid-column: 3; justify-self: end; }
.wordmark {
  display: inline-flex;
  align-items: baseline;
  min-width: max-content;
  color: var(--text);
  font: 560 clamp(1.2rem, 2vw, 1.55rem)/1 var(--font-display);
  letter-spacing: -0.04em;
}
.wordmark__slash { display: inline-block; margin-left: 0.08em; color: var(--accent-strong); transform-origin: 50% 70%; transition: transform var(--motion-ui) var(--ease), color var(--motion-fast) ease; }
.wordmark:hover .wordmark__slash, .wordmark:focus-visible .wordmark__slash { color: var(--accent); transform: translateX(2px) skewX(-8deg) scaleY(1.08); }
.desktop-nav { display: flex; align-items: stretch; align-self: stretch; gap: 1.9rem; }
.desktop-nav a { position: relative; display: grid; place-items: center; color: var(--muted); font-size: 0.92rem; transition: color var(--motion-fast) ease; }
.desktop-nav a::after {
  content: "";
  position: absolute;
  right: 0;
  bottom: -1px;
  left: 0;
  height: 2px;
  background: var(--accent);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform var(--motion-ui) var(--ease);
}
.desktop-nav a:hover, .desktop-nav a[aria-current="page"] { color: var(--text); }
.desktop-nav a:hover::after, .desktop-nav a[aria-current="page"]::after { transform: scaleX(1); }
.nav-actions { display: flex; align-items: center; gap: 0.65rem; }
.theme-toggle, .menu-toggle {
  width: var(--control-h-sm);
  height: var(--control-h-sm);
  display: grid;
  place-items: center;
  border: 1px solid var(--line);
  border-radius: var(--radius-control);
  color: var(--text-soft);
  transition: border-color var(--motion-fast) ease, color var(--motion-fast) ease, background var(--motion-fast) ease, transform 110ms var(--ease-ui);
}
.theme-toggle:hover, .menu-toggle:hover { color: var(--accent-strong); border-color: var(--accent); background: var(--accent-faint); }
.theme-toggle:active, .menu-toggle:active { transform: translateY(1px); }
.theme-toggle svg, .menu-toggle svg { width: 19px; height: 19px; }
.theme-icon--sun { display: none; }
:root[data-theme="light"] .theme-icon--sun { display: block; }
:root[data-theme="light"] .theme-icon--moon { display: none; }
.language-switch { display: flex; align-items: center; gap: 0.4rem; min-height: var(--control-h-sm); padding-inline: 0.75rem; border: 1px solid var(--line); border-radius: var(--radius-control); transition: border-color var(--motion-fast) ease; }
.language-switch:hover { border-color: var(--line-strong); }
.language-switch a { position: relative; color: var(--dim); font: 500 0.75rem/1 var(--font-mono); transition: color var(--motion-fast) ease; }
.language-switch a:hover, .language-switch a[aria-current="true"] { color: var(--text); }
.language-switch span { color: var(--dim); }
.mobile-locale { display: none; }
.menu-toggle { display: none; }

/* Two flat rectangles and a hairline: a filled one for the action that
   matters, an outlined one for everything else. Nothing else is added. */
.button {
  position: relative;
  min-height: var(--control-h);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.65rem;
  padding: 0 1.15rem;
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-control);
  color: var(--text);
  font-size: 0.9rem;
  font-weight: 600;
  letter-spacing: -0.006em;
  white-space: nowrap;
  transition: color var(--motion-fast) ease, border-color var(--motion-fast) ease, background-color var(--motion-fast) ease, transform 110ms var(--ease-ui);
}
.button svg { flex: none; width: 16px; height: 16px; transition: transform var(--motion-ui) var(--ease); }
.button > svg:first-child { width: 17px; height: 17px; }
/* Only a trailing arrow points somewhere, so only it travels. */
.button:hover > span + svg { transform: translateX(3px); }
.button:hover { border-color: var(--accent); }
/* The press is the whole feedback: it goes down, it does not grow. */
.button:active { transform: translateY(1px); }

.button--primary { border-color: var(--accent); background: var(--accent); color: var(--primary-ink); }
.button--primary:hover { border-color: var(--accent-strong); background: var(--accent-strong); }

/* The header CTA and the outbound links, which should not compete with the
   primary action sitting a screen below them. */
.button--quiet { border-color: var(--line); color: var(--text-soft); }
.button--quiet:hover { border-color: var(--accent); color: var(--text); }

/* Not a block at all — a link that carries the same arrow. */
.button--text { min-height: auto; gap: 0.5rem; padding: 0; border: 0; border-bottom: 1px solid var(--accent); border-radius: 0; color: var(--accent-strong); }
.button--text:hover { border-bottom-color: var(--accent-strong); }
.button--text:active { transform: none; }
.nav-cta { min-height: var(--control-h-sm); }

/* The arrow is drawn, not stamped: a thin stroke with round ends, a long
   shaft and a shallow head. Every arrow on the site is this one. */
.button svg, .project-visit svg, .contact-card__action svg {
  stroke-width: 1.5;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.nav-backdrop { position: fixed; inset: var(--header) 0 0; z-index: 89; background: rgba(3, 4, 7, 0.58); opacity: 0; transition: opacity var(--motion-ui) ease; }
.nav-backdrop.is-open { opacity: 1; }
.mobile-nav {
  position: fixed;
  z-index: 90;
  top: calc(var(--header) + 0.75rem);
  right: var(--gutter);
  width: min(calc(100% - (var(--gutter) * 2)), 420px);
  padding: 0.7rem;
  border: 1px solid var(--line-strong);
  border-radius: var(--radius);
  background: var(--surface);
  box-shadow: var(--shadow);
  opacity: 0;
  transform: translateY(-10px);
  max-height: calc(100dvh - var(--header) - 1.5rem);
  overflow-y: auto;
  transition: opacity var(--motion-ui) ease, transform var(--motion-ui) var(--ease), border-color var(--motion-fast) ease;
}
.mobile-nav.is-open { opacity: 1; transform: none; }
.mobile-nav__links { display: grid; }
.mobile-nav__links > a {
  position: relative;
  min-height: 50px;
  display: flex;
  align-items: center;
  padding: 0.72rem 0.9rem;
  color: var(--text-soft);
  font-size: 1rem;
  font-weight: 500;
  letter-spacing: -0.012em;
  transition: color var(--motion-fast) ease, background var(--motion-fast) ease;
}
.mobile-nav__links > a + a { border-top: 1px solid var(--line); }
.mobile-nav__links > a:hover, .mobile-nav__links > a:focus-visible { color: var(--text); background: var(--accent-faint); }
.mobile-nav__links > a[aria-current="page"] { color: var(--accent-strong); }
.mobile-nav__links > a[aria-current="page"]::before { content: ""; position: absolute; top: 50%; left: 0; width: 3px; height: 20px; border-radius: 0 2px 2px 0; background: var(--accent); transform: translateY(-50%); }
.mobile-nav__utilities { display: grid; padding-top: 0.72rem; border-top: 1px solid var(--line-strong); }
.mobile-nav__cta { width: 100%; }

/* Initial page entrance: above-the-fold only; scroll reveals handle the rest. */
.hero-copy > h1,
.hero-copy > .lead,
.hero-copy > .hero-actions,
.hero-copy > .identity-line,
.page-hero__inner > *,
.contact-hero__copy > *,
.contact-time { animation: initial-content-in 540ms var(--ease) both; }
.hero-copy > h1,
.page-hero__inner > h1,
.contact-hero__copy > h1 { animation-delay: 45ms; }
.hero-copy > .lead,
.page-hero__inner > .lead,
.contact-hero__copy > .lead { animation-delay: 115ms; }
.hero-copy > .hero-actions { animation-delay: 185ms; }
.hero-copy > .identity-line { animation-delay: 245ms; }
.page-hero__inner > .breadcrumbs,
.contact-hero__copy > .breadcrumbs { animation-delay: 20ms; }
.contact-time {
  animation-name: initial-visual-in;
  animation-duration: 650ms;
  animation-delay: 90ms;
}
.history-navigation .site-header,
.history-navigation .hero-copy > *,
.history-navigation .page-hero__inner > *,
.history-navigation .contact-hero__copy > *,
.history-navigation .contact-time { animation: none; }
@keyframes initial-header-in {
  from { opacity: 0; transform: translateY(-6px); }
  to { opacity: 1; transform: none; }
}
@keyframes initial-content-in {
  from { opacity: 0; transform: translateY(14px); }
  to { opacity: 1; transform: none; }
}
@keyframes initial-visual-in {
  from { opacity: 0; transform: translateY(8px) scale(0.985); }
  to { opacity: 1; transform: none; }
}

/* Home hero */
/* Same vertical block as the Contact hero, so both pages open identically:
   full space above the copy, half of it before the next section line. */
.hero { display: grid; align-items: center; padding-block: clamp(3.75rem, 6vw, 6.5rem) clamp(1.9rem, 3vw, 3.25rem); }
.hero + .section { padding-top: clamp(3.5rem, 4.75vw, 4.75rem); }
.hero-grid { display: grid; align-items: center; }
.hero-copy { display: grid; align-content: center; gap: 1.45rem; max-width: min(100%, 980px); }
.hero-copy h1 { max-width: 15ch; }
.hero-title-accent { color: var(--accent-strong); }
.hero-copy .lead { max-width: 56ch; }
.hero-actions { display: flex; flex-wrap: wrap; gap: 0.75rem; }
/* The globe belongs to the sentence, so it hangs on the first line rather than
   on the block: flex-start keeps it there when the line wraps, and the icon's
   own margin sets it against that first line's text — the line box's centre
   less a pixel, which puts the circle on the capitals rather than under them. */
.identity-line { display: flex; align-items: flex-start; gap: 0.6rem; color: var(--muted); font-size: 0.9rem; line-height: 1.5; }
.identity-line svg { flex: none; width: 17px; height: 17px; margin-top: calc((1.5em - 17px) / 2 - 1px); color: var(--accent); }
/* Home sections share one intro block, so every eyebrow, heading and column
   below it starts on the same left rail as the hero and the rest of the page. */
.section-intro {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(300px, 0.85fr);
  align-items: end;
  gap: clamp(1.75rem, 3.5vw, 4rem);
  margin-bottom: clamp(2.5rem, 3.5vw, 3.5rem);
}
.section-intro__title { display: grid; justify-items: start; gap: clamp(0.9rem, 1.3vw, 1.2rem); }
.section-intro h2 { max-width: none; font-size: clamp(2.1rem, 2.85vw, 2.95rem); line-height: 1.12; }
.section-intro h2 span { display: block; }
.section-intro__lead { max-width: 46ch; color: var(--text-soft); font-size: clamp(0.97rem, 1.05vw, 1.06rem); line-height: 1.76; }

/* Responsibility: a full-width ledger — one row per capability, title and
   detail on fixed columns, nothing indented away from the page rail. */
.home-responsibility { padding-block: clamp(4.5rem, 6vw, 7rem); }
.responsibility-list { display: grid; border-top: 1px solid color-mix(in srgb, var(--accent) 62%, var(--line-strong)); }
.responsibility-item {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(300px, 0.85fr);
  align-items: center;
  gap: clamp(0.5rem, 3.5vw, 4rem);
  padding-block: clamp(1.45rem, 2vw, 1.95rem);
  border-bottom: 1px solid var(--line);
}
.responsibility-item:last-child { border-bottom-color: var(--line-strong); }
.responsibility-item h3 { font-size: clamp(1.12rem, 1.35vw, 1.35rem); line-height: 1.25; }
.responsibility-item p { max-width: 54ch; color: var(--muted); font-size: clamp(0.88rem, 0.95vw, 0.98rem); line-height: 1.68; }

/* About: three capability cards carry the section, then one hairline row closes
   it with the signature and the route into the skills page. Deliberately not the
   two-rail ledger used above it, so the page changes rhythm here. */
.home-about { padding-block: clamp(4.5rem, 6vw, 7rem); }
.about-cards { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(0.85rem, 1.35vw, 1.15rem); }
.about-card {
  display: grid;
  align-content: start;
  gap: clamp(0.75rem, 1vw, 0.95rem);
  padding: clamp(1.3rem, 1.9vw, 1.85rem);
  border: 1px solid var(--line-strong);
  border-radius: 12px;
  background: color-mix(in srgb, var(--surface) 88%, transparent);
}
.about-card__icon {
  display: grid;
  place-items: center;
  width: 42px;
  height: 42px;
  margin-bottom: 0.15rem;
  border: 1px solid color-mix(in srgb, var(--accent) 26%, transparent);
  border-radius: 10px;
  background: var(--accent-soft);
  color: var(--accent-strong);
}
.about-card__icon svg { width: 21px; height: 21px; }
.about-card h3 { font-size: clamp(1.05rem, 1.2vw, 1.2rem); line-height: 1.28; }
.about-card p { color: var(--muted); font-size: clamp(0.88rem, 0.95vw, 0.97rem); line-height: 1.68; }

.about-signature {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: clamp(1.5rem, 3vw, 3rem);
  margin-top: clamp(1.75rem, 2.6vw, 2.5rem);
  padding-top: clamp(1.5rem, 2.2vw, 2rem);
  border-top: 1px solid color-mix(in srgb, var(--accent) 62%, var(--line-strong));
}
.about-signature__line {
  max-width: 66ch;
  color: var(--text);
  font-family: var(--font-display);
  font-weight: 550;
  font-size: clamp(1.2rem, 1.75vw, 1.75rem);
  letter-spacing: -0.03em;
  line-height: 1.32;
  text-wrap: balance;
}

.home-process { padding-block: clamp(5rem, 7vw, 7rem) clamp(3rem, 5vw, 4.75rem); }
.home-process .section-head { max-width: 780px; }
/* The rail line runs behind the step icons, which sit on it in opaque plates. */
.process-rail { position: relative; display: grid; grid-template-columns: repeat(4, 1fr); gap: 2rem; padding-top: 0.35rem; }
.process-rail::before { content: ""; position: absolute; top: calc(0.35rem + 19px); right: 0; left: 0; height: 1px; background: linear-gradient(90deg, var(--accent), var(--line-strong)); transform: scaleX(0); transform-origin: left; transition: transform 850ms var(--ease); }
.is-section-visible .process-rail::before { transform: scaleX(1); }
.process-step { position: relative; display: grid; gap: 0.7rem; padding-top: 3.3rem; }
.process-step__icon {
  position: absolute;
  top: 0;
  left: 0;
  width: 38px;
  height: 38px;
  display: grid;
  place-items: center;
  border: 1px solid color-mix(in srgb, var(--accent) 30%, var(--line-strong));
  border-radius: 10px;
  background: var(--bg);
  color: var(--accent-strong);
}
.process-step__icon svg { width: 19px; height: 19px; }
.process-step p { max-width: 31ch; font-size: 0.9rem; }

.cta-band { display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 2rem; padding: clamp(1.6rem, 3vw, 2.3rem); border: 1px solid var(--line-strong); background: linear-gradient(110deg, var(--accent-soft), transparent 55%); }
.cta-band__copy { display: grid; gap: 0.35rem; }
.cta-band h2 { font-size: clamp(1.5rem, 2.7vw, 2rem); }

/* Shared page heroes */
.page-hero { padding-block: clamp(4.25rem, 7vw, 7rem) clamp(1.5rem, 2.5vw, 2.5rem); border-bottom: 1px solid var(--line); }
.page-hero__inner { display: grid; gap: 1.1rem; max-width: 900px; }
.page-hero h1 { font-size: clamp(2.6rem, 5vw, 4rem); }
/* The accented half of the title is its own phrase, so it takes its own line
   instead of depending on how long a given translation happens to be. */
.page-hero h1 .hero-title-accent { display: block; }
.page-hero .lead { max-width: 720px; }
.breadcrumbs { display: flex; flex-wrap: wrap; gap: 0.55rem; color: var(--dim); font: 500 0.72rem var(--font-mono); }
.breadcrumbs a:hover { color: var(--accent-strong); }
.breadcrumbs span[aria-hidden="true"] { color: var(--line-strong); }

/* Skills: a technical reference, not a description of the work. Each area names
   itself once across the full measure, then lists its stack in labelled groups
   underneath — three columns wide, so the page carries the whole stack at a
   readable line length instead of leaving a rail of empty space beside it. */
/* The hero's own rule opens the run, so the first area does not add a second
   hairline under it; every area after that is separated by its own. */
.stack-area + .stack-area { padding-top: clamp(2rem, 3vw, 2.9rem); border-top: 1px solid var(--line); }
.stack-area { padding-bottom: clamp(2rem, 3vw, 2.9rem); }
.stack-area:last-child { padding-bottom: 0; }
.stack-area__name {
  margin-bottom: clamp(1.15rem, 1.8vw, 1.6rem);
  font-size: clamp(1.4rem, 2vw, 1.85rem);
  letter-spacing: -0.028em;
}
/* Groups are held apart by space alone — no rules inside an area, which is what
   lets the page stay quiet at this density. An area's own number of groups sets
   how many rows it fills, so no two areas come out the same shape. */
.stack-groups {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(1.3rem, 2vw, 1.75rem) clamp(1.75rem, 3vw, 3.5rem);
  align-content: start;
}
.stack-group { min-width: 0; display: grid; align-content: start; gap: 0.28rem; }
.stack-group__label {
  color: var(--muted);
  font: 500 0.66rem/1.6 var(--font-mono);
  letter-spacing: 0.13em;
  text-transform: uppercase;
}
/* Running text with real spaces around the separator, so a long run still has
   somewhere to break. */
.tech-list { color: var(--text-soft); font-size: clamp(0.92rem, 1vw, 1rem); line-height: 1.72; }
/* A name never breaks across lines; the separator carries the break instead. */
.tech-list li { display: inline; white-space: nowrap; }
/* The dot is glued to the name it follows, so it can never open a line; the
   break opportunity is the real space between the items in the markup. */
.tech-list li:not(:last-child)::after { content: "\00a0\00b7"; color: var(--accent); opacity: 0.5; }
/* Tools named under the thing they implement — aiogram under Telegram, Certbot
   under TLS. One entry with its depth, set quieter than the name it belongs to.
   The dash is bound to both sides, so the wrap happens inside the tool list. */
.tech-sub { white-space: normal; color: var(--muted); font-size: 0.94em; }
.tech-sub::before { content: "\00a0—\00a0"; }

/* Projects */
/* What the three stores share: four hairline columns on the page rail. */
/* The four columns sit a little closer to the lead above them than a section
   head normally allows. */
.section-head:has(+ .project-baseline) { margin-bottom: clamp(0.75rem, 1.2vw, 1.15rem); }
.project-baseline { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); border-top: 1px solid color-mix(in srgb, var(--accent) 62%, var(--line-strong)); }
.project-baseline > div { display: grid; align-content: start; gap: 0.55rem; padding: 1.35rem clamp(1rem, 1.6vw, 1.75rem) 1.55rem; border-bottom: 1px solid var(--line); }
.project-baseline > div + div { border-left: 1px solid var(--line); }
.project-baseline > div:first-child { padding-left: 0; }
.project-baseline h3 { font-size: clamp(1rem, 1.15vw, 1.15rem); }
.project-baseline p { max-width: 44ch; color: var(--muted); font-size: 0.86rem; line-height: 1.65; }

/* Compact commercial work: open editorial rows, not case-study cards. */
.projects-showcase { border-bottom: 1px solid var(--line); }
.project-showcase {
  display: grid;
  grid-template-columns: minmax(420px, 0.96fr) minmax(0, 1.04fr);
  grid-template-areas:
    "media intro"
    "media details";
  grid-template-rows: auto 1fr;
  column-gap: clamp(2.5rem, 4.5vw, 5rem);
  /* The picture starts on the same line as the project title; the row's spare
     height collects under it instead of floating the image mid-row. */
  align-items: start;
  padding-block: clamp(2.5rem, 3.6vw, 3.75rem);
}
.project-showcase + .project-showcase { border-top: 1px solid var(--line-strong); }
/* The frame follows the screenshot's own proportions, so nothing is cropped
   out of a shot that was framed deliberately. */
.project-showcase__media {
  grid-area: media;
  overflow: hidden;
  border: 1px solid var(--line-strong);
  border-radius: 9px;
  background: var(--surface);
}
.project-showcase__media img {
  width: 100%;
  height: auto;
  filter: saturate(0.88) contrast(1.02);
  transition: transform 420ms var(--ease), filter var(--motion-ui) ease;
}
.project-showcase:hover .project-showcase__media img { transform: scale(1.012); filter: saturate(1) contrast(1.02); }
.project-showcase__intro { grid-area: intro; display: grid; align-content: start; gap: 0.72rem; padding-bottom: 1.15rem; }
.project-showcase__topline { min-height: 28px; display: flex; align-items: center; justify-content: space-between; gap: 0.75rem 1.5rem; }
/* One plate that names the kind of product the shop is. */
.project-tag {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.36rem 0.64rem;
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-sm);
  color: var(--muted);
  font: 500 0.64rem/1 var(--font-mono);
  letter-spacing: 0.1em;
  text-transform: uppercase;
}
.project-showcase__note { color: var(--dim); font-size: 0.75rem; white-space: nowrap; }
.project-showcase h2 { font-size: clamp(2rem, 2.8vw, 2.75rem); }
.project-showcase__summary { max-width: 60ch; color: var(--text-soft); font-size: 0.92rem; line-height: 1.55; }
.project-showcase__details { grid-area: details; min-width: 0; display: grid; justify-items: start; align-content: start; gap: 1.05rem; padding-top: 1.15rem; border-top: 1px solid var(--line); }
/* The owner's words, set against a rule rather than in a card, and in the one
   serif on the site — a voice that is not mine should not look like mine. */
.project-testimonial { justify-self: stretch; display: grid; gap: 0.55rem; }
.project-quote {
  --quote-rule: clamp(0.9rem, 1.4vw, 1.15rem);
  display: grid;
  gap: 0.5rem;
  margin-left: calc(-1 * var(--quote-rule));
  padding-left: var(--quote-rule);
  border-left: 1px solid color-mix(in srgb, var(--accent) 55%, transparent);
}
.project-quote p {
  max-width: 58ch;
  color: var(--text);
  font-family: "Lora", Georgia, "Times New Roman", serif;
  font-style: italic;
  font-size: clamp(0.94rem, 1.05vw, 1rem);
  line-height: 1.58;
  letter-spacing: 0.005em;
}
.project-quote cite { color: var(--dim); font: 500 0.68rem/1.4 var(--font-mono); font-style: normal; letter-spacing: 0.04em; }

/* Opens the shop itself: a button, but sized for a hairline block — no fill
   until it is hovered, and the destination is the label. */
.project-visit {
  width: max-content;
  min-height: 40px;
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  padding: 0.5rem 0.9rem;
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-control);
  color: var(--text);
  font-size: 0.85rem;
  font-weight: 600;
  letter-spacing: -0.006em;
  transition: color var(--motion-fast) ease, border-color var(--motion-fast) ease, background-color var(--motion-fast) ease, transform 110ms var(--ease-ui);
}
.project-visit svg { width: 15px; height: 15px; color: var(--accent); transition: color var(--motion-fast) ease; }
.project-visit:hover, .project-visit:focus-visible { border-color: var(--accent); background: var(--accent-faint); color: var(--accent-strong); }
.project-visit:hover svg, .project-visit:focus-visible svg { color: var(--accent-strong); }
.project-visit:active { transform: translateY(1px); }

/* The one place a technical list belongs: named, then listed as running text so
   a long run still breaks. Real spaces around the separator — without them a
   run of single words has no break opportunity and overflows the column. */
.project-showcase__details > .project-tech:first-child { padding-top: 0; border-top: 0; }
.project-tech { justify-self: stretch; display: grid; gap: 0.42rem; padding-top: 0.95rem; border-top: 1px solid var(--line); }
.project-tech__label, .project-block-label { color: var(--dim); font: 500 0.64rem/1 var(--font-mono); letter-spacing: 0.14em; text-transform: uppercase; }
.project-tech__list { display: block; margin: 0; padding: 0; list-style: none; color: var(--text-soft); font-size: 0.82rem; line-height: 1.7; }
.project-tech__list li { display: inline; }
.project-tech__list li:not(:last-child)::after { content: " · "; color: var(--dim); }
/* The link out and the state of the engagement share one line. */
.project-showcase__foot { justify-self: stretch; display: flex; flex-wrap: wrap; align-items: center; gap: 0.6rem 1.1rem; }
.project-continuation {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 1.25rem 2.5rem;
  padding-block: clamp(1.5rem, 2.6vw, 2.25rem);
  border-top: 1px solid var(--line-strong);
}
.project-continuation p { max-width: 56ch; color: var(--muted); font-size: 0.9rem; line-height: 1.6; }

/* Contact */
.contact-hero { padding-block: clamp(3.75rem, 6vw, 6.5rem) clamp(1.9rem, 3vw, 3.25rem); border-bottom: 1px solid var(--line); }
/* Same split as .contact-grid below, so the clock lines up with the right-hand
   column of the section under it. */
.contact-hero__grid { display: grid; grid-template-columns: minmax(0, 1.14fr) minmax(320px, 0.86fr); gap: clamp(3rem, 7vw, 7rem); align-items: center; }
.contact-hero__copy { display: grid; gap: 1.2rem; }
.contact-hero h1 { max-width: 720px; }

/* Local time: a typographic block, not a widget. It shrinks to its content and
   hugs the right edge of the content container, so its outer offset mirrors the
   hero copy's offset on the left; the rule keeps its own clear left edge. */
.contact-time {
  display: grid;
  align-content: center;
  justify-items: start;
  justify-self: end;
  gap: 0.62rem;
  padding-left: clamp(2rem, 5vw, 4rem);
  padding-block: 0.7rem;
  border-left: 1px solid var(--line-strong);
}
.contact-time > .mono-label { color: var(--muted); font-size: 0.79rem; }
/* Hours and minutes are the value; seconds ride the same baseline, smaller. */
.clock {
  display: flex;
  align-items: baseline;
  max-width: 100%;
  color: var(--text);
  font: 400 clamp(3.65rem, 5.2vw, 4.6rem)/0.95 var(--font-mono);
  letter-spacing: -0.035em;
  font-variant-numeric: tabular-nums;
}
.clock__major { display: inline-flex; align-items: baseline; }
.clock__seconds { display: inline-flex; align-items: baseline; font-size: 0.55em; letter-spacing: -0.015em; }
.clock__unit--seconds { color: var(--muted); }
.clock__sep { margin-inline: 0.05em; color: var(--dim); }
.contact-time__meta { display: grid; justify-items: start; gap: 0.38rem; margin-top: 0.45rem; }
.contact-time__date { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0.45rem; color: var(--text-soft); font-size: 0.99rem; }
.contact-time__date #clockDate { font-variant-numeric: tabular-nums; }
.contact-time__dot { color: var(--line-strong); }
.live-state { display: flex; align-items: center; gap: 0.55rem; color: var(--muted); font-size: 0.86rem; }
.live-state::before { content: ""; flex: none; width: 7px; height: 7px; border-radius: 50%; background: var(--accent-strong); box-shadow: 0 0 0 3px var(--accent-soft); animation: status-pulse 4.8s var(--ease-ui) infinite; }

.contact-grid { display: grid; grid-template-columns: minmax(0, 1.14fr) minmax(320px, 0.86fr); gap: clamp(3rem, 7vw, 7rem); }
.contact-primary { display: grid; grid-template-rows: auto minmax(0, 1fr); }
.contact-grid > * + * { padding-left: clamp(2rem, 5vw, 4rem); border-left: 1px solid var(--line-strong); }
.contact-block-title { margin-bottom: 1.2rem; color: var(--muted); font: 500 0.75rem var(--font-mono); }

/* Direct-contact buttons, each carrying its platform's own mark and colour. */
.contact-cards { display: grid; grid-auto-rows: minmax(79px, 1fr); gap: 0.6rem; }
.contact-card {
  --brand: var(--accent);
  --brand-2: var(--accent-strong);
  --brand-ink: #ffffff;
  position: relative;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 0 0.8rem;
  padding: 0.72rem 0.9rem;
  overflow: hidden;
  border: 1px solid var(--line-strong);
  border-radius: 11px;
  background: color-mix(in srgb, var(--surface) 88%, transparent);
  transition: border-color var(--motion-fast) ease, background var(--motion-fast) ease, transform 110ms var(--ease-ui);
}
.contact-card::before {
  content: "";
  position: absolute;
  inset: 0;
  opacity: 0;
  background: radial-gradient(120% 130% at 0% 0%, color-mix(in srgb, var(--brand) 20%, transparent), transparent 62%);
  transition: opacity var(--motion-ui) ease;
}
.contact-card > * { position: relative; z-index: 1; }
.contact-card:hover, .contact-card:focus-visible { border-color: color-mix(in srgb, var(--brand) 60%, var(--line-strong)); }
.contact-card:active { transform: translateY(1px); }
.contact-card:hover::before, .contact-card:focus-visible::before { opacity: 1; }
.contact-card--featured { background: linear-gradient(150deg, color-mix(in srgb, var(--brand) 13%, var(--surface)), color-mix(in srgb, var(--surface) 90%, transparent) 66%); border-color: color-mix(in srgb, var(--brand) 34%, var(--line-strong)); }

.contact-card__mark {
  grid-column: 1;
  grid-row: 1;
  width: 36px;
  height: 36px;
  display: grid;
  place-items: center;
  border-radius: 10px;
  background: linear-gradient(140deg, var(--brand-2), var(--brand));
  color: var(--brand-ink);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.18);
}
.contact-card__mark svg { width: 20px; height: 20px; }
.contact-card__body { grid-column: 2; grid-row: 1; min-width: 0; display: grid; align-content: center; gap: 0.06rem; }
.contact-card__name { color: var(--text); font-family: var(--font-display); font-size: 0.95rem; line-height: 1.3; font-weight: 600; letter-spacing: -0.015em; }
.contact-card__id { overflow-wrap: anywhere; color: color-mix(in srgb, var(--brand-text, var(--brand)) 62%, var(--text-soft)); font: 500 0.7rem/1.3 var(--font-mono); }
.contact-card__description { margin-top: 0.16rem; color: var(--muted); font-size: 0.72rem; line-height: 1.35; }
.contact-card__action { grid-column: 3; grid-row: 1; display: grid; place-items: center; color: var(--dim); transition: color var(--motion-fast) ease; }
.contact-card__action svg { width: 16px; height: 16px; transition: transform var(--motion-ui) var(--ease); }
.contact-card:hover .contact-card__action, .contact-card:focus-visible .contact-card__action { color: color-mix(in srgb, var(--brand-text, var(--brand)) 70%, var(--text)); }
.contact-card:hover .contact-card__action svg, .contact-card:focus-visible .contact-card__action svg { transform: translateX(3px); }

.contact-card--telegram { --brand: #229ed9; --brand-2: #2aabee; }
.contact-card--gmail { --brand: #d93025; --brand-2: #ea4335; }
.contact-card--discord { --brand: #5865f2; --brand-2: #818cf8; }
.contact-card--github { --brand: #f0f0f2; --brand-2: #ffffff; --brand-ink: #0d1117; --brand-text: #8b949e; }
:root[data-theme="light"] .contact-card--github { --brand: #24292f; --brand-2: #3d444d; --brand-ink: #ffffff; --brand-text: #57606a; }
.context-list { border-top: 1px solid var(--line); }
.context-list li { display: flex; align-items: center; gap: 0.85rem; padding: 0.9rem 0; border-bottom: 1px solid var(--line); color: var(--text-soft); }
.context-list li svg { flex: none; width: 19px; height: 19px; margin-left: 0.1rem; color: var(--accent-strong); }
.enough-note { max-width: 46ch; margin-top: 1.1rem; color: var(--muted); font-size: 0.88rem; line-height: 1.6; }
.availability-note { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; gap: 0.85rem; margin-top: 1.6rem; padding: 0.95rem 1.05rem; border: 1px solid var(--line); border-radius: 11px; background: var(--accent-faint); }
.availability-note svg { flex: none; width: 22px; height: 22px; color: var(--accent-strong); }
.availability-note p { color: var(--text-soft); font-size: 0.9rem; line-height: 1.6; }
@keyframes status-pulse { 0%, 70%, 100% { box-shadow: 0 0 0 4px var(--accent-soft); } 82% { box-shadow: 0 0 0 7px transparent; } }

/* Footer */
.site-footer { border-top: 1px solid var(--line); background: color-mix(in srgb, var(--bg-soft) 82%, var(--bg)); }
.footer-grid { display: grid; grid-template-columns: 1.4fr 0.8fr 0.8fr; gap: clamp(2.5rem, 6vw, 6rem); padding-block: clamp(3rem, 5vw, 4.5rem); }
.footer-intro { display: grid; align-content: start; gap: 1rem; }
.footer-intro p { max-width: 37ch; color: var(--muted); font-size: 0.9rem; }
.footer-column { display: grid; align-content: start; gap: 0.65rem; }
.footer-column h2 { margin-bottom: 0.35rem; color: var(--dim); font: 500 0.7rem var(--font-mono); letter-spacing: 0.1em; text-transform: uppercase; }
.footer-column a { width: max-content; color: var(--muted); font-size: 0.88rem; }
.footer-column a:hover { color: var(--accent-strong); }
.footer-bottom { display: flex; justify-content: space-between; gap: 1rem; padding-block: 1.15rem; border-top: 1px solid var(--line); color: var(--dim); font-size: 0.75rem; }

/* Scroll motion is progressive enhancement: without JS, every item remains visible. */
.motion-ready .reveal-item { opacity: 0; transform: translate3d(0, 14px, 0); transition: opacity var(--motion-reveal) var(--ease), transform var(--motion-reveal) var(--ease); transition-delay: calc(var(--reveal-order, 0) * 65ms); will-change: opacity, transform; }
.motion-ready .reveal-item.is-visible { opacity: 1; transform: none; }
.motion-ready .reveal-item.is-visible { will-change: auto; }

@media (max-width: 1100px) {
  .section-intro,
  .responsibility-item { grid-template-columns: minmax(0, 1.1fr) minmax(280px, 0.9fr); gap: 2.5rem; }
  .about-card { padding: 1.25rem; }
  .stack-groups { gap: 1.25rem 2rem; }
  .project-baseline { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .project-baseline > div { padding-left: clamp(1rem, 1.6vw, 1.75rem); border-left: 1px solid var(--line); }
  .project-baseline > div:nth-child(2n+1) { padding-left: 0; border-left: 0; }
  .project-showcase { grid-template-columns: minmax(360px, 0.9fr) minmax(0, 1.1fr); column-gap: 2.25rem; }
}

@media (max-width: 899px) {
  :root { --header: 64px; }
  .desktop-nav, .nav-cta, .nav-actions > .language-switch { display: none; }
  .mobile-locale { width: 44px; height: 44px; display: grid; place-items: center; border: 1px solid var(--line); border-radius: var(--radius-control); color: var(--text-soft); font: 500 0.72rem var(--font-mono); transition: color var(--motion-fast) ease, border-color var(--motion-fast) ease, background var(--motion-fast) ease, transform 110ms var(--ease-ui); }
  .mobile-locale:hover { color: var(--accent-strong); border-color: var(--accent); background: var(--accent-faint); }
  .mobile-locale:active { transform: translateY(1px); }
  .mobile-locale:hover, .mobile-locale:focus-visible { color: var(--accent-strong); border-color: var(--accent); background: var(--accent-faint); }
  .mobile-locale--detached { position: fixed; z-index: 102; top: 10px; right: calc(var(--gutter) + 88px + 1.3rem); }
  .theme-toggle, .menu-toggle { width: 44px; height: 44px; }
  .menu-toggle { display: grid; }
  .contact-hero__grid, .contact-grid { grid-template-columns: 1fr; }
  .contact-hero__grid { gap: 2.25rem; }
  .contact-time { justify-self: stretch; padding: 1.5rem 0 0; border-top: 1px solid var(--line-strong); border-left: 0; }
  .section-intro { grid-template-columns: 1fr; align-items: start; gap: 1.5rem; margin-bottom: 2.75rem; }
  .section-intro h2 { max-width: 18ch; }
  .section-intro__lead { max-width: 62ch; }
  .responsibility-item { grid-template-columns: 1fr; gap: 0.5rem; }
  .responsibility-item p { max-width: 62ch; }
  .about-cards { grid-template-columns: 1fr; gap: 0.85rem; }
  .about-card { grid-template-columns: 42px minmax(0, 1fr); column-gap: 1.1rem; row-gap: 0.5rem; padding: 1.3rem 1.35rem; }
  .about-card__icon { grid-row: span 2; margin-bottom: 0; }
  .about-card p { max-width: 62ch; }
  .about-signature { grid-template-columns: 1fr; align-items: start; gap: 1.35rem; }
  .about-signature__line { max-width: 40ch; }
  /* Two columns of groups on a tablet; three would leave each run too narrow to
     read as continuous text. */
  .stack-groups { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .tech-list { max-width: 62ch; }
  .project-showcase {
    grid-template-columns: minmax(0, 1fr);
    grid-template-areas:
      "intro"
      "media"
      "details";
    gap: 1.4rem;
    padding-block: 3rem;
  }
  .project-showcase__intro { padding-bottom: 0; }
  .project-showcase__media { width: min(100%, 760px); }
  .contact-grid > * + * { padding: 2rem 0 0; border-top: 1px solid var(--line-strong); border-left: 0; }
}

@media (max-width: 680px) {
  :root { --section: 4rem; }
  body { font-size: 15.5px; }
  h1 { font-size: clamp(2.45rem, 12.5vw, 3.25rem); }
  h2 { font-size: clamp(1.85rem, 9vw, 2.5rem); }
  .language-switch { display: none; }
  .hero-copy { gap: 1.2rem; }
  .hero-actions { display: grid; }
  .hero-actions .button { width: 100%; }
  .home-responsibility { min-height: auto; padding-block: 4.25rem; }
  .home-about { min-height: auto; padding-block: 4.25rem; }
  .home-process { min-height: auto; padding-block: 3.85rem; }
  .section-intro { gap: 1.35rem; margin-bottom: 2.35rem; }
  .section-intro__title { gap: 0.85rem; }
  .section-intro h2 { max-width: 100%; font-size: clamp(1.95rem, 8.6vw, 2.4rem); line-height: 1.1; }
  .section-intro__lead { max-width: 60ch; font-size: 0.97rem; line-height: 1.72; }
  .responsibility-item { padding-block: 1.35rem 1.5rem; }
  .responsibility-item h3 { font-size: 1.14rem; }
  .responsibility-item p { max-width: 52ch; font-size: 0.9rem; line-height: 1.66; }
  .about-card { padding: 1.15rem 1.2rem; border-radius: 10px; }
  .about-card__icon { width: 38px; height: 38px; border-radius: 9px; }
  .about-card__icon svg { width: 19px; height: 19px; }
  .about-card h3 { font-size: 1.06rem; }
  .about-card p { max-width: 56ch; font-size: 0.9rem; line-height: 1.66; }
  .about-signature { gap: 1.2rem; margin-top: 1.5rem; padding-top: 1.5rem; }
  .about-signature__line { max-width: 30ch; font-size: clamp(1.22rem, 5.6vw, 1.45rem); }
  .process-rail { grid-template-columns: 1fr; gap: 0; padding: 0 0 0 3.15rem; }
  .process-rail::before { top: 0.35rem; right: auto; bottom: 0.35rem; left: 1.05rem; width: 1px; height: auto; transform: scaleY(0); transform-origin: top; }
  .is-section-visible .process-rail::before { transform: scaleY(1); }
  .process-step { padding: 0 0 1.7rem; }
  .process-step__icon { top: 0; left: -3.15rem; width: 34px; height: 34px; border-radius: 9px; }
  .process-step__icon svg { width: 18px; height: 18px; }
  .cta-band, .project-continuation { grid-template-columns: 1fr; }
  .project-continuation .button { width: 100%; }
  .cta-band .button { width: 100%; }
  .page-hero { padding-block: 3.5rem 1.5rem; }
  /* One column: the area names itself, then its groups follow underneath. */
  .stack-area { padding-block: 1.9rem; }
  .stack-area__name { margin-bottom: 1.15rem; font-size: 1.32rem; }
  .stack-groups { grid-template-columns: minmax(0, 1fr); gap: 1.15rem; }
  .tech-list { font-size: 0.94rem; line-height: 1.78; }
  .project-baseline { grid-template-columns: 1fr; }
  .project-baseline > div { padding: 1.15rem 0 1.3rem; border-left: 0; }
  /* One column now, so the rule that divided the columns has nothing left to
     divide — and it outranks the shorthand above, so it is reset by name. */
  .project-baseline > div + div { border-left: 0; }
  .project-baseline p { max-width: 56ch; }
  .project-showcase { gap: 1.2rem; padding-block: 2.45rem; }
  .project-showcase__topline { flex-wrap: wrap; }
  .project-showcase__note { white-space: normal; }
  .project-showcase h2 { font-size: clamp(1.9rem, 9vw, 2.25rem); }
  .project-showcase__summary { font-size: 0.9rem; }
  .project-showcase__details { gap: 0.78rem; }
  .project-tech { padding-top: 0.85rem; }
  .project-visit { font-size: 0.82rem; }
  .project-quote p { font-size: 0.94rem; }
  .project-continuation { min-height: 70px; }
  .contact-hero__grid { gap: 1.75rem; }
  .contact-time { gap: 0.5rem; padding-top: 1.5rem; }
  .contact-time > .mono-label { font-size: 0.76rem; }
  .clock { font-size: clamp(2.6rem, 11.6vw, 2.9rem); letter-spacing: -0.045em; }
  .clock__seconds { font-size: 0.64em; }
  .contact-time__meta { gap: 0.3rem; margin-top: 0.28rem; }
  .contact-time__date { font-size: 0.88rem; }
  .live-state { font-size: 0.8rem; }
  .footer-grid { grid-template-columns: 1fr 1fr; gap: 2.5rem 1.5rem; }
  .footer-intro { grid-column: 1 / -1; }
  .footer-bottom { flex-direction: column; }
}

@media (max-width: 390px) {
  .nav-actions { gap: 0.45rem; }
  .wordmark { font-size: 1.15rem; }
  .mobile-locale, .theme-toggle, .menu-toggle { width: 44px; height: 44px; }
  .mobile-locale--detached { right: calc(var(--gutter) + 88px + 0.9rem); }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior: auto !important; animation: none !important; transition-duration: 0.01ms !important; }
  .motion-ready .reveal-item { opacity: 1 !important; transform: none !important; }
  .process-rail::before { transform: none !important; }
  ::view-transition-old(root), ::view-transition-new(root), ::view-transition-group(root), ::view-transition-group(site-header) { animation-duration: 0.01ms !important; }
}

@media print {
  .site-header, .mobile-nav, .nav-backdrop, .site-footer, .hero-actions, .cta-band { display: none !important; }
  body { background: #fff; color: #000; }
  .section, .page-hero { break-inside: avoid; }
}