/* Multi-page components (2026-10-04). Loaded after style.css, so rules here
   override the single-page ones where they share a selector. */

.btn svg, .more-link svg, .card-more svg, .log-more svg, .link-list svg, .key small svg,
.path-go svg, .portrait figcaption svg, .profile-media figcaption svg, .g-head svg, .conf small svg {
  width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; flex: none;
}
.btn-dark { background: var(--ink); color: #fff; }
.btn-dark:hover { background: #1d3036; }
.btn-ghost-dark { border-color: var(--line); color: var(--ink); background: transparent; }
.btn-ghost-dark:hover { border-color: var(--teal); color: var(--teal); }
.btn-block { display: flex; width: 100%; }
.more-link { display: inline-flex; align-items: center; gap: 8px; font-weight: 600; color: var(--teal); text-decoration: none; white-space: nowrap; }
.more-link:hover { text-decoration: underline; text-underline-offset: 4px; }
.field .more-link, .hero .more-link { color: var(--teal-bright); }
.sec-head-row { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px 32px; flex-wrap: wrap; max-width: none; }
.sec-head-row > div { display: grid; gap: 14px; max-width: 760px; }

/* hero with the real photo */
.hero-visual { position: relative; }
.portrait {
  position: relative; margin: 0 0 0 auto; width: min(100%, 460px); aspect-ratio: 4 / 5;
  border-radius: 24px; overflow: hidden; background: var(--scan-3);
  box-shadow: 0 0 0 1px var(--scan-line), 0 40px 90px -40px rgba(0, 0, 0, .9);
}
.portrait img { width: 100%; height: 100%; object-fit: cover; }
.portrait::after { content: ""; position: absolute; inset: 55% 0 0; background: linear-gradient(transparent, rgba(4, 9, 12, .82)); pointer-events: none; }
.portrait figcaption { position: absolute; right: 18px; bottom: 16px; z-index: 1; }
.portrait figcaption a {
  display: inline-flex; align-items: center; gap: 8px; padding: 8px 14px; border-radius: 999px;
  background: rgba(7, 12, 15, .7); border: 1px solid #33474f; color: var(--on-scan);
  font-size: .75rem; text-transform: uppercase; letter-spacing: .1em; text-decoration: none;
}
.portrait figcaption a:hover { border-color: var(--teal-bright); color: var(--teal-bright); }
.hero-visual .console { position: absolute; left: 0; bottom: 0; width: min(50%, 232px); padding: 8px; z-index: 2; }
.hero-visual .console-bar { font-size: .5625rem; padding-bottom: 7px; }
.hero-visual .spec { height: 64px; margin-top: 6px; grid-template-columns: minmax(0, 1fr) 22px; }
.hero-visual .console-foot { font-size: .5625rem; padding-top: 7px; gap: 4px 12px; }
.hero-visual .tag { font-size: .5rem; }
.hero-visual .cbar { display: none; }
.brands li { padding: 0; border: 0; }
.brands a {
  display: inline-block; padding: 5px 12px; border-radius: 6px; border: 1px solid #2b3e46;
  color: var(--on-scan); text-decoration: none; transition: border-color .2s, color .2s;
}
.brands a:hover { border-color: var(--teal-bright); color: var(--teal-bright); }

/* clickable stats */
.stat { padding: 0; }
.stat:first-child { padding-left: 0; }
.stat a { display: block; height: 100%; padding: 28px 24px 40px; color: inherit; text-decoration: none; transition: background-color .2s; }
.stat:first-child a { padding-left: 0; }
.stat a:hover { background: rgba(63, 214, 198, .05); }
.stat a:hover .stat-n { color: var(--teal-bright); }

/* cards as links */
.card { padding: 0; }
.card > a { display: flex; flex-direction: column; gap: 12px; height: 100%; padding: 28px; color: inherit; text-decoration: none; }
.card-more, .log-more { display: inline-flex; align-items: center; gap: 8px; margin-top: auto; padding-top: 6px; font-size: .75rem; text-transform: uppercase; letter-spacing: .1em; color: var(--teal); }
.card > a:hover h3 { color: var(--teal); }

.log { padding: 0; }
.log-link { display: flex; flex-direction: column; gap: 8px; height: 100%; padding: 24px; color: inherit; text-decoration: none; }
.log-link:hover { background: #101b20; }
.log-link:hover h3 { color: var(--teal-bright); }
.log-sum { color: var(--on-scan-2); font-size: .9688rem; line-height: 1.6; }
.log-more { color: var(--teal-bright); }
.log:hover { border-color: #2c444d; }

.quote > a { display: block; color: inherit; text-decoration: none; }
.quote:hover { border-color: #2c444d; }
.quote-light { margin-top: 28px; border-color: var(--teal-edge); background: var(--teal-tint); }
.quote-light blockquote { color: var(--ink); }
.quote-light figcaption { color: var(--ink-2); }

/* home gallery teaser */
.teaser { list-style: none; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
.teaser a { position: relative; display: block; aspect-ratio: 4 / 3; border-radius: 14px; overflow: hidden; background: var(--scan-3); }
.teaser img { width: 100%; height: 100%; object-fit: cover; transition: transform .4s ease; }
.teaser a:hover img { transform: scale(1.04); }
.teaser span {
  position: absolute; left: 10px; bottom: 10px; padding: 6px 10px; border-radius: 8px;
  background: rgba(7, 12, 15, .82); color: var(--on-scan); font-size: .6875rem; text-transform: uppercase; letter-spacing: .08em;
}

/* inner-page hero */
.page-hero {
  background: radial-gradient(50% 80% at 85% 0%, rgba(63, 214, 198, .1), transparent 70%), var(--scan);
  color: var(--on-scan); padding-block: clamp(40px, 6vw, 72px) clamp(48px, 7vw, 88px);
}
.page-hero .sec-idx { color: var(--teal-bright); margin: 22px 0 14px; }
.page-hero h1 { font-size: clamp(2.125rem, 5.6vw, 3.75rem); max-width: 18ch; }
.page-lead { margin-top: 18px; max-width: 62ch; color: var(--on-scan-2); font-size: 1.125rem; }
.crumbs { display: flex; flex-wrap: wrap; gap: 8px; font-size: .75rem; text-transform: uppercase; letter-spacing: .1em; color: var(--on-scan-2); }
.crumbs a { color: var(--on-scan-2); text-decoration: none; }
.crumbs a:hover { color: var(--teal-bright); }
.crumbs [aria-current] { color: var(--on-scan); }
.detail-hero .log-tags { margin: 22px 0 14px; }

/* about */
.profile-media { aspect-ratio: 4 / 5; }
.profile-media img { object-position: 30% 50%; }
.profile-media figcaption a { display: inline-flex; align-items: center; gap: 8px; color: #d4e1e4; text-decoration: none; }
.profile-media figcaption a:hover { color: var(--teal-bright); }
.glance { list-style: none; }
.glance li { border-bottom: 1px solid var(--line); }
.glance a { display: block; padding: 14px 0; color: var(--ink); text-decoration: none; font-weight: 500; }
.glance a .mono { display: block; margin-bottom: 2px; font-size: .6875rem; font-weight: 500; text-transform: uppercase; letter-spacing: .12em; color: var(--ink-2); }
.glance a:hover { color: var(--teal); }
.path { list-style: none; display: grid; border-top: 1px solid var(--line); }
.path a {
  display: grid; grid-template-columns: 5rem minmax(0, 1fr) minmax(0, 1fr) 24px; gap: 16px; align-items: center;
  padding: 20px 4px; border-bottom: 1px solid var(--line); color: var(--ink); text-decoration: none; transition: background-color .2s;
}
.path a:hover { background: rgba(10, 106, 100, .06); }
.path-year { font-size: .875rem; color: var(--teal); font-weight: 500; }
.path-what { font: 650 1.125rem/1.3 var(--f-display); font-stretch: 104%; }
.path-where { color: var(--ink-2); }
.path-go { color: var(--teal); display: grid; place-items: center; }
.two-col { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(32px, 6vw, 80px); }
.big-text { margin-top: 12px; font: 500 clamp(1.1875rem, 2vw, 1.375rem)/1.5 var(--f-body); }
.big-text a { color: var(--teal); }
.plain-list { margin-top: 10px; color: var(--ink-2); }
.gap-top { margin-top: 32px; }

/* services */
.jump { display: flex; flex-wrap: wrap; gap: 8px; margin: 28px 0 8px; }
.jump a { padding: 8px 14px; border-radius: 999px; border: 1px solid var(--line); background: var(--card); color: var(--ink); font-size: .75rem; text-transform: uppercase; letter-spacing: .06em; text-decoration: none; }
.jump a:hover { border-color: var(--teal); color: var(--teal); }
.svc-list { display: grid; }
.svc { display: grid; grid-template-columns: minmax(0, 20rem) minmax(0, 1fr); gap: 24px 48px; padding: 40px 0; border-bottom: 1px solid var(--line); scroll-margin-top: 80px; }
.svc-head { display: grid; grid-template-columns: auto 1fr; align-items: center; gap: 12px 14px; align-content: start; }
.svc-head h2 { grid-column: 1 / -1; font: 700 clamp(1.375rem, 2.4vw, 1.75rem)/1.2 var(--f-display); font-stretch: 108%; }
.svc-body p { color: var(--ink-2); max-width: 64ch; }
.svc-body p + p { margin-top: 12px; }
.svc-h { margin: 26px 0 10px; font-size: .75rem; font-weight: 500; text-transform: uppercase; letter-spacing: .14em; color: var(--ink-2); }
.svc-h span { margin-left: 6px; color: var(--teal); }
.link-list { list-style: none; border-top: 1px solid var(--line); }
.link-list a {
  display: grid; grid-template-columns: minmax(0, 1fr) 20px; gap: 2px 16px; align-items: center;
  padding: 14px 4px; border-bottom: 1px solid var(--line); color: var(--ink); text-decoration: none;
}
.link-list a span { font-weight: 600; }
.link-list a small { grid-row: 2; color: var(--ink-2); font-size: .875rem; }
.link-list a svg { grid-row: 1 / span 2; grid-column: 2; color: var(--teal); transition: transform .2s; }
.link-list a:hover { color: var(--teal); }
.link-list a:hover svg { transform: translateX(3px); }
.steps { list-style: none; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 12px; }
.steps a {
  display: flex; flex-direction: column; gap: 10px; height: 100%; padding: 22px; border-radius: var(--r);
  background: var(--card); border: 1px solid var(--line); color: var(--ink); text-decoration: none; transition: border-color .2s, transform .2s;
}
.steps a:hover { border-color: var(--teal-edge); transform: translateY(-2px); }
.step-n { font-size: .75rem; color: var(--teal); }
.steps h3 { font: 650 1.25rem/1.2 var(--f-display); font-stretch: 106%; }
.steps p { color: var(--ink-2); font-size: .9375rem; }

/* expertise keys as links */
.group h2 { font-size: .8125rem; font-weight: 500; text-transform: uppercase; letter-spacing: .14em; color: var(--ink-2); padding-top: 14px; }
.key { padding: 0; }
.key a { display: block; height: 100%; padding: 14px 18px 16px; color: inherit; text-decoration: none; border-radius: 12px; }
.key a:hover { background: rgba(63, 214, 198, .06); }
.key small { display: flex; align-items: center; gap: 6px; margin-top: 10px; font: 500 .6875rem/1.3 var(--f-mono); text-transform: uppercase; letter-spacing: .06em; color: var(--teal-bright); }
#systems, .group[id], .key[id] { scroll-margin-top: 80px; }

/* experience */
.job h2 { font: 650 clamp(1.25rem, 2.4vw, 1.5rem)/1.25 var(--f-display); font-stretch: 106%; }
.job { scroll-margin-top: 80px; }
.job-body .link-list { max-width: 640px; }

/* education */
.conf a { display: block; color: inherit; text-decoration: none; }
.conf small { display: inline-flex; align-items: center; gap: 6px; margin-top: 10px; font-size: .6875rem; text-transform: uppercase; letter-spacing: .08em; color: var(--teal); }
.conf-ex:hover { border-color: var(--teal); }
.attended { list-style: none; columns: 2 280px; column-gap: 32px; }
.attended li { break-inside: avoid; padding: 10px 0; border-bottom: 1px solid var(--line); color: var(--ink-2); }
.attended b { color: var(--ink); font-weight: 600; }
#qualifications, #memberships, #rotations, #conferences { scroll-margin-top: 80px; }

/* gallery page */
.g-group { padding-top: 40px; scroll-margin-top: 80px; }
.g-group[hidden] { display: none; }
.g-head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 6px 20px; margin-bottom: 16px; padding-bottom: 12px; border-bottom: 1px solid var(--scan-line); }
.g-head h2 { font: 650 1.375rem/1.2 var(--f-display); font-stretch: 106%; }
.g-head h2 a { display: inline-flex; align-items: center; gap: 8px; color: var(--on-scan); text-decoration: none; }
.g-head h2 a:hover { color: var(--teal-bright); }
.g-head p { color: var(--on-scan-2); font-size: .9375rem; }
.field-page { padding-top: clamp(32px, 4vw, 48px); }

/* lightbox link */
.lb-link { margin-left: 10px; color: var(--teal-bright); font-weight: 600; text-decoration: none; }
.lb-link:hover { text-decoration: underline; }

/* work detail */
.detail { padding-top: clamp(32px, 4vw, 48px); }
.detail-cover {
  display: block; width: 100%; padding: 0; border: 0; border-radius: 20px; overflow: hidden; cursor: zoom-in;
  background: var(--scan); margin-bottom: clamp(32px, 4vw, 48px);
}
.detail-cover img { width: auto; max-width: 100%; height: auto; max-height: 72vh; margin-inline: auto; }
.detail-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 20rem); gap: clamp(32px, 5vw, 64px); align-items: start; }
.detail-body p { color: var(--ink-2); max-width: 68ch; }
.detail-body p + p { margin-top: 16px; }
.detail-body .lead { font: 500 clamp(1.1875rem, 2vw, 1.375rem)/1.5 var(--f-body); color: var(--ink); }
.did { list-style: none; display: grid; gap: 10px; }
.did li { position: relative; padding-left: 28px; }
.did li::before { content: ""; position: absolute; left: 4px; top: .55em; width: 10px; height: 10px; border-radius: 3px; background: var(--teal); }
.facts { position: sticky; top: 88px; display: grid; gap: 12px; padding: 22px; border-radius: var(--r); background: var(--card); border: 1px solid var(--line); }
.facts dl { margin: 0 0 6px; }
.facts dl div { padding: 10px 0; border-bottom: 1px solid var(--line); }
.facts dt { font-size: .6875rem; text-transform: uppercase; letter-spacing: .12em; color: var(--ink-2); }
.facts dd { margin: 2px 0 0; font-weight: 500; }
.facts dd a { color: var(--teal); }
.detail-photos { margin-top: clamp(48px, 6vw, 72px); }
.detail-photos .g-item { background: var(--paper-2); }
.pager { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; margin-top: clamp(48px, 6vw, 72px); }
.pager a {
  display: grid; gap: 6px; padding: 20px 22px; border-radius: var(--r); border: 1px solid var(--line); background: var(--card);
  color: var(--ink); text-decoration: none; font: 650 1.125rem/1.3 var(--f-display); font-stretch: 104%; transition: border-color .2s;
}
.pager a span { font-family: var(--f-mono); font-weight: 500; font-size: .6875rem; letter-spacing: .12em; text-transform: uppercase; color: var(--teal); font-stretch: 100%; }
.pager a:hover { border-color: var(--teal); }
.pager-next { text-align: right; }

/* contact page + form */
.contact-page { padding-top: clamp(28px, 4vw, 44px); }
.contact-page .contact-in { margin-top: 28px; align-items: start; }
.contact-page h1 { font-size: clamp(2.75rem, 8vw, 5.25rem); }
.contact-list .arr { display: grid; place-items: center; color: var(--teal-bright); }
.contact-list .arr svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; transition: transform .2s; }
.contact-list a:hover .arr svg { transform: translate(2px, -2px); }
.msg-form { display: grid; gap: 8px; padding: clamp(22px, 3vw, 32px); border-radius: 20px; background: var(--scan-2); border: 1px solid var(--scan-line); }
.msg-form h2 { font-size: .75rem; font-weight: 500; text-transform: uppercase; letter-spacing: .14em; color: var(--teal-bright); }
.form-note { color: var(--on-scan-2); font-size: .9375rem; margin-bottom: 8px; }
.msg-form label { margin-top: 8px; font-weight: 500; font-size: .9375rem; }
.msg-form label small { color: var(--on-scan-2); font-weight: 400; }
.msg-form input, .msg-form select, .msg-form textarea {
  width: 100%; padding: 12px 14px; border-radius: 10px; border: 1px solid #2b3e46; background: var(--scan);
  color: var(--on-scan); font: 400 1rem/1.4 var(--f-body);
}
.msg-form textarea { resize: vertical; min-height: 120px; }
.msg-form input:focus, .msg-form select:focus, .msg-form textarea:focus { outline: 2px solid var(--teal-bright); outline-offset: 1px; border-color: transparent; }
.form-error { color: #ff9b9b; font-size: .9375rem; }
.form-actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 14px; }
@media (pointer: coarse) { .msg-form input, .msg-form select, .msg-form textarea { font-size: 16px; } }

/* call-to-action band */
.cta-band { background: var(--scan-2); color: var(--on-scan); border-top: 1px solid var(--scan-line); padding-block: clamp(48px, 7vw, 80px); }
.cta-in { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 24px 48px; }
.cta-band .sec-idx { color: var(--teal-bright); margin-bottom: 12px; }
.cta-band h2 { font-size: clamp(1.625rem, 3.4vw, 2.5rem); max-width: 22ch; }
.cta-actions { display: flex; flex-wrap: wrap; gap: 12px; }

/* footer sitemap */
.site-footer { border-top: 1px solid var(--scan-line); }
.footer-grid { display: grid; grid-template-columns: minmax(0, 1.3fr) repeat(3, minmax(0, 1fr)); gap: 32px; padding-block: 56px 40px; }
.foot-logo img { width: 92px; height: auto; }
.foot-brand p { margin-top: 14px; line-height: 1.6; }
.foot-col { display: flex; flex-direction: column; gap: 4px; }
.foot-h { margin-bottom: 8px; font-size: .6875rem; text-transform: uppercase; letter-spacing: .14em; color: var(--teal-bright); }
.foot-col a { padding: 4px 0; color: var(--on-scan-2); text-decoration: none; overflow-wrap: anywhere; }
.foot-col a:hover { color: var(--teal-bright); }

/* 404 */
.nf { min-height: 60vh; }
.nf-links { margin-top: 32px; max-width: 420px; border-top-color: var(--scan-line); }
.nf-links a { color: var(--on-scan); border-bottom-color: var(--scan-line); }
.nf-links a svg { grid-row: 1; color: var(--teal-bright); }

/* responsive for the new parts */
@media (max-width: 1099px) {
  .steps { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .footer-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 959px) {
  .hero-visual { max-width: 520px; padding-bottom: 0; }
  .portrait { margin: 0; width: 100%; }
  .hero-visual .console { position: relative; width: 100%; margin-top: 14px; }
  .hero-visual .spec { height: 84px; }
  .hero-visual .console-bar, .hero-visual .console-foot { font-size: .625rem; }
  .teaser { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .svc { grid-template-columns: minmax(0, 1fr); gap: 16px; }
  .detail-grid { grid-template-columns: minmax(0, 1fr); }
  .facts { position: static; }
  .two-col { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 700px) {
  .steps { grid-template-columns: minmax(0, 1fr); }
  .path a { grid-template-columns: 3.5rem minmax(0, 1fr) 20px; }
  .path-where { grid-column: 2; grid-row: 2; font-size: .9375rem; }
  .path-go { grid-column: 3; grid-row: 1 / span 2; }
  .pager { grid-template-columns: minmax(0, 1fr); }
  .pager-next { text-align: left; }
  .footer-grid { grid-template-columns: minmax(0, 1fr); gap: 28px; }
  .stat a { padding: 22px 16px 28px; }
  .teaser { gap: 8px; }
  .teaser span { font-size: .5625rem; padding: 4px 7px; left: 6px; bottom: 6px; }
}

/* <button> elements get a UA background; the outline buttons must stay transparent */
button.btn-line, button.btn-ghost-dark { background: transparent; }