/* ═══════════════════════════════════════════════════════════════════════════
   Simon Asaye — portfolio
   Ground: warm near-black. Ink: paper. Metals from the medallion carry meaning:
   gold = action and current state, silver = secondary text, bronze = separators.
   Display: Besley (a Clarendon, the letter of ledgers). Text: Libre Franklin.
   Two things move: the refinery in the hero and the globe behind Experience.
   ═══════════════════════════════════════════════════════════════════════════ */

@font-face { font-family: "Besley"; src: url("../assets/fonts/besley-normal.woff2") format("woff2"); font-weight: 400 900; font-style: normal; font-display: swap; }
@font-face { font-family: "Besley"; src: url("../assets/fonts/besley-italic.woff2") format("woff2"); font-weight: 400 900; font-style: italic; font-display: swap; }
@font-face { font-family: "Libre Franklin"; src: url("../assets/fonts/libre-franklin-normal.woff2") format("woff2"); font-weight: 100 900; font-style: normal; font-display: swap; }
@font-face { font-family: "Libre Franklin"; src: url("../assets/fonts/libre-franklin-italic.woff2") format("woff2"); font-weight: 100 900; font-style: italic; font-display: swap; }

:root {
  --bg: #1a1816;
  --surface: #23201d;
  --ink: #efe9df;
  --silver: #cfc9bf;
  --meta: #a59f95;
  --gold: #e1ad66;
  --gold-deep: #b68235;
  --bronze: #b8783f;
  --rule: color-mix(in srgb, var(--ink) 16%, transparent);
  --rule-strong: color-mix(in srgb, var(--ink) 30%, transparent);

  --display: "Besley", "Clarendon", Georgia, serif;
  --text: "Libre Franklin", "Franklin Gothic Medium", "Helvetica Neue", Arial, sans-serif;

  /* type scale: 13 · 16 · 19 · 24 · 32 · 48 · fluid display */
  --t-meta: 0.8125rem;
  --t-body: 1rem;
  --t-lead: 1.1875rem;
  --t-h3: 1.5rem;
  --t-h2s: 2rem;
  --t-h2: clamp(2rem, 3.4vw, 3rem);
  /* the link underline: one period of a sine wave, tiled. Rest colour and hover colour. */
  --wave: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 6'%3E%3Cpath d='M-7 3Q-3.5 5.4 0 3T7 3T14 3T21 3' fill='none' stroke='%23b68235' stroke-width='1.15' stroke-linecap='round'/%3E%3C/svg%3E");
  --wave-live: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 6'%3E%3Cpath d='M-7 3Q-3.5 5.4 0 3T7 3T14 3T21 3' fill='none' stroke='%23e1ad66' stroke-width='1.15' stroke-linecap='round'/%3E%3C/svg%3E");
  --ok: #9ac28f; /* confirmation green, used only for the sent message */
  --wave-ok: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 6'%3E%3Cpath d='M-7 3Q-3.5 5.4 0 3T7 3T14 3T21 3' fill='none' stroke='%239ac28f' stroke-width='1.15' stroke-linecap='round'/%3E%3C/svg%3E");
  --t-title: clamp(2.25rem, 4.2vw, 3.5rem); /* short section titles: Skills in motion, DevMeetup.et */
  --t-h1: clamp(2.375rem, 4.3vw, 3.875rem);

  --gutter: clamp(20px, 4vw, 56px);
  --ease: cubic-bezier(.22, 1, .36, 1); /* ease-out-quint */
  --radius: 3px;
}

/* ── base ── */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-tap-highlight-color: rgba(225, 173, 102, .18); scroll-behavior: smooth; scroll-padding-top: 96px; -webkit-text-size-adjust: 100%; }
body {
  margin: 0; background: var(--bg); color: var(--ink);
  font-family: var(--text); font-size: var(--t-body); line-height: 1.65; font-weight: 400;
  font-feature-settings: "kern", "liga"; color-scheme: dark;
}
h1, h2, h3 { font-family: var(--display); font-weight: 400; margin: 0; text-wrap: balance; }
h1 { font-size: var(--t-h1); line-height: 1.04; letter-spacing: -0.022em; }
h2 { font-size: var(--t-h2); line-height: 1.08; letter-spacing: -0.018em; }
h3 { font-size: var(--t-h3); line-height: 1.2; letter-spacing: -0.008em; }
p { margin: 0 0 1em; max-width: 64ch; text-wrap: pretty; }
p:last-child { margin-bottom: 0; }
ul { margin: 0; padding: 0; list-style: none; }
img { display: block; max-width: 100%; height: auto; }
figure { margin: 0; }
[hidden] { display: none !important; }
::selection { background: color-mix(in srgb, var(--gold) 40%, transparent); }

/* links are underlined with a small wave; on hover it turns gold and flows sideways */
@keyframes wave-flow { to { background-position-x: calc(-1 * var(--wave-w, 14px)); } }
a { color: var(--ink); text-decoration: none; transition: color .2s; }
a:where(:not(.btn, .nav__logo, .skip)) { background: var(--wave) repeat-x 0 100% / 14px 6px; padding-bottom: 7px; -webkit-box-decoration-break: clone; box-decoration-break: clone; }
a:hover { color: var(--gold); }
a:where(:not(.btn, .nav__logo, .skip)):hover { background-image: var(--wave-live); animation: wave-flow .75s linear infinite; }
a:active { color: var(--gold-deep); }
:focus { outline: none; }
:focus-visible { outline: 2px solid var(--gold); outline-offset: 3px; border-radius: 2px; }

.meta { font-size: var(--t-meta); color: var(--meta); font-variant-numeric: tabular-nums; }
.wrap { max-width: 1240px; margin-inline: auto; padding-inline: var(--gutter); }
.skip { position: absolute; left: 12px; top: -60px; z-index: 100; background: var(--gold); color: var(--bg); padding: 10px 14px; border-radius: var(--radius); text-decoration: none; }
.skip:focus { top: 12px; }
.skip:hover, .skip:active { color: var(--bg); }

/* ── buttons and arrow links ── */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px; white-space: nowrap;
  font: 500 0.9375rem/1 var(--text); letter-spacing: 0.005em; text-decoration: none; cursor: pointer;
  padding: 14px 22px; border-radius: var(--radius); border: 1px solid transparent; background: none; color: var(--ink);
  transition: background-color .2s, border-color .2s, color .2s, transform .1s;
}
.btn:active { transform: translateY(1px); }
/* solid button: on hover the dark page colour sweeps in from the left and the label turns gold.
   The real background switches only after the sweep has covered it, so the label is never gold on gold. */
.btn--solid { position: relative; overflow: hidden; isolation: isolate; color: var(--bg); background-color: var(--gold); border-color: var(--gold); transition: color .3s var(--ease), background-color 0s, transform .1s; }
.btn--solid::before { content: ""; position: absolute; inset: -1px; z-index: -1; background: var(--bg); transform: scaleX(0); transform-origin: left center; transition: transform .45s var(--ease); }
.btn--solid:hover, .btn--solid:focus-visible { color: var(--gold); background-color: var(--bg); transition: color .3s var(--ease), background-color 0s .45s, transform .1s; }
.btn--solid:hover::before, .btn--solid:focus-visible::before { transform: scaleX(1); }
.btn--solid:active { color: var(--gold-deep); border-color: var(--gold-deep); }
/* the download arrow drops out of the button and comes back in from the top, once per hover */
@keyframes arrow-drop { 0% { transform: translateY(0); } 45% { transform: translateY(130%); } 46% { transform: translateY(-130%); } 100% { transform: translateY(0); } }
.btn__arrow { display: inline-block; overflow: hidden; line-height: 1.15; }
.btn__arrow span { display: inline-block; }
.btn:hover .btn__arrow span, .btn:focus-visible .btn__arrow span { animation: arrow-drop .6s var(--ease); }
.btn--line { border-color: var(--rule-strong); }
.btn--line:hover { border-color: var(--gold); color: var(--gold); }
.btn--icon { width: 40px; height: 40px; padding: 0; }
.btn[disabled] { opacity: .45; cursor: not-allowed; }
.link-arrow {
  font: 500 var(--t-body)/1.3 var(--text); color: var(--ink); border: 0; padding: 4px 0 9px; cursor: pointer; text-decoration: none;
  background: var(--wave) repeat-x 0 100% / 14px 6px; transition: color .2s;
}
.link-arrow:hover { color: var(--gold); background-image: var(--wave-live); animation: wave-flow .75s linear infinite; }
.link-arrow span { display: inline-block; transition: transform .25s var(--ease); }
.link-arrow:hover span { transform: translateY(2px); }
#panel-prev:hover span { transform: translateX(-3px); }
#panel-next:hover span { transform: translateX(3px); }

/* ── background field (kept; dims itself behind the two main visuals) ── */
.bg-canvas { position: fixed; inset: 0; width: 100vw; height: 100vh; height: 100lvh; pointer-events: none; z-index: -1; }

/* ── nav ── */
.nav {
  position: fixed; inset: 0 0 auto 0; z-index: 50; height: 76px;
  display: flex; align-items: center; gap: 36px; padding-inline: var(--gutter);
  background: var(--bg); border-bottom: 1px solid var(--rule);
}
.nav__logo { display: block; width: 54px; height: 54px; margin-right: auto; border-radius: 50%; }
.nav__logo img { display: block; width: 54px; height: 54px; transition: transform .9s var(--ease), filter .3s; }
.nav__logo:hover img { transform: rotate(30deg); filter: brightness(1.12); }
.nav__links { display: flex; gap: 32px; }
.nav__links a { font-size: 0.9375rem; text-decoration: none; color: var(--silver); padding: 6px 0 7px; position: relative; transition: color .2s; }
.nav__links a:not(.btn) { background: none; animation: none; }
.nav__links a:not(.btn):hover, .nav__links a[aria-current="true"]:not(.btn) { color: var(--ink); background: none; animation: none; }
.nav__links a:not(.btn)::after { content: ""; position: absolute; left: 0; right: 0; bottom: -3px; height: 6px; background: var(--wave-live) repeat-x 0 50% / 14px 6px; clip-path: inset(0 100% 0 0); transition: clip-path .55s var(--ease); }
.nav__links a:not(.btn):hover::after, .nav__links a[aria-current="true"]:not(.btn)::after { clip-path: inset(0 0 0 0); }
.nav__links a[aria-current="true"]:not(.btn)::after { animation: wave-flow .75s linear 2; }
.nav__links a:not(.btn):hover::after { animation: wave-flow .75s linear infinite; }
/* one CV button style everywhere; the bar's copy waits until the hero's has scrolled away, so two are never on screen together */
.nav__cv { padding: 11px 18px; font-size: 0.875rem; transition: opacity .3s, visibility 0s, background-color .2s, border-color .2s; }
.nav__cv.is-away { opacity: 0; visibility: hidden; pointer-events: none; transition: opacity .3s, visibility 0s .3s; }
.nav__links .nav__links-cv { display: none; }
.nav__menu { display: none; font: 500 0.9375rem/1 var(--text); color: var(--ink); background: none; border: 1px solid var(--rule-strong); border-radius: var(--radius); padding: 11px 16px; cursor: pointer; }

/* ── hero ── */
.hero {
  min-height: 100svh; display: grid; grid-template-columns: minmax(0, 1fr) min(46%, 580px); gap: clamp(32px, 4vw, 64px);
  align-items: center; padding-top: 108px; padding-bottom: 56px;
}
.hero h1 { max-width: 15ch; }
.hero__lede { font-size: var(--t-lead); line-height: 1.55; max-width: 46ch; color: var(--silver); margin: 36px 0 40px; }
.hero__actions { display: flex; flex-wrap: wrap; align-items: center; gap: 28px; }
.hero__visual { position: relative; aspect-ratio: 1 / 1; width: 100%; }
.hero__visual canvas { width: 100%; height: 100%; display: block; }

/* one orchestrated entrance, then the page holds still */
@keyframes enter { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
@keyframes appear { from { opacity: 0; } to { opacity: 1; } }
.hero h1 { animation: enter .9s var(--ease) .05s both; }
.hero__lede { animation: enter .9s var(--ease) .2s both; }
.hero__actions { animation: enter .9s var(--ease) .3s both; }
.hero__visual { animation: appear 1.6s ease-out .35s both; }

/* highlight pass: a colour runs once through the letters of a word (js/main.js adds the letters and .is-run) */
@keyframes glint-pass { 0%, 100% { color: inherit; } 45% { color: var(--gold); } }
@keyframes glint-stay { from { color: var(--ink); } to { color: var(--gold); } }
.glint i { font-style: normal; }
.glint.is-run i { animation: glint-pass 1s var(--ease) both; animation-delay: calc(var(--i) * 60ms); }
.glint--stay { color: var(--gold); }
.glint--stay.is-run i { animation: glint-stay .7s var(--ease) both; animation-delay: calc(1s + var(--i) * 90ms); }

/* touch screens: text links and the menu button get a 44px hit area; the wave stays where it was */
@media (pointer: coarse) {
  .nav__menu { min-height: 44px; }
  .link-arrow { padding-top: 14px; }
  .contact__links a, .plates__more a { padding-top: 12px; }
  .cert__name a { padding-top: 6px; }
  .btn--icon { width: 44px; height: 44px; }
}

/* the 404 page */
.notfound { min-height: 100vh; min-height: 100svh; display: grid; align-content: center; justify-items: start; gap: 22px; padding-block: 80px; }
.notfound h1 { font-size: var(--t-h2); }
.notfound p { color: var(--silver); margin: 0; max-width: 40ch; }
.notfound__mark { display: block; margin-bottom: 10px; }

/* ── about: a short letter beside the portrait ── */
/* side by side, the photo and the text always end together: the row is as tall as the taller of the two, the photo
   fills it (cropping, never stretching), and shorter text sits centred beside it */
.about { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 7fr); gap: clamp(32px, 6vw, 96px); align-items: stretch; padding-top: 72px; padding-bottom: 150px; }
.about__photo { margin: 0; }
.about__photo picture { display: block; height: 100%; }
.about__photo img { display: block; width: 100%; height: 100%; aspect-ratio: 4 / 5; object-fit: cover; object-position: center top; filter: sepia(.18) saturate(.86) contrast(1.04); outline: 1px solid var(--rule); outline-offset: 7px; }
.about__text { align-self: center; }
.about h2 { margin-bottom: 28px; }
.about p { font-size: 1.125rem; line-height: 1.7; color: var(--silver); max-width: 62ch; margin: 0 0 22px; }
.about p:last-child { margin-bottom: 0; }

/* ── shared section head: heading left, a plain sentence right ── */
.section-head { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: clamp(24px, 5vw, 80px); align-items: end; margin-bottom: 64px; }
.section-head p { color: var(--silver); margin: 0; max-width: 44ch; }

/* ── projects: a grid of plates; each opens the slide-over ── */
.work, .skills, .contact { padding-top: 0; }
.work::before, .contact::before, .exp > .wrap::before { content: ""; display: block; border-top: 1px solid var(--rule-strong); }
.work::before { margin-bottom: 120px; }
.work { padding-bottom: 130px; }
.plates { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1px; background: var(--rule); border: 1px solid var(--rule); }
.plate-btn {
  all: unset; box-sizing: border-box; display: flex; flex-direction: column; gap: 16px; padding: 30px 28px 26px; min-height: 320px;
  background-color: var(--bg); color: var(--ink); font-family: var(--text); text-align: left; cursor: pointer; position: relative;
  transform-style: preserve-3d; transition: background-color .4s;
}
.plate-btn:hover { background-color: color-mix(in srgb, var(--gold) 7%, var(--bg)); }
.plate-btn:active { background-color: color-mix(in srgb, var(--gold) 12%, var(--bg)); }
.plate-btn:active { background-color: color-mix(in srgb, var(--gold) 12%, var(--bg)); }
.plate-btn:focus-visible { outline: 2px solid var(--gold); outline-offset: -3px; }
.plate-btn__top { display: flex; justify-content: space-between; align-items: baseline; gap: 16px; }
.plate-btn__num { font-family: var(--display); font-size: 2.5rem; line-height: 1; color: var(--gold-deep); font-variant-numeric: lining-nums tabular-nums; transform: translateZ(28px); }
.plate-btn__kind { font-size: var(--t-meta); color: var(--meta); text-align: right; }
.plate-btn__title { font-family: var(--display); font-size: 1.625rem; line-height: 1.16; letter-spacing: -0.008em; transform: translateZ(18px); text-wrap: balance; }
.plate-btn__summary { font-size: 0.9375rem; line-height: 1.6; color: var(--silver); flex: 1; }
.plate-btn__foot { display: flex; justify-content: space-between; align-items: baseline; gap: 16px; border-top: 1px solid var(--rule); padding-top: 14px; font-size: var(--t-meta); }
.plate-btn__metric { color: var(--gold); font-variant-numeric: tabular-nums; }
.plate-btn__open { color: var(--ink); white-space: nowrap; }
.plate-btn__open span { display: inline-block; transition: transform .25s var(--ease); }
.plate-btn:hover .plate-btn__open span { transform: translateX(4px); }
.plates__more { grid-column: span 1; background: var(--bg); padding: 30px 28px 26px; display: flex; flex-direction: column; justify-content: flex-end; gap: 10px; }
.plates__more a { align-self: flex-start; }
.plates__more-title { font-family: var(--display); font-size: 1.625rem; line-height: 1.16; margin: 0; }

.role li, .panel li { display: grid; grid-template-columns: 18px 1fr; gap: 10px; }
.role li::before, .panel li::before { content: ""; height: 1px; background: var(--bronze); margin-top: 0.85em; }
.panel__stack { font-size: var(--t-meta); color: var(--meta); margin: 0 0 18px; }
.panel__stack b { font-weight: 500; color: var(--silver); }

/* ── experience: pinned globe, sticky year, drawn timeline ── */
.exp { position: relative; padding: 0 0 140px; }
.exp > .wrap::before { margin-bottom: 150px; }
.exp__globe-wrap { position: absolute; inset: 0; pointer-events: none; z-index: 0; }
.exp__globe-sticky { position: sticky; top: 0; height: 100vh; height: 100svh; width: 100%; overflow: hidden; }
.exp__globe { position: absolute; left: 50%; top: calc(50% + 30px); width: min(96vw, calc(100vh - 120px)); height: min(96vw, calc(100vh - 120px)); transform: translate(-50%, -50%); opacity: 0; transition: opacity .4s linear; }
.exp .wrap { position: relative; z-index: 1; }
.section-head--exp { margin-bottom: 80px; }
.exp__grid { display: grid; grid-template-columns: 320px minmax(0, 1fr); gap: clamp(32px, 5vw, 72px); align-items: start; }
.exp__panel { position: sticky; top: 124px; border-top: 1px solid var(--gold-deep); padding-top: 18px; }
.exp__year { font-family: var(--display); font-size: clamp(4.5rem, 8vw, 7rem); line-height: .9; letter-spacing: -0.03em; font-variant-numeric: lining-nums tabular-nums; color: var(--gold); }
.exp__detail { margin-top: 26px; }
.exp__company { font-family: var(--display); font-size: var(--t-h3); line-height: 1.15; }
.exp__role { margin-top: 8px; color: var(--silver); }
.exp__dates { margin-top: 14px; font-size: var(--t-meta); color: var(--gold); font-variant-numeric: tabular-nums; }
.exp__place { font-size: var(--t-meta); color: var(--meta); }
.exp__ticks { display: flex; gap: 6px; margin-top: 28px; }
.exp__ticks span { height: 2px; flex: 1; background: var(--rule); }
.exp__ticks span.on { background: var(--gold-deep); }
.exp__bar { display: none; }
.exp__list { position: relative; }
.exp__rail { position: absolute; left: 0; top: 0; bottom: 0; width: 1px; background: var(--rule); }
.exp__rail--draw { background: var(--gold-deep); transform-origin: top; transform: scaleY(0); }
.role { position: relative; padding: 0 0 84px 44px; }
.role:last-child { padding-bottom: 8px; }
.role__dot { position: absolute; left: -4px; top: 10px; width: 9px; height: 9px; border-radius: 50%; border: 1px solid var(--gold-deep); background: var(--bg); }
.role.is-on .role__dot { background: var(--gold-deep); }
.role.is-current .role__dot { background: var(--gold); border-color: var(--gold); }
.role__head { display: flex; justify-content: space-between; align-items: baseline; gap: 20px; }
.role__head h3 { font-size: clamp(1.5rem, 2.2vw, 1.875rem); }
.role__dates { font-size: var(--t-meta); color: var(--gold); white-space: nowrap; font-variant-numeric: tabular-nums; }
.role__meta { color: var(--silver); margin: 6px 0 0; }
.role ul { margin-top: 24px; display: grid; gap: 12px; max-width: 68ch; color: var(--silver); }

/* ── skills: a compact strip, two lines scrolling sideways ── */
.skills { padding-bottom: 96px; }
.skills::before { content: ""; display: block; border-top: 1px solid var(--rule-strong); width: min(calc(1240px - 2 * var(--gutter)), calc(100% - 2 * var(--gutter))); margin: 0 auto 84px; }
.skills__title { font-size: var(--t-title); line-height: 1.04; letter-spacing: -0.02em; margin-bottom: 40px; }
.marquee { border-top: 1px solid var(--rule); border-bottom: 1px solid var(--rule); overflow: hidden; }
.marquee__row { padding: 18px 0; overflow: hidden; }
.marquee__row + .marquee__row { border-top: 1px solid var(--rule); }
.marquee__track { list-style: none; margin: 0; padding: 0; display: flex; width: max-content; white-space: nowrap; font-family: var(--display); font-size: clamp(1.125rem, 1.6vw, 1.375rem); line-height: 1.3; will-change: transform; }
.marquee__row--alt .marquee__track { font-style: italic; color: var(--gold); }
.marquee__item { display: flex; align-items: center; gap: 36px; padding-right: 36px; }
.marquee__item .skill { display: inline-block; }
.marquee__item i { display: block; width: 4px; height: 4px; border-radius: 50%; background: var(--bronze); }
.marquee--still .marquee__track { width: auto; flex-wrap: wrap; justify-content: center; row-gap: 8px; padding-inline: var(--gutter); white-space: normal; }
.marquee--still .is-copy { display: none; }

/* ── community and credentials ── */
.more { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: clamp(32px, 6vw, 96px); padding-top: 40px; padding-bottom: 150px; }
.label-h { font-family: var(--text); font-weight: 500; font-size: 1.25rem; letter-spacing: 0; line-height: 1.4; color: var(--gold); margin: 0 0 18px; }
.label-h--gap { margin-top: 48px; }
.devmeetup a { --wave-w: 21px; display: inline-block; background-size: 21px 9px; padding-bottom: 14px; margin-bottom: 6px; }
.devmeetup { font-size: var(--t-title); line-height: 1.04; letter-spacing: -0.02em; margin: 0 0 12px; }
.devmeetup__role { color: var(--meta); font-size: var(--t-meta); margin: 0 0 28px; font-variant-numeric: tabular-nums; }
.more__community p:not(.devmeetup__role) { color: var(--silver); max-width: 52ch; }
.cert { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 8px 24px; align-items: baseline; padding: 16px 0; border-top: 1px solid var(--rule); }
.cert:last-child { border-bottom: 1px solid var(--rule); }
.cert__name { font-family: var(--display); font-size: 1.1875rem; line-height: 1.75; }
.cert__org { font-size: var(--t-meta); color: var(--meta); }
.edu { font-family: var(--display); font-size: 1.1875rem; }
.edu .meta { display: block; font-family: var(--text); margin-top: 4px; }

/* ── contact ── */
.contact { padding-bottom: 120px; }
.contact::before { margin-bottom: 140px; }
.contact h2 { font-size: clamp(2.25rem, 5vw, 4rem); max-width: 16ch; margin-bottom: 72px; }
.contact__grid { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: clamp(32px, 6vw, 96px); align-items: start; }
.contact__form { display: grid; gap: 22px; }
.contact__row { display: grid; grid-template-columns: 1fr 1fr; gap: 22px; }
.field label { display: block; font-size: var(--t-meta); font-weight: 500; color: var(--silver); margin-bottom: 8px; }
.field input, .field select, .field textarea {
  width: 100%; font: inherit; color: var(--ink); background: var(--bg); caret-color: var(--gold);
  border: 1px solid var(--rule-strong); border-radius: var(--radius); padding: 13px 14px; min-height: 48px;
  transition: border-color .2s, background-color .2s;
}
.field textarea { min-height: 140px; resize: vertical; line-height: 1.55; }
.field ::placeholder { color: var(--meta); opacity: 1; }
.field input:hover, .field select:hover, .field textarea:hover { border-color: color-mix(in srgb, var(--ink) 50%, transparent); }
.field input:focus-visible, .field select:focus-visible, .field textarea:focus-visible { border-color: var(--gold); outline-offset: 0; background: var(--surface); }
.contact__stage { display: grid; align-content: center; }
.contact__form[hidden], .sent[hidden] { display: none; }
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
/* sent: the circle draws, then the tick, then a wave runs out underneath and settles */
@keyframes draw-ring { from { stroke-dashoffset: 183; } }
@keyframes draw-tick { from { stroke-dashoffset: 38; } }
@keyframes wave-out { from { clip-path: inset(0 100% 0 0); } to { clip-path: inset(0 0 0 0); } }
.sent { outline: none; }
.sent__mark { display: block; fill: none; stroke: var(--ok); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; margin-bottom: 26px; }
.sent__mark circle { stroke-dasharray: 183; transform: rotate(-90deg); transform-origin: 50% 50%; animation: draw-ring .7s var(--ease) both; }
.sent__mark path { stroke-dasharray: 38; stroke-width: 2.5; animation: draw-tick .45s var(--ease) .55s both; }
.sent__title { font-size: var(--t-h2s); line-height: 1.1; animation: enter .7s var(--ease) .35s both; }
.sent__text { color: var(--silver); max-width: 44ch; margin: 14px 0 0; animation: enter .7s var(--ease) .45s both; }
.sent__wave { width: min(224px, 70%); height: 6px; margin: 26px 0 30px; background: var(--wave-ok) repeat-x 0 50% / 14px 6px; animation: wave-out 1s var(--ease) .8s both, wave-flow .75s linear .8s 4; }
.sent .link-arrow { animation: appear .6s ease-out 1.2s both; }
.contact__note a { color: var(--ink); }
.contact__submit { display: flex; flex-wrap: wrap; align-items: center; gap: 18px; }
.contact__note { font-size: var(--t-meta); color: var(--silver); }
.contact__side p { color: var(--silver); margin-bottom: 32px; }
.contact__links li { display: grid; grid-template-columns: 92px 1fr; gap: 16px; padding: 14px 0; border-top: 1px solid var(--rule); align-items: baseline; }
.contact__links li:last-child { border-bottom: 1px solid var(--rule); }
.contact__links span { font-size: var(--t-meta); color: var(--meta); }
.contact__links a { overflow-wrap: anywhere; justify-self: start; }

.footer { display: grid; grid-template-columns: auto 1fr; align-items: center; gap: 0 28px; padding-bottom: 48px; font-size: var(--t-meta); color: var(--meta); }
.footer::before { content: ""; grid-column: 1 / -1; border-top: 1px solid var(--rule); margin-bottom: 36px; }
.footer__seal { width: 132px; height: 132px; flex: none; }
.footer__lines { margin: 0; max-width: none; display: flex; flex-direction: column; gap: 4px; }

/* ── project detail: slide-over ── */
.backdrop { position: fixed; inset: 0; background: rgba(8, 7, 6, .6); z-index: 70; opacity: 0; pointer-events: none; transition: opacity .4s; }
.backdrop.open { opacity: 1; pointer-events: auto; }
.panel {
  position: fixed; inset: 0 0 0 auto; width: min(600px, 100vw); background: var(--bg); border-left: 1px solid var(--rule-strong); z-index: 80;
  transform: translateX(102%); visibility: hidden; transition: transform .55s var(--ease), visibility 0s .55s;
  overflow-y: auto; padding: 40px clamp(24px, 4vw, 48px) 48px; display: flex; flex-direction: column; gap: 24px;
}
.panel.open { transform: none; visibility: visible; transition: transform .55s var(--ease), visibility 0s; }
.panel__top { display: flex; justify-content: space-between; align-items: center; gap: 16px; position: sticky; top: -40px; z-index: 1; margin: -40px 0 0; padding: 40px 0 12px; background: var(--bg); }
.panel__kind { font-size: var(--t-meta); color: var(--meta); }
.panel h2 { font-size: clamp(1.75rem, 3vw, 2.5rem); }
.panel__metric { font-family: var(--display); font-size: 1.5rem; line-height: 1.2; color: var(--gold); padding: 18px 0; border-block: 1px solid var(--rule); margin: 0; max-width: none; }
.panel__summary { color: var(--silver); margin: 0; }
.panel ul { display: grid; gap: 10px; color: var(--silver); }
.panel__stack { margin: 0; }
.panel__link { align-self: flex-start; }
.panel__foot { margin-top: auto; display: flex; justify-content: space-between; border-top: 1px solid var(--rule); padding-top: 18px; }

/* ═══ responsive ═══ */
@media (max-width: 1020px) {
  .plates { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .plates__more { grid-column: span 2; } /* 8 plates + a double cell fills 5 rows of 2 */
  .exp__grid { grid-template-columns: 260px minmax(0, 1fr); }
}
@media (max-width: 860px) {
  .nav { gap: 12px; height: 68px; }
  .nav__menu { display: inline-block; }
  .nav__cv { display: none; }
  .nav__links { display: none; position: absolute; left: 0; right: 0; top: 68px; flex-direction: column; gap: 0; background: var(--bg); border-bottom: 1px solid var(--rule-strong); padding: 8px var(--gutter) 16px; }
  @keyframes menu-in { from { opacity: 0; transform: translateY(-10px); } }
  .nav__links a[aria-current="true"]:not(.btn) { color: var(--gold); }
  /* phones have no side panel in Experience: a slim bar under the navigation says which year and company is in view */
  .exp__bar { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: baseline; column-gap: 12px; position: sticky; top: 68px; z-index: 5;
    margin: 0 calc(-1 * var(--gutter)) 28px; padding: 11px var(--gutter) 0; background: var(--bg); border-bottom: 1px solid var(--rule); }
  .exp__bar-year { font-family: var(--display); font-size: 1.375rem; line-height: 1; color: var(--gold); font-variant-numeric: lining-nums tabular-nums; }
  .exp__bar-co { font-size: var(--t-meta); color: var(--silver); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .exp__bar-line { grid-column: 1 / -1; height: 2px; margin-top: 10px; }
  .exp__bar-line i { display: block; height: 100%; background: var(--gold-deep); transform-origin: left; transform: scaleX(0); transition: transform .45s var(--ease); }
  .nav__links.open { display: flex; animation: menu-in .28s var(--ease); max-height: calc(100vh - 68px); max-height: calc(100svh - 68px); overflow-y: auto; overscroll-behavior: contain; } /* a phone held sideways is shorter than the menu */
  .nav__links a { padding: 14px 0; border-bottom: 1px solid var(--rule); font-size: 1.0625rem; color: var(--ink); }
  .nav__links a:not(.btn)::after { display: none; }
  .nav__links .nav__links-cv { display: flex; margin-top: 18px; padding: 15px 22px; border: 1px solid var(--gold); color: var(--bg); background-color: var(--gold); font-size: 0.9375rem; }
  .nav__links .nav__links-cv:hover, .nav__links .nav__links-cv:focus-visible { color: var(--gold); background-color: var(--bg); }
  .hero { grid-template-columns: 1fr; min-height: 0; padding-top: 112px; gap: 24px; }
  .hero__visual { max-width: 520px; justify-self: center; }
  .about, .section-head, .more, .contact__grid { grid-template-columns: 1fr; }
  .about { padding-top: 56px; padding-bottom: 96px; gap: 40px; }
  .about__photo { max-width: 360px; }
  .about__photo img { height: auto; }
  .section-head { margin-bottom: 40px; gap: 16px; }
  .work, .skills, .contact { padding-bottom: 88px; }
  .work::before, .skills::before, .contact::before { margin-bottom: 88px; }
  .exp > .wrap::before { margin-bottom: 96px; }
  .exp { padding: 0 0 96px; }
  .exp__grid { grid-template-columns: 1fr; }
  .exp__panel { display: none; }
  .role { padding: 0 0 64px 30px; }
  .role__head { flex-direction: column; gap: 4px; }
  .marquee__item { gap: 26px; padding-right: 26px; }
  .marquee__row { padding: 14px 0; }
  .more { padding-bottom: 96px; gap: 64px; }
  .contact h2 { margin-bottom: 48px; }
  .footer { gap: 20px; }
  .footer__seal { width: 96px; height: 96px; }
}
@media (max-width: 560px) {
  .plates { grid-template-columns: 1fr; }
  .plate-btn__summary { display: -webkit-box; -webkit-line-clamp: 4; -webkit-box-orient: vertical; overflow: hidden; flex: none; }
  .plates__more { grid-column: span 1; }
  .plate-btn { min-height: 0; }
  .contact__row { grid-template-columns: 1fr; }
  .cert { grid-template-columns: 1fr; }
}

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