/* =========================================================================
   Ruslan Pronichev — Resume / Portfolio
   Built on the TAS design system (editorial, typographic, single accent).
   ========================================================================= */

/* ---------- Tokens ---------- */
:root {
  /* Neutrals */
  --ink:        #414142;
  --ink-soft:   #454546;
  --graphite:   #2F2F2F;
  --coal:       #222222;

  --paper:      #FFFFFF;
  --bone:       #F7F7F7;
  --mist:       #E6E6E6;
  --fog:        #CCCCCC;
  --stone:      #808080;

  /* Accent — themeable. Default: amber */
  --accent:      #E08A12;
  --accent-deep: #BE7109;
  --accent-soft: #FBEAD0;
  --on-accent:   #1A1A1B;

  /* Overlays */
  --overlay-strong: rgba(0,0,0,0.75);
  --overlay-mid:    rgba(0,0,0,0.40);
  --overlay-soft:   rgba(0,0,0,0.20);

  /* Fonts — Oswald headlines + IBM Plex Sans body (locked) */
  --font-display: "Oswald", "Arial Narrow", sans-serif;
  --font-body:    "IBM Plex Sans", -apple-system, BlinkMacSystemFont, sans-serif;
  --font-mono:    "IBM Plex Mono", ui-monospace, monospace;
  --font-name:    "Oswald", "Arial Narrow", sans-serif; /* the wordmark — always Oswald */

  /* Type scale */
  --text-display-xl: 5rem;
  --text-display-l:  3.75rem;
  --text-h1:         3rem;
  --text-h2:         2.25rem;
  --text-h3:         1.75rem;
  --text-h4:         1.375rem;
  --text-lead:       1.25rem;
  --text-body:       1.125rem;
  --text-body-s:     1rem;
  --text-caption:    0.875rem;
  --text-micro:      0.75rem;

  /* Spacing */
  --space-1:4px; --space-2:8px; --space-3:12px; --space-4:16px;
  --space-5:24px; --space-6:32px; --space-7:48px; --space-8:64px;
  --space-9:80px; --space-10:120px; --space-11:160px;

  /* Radii */
  --radius-xs:1px; --radius-s:2px; --radius-pill:999px;

  /* Motion */
  --ease-out: cubic-bezier(0.22,0.61,0.36,1);
  --dur-fast:150ms; --dur-base:250ms; --dur-slow:400ms;
}

[data-theme="dark"] {
  --ink:      #F2F2F2;
  --ink-soft: #D9D9D9;
  --graphite: #C9C9C9;
  --paper:    #161617;
  --bone:     #1E1E1F;
  --mist:     #2C2C2D;
  --fog:      #3A3A3B;
  --stone:    #9A9A9A;
  --overlay-soft: rgba(0,0,0,0.45);
}

/* ---------- Reset ---------- */
* { margin:0; padding:0; box-sizing:border-box; }
html { scroll-behavior:smooth; }
body {
  font-family: var(--font-body);
  font-size: var(--text-body);
  line-height: 1.55;
  color: var(--ink);
  background: var(--paper);
  -webkit-font-smoothing: antialiased;
  transition: background var(--dur-base) var(--ease-out), color var(--dur-base) var(--ease-out);
  overflow-x: hidden;
}
img { display:block; max-width:100%; }
a { color: inherit; text-decoration:none; }
button { font-family: inherit; cursor:pointer; }
::selection { background: var(--accent); color: var(--on-accent); }

/* ---------- Layout ---------- */
.container { max-width:1240px; margin:0 auto; padding:0 var(--space-5); }
@media (min-width:992px){ .container{ padding:0 var(--space-7); } }

.section { padding: var(--space-10) 0; position:relative; }
.section--bone { background: var(--bone); }
.section--ink { background: var(--coal); color: #F2F2F2; }
[data-theme="dark"] .section--ink { background: #0E0E0F; }
@media (max-width:767px){ .section{ padding: var(--space-9) 0; } }

/* ---------- Type ---------- */
.display { font-family:var(--font-display); font-weight:600; text-transform:uppercase; letter-spacing:0.04em; line-height:1; }
.h1 { font-family:var(--font-display); font-weight:600; font-size:var(--text-h1); text-transform:uppercase; letter-spacing:0.03em; line-height:1.04; }
.h2 { font-family:var(--font-display); font-weight:600; font-size:var(--text-h2); text-transform:uppercase; letter-spacing:0.03em; line-height:1.08; }
.h3 { font-family:var(--font-body); font-weight:600; font-size:var(--text-h3); line-height:1.2; }
.h4 { font-family:var(--font-body); font-weight:600; font-size:var(--text-h4); line-height:1.25; }
.eyebrow {
  font-family:var(--font-display); font-weight:500; font-size:var(--text-micro);
  text-transform:uppercase; letter-spacing:0.22em; color:var(--stone);
  display:inline-flex; align-items:center; gap:var(--space-3);
}
.eyebrow::before { content:""; width:28px; height:2px; background:var(--accent); display:inline-block; }
/* location eyebrow: pin + NOW tag instead of the bar */
.eyebrow--loc { gap:var(--space-2); text-transform:none; letter-spacing:0; }
.eyebrow--loc::before { content:none; }
.eyebrow--loc > span:last-child { font-family:var(--font-display); text-transform:uppercase; letter-spacing:0.18em; }
.loc-pin { width:16px; height:16px; fill:none; stroke:var(--accent); stroke-width:2; flex:0 0 auto; }
.now-tag { display:inline-flex; align-items:center; background:transparent; color:var(--accent);
  font-family:var(--font-display); font-weight:700; letter-spacing:0.12em; font-size:10px;
  padding:3px 7px 2px 0; border-radius:0; }
.lead { font-size:var(--text-lead); line-height:1.55; color:var(--ink); }
.muted { color: var(--stone); }
.accent-text { color: var(--accent); }
.mono { font-family: var(--font-mono); }
.marker { width:48px; height:4px; background:var(--accent); margin-bottom:var(--space-5); }

.section-head { max-width:760px; margin-bottom: var(--space-8); }
.section-head .h2 { margin-top: var(--space-4); }
.section-head .lead { margin-top: var(--space-4); color:var(--stone); }

/* ---------- Buttons ---------- */
.btn {
  display:inline-flex; align-items:center; gap:var(--space-3); justify-content:center;
  font-family:var(--font-display); font-weight:600; font-size:var(--text-body-s);
  text-transform:uppercase; letter-spacing:0.08em;
  border:none; border-radius:var(--radius-xs); padding:15px 28px 13px; min-height:50px;
  transition: background var(--dur-fast) var(--ease-out), color var(--dur-fast), transform 0.1s, border-color var(--dur-fast);
}
.btn:active { transform: translateY(1px); }
.btn--primary { background:var(--accent); color:var(--on-accent); }
.btn--primary:hover { background:var(--accent-deep); }
.btn--ink { background:var(--ink); color:var(--paper); }
.btn--ink:hover { background:var(--graphite); }
.btn--ghost { background:transparent; color:var(--ink); border:1px solid var(--fog); }
.btn--ghost:hover { border-color:var(--ink); }

/* ---------- Nav ---------- */
.nav {
  position:sticky; top:0; z-index:50;
  background: color-mix(in srgb, var(--paper) 86%, transparent);
  backdrop-filter: blur(10px) saturate(1.1);
  border-bottom:1px solid var(--mist);
  transition: background var(--dur-base);
}
.nav__inner { display:flex; align-items:center; justify-content:space-between; height:72px; }
.brand { display:flex; align-items:center; gap:var(--space-3); }
.brand__mark {
  flex:none; width:38px; height:38px; display:grid; place-items:center;
  background:var(--accent); color:#fff;
  font-family:var(--font-display); font-weight:700; font-size:1rem; letter-spacing:0.04em;
  border-radius:9px;
}
.brand__name { font-family:var(--font-name); font-weight:600; text-transform:uppercase; letter-spacing:0.06em; font-size:0.95rem; line-height:1; }
.brand__dot { color:var(--accent); }
.brand__last { color:var(--accent); }
.nav__links { display:none; gap:var(--space-6); align-items:center; }
.nav__links a {
  font-family:var(--font-display); font-weight:500; font-size:var(--text-caption);
  text-transform:uppercase; letter-spacing:0.1em; color:var(--stone); line-height:1;
  padding-top:4px; padding-bottom:2px; border-bottom:2px solid transparent; transition:color var(--dur-fast), border-color var(--dur-fast);
}
.nav__links a:hover { color:var(--ink); border-bottom-color:var(--accent); }
.nav__tools { display:flex; align-items:center; gap:var(--space-3); }
@media (min-width:992px){ .nav__links{ display:flex; } }

.icon-btn {
  width:42px; height:42px; display:grid; place-items:center;
  background:transparent; border:1px solid var(--fog); border-radius:var(--radius-xs);
  color:var(--ink); transition:border-color var(--dur-fast), background var(--dur-fast);
}
.icon-btn:hover { border-color:var(--ink); }
.icon-btn svg { width:18px; height:18px; stroke:currentColor; fill:none; stroke-width:1.8; }
.lang-toggle {
  display:flex; border:1px solid var(--fog); border-radius:var(--radius-xs); overflow:hidden; height:42px;
}
.lang-toggle button {
  background:transparent; border:none; padding:0 12px;
  font-family:var(--font-display); font-weight:600; font-size:var(--text-caption);
  letter-spacing:0.08em; color:var(--stone); transition:background var(--dur-fast), color var(--dur-fast);
}
.lang-toggle button[aria-pressed="true"]{ background:var(--ink); color:var(--paper); }
.nav__cta { display:none; }
@media (min-width:768px){ .nav__cta{ display:inline-flex; } }

.menu-btn { display:grid; }
@media (min-width:992px){ .menu-btn{ display:none; } }

/* mobile menu */
.mobile-menu {
  position:fixed; inset:72px 0 auto 0; background:var(--paper); border-bottom:1px solid var(--mist);
  z-index:49; transform:translateY(-110%); transition:transform var(--dur-base) var(--ease-out);
  padding: var(--space-5) 0;
}
.mobile-menu.open { transform:translateY(0); }
.mobile-menu a {
  display:block; padding:14px var(--space-5); font-family:var(--font-display); font-weight:500;
  text-transform:uppercase; letter-spacing:0.1em; font-size:0.95rem; color:var(--ink);
  border-bottom:1px solid var(--mist);
}

/* ---------- Hero ---------- */
.hero { padding: var(--space-9) 0 var(--space-10); position:relative; overflow:hidden; }
.hero__grid { display:grid; grid-template-columns:1fr; gap:var(--space-8); align-items:center; }
@media (min-width:992px){
  .hero__grid{ grid-template-columns:minmax(0,1.15fr) minmax(0,0.85fr); gap:var(--space-9); }
  /* anchor photo to top so its position never depends on intro text height (RU/EN) */
  .hero__aside{ align-self:start; display:flex; justify-content:flex-end; }
  /* align the photo's top edge with the top of the name
     (the eyebrow line + name top-margin ≈ 54px) */
  .hero__aside .portrait{ margin-top:54px; }
}
/* mobile: tighten the empty space above/below the stacked photo + center it */
@media (max-width:991px){
  .hero { padding-bottom: var(--space-8); }
  .hero__grid { gap: var(--space-7); }
  .portrait { margin-inline: auto; }
}

.hero__name { font-family:var(--font-name); font-size:clamp(2.6rem,7vw,var(--text-display-xl)); margin:var(--space-5) 0 var(--space-3); }
.hero__role { font-family:var(--font-display); font-weight:600; text-transform:uppercase; letter-spacing:0.03em;
  font-size:clamp(1.4rem,3.4vw,2.1rem); line-height:1.1; color:var(--stone); }
.hero__role .accent-text { color:var(--accent); }
.hero__role .role-word { font-family:"Oswald", "Arial Narrow", sans-serif; color:var(--accent); }
.hero__role .role-amp { font-family:"IBM Plex Sans", sans-serif; font-weight:600; color:var(--accent); }
.hero__lead { margin:var(--space-6) 0; max-width:48ch; color:var(--ink); }
.hero__cta-row { display:flex; flex-wrap:wrap; gap:var(--space-3); margin-bottom:var(--space-7); }

.socials { display:flex; gap:var(--space-3); }
.social-link {
  width:46px; height:46px; display:grid; place-items:center; border:1px solid var(--fog);
  border-radius:var(--radius-xs); color:var(--ink); transition:all var(--dur-fast);
}
.social-link:hover { background:var(--ink); color:var(--paper); border-color:var(--ink); transform:translateY(-2px); }
.social-link svg { width:19px; height:19px; }

.hero__aside-label { font-family:var(--font-display); text-transform:uppercase; letter-spacing:0.14em;
  font-size:var(--text-micro); color:var(--stone); margin-top:var(--space-6); margin-bottom:var(--space-3); }

/* portrait — framed color photo, flips to a styled QR card */
.portrait {
  position:relative; width:307px; margin-top:0;
  aspect-ratio:3/4; perspective:1400px; outline:none;
}
.portrait[data-qr="on"] { cursor:pointer; }
.portrait .flip {
  position:relative; width:100%; height:100%;
  transform-style:preserve-3d; transition:transform 0.8s var(--ease-out);
}
.portrait[data-reveal="flip"][data-flipped="true"] .flip { transform:rotateY(180deg); }
.flip__face {
  position:absolute; inset:0; backface-visibility:hidden; -webkit-backface-visibility:hidden;
  border-radius:var(--radius-s);
}
.flip__face--front .p-photo {
  display:block; width:100%; height:100%; border:1px solid var(--fog); background:var(--bone);
  object-fit:cover; border-radius:var(--radius-s);
}
.flip__face--back {
  transform:rotateY(180deg);
  background:var(--bone); border:1px solid var(--fog);
  display:flex; align-items:center; justify-content:center;
}
/* accent corner bar — lives on the card so it frames either face */
.portrait::after {
  content:""; position:absolute; left:-1px; bottom:-1px; width:64px; height:6px;
  background:var(--accent); z-index:3; pointer-events:none;
}
/* fade reveal variant (alternative to the 3D flip) */
.portrait[data-reveal="fade"] .flip { transform:none !important; }
.portrait[data-reveal="fade"] .flip__face { transition:opacity 0.5s var(--ease-out); }
.portrait[data-reveal="fade"] .flip__face--back { transform:none; opacity:0; pointer-events:none; }
.portrait[data-reveal="fade"][data-flipped="true"] .flip__face--front { opacity:0; pointer-events:none; }
.portrait[data-reveal="fade"][data-flipped="true"] .flip__face--back { opacity:1; pointer-events:auto; }

/* hide the QR feature entirely when off */
.portrait[data-qr="off"] .flip__face--back,
.portrait[data-qr="off"] .flip__cue { display:none; }

/* QR card */
.qr-card { width:100%; height:100%; display:flex; flex-direction:column;
  align-items:center; justify-content:center; gap:var(--space-4); padding:var(--space-5); }
.qr-card__mount { width:74%; aspect-ratio:1; display:flex; align-items:center; justify-content:center; }
.qr-card__mount svg { width:100%; height:100%; display:block; }
.qr-card__cap { font-family:var(--font-display); text-transform:uppercase; letter-spacing:0.12em;
  font-size:var(--text-micro); color:var(--stone); text-align:center; line-height:1.4; max-width:22ch; }

/* tap cue badge */
.flip__cue {
  position:absolute; right:10px; bottom:10px; z-index:4;
  display:inline-flex; align-items:center; gap:6px;
  background:var(--accent); color:var(--on-accent);
  font-family:var(--font-display); text-transform:uppercase; letter-spacing:0.1em;
  font-size:11px; font-weight:600; line-height:1; padding:7px 10px 6px;
  border-radius:var(--radius-s); box-shadow:0 3px 10px rgba(0,0,0,0.18);
  transition:transform var(--dur-fast) var(--ease-out), opacity 0.3s var(--ease-out);
  pointer-events:none;
}
.flip__cue svg { width:14px; height:14px; }
.flip__cue--back { background:var(--paper); color:var(--ink); border:1px solid var(--mist); box-shadow:none; }
/* show exactly one cue at a time (backface-visibility can't be trusted for the shadowed badge) */
.flip__cue--back { opacity:0; }
.portrait[data-flipped="true"] .flip__cue--front { opacity:0; }
.portrait[data-flipped="true"] .flip__cue--back { opacity:1; }
.portrait[data-qr="on"]:hover .flip__cue--front,
.portrait[data-qr="on"]:focus-visible .flip__cue--front { transform:translateY(-2px); }
.portrait:focus-visible { box-shadow:0 0 0 3px var(--accent-soft), 0 0 0 1px var(--accent); border-radius:var(--radius-s); }
@media (prefers-reduced-motion: reduce) {
  .portrait .flip { transition:none; }
  .portrait[data-reveal="fade"] .flip__face { transition:none; }
}
.portrait__tag {
  position:absolute; top:var(--space-4); left:var(--space-4); z-index:2;
  background:var(--paper); color:var(--ink); border:1px solid var(--mist);
  font-family:var(--font-display); text-transform:uppercase; letter-spacing:0.1em; font-size:var(--text-micro);
  font-weight:600; padding:7px 12px 6px; display:flex; align-items:center; gap:8px;
}
.portrait__tag .pulse { width:8px; height:8px; border-radius:50%; background:var(--accent); box-shadow:0 0 0 0 var(--accent); animation:pulse 2s infinite; }
@keyframes pulse { 0%{box-shadow:0 0 0 0 color-mix(in srgb,var(--accent) 60%,transparent);} 70%{box-shadow:0 0 0 10px transparent;} 100%{box-shadow:0 0 0 0 transparent;} }

/* stat strip */
.stats { display:grid; grid-template-columns:repeat(3,1fr); gap:var(--space-4); margin-top:var(--space-7);
  border-top:1px solid var(--mist); padding-top:var(--space-6); }
.stat__num { font-family:var(--font-display); font-weight:700; font-size:2.2rem; letter-spacing:0.01em; line-height:1;
  font-variant-numeric:tabular-nums; }
.stat__num .accent-text { color:var(--accent); }
.stat__label { font-size:var(--text-caption); color:var(--stone); margin-top:6px; }

/* ---------- Service cards ---------- */
.grid-3 { display:grid; grid-template-columns:1fr; gap:var(--space-4); }
@media (min-width:600px){ .grid-3{ grid-template-columns:1fr 1fr; } }
@media (min-width:992px){ .grid-3{ grid-template-columns:repeat(3,1fr); } }

.service {
  background:var(--paper); border:1px solid var(--mist); border-radius:var(--radius-s);
  padding:var(--space-6); transition:border-color var(--dur-base), transform var(--dur-base);
  position:relative;
}
.section--bone .service { background:var(--paper); }
.service:hover { border-color:var(--ink); transform:translateY(-3px); }
.service__num { font-family:var(--font-display); font-weight:600; font-size:var(--text-caption);
  color:var(--stone); letter-spacing:0.1em; }
.service__icon { width:46px; height:46px; display:grid; place-items:center; margin:var(--space-5) 0 var(--space-5);
  border:1px solid var(--mist); border-radius:var(--radius-xs); color:var(--accent); }
.service__icon svg { width:24px; height:24px; stroke:currentColor; fill:none; stroke-width:1.7; }
.service h3 { margin-bottom:var(--space-3); }
.service p { color:var(--stone); font-size:var(--text-body-s); }
.service__bar { position:absolute; left:0; top:0; width:3px; height:0; background:var(--accent); transition:height var(--dur-base) var(--ease-out); }
.service:hover .service__bar { height:100%; }

/* ---------- Tech stack ---------- */
.stack-grid { display:grid; grid-template-columns:1fr; gap:var(--space-5); }
@media (min-width:768px){ .stack-grid{ grid-template-columns:1fr 1fr; } }
.stack-group { border-top:1px solid var(--mist); padding-top:var(--space-5); }
.stack-group h4 { display:flex; align-items:center; gap:var(--space-3); margin-bottom:var(--space-5); }
.stack-group h4 .gn { font-family:var(--font-display); font-weight:600; text-transform:uppercase; letter-spacing:0.08em; font-size:1rem; }
.stack-group h4 .gi { color:var(--accent); display:grid; place-items:center; }
.stack-group h4 .gi svg { width:20px; height:20px; stroke:currentColor; fill:none; stroke-width:1.7; }
.chips { display:flex; flex-wrap:wrap; gap:var(--space-2); }
.chip {
  font-family:var(--font-mono); font-size:var(--text-caption); color:var(--ink);
  background:var(--bone); border:1px solid var(--mist); padding:7px 12px; border-radius:var(--radius-xs);
  transition:border-color var(--dur-fast), color var(--dur-fast);
}
.section--bone .chip { background:var(--paper); }
.chip:hover { border-color:var(--accent); color:var(--accent); }

/* skill bars */
.skillbars { display:grid; gap:var(--space-5); }
.skillbar__top { display:flex; justify-content:space-between; align-items:baseline; margin-bottom:var(--space-2); }
.skillbar__name { font-family:var(--font-display); font-weight:600; text-transform:uppercase; letter-spacing:0.06em; font-size:0.95rem; }
.skillbar__val { font-family:var(--font-mono); font-size:var(--text-caption); color:var(--stone); }
.skillbar__track { height:6px; background:var(--mist); border-radius:var(--radius-pill); overflow:hidden; }
.skillbar__fill { display:block; height:100%; width:0; background:var(--accent); border-radius:var(--radius-pill); transition:width 1s var(--ease-out); }

/* ---------- Work / case cards ---------- */
.work-grid { display:grid; grid-template-columns:1fr; gap:var(--space-5); }
@media (min-width:768px){ .work-grid{ grid-template-columns:1fr 1fr; } }
.work-card {
  border:1px solid var(--mist); border-radius:var(--radius-s); background:var(--paper);
  padding:var(--space-7); position:relative; overflow:hidden;
  transition:border-color var(--dur-base), transform var(--dur-base);
}
.work-card:hover { border-color:var(--ink); transform:translateY(-3px); }
.work-card__top { display:flex; justify-content:space-between; align-items:flex-start; gap:var(--space-4); margin-bottom:var(--space-5); }
.work-card__index { font-family:var(--font-display); font-weight:700; font-size:3rem; line-height:0.8; color:var(--mist); font-variant-numeric:tabular-nums; }
.tag { display:inline-flex; align-items:center; font-family:var(--font-display); font-size:var(--text-micro);
  text-transform:uppercase; letter-spacing:0.1em; font-weight:600; padding:6px 11px 5px; border-radius:var(--radius-pill);
  background:var(--bone); color:var(--ink); border:1px solid var(--mist); }
.tag--accent { background:var(--accent); color:var(--on-accent); border-color:transparent; }
.work-card h3 { margin-bottom:var(--space-2); }
.work-card__org { font-family:var(--font-display); text-transform:uppercase; letter-spacing:0.08em; font-size:var(--text-caption); color:var(--accent); margin-bottom:var(--space-4); }
.work-card p { color:var(--stone); font-size:var(--text-body-s); margin-bottom:var(--space-5); }
.work-card__stack { display:flex; flex-wrap:wrap; gap:6px; }
.work-card__stack .chip { font-size:var(--text-micro); padding:5px 9px; }

/* ---------- Resume / tabs ---------- */
.tabs { display:flex; flex-wrap:wrap; gap:var(--space-2); border:1px solid var(--mist); padding:6px;
  border-radius:var(--radius-s); background:var(--paper); width:fit-content; margin-bottom:var(--space-8); }
.section--bone .tabs { background:var(--paper); }
.tab {
  font-family:var(--font-display); font-weight:600; text-transform:uppercase; letter-spacing:0.08em;
  font-size:var(--text-caption); padding:11px 20px; border:none; background:transparent; color:var(--stone);
  border-radius:var(--radius-xs); transition:background var(--dur-fast), color var(--dur-fast);
}
.tab[aria-selected="true"]{ background:var(--ink); color:var(--paper); }
.tabpanel { display:none; }
.tabpanel.active { display:block; animation:fade var(--dur-slow) var(--ease-out); }
@keyframes fade { from{opacity:0; transform:translateY(8px);} to{opacity:1; transform:none;} }

/* timeline */
.timeline { display:grid; gap:0; }
.tl-item {
  display:grid; grid-template-columns:1fr; gap:var(--space-3);
  padding:var(--space-6) 0; border-top:1px solid var(--mist);
  position:relative;
}
@media (min-width:768px){ .tl-item{ grid-template-columns:200px 1fr; gap:var(--space-7); } }
.tl-item:last-child { border-bottom:1px solid var(--mist); }
.tl-period { font-family:var(--font-mono); font-size:var(--text-caption); color:var(--accent); padding-top:4px; }
.tl-now { display:inline-block; margin-top:8px; font-family:var(--font-display); font-size:var(--text-micro);
  letter-spacing:0.1em; text-transform:uppercase; background:var(--accent); color:var(--on-accent); padding:3px 8px; }
.tl-role { font-family:var(--font-body); font-weight:600; font-size:var(--text-h4); margin-bottom:4px; }
.tl-org { font-family:var(--font-display); text-transform:uppercase; letter-spacing:0.07em; font-size:var(--text-caption);
  color:var(--stone); margin-bottom:var(--space-4); }
.tl-loc { display:flex; align-items:center; gap:6px; margin:-10px 0 var(--space-4); font-size:var(--text-caption); color:var(--stone); }
.tl-loc svg { width:13px; height:13px; flex:none; fill:none; stroke:var(--accent); stroke-width:2; }

/* clickable company links */
.org-link {
  color:inherit; text-decoration:none; border-bottom:1px solid color-mix(in srgb, currentColor 35%, transparent);
  transition:color var(--dur-fast), border-color var(--dur-fast);
}
.org-link:hover { color:var(--accent); border-bottom-color:var(--accent); }
.work-card__org .org-link:hover { color:var(--accent-deep); border-bottom-color:var(--accent-deep); }
.tl-list { list-style:none; display:grid; gap:var(--space-3); }
.tl-list li { position:relative; padding-left:22px; color:var(--ink); font-size:var(--text-body-s); }
.tl-list li::before { content:""; position:absolute; left:0; top:9px; width:8px; height:2px; background:var(--accent); }

/* cert list */
.cert-grid { display:grid; grid-template-columns:1fr; gap:0; }
.cert {
  display:flex; align-items:center; gap:var(--space-5); padding:var(--space-5) 0; border-top:1px solid var(--mist);
  color:inherit; text-decoration:none; transition:padding var(--dur-fast) var(--ease-out);
}
.cert:last-child { border-bottom:1px solid var(--mist); }
.cert__date { font-family:var(--font-mono); font-size:var(--text-caption); color:var(--accent); min-width:72px; }
.cert__body { flex:1; }
.cert__name { font-weight:600; font-size:var(--text-body-s); transition:color var(--dur-fast); }
.cert__org { font-size:var(--text-caption); color:var(--stone); }
.cert__go { color:var(--stone); flex:0 0 auto; display:grid; place-items:center;
  width:34px; height:34px; border:1px solid var(--mist); border-radius:var(--radius-xs);
  transition:color var(--dur-fast), border-color var(--dur-fast), background var(--dur-fast), transform var(--dur-fast) var(--ease-out); }
.cert__go svg { width:15px; height:15px; fill:none; stroke:currentColor; stroke-width:1.8; }
a.cert:hover { padding-left:var(--space-3); }
a.cert:hover .cert__name { color:var(--accent); }
a.cert:hover .cert__go { color:var(--on-accent); background:var(--accent); border-color:var(--accent); transform:translate(2px,-2px); }
a.cert:focus-visible { outline:2px solid var(--accent); outline-offset:3px; }

/* small inline credential link (education card) */
.edu-titlerow { display:flex; align-items:center; gap:var(--space-4); flex-wrap:wrap; }
.cert__go--inline { width:32px; height:32px; flex:0 0 auto; }
.cert__go--inline:hover { color:var(--on-accent); background:var(--accent); border-color:var(--accent); transform:translate(2px,-2px); }
.cert-link { display:inline-flex; align-items:center; gap:8px; margin-top:var(--space-5);
  font-family:var(--font-display); text-transform:uppercase; letter-spacing:0.08em; font-size:var(--text-caption);
  font-weight:600; color:var(--accent); transition:gap var(--dur-fast) var(--ease-out); }
.cert-link svg { width:14px; height:14px; fill:none; stroke:currentColor; stroke-width:1.9; }
.cert-link:hover { gap:12px; }

.edu-card { border:1px solid var(--mist); border-radius:var(--radius-s); padding:var(--space-7); background:var(--paper); }
.section--bone .edu-card { background:var(--paper); }
.edu-grid { display:grid; grid-template-columns:1fr; gap:var(--space-5); }
.edu-kind { margin-top:var(--space-4); display:inline-flex; align-items:center; gap:8px;
  font-family:var(--font-display); text-transform:uppercase; letter-spacing:0.1em; font-size:var(--text-micro);
  font-weight:600; color:var(--accent); }
.edu-kind::before { content:""; width:18px; height:2px; background:var(--accent); }
/* "In progress" status pill on Professional Programs */
.prog-status { font-family:var(--font-display); text-transform:uppercase; letter-spacing:0.08em;
  font-size:var(--text-micro); font-weight:600; color:var(--on-accent); background:var(--accent);
  padding:4px 9px 3px; border-radius:999px; line-height:1; white-space:nowrap; }
/* degree card with WES badge on the right */
.edu-card--badge { display:flex; gap:var(--space-6); align-items:flex-start; justify-content:space-between; flex-wrap:wrap; }
.edu-card__main { flex:1 1 260px; min-width:0; }
.edu-card__main .edu-kind { margin-top:var(--space-4); }
/* WES credential: frame Credly's transparent badge on a themed card.
   Credly's text is a fixed dark grey, so in dark mode we invert the embed
   (lightness flips, hues preserved) to keep it readable on the dark card. */
.wes__badge { flex:0 0 auto; background:var(--paper);
  border:1px solid var(--mist); border-radius:var(--radius-s);
  padding:12px; }
.wes__badge-clip { width:120px; height:240px; overflow:hidden; }
.wes__badge iframe { border:0; display:block; transform:scale(0.8); transform-origin:top left; }
/* dark theme: badge sits on the site background; flip Credly's colours so its
   dark text becomes light (readable) and its light frame/bar go near-black,
   blending into the site-coloured card. */
[data-theme="dark"] .wes__badge {
  background:var(--paper);
}
[data-theme="dark"] .wes__badge iframe { filter:invert(1) hue-rotate(180deg); }

/* ====================================================================
   Certificates & Programs — card view (toggled via Tweaks)
   Default is the list above; [data-certview="cards"] switches both
   #panel-cert and #panel-programs to a thumbnail card grid.
   ==================================================================== */
.cert__thumb { display:none; }   /* hidden in list view */
.cert__thumb, .cert__thumb:link, .cert__thumb:visited { color:inherit; text-decoration:none; }

[data-certview="cards"] #panel-cert .cert-grid {
  grid-template-columns:repeat(auto-fill, minmax(232px, 1fr));
  gap:var(--space-5);
}
[data-certview="cards"] #panel-programs .edu-grid {
  grid-template-columns:repeat(auto-fill, minmax(300px, 1fr));
  gap:var(--space-5);
}

/* cert card shell */
[data-certview="cards"] #panel-cert .cert {
  flex-direction:column; align-items:stretch; gap:0; padding:0;
  border:1px solid var(--mist); border-radius:var(--radius-s);
  background:var(--paper); overflow:hidden;
  transition:border-color var(--dur-fast) var(--ease-out);
}
[data-certview="cards"] #panel-cert .cert:last-child { border-bottom:1px solid var(--mist); }
[data-certview="cards"] #panel-cert a.cert:hover { padding-left:0; border-color:var(--accent); }
[data-certview="cards"] #panel-cert a.cert:hover .cert__name { color:var(--accent); }
[data-certview="cards"] #panel-cert .cert__go { display:none; }
[data-certview="cards"] #panel-cert .cert__date { order:1; min-width:0; padding:var(--space-4) var(--space-4) 0; }
[data-certview="cards"] #panel-cert .cert__body { order:2; padding:6px var(--space-4) var(--space-4); flex:0 0 auto; }

/* program card: pull the thumb full-bleed to the padded card edges */
[data-certview="cards"] #panel-programs .edu-card {
  transition:border-color var(--dur-fast) var(--ease-out); overflow:hidden;
}
[data-certview="cards"] #panel-programs .edu-card:hover { border-color:var(--accent); }
[data-certview="cards"] #panel-programs .cert__thumb {
  margin:calc(-1 * var(--space-7)) calc(-1 * var(--space-7)) var(--space-5);
}
[data-certview="cards"] #panel-programs .cert__go--inline { display:none; }

/* the thumbnail surface (shared) */
[data-certview="cards"] .cert__thumb {
  display:flex; flex-direction:column; justify-content:space-between;
  position:relative; aspect-ratio:16 / 9; background:var(--bone);
  border-bottom:1px solid var(--mist); padding:var(--space-4); overflow:hidden;
}
[data-certview="cards"] .cert__thumb--img { padding:0; }
.cert__thumb--img img { width:100%; height:100%; object-fit:cover; display:block; }
/* "Fit" mode — show the whole certificate, no crop (letterboxed on the card surface) */
[data-thumbfit="contain"] .cert__thumb--img img { object-fit:contain; background:var(--bone); }

/* generated placeholder plate */
.ph__top { display:flex; align-items:center; gap:8px; }
.ph__rule { width:16px; height:2px; background:var(--accent); flex:0 0 auto; }
.ph__plat { font-family:var(--font-display); text-transform:uppercase; letter-spacing:0.12em;
  font-size:var(--text-micro); font-weight:600; color:var(--stone); }
.ph__name { font-family:var(--font-display); font-weight:600; font-size:16px; line-height:1.18; color:var(--ink);
  display:-webkit-box; -webkit-line-clamp:3; -webkit-box-orient:vertical; overflow:hidden; }
.ph__foot { display:flex; align-items:flex-end; justify-content:space-between; gap:8px; }
.ph__date { font-family:var(--font-mono); font-size:var(--text-caption); color:var(--accent); }
.ph__seal { width:22px; height:22px; border-radius:50%; border:2px solid var(--accent); position:relative; flex:0 0 auto; }
.ph__seal::after { content:""; position:absolute; inset:3px; border-radius:50%; background:var(--accent-soft); }
.cert__thumb--wip .ph__seal { border-style:dashed; }

/* ====================================================================
   Certificates — carousel (large cards, scroll-snap, swipe/arrows)
   ==================================================================== */
.cert-carousel { position:relative; outline:none; display:flex; flex-direction:column;
  flex:0 1 min(640px, calc(100% - clamp(280px, 28vw, 360px) - var(--space-5))); min-width:0; }
.cert-carousel:focus-visible { outline:2px solid var(--accent); outline-offset:6px; border-radius:var(--radius-s); }
.cc-viewport { position:relative; overflow:hidden; padding:0 44px; }   /* gutters for the vertical arrows */
.cc-track {
  display:flex; gap:var(--space-6);
  overflow-x:auto; scroll-snap-type:x mandatory; scroll-behavior:smooth;
  -webkit-overflow-scrolling:touch; padding:0;
  scrollbar-width:none;
}
.cc-track::-webkit-scrollbar { display:none; }
/* no side peek — each card fills the carousel width */
.cc-track::before, .cc-track::after { content:""; flex:0 0 0; }

/* card */
.cc-track > .cert {
  flex:0 0 100%; scroll-snap-align:center;
  flex-direction:column; align-items:stretch; gap:0; padding:0;
  border:1px solid var(--mist); border-radius:var(--radius-s);
  background:var(--paper); overflow:hidden;
  transition:border-color var(--dur-fast) var(--ease-out), box-shadow var(--dur-fast) var(--ease-out);
}
.cc-track > .cert:last-child { border-bottom:1px solid var(--mist); }
.cc-track > a.cert:hover { padding-left:0; border-color:var(--accent); box-shadow:0 10px 34px rgba(0,0,0,0.10); }
.cc-track > a.cert:hover .cert__name { color:var(--accent); }
.cc-card__img {
  display:block; width:100%; aspect-ratio:4 / 3; object-fit:contain;
  background:var(--bone); border-bottom:1px solid var(--mist);
}
/* placeholder for cards without a scan yet (e.g. in-progress program) */
.cc-card__ph {
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:var(--space-4);
  width:100%; aspect-ratio:4 / 3; background:var(--bone); border-bottom:1px solid var(--mist);
}
.cc-card__ph-ic { width:52px; height:52px; fill:none; stroke:var(--accent); stroke-width:1.6; stroke-linecap:round; stroke-linejoin:round; }
.cc-card__ph-tag {
  font-family:var(--font-display); text-transform:uppercase; letter-spacing:0.12em;
  font-size:var(--text-body-s); font-weight:700; color:#1A1A1B; background:var(--accent);
  padding:7px 16px; border-radius:999px;
}
.cc-track > .cert .cert__go { display:none; }
.cc-track > .cert .cert__date { min-width:0; padding:var(--space-4) var(--space-5) 0; }
.cc-track > .cert .cert__body { padding:4px var(--space-5) var(--space-5); }
.cc-track > .cert .cert__name {
  display:block; font-size:var(--text-body); line-height:1.3; margin-bottom:2px;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.cc-track > .cert .cert__org {
  display:block; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}

/* arrows */
/* vertical bar arrows, full height of the certificate window, in the gutters */
.cc-arrow {
  position:absolute; top:0; bottom:0; z-index:4; width:38px;
  border:1px solid var(--mist); border-radius:var(--radius-s);
  background:transparent; color:var(--ink);
  display:grid; place-items:center; cursor:pointer;
  transition:background var(--dur-fast), color var(--dur-fast), border-color var(--dur-fast), opacity var(--dur-fast);
}
/* hover: soft grey, theme-aware — light-grey on the light theme, lighter grey on dark */
.cc-arrow:hover, .cc-arrow:focus-visible { background:#d9d9d9; color:var(--ink); border-color:#cfcfcf; }
.cc-arrow:active { background:#cacaca; color:var(--ink); border-color:#c2c2c2; }
[data-theme="dark"] .cc-arrow:hover, [data-theme="dark"] .cc-arrow:focus-visible { background:#3a3a3a; color:#fff; border-color:#3a3a3a; }
[data-theme="dark"] .cc-arrow:active { background:#2b2b2b; color:#fff; border-color:#2b2b2b; }
.cc-arrow svg { width:22px; height:22px; fill:none; stroke:currentColor; stroke-width:2; }
.cc-arrow--prev { left:4px; }   /* in the gutter, not over the certificate */
.cc-arrow--next { right:4px; }
.cc-arrow:disabled { opacity:0; pointer-events:none; }
@media (max-width:640px){
  .cc-arrow { width:30px; }
}

/* counter */
/* counter tucked into the empty bottom-right of the card (over the meta area) */
.cc-counter {
  position:absolute; right:calc(44px + var(--space-6)); bottom:var(--space-4); z-index:3;
  display:flex; align-items:baseline; gap:6px; margin:0; line-height:1;
  font-family:var(--font-mono); font-size:var(--text-lead); color:var(--stone);
}
.cc-counter .cc-cur { color:var(--accent); font-weight:600; }
.cc-counter__sep { opacity:0.5; }

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

/* pull the certificates block up a bit (less gap under the tabs) */
#panel-cert, #panel-programs { margin-top: calc(-1 * var(--space-6)); }

/* stage = carousel (left) + static side list (right), matched heights */
/* carousel fills the left area; the tab-bar is widened to the same width so
   their right edges (the right arrow) line up */
.cc-stage { display:flex; gap:var(--space-5); align-items:stretch; justify-content:flex-start; }
@media (min-width:992px){
  #resume .tabs { width: min(640px, calc(100% - clamp(280px, 28vw, 360px) - var(--space-5))); flex-wrap:nowrap; }
  #resume .tabs .tab { flex:1 1 0; text-align:center; white-space:nowrap; }
}

/* list toggle button — shown only on small screens (drawer mode) */
.cc-head { display:none; justify-content:flex-end; margin-bottom:var(--space-3); }
.cc-listbtn {
  display:inline-flex; align-items:center; gap:8px; cursor:pointer;
  font-family:var(--font-display); text-transform:uppercase; letter-spacing:0.08em;
  font-size:var(--text-caption); font-weight:600; color:var(--ink);
  background:var(--paper); border:1px solid var(--mist); border-radius:var(--radius-xs);
  padding:9px 14px; transition:border-color var(--dur-fast), color var(--dur-fast), background var(--dur-fast);
}
.cc-listbtn svg { width:17px; height:17px; fill:none; stroke:currentColor; stroke-width:2; stroke-linecap:round; }
.cc-listbtn:hover { border-color:var(--accent); color:var(--accent); }

/* side list — static panel beside the carousel (desktop). The inner layer is
   absolutely positioned so the CAROUSEL drives the row height and the list
   scrolls within that height (instead of the list stretching the row). */
.cc-side {
  flex:0 0 clamp(280px, 28vw, 360px); min-width:0; position:relative;
}
.cc-side__inner {
  position:absolute; inset:0; display:flex; flex-direction:column;
  border:1px solid var(--mist); border-radius:var(--radius-s); background:var(--paper); overflow:hidden;
}
.cc-side__head {
  display:none; align-items:center; justify-content:flex-end; gap:var(--space-3);
  padding:var(--space-4); border-bottom:1px solid var(--mist); flex:0 0 auto;
}
.cc-side__title { font-family:var(--font-display); text-transform:uppercase; letter-spacing:0.1em;
  font-size:var(--text-micro); font-weight:600; color:var(--stone); }
.cc-side__close {
  width:34px; height:34px; flex:0 0 auto; cursor:pointer; display:none; place-items:center;
  background:none; border:1px solid var(--mist); border-radius:var(--radius-xs); color:var(--ink);
  transition:border-color var(--dur-fast), color var(--dur-fast), background var(--dur-fast);
}
.cc-side__close:hover { border-color:var(--accent); color:var(--on-accent); background:var(--accent); }
.cc-side__close svg { width:16px; height:16px; fill:none; stroke:currentColor; stroke-width:2; stroke-linecap:round; }

.cc-list { flex:1 1 auto; min-height:0; overflow-y:auto; overscroll-behavior:contain; }
.cc-list__item {
  display:flex; align-items:center; gap:var(--space-3); width:100%; min-height:100px; text-align:left; cursor:pointer;
  background:none; border:0; border-bottom:1px solid var(--mist); border-left:3px solid transparent;
  padding:var(--space-3) var(--space-4); transition:background var(--dur-fast), border-color var(--dur-fast);
}
.cc-list__item:hover { background:var(--bone); }
.cc-list__item.is-current { background:var(--accent-soft); border-left-color:var(--accent); }
/* highlighted item sits on a fixed light (peach) bg, so force dark text in both themes */
.cc-list__item.is-current .cc-list__name { color:#1A1A1B; }
.cc-list__item.is-current .cc-list__org { color:#5C5C5C; }
.cc-list__thumb { flex:0 0 auto; width:50px; height:38px; border:1px solid var(--mist); border-radius:var(--radius-xs);
  overflow:hidden; background:var(--bone); display:block; }
.cc-list__thumb img { width:100%; height:100%; object-fit:cover; display:block; }
.cc-list__meta { min-width:0; flex:1 1 auto; }
.cc-list__date { display:block; font-family:var(--font-mono); font-size:var(--text-micro); color:var(--accent); }
.cc-list__name { display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden;
  font-weight:600; font-size:var(--text-body-s); color:var(--ink); }
.cc-list__org { display:block; font-size:var(--text-caption); color:var(--stone);
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }

/* backdrop — only for the mobile drawer. Always present but inert (no pointer
   capture) until .open, so it never blocks taps/swipes/tab-switching. */
.cc-drawer-backdrop { position:fixed; inset:0; background:var(--overlay-mid); z-index:60;
  opacity:0; pointer-events:none; transition:opacity var(--dur-base) var(--ease-out); }
.cc-drawer-backdrop.open { opacity:1; pointer-events:auto; }

/* small screens: the side list becomes a slide-in drawer again */
@media (max-width:991px){
  #panel-cert, #panel-programs { margin-top:0; }
  .cc-head { display:flex; }
  .cc-stage { display:block; }
  .cert-carousel { flex:none; }
  .cc-side {
    position:fixed; top:0; right:0; height:100%; width:min(400px, 90vw); z-index:61;
    transform:translateX(100%); transition:transform var(--dur-base) var(--ease-out);
  }
  .cc-side.open { transform:translateX(0); }
  .cc-side__inner { border:0; border-left:1px solid var(--mist); border-radius:0; box-shadow:-12px 0 40px rgba(0,0,0,0.16); }
  .cc-side__head { display:flex; padding:var(--space-3) var(--space-4); }
  .cc-side__close { display:grid; }
  .cc-list__item { padding:var(--space-4) var(--space-5); }
  /* mobile carousel: no side arrows/gutters (swipe to navigate), bigger card */
  .cc-arrow { display:none; }
  .cc-viewport { padding:0; }
  .cc-counter { position:static; right:auto; bottom:auto; justify-content:center; margin-top:var(--space-3); }
  .cc-track > .cert .cert__name {
    font-size:var(--text-body-s); white-space:normal;
    display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical;
  }
  .cc-track > .cert .cert__org { white-space:normal; }
}

@media (prefers-reduced-motion: reduce){
  .cc-side { transition:none; }
}

/* hover "verify" badge on the thumbnail */
.cert__thumb-go { position:absolute; top:8px; right:8px; width:28px; height:28px;
  display:grid; place-items:center; border-radius:var(--radius-xs);
  background:var(--paper); color:var(--ink); border:1px solid var(--mist);
  opacity:0; transform:translateY(-3px);
  transition:opacity var(--dur-fast) var(--ease-out), transform var(--dur-fast) var(--ease-out), background var(--dur-fast); }
.cert__thumb-go svg { width:14px; height:14px; fill:none; stroke:currentColor; stroke-width:1.9; }
[data-certview="cards"] #panel-cert .cert:hover .cert__thumb-go,
[data-certview="cards"] #panel-programs .edu-card:hover .cert__thumb-go {
  opacity:1; transform:none; background:var(--accent); color:var(--on-accent); border-color:var(--accent); }

/* ---------- Contact ---------- */
.contact-grid { display:grid; grid-template-columns:1fr; column-gap:var(--space-8); row-gap:var(--space-6); }
@media (min-width:900px){ .contact-grid{ grid-template-columns:0.9fr 1.1fr; } }
.contact-head { grid-column:1 / -1; }
.contact-list { display:grid; gap:var(--space-2); margin-top:0; }
.contact-row { display:flex; align-items:center; gap:var(--space-4); padding:var(--space-4) 0; border-top:1px solid var(--mist); }
.contact-row:last-child { border-bottom:1px solid var(--mist); }
.contact-row__ic { width:42px; height:42px; display:grid; place-items:center; border:1px solid var(--mist); border-radius:var(--radius-xs); color:var(--accent); flex-shrink:0; }
.contact-row__ic svg { width:19px; height:19px; stroke:currentColor; fill:none; stroke-width:1.7; }
.contact-row__label { font-size:var(--text-caption); color:var(--stone); text-transform:uppercase; letter-spacing:0.08em; font-family:var(--font-display); }
.contact-row__val { font-size:var(--text-body); font-weight:500; }
.contact-row__val:hover { color:var(--accent); }

.form { display:grid; gap:var(--space-4); }
.form__row { display:grid; grid-template-columns:1fr 1fr; gap:var(--space-4); }
@media (max-width:600px){ .form__row{ grid-template-columns:1fr; } }
.field label { display:block; font-family:var(--font-display); text-transform:uppercase; letter-spacing:0.08em;
  font-size:var(--text-micro); color:var(--stone); margin-bottom:8px; }
.input, .textarea {
  font-family:var(--font-body); font-size:var(--text-body-s); background:var(--paper); color:var(--ink);
  border:1px solid var(--fog); border-radius:var(--radius-xs); padding:14px 16px; width:100%; min-height:50px;
  transition:border-color var(--dur-fast), box-shadow var(--dur-fast);
}
.textarea { min-height:130px; resize:vertical; }
.input:focus, .textarea:focus { outline:none; border-color:var(--accent); box-shadow:0 0 0 3px var(--accent-soft); }
.input::placeholder, .textarea::placeholder { color:var(--stone); }
.form__note { font-size:var(--text-caption); color:var(--stone); }
.form__ok { display:none; font-family:var(--font-display); text-transform:uppercase; letter-spacing:0.08em;
  font-size:var(--text-caption); color:var(--accent); align-items:center; gap:8px; }
.form__ok.show { display:flex; }

/* ---------- Footer ---------- */
.footer { background:var(--coal); color:#CFCFCF; padding:var(--space-8) 0 var(--space-6); }
[data-theme="dark"] .footer { background:#0E0E0F; }
.footer__inner { display:flex; flex-wrap:wrap; justify-content:space-between; gap:var(--space-5); align-items:center; }
.footer__brand { font-family:var(--font-name); text-transform:uppercase; letter-spacing:0.06em; color:#fff; font-weight:600; }
.footer a:hover { color:#fff; }
.footer__links { display:flex; gap:var(--space-5); flex-wrap:wrap; font-size:var(--text-caption); }
.footer__copy { font-size:var(--text-caption); color:var(--stone); margin-top:var(--space-6); border-top:1px solid #2a2a2a; padding-top:var(--space-5); }

/* ---------- reveal (only hide when JS is active) ---------- */
.reveal { opacity:1; transform:none; transition:opacity var(--dur-slow) var(--ease-out), transform var(--dur-slow) var(--ease-out); }
html.js .reveal { opacity:0; transform:translateY(16px); }
html.js .reveal.in { opacity:1; transform:none; }

/* lang visibility handled in JS via textContent swap (no CSS needed) */

@media (prefers-reduced-motion: reduce){
  *, *::before, *::after { animation-duration:0.01ms !important; transition-duration:0.01ms !important; scroll-behavior:auto !important; }
}