/* ==========================================================================
   LUKE — site styles
   Source of truth: Figma "luke-site", current frames (light blue + pink).
   Breakpoints: mobile < 600px · tablet 600–1199px · desktop ≥ 1200px
   Sections set a colour theme with .t-ground / .t-ink / .t-blue / .t-pink.
   ========================================================================== */

/* ---------- Fonts (local) ---------- */
@font-face { font-family: "Archivo"; src: url("../assets/fonts/Archivo-variable.woff2") format("woff2"); font-weight: 100 900; font-display: swap; }
@font-face { font-family: "JetBrains Mono"; src: url("../assets/fonts/JetBrainsMono-variable.woff2") format("woff2"); font-weight: 100 800; font-display: swap; }

/* ---------- Tokens ---------- */
:root {
  --ground: #F0F0EE; --white: #FFFFFF; --ink: #0D0D0D; --graphite: #2A2A2A; --iron: #3D3C39;
  --slate: #45433E; --fog: #A8A69F; --line-soft: #C4C4C0;
  --blue: #8CCBF6; --blue-line: #4E9FD6; --blue-muted: #24394A;
  --pink: #FFA6CF; --pink-dark: #F07FB4;
  --red: #B3261E; --red-light: #FF9A90; --green: #1B5E38;

  --m: 20px;            /* page margin */
  --gut: 16px;          /* gutter */
  --sec: 72px;          /* section padding */
  --fs-xl: clamp(38px, 12.3vw, 48px); --fs-lg: clamp(29px, 9.7vw, 38px); --fs-md: clamp(23px, 7.2vw, 28px); --fs-sm: 20px;
  --fs-body-lg: 18px; --fs-mono: 13px; --fs-input: 16px;
  --header-h: 64px;
  --font: "Archivo", "Helvetica Neue", Arial, sans-serif;
  --mono: "JetBrains Mono", ui-monospace, Menlo, monospace;
}
@media (min-width: 600px) {
  :root { --m: 32px; --gut: 20px; --sec: 104px; --fs-xl: 80px; --fs-lg: 54px; --fs-md: 34px; --fs-sm: 21px; --fs-body-lg: 19px; --fs-mono: 14px; --fs-input: 17px; --header-h: 72px; }
}
@media (min-width: 1200px) {
  :root { --m: 56px; --gut: 24px; --sec: 144px; --fs-xl: clamp(96px, 8.61vw, 124px); --fs-lg: clamp(58px, 5vw, 72px); --fs-md: clamp(32px, 2.78vw, 40px); --fs-sm: 22px; --fs-body-lg: 20px; --header-h: 80px; }
}

/* ---------- Themes ---------- */
.t-ground, body { --bg: var(--ground); --fg: var(--ink); --fg2: var(--slate); --line: var(--ink); --line2: var(--line-soft); --accent: var(--ink); --name: var(--blue); --raised: var(--white); --field: var(--white); --act-bg: var(--pink); --act-fg: var(--ink); --act-hbg: var(--ink); --act-hfg: var(--pink); --focus: var(--ink); --err: var(--red); }
.t-ink    { --bg: var(--ink); --fg: var(--white); --fg2: var(--fog); --line: var(--white); --line2: var(--iron); --accent: var(--pink); --raised: var(--graphite); --field: var(--graphite); --act-bg: var(--pink); --act-fg: var(--ink); --act-hbg: var(--white); --act-hfg: var(--ink); --focus: var(--pink); --err: var(--red-light); }
.t-blue   { --bg: var(--blue); --fg: var(--ink); --fg2: var(--blue-muted); --line: var(--ink); --line2: var(--blue-line); --accent: var(--ink); --act-bg: var(--pink); --act-fg: var(--ink); --act-hbg: var(--ink); --act-hfg: var(--pink); --focus: var(--ink); }
.t-pink   { --bg: var(--pink); --fg: var(--ink); --fg2: var(--iron); --line: var(--ink); --line2: var(--pink-dark); --accent: var(--ink); --act-bg: var(--ink); --act-fg: var(--pink); --act-hbg: var(--blue); --act-hfg: var(--ink); --focus: var(--ink); }
.t-ground, .t-ink, .t-blue, .t-pink { background: var(--bg); color: var(--fg); }

/* ---------- Base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--bg); color: var(--fg); font-family: var(--font); font-size: 16px; line-height: 1.5; overflow-x: hidden; }
img, svg { display: block; max-width: 100%; }
img { height: auto; }
h1, h2, h3, p, ul, ol, dl, dd, figure { margin: 0; padding: 0; }
ul, ol { list-style: none; }
a { color: inherit; }
button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; }
[hidden] { display: none !important; }
section[id], [id="top"] { scroll-margin-top: var(--header-h); }
.wrap { width: 100%; max-width: 1440px; margin-inline: auto; padding-inline: var(--m); }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.skip { position: absolute; left: var(--m); top: -100px; z-index: 100; background: var(--ink); color: var(--white); padding: 12px 16px; font-weight: 800; }
.skip:focus { top: 8px; }

/* Focus: ring with a gap, on every interactive element */
:focus-visible { outline: 4px solid var(--focus); outline-offset: 3px; }
[tabindex="-1"]:focus { outline: none; }

/* ---------- Type ---------- */
.d-xl, .d-lg, .d-md { font-weight: 900; text-transform: uppercase; text-wrap: balance; overflow-wrap: break-word; min-width: 0; }
.d-xl { font-size: var(--fs-xl); line-height: .88; letter-spacing: -.035em; }
.d-lg { font-size: var(--fs-lg); line-height: .92; letter-spacing: -.03em; }
.d-md { font-size: var(--fs-md); line-height: .98; letter-spacing: -.02em; }
.d-sm { font-size: var(--fs-sm); line-height: 1.15; letter-spacing: -.01em; font-weight: 800; text-transform: uppercase; }
.b-lg { font-size: var(--fs-body-lg); line-height: 1.45; letter-spacing: -.005em; }
.b-md { font-size: 16px; line-height: 1.5; }
.b-sm { font-size: 14px; line-height: 1.5; }
.strong { font-weight: 600; }
.label { font-family: var(--mono); font-weight: 500; font-size: 12px; line-height: 1.3; letter-spacing: .06em; text-transform: uppercase; }
.mono { font-family: var(--mono); font-size: var(--fs-mono); line-height: 1.5; }
.muted { color: var(--fg2); }
.accent { color: var(--accent); }

/* ---------- Icons ---------- */
.icon { width: 18px; height: 18px; flex: none; fill: none; stroke: currentColor; stroke-width: 3; }

/* ---------- Buttons and links ---------- */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 12px; height: 58px; padding: 0 26px; border: 2px solid var(--line); background: var(--act-bg); color: var(--act-fg); font-weight: 800; font-size: 15px; letter-spacing: .03em; text-transform: uppercase; text-decoration: none; white-space: nowrap; transition: background-color .15s, color .15s, gap .15s; }
.btn:hover { background: var(--act-hbg); color: var(--act-hfg); gap: 18px; }
.btn--small { height: 44px; padding: 0 18px; }
.btn--secondary { background: transparent; color: var(--fg); }
.btn--secondary:hover { background: var(--fg); color: var(--bg); }
.btn[disabled], .btn[aria-disabled="true"] { background: var(--raised); color: var(--fg2); border-color: var(--line2); cursor: default; gap: 12px; }
.btn--block { width: 100%; }

.link { display: inline-flex; align-items: center; gap: 10px; min-height: 44px; font-weight: 800; font-size: 15px; letter-spacing: .03em; text-transform: uppercase; text-decoration: none; transition: background-color .15s, padding .15s; }
.link > span { border-bottom: 2px solid currentColor; padding-bottom: 2px; }
.link .icon { width: 16px; height: 16px; }
.link:hover { background: var(--act-bg); color: var(--act-fg); padding-inline: 8px; }

.navlink { display: inline-flex; align-items: center; min-height: 44px; font-weight: 800; font-size: 15px; letter-spacing: .03em; text-transform: uppercase; text-decoration: none; transition: background-color .15s, padding .15s; }
.navlink:hover { background: var(--act-bg); color: var(--act-fg); padding-inline: 6px; }
.navlink[aria-current="page"] > span { border-bottom: 2px solid currentColor; padding-bottom: 2px; }

.tag { display: inline-flex; align-items: center; padding: 5px 8px; border: 1.5px solid var(--line); }
.tag--solid { background: var(--fg); color: var(--bg); }

/* ---------- Section tab (number block + label + rule) ---------- */
.tab { display: flex; align-items: center; gap: 14px; }
.tab__num { background: var(--fg); color: var(--bg); padding: 6px 10px; }
.tab::after { content: ""; flex: 1; height: 2px; background: var(--line); }

/* ---------- Header ---------- */
.header { position: sticky; top: 0; z-index: 50; border-bottom: 2px solid var(--line); }
.header__in { display: flex; align-items: center; justify-content: space-between; height: var(--header-h); }
.header__logo { display: block; }
.header__logo img { height: 38px; width: auto; }
.header__nav { display: none; align-items: center; gap: 20px; }
.header__menu { display: inline-flex; align-items: center; gap: 10px; min-height: 44px; padding-left: 12px; font-weight: 800; font-size: 15px; letter-spacing: .03em; text-transform: uppercase; }
.header__menu .icon { width: 22px; height: 22px; }
@media (min-width: 600px) {
  .header__logo img { height: 42px; }
  .header__nav { display: flex; }
  .header__menu { display: none; }
}
@media (min-width: 1200px) { .header__logo img { height: 46px; } .header__nav { gap: 32px; } }

/* ---------- Mobile menu (dialog) ---------- */
dialog { border: 0; padding: 0; color: inherit; max-width: none; max-height: none; }
.menu { width: 100vw; height: 100dvh; margin: 0; background: var(--bg); color: var(--fg); }
.menu[open] { display: flex; flex-direction: column; justify-content: space-between; padding: 0 var(--m) 28px; }
.menu__bar { display: flex; align-items: center; justify-content: space-between; height: 64px; border-bottom: 2px solid var(--line); }
.menu__bar img { height: 38px; width: auto; }
.menu__links { margin-top: 16px; }
.menu__links a { display: flex; align-items: center; justify-content: space-between; padding: 14px 0; border-bottom: 2px solid var(--line); text-decoration: none; }
.menu__links a:hover { background: var(--act-bg); }
.menu__bottom { display: grid; gap: 16px; }

/* ---------- Cover (hero) ---------- */
.cover { overflow: hidden; }
.cover__art { position: relative; overflow: hidden; --pw: min(94.9vw, 560px); height: calc(var(--pw) * 1.169); }
.cover__name { position: absolute; left: var(--m); right: var(--m); top: 16px; color: var(--name); }
.cover__name svg { width: 100%; height: auto; fill: currentColor; }
.cover__portrait { position: absolute; left: 50%; top: calc(var(--pw) * .119); width: var(--pw); transform: translateX(-50%); }
.cover__copy { padding: 24px var(--m) 48px; }
.cover__text { display: grid; gap: 18px; }
.cover__actions { display: grid; gap: 8px; padding-top: 8px; justify-items: start; }
.cover__actions .btn { width: 100%; }
.cover__lines { display: grid; padding-top: 16px; }
.cover__lines a { display: flex; align-items: center; gap: 14px; padding: 11px 0; border-top: 2px solid var(--line); text-decoration: none; }
.cover__lines a:hover { background: var(--act-bg); }
.cover__lines .n { width: 24px; }
@media (min-width: 600px) {
  .cover__art { --pw: min(73vw, 560px); height: calc(var(--pw) * 1.21); }
  .cover__name { top: 24px; }
  .cover__portrait { top: calc(var(--pw) * .16); }
  .cover__copy { padding: 32px var(--m) 56px; }
  .cover__actions { display: flex; align-items: center; gap: 24px; }
  .cover__actions .btn { width: auto; }
  .cover__lines { grid-template-columns: 1fr 1fr; column-gap: var(--gut); }
}
@media (min-width: 1200px) {
  .cover { position: relative; --u: calc(min(100vw, 1440px) / 1440); height: calc(900 * var(--u)); }
  .cover__in { position: relative; max-width: 1440px; margin-inline: auto; height: 100%; }
  .cover__art { position: static; height: auto; overflow: visible; }
  .cover__name { left: calc(56 * var(--u)); right: auto; top: calc(42 * var(--u)); width: calc(1328 * var(--u)); }
  .cover__portrait { left: calc(445 * var(--u)); top: calc(40 * var(--u)); width: calc(700 * var(--u)); transform: none; }
  .cover__copy { display: contents; }
  .cover__text { position: absolute; left: var(--m); top: calc(486 * var(--u)); width: min(450px, 31vw); gap: 20px; }
  .cover__lines { position: absolute; right: var(--m); top: calc(510 * var(--u)); width: min(250px, 17.4vw); grid-template-columns: 1fr; padding: 0; }
}

/* ---------- Generic section ---------- */
.section { padding-block: var(--sec); }
.section > .wrap { display: grid; gap: 36px; }
.head { display: grid; gap: 20px; }
@media (min-width: 600px) { .section > .wrap { gap: 48px; } }
@media (min-width: 1200px) {
  .section > .wrap { gap: 64px; }
  .head { grid-template-columns: minmax(0, 700px) minmax(0, 420px); justify-content: space-between; align-items: end; }
}

/* ---------- Services ---------- */
.services__list { border-bottom: 2px solid var(--line); }
.service { display: grid; gap: 14px; padding: 24px 0; border-top: 2px solid var(--line); }
.service__head { display: flex; align-items: flex-start; gap: 12px; }
.service__head .n { width: 28px; flex: none; }
.service__name { font-size: var(--fs-lg); }
.service__detail { display: grid; gap: 12px; padding-left: 40px; }
.service__get { display: grid; gap: 4px; }
.also { display: grid; gap: 24px; justify-items: start; }
.also__text { display: grid; gap: 12px; justify-items: start; }
.also .btn { width: 100%; }
@media (min-width: 600px) { .also__text { display: flex; align-items: center; gap: 20px; } .also .btn { width: auto; } }
@media (min-width: 1200px) {
  .service { gap: 20px; padding: 28px 0 36px; }
  .service__head { gap: 24px; }
  .service__head .n { width: 64px; }
  .service__name { font-size: var(--fs-xl); }
  .service__detail { display: flex; align-items: flex-start; gap: 24px; padding-left: 88px; }
  .service:nth-child(even) .service__detail { padding-left: min(560px, 34vw); }
  .service__detail p { flex: 0 1 440px; min-width: 0; }
  .service__get { width: 240px; flex: none; }
  .also { display: flex; align-items: center; justify-content: space-between; }
  .also__text { max-width: 760px; }
}

/* ---------- Selected work ---------- */
.work__more { display: flex; }
.plates { display: grid; gap: 24px; }
.plate { display: flex; flex-direction: column; border: 2px solid var(--line); text-decoration: none; transition: box-shadow .15s; }
.plate__screen { height: 230px; background: var(--raised); overflow: hidden; }
.plate__screen img { width: 100%; height: 100%; object-fit: cover; object-position: center; }
.plate__data { display: grid; gap: 16px; align-content: start; padding: 20px; border-top: 2px solid var(--line); transition: background-color .15s; }
.plate__row { display: flex; gap: 12px; padding: 9px 0; border-top: 1.5px solid var(--line); }
.plate__row .label { width: 64px; flex: none; padding-top: 3px; }
.plate__open { display: inline-flex; align-items: center; gap: 10px; font-weight: 800; font-size: 15px; letter-spacing: .03em; text-transform: uppercase; }
.plate__open .icon { width: 16px; height: 16px; }
.plate:hover { box-shadow: inset 0 0 0 2px var(--line); }
.plate:hover .plate__data { background: var(--act-bg); }
@media (min-width: 1200px) {
  .work__more { justify-content: flex-end; }
  .work__more > div { width: 540px; }
  .plates { gap: 32px; }
  .plate { flex-direction: row; }
  .plate__screen { flex: 1; height: 440px; }
  .plate__data { width: 420px; flex: none; padding: 32px; gap: 24px; border-top: 0; border-left: 2px solid var(--line); }
  .plate--flip { flex-direction: row-reverse; }
  .plate--flip .plate__data { border-left: 0; border-right: 2px solid var(--line); }
}

/* ---------- Process ---------- */
.process { padding-block: 64px; }
.process__layout { display: grid; gap: 32px; }
.steps { display: grid; gap: 24px; }
.step { display: grid; gap: 8px; align-content: start; padding-top: 16px; border-top: 2px solid var(--line); }
@media (min-width: 600px) { .process { padding-block: 80px; } .steps { grid-template-columns: 1fr 1fr; gap: 36px var(--gut); } }
@media (min-width: 1200px) {
  .process { padding-block: 112px; }
  .process__layout { grid-template-columns: 320px 1fr; gap: var(--gut); }
  .steps { grid-template-columns: repeat(4, 1fr); gap: var(--gut); }
}

/* ---------- About ---------- */
.about__layout { display: grid; gap: 32px; }
.about__side { display: grid; gap: 24px; }
.portrait-block { background: var(--name); display: flex; align-items: flex-end; justify-content: center; overflow: hidden; width: 100%; height: 330px; }
.portrait-head { --w: 250px; width: var(--w); aspect-ratio: 4 / 5; position: relative; overflow: hidden; flex: none; }
.portrait-head img { position: absolute; width: 138.89%; max-width: none; left: -19.44%; top: -9.17%; }
/* About: the side-profile photo is shown whole (no crop); the block takes the image's own height */
.about__side .portrait-block--full { display: block; height: auto; }
.portrait-block--full img { width: 100%; height: auto; }
.facts { border-bottom: 1.5px solid var(--line); }
.fact { display: flex; gap: 16px; padding: 11px 0; border-top: 1.5px solid var(--line); }
.fact dt { width: 130px; flex: none; color: var(--fg2); padding-top: 3px; }
.about__story { display: grid; gap: 24px; }
.hi { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; }
.hi img { height: 92px; width: auto; }
.qa { border-bottom: 2px solid var(--line); }
.qa__item { display: grid; gap: 8px; padding: 20px 0; border-top: 2px solid var(--line); }
.qa__item--todo { border-top: 2px dashed var(--line2); color: var(--fg2); justify-items: start; }
.background { display: grid; gap: 24px; padding-top: 32px; border-top: 2px solid var(--line); }
.background__photo { display: grid; gap: 8px; }
.background__photo img { width: 100%; aspect-ratio: 3 / 2; object-fit: cover; }
.background__text { display: grid; gap: 16px; justify-items: start; }
.records { width: 100%; border-bottom: 1.5px solid var(--line); }
.record { display: grid; gap: 4px; padding: 12px 0; border-top: 1.5px solid var(--line); }
.record__dates { color: var(--fg2); }
.disclosure { display: inline-flex; align-items: center; gap: 12px; height: 48px; padding: 0 16px; border: 2px solid var(--line); font-weight: 800; font-size: 15px; letter-spacing: .03em; text-transform: uppercase; transition: background-color .15s; }
.disclosure .icon { width: 16px; height: 16px; }
.disclosure:hover { background: var(--act-bg); color: var(--act-fg); }
@media (min-width: 600px) {
  .portrait-block { width: 360px; height: 380px; } .portrait-head { --w: 280px; }
  .hi img { height: 124px; } .hi { gap: 4px 18px; }
  .background__photo img { width: 440px; }
  .record { grid-template-columns: 180px 1fr; gap: 20px; }
  .about__story { gap: 24px; }
}
@media (min-width: 1200px) {
  .about__layout, .background { grid-template-columns: 432px 1fr; gap: var(--gut); align-items: start; }
  .portrait-block { width: 432px; height: 460px; } .portrait-head { --w: 340px; }
  .about__story { padding-left: 112px; gap: 32px; }
  .hi img { height: 170px; }
  .background { padding-top: 48px; }
  .background__photo img { width: 432px; }
  .background__text { padding-left: 112px; gap: 20px; }
}

/* ---------- Background dialog ---------- */
.sheet { width: min(920px, 100vw); max-height: 100dvh; background: var(--ground); color: var(--ink); border: 2px solid var(--ink); overflow: auto; }
.sheet::backdrop, .menu::backdrop { background: rgba(13, 13, 13, .6); }
.sheet__in { display: grid; gap: 24px; padding: 24px 20px 36px; }
.sheet__head { display: flex; align-items: center; justify-content: space-between; }
.sheet__group { display: grid; gap: 8px; }
.sheet__rows { border-bottom: 1.5px solid var(--ink); }
.sheet__row { display: flex; align-items: center; gap: 12px; }
.sheet__row .record { flex: 1; }
.thumbs { display: flex; justify-content: flex-end; gap: 4px; width: 64px; flex: none; }
.thumbs img { width: 64px; height: auto; }
.thumbs--pair img { width: 30px; }
@media (max-width: 599px) { .sheet { margin: auto 0 0; width: 100vw; max-width: 100vw; border-width: 2px 0 0; } }
@media (min-width: 600px) {
  .sheet__in { padding: 36px; gap: 24px; } .sheet__row { gap: 20px; }
  .thumbs { width: 136px; } .thumbs img { width: 96px; } .thumbs--tall img { width: 56px; } .thumbs--pair img { width: 66px; }
}
@media (min-width: 1200px) { .sheet__in { padding: 48px; gap: 32px; } }

/* ---------- Footer ---------- */
.cta { padding-block: 64px; }
.cta > .wrap { display: grid; gap: 28px; }
.cta__row { display: grid; gap: 28px; }
.cta__copy { display: grid; gap: 24px; justify-items: start; }
.cta__copy .btn { width: 100%; }
.cta__direct div { display: flex; gap: 16px; padding: 12px 0; border-top: 2px solid var(--line); }
.cta__direct dt { width: 80px; flex: none; padding-top: 3px; }
.cta__direct a { text-decoration: none; } .cta__direct a:hover { text-decoration: underline; }
.footer { padding: 40px 0 24px; }
.footer > .wrap { display: grid; gap: 36px; }
.footer__name svg { width: 100%; height: auto; fill: currentColor; }
.footer__links { display: grid; gap: 32px; }
.footer__col { display: grid; gap: 4px; justify-items: start; align-content: start; }
.footer__col .label { margin-bottom: 4px; }
.footer__col .navlink--todo { color: var(--fg); }
.footer__bar { display: flex; align-items: center; justify-content: space-between; padding-top: 12px; border-top: 2px solid var(--line); }
.footer__top { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; font-weight: 800; font-size: 15px; letter-spacing: .03em; text-transform: uppercase; text-decoration: none; }
.footer__top .icon { width: 16px; height: 16px; }
.footer__top:hover { background: var(--act-bg); color: var(--act-fg); padding-inline: 6px; }
@media (min-width: 600px) {
  .cta { padding-block: 80px; } .cta__copy .btn { width: auto; }
  .footer { padding-top: 48px; }
  .footer__links { grid-template-columns: 1fr 140px; gap: var(--gut); }
}
@media (min-width: 1200px) {
  .cta { padding-block: 112px; } .cta > .wrap { gap: 48px; }
  .cta h2 { max-width: 1100px; }
  .cta__row { grid-template-columns: 520px; }
  .footer { padding-top: 64px; } .footer > .wrap { gap: 56px; }
  .footer__links { grid-template-columns: 1fr 200px; }
}

/* ---------- Work page ---------- */
.pagehead { padding: 32px 0 36px; }
.pagehead > .wrap { display: grid; gap: 24px; }
.plates-section { padding-bottom: var(--sec); }
@media (min-width: 600px) { .pagehead { padding: 44px 0 36px; } }
@media (min-width: 1200px) { .pagehead { padding: 64px 0 56px; } .pagehead > .wrap { gap: 40px; } .pagehead p { max-width: 540px; } }

/* ---------- Contact ---------- */
.contact { padding: 32px 0 var(--sec); }
.contact__layout { display: grid; gap: 40px; }
.contact__intro { display: grid; gap: 22px; align-content: start; }
.contact__intro h1 { font-size: var(--fs-xl); line-height: .88; letter-spacing: -.035em; }
.who { display: block; }
.who__cap { display: grid; gap: 6px; justify-items: start; }
.who__cap img { height: 84px; width: auto; margin-bottom: 8px; }
.form { display: grid; gap: 24px; align-content: start; }
.form__pair { display: grid; gap: 24px; }
.field { display: grid; gap: 8px; }
.field__top { display: flex; align-items: flex-end; justify-content: space-between; gap: 12px; }
.field__top .req { color: var(--fg2); }
.field input, .field select, .field textarea { width: 100%; height: 56px; padding: 0 16px; border: 2px solid var(--line); border-radius: 0; background: var(--field); color: var(--fg); font-family: var(--font); font-size: var(--fs-input); line-height: 1.4; appearance: none; }
.field textarea { height: auto; min-height: 160px; padding: 14px 16px; resize: vertical; }
.field ::placeholder { color: var(--fg2); opacity: 1; }
.field select { color: var(--fg2); padding-right: 44px; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230D0D0D' stroke-width='3'%3E%3Cpath d='M5 9L12 16L19 9'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 16px center; background-size: 18px; }
.field input:hover, .field select:hover, .field textarea:hover { border-color: var(--accent); }
.field input:focus-visible, .field select:focus-visible, .field textarea:focus-visible { border-width: 3px; padding-inline: 15px; }
.field .hint { color: var(--fg2); }
.field .error { color: var(--err); }
.field--invalid input, .field--invalid textarea { border: 3px solid var(--err); padding-inline: 15px; }
/* After a first attempt, keep the error line's space so fixing a field never moves the Send button */
.form.was-validated .field:not(:has(.hint)) .error[hidden] { display: block !important; visibility: hidden; }
.form.was-validated .field:not(:has(.hint)) .error:empty::before { content: "\00a0"; }
.chips { display: flex; flex-wrap: wrap; gap: 8px; border: 0; padding: 0; margin: 0; min-width: 0; }
.chipgroup { display: grid; gap: 10px; border: 0; padding: 0; margin: 0; min-width: 0; }
.chipgroup legend { display: flex; justify-content: space-between; align-items: flex-end; width: 100%; padding: 0; margin-bottom: 10px; }
.chip { position: relative; }
.chip input { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer; }
.chip span { display: inline-flex; align-items: center; gap: 8px; height: 44px; padding: 0 14px; border: 2px solid var(--line); font-weight: 800; font-size: 15px; letter-spacing: .03em; text-transform: uppercase; transition: background-color .15s; }
.chip span .icon { display: none; width: 14px; height: 14px; }
.chip input:hover + span { background: var(--act-bg); }
.chip input:checked + span { background: var(--fg); color: var(--bg); }
.chip input:checked + span .icon { display: block; }
.chip input:focus-visible + span { outline: 4px solid var(--focus); outline-offset: 3px; }
.message { display: grid; gap: 4px; padding: 16px 20px; background: var(--field); border-left: 6px solid var(--err); }
.message--note { border-left-color: var(--ink); border: 2px dashed var(--ink); background: transparent; }
.submit { display: grid; gap: 14px; }
.submit .btn { width: 100%; }
.sent { padding: 64px 0 96px; }
.sent > .wrap { display: grid; gap: 20px; justify-items: start; }
.sent__head { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; }
.sent__head img { height: 86px; width: auto; }
.sent__actions { display: grid; gap: 8px; padding-top: 12px; justify-items: start; }
@media (min-width: 600px) {
  .contact { padding-top: 44px; }
  .form__pair { grid-template-columns: 1fr 1fr; gap: var(--gut); }
  .who__cap img { height: 104px; }
  .submit { display: flex; align-items: center; gap: 24px; } .submit .btn { width: auto; }
  .sent { padding: 96px 0 128px; } .sent__head img { height: 124px; } .sent__head { gap: 4px 18px; }
  .sent__actions { display: flex; align-items: center; gap: 24px; }
  .sent p { max-width: 560px; }
}
@media (min-width: 1200px) {
  .contact { padding-top: 64px; }
  .contact__layout { grid-template-columns: 544px 1fr; gap: var(--gut); align-items: start; }
  .contact__intro { gap: 28px; }
  .contact__intro h1 { font-size: var(--fs-lg); line-height: .92; letter-spacing: -.03em; }
  .who__cap img { height: 120px; }
  .form { padding-left: 112px; }
  .sent { padding: 128px 0 176px; } .sent > .wrap { gap: 28px; } .sent__head img { height: 170px; }
}



/* ---------- Narrow-screen safety ---------- */
.contact__layout > *, .about__layout > *, .background > *, .cta__row > *, .head > * { min-width: 0; }
.who__cap { min-width: 0; }
.who__cap img { max-width: 100%; object-fit: contain; object-position: left bottom; }
.fact dd, .cta__direct dd, .plate__row .mono { min-width: 0; overflow-wrap: anywhere; }
.field__top { flex-wrap: wrap; }
.link { white-space: nowrap; }
.cover__actions { flex-wrap: wrap; }
@media (max-width: 359px) { .fact dt { width: 96px; } .who__cap img { height: 72px; } }
/* Narrower desktops: lift the cover copy so the actions stay inside the cover */
@media (min-width: 1200px) and (max-width: 1359px) { .cover__text { top: calc(420 * var(--u)); gap: 14px; } .cover__lines { top: calc(440 * var(--u)); } }


/* ==========================================================================
   MOTION
   Principles: short, interruptible, transform/opacity only (no layout shift).
   Everything here sits inside prefers-reduced-motion: no-preference, and the
   scroll reveals only hide content when <html> has the .js class, so content
   is always visible without JavaScript or with reduced motion.
   ========================================================================== */
:root { --ease-out: cubic-bezier(.2, .7, .2, 1); }

/* Button and link feedback (all users; tiny, no movement of layout) */
.btn .icon, .link .icon, .plate__open .icon, .footer__top .icon { transition: translate .18s var(--ease-out); }
.btn:active { translate: 0 2px; }
.link:hover .icon, .plate:hover .plate__open .icon, .plate:focus-visible .plate__open .icon { translate: 4px 0; }
.footer__top:hover .icon { translate: 0 -3px; }
.plate__screen img { transition: scale .5s var(--ease-out); }
@media (hover: hover) { .plate:hover .plate__screen img { scale: 1.03; } }
.plate:focus-visible .plate__screen img { scale: 1.03; }

@media (prefers-reduced-motion: no-preference) {
  /* --- Hero entrance: name wipes in, portrait rises in front of it, copy follows --- */
  @keyframes wipe-in { from { clip-path: inset(0 100% 0 0); } to { clip-path: inset(0 0 0 0); } }
  @keyframes rise-in { from { opacity: 0; translate: 0 28px; } to { opacity: 1; translate: 0 0; } }
  @keyframes fade-up { from { opacity: 0; translate: 0 12px; } to { opacity: 1; translate: 0 0; } }
  .cover__name { animation: wipe-in .7s var(--ease-out) both; }
  /* The portrait slides up fully opaque: it is never see-through and never cropped mid-face */
  @keyframes portrait-in { from { translate: 0 44px; } to { translate: 0 0; } }
  .cover__portrait { animation: portrait-in .7s var(--ease-out) both; }
  .cover__text > * { animation: fade-up .45s var(--ease-out) both; }
  .cover__text > :nth-child(1) { animation-delay: .32s; }
  .cover__text > :nth-child(2) { animation-delay: .40s; }
  .cover__text > :nth-child(3) { animation-delay: .48s; }
  .cover__lines a { animation: fade-up .4s var(--ease-out) both; }
  .cover__lines a:nth-child(1) { animation-delay: .50s; }
  .cover__lines a:nth-child(2) { animation-delay: .56s; }
  .cover__lines a:nth-child(3) { animation-delay: .62s; }
  .cover__lines a:nth-child(4) { animation-delay: .68s; }

  /* --- Scroll reveals (JS adds .is-in when the element enters the viewport) --- */
  .js [data-reveal] { transition: opacity .5s ease, translate .55s var(--ease-out), scale .55s var(--ease-out), rotate .55s var(--ease-out), clip-path .8s var(--ease-out), box-shadow .15s; transition-delay: calc(var(--i, 0) * 70ms); }
  .js [data-reveal="up"], .js [data-reveal="plate"] { opacity: 0; translate: 0 18px; }
  .js [data-reveal="pop"] { opacity: 0; scale: .86; rotate: -6deg; transform-origin: left bottom; }
  .js [data-reveal="wipe"] > * { clip-path: inset(0 100% 0 0); transition: clip-path .9s var(--ease-out); }
  .js [data-reveal="wipe"].is-in > * { clip-path: inset(0 0 0 0); }
  .js [data-reveal="rule"]::after { transform: scaleX(0); transform-origin: left; transition: transform .7s var(--ease-out) .1s; }
  .js [data-reveal="plate"] .plate__screen img { scale: 1.08; }
  .js [data-reveal].is-in { opacity: 1; translate: 0 0; scale: 1; rotate: 0deg; clip-path: inset(0 0 0 0); }
  .js [data-reveal="rule"].is-in::after { transform: scaleX(1); }
  .js [data-reveal="plate"].is-in .plate__screen img { scale: 1; }
  /* once revealed, drop the stagger delay so hover feedback is immediate */
  .js [data-reveal].is-done { transition-delay: 0s; }
  @media (hover: hover) { .js [data-reveal="plate"].is-in:hover .plate__screen img { scale: 1.03; } }

  /* --- Menu and dialog --- */
  @keyframes menu-in { from { opacity: 0; translate: 0 -14px; } to { opacity: 1; translate: 0 0; } }
  @keyframes sheet-in { from { opacity: 0; translate: 0 22px; } to { opacity: 1; translate: 0 0; } }
  @keyframes fade-in { from { opacity: 0; } to { opacity: 1; } }
  @keyframes fade-out { to { opacity: 0; } }
  .menu[open] { animation: menu-in .24s var(--ease-out); }
  .menu[open] .menu__links li { animation: fade-up .3s var(--ease-out) both; animation-delay: calc(var(--i, 0) * 40ms + 80ms); }
  .sheet[open] { animation: sheet-in .26s var(--ease-out); }
  dialog[open]::backdrop { animation: fade-in .2s ease-out; }
  dialog.is-closing, dialog.is-closing::backdrop { animation: fade-out .14s ease-in forwards; }

  /* --- Form: messages ease in, send button shows progress --- */
  .message:not([hidden]) { animation: fade-up .25s var(--ease-out); }
  @keyframes pulse { 50% { opacity: .45; } }
  .btn[disabled] [data-label] { animation: pulse 1s ease-in-out infinite; }
  #contact-sent-view:not([hidden]) .sent__head img { animation: rise-in .5s var(--ease-out) both; }
}

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

/* ---------- Background: inline career explorer ---------- */
.explorer__stage { position: sticky; top: calc(var(--header-h) + 8px); z-index: 2; display: grid; gap: 8px; padding-bottom: 8px; background: var(--bg); }
.explorer__frame { position: relative; aspect-ratio: 4 / 3; overflow: hidden; background: var(--ink); }
.explorer__frame img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; transition: opacity .3s ease; }
.explorer__frame img.is-active { opacity: 1; }
.entries { width: 100%; border-bottom: 1.5px solid var(--line); }
.entry { display: grid; gap: 4px; width: calc(100% + 20px); margin-inline: -10px; padding: 12px 10px; border-top: 1.5px solid var(--line); text-align: left; transition: background-color .15s, color .15s; }
.entry__text { display: grid; gap: 2px; }
.entry__year, .entry__detail { color: var(--fg2); }
.entry:hover { background: var(--act-bg); color: var(--act-fg); }
.entry:hover .entry__year, .entry:hover .entry__detail { color: var(--act-fg); }
.entry[aria-pressed="true"] { background: var(--fg); color: var(--bg); }
.entry[aria-pressed="true"] .entry__year, .entry[aria-pressed="true"] .entry__detail { color: var(--fog); }
.entry:focus-visible { outline-offset: -4px; }
.explorer__edu { margin-top: 12px; }
@media (min-width: 600px) {
  .explorer__stage { max-width: 440px; }
  .entry { grid-template-columns: 160px 1fr; gap: 20px; }
  .background .record { grid-template-columns: 160px 1fr; }
}
@media (min-width: 1200px) {
  .explorer__stage { max-width: none; top: calc(var(--header-h) + 24px); }
  .explorer__frame { aspect-ratio: 1 / 1; }
}

/* ---------- Contact: direct links, meeting request, spam trap ---------- */
.direct { display: flex; flex-wrap: wrap; gap: 4px 28px; }
.meeting { gap: 12px; }
.meeting .form__pair { margin-bottom: 10px; }
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }